@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));}
h3{color:#161D24;}
b1,b2{color:#28323C;}

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

h1,c1{font-weight: bold;}
h2,h5,b1,b2,c2,c3{font-weight: normal;}
h1{font-size:42px; line-height:52px; margin-block-end:32px; margin-block-start: -8px;}
h2{font-size:18px; line-height:26px; margin-block-end:16px; margin-block-start: 0px; }
h3{font-size:24px; line-height:150%; margin-block-start: 8px;margin-block-end: 20px;}
h4{font-size:20px; line-height:80%; color:#374553; margin-block-start: 0px;}
h5{font-size:20px; line-height:80%;color:#646f7c;}
h6{font-size:30px;margin-bottom:16px;margin-top:0px;}
b1{font-size:16px;line-height:160%;}
b2{font-size:16px;line-height:22px;color:#646f7c; margin-block-start: 8px;}
c1{font-size:12px;line-height:22px;color:#00b8ff;}
c2{font-size:14px;line-height:22px; color:#646f7c;}

#main_mo{ text-align: center;background: #f7f7f7;  background-size:100% auto;  background-position:center;
padding: 70px 24px 400px 24px;}
#main_mo .text {  position: static;color:#161D24;}
.half-highlight {
background: linear-gradient(to top, #7dd5ff 35%, transparent 35%);}
#main_mo .text_sub {text-align: center;margin-top: 279px;}
#main_mo h5 {margin-top: -8px;}
#main_pc {display: none;}

#coupon{position: static;overflow-y: hidden;  background: #fff;  padding-top: 0px;}
#coupon .text {position: relative;margin: auto 0;padding: 80px 24px 10px 24px;text-align: center; z-index: 01;}
#coupon .event_box {text-align: center; padding:30px 24px 40px 24px;}
#coupon .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;}

.container_img { overflow-x:hidden;position: relative;margin-left: auto;margin-right: auto;padding-right: 0px;padding-left: 100px;z-index: 999;display: contents;}
#car_mo{background: none;padding-bottom: 40px;   }
#car_mo img{width: 100%;}
#car_pc {display:none;}


.swiper-container { width: 100%; height: 100px;  margin-top: 0px;}
.swiper-wrapper{width: 100%; height: auto;  margin: 0px;}
.swiper-slide { width: 100%; margin: 0px; }
.swiper-container2 { width: 100%; height: 180px;  margin-top: 0px;}
.sw_txt2 {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_txt2 p{padding-bottom: 12px;}
.sw_txt2 b1{font-size:14px;line-height:12px;}
.sw_txt2 h2{font-weight: bold;color: #28323c;font-size:16px; line-height:26px; margin-block-end:0px; margin-block-start: 6px; }

.container_step {position: relative;margin-left: auto;margin-right: auto;background: #EDF7FF;padding-bottom: 20px;}
#step{background: #EDF7FF;  padding-top: 0px;  padding-bottom: 60px;  overflow-y: hidden;}
#step .text { position: relative;margin: auto 0;padding: 80px 0px 30px 0px;text-align: center; z-index: 01;}
.line {  border-bottom: 1px solid #61D3FF;  box-shadow: inset 0 -10px 0 #61d3ff;}
.swiper-container3 { display:block;width: 100%; height: 360px;  margin-top: 0px;}
.sw_img3 { width: 100%; position: relative;margin-left: -3px;}

.steps_pc{display: none;}


#notice{background:#e9ebee;padding-bottom: 120px;padding-top: 60px;}
.container_notice {padding-right: 24px;padding-left: 24px;}
.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;}


#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;}


.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;	}

.container_btn {padding-right: 24px;padding-left: 24px;}
.container_btn2 {position: relative;margin-left: auto;margin-right: auto;padding-right: 24px;padding-left: 24px;}


.copybtn
{background-color: #fff;border-radius: 4px;box-shadow: 0 0 5px #00000020;
padding: 28px; text-align: left;display: flex;justify-content: space-between;}
.copybtn_img {justify-content:center;padding: 5px 3px 3px 3px; align-items: center;}
.copybtn_img img {margin:auto 0; align-items: center;}





@media (min-width: 576px) {
#main_mo{display: none;}
#main_pc{display: block; background: linear-gradient(180deg, #FFFFFF 0%, #D9EDFF 100%); height: auto; padding:4% 9% 0px 4%;
background-size:cover; background-position: 0 90%; text-align:left;         overflow-x:hidden;         overflow-y:hidden;}
}

@media (min-width: 768px) {
#main_mo{display: none;}
#main_pc{display: block;  background: linear-gradient(180deg, #FFFFFF 0%, #D9EDFF 100%);height: auto; padding: 8% 12% 0px 12%;
  background-size:cover;  background-position: 0 90%;  text-align:left;  overflow-x:hidden;  overflow-y:hidden;}
}
@media (min-width: 992px) {
#main_mo{display: none;}
#main_pc{display: block; background: linear-gradient(180deg, #FFFFFF 0%, #D9EDFF 100%);height: auto; padding:12% 16% 0px 16%;
 background-size:cover; background-position: 0 90%; text-align:left; overflow-x:hidden; overflow-y:hidden;}

}
@media (min-width: 1200px) {
.line {    border-bottom: 1px solid #61D3FF;box-shadow: inset 0 -16px 0 #61d3ff;}
h1{font-size:58px; line-height:76px;}
h2{font-size:28px; line-height:60px; font-weight:normal; }
h3{font-size:32px; line-height:50px; margin-block-start: 8px;}
h4{font-size:28px; line-height:32px;font-weight: bold;color:#374553;}
h5{font-size:32px; line-height:32px;font-weight: normal;color:#646f7c;}
h6{font-size:45px;margin-bottom:20px;}

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;}


#main_mo{display: none;}
#main_pc{display:block; background: linear-gradient(180deg, #FFFFFF 0%, #D9EDFF 100%); height: auto; padding: 2% 0 0px 4%;}
#main_pc .main_container {display: flex; padding: 5% 10% 0 10%;}
#main_pc .text_container {display:block; width:50%;padding-top: 80px;}
#main_pc .text {text-align: left; padding:10% 15% 6% 15%; color:#161D24;}
#main_pc .text_sub{text-align: left; padding:0% 15%}
#main_pc h5 {margin-top: -20px;}
#main_pc h6 {margin-top: -30px;}
.main_pc_img {flex: 1 1 40%;display:block; margin-bottom: -5px; }


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

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


.swiper-container2 { width: 100%; height: 180px;  margin-top: 50px;}
.swiper-container { width: 100%; height: 450px;  margin-top: 0px;}
.sw_txt2 b1{font-size:16px;}
.sw_txt2 h2{font-size:18px;     margin-block-start: 14px;}
.container_step {padding-left: 24px;padding-right:24px;padding-bottom: 20px;}
.sw_txt2{  padding: 38px 20px 40px 20px;-webkit-mask: radial-gradient(circle at 12px, #0000 12px, #fff 0);-webkit-mask-position: -12px;}

#step .text {padding-bottom: -30px;}
#step h3 {margin-bottom: 0px;}
.swiper-container3 {display: none;}
.steps_pc{display: block;padding: 2% 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;}


.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;	}






#car_mo{display:none;}
#car_pc {display:block;background: none;padding: 5% 20%;}

#notice{padding-left: 24%;padding-bottom: 160px;padding-top: 100px;}
#notice p{margin-top:80px;}
#notice .container_notice {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;}
}



/* 오버레이 스타일 */
.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;
}