@font-face {
    font-family: SDGothicNeo;
    src: url(https://frontend-design-system.socar.kr/fonts/SDGothicNeobTTF-bLt.ttf);
    font-weight: lighter;
}

@font-face {
    font-family: SDGothicNeo;
    src: url(https://frontend-design-system.socar.kr/fonts/SDGothicNeobTTF-dMd.ttf);
    font-weight: normal;
}

@font-face {
    font-family: SDGothicNeo;
    src: url(https://frontend-design-system.socar.kr/fonts/SDGothicNeobTTF-fBd.ttf);
    font-weight: bold;
}




body,html,section{ margin: 0px;  word-break:keep-all; overflow-wrap:break-word;
font-family: 'SDGothicNeo',sans-serif; background: #c5c8ce;  }

p{ margin-block-end: 14px; margin-block-start:14px; margin-right: 20px;}

h1,sub1,h2,h3,b1,c2,c3{color:#28323C;}
a{text-decoration: none; color:#28323C;}

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

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

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

c2{font-size:12px;line-height:14px;}
c3{font-size:18px;line-height:18px;}
c4{font-size:14px;line-height:22px;}



#main{
  background: #FFFFFF;
  margin: 0px;
  background-size:cover;
  background-position:center;
height: 1020px;
}


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

}

#con2{
  background: linear-gradient(rgba(233, 235, 238, 0.8), rgba(233, 235, 238, 0.6), rgba(233, 235, 238, 0) 100%);

  background-size:cover;
  background-position:center;
  padding-top: 60px;

}


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

}

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


}



.content{
  background:white url(https://d353obgi8xzt9w.cloudfront.net/notice/20200611/5adec14bd1eaac824d47684b618d8326.png);
  background-size: cover;
  position:relative;

  background-position: fixed;}

.content{
  margin-top: 180px;
  padding:25px;
  box-shadow:0px 2px 2px rgba(0,0,0,0.1);
  border-radius: 4px 0px 0px 4px;
  color:#fff;
}

.content:after{
  content:' ';
  background:rgba(255,255,255,0.15);
  width:100%;
  border-radius: 4px 0px 0px 4px;
  display:block;
  position: absolute;
  top:0px;
  left:0px;
  z-index:1;}

.content *{z-index:2;position:relative;}




  .cont {  box-shadow:0px 2px 2px rgba(0,0,0,0.1); border-radius: 4px;background:#FFFFFF; }
  .cont .item {padding:24px; padding-bottom: 40px; padding-top: 24px;}
  .cont .item .text{margin-top:0px; margin-bottom:14px; }
  .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 {
  width:50%;
  height: 100%;
  margin: 0, 10px;
  box-sizing: border-box;}

  .first2{
  border: 0px solid green;
  width:50%;
  text-align: right;
  margin: 0, 10px;
  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;}



img.border-shadow{
    box-shadow: 10px 8px 20px 2px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

}



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




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

}


.sw_txt2 {
  margin-right:20px;
  margin-left:20px;

  width:100%; color: #28323c; text-align:left; }


.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 {
margin-top: 16px;
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 0px;
padding-left: 0px;


}



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


#btn
{margin-top: 48px;
margin-bottom: 80px;
text-align: center;
border: 0px solid #FFFFFF;
float: center;
border-radius: 4px;
width: 100%;
background: #00b8ff;
height: 64px;
font-size: 18px;
font-weight:400;
color: #fff;}





@media (min-width: 576px) {
.container4 {
width: 540px;
max-width: 70%; }
.content{
  background:white url( https://d353obgi8xzt9w.cloudfront.net/notice/20200611/5adec14bd1eaac824d47684b618d8326.png);
  background-size: cover;
  position:relative;
  background-position: fixed;}


      #main{
        background: #f7f7f7;
        margin: 0px;
          background-position: 55% 45%;
        padding-top: 30px;
        background-size:cover;
        padding-bottom: 100px;
}


}
@media (min-width: 768px) {
.container4 {
  width: 720px;
  max-width: 40%; }
  .content{
    background:white url(https://d353obgi8xzt9w.cloudfront.net/notice/20200611/5adec14bd1eaac824d47684b618d8326.png);
    background-size: cover;
    position:relative;
    background-position: fixed;}


        #main{
          background: #f7f7f7;
          margin: 0px;
          background-position: 55% 45%;

          padding-top: 30px;
          background-size:cover;
          height: 100%;}



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

  .content{
    background:white url(https://d353obgi8xzt9w.cloudfront.net/notice/20200611/5adec14bd1eaac824d47684b618d8326.png);
    background-size: cover;
    position:relative;
    background-position: fixed;}


        #main{
          background: #f7f7f7;
          margin: 0px;
          background-position: 55% 45%;

          padding-top: 30px;
          background-size:cover;
          height: 100%;}


}


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

  .container {
    margin-left: 20px;
    margin-right: 20px;
}


.content{
  background:white url(https://d353obgi8xzt9w.cloudfront.net/notice/20200611/5adec14bd1eaac824d47684b618d8326.png);
  background-size: cover;
  position:relative;
  background-position: fixed;}


      #main{
        background: #f7f7f7;
        margin: 0px;
        background-position: 60% 40%;

        padding-top: 30px;
        background-size:cover;
        height: 100%;}


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





        }

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


        }


        #con3{
          background: #ffffff;
          padding-top: 100px;
          margin-left: 10px;

        }

        #con4{
          background: #ffffff;
          padding-top: 48px;
          margin-left: 10px;


        }

        #con5{
          background: #ffffff;
          padding-top: 48px;
          margin-left: 10px;

        }

        #con6{
          background: #ffffff;
          padding-top: 48px;
          margin-left: 10px;
        }


        #con7{
          background: #374553;
          background-size:cover;
          background-position:center;
          height:660px;
          margin-top: 120px;
          padding-top: 100px;
          background-position: 0% 70%;

        }

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

        }



        #con9{
          background: #ffffff;
          height:430px;
          margin-top:180px;
          padding-bottom:120px;
          margin-left: 0px;
          margin-right: 0px;



        }



        .swiper-slide {
        text-align:left;
        display:flex;
        justify-content:center;
        margin-top: 60px;
        line-height: 28px;
        font-size: 18px;

        }



      .map-top {
      vertical-align: middle;
      width: 350%;
      text-align:left; }





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



      c2{font-size:12px;line-height:14px;}
      c3{font-size:18px;line-height:18px;}
      c4{font-size:14px;line-height:22px;}

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


  }