/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Main layout
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* main_visual */
.visual-wrap{position:relative; width:100%; height:calc(100% - 17em); min-height:10em; overflow:hidden; transition : all 0.3s ease; -webkit-transition : all 0.3s ease; }
.visual-wrap .visual {height:100%; width:100%; position:absolute; top:0; left:0}
.visual-wrap .visual .js_slide {height:100%; padding:0;}
.visual-wrap .visual .js_slide .control{left:auto; width:100%; height:1.5em; box-sizing:border-box; text-align:center; bottom:1.5em !important}
.visual-wrap .visual .js_slide .control a[class*="btn_"] {border:none; display:inline-block; vertical-align:top; position:relative; right:auto; width:auto; bottom:5px; width:7px; height:17px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
.visual-wrap .visual .js_slide .control a[class*="btn_"] span {line-height:1px; font-size:1px; position:absolute; left:-10000px; top:0; overflow:hidden; text-indent:-30000px;}
/* .visual-wrap .visual .js_slide .control a.btn_left { position: absolute;top: -322px;left: 70px;width:47px; height:93px;background:url(../../images/mtlight/main/left_btn.png)no-repeat !important;}
.visual-wrap .visual .js_slide .control a.btn_right { position: absolute;top: -322px;right: 70px;width:48px; height:93px;background:url(../../images/mtlight/main/right_btn.png)no-repeat !important;} */
.visual-wrap .visual .js_slide .control a.btn_stop {background:url(../../images/mtlight/main/visual_stop.png) no-repeat center 50%;}
.visual-wrap .visual .js_slide .control a.btn_play {background:url(../../images/mtlight/main/visual_play.png) no-repeat center 50%;}
.visual-wrap .visual .js_slide .control ul {display:inline-block; vertical-align:top; height:2.5em; position:relative; left:auto; right:auto; width:auto; bottom:0;}
.visual-wrap .visual .js_slide .control ul li {margin-left:25px; float:left; position:relative}
.visual-wrap .visual .js_slide .control ul li:last-child{margin-right:25px}
.visual-wrap .visual .js_slide .control ul li a {width:6px; height:6px; border:3px solid #fff; background:none; box-shadow:none;}
.visual-wrap .visual .js_slide .control ul li a.on {opacity:1; -webkit-opacity:1; background:#fff; width:3px; height:3px}
.visual-wrap .visual .js_slide .control ul li a.on:after{content:''; display:block; width:26px; height:26px; border-radius:50%; border:1px solid #fff; position:absolute; margin-left:-14px; margin-top:-14px; left:50%; top:50%; opacity:0.4}
.visual-wrap .visual .js_slide .move{position:absolute; left:0; top:0; height:100%;}
.visual-wrap .visual .js_slide .move ul{width:100%;}
.visual-wrap .visual .js_slide .move ul li {float:none; position:absolute; left:100%; top:0; width:100%; padding:0;}
.visual-wrap .visual .js_slide .move ul li:first-child {left:0; background:url(../../images/mtlight/main/visual03.gif) center no-repeat; background-size:cover;}
.visual-wrap .visual .js_slide .move ul li:nth-child(2) {background:url(../../images/mtlight/main/visual02.jpg) center no-repeat; background-size:cover;}
.visual-wrap .visual .js_slide .move ul li:nth-child(3) {background:url(../../images/mtlight/main/visual03.jpg) center no-repeat; background-size:cover;}
.visual-wrap .visual .js_slide .move ul li .txts {position:absolute; top:3em; left:2em; z-index:10; width:calc(100% - 4em);}
.visual-wrap .visual .js_slide .move ul li .txts p.slogan {width:100%; height:8em; margin:0; text-indent:-9999px; background:url(../../images/mtlight/main/visual_title.png?v=20230113) no-repeat; background-size:contain;}
.visual-wrap .visual .js_slide .move ul li:nth-child(2) .txts p.slogan {background:url(../../images/mtlight/main/visual_title02.png) no-repeat; background-size:contain;}
.visual-wrap .visual .js_slide .move ul li:nth-child(3) .txts p.slogan {background:url(../../images/mtlight/main/visual_title03.png) no-repeat; background-size:contain;}

.visual-wrap .visual .js_slide .move ul li:before {content:''; position: absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3);}


/* main_content */
.main-cont-wrap {padding:1vh 0; height:17em; background:rgb(233,242,247); background: linear-gradient(to bottom, rgba(233,242,247,1) 30%, rgba(255,255,255,1) 100%); transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
.main-cont-wrap .notice {position:relative; width:100%; height:8.5em; padding:1em; background:#365db5 url(../../images/mtlight/main/notice_bg.png) bottom right no-repeat; overflow: hidden; background-size:auto 80%;}
.main-cont-wrap .notice h2 {display:inline-block; position:relative; font-size:1.2em; font-weight:600; color:#fff;}
.main-cont-wrap .notice h2:after{
	position:absolute; top:50%; left:calc(100% + 0.5em); content:''; width:1.2em; height:1em; background:url(../../images/mtlight/main/notice_icon.png) no-repeat; background-size: cover;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.main-cont-wrap .notice .move {position:relative; width:60%; height:4em; margin-top:0.6em; overflow: hidden;}
.main-cont-wrap .notice .move:before {content:''; position:absolute; top:50%; left:0; width:100%; height:1px; border-bottom:1px dashed #bdcfe0;}
.main-cont-wrap .notice .move #ticker{position:absolute; left:0; top:0; width:100%;}
.main-cont-wrap .notice .move ul li {line-height:2em; margin-bottom:0.5em; height:auto;}
.main-cont-wrap .notice .move ul li > a.items {position:relative; display:block; width:100%; height:2em; line-height:2.2em;}
.main-cont-wrap .notice .move ul li > a.items span {width:100%; height:auto; font-size:0.7em; line-height:1em; color:#fff;  transition : all 0.3s ease-in; -webkit-transition : all 0.3s ease-in;  transform-origin:top center;}
.main-cont-wrap .notice .move ul li > a.items span.unit{
	position:absolute; left:0; top:50%; width:3.5em; text-align:center;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.main-cont-wrap .notice .move ul li > a.items span.tit {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; width:100%;}
.main-cont-wrap .notice .move ul li.active > a.items {overflow: hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-cont-wrap .notice .move ul li.active > a.items span {font-size:1em; white-space:nowrap;}
.main-cont-wrap .notice .move ul li.active > a.items span.unit {display:none; opacity:0; transition:all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transform-origin:center;}
.main-cont-wrap .notice .move ul li.next {margin-bottom:40px;}
.main-cont-wrap .notice .move ul li.next > a.items span.unit {padding:0.3em 0; border-radius:0.4em; background:#fff; font-size:0.7em; font-weight:600; color:#0E4F8F;}
.main-cont-wrap .notice .move ul li.next > a.items{position:relative; padding-left:2.8em;}
.main-cont-wrap .notice .control {position:absolute; top:1em; right:1em;}
.main-cont-wrap .notice .control a {display:inline-block; width:1.2em; height:1.2em;}
.main-cont-wrap .notice .control a.btn_next {background: url(../../images/mtlight/main/next.png) no-repeat; background-size: cover;margin-right:0;}
.main-cont-wrap .notice .control a.btn_prev {margin-right:0.2em; background: url(../../images/mtlight/main/prev.png) no-repeat; background-size: cover;}
.main-cont-wrap .notice .control a span {font-size:0; color:transparent; text-indent:-9999px;}

/*링크존*/
.main-cont-wrap .link {position:relative; margin:1vh auto 0;}
.main-cont-wrap .link .linkBox ul {width:100%;}
.main-cont-wrap .link .linkBox ul li {float: left; width:calc((100% - (0.8em * 3)) / 4); height:5.5em; margin-right:0.8em; background:#fff; border:1px solid #ccc;}
.main-cont-wrap .link .linkBox ul li:last-child {margin-right:0;}
.main-cont-wrap .link .linkBox ul li > a {position:relative; display:block; width:100%; height: 100%;}
.main-cont-wrap .link .linkBox ul li > a span {position:absolute; left:0; bottom:0.8em; width:100%; text-align:center; font-size:0.9em; white-space: nowrap; font-weight:400; color: #666; white-space:nowrap;}
.main-cont-wrap .link .linkBox ul li > a:before {content: ''; display:block; position: absolute; top:calc(50% - 0.8em); left:50%; width:3em; height:3em; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background-repeat:no-repeat; background-position:center 0; background-size:100% auto;}

.main-cont-wrap .link .linkBox ul li.n1 > a:before {background-image:url(../../images/mtlight/main/link_icon01.png);}
.main-cont-wrap .link .linkBox ul li.n2 > a:before {background-image:url(../../images/mtlight/main/link_icon02.png);}
.main-cont-wrap .link .linkBox ul li.n3 > a:before {background-image:url(../../images/mtlight/main/link_icon03.png);}
.main-cont-wrap .link .linkBox ul li.n4 > a:before {background-image:url(../../images/mtlight/main/link_icon04.png);}

.main-cont-wrap .link .linkBox ul li:hover,
.main-cont-wrap .link .linkBox ul li:focus,
.main-cont-wrap .link .linkBox ul li.on {background-color: #365db5;}
.main-cont-wrap .link .linkBox ul li:hover a:before{background-position:center 100%;}
    
.main-cont-wrap .link .linkBox ul li:hover > a span,
.main-cont-wrap .link .linkBox ul li:focus > a span,
.main-cont-wrap .link .linkBox ul li.on > a span {color:#fff;}

.main-cont-wrap .link .linkBox ul li:hover > a:before,
.main-cont-wrap .link .linkBox ul li:focus > a:before,
.main-cont-wrap .link .linkBox ul li.on > a:before {background-position-y:100%;}

@media screen and (max-width:640px) and (orientation:portrait) {
	.visual-wrap {height:calc(100% - 25em);}
	.visual-wrap .visual .js_slide .move ul li .txts p.slogan {height:6em;}
	.main-cont-wrap .link .linkBox ul li {width:calc((100% - (0.2em * 2)) / 2); height:6em; margin-bottom:0.4em; margin-right:0.4em}
	.main-cont-wrap .link .linkBox ul li:nth-child(2),
	.main-cont-wrap .link .linkBox ul li:last-child {margin-right:0;}
	.main-cont-wrap .link .linkBox ul li > a span {bottom:0.6em; font-size:1em;}
	.main-cont-wrap .link .linkBox ul li > a:before {width:4em; height:4em;}
}

@media screen and (max-width:320px) and (orientation:portrait) {
	.visual-wrap {height:calc(100% - 25em);}
	.visual-wrap .visual .js_slide .move ul li .txts p.slogan {height:5em;}
	.main-cont-wrap .link .linkBox ul li {width:calc((100% - (0.4em * 2)) / 2); height:5.5em; margin-bottom:0.8em}
	.main-cont-wrap .link .linkBox ul li:nth-child(2),
	.main-cont-wrap .link .linkBox ul li:last-child {margin-right:0;}
	.main-cont-wrap .link .linkBox ul li > a:before {width:3em; height:3em;}
}


@media screen and (max-width:460px){
	.visual-wrap{height:calc(100% - 27em);
}