@charset "euc-kr";
/* CSS Document */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
*{margin:0; padding:0;font-family:'³ª´® °íµñ', 'Nanum Gothic', 'NanumGothic', sans-serif; box-sizing:border-box;}

a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a:visited{text-decoration:none;}
.clearfix:before,
.clearfix:after{display:table; content:"";}
.clearfix:after{clear:both;}
ul,li{list-style:none;}
body{position: relative; height: 100%;}
table {border-collapse: collapse;}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* top */

.kakao {width: 100%; position: fixed; top: 0; left: 0; text-align: center; background: #f9e200;z-index: 999999;}
.kakao img {display: inline-block; width: 300px;}
.top{ position: fixed; left: 0; top: 0px; height: 80px;width: 100%; z-index: 99999; transition: .2s; background: #000; z-index: 999999;}
.top .tbox {margin: 0 auto;}
.top .menu { text-align: center; margin: 0 auto; height: 0px; width: 100%;}
.top .menu.on { height: 300px; background: #000; }
.top .menu.on.sidemenu { border-top: 1px solid #666;}
.top .menu .sidemenu {text-align: center;  display: flex; justify-content: space-around; width: 1160px; margin: 0 auto;}
.top .menu .sidemenu .slist {margin-left:100px; text-align: left;}
.top .menu .sidemenu .slist > a {line-height: 80px; color: #fff; font-size: 20px; font-weight: 800;  }
.top .menu .sidemenu .slist > a:hover {opacity: .6;}
.top .menu .sidemenu .slist .sslist {height: 0; text-align: left;  visibility: hidden; line-height: 3em;}
.top .menu .sidemenu .slist .sslist.on {visibility:visible; height: auto;}
.top .menu .sidemenu .slist .sslist a {color: #fff; font-size:14px;}
.top .menu .sidemenu .slist .sslist a:hover {opacity: .7;}
.top .menubtn{display: inline-block;}
.top .menubtn li{position: relative;}
.top .menubtn li:after {position: absolute; content: ''; height: 3px; width: 100%; background: #000; bottom: 0; left: 50%; transform: translateX(-50%); display: none;}
.top .menubtn li a {color: #fff; font-size: 16px; font-weight: 700; line-height: 60px;}
.top .menubtn li a:hover {opacity: .7;}
.top .menubtn li.on:after {display: block;}
.top .logo{margin-top: 6px; float: left;}
.top .logo img{width:260px; margin-top: 10px;}
.topnav {width: 100%; background: #eaeaea;  position: fixed; bottom: 0; left: 0; height:135px; z-index: 99999;}
.topnav .topnavbox {width: 1160px; margin: 0 auto; margin-top: 13px;}
.topnav .topnavbox img{ float: left; width: 200px;}
.topnav .topnavbox .board {float: right; width: 900px;}
.topnavbox2 {position: fixed; width:100%; height: 60px; bottom: 0;left: 0;;z-index: 999995;text-align: center;}
.topnavbox2 a {color: #fff !important; width: 50%; height: 60px; display: block; font-size: 20px; float: left; font-weight: 800;}
.topnavbox2 a:first-child {background: #000; text-align: center; line-height: 60px;}
.topnavbox2 a:nth-child(2) {background: #999; line-height: 60px;}
.topnavbox2 a img {vertical-align: middle; width: 30px; padding-right: 5px;}
.snsnav {position: fixed; right: 50px; top: 100px; z-index: 99999;}

.snsbox ul li a:hover {opacity: .7;}
.snsbox ul li a img {width: 40px;}
.snsbox ul li {display: block; margin: 10px 0;}

.blinking {
    display: none;
     z-index: 99999;
    position: fixed;
    background: #333;
    bottom: 130px;
    height: 60px;
    left: 0;
    width: 100%;
    -webkit-animation:blink 1s ease-in-out infinite alternate; 
    -moz-animation:blink 1s ease-in-out infinite alternate; 
    animation:blink 1s ease-in-out infinite alternate; 
     text-align: center;
} 
    @-webkit-keyframes blink{
        0% {opacity:0;} 
        100% {opacity:1;}
    } 
    @-moz-keyframes blink{
        0% {opacity:0;}
        100% {opacity:1;} 
    } 
    @keyframes blink{
        0% {opacity:0;}
        100% {opacity:1;} 
    }
.blinking span {font-size: 32px; color: #fff; font-weight: 600; margin-top: 5px; line-height: 60px;}
.blinking span:first-child {font-size: 20px;}
.smenu {text-align: center; width: 1160px; margin: 0 auto; margin-top: 20px; font-size: 0;}
.smenu li {display: inline-block; width:24%; border-bottom: 1px solid #666;}
.smenu li a {padding: 10px 20px; display: block; color: #333; font-size: 18px;}
.smenu01 ul li:nth-of-type(1) a{background: #666; color: #fff;}
.smenu02 ul li:nth-of-type(2) a{background: #666; color: #fff;}
.smenu03 ul li:nth-of-type(3) a{background: #666; color: #fff;}
.smenu04 ul li:nth-of-type(4) a{background: #666; color: #fff;}
.smenu05 ul li:nth-of-type(5) a{background: #666; color: #fff;}
.smenu06 ul li:nth-of-type(6) a{background: #666; color: #fff;}
/* sidemenu */

/* slidetext */
.slidetxt{position:absolute; bottom: 0; right:20%; z-index:9998; text-align: right;}
.slidetxt p:nth-child(1){font-size:32px; font-weight:700; color:#fff; letter-spacing:-2px; line-height: 1.5em;}
.slidetxt p:nth-child(2) {color: #fff; font-weight: 700;font-size:100px; letter-spacing: -3px;margin-bottom: 200px; text-transform: uppercase;} 


/* footer */
.mapbox {background: #333; padding: 20px 20px; width: 100%; margin: 0 auto;}
.mapbox .maptxt {text-align: center; color: #fff;}
.mapbox .maptxt h3 {letter-spacing: 10px; font-size: 14px;}
.mapbox .maptxt h3 {margin: 5px 0;}
.mapbox .maptxt p {margin: 5px 0;}
.mapbox .maptxt h1 {padding-bottom: 20px;}
.footer {background: #666; width: 100%; margin: 0 auto; margin-bottom: 60px; text-align: center;}
.footer p{padding:20px; line-height:1.5em; color: #ddd;}
.footer p span{margin-right:15px; font-size:16px; font-weight:400;}
.copynav {position: fixed; width:100%; height: 60px; bottom: 0;left: 0;;z-index: 999995;text-align: center;}
.copynav a {color: #fff; width: 33.333333%; height: 60px; display: block; font-size: 20px; float: left; font-weight: 800;}
.copynav a:first-child {background: #006FC4; text-align: center; line-height: 60px;}
.copynav a:nth-child(2) {background: #31b14a; line-height: 60px;}
.copynav a:last-child {background: #ffe600; text-align: center; line-height: 60px; color: #3c1e1e;}
.copynav a p img {vertical-align: middle; width: 30px; padding-right: 5px;}

.copy {background: #333; margin-bottom: 60px;}
.copy .sbox {width: 1160px; margin: 0 auto; text-align: center; height: 500px;}
.copy .sbox .ssbox:first-child {float: left; text-align: left;}
.copy .sbox .ssbox:first-child p {font-size: 14px; line-height: 1.5em; color: #fff;}
.copy .sbox .ssbox:first-child p.title {font-weight: 800; font-weight: 800; font-size: 18px;margin-bottom: 20px; margin-top: 20px;}
.copy .sbox .ssbox:first-child ul {margin-top: 30px;}
.copy .sbox .ssbox:first-child ul li {float: left;}
.copy .sbox .ssbox:first-child ul li a {color: #fff; font-size: 14px;}
.copy .sbox .ssbox:first-child ul li:first-child {padding-right: 12px;}
.copy .sbox .ssbox:first-child ul li:nth-child(2) {border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding-left: 12px; padding-right: 12px;}
.copy .sbox .ssbox:first-child ul li:last-child {padding-left: 12px;}
.copy .sbox .ssbox:nth-child(2) {display: inline-block;}
.copy .sbox .ssbox:nth-child(2) ul {float: left; margin-top: 60px; text-align: left; margin-right: 30px;}
.copy .sbox .ssbox:nth-child(2) ul li a {color: #fff; font-size: 14px;}
.copy .sbox .ssbox:nth-child(2) ul li {margin-bottom: 18px;}
.copy .sbox .ssbox:nth-child(2) ul li:first-child a{font-size: 16px; font-weight: 800; margin-bottom: 14px;}
.copy .sbox .ssbox:last-child {float: right; text-align: right; position: relative; height: 100%;}
.copy .sbox .ssbox:last-child p,
.copy .sbox .ssbox:last-child a {color: #fff; font-size: 14px;}
.copy .sbox .ssbox:last-child a {display: block; margin-top: 60px; font-size: 30px; font-weight: 800;}
.copy .sbox .ssbox:last-child p:nth-child(2) {margin-top: 80px;}
.copy .sbox .ssbox:last-child p:last-child {margin-top: 90px;}
.copy .sbox .ssbox:last-child p {line-height: 1.8em;}
.copy .sbox .ssbox .copylogo img {width: 200px;}
.copy .sbox .ssbox .copylogo {display: block; margin: 40px 0;}



/*section*/
.txtbox {background: #333; text-align: center; padding: 4px 20px; color: #fff; font-weight: 700; font-size: 12px;}
.maintitle {font-weight: 700;text-align: center; color: #006FC4; font-size: 30px; border-bottom: 3px solid #006FC4; padding-bottom: 5px;margin-bottom: 20px; display: inline-block;}
.mySwiper {
        width: 100%;
        height: 800px;
        overflow: hidden;
      }
.mySwiper1 {
        width: 100%;
        height: 300px;
        overflow: hidden;
        position: relative;
      }
.swiper .swiper-pagination {position: absolute; left: 50px;}
.myswiper .swiper-pagination span {width: 16px; height: 16px; }
.myswiper .swiper-pagination span:nth-child(2) {margin:  0 20px;}
.swiper-pagination-bullet-active {background: #fff;}
      .swiper-slide {
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
      }
      .swiper-slide img {
        display: block;
        object-fit: cover;          width: 90px;
          position: absolute;
          top: 27px;
      }

.swiper-wrapper .swiper-slide:first-child {background: url(../img/slide01.jpg) no-repeat center / cover}
.swiper-wrapper .swiper-slide:last-child {background: url(../img/slide02.jpg) no-repeat center / cover}
/*section*/
.section01 { width: 1160px; margin: 30px auto;}
.sectitle {text-align: center; margin-bottom: 50px;}
.sectitle p:first-child {font-size: 40px; font-weight: 800; color: #000;} 
.sectitle p:last-child {font-size: 24px; font-weight: 800; color: #333; margin-top: 20px;}
.section01 .sectitle {margin-top: 50px;}
.section01 .sectitle img {width: 200px;}
.section01 .sbox .ssbox {margin-top: 50px;}
.section01 .sbox .ssbox div {width: 50%; float: left;}
.section01 .sbox .ssbox div.sec01txt, 
.section01 .sbox .ssbox div:nth-child(3).sec01txt {text-align: right;}
.section01 .sbox .leftbox div.sec01txt {text-align: left;}
.section01 .sbox .ssbox div.sec01txt p:first-child {font-size: 44px; font-weight: 800;color: #000;}
.section01 .sbox .ssbox div.sec01txt p:nth-child(2) {font-size: 28px;font-weight: 700; margin-top: 30px; margin-bottom: 20px;}
.section01 .sbox .ssbox div.sec01txt p:nth-child(3) {line-height: 1.5em;}
.section01 .sbox .ssbox div.sec01txt a {color: #000; font-weight: 800; margin-top: 30px; display: inline-block;}
.section01 .sbox .ssbox div.sec01txt a:hover {border-bottom: 1px solid #000;}
.section01 .sbox .ssbox .pbox2 {background: url(../img/main01.jpg) no-repeat center / cover; height: 400px;}
.section01 .sbox .ssbox:last-child .pbox {background: url(../img/main02.jpg) no-repeat center / cover; height: 400px;}
.section01 .sbox .ssbox .mbox a p:hover:before {width: 95px;}
.section02 {width: 100%;background: url(../img/main03.jpg) no-repeat center / cover; padding-bottom: 100px;}
.section02 .sectitle { padding-top: 60px;}
.section02 .sectitle p:first-child {color: #fff;}
.section02 .sectitle p:last-child {font-size: 24px; font-weight: 800; color: #fff; margin-top: 20px;}
.section02 .sbox {width: 1160px;  margin: 0 auto;}
.section02 .swiper-wrapper div {border: 1px solid  #ddd; width: 200px; height: 250px; float: left; background: #fff;text-align: center; position: relative;}
.section02 .swiper-wrapper div:hover {border-image: linear-gradient(to right, #01c9ca 0%, #3886FF 100%); border-image-width: 10px; border-image-slice: 1;}
.section02 .swiper-wrapper div span.good_txt { width: 100%;position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; padding: 30px; vertical-align: top;}
.section02 .swiper-wrapper div span.good_txt h1 {}
.section02 .swiper-wrapper div span.good_txt p {font-size: 20px; margin: 30px 0;}
.section02 .swiper-wrapper div span.good_txt span {font-size: 60px;}

.section04 .main_title { margin: 50px auto;}
.section04 .mainline {width: 1160px; height: 8px; margin: 50px auto; background: linear-gradient(to right, #999, #000); position: relative;}
.section04 .mainline span:first-child {position: absolute; top: -4px;left: -2px; width: 16px;height: 16px; border-radius: 100%; display: inline-block;background: #666;}
.section04 .mainline span:last-child {
    position: absolute; top: -7px; right: -5px; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 11px solid #000;
}
.section04 .sec4box {width: 1160px; margin: 0 auto; text-align: center; display: flex; justify-content: space-between;}
.section04 .sec4box div {float: left; width: 200px; height: 200px;border: 1px solid  #ddd;background: #fff; border-radius: 100%; position: relative;}
.section04 .sec4box div:first-child:hover{background: #e9e9e9;}
.section04 .sec4box div .steptxt span {font-size: 60px; color: #555;}
.section04 .sec4box div .steptxt {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.section04 .sec4box div .steptxt b {font-size: 16px;}
.section04 .sec4box div .steptxt p {font-size: 24px; color: #555; font-weight: 700; width: 200px}
.section04 .sec4box div span.step {position: absolute; width: 75px; height: 75px; border-radius: 100%; right: 0; top: 0; display: block;background: #555; color: #fff; line-height: 75px; font-size: 13px; font-weight: 700;}
.section04 .sec4box div:nth-child(2),
.section04 .sec4box div:nth-child(4){margin: 0 30px; vertical-align: top;}
.section04 {background: url(../img/section04.jpg) no-repeat left top / cover; width: 100%; height: 500px;margin-top: 50px; }
.section04 .sec4box div:last-child {background: #555; color: #fff;}
.section04 .sec4box div:last-child span,
.section04 .sec4box div:last-child p {color: #fff;}
.section04 .sec4box div:last-child .step {background: linear-gradient(to top, #999, #333);}
.section05 {width: 1160px; margin: 0 auto;}
/*sub*/
.sub{min-height:500px; overflow:hidden; margin-top: 80px;}
.sub .title{padding:40px 0 60px; text-align:center;}
.sub .title p:nth-of-type(1){font-size:35px; font-weight:700; color:#888; letter-spacing:7px;}
.sub .title p:nth-of-type(2){margin-top:20px; font-size:12px; font-weight:400; color:#888;}
.sub .contents .board td,
.sub .contents .board td a{font-size:12px; font-weight:400; color:#666;}
.sub .subtitle p {font-size: 18px; color: #fff; text-align: center; padding-bottom: 20px;}
.sub .subtitle h1 {font-size: 40px; color: #fff; text-align: center; padding-bottom: 10px; font-weight: 800; margin-top: 20px;}
.sub .subtitle span {display: block;width: 30px; height: 1px; background: #fff;position: absolute; left: 50%; transform: translateX(-50%);}
.sub .subtitle {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
.sub .contents{width:1160px; margin:100px auto; }
.sub .contents h3 {text-align: center; font-size: 32px; margin-bottom: 50px;}
.subtop {width: 100%; height: 250px; position: relative;}
.subtop01 {background: url(../img/subtop01.jpg) no-repeat center / cover;}
.subtop02 {background: url(../img/subtop02.jpg) no-repeat center / cover;}
.subtop03 {background: url(../img/subtop03.jpg) no-repeat center / cover;}
.subtop04 {background: url(../img/subtop04.jpg) no-repeat center / cover;}
.subtop05 {background: url(../img/subtop05.jpg) no-repeat center / cover;}
.sub .contents .sbox{width: 1160px; background: #fff; padding: 60px;}
.sub .contents .sbox p {text-align: left; margin-bottom: 30px; line-height: 2em;}
.sub .contents .sbox b {text-align: left; padding-bottom: 20px;line-height: 1.5em; display: block; font-size: 20px;}
.stable td, 
.stable th { padding: 5px;}
.stable tr th {font-size: 14px;}

.sub01_01 .contents .sbox .ssbox:last-child {margin-top: 0px;  text-align: left;}
.sub01_01 .contents .sbox .ssbox .ssphoto {float: right; margin-top: 30px;}
.sub01_01 .contents .sbox .ssbox .ssphoto img{display: block; float: left; margin-left: 10px;}
.sub01_01 .contents .sbox .ssbox .ssphoto img:last-child {border: 1px solid  #bbb;}
.sub01_02 .contents .sbox .ssbox .ssphoto {display: inline-block;}
.sub01_02 .contents .sbox .ssbox .ssphoto img {float: left; width: 24%;}
.sub01_02 .contents .sbox .ssbox .ssphoto img:nth-child(2) {margin: 0 1%;}
.sub01_02 .contents .sbox .ssbox .ssphoto img:nth-child(3) {margin-right: 1%;}
.sub01_02 .contents .sbox .ssbox .ssphoto img:last-child {border: 1px solid  #bbb;}

.sub02_01 .contents .sbox .ssbox .ssphoto {float: right; margin-top: 10px; width: 500px; }
.sub02_01 .contents .sbox .ssbox .ssphoto img{width: 48%; float: left; margin-left: 10px; margin-bottom: 10px;}

.sub02_02 .contents .sbox .ssbox .stable{margin-bottom: 50px; margin-top: 20px;}
.sub02_02 .contents .sbox .ssbox img {width: 100%;}
.sub02_02 .contents .sbox .ssbox .stable tr:first-child,
.sub05_04 .contents .sbox .ssbox .stable tr:first-child{background: #ddd;}

.sub02_03 .contents .sbox .sub02_03_img img {width: 50%; float: left;}
.sub02_03 .contents .sbox .sub02_03_img {margin-bottom: 20px;}


.sub05_04 .contents .sbox .ssbox .stable tr td {font-size: 14px;}

.sub05_01 .contents .sbox .ssbox .basic{border-top:2px solid #666; border-collapse:collapse;}
.sub05_01 .contents .sbox .ssbox .basic th,
.sub05_01 .contents .sbox .ssbox .basic td{padding:10px; font-size:16px; color:#555; border:1px solid #ddd;}
.sub05_01 .contents .sbox .ssbox .basic th{width:200px;}