@font-face {
    font-family: 'Spoqa Han Sans';
    src: url(https://frontend-design-system.socar.kr/fonts/SpoqaHanSansRegular.woff2);
    font-weight: normal;
}

@font-face {
    font-family: 'Spoqa Han Sans';
    src: url(https://frontend-design-system.socar.kr/fonts/SpoqaHanSansBold.woff2);
    font-weight: bold;
}






body,html,section{ background:#ebf6ff; overflow-x: hidden; margin: 0px;  word-break:keep-all; overflow-wrap:break-word;
font-family: 'Spoqa Han Sans',sans-serif; }

p{ margin-block-end: 0px; margin-block-start: 0px; margin-right: 0px;}
{color:#fff; filter: drop-shadow(0px 0px 10px rgba(70, 129, 196, 0.2));}
h1,h2{color:#fff;}
h3{color:#161D24;}
b1,b2,c1{color:#28323C;}

a{text-decoration: none; color:#374553;}

h1,c1{font-weight: bold;}
h2,b1,b2,c2,c3{font-weight: normal;}

h1{font-size:44px; line-height:54px; margin-block-end:18px; margin-block-start: 10px;}
h2{font-size:16px; line-height:26px; margin-block-end:16px; margin-block-start: 0px; }
h3{font-size:24px; line-height:36px; margin-block-start: 8px;     margin-block-end: 8px;}
h4{font-size:20px; line-height:32px; margin-block-start: -40px;     margin-block-end: 40px;}


b1{font-size:18px;line-height:26px;}
b2{font-size:14px;line-height:22px;color:#646f7c; margin-block-start: 8px;}


c1{font-size:14px;line-height:22px;}
c2{font-size:14px;line-height:22px; color:#646f7c; margin-block-start: 8px;}


.btn_f{
position: fixed;
background-color: #00b8ff;
color: #fff;
left: 0;
right: 0;
text-align: center;
bottom: 0;
border-radius: 8px;
margin: 12px;
margin-bottom: 16px;
padding: 24px calc(constant(safe-area-inset-bottom) + 12px);
padding: 24px calc(env(safe-area-inset-bottom) + 12px);
z-index: 999;	}


#car-02{
  background: #ffffff;
  padding-top: 0px;
  padding-bottom: 30px;

}

#car-02 .text { position: relative;margin: auto 0;
padding: 0px 0px 60px 0px;text-align: center; z-index: 01;}




.swiper-container {overflow: initial; height: 100%; width: 100%;   margin-top: 0px;}
.swiper-wrapper{width: 100%; height: 100%;   margin: 0px;}
.swiper-slide { width: 100%; margin: 0px; }


.sw_txt {

  box-shadow: -1px 1px 20px rgb(0 0 0 / 11%);


width: 100%;
height: 100%;
padding: 32px 28px;
  border: 0px solid #f5f5f5;
  box-sizing: border-box;
  border-radius: 10px;
   color: #374553; text-align:center;}
   .sw_txt img {
     width: 100%;top:37px;
      position: relative;}
        .sw_txt p{padding-bottom: 12px;}
        .sw_txt b1{font-size:18px;line-height:24px;}




#main_mo{
  background: #f7f7f7;
  background-size:cover;
  background-position:center;
  height:90vh;
  text-align:center;}

#main_mo .text {
  position: static;
  padding-top: 60px;
  text-shadow: 0 0 5px #00000080;
  padding: 65% 24px 0px 24px;
}


#main_pc {display: none;}


.bg {
    position: relative;
    z-index: 0;
    top: 0px;
    display: block;
}





.container_coupon {background:#ffF;   padding:0px;}
#coupon1{ background: #ffF;overflow-y: hidden; padding-bottom: 90px;padding-top: 150px;}
#coupon1 .text {position: relative;margin: auto 0;padding: 0px 24px;text-align: center; z-index: 01;}

#coupon1 .event_box {text-align: center; padding:80px 24px 40px 24px;}
  #coupon1 .event_box b2 {text-align: center;font-weight: bold;border: 1px solid;border-radius: 40px;border-color: #646f7c;
  padding:10px 20px 10px 20px;color:#646f7c;}



.coupon_subtext {text-align:center;padding: 10px 24px;}
.coupon_subtext c2{font-size:14px; margin-block-start: 10px;}


#coupon_car_mo{background: none;padding-bottom: 40px;   }
#coupon_car_mo img{width: 100%;}
#coupon_car_pc {display:none;}


.swiper-container2 { width: 100%; height: 180px;  margin-top: 50px;}

.sw_txt21 {width: 94%;height: 100%;padding: 38px 22px 40px 22px;border: 0px solid #EAF4FC;  box-sizing: border-box;  -webkit-mask: radial-gradient(circle at 12px, #0000 12px, #fff 0);    -webkit-mask-position: -12px;border-radius: 10px;   color: #374553; text-align:center;}
.sw_txt21 p{padding-bottom: 12px;}
.sw_txt21 b1{font-size:14px;line-height:12px;}
.sw_txt21 h2{font-weight: bold;color: #28323c;font-size:16px; line-height:26px; margin-block-end:0px; margin-block-start: 6px; }
.sw_txt21 c1{color:#00b8ff;}






#campaign_movie{
  background: #E6F6FF;
  padding-top: 0px;
  padding-bottom: 0px;}
#campaign_movie .text { position: relative;margin: auto 0;
  padding: 60px 0px 20px 0px;text-align: center; z-index: 01;}

#car{
  background: #ffffff;
  padding-top: 0px;
  padding-bottom: 30px;

}

#car .text p{padding-bottom:80px;}



#campaign_title{background: linear-gradient(
180deg
 , #94b8df 0%, #95b5e0 53.46%);
  text-align: center;
    padding: 60px 0px 60px 0px;
}

#campaign_title h3{ color: #fff;
}

#car .text { position: relative;margin: auto 0;
padding: 80px 0px 40px 0px;text-align: center; z-index: 01;}


#passport{
  background: #ffffff;
  padding-top: 0px;
  padding-bottom: 80px;

}

#passport .text { position: relative;margin: auto 0;
padding: 80px 24px;text-align: center; z-index: 01;}

#passport .text b1{font-size: 16px;}




#coupon{
    position: static;
    overflow-y: hidden;
  background: #d9f3ff;
  padding-top: 30px;
  padding-bottom: 60px;}

#coupon .text {position: relative;margin: auto 0;
padding: 80px 0px 0px 0px;text-align: center; z-index: 01;}
#coupon .coupon_box {    -webkit-mask: radial-gradient(circle at 16px, #0000 16px, #fff 0);
    -webkit-mask-position: -16px;position: static;
background: #FFFFFF;  border-radius: 10px;
box-shadow: 0px 4px 30px rgba(214, 214, 214, 0.51); position: relative; margin: 44px;
padding: 34px 0px 34px 0px;text-align: center;}
#coupon .coupon_box h3 {font-weight: normal; line-height:36px;}
#coupon .coupon_box b2 {font-weight: bold; color: #00b8ff;padding-bottom: 14px;}
#move{background: none;
    position: relative;
    left: 100px;
  top: -100px;}

#move img{width: 60%;}

    #campaign_movie .container{
        padding-right: 24px;
        padding-left: 24px;
        padding-top: 20px;}

#link{
  background: #E6F6FF;
  padding-top: 0px;
  padding-bottom: 30px;}

  #notice{background:#f7f8f9;padding-bottom: 100px;padding-top: 60px;}
  .check-list {padding-inline-start: 16px;}
  .check-list li {margin-top: 2px; line-height: 20px; text-align: left; position: relative;}
  ::marker{font-size:6px;}

  #notice p{margin-top:40px;}
.movie{padding: 80px 24px;}

#btn
{margin-top: 10px;
text-align: center;
border: 0px solid #FFFFFF;
float: center;
border-radius: 4px;
width: 100%;
background: #00b8ff;
height: 64px;
font-size: 16px;
font-weight:400;
color: #fff;}




#kakao{ display: flex;
    margin-top: 80px;
    margin-bottom: 60px;
    text-align: left;
    border: 1px solid #fff;
    background-color: #f9fdff;
    border-radius: 12px;
    width: 100%;
    padding: 22px 22px;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: #646f7c;
    box-shadow: 4px 9px 20px rgb(194 225 246 / 57%);
}
      }
    #kakao b2{color: #28323c;margin-block-start: 0px;font-size:16px;line-height:26px;}
#kakao p{padding-left: 30%; padding-top: 4%; font-size: 24px;}






  .btn-container{position: relative;padding-left: 24px;padding-right: 24px;}

.white-bg { color: #1D202B;  }
.slide-up-wrap {height: 100%;   background-size: 100%;


}

.button { display:flex; width:158px;
  border: 1px solid #fff;
  height: 40px; border-radius: 30px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.3);  z-index: 999;
  border-left: 1px solid #ffffff;
  -webkit-backdrop-filter: brightness(1.1) blur(10px);


  }
.button .item1{text-align: center;  margin: auto; color: #fff;}










.swiper-wrapper{width: 100%; height: auto;  margin: 0px;}
.swiper-slide { width: 100%; margin: 0px; }

.swiper-container3 { width: 100%; height: 340px;  margin-top: 0px;}

.sw_txt3 {
width: 100%;
padding: 28px 28px 40px 28px;
background: linear-gradient(180deg, #CEE8FF 0%, #FFFFFF 53.46%);
border: 1px solid #EAF4FC;
  box-sizing: border-box;
  box-shadow: -1px 18px 20px rgba(137, 178, 193, 0.15);
  border-radius: 10px;
   color: #374553; text-align:center;}
   .sw_txt3 img {
     width: 126%;top:-14px;
     left: -26px; position: relative;}
        .sw_txt3 p{padding-bottom: 12px;}
        .sw_txt3 b1{font-size:16px;line-height:24px;}
        .sw_txt3 h2{font-weight: bold;color: #28323c;font-size:24px; line-height:26px; margin-block-end:-12px; margin-block-start: 16px; }






.sw_txt3 {

width: 100%;
height: 100%;
padding: 54px 10px;
  background: linear-gradient(180deg, #CEF1FF 0%, #FFFFFF 53.46%);
  border: 1px solid #edfaff;
  box-sizing: border-box;
  box-shadow: -1px 18px 20px rgba(137, 178, 193, 0.15);
  border-radius: 10px;
   color: #374553; text-align:center;}
   .sw_txt3 img {width: 110%;
    top: -14px;
    left: -16px;
    position: relative;
}
        .sw_txt3 p{padding-bottom: 12px;}
        .sw_txt3 b1{font-size:16px;line-height:24px;}


.tag{ font-size: 14px;
  padding: 4px 10px;
    margin-left: 2px;
    margin-right: 2px;
    border: 1px solid #00b8ff;
    color: #00b8ff;
    border-radius: 20px;
}


.swiper-container2 { width: 100%; height: 180px;  margin-top: 0px;}

.sw_txt2 {
width: 94%;
height: 100%;
padding: 38px 28px 40px 28px;
border: 0px solid #EAF4FC;
  box-sizing: border-box;
  -webkit-mask: radial-gradient(circle at 12px, #0000 12px, #fff 0);
    -webkit-mask-position: -12px;

  border-radius: 10px;
   color: #374553; text-align:center;}
   .sw_txt2 img {
     width: 126%;top:-14px;
     left: -26px; position: relative;}
        .sw_txt2 p{padding-bottom: 12px;}
        .sw_txt2 b1{font-size:16px;line-height:24px;}
        .sw_txt2 h2{font-weight: bold;color: #28323c;font-size:24px; line-height:26px; margin-block-end:0px; margin-block-start: 8px; }




.container {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 24px;
padding-left: 24px;

 }

.container1 {
position: relative;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-right: 24px;
padding-left: 0px;
}



.container2 {
position: relative;
margin-left: auto;
margin-right: auto;
padding-top: 100px;
padding-right: 0px;
padding-left: 24px;

}



.container2 .text1{
  position: relative;
  padding-top: 34px;
  padding-right: 24%;

}
.container2 .text2{
  position: relative;
  padding-top: 80px;
  padding-right: 24%;

}



.container4 {
position: static;
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding-bottom: 0px;}






.container5 {
position: relative;
margin-left: auto;
margin-right: auto;
padding-top: 44px;
padding-right: 24px;
padding-left: 84px;

}


.container2_2 {
  overflow-x:hidden;
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 0px;
padding-left: 100px;
z-index: 999;
display: contents;

}



.container4-02 {
position: static;
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding-bottom: 0px;}




@media (min-width: 576px) {

           #main_mo{display: none;}

       #main_pc{
         display: block;
         background: #f7f7f7;
         background-size:cover;
         background-position: 0 90%;
         height: 100vh;
         text-align:center;
         overflow-x:hidden;
         overflow-y:hidden;
  }

       #main_pc .text {
         padding:40% 0%;
         text-shadow: 0 0 5px #00000080;

       }


}
@media (min-width: 768px) {


           #main_mo{display: none;}

       #main_pc{
         display: block;
         background: #f7f7f7;
         background-size:cover;
         background-position: 0 90%;
         height: 100vh;
         text-align:center;
         overflow-x:hidden;
         overflow-y:hidden;
  }

       #main_pc .text {
         padding:40% 0%;
         text-shadow: 0 0 5px #00000080;

       }

  }
@media (min-width: 992px) {


           #main_mo{display: none;}

       #main_pc{
         display: block;
         background: #f7f7f7;
         background-size:cover;
         background-position: 0 90%;
         height: 100vh;
         text-align:center;
         overflow-x:hidden;
         overflow-y:hidden;
  }

       #main_pc .text {
         padding:40% 0%;
         text-shadow: 0 0 5px #00000080;

       }

}













@media (min-width: 1200px) {
  .line {
    border-bottom: 1px solid #61D3FF;
    box-shadow: inset 0 -16px 0 #61d3ff;
}


  h1{font-size:58px; line-height:76px; margin-block-end: 26px;}
  h2{font-size:24px; line-height:40px; font-weight:normal; }
  h3{font-size:32px; line-height:50px; margin-block-start: 8px;}
  h4{font-size:28px; line-height:32px; margin-block-start: 8px;     margin-block-end: 40px;}

  b1{font-size:24px; line-height:38px;}
  b2{font-size:18px;line-height:28px;}
  c1{font-size:16px;line-height:26px;}

  c2{font-size:16px;line-height:26px;}


  .swiper-container3 { width: 100%; height: 340px;  margin-top: 0px;}

  .sw_txt3 {
  width: 100%;
  height: auto;
  padding: 28px 28px 40px 28px;
  background: linear-gradient(180deg, #CEE8FF 0%, #FFFFFF 53.46%);
  border: 1px solid #EAF4FC;
    box-sizing: border-box;
    box-shadow: -1px 18px 20px rgba(137, 178, 193, 0.15);
    border-radius: 10px;
     color: #374553; text-align:center;}
     .sw_txt3 img {
       width: 126%;top:-14px;
       left: -26px; position: relative;}
          .sw_txt3 p{padding-bottom: 12px;}
          .sw_txt3 b1{font-size:16px;line-height:24px;}
          .sw_txt3 h2{font-weight: bold;color: #28323c;font-size:24px; line-height:26px; margin-block-end:-12px; margin-block-start: 16px; }



.sw_txt2 b1{font-size:16px;}
.sw_txt2 h2{font-size:25px;     margin-block-start: 14px;}
  .container4 {
padding-left: 20%;
padding-right:20%;
padding-bottom: 140px;
     }

     .container4_car {
       background:#E6F6FF;
   padding-left: 20%;
   padding-right:20%;
        }

.coupon_box{  -webkit-mask: radial-gradient(circle at 18px, #0000 18px, #fff 0);
-webkit-mask-position: -18px;}
.sw_txt2{  -webkit-mask: radial-gradient(circle at 12px, #0000 12px, #fff 0);
-webkit-mask-position: -12px;}



.container_coupon {background:#fff;   padding-left: 15%;   padding-right:15%;}
#coupon{ background: #ffF;overflow-y: hidden; padding-bottom: 180px;padding-top: 150px;}
#coupon .text {position: relative;margin: auto 0;padding: 0px 0px 0px 0px;text-align: center; z-index: 01;}

#coupon1 .event_box {text-align: center; padding:80px 24px 40px 24px;}
  #coupon1 .event_box b2 {text-align: center;font-weight: bold;border: 1px solid;border-radius: 40px;border-color: #646f7c;
  padding:10px 20px 10px 20px;color:#646f7c;}

.coupon_subtext {text-align:center;padding: 4%;font-size:18px;}
.coupon_subtext c2{font-size:18px; margin-block-start: 10px;}

.container_img { overflow-x:hidden;position: relative;margin-left: auto;margin-right: auto;padding-right: 0px;padding-left: 100px;z-index: 999;display: contents;}

#coupon_car_mo{display:none;}
#coupon_car_pc {display:block;background: none;padding: 5% 20%;}


.swiper-container2 { width: 100%; height: 180px;  margin-top: 0px;}
.sw_txt21 {width: 94%;height: 100%;padding: 38px 22px 40px 22px;border: 0px solid #EAF4FC;  box-sizing: border-box;  -webkit-mask: radial-gradient(circle at 12px, #0000 12px, #fff 0);    -webkit-mask-position: -12px;border-radius: 10px;   color: #374553; text-align:center;}
.sw_txt21 p{padding-bottom: 12px;}
.sw_txt21 b1{font-size:14px;line-height:12px;}
.sw_txt21 h2{font-weight: bold;color: #28323c;font-size:16px; line-height:26px; margin-block-end:0px; margin-block-start: 6px; }
.sw_txt21 c1{color:#00b8ff;}




#campaign_movie .text{padding: 120px 0px 60px 0px;}



         #main_mo{display: none;}

     #main_pc{
       display: block;
       background: #f7f7f7;
       background-size:cover;
       background-position: 0 90%;
       height: 100vh;
       text-align:center;
       overflow-x:hidden;
       overflow-y:hidden;
}

     #main_pc .text {
       padding:20% 0%;
       text-shadow: 0 0 5px #00000080;

     }
     #main_pc h2 {
    font-size:28px; line-height:38px; font-weight:normal; margin-block-end: 28px;
     }



     #passport{    padding-bottom: 160px;
         padding-top: 60px;}





     .container4 {
       background-color: #fff;
       padding-left: 20%;
       padding-right: 20%;}



     #btn
     {margin-top: 20px;
     text-align: center;
     border: 0px solid #FFFFFF;
     float: center;
     border-radius: 4px;
     width: 100%;

     background: #00b8ff;
     height: 68px;
     font-size: 18px;
     font-weight:400;
     color: #fff;}
.container{padding-right: 240px;
    padding-left: 240px;}
.btn-container{padding-right: 240px;
    padding-left: 240px;}
         #coupon{ background: #E6F6FF;overflow-y: hidden;
           padding-bottom: 120px;padding-top: 100px;}

         #coupon .text {position: relative;margin: auto 0;
         padding: 0px 0px 0px 0px;text-align: center; z-index: 01;}
         #coupon .coupon_box {position: static;
         background: #FFFFFF;  border-radius: 10px;
         box-shadow: 0px 4px 30px rgba(214, 214, 214, 0.51); position: relative; margin: 50px 30%;
         padding: 42px 0px 42px 0px;text-align: center;}
         #coupon .coupon_box h3 {font-weight: normal; line-height:44px;}
         #coupon .coupon_box b2 {font-weight: bold; color: #00b8ff;padding-bottom: 14px;}
         #move{background: none;
             position: relative;
             left: 150px;margin-bottom: -30px;
             top: -120px;}
             #move img{ width:30%; }


#kakao{ display: flex;
    margin-top: 80px;
    margin-bottom: 60px;
    text-align: left;
    border: 1px solid #fff;
    background-color: #f9fdff;
    border-radius: 12px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #646f7c;
    box-shadow: 4px 9px 20px rgb(194 225 246 / 57%);
}

    #kakao b2{color: #28323c;margin-block-start: 0px;font-size:16px;line-height:26px;}
#kakao p{padding-left: 30%; padding-top: 2%; font-size: 24px;}


#link{background: #E6F6FF;padding-bottom: 120px;
}
         #car{padding-bottom: 0px;padding-top: 0px;}
         #car .text p{padding-bottom:180px;}

         .movie{margin:0px 0px;}
         #campaign_movie{background: #E6F6FF; }
#campaign_movie .container{padding-right: 240px;
    padding-left: 240px;padding-top: 60px;}
         #notice{padding-left: 24%;
         padding-bottom: 80px;padding-top: 80px;}
         #notice p{margin-top:80px;}
         #notice .container{padding-left: 0px;padding-right: 0px;}
         #notice b2 {font-size: 14px;}
        #notice c2 {font-size: 14px;}
        .check-list {padding-inline-start: 16px;}
        .check-list li {margin-top: 4px; line-height: 20px; text-align: left; position: relative;}
        ::marker{font-size:6px;}



        #campaign_title{background: linear-gradient(
        180deg
         , #94b8df 0%, #95b5e0 53.46%);
          text-align: center;
            padding: 80px 0px 80px 0px;
        }

        #campaign_title h3{ color: #fff;
        }

                .title {
                  position: absolute;
                  top: 45%;
                  left: 50%;
                  transform: translateX(-50%);
                  font-size:26px;
                  line-height: 40px;
                  color: #fff;
                  text-align: center;
                }



                      .btn_f{
                      position: fixed;
                      background-color: #00b8ff;
                      color: #fff;
                      left: 0;
                      right: 0;
                      text-align: center;
                      bottom: 0;
                      border-radius: 8px;
                    margin-left: 76%;
                    margin-right: 5%;
                      margin-bottom: 36px;
                      padding: 24px calc(constant(safe-area-inset-bottom) + 0px);
                      padding: 24px calc(env(safe-area-inset-bottom) + 0px);
                      z-index: 999;	}





                      .container4-02 {
                        background-color: #fff;
                        padding-left: 20%;
                        padding-right: 20%;}


                            #car-02{padding-bottom: 0px;padding-top: 0px;}
                            .movie{margin:140px 0px;}
                        #car-02 .text{padding:0px 0px 60px 0px;}


                             .sw_txt {
                               box-shadow: none;
                           width: 100%;
                           height: 100%;
                           padding: 40px 10px;
                           box-sizing: border-box;
                           box-shadow: -1px 1px 20px rgb(0 0 0 / 11%);

                           background-color: #fff;
                           border-radius: 10px;
                           color: #374553;
                           text-align: center;}
                                .sw_txt img {
                                  width: 80%;top:45px;
                                   position: relative;}
                                 .sw_txt p{padding-bottom: 12px;}
                                 .sw_txt b1{font-size:18px;line-height:24px;}
                                 .sw_txt b2{font-size:16px;line-height:24px;}


  }
/* 오버레이 스타일 */
.deactivation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(74, 86, 103, 0.9);
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 22px;
    line-height: 1.6;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 20px;
}