@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard.woff') format('woff');
    font-style: normal;
  }

/* 모달 */
  .modal{display: block; position: fixed; z-index: 100; left: 0; top: 0; bottom:0; 
    max-width:100%; width:100%;  height: auto;  background-color: hsla(0,0%,0%,0.4); padding-left:16px; padding-right:16px;    z-index: 9999999;}
    .popup_m.modal{width:auto !important; }
    .modal-wrap {position: relative; width: auto; margin:auto; height: auto;border-radius: 20px;
        top:50%; transform: translateY(-50%); background-color:#fff; z-index: 101;}
    
    .modal-xl{max-width:1200px;}
    .modal-md{max-width:640px;}
    .modal-md2{max-width:500px;}
    .modal-sm{max-width:1030px;}
    .modal-xs{max-width:360px;}
    
    .modal-container{max-width:1024px; width: 100%; margin:auto; z-index:200;
    position: relative;
    /* display: -ms-flexbox; display: flex; -ms-flex-direction: column;  flex-direction: column;  pointer-events: auto; */
     border-radius: .3rem;
    outline: 0; }
    
    /* 2020-03-19 */
    /* .modal-bd.bd{margin-left:0 !important; margin-right:0 !important; padding:0 !important;} */
    
    .modal ul.btn-container > li{display: inline-block; /* width:20%; */margin-top:16px;}
    .modal ul.btn-container > li a{display: block;}
    /* .modal ul.btn-container > li i{width:100%; height:100%; } */
    .modal ul.btn-container > li .img{position:relative;display: block}
    .modal ul.btn-container > li .img img{padding:5px; transform:scale(0.9); transition: transform 0.3s;}
    .modal ul.btn-container > li .img::before{content:''; display: block; width:100%; height:100%; background-color: #f5f5f5; position:absolute; z-index: -1;border-radius: 20px;}
    .modal ul.btn-container > li .img:hover img{transform:scale(1);}
    
    .modal ul.btn-container > li:last-child{margin-right:-4px;}
    .modal ul.btn-container > li .fa{position:absolute; right:15px; top:15px;font-size:1.25rem; color:#333}

    
    .modal ul.btn-container > li .btn{min-width: 128px; font-size:0.9em; height:46px;}
    
    /* 모달 닫기 */
    .modal-close{position: absolute; right:0px; top:-40px; font-size: 1.5em; line-height:1; cursor: pointer; display: block; z-index: 102; color: #fff;}
    
    .modal-container .modal-out-tit{font-family: 'Pretendard'; padding-bottom: 8px; font-weight: 700; font-size: 1.5em; color: #b7a695;}
    .sear_produ .modal-container .modal-out-tit{ border-bottom: 2px solid #222;margin-bottom:20px;}
    
    .modal-container{padding:40px;}
    .modal-container .example .img{padding-bottom:6px;}
    .modal-container .example .text{line-height: 1.5; padding-bottom:12px;}
    .modal-container .example .text .content{word-break: break-all;
        white-space: normal;}
    
    .board_content{padding-bottom:24px;}
    .board_content label{display: block; padding-bottom:8px;}
    .file_update{width:100%; border:1px solid #dedede; background:#fff; height:32px; vertical-align: middle;}
    textarea{ border:1px solid #dedede; height:200px; width:100%; padding: 10PX; margin-bottom: 20px;}
    
    .modal-container input[type=button]{padding-left:16px; padding-right:16px; cursor: pointer;}
    
    .modal-container .table_btn{text-align:center; padding-top:0;}
    .modal-container .table_btn ul li{text-align:center;display:inline-block; margin:0 3px;}
    
    .guide_text{font-size:13px; padding-top:12px;}
    
    .fileBox ul{margin:0 -8px;}
    .fileBox ul li{float:left; padding:0 8px; width:65%;}
    .fileBox ul li:last-child{width:35%;}
    .fileBox {width:100%;}
    .fileBox .fileName {width:100%; height:30px;line-height:30px; border:none; background:rgba(255,255,255,0); border-bottom:1px solid #d1d1d1; vertical-align:middle}
    .fileBox .btn_file {border:1px solid #d1d1d1; border-radius: 4px; background:#fff; height:30px;font-size:0.8em;line-height:30px;text-align:center;vertical-align:middle}
    .fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
    
    .modal_table{display: table; margin:0 auto;} 
    
    .modal_img_container{text-align: center;}
    .modal_img_container img{width:100%;}
    .wi_select_common {
    width: 123px;
    height: 45px;
    padding: 0 18px;
    vertical-align: middle;
    background: url(https://s3.ap-northeast-2.amazonaws.com/lbplatform/images/timing/152711839681325.png) no-repeat 87% 50%;
    background-color: #fff;
    -webkit-appearance: none;
    }
    
    
    .simple_input{ text-align: center; padding-top:12px;}
    .simple_input:first-child{padding-top:0;}
    .simple_input ul li{display:inline-block;}
    .wi_btn_common{height: 45px; background: #888889; color: #fff; padding:0 16px;}
    
    
    .modal_img{max-height:100vh;}


.modal_title h5{font-family: 'Cafe24Ssurround';font-size: 25px; text-align: center;}
.modal_title p{font-size: 18px;color: #666;line-height: 1.5;margin-top: 10px; text-align: center;}
.modal_but button{background: #F97457;color: #fff;padding:16px;border-radius: 40px;font-size: 18px;width: 100%;margin-top: 30px;;}


/*input_modal*/
.input_depth_m li{display: flex;border-bottom:1px solid #ddd;margin-top: 20px;align-items: center;;}
.input_depth_m li p{width:100px;font-weight: 600;text-align: left;padding:10px;font-size: 20px;}
.input_depth_m li div{width: calc(100% - 100px);}
.input_depth_m li div select,
.input_depth_m li div input{width: 100%;border:none;outline: none;padding:10px;font-size: 18px;font-family: inherit;}
.input_depth_m li input::placeholder{font-family: inherit;font-size: 16px;}
.wish_select  {margin-top:30px;}
.wish_select label.no [type="radio"]{background: rgba(0,0,0,0.4);border: 1px solid #888;}
.radio_style label.no [type="radio"]:checked + span{color: #666;    font-weight:400;}


.phone_number{display: flex;align-items: center;margin-top: 20px;;} 
.phone_number select{width: 120px;;}
.phone_number span{margin:0 10px;color: #888;}
.phone_number input{width: calc(100% - 140px);;}
.phone_number select,
.phone_number input{border:1px solid #ddd;outline: none;;padding:14px;border-radius: 4px;;}

.input_modal02 .check_wrap{text-align: left;margin-top: 10px;} 
.input_depth_m li.check_wrap{border:none;}


.information_modal .modal_title > div{border:1px solid #ddd;padding:10px;height: 300px;overflow-y: scroll;margin-top: 10px;;}




.seven_modal .modal-container{padding:0;}
.seven_modal .modal-bd{background-color: #FCEDD1; overflow: hidden;padding-bottom:100%;;border-radius: 20px; }
.seven_modal01 .modal-bd::before{content: '';display: block;width: 100%;height: 100%;position: absolute;left:0;top:0;    z-index: 999;}
.seven_modal .img01{width: 200px;height: 200px; margin:0 auto;position: absolute;left:50%;top:40%;transform: translate(-50%,-50%); transform: scale(0);
  animation-name: img02_anima;
  animation-duration: 1.3s;
  animation-duration: ease-in;
  animation-iteration-count:1;
  animation-direction:alternate;
  animation-fill-mode: forwards;
  animation-delay: .7s;}

.seven_modal01 .modal-bd{background-color: #FDE3CE;}
.seven_modal01 .modal_but{position: absolute;left:50%;top:73%;transform: translate(-50%,-50%);width: 100%;font-family: 'jalnan';z-index: 9999; text-align: center; opacity: 0;
  animation-name: last_view_but;
  animation-duration: .7s;
  animation-duration: linear;
  animation-iteration-count:1;
  animation-direction:alternate;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
.seven_modal01 .modal_but button{background: transparent; border-radius: 0;font-size: 40px;color: #fff; background-color: #FF988A; display: inline-block; width: auto; border-radius: 70px; padding: 23px 50px 20px;}
.seven_modal01 .modal_but span{font-size:24px ;display: block;font-family: 'Cafe24Ssurround';margin-top: 10px; color: #85473f;}

.seven_modal02 .modal-bd{padding-bottom: 115%;}
.seven_modal02 .modal_title {position: absolute;top:40px;left:50%;transform: translate(-50%,0%);width: 100%;}
.seven_modal02 .modal_title span{font-family: inherit;}

.seven_modal02 .modal_title h5{color: #473C39; line-height: 1.4;}
.seven_modal02 .modal_title h5 span{color: #F97457;}
.seven_modal02 .modal_but{position: absolute;bottom:40px;left:50%;transform: translate(-50%,0%);width: calc(100% - 80px); z-index: 10;}

.seven_modal02 .last_view_but{padding-bottom:100%;    position: absolute; left: 0; top: 0;width: 100%; z-index: 9;}
    /* 키프레임 이름 = 애니메이션 이름 */
    @-webkit-keyframes last_view_but {
        0% {
            
        }
        100% {
           opacity: 1;
        }
    }
    
.seven_modal02 .modal-bd{background-color: #FCEDD1}
.seven_modal02 .last_view_but, .modal_bg_absol .bg_people, .seven_modal02 .modal_but{ opacity: 0;
  animation-name: last_view_but;
  animation-duration: .7s;
  animation-duration: linear;
  animation-iteration-count:1;
  animation-direction:alternate;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
.seven_modal02 .modal-bd::before{content:'';display: block;width: 100%;height: 100%;position: absolute;left:50%;top:40%;transform: translate(-50%,-50%) ;background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SEVENSTAR3/167866051281996.png); background-repeat: no-repeat; background-size: 65%;  background-position: center;opacity: 0;
  animation-name: seven_modal02_bg;
  animation-duration: .5s;
  animation-duration: linear;
  animation-iteration-count:1;
  animation-direction:alternate;
  animation-fill-mode: forwards;
  animation-delay:0;}
  
  /* 키프레임 이름 = 애니메이션 이름 */
  @-webkit-keyframes seven_modal02_bg {
    0% {
        transform:translate(-50%,-50%);  opacity:0;
    }
    100% {
        transform:translate(-50%,-50%); opacity: 1;
    }
}

.modal_bg_absol .bg_fl1, .modal_bg_absol .bg_fl2{
  opacity: 0;
  animation-name: last_view_but;
  animation-duration: 2s;
  animation-duration: linear;
  animation-iteration-count:1;
  animation-direction:alternate;
  animation-fill-mode: forwards;
  animation-delay: .5s;
}
.modal_bg_absol .bg_fl1{width: 83px; height: 125px;  top: 42%; left: 12%;     
}
.modal_bg_absol .bg_fl1::before{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SEVENSTAR3/167865785331844.png) no-repeat center center; background-size: 100%; content: ''; position: absolute; width: 100%; height: 100%;}
.modal_bg_absol .bg_fl2{width: 105px; height: 134px;  top: 41%; right: 9%;     
}
.modal_bg_absol .bg_fl2::before{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SEVENSTAR3/167865784846206.png) no-repeat center center; background-size: 100%; content: ''; position: absolute; width: 100%; height: 100%; }
.modal_bg_absol .bg_people{width: 295px; height: 143px;  bottom: 93px;  left: 50%; transform: translateX(-50%);}
.modal_bg_absol .bg_people::before{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SEVENSTAR3/167866077764614.png) no-repeat center center; background-size: 100%; content: ''; position: absolute; width: 100%; height: 100%; }


.seven_modal02 .img02.sevenstar_view img{display: none; }
.seven_modal02 .img02.on_1 .sevenstar_1{display: block;}
.seven_modal02 .img02.on_2 .sevenstar_2{display: block;}
.seven_modal02 .img02.on_3 .sevenstar_3{display: block;}
.seven_modal02 .img02.on_4 .sevenstar_4{display: block;}
.seven_modal02 .img02.on_5 .sevenstar_5{display: block; }
/* .seven_modal02 .img02.on_6 .sevenstar_6{display: block;}
.seven_modal02 .img02.on_7 .sevenstar_7{display: block;} */



.seven_modal02 .img02{width: 230px;height: 230px;margin:0 auto; position: absolute;left:50%;top:40%;transform: translate(-50%,-50%) scale(0);z-index: 99; display: flex; align-items: center; justify-content: center;
    animation-name: img02_anima;
    animation-duration:1.5s;
    animation-duration: linear;
    animation-iteration-count:1;
    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-delay:.5s;
  }

  .seven_modal02 .img02 .sevenstar_5_losing{width: 90%;}

  .seven_modal02 .img02 .sevenstar_4{width: 43px; height: 145px;}
  
  /* 키프레임 이름 = 애니메이션 이름 */
  @-webkit-keyframes img02_anima {
    0% {
        transform: translate(-50%,-50%) scale(0);
    }
    100% {
      transform:translate(-50%,-50%) scale(1);
    }
}
.seven_modal02 .img03{width: 300px;height: 300px;margin:0 auto;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);

    animation-name: img03_anima;
    animation-duration:3.5s;
    animation-duration: linear;
    animation-iteration-count:1;
    animation-direction:alternate;
    animation-fill-mode: forwards;
  }
  
  /* 키프레임 이름 = 애니메이션 이름 */
  @-webkit-keyframes img03_anima {
    0% {
      transform:translate(-50%,-50%) scale(0) rotate(0);
    }
    80% {
        transform: translate(-50%,-50%) scale(1) rotate(360deg);
    }
    100% {
      transform:translate(-50%,-50%) scale(0) rotate(0);
    }
  }

/* 꽝 모달 */
/* win모달일 시 숨김 */
.seven_modal02 h5.losing_tit{display: none;}
.seven_modal02 .modal_but.losing_btn{display: none;}

/* losing 모달일 시 */
.seven_modal02.losing_modal .modal-bd{padding-bottom: 100%;}
.seven_modal02.losing_modal h5.win_tit{display: none;}
.seven_modal02.losing_modal h5.losing_tit{display: block;}
.seven_modal02.losing_modal .modal_bg_absol{display: none;}
.seven_modal02.losing_modal .modal-bd::before{display: none;}
.seven_modal02.losing_modal .img02{top: 55%; width: 370px; height: 370px; z-index: 1;}
.seven_modal02.losing_modal .modal_but.losing_btn{display: block;}
.seven_modal02.losing_modal .modal_but.win_btn{display: none;}


  .seven_modal02 .img04{width: 100%;height: 100%;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);opacity: 0;
    animation-name: seven_modal02_bg;
    animation-duration:3s;
    animation-duration: linear;
    animation-iteration-count:1;
    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-delay:3.5s;


}
  .seven_modal02 .img04 img{position: absolute;left:0;top:0;;}

  .seven_modal02 .img04 .in01,
  .seven_modal02 .img04 .in03{
    animation-name: img04_01;
    animation-duration:5s;
    animation-duration: linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards;
  }
  
  /* 키프레임 이름 = 애니메이션 이름 */
  @-webkit-keyframes img04_01 {
    0% {
        transform: translate(0px,10px);
    }
    100% {
        transform: translate(-10px,-0px);
    }
  }

  .seven_modal02 .img04 .in02,
  .seven_modal02 .img04 .in04{
    animation-name: img04_02;
    animation-duration:5s;
    animation-duration: linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards;
  }
  
  /* 키프레임 이름 = 애니메이션 이름 */
  @-webkit-keyframes img04_02 {
    0% {
        transform: translate(0px,-20px);
    }
    100% {
        transform: translate(10px,0px);
    }
  }



/* ********************************************* *
* 1400px max
* ********************************************* */
@media (max-width:1400px){
    .modal-sm.password_modal {width: 60%;}
    .password_modal .input_box { width: 75%;}
    .password_modal .input_box .password {width: 23%;}
    .modal-sm.shop_view_next {width: 50%;}
}

/********************************************* *
* height 800px max
* ********************************************* */
@media (max-width:800px){
    .modal-sm.shop_view_next {width: 70%;}

    .cupon_modal .shopping_basket .in_body ul{display: inherit;}
    .cupon_modal .shopping_basket .table_body .how{width:100%;}
    .cupon_modal .shopping_basket .table_body .p-name{width:100%;}
    .cupon_modal .shopping_basket .table_body .but {position: absolute; right: 0; top: 50%;transform: translateY(-50%);}



}
/* ********************************************* *
* 768px max
* ********************************************* */
    @media (max-width:768px){
  



}

    /* ********************************************* *
    * width 640px max
    * ********************************************* */
    @media (max-width:640px){

        .modal-container {padding: 25px;}

        .modal_title h5 { font-size: 22px;}
        .modal_title p {font-size: 14px;    margin-top: 0;}   
        .phone_number {margin-top: 10px;}
        .phone_number select, .phone_number input {  padding: 12px;}
        .modal_but button {  padding: 12px;   font-size: 14px;margin-top: 20px;}
        .modal_bg_absol .bg_people{bottom: 81px;}
        .seven_modal02.losing_modal .img02{width: 340px; height: 340px; z-index: 1;}


        .input_depth_m li p{font-size: 14px;width: 70px;}
        .input_depth_m li div {width: calc(100% - 70px);}

        .input_depth_m li p,
        .input_depth_m li div input{padding:8px;font-size: 14px;}
        .input_depth_m li div input::placeholder{font-size: 14px;}


    }
    
    
        /* ********************************************* *
    * 500px max
    * ********************************************* */
        @media (max-width:500px){
          .seven_modal02 .modal-bd::before{background-size: 75%;}
          .modal_bg_absol .bg_fl1{width:62px; height: 81px; top: 48%; left: 5%;}
          .modal_bg_absol .bg_fl2{width: 73px; height: 97px; top: 46%; right: 5%;}
          .modal_bg_absol .bg_people{width: 225px; height: 108px; bottom: 65px;}
          .seven_modal02 .img02{width: 50%; }
          .seven_modal02 .img02 .sevenstar_4{width: 20%; height: auto;}
          .seven_modal02.losing_modal .img02{width: 70%;}

            .phone_number select {width:80px;}
            .phone_number span{margin: 0 5px;}
            .phone_number input {width: calc(100% - 90px);}

            .seven_modal .img01{top: 37%;}
            .seven_modal01 .modal_but button{border-radius: 70px; padding: 20px 40px 18px;}
            .seven_modal01 .modal_but button {    font-size: 30px;}
            .seven_modal01 .modal_but span {font-size: 20px;}


            .seven_modal02 .modal_title {top: 25px;}
            .seven_modal02 .modal_but{bottom: 30px;}
            .modal_but button {padding: 10px;font-size: 12px;}

        }

/* ********************************************* *
* 400px max
* ********************************************* */
@media (max-width:400px){
    .modal-container {padding: 16px;}
    .modal_title p{word-break: keep-all;}
    /* .modal_title p br{display: none;} */

    .seven_modal .img01{width: 130px; height: 150px; top: 42%;}
    .seven_modal01 .modal_but button{border-radius: 66px; padding: 16px 30px 14px;}
    .seven_modal01 .modal_but button {font-size: 26px;}
    .seven_modal01 .modal_but span {font-size: 17px;}

    .modal_title h5 { font-size: 16px;}
    .modal_title p {font-size: 12px;    margin-top: 0;}   

    .input_depth_m li{display: block;}
    .input_depth_m li p{padding:0px;}
    .input_depth_m li div{width: 100%;}
    .input_modal .radio_style [type="radio"] {padding: 20px;}
    .input_modal .radio_style span { top: 50%;font-size: 12px;}

    .modal_bg_absol .bg_people{width: 195px; height: 96px; bottom: 64px;}

}

/* ********************************************* *
* 350px max
* ********************************************* */
@media (max-width:350px){
  .seven_modal02 .modal-bd{padding-bottom:125%;}
  .seven_modal01 .modal_but button{font-size: 24px;}
  .seven_modal01 .modal_but span{font-size: 14px;}
  .seven_modal01 .modal_but button{border-radius: 60px; padding: 14px 26px 12px;}
  .modal_bg_absol .bg_fl1{width: 49px; top: 44%;}
  .modal_bg_absol .bg_fl2{width: 61px; top: 42%;}
  .modal_bg_absol .bg_people{width: 163px; height:81px;}
  .seven_modal02.losing_modal .img02{width: 60%;}

}

/* ********************************************* *
* 300px max
* ********************************************* */
@media (max-width:300px){
  .seven_modal02 .modal-bd{padding-bottom:130%;}
}