@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: 24px; margin-block-start:24px; margin-right: 0px;}
h1,sub1,h2,b1,b2,c2{color:#28323C;}
a{text-decoration: none; color:#28323C;}

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

h1{font-size:32px; line-height:42px; margin-block-start: 68px;}
h2{font-size:24px; line-height:32px; margin-block-start: 4px; margin-block-end: 4px; }

b1{font-size:14px;line-height:22px;}
b2{font-size:14px;line-height:22px;}
c2{font-size:12px;line-height:20px;}


#main{background: linear-gradient(0deg, #4565A4 66.71%, rgba(69, 101, 164, 0) 90.87%); margin: 0px;}
#main h1{ margin-top:0px; padding-top:10px;}



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



.content{
  background: linear-gradient(0deg, rgb(255 255 255 / 87%) -23.58%, rgb(255 255 255 / 59%) 118.7%);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(3px);
      position: relative;
      margin-top: 280px;
      padding-left: 24px;
      padding-top: 40px;
      padding-bottom: 44px;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
      border-radius: 4px 0px 0px 4px;


}
.content img{position: relative; width:110%; margin-left: -16%;margin-top: -12%;}
.sub_text{position: relative; margin-top: -50px;}


.logo
{position: relative;
margin: 0px auto;
display: block;
text-align: center;
padding-top: 40px;}

.container {
position: relative;
margin-left: auto;
margin-right: auto;
padding-top: 80px;
padding-right: 24px;
padding-left: 24px;

 }

.container1 {
 position: relative;
 margin-left: auto;
 margin-right: auto;
 background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20220617/1d12e4a66409db5d9c976956fce0b10f.png");
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 60% -50px;
 padding-bottom: 80px;


  }

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

}



.btn{
position: fixed;
background-color: #CF3232;
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;	}


.check-list {padding-inline-start: 16px;}
.check-list li {
  margin-top: 6px;
  line-height: 20px;
  text-align: left;
  position: relative;
}
::marker{font-size:6px;}



@media (min-width: 576px) {


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

  .check-list li {margin-top: 6px; line-height: 24px; text-align: left; position: relative;}

      #main{
        background:  linear-gradient(0deg, #4565A4 66.71%, rgba(69, 101, 164, 0) 90.87%);
        margin: 0px;
        height: 100%;}


        #con1{
          background: #ffffff;
          padding-top: 100px;
          padding-bottom: 100px;
          margin-left: 10px;
          margin-right: 10px;





        }

        #con2{
          background:  #F6F6F6;
          background-position:center;
          background-position: 0% 70%;
          padding-top: 100px;


        }




        #con4{
          background: #ffffff;

          padding-bottom: 150px;
          margin-left: 10px;


        }




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





      .container {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding-right: 20%;
      padding-left: 20%;

       }


      .container1 {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20220617/23b89163f7642d6561a56f955964e6ca.png");
        background-size: cover;
      background-repeat: no-repeat;
      background-position: 0% 0%;
      padding-top: 60px;
      padding-bottom: 60px;


       }
       .container2 {
       position: relative;
       margin-left: auto;
       margin-right: auto;
       padding-left: 25%;
       padding-right:25%;

       }



              .content{
                background: linear-gradient(0deg, rgba(255, 255, 255, 0.696) -23.58%, rgba(255, 255, 255, 0.608) 118.7%);

                    -webkit-backdrop-filter: blur(12px);
                     backdrop-filter: blur(12px);   position:relative;
                background-position: fixed;
                margin-top: 100px;
                padding-left: 24px;
                padding-top: 44px;
                padding-bottom: 44px;
                box-shadow:0px 2px 2px rgba(0,0,0,0.1);
                border-radius: 10px 10px 10px 10px;
                padding-left: 10%;
              }
              .content img{position: relative; width:100%; margin-left: -16%;margin-top: -5%;}


      h1{font-size:46px; line-height:58px;}
      h2{font-size:24px; line-height:38px;}
      h2{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:18px;line-height:28px;}
            c2{font-size:14px;line-height:24px;}
            c3{font-size:18px;line-height:28px;}
            c4{font-size:18px;line-height:28px;}


  }
@media (min-width: 960px)  {
  .check-list li {margin-top: 6px; line-height: 24px; text-align: left; position: relative;}


      #main{
        background:  linear-gradient(0deg, #4565A4 66.71%, rgba(69, 101, 164, 0) 90.87%);
        margin: 0px;
        height: 100%;}


        #con1{
          background: #ffffff;
          padding-top: 100px;
          padding-bottom: 100px;
          margin-left: 10px;
          margin-right: 10px;





        }

        #con2{
          background:  #F6F6F6;
          background-position:center;
          background-position: 0% 70%;
          padding-top: 100px;


        }




        #con4{
          background: #ffffff;

          padding-bottom: 150px;
          margin-left: 10px;


        }




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


      .container {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding-right: 25%;
      padding-left: 25%;

       }


      .container1 {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20220617/23b89163f7642d6561a56f955964e6ca.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0% 0%;
      padding-top: 60px;
      padding-bottom: 60px;


       }
       .container2 {
       position: relative;
       margin-left: auto;
       margin-right: auto;
       padding-left: 30%;
       padding-right:30%;

       }



              .content{
                background: linear-gradient(0deg, rgba(255, 255, 255, 0.696) -23.58%, rgba(255, 255, 255, 0.608) 118.7%);

                    -webkit-backdrop-filter: blur(12px);
                     backdrop-filter: blur(12px);   position:relative;
                background-position: fixed;
                margin-top: 150px;
                padding-left: 24px;
                padding-top: 44px;
                padding-bottom: 44px;
                box-shadow:0px 2px 2px rgba(0,0,0,0.1);
                border-radius: 10px 10px 10px 10px;
                padding-left: 10%;
              }


              .cont {  box-shadow:0px 6px 6px rgba(40, 50, 60, 0.1); border-radius: 4px;background:#FFFFFF; }
              .cont .item {padding:40px; padding-bottom: 44px; padding-top: 44px;}
              .cont .item .text{margin-top:0px; margin-bottom:24px; }
              .text{display: flex;}

      h1{font-size:46px; line-height:58px;}
      h2{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:18px;line-height:28px;}
            c2{font-size:14px;line-height:24px;}
            c3{font-size:18px;line-height:28px;}
            c4{font-size:18px;line-height:28px;}

      p{ margin-block-end: 0px; margin-block-start: 34px; margin-right: 0px;  }


  }


@media (min-width: 1200px) {

  .check-list li {margin-top: 6px; line-height: 24px; text-align: left; position: relative;}

      #main{
      background:  linear-gradient(0deg, #4565A4 66.71%, rgba(69, 101, 164, 0) 90.87%);
        margin: 0px;
        height: 100%;}


        #con1{
          background: #ffffff;
          padding-top: 100px;
          padding-bottom: 100px;
          margin-left: 10px;
          margin-right: 10px;





        }

        #con2{
          background:  #F6F6F6;
          background-position:center;
          background-position: 0% 70%;
          padding-top: 100px;


        }




        #con4{
          background: #ffffff;
          padding-bottom: 150px;
          margin-left: 10px;


        }






          .cont {  box-shadow:0px 2px 2px rgba(0,0,0,0.1); border-radius: 4px;background:#FFFFFF; }
          .cont .item {padding:40px; padding-bottom: 32px; padding-top: 32px;}
          .cont .item .text{margin-top:0px; margin-bottom:14px; }
          .text{display: flex;}


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




      .container {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding-right: 30%;
      padding-left: 30%;

       }




      .container1 {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      background-image: url("https://d353obgi8xzt9w.cloudfront.net/notice/20220617/23b89163f7642d6561a56f955964e6ca.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      padding-top: 40px;
      padding-bottom: 100px;


       }
       .container2 {
       position: relative;
       margin-left: auto;
       margin-right: auto;
       padding-left: 30%;
       padding-right:30%;

       }



              .content{
                background: linear-gradient(0deg, rgba(255, 255, 255, 0.696) -23.58%, rgba(255, 255, 255, 0.608) 118.7%);

                    -webkit-backdrop-filter: blur(12px);
                     backdrop-filter: blur(12px);   position:relative;
                background-position: fixed;
                margin-top: 100px;
                padding-left: 24px;
                padding-right: 24px;
                padding-top: 30px;
                padding-bottom: 100px;
                box-shadow:0px 2px 2px rgba(0,0,0,0.1);
                border-radius: 10px 10px 10px 10px;
                padding-left: 10%;
              }


      h1{font-size:46px; line-height:58px;}
      h2{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:18px;line-height:28px;}
      c2{font-size:14px;line-height:24px;}
      c3{font-size:18px;line-height:28px;}
      c4{font-size:18px;line-height:28px;}

      p{ margin-block-end: 0px; margin-block-start: 34px; margin-right: 0px;  }


  }