@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;
}
span.emoji {
  font-size: 32px;
}

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:40px; margin-right: 30px; margin-bottom: 56px;}
li, ul{text-decoration: none; margin: 0px; padding-inline-start:0px;}
h1,h2,h3,b1,c1,b4{color:#28323C;}
a{text-decoration:none; color:#28323C;}

h1{font-weight: bold;}
b1,h3{font-weight: normal;}
h1{font-size:38px; line-height:50px; margin-block-start: 0px;}
h2{font-size:24px; line-height:34px; margin-block-end:24px; margin-block-start: 8px; }
b1{font-size:16px; line-height:28px;}
b2{font-size:14px; line-height:26px;}
b3{font-size:14px; line-height:36px; color: #00b8ff;font-weight: bold; }

b4{font-size:14px; line-height:22px;}

c1{font-size:12px; line-height:14px;}
c4{font-size:16px; line-height:24px;font-weight: bold; }

.content{padding-top:12px;}
.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_txt img{border-radius: 6px;}
#main{ background: #FFFFFF;margin: 0px;padding-top: 60px;background-size:cover;background-position:center;height: 477px;}
#main h1{ margin-block-end: 14px;}
#main .sub{margin: 0px;padding: 10px 18px;color: #FFFFFF;position: absolute;background: rgba(255, 255, 255, 0.25);border: 1px solid #FFFFFF;box-sizing: border-box;-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);border-radius: 76px;}

#con2{ padding-top: 60px;padding-bottom: 60px;}
#con2 .sub{margin: 0px;padding: 8px 18px 8px 18px; margin-right: 8px;color: #FFFFFF;background: #161D24;  box-sizing: border-box; border-radius: 76px; }
#con3{background: #e9ebee;}
#con5{ background: #161D24;color: #FFF; padding-top: 80px; padding-bottom: 80px;}
#con5 img{margin-left: 16px;}

#con7{ background: #e9ebee;padding-top: 80px; padding-bottom: 60px;}
#con7 .sub{width: 70px; text-align: center; margin: 0px; padding: 8px 18px 8px 18px; margin-right: 8px;color: #FFFFFF; background: #161D24;box-sizing: border-box; border-radius: 76px;  }
#con9{background: #e9ebee;padding-top: 20px; padding-bottom: 60px;}

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


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


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


.swiper-container { width: 100%; height: auto; margin-top: -28px;}
.swiper-wrapper{width: 100%; height: auto;  margin: 0px;}
.swiper-slide {text-align:left;display:flex;justify-content:center;margin-top: 60px;line-height: 22px;font-size: 14px;width: 70%;margin-left: 24px;}
.swiper-slide:nth-child(2n) {width: 70%;}
.swiper-slide:nth-child(3n) {width: 70%;}
.sw_txt {color: #28323c; text-align:left;}
.sw_txt img{ }
.sw_txt .swsub{border-top: 1px solid #d6d6d6; padding-top: 6px;margin-top: 10px; width: 90%;}

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




  .cont {

    border-top: 22px solid #E30613;box-shadow:1px -2px 15px rgb(224 224 224); border-radius: 0px;background:#FFFFFF; }
.cont h2{
    font-size: 24px;
    margin-block-end: 0px;
    margin-block-start: 8px;}
  .cont p{

    margin-block-start: 6px;
    margin-right: 0px;
  color: #646f7c;
    margin-left: 12px;
    margin-bottom: 10px;
  }

  .cont .item {padding:24px; padding-bottom: 40px; padding-top: 24px;}
  .cont .item .text{margin-top:0px; margin-bottom:6px; }
  .text{display: flex;}



  .cont2 {  box-shadow:0px 2px 2px rgba(0,0,0,0.1); border-radius: 4px; background:#FFFFFF;}
  .cont2 .item2 {padding:24px; padding-bottom: 14px; padding-top: 14px; }
  .cont2 .item2 .text2{margin-top:0px; margin-bottom:14px;  margin-top:14px; }
  .text2 {display: flex;}


  .first {
    margin-bottom: 6px;
  width:80%;
  height: 100%;
  box-sizing: border-box;}

  .first2{

  width:70%;
  text-align: right;
  height: 100%;
  box-sizing: border-box;}

  .first3 {
  border: 0px solid red;
  width:50%;
  height: 100%;
  margin: 0, 10px;
  box-sizing: border-box;}

  .first4{

  width:50%;
  text-align: right;
  box-sizing: border-box;}

.tway {
  width:60%;
  color: #fff;
  margin: 0, 10px;
  box-sizing: border-box;}

  .tway .btn {
    width:106px;
    background: #F9605A;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    height: 32px;
    box-sizing: border-box;}

 .socar {
  width:50%;
  color: #fff;
  margin: 0, 10px;
  box-sizing: border-box;}

  .socar .btn {
    width:119px;
    background: #00b8ff;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    height: 32px;
    box-sizing: border-box;}




@media (max-width: 576px) {

}


@media (max-width: 960px) {


}



@media (min-width: 960px) {

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

.container_first { width: 1140px; max-width: 30%; }
.container {  margin-left: 0px;  margin-right: 0px;}
}