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

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

h1,c1{font-weight:bolder; color: #fff;}
h2,h5,b1,b2,c2,c3{font-weight: normal;}
h1{font-size:52px; line-height:128%; margin-block-end:32px; margin-block-start: -12px;}
h2{font-size:18px; line-height:26px; margin-block-end:16px; margin-block-start: 0px; }
h3{font-size:26px; line-height:150%; margin-block-start: 8px;margin-block-end: 20px;}
h4{font-size:24px; line-height:80%; color:#ffF; margin-block-start: 0px;font-weight: 600;}
h5{font-size:20px; line-height:80%;color:#646f7c;}
h6{font-size:30px;line-height:130%;margin-bottom:6px;margin-top:0px;clor:#161d24;}
b1{font-size:18px;line-height:160%;}
b2{font-size:16px;line-height:22px;color:#646f7c; margin-block-start: 8px;}
c1{font-size:12px;line-height:22px;color:#0078FF;}
c2{font-size:14px;line-height:22px; color:#646f7c;}

#main_mo{ text-align: center;background: #f7f7f7;  background-size:100% auto;  background-position:center;background-repeat: no-repeat;background-size: cover;
  padding: 80px 24px 400px 24px;}
  #main_mo img{padding-bottom:40px ;}
  #main_mo .text { position: static;}

#main_mo h5 {margin-top: -8px;}
#main_pc {display: none;}



#benefits{text-align: center;}
#benefits_mo{background-color: #fff;text-align: center;padding-top: 50px;
padding:60px 24px 0 24px;}
#benefits_mo h6{margin-top: 20px;}
#benefits_mo img{width: 100%;display: block; }
#benefits_pc {display: none;}

#video{background-color: #EBF5FF;text-align: center;}
.youtube_mo {padding: 70px 0px; height: auto;display: block;}
.youtube_mo iframe{margin-top: 40px;}
.youtube_pc{display: none;}




#notice{background:#e9ebee;padding:60px 24px 140px 24px;}

.footer-horizontal-line{ background-color:#646f7c;margin: 30px 0; height: 1px;}
.footer_menus_mo{display: flex; color: #646f7c;
  align-items: left;
  flex-wrap: wrap;padding: 0px; padding-right: 50px;}
.footer_menus_pc {display: none;}



ul {list-style: none;}
li {
    &.has-next-item {
      position: relative;
      margin-right: 17px;
      display: flex;
      align-items: center;

      &::after {
        
        position: absolute;
        top: 50%; 
        left: 100%;
        width: 2px;
        height: 14px;
        background-color: #9198a1;
        margin: 0 8px;
        transform: translateY(-50%);
      }
    }
  }


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


.btn_f{
  cursor:pointer;
position: fixed;
background-color: #0078FF;
color: #fff;
left: 0;
right: 0;
text-align: center;
bottom: 0;
border-radius: 12px;
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;}


.coupons_mo{display: block;}
.swiper-container2 {display: none;}

@media (min-width: 576px) {
#main_mo{display: none;}
#main_pc{display: block; 
  background-image:url('/event/socarstay/img/pc_bg.jpg'); 
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  color:#fff; padding: 10% 10% 48% 10%;}
#main_pc .text h1 {line-height: 130%;margin-top: 30px;}
.youtube_pc{display: block;padding: 5% 36%;text-align: center;}
.youtube_mo{display: none;}

.lottie_pc{margin: 0 auto;width: 320px;}


 
}

@media (min-width: 768px) {
#main_mo{display: none;}
#main_pc{display: block;  padding-bottom: 400px; 
  color:#fff;}
  
  
  #notice{background:#e9ebee;padding:60px 40px 140px 40px}
  .footer_menus_pc {display: flex;}
  .footer_menus_mo {display: none;}
  #benefits_mo .lottie_pc{padding:0 24%;}

}
@media (min-width: 992px) {
#main_mo{display: none;}
#main_pc{display: block; ccolor:#fff;}
#notice{background:#e9ebee;padding:90px 60px 180px 60px}
}


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



#main_mo{display: none;}
#main_pc{display:block;}
#main_pc .text {text-align: left; color:#fff;}



#btn{margin-top: 20px; text-align: center; border: 0px solid #FFFFFF; float: center; border-radius: 6px; width: 100%; background: #0078FF; height: 68px; font-size: 18px; font-weight:400; color: #fff;}


.btn_f{
position: fixed;
background-color: #0078FF ;
color: #fff;
left: 0;
right: 0;
text-align: center;
bottom: 0;
border-radius: 12px;
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;	}



#benefits_mo{display:none;}
#benefits_pc {display:block;background-color: #fff; text-align: center;padding: 5% 30% 0 30%;}
.lottie_pc{margin: 0 auto;width: 320px;}
#benefits_pc h6 {margin-top: 12px;}


#notice{padding-left: 24%; padding-right: 24%; padding-bottom: 180px;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;}

  }