@charset "utf-8";

/*----------------------------------------------------------------------------
 * 메인 ?��????�� ?��?��
 * ---------------------------------------------------------------------------
 * Author   : (�?)?��?��?��?�� http://plani.co.kr
 * ---------------------------------------------------------------------------
 * History
 * ---------------------------------------------------------------------------
 * 2017-05-10 (조�?��??) : 최초?��?��
 * -------------------------------------------------------------------------*/

@import url(/common/css/kor/general.css);
@import url('/css/korean/layout.css?q=20200424');


#wrap {width:3980px; background: #f6f5f3 url('/images/korean/main/bg_left.png') no-repeat 0 100px; }
#wrap:after {position:absolute; right:0; bottom:0; width:276px; height:426px; background:url('/images/korean/main/bg_right.png') no-repeat; content:'';}

/* layout */
#header {
    position: fixed;
    margin: 0 0 6px 310px;
    }

#body_wrap {
    margin-top: 169px;
    }

#dnavigation:before {position:absolute; left:50%; top:auto; width:1000%; height:75px; margin-left:-500%; content:'';}
#footer {
    margin: 0 310px;
    }

/* body */
#body {width:101%; margin:0 0 0 180px; padding:0;}
#body .main {width:3670px; margin-left:130px;}
#body .group {float:left;width:1200px;overflow:  hidden;}
#body .group + .group {margin-left:35px;}

/* quick */
/* 220224_backup */
.quick {position:absolute;top:auto;left:0;width:110px;text-align:center;}
.quick li a{display:block;padding:15px 0 0;background-color:#004ea2;color:#fff;line-height:130%;}
.quick li:first-child a{padding-bottom:15px;background:#e7702d url("/images/korean/main/new_quick_01_bg.png") right top no-repeat;border-top-left-radius: 30px;}
.quick li.youtube a{padding-bottom: 20px;border-radius: 0 0 30px 30px}
.quick li a span{display: block;padding-top: 10px;font-size: 1.142em;font-weight: 500;opacity: .6}
.quick li:first-child a span{opacity:1}

/* visual */
#visual {float:left; position:relative; width:940px; height:405px; border-radius:0 0 0 30px;overflow:hidden; }
#visual .bx-wrapper {height:100%;/* z-index:  60; */}
#visual .bx-window {z-index: 1;height:100%;}
#visual img {width:940px;height: 405px;}
#visual li {position:relative;/* z-index:  10 !important; */}
#visual .desc {display:table; position:absolute; left:0; top:0; z-index:1; width:300px; height:405px; padding:0 40px; box-sizing:border-box; color:#fff;}
#visual .desc:before {position:absolute; left:-300px; top:0; z-index:-1; width:100%; height:100%; background:url('/images/korean/main/visual_01.png') no-repeat; content:''; opacity:0; transition:all .5s}
#visual .desc p {display:table-cell; vertical-align:middle;}
#visual .desc small {display:block; position:relative; top:-20px; margin-bottom:20px; font-size:1.142em; opacity:0; transition:all .5s .5s;}
#visual .desc small:before {display:block; width:40px; height:3px; margin-bottom:12px; background-color:#fff; content:'';}
#visual .desc span {position:relative; top:20px; font-family:'Arita', 'NotoKR'; font-size:2.928em; font-weight:bold; letter-spacing:-2px; text-shadow:1px 1px 3px rgba(0, 0, 0, .5); white-space:nowrap; line-height:100%; opacity:0; transition:all .5s .8s;}
#visual .desc span strong {display:block; margin-bottom:-5px; font-size:1.944em; line-height:100%;}
#visual .visual-02 .desc span {font-size:2.571em;}
#visual .visual-02 .desc:before {background:url('/images/korean/main/visual_02.png') no-repeat;}
#visual /*.active*/ {opacity:1 !important;}
#visual /*.active*/ .desc:before {left:0; opacity:1;}
#visual /*.active*/ .desc small,
#visual /*.active*/ .desc span {top:0; opacity:1;}
#visual .bx-auto a {position:absolute; right:20px; top:20px; z-index:1; width:12px; height:12px; background:url('/images/kor/main/btn_visual_stop.png') no-repeat; font-size:0; line-height:0;}
#visual .bx-auto .start {background:url('/images/kor/main/btn_visual_play.png') no-repeat;}
#visual .bx-pager {position:absolute;right:40px;top:20px;z-index: 90;text-align:right;}
#visual .bx-pager a {display:inline-block; width:12px; height:12px; margin-left:5px; background:url('/images/kor/main/visual_navigation_off.png') no-repeat; font-size:0; line-height:0; vertical-align:top;}
#visual .bx-pager .pager-active {width:34px; background:url('/images/kor/main/visual_navigation_on.png') no-repeat;}

#visual .bx-prev,
#visual .bx-next  {
    display:  block;
    position:absolute;
    top:50%;
    left:0;
    width: 35px;
    height: 35px;
    background: url('/images/korean/main/arrow-prev.png') no-repeat 0 0;
    color:  transparent;
    z-index: 90;
    }
#visual .bx-next {
    left: inherit;
    right:0;
    background: url('/images/korean/main/arrow-next.png') no-repeat;
    }

/* use */
.use {
    float:right;
    width:260px;
    height: 186px;
    overflow: hidden;
    }

.use a { display: block; position: relative; color:#fff; }
.use a:focus::after { position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid black; content: ""; }
.use strong {display:block; margin:10px 0 0; font-size:2.727em; color:#ffa939;}

/* news */
.news {
    overflow:hidden;
    float:right;
    position:relative;
    z-index:1;
    width:260px;
    height:219px;
    border-radius:0 0 30px 0;
    }

.news span {display:block; overflow:hidden; font-size:1.428em; }
.news img {position:absolute; left:0; top:0; z-index:-2; width:100%; min-height:100%;}
.news a {display:block; box-sizing:border-box; padding:120px 25px 0 25px; color:#fff; text-shadow:1px 1px 3px rgba(0, 0, 0, .5); word-break:keep-all; letter-spacing:-1px;}
/* .news a:before {position:absolute; left:0; bottom:0; z-index:-1; width:100%; height:100%; background:linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .9)); content:'';} */
.side-visual .bx-prev:hover, .side-visual .bx-next:hover {text-decoration: none;}

/* count */
.count {display:inline-block; overflow:hidden; position:relative; width:100%; height:80px; margin:15px 0; padding:15px 0 0 295px; box-sizing:border-box; border-radius:30px; border:1px solid #dedede; background-color:#fff;}
.count .title {position:absolute; left:50px; top:20px; margin-top:-3px; color:#004ea2;}
.count .title h2 {font-size:1.428em; font-weight:600;line-height:1.3;}
.count .title h2 span{font-size:0.75em;letter-spacing:-0.05em;display:block;}
.count .title strong {margin-right:5px; font-weight:600;}
.count .title small {font-size:.857em;color:#004ea2;}
.count ul{float:left;}
.count ul:after{content:"";display:block;clear:both;}
.count li {float:left; padding-right:65px; font-size:1.142em; color:#7f8a9a;position:relative;margin-top:10px;}
.count li span{position:absolute;top:-15px;left:18%;color:#7f8a9a;}
.count li:last-child span{left:22%}
.count li strong {position:relative; top:-2px; margin:0 5px 0 5px; font-size:1.875em; font-weight:bold; color:#004ea2; vertical-align:middle;}
.count img {vertical-align:middle;}
.count div{float:left;}
.count div:after{content:"";display:block;clear:both;}
.count .count1 ul li:last-child{padding-right:30px;}
.count .count2{margin:0 0 0 30px;position:relative;}
.count .count2:after{content:"";position:absolute;width:1px;height:60px;background:#e5e5e5;left:-10px;top:-5px;}
.count .count2 .title{position:inherit;top:5px;}
.count .count2 .title span{line-height:1;}
.count .count2 ul{margin-left:120px;}
.count .count2 li span{left:0;}


/* latest */
.latest {overflow:hidden; position:relative; word-break:keep-all;}
.latest h2 {font-size:1.428em; font-weight:600; letter-spacing:-1px;}
.latest h2 a {position:absolute; top:0; left:0; z-index: 90; width:28%; margin-left:1px; background-color:#e0e4ea; color:#919ba5; text-align:center; line-height:60px;}
.latest h2 a:after {position:absolute; right:0; top:50%; width:1px; height:20px; margin-top:-10px; background-color:#c1c8d2; content:'';}
.latest h2 img {position:relative; top:-2px; margin-right:5px; vertical-align:middle;}
.latest .item .contents {display:none; overflow:hidden; padding:15px 0 15px 50px; border-radius:0 0 30px 30px; border:1px solid #dedede; border-top:0 none; background-color:#fff;}
.latest .item .contents li {float:left; width:25%; padding-right: 50px; box-sizing:border-box;}
.latest .item .contents a {display:block;}
.latest .item .contents strong {display:block; overflow:hidden; /* height:58px; */ font-size:1.2em; font-weight:500; letter-spacing:-2px; line-height:125%;}
.latest .item .contents p {display:block; overflow:hidden; height:45px; margin:10px 0 5px;}
.latest .item .contents span {font-size:.857em; color:#004ea2;}
.latest .item .more {display:none; position:absolute; right:0; top:0; width:25%; height:60px; background-color:#e0e4ea; border-radius:0 20px 0 0;}
.latest .item .more a {position:absolute; right:40px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:100%; background-color:#86898c; font-size:0; line-height:0;}
.latest .item .more a:before {position:absolute; left:50%; top:50%; width:11px; height:1px; margin:0 0 0 -5px; background-color:#fff; content:'';}
.latest .item .more a:after {position:absolute; left:50%; top:50%; width:1px; height:11px; margin:-5px 0 0; background-color:#fff; content:'';}
.latest .item.on {padding-top:60px;}
.latest .item.on h2 {font-size:1.571em;}
.latest .item.on h2 a {color:#004ea2;}
.latest .item.on h2 a:before {position:absolute; left:-1px; right:0; top:0; z-index:-1; height:100%; border-radius:30px 30px 0 0 !important; border:1px solid #dedede; border-bottom:0 none; background-color:#fff; content:'';}
.latest .item.on h2 a:after {display:none;}
.latest .item.on .contents,
.latest .item.on .more {display:block;}
.latest .item:first-child h2 a {border-radius:30px 0 0 0;}
.latest .item:first-child + .item h2 a {margin-left:28%;}
.latest .item:first-child + .item + .item h2 a {margin-left:56%;}
.latest .item:first-child + .item + .item + .item h2 a {margin-left:75%; border-radius:0 30px 0 0;}
.latest .item:first-child + .item + .item + .item h2 a:after {display:none;}

/* equipment */
.equipment_list {
    float:left;
    }
.equipment_list a:hover  {
    text-decoration: none;
    }
.equipment_list li {
    float: left;
    margin-right:11px;
    }


/* mvisual */
.mvisual {overflow:hidden; float:right; position:relative; width:291px; height:186px; border-radius:30px; background-color:#fff; text-align:center;}
.mvisual .visual-zone {width:100%; height:100%; background-size: 100% !important; background-position:center center;}
.mvisual .visual-zone img {
    width: 100%;
    }
.mvisual .visual-controll-zone {position:absolute; left:0; top:10px; width:100%; text-align:center;}
.mvisual .visual-controll-zone .controll-zone-2,
.mvisual .visual-controll-zone .navigation-zone {display:inline-block; position:relative; top:auto; left:auto; margin:0 5px; vertical-align:middle;}
.mvisual .visual-controll-zone .navigation-zone li {
    float: left;
    margin: 0 3px;
    }
/* kbsi */
.kbsi {display:inline-block; overflow:hidden; position:relative; width:100%; height:535px; margin-top:20px; box-sizing:border-box; border-radius:30px; border:1px solid #dedede; background-color:#fff; z-index: 10;}
.kbsi .bx-wrapper {padding-top:70px;}
.kbsi .bx-pager {overflow:hidden; position:absolute; left:0; top:0; width:100%; height:70px; border-radius:30px 30px 0 0; background-color:#f1f5f9; line-height:70px;}
.kbsi .bx-pager a {overflow:hidden; float:left; position:relative; width:33.3333%; height:100%; box-sizing:border-box; border-bottom:1px solid #dedede;  font-size:1.285em; font-family:'Montserrat'; color:#a4acb7; text-transform:uppercase; text-align:center;}
.kbsi .bx-pager a:hover:after,
.kbsi .bx-pager a:focus:after,
.kbsi .bx-pager a:active:after {text-decoration:underline;}
.kbsi .bx-pager a:after {position:absolute; left:0; top:0; width:100%; background:url('/images/korean/main/kbsi_01.gif') no-repeat 30% center #f1f5f9; content:'NETWORK'; text-align:center; text-indent:45px;}
.kbsi .bx-pager a:before {position:absolute; left:0; top:50%; z-index:1; width:1px; height:20px; margin-top:-10px; background-color:#d0d7e0; content:'';}
.kbsi .bx-pager .pager-1 {left:-1px; border-left:1px solid #dedede; border-radius:30px 0 0 0;}
.kbsi .bx-pager .pager-4 {right:-1px; border-right:1px solid #dedede; border-radius:0 30px 0 0;}
.kbsi .bx-pager .pager-2:after {background:url('/images/korean/main/kbsi_02.gif') no-repeat 30% center #f1f5f9; content:'CREATIVE';}
.kbsi .bx-pager .pager-3:after {background:url('/images/korean/main/kbsi_03.gif') no-repeat 33.5% center #f1f5f9; content:'GREAT';}
.kbsi .bx-pager .pager-4:after {background:url('/images/korean/main/kbsi_04.gif') no-repeat 33.5% center #f1f5f9; content:'STORY';}
.kbsi .bx-pager .pager-1:before {display:none;}
.kbsi .bx-pager .pager-active {position:relative; top:-1px; height:71px; border:1px solid #dedede; border-bottom:0 none; border-radius:30px 30px 0 0; background-color:#fff; color:#004ea2;}
.kbsi .bx-pager .pager-active:after {background:url('/images/korean/main/kbsi_01_on.gif') no-repeat 30.5% center #fff;}
.kbsi .bx-pager .pager-active:before,
.kbsi .bx-pager .pager-active + a:before {display:none;}
.kbsi .bx-pager .pager-2.pager-active:after {background:url('/images/korean/main/kbsi_02_on.gif') no-repeat 30% center #fff;}
.kbsi .bx-pager .pager-3.pager-active:after {background:url('/images/korean/main/kbsi_03_on.gif') no-repeat 33.5% center #fff;}
.kbsi .bx-pager .pager-4.pager-active:after {background:url('/images/korean/main/kbsi_04_on.gif') no-repeat 33.5% 14px #fff;}
.kbsi .bx-prev {position:absolute; left:45px; top:120px; width:20px; height:20px; border-left:1px solid #aeb5be; border-bottom:1px solid #aeb5be; font-size:0; line-height:0; content:''; transform:rotate(45deg);}
.kbsi .bx-next {position:absolute; right:45px; top:120px; width:20px; height:20px; border-right:1px solid #aeb5be; border-top:1px solid #aeb5be; font-size:0; line-height:0; content:''; transform:rotate(45deg);}
.kbsi .bx-controls a {top: 70px;}
.kbsi .item {/*width:1200px !important;*/ height:465px; padding:25px 45px; box-sizing:border-box;}

/* title */
.kbsi .contents > p.title {position:relative; z-index:1; margin:0 40px; padding: 30px 0 25px; text-align:center; line-height:200%;}
.kbsi .contents > p.title:before {position:absolute; left:0; top:50%; z-index:-1; width:100%; height:1px; background-color:#ebecee; content:'';}
.kbsi .contents > p.title strong {display:inline-block; margin-bottom: 20px; padding:0 20px; background-color:#fff; font-family:'Montserrat'; font-size:2.142em; color:#004ea2; text-transform:uppercase;}
.kbsi .contents > p.title span {display:inline-block; padding:0 20px; background-color:#fff; color:#777;}
.kbsi .contents > p.title em {font-style:normal; color:#333;}


/* card */
.kbsi .card {overflow:hidden; margin: 0 -2rem;}
.kbsi .card li {float:left; width: 33.333%;}
.kbsi .card li .inner {padding: 0 2rem;}
.kbsi .card li:first-child {margin-left:0;}
.kbsi .card li:first-child + li p {color:#004ea2;}
.kbsi .card li:first-child + li a {background-color:#004ea2;}
.kbsi .card li:first-child + li + li p {color:#718ea5;}
.kbsi .card li:first-child + li + li a {background-color:#718ea5;}
.kbsi .card li:first-child + li + li + li p {color:#d77f17;}
.kbsi .card li:first-child + li + li + li a {background-color:#d77f17;}
.kbsi .card .inner > div {overflow:hidden; height:260px; border-radius:10px 10px 0 0; border:1px solid #ebeaef;}
.kbsi .card .inner .thumb {display: block; overflow: hidden; position: relative; z-index: 0; height: 0; padding-top: 40%; background-color: #000; color: #fff;}
.kbsi .card .inner .thumb img {position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; min-height: 100%; transform: translateY(-50%);}
.kbsi .card p {padding:15px 15px 5px; font-size:1.428em; font-weight:500; color:#eb6a1c;}
.kbsi .card span {display:block; overflow:hidden; height:45px; padding:0 15px; color:#555;}
.kbsi .card a {display:block; height:45px; margin-top:-5px; border-radius:10px; background-color:#eb6a1c; font-size:.928em; color:#fff; text-align:center; text-transform:uppercase; line-height:45px;}
.kbsi .card a:after {display:inline-block; width:6px; height:6px; margin-left:10px; border-right:1px solid #fff; border-top:1px solid #fff; content:''; transform:rotate(45deg); vertical-align:middle;}
.kbsi .card.creative li:first-child {margin-left: 0;}
.kbsi .card.great li:first-child {margin-left: 0;}

/* network */
.kbsi .network {position:relative; margin-top:-10px;}
.kbsi .network > ul {overflow:hidden; width: 710px; margin-left: -28px;}
.kbsi .network ul > li{float:left;width:65%;margin:0 0 0 5%;padding:3px 0;box-sizing:border-box;color:#707070;letter-spacing: -0.07em;}
.kbsi .network ul > li span a{color:#004ea2;display:block;float:left}
.kbsi .network ul > li ul{box-sizing:border-box;border-bottom:1px dashed #bbb;margin:10px 0;padding:0 0 25px 0;}
.kbsi .network ul > li ul:after{content:"";display:block;clear:both;}
.kbsi .network ul > li ul li{width:100%;margin:0 0 0 3%;}
.kbsi .network ul > li ul li span{float:left;position:relative;}
.kbsi .network ul > li ul li span:after{content:"";position:absolute;left:-10px;top:8px;width:3px;height:5px;background:url('/images/korean/main/network_arrow.png')no-repeat;}
.kbsi .network ul > li ul li > .desc{display:block;position:relative;float:none;margin-left:85px}
.kbsi .network ul > li ul li > .desc:after{display:none}
.kbsi .network ul > li ul li > .desc > a{display:inline-block;float:none}
/*
@media screen and (-webkit-min-device-pixel-ratio:0){.kbsi .network ul > li ul li span:after{;top:8px}}
*/
.kbsi .network > ul > li:nth-child(1){margin:30px 0 0 5%;}
.kbsi .network > ul > li:nth-child(2){}
.kbsi .network > ul > li:nth-child(2) ul{border:0 none;}
.kbsi .network > ul > li:nth-child(2) strong{margin:15px 0 0 0;}
.kbsi .network > ul > li:nth-child(3){width:13%;position:absolute;right:430px;top:30px;margin:0 0 20px 0;}
.kbsi .network > ul > li:nth-child(4){width:13%;margin:0 0 20px 0;position:absolute;right:430px;top:75px;}
.kbsi .network > ul > li:nth-child(5){width:13%;margin:0 0 20px 0;position:absolute;right:430px;top:120px;}
.kbsi .network > ul > li:nth-child(6){width:13%;margin:0 0 20px 0;position:absolute;right:430px;top:165px;}
.kbsi .network > ul > li:nth-child(7){width:13%;margin:0 0 20px 0;position:absolute;right:430px;top:210px;}
.kbsi .network > ul > li:nth-child(8){width:13%;margin:0 0 20px 0;position:absolute;right:430px;top:255px;}
.kbsi .network > ul > li:nth-child(9){width:13%;margin:0 0 20px 0;position:absolute;right:430px;top:300px;}
.kbsi .network > ul > li > strong{padding:0;}
.kbsi .network ul > a {color:#707070;}

.kbsi .network > ul > li:nth-child(1) > ul li:nth-child(1) span,.kbsi .network > ul > li:nth-child(2) > ul li:nth-child(1) span{letter-spacing:1.8px}
.kbsi .network > ul > li:nth-child(1) > ul li:nth-child(2) span,.kbsi .network > ul > li:nth-child(2) > ul li:nth-child(2) span{letter-spacing:1.5px}
.kbsi .network > ul > li:nth-child(1) > ul li:nth-child(3) span,.kbsi .network > ul > li:nth-child(2) > ul li:nth-child(3) span{letter-spacing:-1px;}
.kbsi .network > ul > li:nth-child(1) > ul li:nth-child(1) span.desc,.kbsi .network > ul > li:nth-child(2) > ul li:nth-child(1) span.desc,.kbsi .network > ul > li:nth-child(1) > ul li:nth-child(2) span.desc,.kbsi .network > ul > li:nth-child(2) > ul li:nth-child(2) span.desc,.kbsi .network > ul > li:nth-child(1) > ul li:nth-child(3) span.desc,.kbsi .network > ul > li:nth-child(2) > ul li:nth-child(3) span.desc{letter-spacing:-0.07em !important}
/*
.kbsi .network li {display:block; padding:12px 0;  text-decoration:none;}
*/
.kbsi .network strong {display:inline-block; font-size:1.25em; font-weight:500;padding:20px 0 0 0;}
.kbsi .network strong a{display:block;color:#fff;background:#004ea2;padding:1px 0;border-radius:25px;width:90px;text-align:center;}
.kbsi .network .on strong {color:#e45454;}
.kbsi .network .on strong:after {position:relative; top:-3px; margin-left:5px; font-size:10px; content:'?��';}
.kbsi .network .map {position:absolute; right:0; top:0;}


.story_wrap,.story_wrap *,.story_wrap *:after{box-sizing:border-box}
.story_wrap{position:relative;/*height:740px;*/padding:30px 53px 50px;border:1px solid #dedede;border-radius:30px;background:url(/images/korean/main/story_bg.jpg) no-repeat;z-index:1}
.story_wrap h2{margin:0 0 15px;font-size:2em;line-height:1em;font-family:'Montserrat';color:#0e2b7f;font-weight: 800;}
.story_wrap .story_lst{margin:0 0 35px}
.story_wrap .story_lst:after{clear:both;display:block;content:""}
/* photonews */
.story_wrap .photonews{float:left;width:260px;height:380px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.24)}
.story_wrap .photonews h3{float:left;font-size:1.600em;color:#0c3472}
.story_wrap .photonews .more {position: absolute; width:61px; height:18px;margin-top:15px;background:url(/images/korean/main/photonews_arrow.png) no-repeat;vertical-align:middle; top: 15px; right: 15px;}
/*
.story_wrap .photonews .more:before {position:absolute; left:50%; top:50%; width:10px; height:2px; margin:-1px 0 0 -5px; background-color:#d0d5da; content:'';}
.story_wrap .photonews .more:after {position:absolute; left:50%; top:50%; width:2px; height:10px; margin:-5px 0 0 -1px; background-color:#d0d5da; content:'';}
*/
.story_wrap .photonews ul {float:left;width:100%;overflow:hidden;margin-top:5px}
.story_wrap .photonews li + li{margin-top:10px}
.story_wrap .photonews a {display:block; color:#333}
/* .story_wrap .photonews img{display:block;width:100% !important;height:122px !important;border-radius:10px} */
.story_wrap .photonews strong {display:block;overflow:hidden;margin:5px 0 0;font-size:1.067em;text-overflow:ellipsis;white-space:nowrap;font-weight: 400;}
.story_wrap .photonews span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size: 0.95em;color:#797979;margin-top:-5px;}
.story_wrap .photonews .thumb {display: block; overflow: hidden; position: relative; z-index: 0; height: 0; padding-top: 53%; background-color: #000; color: #fff;}
.story_wrap .photonews .thumb img {position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; min-height: 100%; transform: translateY(-50%);}

/* newsletter */
.story_wrap .newsletter{float:left;position:relative;width:260px;height:380px;padding:14px;margin-left:17px;border-radius:18px;background:url(/images/korean/main/story_newsletter_bg.jpg) no-repeat;box-shadow:0 2px 8px rgba(0,0,0,0.24)}
.story_wrap .newsletter h3{height:40px; font-size:1.571em; font-weight:500; color:#fc6f4e;}
.story_wrap .newsletter h3 > a{display:block;text-decoration:none}
.story_wrap .newsletter a.btn{display:block;position:relative;margin:0 0 15px}
.story_wrap .newsletter a.btn:after{clear:both;display:block;content:""}
.story_wrap .newsletter a.btn > span{float:left;padding:5px 10px;border-radius:30px;background-color:#e5522f;font-size:1.133em;line-height:1.1764em;font-family:'Montserrat';color:#fff}
.story_wrap .newsletter > span{display:block;font-weight:500;overflow:hidden;height:267px;border:1px solid #c8c8c8;border-radius:10px}
.story_wrap .newsletter > span > a{display:block}
.story_wrap .newsletter > span img{max-width:100%}
.story_wrap .newsletter a.btn2 {position: absolute; top: 50px; right: 20px; padding: 5px 15px 5px 5px; font-weight:bold; font-size: 13px; color: #dd6d22;}
.story_wrap .newsletter a.btn2::after {position: absolute; left: 0; bottom: 0; width: 100%; height: 10px; border-bottom: 1px solid #aeaeae; border-right: 1px solid #aeaeae; content: ''; transform: skewX(45deg);}

/* sns */
.story_wrap .sns{float:left;position:relative;width:260px;height:380px;padding:14px;margin-left:17px;border-radius:18px;box-shadow:0 2px 8px rgba(0,0,0,0.24)}
.story_wrap .sns h3{height:81px}
.story_wrap .sns .btn{position:absolute;bottom:0;left:0;width:100%;height:41px;padding:7px 19px 6px 53px;font-weight:500;font-size:0.933em;line-height:2em;color:#fff;text-decoration:none}
.story_wrap .sns .btn:after{position:absolute;bottom:14px;right:19px;width:41px;height:10px;background:url(/images/korean/main/story_arrow.png) no-repeat;content:""}
.story_wrap .sns .btn > .icon{position:absolute;bottom:6px;left:19px;width:28px;height:28px;}
.story_wrap .sns .api{overflow:hidden;height:242px;border-radius:10px;background:#fff}
/* blog */
.story_wrap .sns.blog{background:url(/images/korean/main/story_blog_bg.jpg) no-repeat}
.story_wrap .blog h3{padding:18px 0 0 2px}
.story_wrap .blog .timeline{padding:15px 20px; color:#333; line-height:22px;}
.story_wrap .blog .timeline p{overflow:hidden; height:110px; margin:10px 0;}
.story_wrap .blog .subject{font-size:1.133em; font-weight:500;}
.story_wrap .blog .subject > a{display:block;color:#2a2a2a}
.story_wrap .blog .date{font-size:0.933em;color:#777;}
.story_wrap .blog .btn > .icon{background:url(/images/korean/main/blog_icon.png) no-repeat}

/* facebook */
.story_wrap .sns.facebook {padding: 0; overflow: hidden;}
.story_wrap .facebook h3{position:relative;height:50px;padding-left:60px;margin:10px 0 21px;font-size:1.107em; font-weight:600; color:#fff}
.story_wrap .facebook h3 > a{display:block;position:absolute; left:0; top:0;width:50px;height:50px}
.story_wrap .facebook h3 img{display:block}
.story_wrap .facebook h3 > span{display:block;margin:0 0 5px}
.story_wrap .facebook h3 > span > a{display:block;color:#fff;text-decoration:none}
.story_wrap .facebook .timeline {padding:15px; color:#333;}
.story_wrap .facebook .timeline .tag {color:#3b56af;}
.story_wrap .facebook .timeline > div{margin:0 0 15px}
.story_wrap .facebook .timeline > div > a{display:block;font-size:0.933em;text-decoration:none}
.story_wrap .facebook p.account {position:relative; height:40px; margin-bottom:5px; padding-left:50px;}
.story_wrap .facebook p.account img {position:absolute; left:0; top:0; height:40px; box-sizing:border-box; border:1px solid #eaeaea;}
.story_wrap .facebook p.account strong {display:block; font-size:13px; color:#35579d; white-space:nowrap;}
.story_wrap .facebook p.account span {font-size:12px; color:#90949c;}
.story_wrap .facebook .btn > .icon{background:url(/images/korean/main/facebook_icon.png) no-repeat}
.story_wrap .facebook .fb-like.fb_iframe_widget{display:block;overflow:hidden;width:292px !important}
.story_wrap .facebook .fb-like.fb_iframe_widget > span{display:block;overflow:hidden;width:100% !important}
.story_wrap .facebook .fb-like.fb_iframe_widget > span > iframe{width:100% !important}

.story_wrap .science_story{position:relative;overflow:hidden;width:100%;height:210px;padding-left:40px;border-radius:18px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.24)}
.story_wrap .science_story h3{position:absolute;top:0;left:0;width:40px;height:100%;background:#86ad00 url(/images/korean/main/science_story_title.jpg) no-repeat;font-size:0;line-height:0}
.story_wrap .science_lst{}
.story_wrap .science_lst:after{clear:both;display:block;content:""}
.story_wrap .science_lst > li{float:left;position:relative;width:16.666%;text-align:center}
.story_wrap .science_lst > li:after{display:block;position:absolute;top:36px;left:0;width:12px;height:137px;background:url(/images/korean/main/science_lst_bar.png) no-repeat;content:""}
.story_wrap .science_lst > li:first-child:after{display:none}
.story_wrap .science_lst a{display:block;position:relative;padding-top:140px;text-decoration:none}
.story_wrap .science_lst .icon{position:absolute;top:30px;left:50%;width:100px;height:100px;margin-left:-50px;background:url(/images/korean/main/science_icon.png) no-repeat}
.story_wrap .science_lst .no1 .icon{background-position:0 0}
.story_wrap .science_lst .no2 .icon{background-position:-100px 0}
.story_wrap .science_lst .no3 .icon{background-position:-200px 0}
.story_wrap .science_lst .no4 .icon{background-position:-300px 0}
.story_wrap .science_lst .no5 .icon{background-position:-400px 0}
.story_wrap .science_lst strong{display:block;position:relative;padding-bottom:15px;font-weight:500;font-size:1.200em;line-height:1.3333em;color:#769b00;}
.story_wrap .science_lst strong:after{position:absolute;bottom:0;left:50%;width:41px;height:9px;margin-left:-21px;background:url(/images/korean/main/science_lst_arrow.png) no-repeat;content:""}
.story_wrap .science_lst .no6 .icon{background:url(/images/korean/main/science_icon1.gif) no-repeat;} 



@media screen and (max-width: 1530px), (max-height: 1040px)  {
#wrap {
    width:100%;
    overflow-y:auto;
    }
#header,
#body_wrap  {
    width: 1330px;
    margin: auto;
    }
#header .tsidemenu{width:1330px;margin:0 0 0 -665px;}
#header .tsidemenu .kecs{margin-left: 8rem;}
#footer {
    width: 1200px;
    margin: auto;
    padding-left: 130px;
    }
/* layout */
#header {position:relative; left:auto; margin:0 auto;}
#dnavigation:before {display:none;}
#footer {margin:0 auto;}

/* body */
#body {
    width: 100%;
    margin: 0;
    }
#body .main {width:1200px;}
#body .group {float:none;}
#body .group + .group {margin:35px 0 0;}
}

/* 210106 메인 ?��?��?�� 비주?�� 추�?? */
.side-visual ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 0;
  height: 0;
  padding-top: 85%;
  background-color: #000;
  color: #fff;
}
.side-visual ul li a:focus::after { position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 4px solid black; content: ""; } { position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid black; content: ""; }
.side-visual ul li a img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.side-visual .bx-prev,
.side-visual .bx-next {
  display: block;
  position: absolute;
  color: #fff;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 90;
  padding: 0;
  font-size: 0;
}
.side-visual .bx-prev::before,
.side-visual .bx-next::before {
  display: block;
  color: #fff;
  font-family: "xeicon";
  font-size: 2rem;
  content: "\e93d";
  text-shadow: 2px 3px rgba(0, 0, 0, 0.4);
}
.side-visual .bx-prev:focus,
.side-visual .bx-next:focus {
  border: 3px solid black;
}
.side-visual .bx-next {
  left: inherit;
  right: 0;
}
.side-visual .bx-next::before {
  content: "\e940";
}
.side-visual ul li a:hover p span,
.side-visual ul li a:focus p span {
  text-decoration: underline;
  text-underline-position: under;
}
.side-visual ul li a p {
  position: absolute;
  width: 90%;
  bottom: 0;
  left:0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  padding: 0.5rem 1rem;
}
.side-visual ul li a p span {
  display: block;
  width: 90%;
  height: 44px;
  overflow: hidden;
  font-size:15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.side-visual ul li a:hover {
  text-decoration: none;
}
.side-visual .bx-controls-auto-item a {
  overflow: hidden;
  position: absolute;
  right: 20px;
  bottom: 12px;
  z-index: 999;
  width: 12px;
  height: 12px;
  background: url(/images/kor/main/btn_visual_stop.png) no-repeat;
  font-size: 0;
  line-height: 0;
  padding:0;
}
.side-visual .bx-controls-auto-item .active {
  display: none;
}
.side-visual .bx-controls-auto-item .bx-start {
  background: url(/images/kor/main/btn_visual_play.png) no-repeat;
}
/* //210106 메인 ?��?��?�� 비주?�� 추�?? */