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



section{margin: 0px; word-break:keep-all; overflow-wrap:break-word; font-family:'Spoqa Han Sans',sans-serif;}
body,html{ overflow-x:hidden; margin: 0px; word-break:keep-all; overflow-wrap:break-word; font-family:'Spoqa Han Sans',sans-serif; background: #ffffff;}
p{margin-block-start:18px; margin-right: 10px; margin-bottom: 24px;}
li, ul{text-decoration: none; margin: 0px; padding-inline-start:0px;}
h1,h2 {color:#0E3A8F;}
a{text-decoration:none; color:#28323C;}

h1{font-weight: bold;}
b1{font-weight: normal;}
h1{font-size:30px; line-height:140%; margin-block-start: 0px;}
h2{font-size:24px; line-height:140%; margin-block-start: 8px;}
s1{font-size:18px; line-height:170%; color:#646f7c; padding-top: 10px}
h3{font-size:16px; line-height:170%; color:#646f7c;}

b1{font-size:16px; line-height:30px;}
b2{font-size:16px; line-height:160%;}
b3{font-size:16px; line-height:160%; color: #00b8ff;font-weight: bold; }
c1{font-size:12px; line-height:180%;color: #646f7c;}
c2{font-size: 12px; line-height: 160%; color: #646f7c; font-weight:regular;text-align:center;}

.check-list {padding-inline-start: 16px;}
.check-list li {margin-top: 2px; line-height: 20px; text-align: left; position: relative;}
::marker{font-size:6px;}
.sw_txt2 img{border-radius: 6px;}
#main {margin: 0px; background-color: #fff;}
#main h1{ margin-block-end: 14px;margin-top:20px;}

#main_pc {display: none;}
#main_mobile {display: block;}

#con1{ background: #fff; padding-top: 50px; padding-bottom: 20px;}
#con1 h2{margin-top: 20px;margin-bottom: -30px; text-align: left; color: #0E3A8F;}
#con1 s1{margin-top: 50px;margin-bottom: -30px;text-align: left;color: #646f7c;}
#con1 img{margin-top: 40px;margin-left: 18px;}

#con0 {background: #fff;padding-top: 30px; padding-bottom: 30px;margin: auto 0;}
#con0 h3{margin-bottom: 10px;margin-top:-8px;}

#con2{ background: #f7f8f9; padding-top: 60px;padding-bottom: 100px;}
#con2 h2{margin-right:60px;margin-top: 12px;}
#con2 s1{margin-top:10px;}
#con2 img{margin-left:-9px; margin-top: 40px;}

#con3{ background: #f7f8f9; padding-top: 30px;padding-bottom: 100px;}
#con3 h2{margin-right:30px;margin-top: 12px;}
#con3 img{margin-left:-4px; margin-top: 40px; margin-bottom: 40px}

#con4{ background: #f7f8f9; padding-top: 30px;padding-bottom: 100px;}
#con4 h2{margin-right:70px;margin-top: 12px;}
#img_example {width: 94%; margin-top: 40px; margin-bottom: 40px; padding-right: 20px}

#btn_inquire_pc{display: none;}
#btn_inquire_m{display: block;
  margin-top: 40px;
  text-align: center;
  border: 1px solid #0E3A8F;
  border-radius: 4px;
  width: 188px;
  background: #f7f8f9;
  height: 64px;
  font-size: 16px;
  font-weight:bold;
  color: #0E3A8F;}

#btn_arrow {
    margin: 0px;
    margin-left: 11px;
    height: 10px;
  }


.btn{position: fixed;
  background-color: #0E3A8F;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  bottom: 0;
  padding: 28px calc(constant(safe-area-inset-bottom) + 15px);
  padding: 28px calc(env(safe-area-inset-bottom) + 15px);
  z-index: 999;
  margin: 12px 12px 24px 12px;
  border-radius: 6px;
}




#con6{background: #f7f8f9; padding-bottom: 100px;padding-top: 60px;}


.tag1{margin-top: 48px;margin-bottom: 20px;padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; text-align:center; border-top-left-radius: 4px; border-bottom-left-radius: 4px;
  width: 105px; height:32px; background: #0E3A8F;font-size: 14px;font-weight:medium;color: #fff;}
.tag2{margin-top: 48px;margin-bottom: 20px;padding-left: 12px; padding-right: 12px; padding-top: 7px; padding-bottom: 7px; text-align:center; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius:4px; border-bottom-right-radius:4px;
    width: 105px; height:32px; border:1px solid #0E3A8F ;font-size: 14px;font-weight:medium;color: #0E3A8F;}





.sub-box { display: table-row;background: #ffffff;}
.sub-box-cell {display: table-cell;vertical-align: middle;padding-left: 24px; padding-right:14px; text-align:left;width: 400px;  height: 152px;background: #FFFFFF; box-shadow: 4px 4px 30px rgba(209, 217, 226, 0.15), 4px 0px 5px rgba(209, 217, 226, 0.25), 0px 4px 18px #D1D9E2; border-radius: 4px;}
.sub-box-cell-text {display: flex;}
.txt{margin-top: 10%; margin-bottom: 10%; width:60%; height: 100%; box-sizing: border-box;}
.img{padding-top: 2%; width:50%;}
.section-01-mobile {margin-top: -50px; width: 90%;}
.sub-box-cell1 {display: table-cell;vertical-align: left;padding-left: 24px; text-align:left;width: 158px;  height: 268px;background: #FFFFFF; box-shadow: 4px 4px 30px rgba(209, 217, 226, 0.15), 4px 0px 5px rgba(209, 217, 226, 0.25), 0px 4px 18px #D1D9E2; border-radius: 6px;}
.sub-box-cell2 {display: table-cell;vertical-align: right;padding-left: 24px; text-align:left;width: 158px;  height: 268px;background: #FFFFFF; box-shadow: 4px 4px 30px rgba(209, 217, 226, 0.15), 4px 0px 5px rgba(209, 217, 226, 0.25), 0px 4px 18px #D1D9E2; border-radius: 6px;}


.swiper-container { width: 100%; height: auto; margin-top: -28px;}
.swiper-wrapper{width: 100%; height: auto;  margin-left: 14px;}
.swiper-slide {text-align:left;display:flex;justify-content:center;margin-top: 60px;line-height: 22px;font-size: 14px;width: 80%;margin-left: 10px;}
.swiper-slide:nth-child(2n) {width: 80%;}
.swiper-slide:nth-child(3n) {width: 80%;margin-right:70px;}
.swiper-slide:nth-child(4n) {width: 80%;margin-right:-10px;}
.sw_txt {color: #28323c; text-align:left;}

.container_first {position: relative;margin-left: auto;margin-right: auto;background: #ffffff;}
.container {position: relative;margin-left: auto;margin-right: auto;padding-right: 24px;padding-left: 24px;}
.container_btn {position: relative;margin-left: 0;margin-right: auto;}

.container2 {position: relative;margin-left: auto;margin-right: auto;padding-right: 0px;padding-left: 24px;}
.container3 {position: relative;margin-left: auto;margin-right: auto;padding-right: 33px; padding-left: 0px; margin-top: 80px;}
.bottom-line {
border-bottom: 1px solid #C6DCFA;
box-shadow: inset 0 -11px 0 #C6DCFA;
}


.lightblue_box {background: #F3FBFF;margin-left: 24px;margin-right: 24px;
  padding:32px;border-radius: 10px;}


.swiper-slide-pc{display: none;}

.main-tag{padding-top:8px;padding-bottom: 8px;padding-left: 12px;padding-right: 12px;background-color: #0E3A8F;border-radius: 4px;display: inline;color:#fff;}








@media (max-width: 576px) {
}

@media (max-width: 960px) {

}


@media (min-width: 960px) {

  .container_first { max-width: 100%;}
  .container {padding-left: 24%;  padding-right: 24%;}
  .container2 {text-align: center;}
.container_btn{display: block;}
  h1{font-weight: bold;}
  b1{font-weight: normal;}
  h1{font-size:56px; line-height:145%; margin-block-start: 0px;}
  h2{font-size:42px; line-height:145%; margin-block-start: 8px;}
  s1{font-size:30px; line-height:150%; color:#646f7c;}
  h3{font-size:42px; line-height:180%; color:#28323C;}

  b1{font-size:26px; line-height:180%;}
  b2{font-size:20px; line-height:180%;text-align:center;}
  b3{font-size:24px; line-height:170%; color: #00b8ff;font-weight: bold;text-align:center;}
  c1{font-size:16px; line-height:180%;}
  c2{font-size: 16px; line-height: 180%; color: #646f7c; font-weight:regular;text-align:center;}


#main h1 {margin-top:50px;margin-bottom: 36px;}

#main_pc {display: block;}
#main_mobile {display: none;}

#con0 {background: #fff;margin: auto 0;}
#con0 h3{margin-bottom: 40px;margin-top: -10px;text-align: center;}

.lightblue_box {background: #F3FBFF;margin: auto 0;text-align: center;padding-top: 90px;padding-bottom:90px;
  padding-left: 24%;padding-right: 24%;border-radius: 10px;}


.swiper-container{display: none;}
.swiper-slide-pc{display: block; padding-left: 18%;  padding-right: 18%;}


#con1{padding-top: 90px; margin:auto 0;}
#con1 h2{margin-top: 20px;margin-bottom: 0px;text-align: center;}
#con1 img{margin-left:0; padding-bottom: 100px;}



#con2{padding-top: 180px;padding-bottom: 200px;margin:auto 0;text-align: center;}
#con2 h2{margin-right: 0px;}
#con2 img{margin-left:0;margin-top: 90px;margin-bottom: 40px;}

#con3{padding-top: 70px;padding-bottom: 200px;margin:auto 0;text-align: center;}
#con3 h2{margin-right: 0px;}
#con3 img{margin-left:0;margin-top: 90px;margin-bottom: 40px;}

#con4{padding-top: 70px;padding-bottom: 200px;margin:auto 0;text-align: center;}
#con4 h2{margin-right: 0px;}
#img_example {width:80%; margin-left:0;margin-top: 0;margin-bottom: 40px;}

.btn_float{display: none;}
.btn{display: none;
  position:fixed;
  background-color: #0E3A8F;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  bottom: 0;
  padding: 22px calc(constant(safe-area-inset-bottom) + 15px);
  padding: 22px calc(env(safe-area-inset-bottom) + 15px);
  z-index: 999;
  border-radius: 6px;
  width:225px;
  margin-left:auto;
  margin-bottom: 30px;
  margin-right: 40px;	}

  #btn_inquire_m{display: none;}
  #btn_inquire_pc{display: block;
  cursor:pointer;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: 0px;
  border-radius: 6px;
  width: 264px;
  background: #0E3A8F;
  height: 90px;
  padding-left: 36px;
  padding-right: 36px;
  font-size: 22px;
  font-weight:medium;
  color: #FFFFFF;}

  #btn_arrow {
    margin: 0px;
    margin-left: 11px;
    height: 14px;
  }




#con6{padding-top: 100px;padding-bottom: 120px;}



.check-list li {margin-top: 2px; line-height: 180%; text-align: left; position: relative;}

.main-tag{padding-top:22px;padding-bottom:14px;padding-left:22px;padding-right:22px;background-color: #0E3A8F;border-radius: 8px;display: inline;color:#fff;}







.bottom-line {border-bottom: 1px solid #C6DCFA;
box-shadow: inset 0 -15px 0 #C6DCFA;}

.section-01-mobile {display: none;}


}