@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-end: 14px; margin-block-start:14px; margin-right: 0px;}

h1,sub1,h2,h3,b1{color:#161D24;}
h2{color:#00AAfE;}
c1,c3,b2,b4,b5{color:#374553;}
c2{color:#C5C8CE;}
a{text-decoration: none; color:#161D24;}

h1,sub1{font-weight: bold;}
c1,2,c3,b2{font-weight: normal;}

h1{font-size:32px; line-height:42px; margin-block-start: 0px;}
h2{font-size:18px; line-height:32px; margin-block-end:0px; margin-block-start: 0px; }
h3{font-size:22px; line-height:32px; margin-block-start: 4px; margin-block-end: 4px; }

b1{font-size:16px;line-height:24px;}
b2{font-size:14px;line-height:24px;}
b4{font-size:14px; line-height:24px;}
b5{font-size:14px; line-height:24px;}
c1{font-size:14px;line-height:22px;}
c2{font-size:14px;line-height:24px;}
c3{font-size:18px;line-height:18px;}
c4{font-size:12px;line-height:20px;}
c5{font-size:14px;line-height:22px; color: #374553;}
c6{font-size:12px;line-height:20px; padding: 8px 8px;
 display: inline-block;
 color: #00AAfE;
 background: #E1F5FF;
 text-align: center;
 border-radius: 4px;
margin-top: 4px;}
c7{font-size:14px;line-height:24px;}

#main{
  background: #F7F8F9;
  margin: 0px;
  background-size:cover;
  background-position:100% 10%;
  padding-bottom: 60px;
}


#con1{
  background: #ffffff;
  padding-top: 56px;
  padding-bottom: 56px;

}

#con2{
  background: linear-gradient(180deg, #F7F8F9 0%, #E9EBEE 100%);
  background-position:center;
  padding-top: 30px;
  padding-bottom: 80px;

}


#con3{
  background: #f7f8f9;
  padding-top: 60px;
  padding-bottom: 120px;

}

#con4{
  background: #ffffff;
  padding-top: 48px;
  padding-bottom: 100px;


}


.tag
{padding: 4px 6px;
 display: flex;
 color: #00B8FF;
 background: #E1F5FF;
 text-align: center;
 border-radius: 2px;

}


  .cont {  box-shadow:0px 6px 10.0172px rgba(0, 0, 0, 0.08), 0px 2px 5.32008px rgba(0, 0, 0, 0.06), 0px 0px 2px rgba(0, 0, 0, 0.04); border-radius: 4px;background:#FFFFFF; }
  .cont .item {padding:24px; padding-bottom: 32px; padding-top: 32px;}
  .cont .item .text{margin-top:0px; margin-bottom:14px; }
  .text{display: flex;}


  .cont3
  .cont3 .item3 {padding:24px; padding-bottom: 24px; padding-top: 24px; }
  .cont3 .item3 .text3{margin-top:0px; margin-bottom:14px;  margin-top:14px; }

  .text{
  border: 0px;
  width:100%;
  margin: 0, 10px;
  text-align: right;
  padding-bottom: 4px;
  padding-top: 4px;
  height: 100%;
  box-sizing: border-box;}

  .first {
  width:65%;
  height: 100%;
  text-align: left;

  margin: 0, 10px;
  box-sizing: border-box;}

  .first2{
  height: 100%;
  width:35%;
  text-align: right;
  box-sizing: border-box;}






  .tip { display:flex; padding:0px; margin: 0px; background: #FFFFFF; border: 1px solid #E9EBEE;
box-sizing: border-box;
border-radius: 4px; margin-top: 48px;}
  .tip .item1{margin:0 auto; padding-top:20px; padding-bottom:20px; margin-left:24px; width:20%; }
  .tip .item2{padding-left:24px; width:70%;text-align: left;  margin: auto;}
  .tip .item3{padding-right:24px; margin:0px;width:3%; margin: auto; }





      .notice {display: flex;}

      .notice .first3 {
      width: 6%;
      margin-bottom: 10px;
      line-height: 20px;
      }

      .notice .first4{
      width:94%;
      margin-bottom: 10px;
      line-height: 20px;     }









.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: 24px;
padding-left: 10px;

}

.container3 {
position: relative;
width: 30%;
align-items: left;

}


.container4 {
position: relative;
margin-left: auto;
margin-right: auto;
}

.container6{
  width: 100%;
  margin: 0px auto;
  text-align: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.container7{
  width: 100%;
  margin: 0px auto;
  text-align: left;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}



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




@media (min-width: 576px) {
      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:20px; line-height:34px;}
      b2{font-size:18px;line-height:28px;}


      c1{font-size:18px;line-height:24px;}
      c2{font-size:18px;line-height:24px;}
      c3{font-size:20px;line-height:28px;}
      c4{font-size:16px;line-height:24px;}
      c6{font-size:14px;line-height:20px; padding: 8px 8px;
       display: inline-block;
       color: #00AAfE;
       background: #E1F5FF;
       text-align: center;
       border-radius: 4px;
      margin-top: 4px;}
      p{ margin-block-end: 24px; margin-block-start: 34px;  }
      c7{font-size:18px;line-height:28px;}

      .container {
      width:  500px;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding-right: 24px;
      padding-left: 24px;

       }

       .container2 {
       width:  540px;
       position: relative;
       margin-left: auto;
       margin-right: auto;
       padding-right: 0px;
       padding-left: 0px; }


         .cont3 
         .cont3 .item3 {padding:44px; padding-bottom: 44px; padding-top: 34px; }
         .cont3 .item3 .text3{margin-top:0px; margin-bottom:14px;  margin-top:24px; }

         .cont {  box-shadow:0px 6px 10.0172px rgba(0, 0, 0, 0.08), 0px 2px 5.32008px rgba(0, 0, 0, 0.06), 0px 0px 2px rgba(0, 0, 0, 0.04); border-radius: 4px;background:#FFFFFF; }
         .cont .item {padding:44px; padding-bottom: 44px; padding-top: 44px;}
         .cont .item .text{margin-top:0px; margin-bottom:34px; }
         .text{display: flex;}



           .tip { display:flex; padding:0px; margin: 0px; background: #FFFFFF;
         border: 1px solid #E9EBEE;
         box-sizing: border-box;
         border-radius: 4px; margin-top: 48px; margin-bottom: 60px;}
           .tip .item1{margin:0 auto; padding-top:20px; padding-bottom:20px; margin-left:24px;width:20%; }
           .tip .item2{padding-left:24px; width:70%;text-align: left;  margin: auto;}
           .tip .item3{padding-right:24px; margin:0px;width:2%; margin: auto; }

           .notice {display: flex;}

           .notice .first3 {
           width: 4%;
           margin-bottom: 10px;
           line-height: 20px;
           }

           .notice .first4{
           width:96%;
           margin-bottom: 10px;
           line-height: 20px;     }



}


}
@media (min-width: 768px) {

        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:20px; line-height:34px;}
        b2{font-size:18px;line-height:28px;}


        c1{font-size:18px;line-height:24px;}
        c2{font-size:18px;line-height:24px;}
        c3{font-size:20px;line-height:28px;}
        c4{font-size:16px;line-height:24px;}
        c6{font-size:14px;line-height:20px; padding: 8px 8px;
         display: inline-block;
         color: #00AAfE;
         background: #E1F5FF;
         text-align: center;
         border-radius: 4px;
        margin-top: 4px;}
        p{ margin-block-end: 24px; margin-block-start: 34px;  }
        c7{font-size:18px;line-height:28px;}

        .container {
        width:  600px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        padding-right: 24px;
        padding-left: 24px;

         }



         .container6{
           width: 400px;
           margin: 0px auto;
           text-align: center;
           align-items: center;
           padding-top: 10px;
           padding-bottom: 10px;
         }


           .cont3 .item3 {padding:44px; padding-bottom: 44px; padding-top: 34px; }
           .cont3 .item3 .text3{margin-top:0px; margin-bottom:14px;  margin-top:24px; }

           .cont {  box-shadow:0px 6px 10.0172px rgba(0, 0, 0, 0.08), 0px 2px 5.32008px rgba(0, 0, 0, 0.06), 0px 0px 2px rgba(0, 0, 0, 0.04); border-radius: 4px;background:#FFFFFF; }
           .cont .item {padding:44px; padding-bottom: 44px; padding-top: 44px;}
           .cont .item .text{margin-top:0px; margin-bottom:34px; }
           .text{display: flex;}



             .tip { display:flex; padding:0px; margin: 0px; background: #FFFFFF;
           border: 1px solid #E9EBEE;
           box-sizing: border-box;
           border-radius: 4px; margin-top: 48px; margin-bottom: 60px;}
             .tip .item1{margin:0 auto; padding-top:20px; padding-bottom:20px; margin-left:24px;width:20%; }
             .tip .item2{padding-left:24px; width:70%;text-align: left;  margin: auto;}
             .tip .item3{padding-right:24px; margin:0px;width:2%; margin: auto; }

             .notice {display: flex;}

             .notice .first3 {
             width: 4%;
             margin-bottom: 10px;
             line-height: 20px;
             }

             .notice .first4{
             width:96%;
             margin-bottom: 10px;
             line-height: 20px;     }



  }
@media (min-width: 960px) {


      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:20px; line-height:34px;}
      b2{font-size:18px;line-height:28px;}


      c1{font-size:18px;line-height:24px;}
      c2{font-size:18px;line-height:24px;}
      c3{font-size:20px;line-height:28px;}
      c4{font-size:16px;line-height:24px;}
      c6{font-size:14px;line-height:20px; padding: 8px 8px;
       display: inline-block;
       color: #00AAfE;
       background: #E1F5FF;
       text-align: center;
       border-radius: 4px;
      margin-top: 4px;}
      p{ margin-block-end: 24px; margin-block-start: 34px;  }
      c7{font-size:18px;line-height:28px;}

      .container {
      width:  600px;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding-right: 24px;
      padding-left: 24px;

       }

       .container2 {
         width:  800px;
       position: relative;
       margin-left: auto;
       margin-right: auto;
       padding-right: 24px;
       padding-left: 80px; }

       .container6{
         width: 480px;
         margin: 0px auto;
         text-align: center;
         align-items: center;
         padding-top: 10px;
         padding-bottom: 10px;
       }

         .cont3
         .cont3 .item3 {padding:44px; padding-bottom: 44px; padding-top: 34px; }
         .cont3 .item3 .text3{margin-top:0px; margin-bottom:14px;  margin-top:24px; }

         .cont {  box-shadow:0px 6px 10.0172px rgba(0, 0, 0, 0.08), 0px 2px 5.32008px rgba(0, 0, 0, 0.06), 0px 0px 2px rgba(0, 0, 0, 0.04); border-radius: 4px;background:#FFFFFF; }
         .cont .item {padding:44px; padding-bottom: 44px; padding-top: 44px;}
         .cont .item .text{margin-top:0px; margin-bottom:34px; }
         .text{display: flex;}



           .tip { display:flex; padding:0px; margin: 0px; background: #FFFFFF;
         border: 1px solid #E9EBEE;
         box-sizing: border-box;
         border-radius: 4px; margin-top: 48px; margin-bottom: 60px;}
           .tip .item1{margin:0 auto; padding-top:20px; padding-bottom:20px; margin-left:24px;width:20%; }
           .tip .item2{padding-left:24px; width:70%;text-align: left;  margin: auto;}
           .tip .item3{padding-right:24px; margin:0px;width:2%; margin: auto; }

           .notice {display: flex;}

           .notice .first3 {
           width: 4%;
           margin-bottom: 10px;
           line-height: 20px;
           }

           .notice .first4{
           width:96%;
           margin-bottom: 10px;
           line-height: 20px;     }
  }