@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{ overflow-x: hidden; margin: 0px;  word-break:keep-all; overflow-wrap:break-word;
font-family: 'Spoqa Han Sans',sans-serif; background: #e9ebee;  }

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

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

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

h1{font-size:40px; line-height:46px; }
h2{font-size:18px; line-height:30px; margin-block-end:16px; margin-block-start: 0px; }
h3{font-size:24px; line-height:32px; margin-block-start: 8px;}

b1{font-size:14px;line-height:22px;}
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;}



#main{
  background: #f7f7f7;
  background-size:cover;
  background-position:center;
  height:690px;
  text-align:left;

}
#con1{
  background: #ffffff;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 100px;

}



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


}


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

}

#con4{
  background: #ffffff;
  padding-top: 40px;
  padding-bottom: 0px;

}

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

}

#con9{
  background: #ffffff;
  height:400px;
  margin-top:100px;
}

#btn2
{display:flex;
margin-top: 48px;
text-align: left;
padding-left: 24px;
border: 0px solid #FFFFFF;
border-radius: 4px;
width: 100%;
background-color: #F7F8F9;
height: 68px;
font-weight:400;}

#kakao{ display:block; margin-top: 30px;text-align: center;border: 1px solid #646f7c;background-color: #fff;
        border-radius: 4px;width: 100%;height: 64px;font-size: 16px;font-weight:bold; color: #646f7c;}


  .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:140px; border: 1px solid #5B6776; height: 44px; border-radius: 2px; font-size: 14px;}
.button .item1{text-align: center;  margin: auto; color: #5B6776;}


.white-bg {background: #fff;}
.slide-up-wrap {height: 300vh;padding-bottom: 60px;}
.slide-up-wrap > div {position: sticky; top: 0;left: 0; width: 100%; padding-top: 0vh;overflow: hidden;}
.container_right_2 {margin-right: 0px;}


.container_right_2 .box01 {
 background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20210315/7a754ff24d5cc343d60857a4116ab0a0.jpg");
background-size: 120%;
background-repeat: no-repeat;
background-position: 0px 90%;
width: 100%;
border-radius: 0px 0px 0px 0px;
height:100vh;
 }



.container_right_2 .box02 {
background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20210315/e3113e6be13ae8122da995d0dc0e2e03.jpg");
background-size: 120%;
background-repeat: no-repeat;
background-position: 0px 80%;
 width: 100%;
 border-radius: 0px 0px 0px 0px;
height:100vh;


    }
    .container_right_2 .box03 {
    background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20210315/b65bbfb088e5d3e4a5f53ded60f75370.jpg");
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: 0px 80%;
     width: 100%;
     border-radius: 0px 0px 0px 0px;
    height:100vh;


        }








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


.swiper-container {
  width: 100%;
  height: 100%;
}



.swiper-slide {
text-align:left;
display:flex;
justify-content:center;
margin-top: 20px;
line-height: 22px;
font-size: 14px;

}




.sw_txt {display: flex-direction:column; width:100%; color: #374553; text-align:center;}
.sw_txt2 {margin-right:16px; width:100%; color: #374553; text-align:left; }


.roadlist{ display:flex; padding:0px; margin: 0px; border-bottom: 1px solid #E9EBEE; background:#ffffff;}
.roadlist .item1{padding-top:10px; padding-bottom:10px; background:#ffffff;margin-left: 24px; width:40%; }
.roadlist .item2{padding:0px;background:#ffffff;width:60%;text-align: left;  margin: auto;}
.roadlist .item3{padding-right:24px;background:#ffffff;margin:0px;width:5%; margin: auto; }









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


.container1 .text2{
  position: relative;
  padding-right: 22%;

}

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

}


.container2 .text2{
  position: relative;
  padding-right: 22%;

}


.container6 {
position: relative;
margin: auto 0;
padding-top: 80px;
padding-right: 24px;
padding-left: 24px;
padding-bottom: 80px;
text-align: center;
}

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

}

.container7 .text1{
  position: relative;
  padding-right: 22%;
  padding-bottom: 500px;

}

.container7 .text2{
  position: relative;
  padding-right: 22%;


}

.subbg1 {
  position: relative;
  margin-top:120px;
  background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20210316/2f1c4808285062a630e59118540c798e.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100%;
  padding-bottom: 100px;
  height: 1200px;




}





.container3 {
margin-top: 16px;
position: relative;
margin-left: 0px;
margin-right: 0px;


}

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


.container4 .text {
  position: relative;
  padding-top: 80px;
  padding-left: 24px;
}



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

}








@media (min-width: 576px) {


}
@media (min-width: 768px) {
.container4 {
  width: 720px;
  max-width: 40%; }



  }
@media (min-width: 992px) {
.container4 {
  width: 720px;
  }


}


@media (min-width: 1200px) {


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

  h1{font-size:46px; line-height:58px;}
  h2{font-size:24px; line-height:38px; font-weight:normal; }
  h3{font-size:28px; line-height:38px; margin-block-start: 8px;}
  b1{font-size:18px; line-height:28px;}
  b2{font-size:18px;line-height:28px;}
  c1{font-size:16px;line-height:26px;}
  c2{font-size:16px;line-height:26px;}
  .container4 {
    width: 720px;
     }
     .container_right_2 .box01 {
      background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20210315/7a754ff24d5cc343d60857a4116ab0a0.jpg");
     background-size: 120%;
     background-repeat: no-repeat;
     background-position: 0px 70%;
     width: 100%;
     border-radius: 0px 0px 0px 0px;
     height:100vh;
      }
      .container6 {
      position: relative;
      margin: auto 0;
      padding-top: 80px;
      padding-right: 80px;
      padding-left: 80px;
      padding-bottom: 80px;
      text-align: center;
      }
      .container2 .text2{
        position: relative;
        padding-right: 35%;


      }


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

  #kakao{ display:block; margin-top: 40px;text-align: center;border: 1px solid #646f7c;background-color: #fff;
    border-radius: 4px;width: 100%;height: 90px;font-size: 22px;font-weight:bold; color: #646f7c;}

  #main{
    background: #f7f7f7;
    background-size:cover;
    background-position:center;
    height:900px;
    text-align:left;}


  }