@charset "utf-8";

/*메인공통*/
.main-content {position: relative; }
.main-content h2 {font-size:4rem; text-align: left; margin-bottom: 50px; color:#333; font-weight: 600; letter-spacing: -1px; font-weight: 500;}
.main-content h2 strong {color:#333}
.main-content .inner {max-width: 1470px; margin:0 auto; padding:80px 15px;}
.main-content .txt {line-height: 1.7;}
.main-content .more-btn2 {font-size: 2.2rem; border:1px solid #bbb; border-radius: 30px; width: 150px; height: 55px; line-height: 49px; color:#333; transition: all .3s ease;  position: relative;  -webkit-transition: all .3s ease;  position: relative; margin-top: 40px; text-align: center; background: #fff;}
.main-content .more-btn2:hover {background: #ac0430; color:#fff; border-color:#ac0430;}
.main-content .more-btn2:hover:after {border-color:#fff;}
.main-content .more-btn2:after {content: ''; display: inline-block; width: 10px; height: 10px; border-top:1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); -webkit-transform: rotate(45deg);  -webkit-transform: rotate(45deg); margin-left: 10px; }

/*메인비주얼*/
.main-visual {position: relative; max-width: 1920px; margin:0 auto; overflow: hidden}
.main-visual video {position: absolute; top:50%; left: 50%; width: 120%; height:auto; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.main-visual .progress-bar {position: absolute; bottom: 0; left: 0; width: 0%; height: 7px; background: #ac0430; z-index: 3;}
.main-visual .slide {background: #000; height: 1000px;  overflow: hidden; display: block !important;}
.main-visual .slide:before {content: ''; display: block; width: 100%; height: 120%; background:rgba(0,0,0,0.2) url(../img/main/visual-bg.png) repeat 0 0; position: absolute; top:0; left: 0; z-index: 2}
@keyframes mainVisualTxt1 {
	0% { top:-50px; opacity: 0;}
	100% { top:0; opacity: 1;}
}
@keyframes mainVisualTxt2 {
	0% { top:50px; opacity: 0;}
	100% { top:0; opacity: 1;}
}
@keyframes mainVisualbar {
	0% { width: 0}
	100% { width:100px;}
}
@keyframes mainVisualbtn {
	0% { left:-50px; opacity: 0;}
	100% {left: 0; opacity: 1;}
}

@-webkit-keyframes mainVisualTxt1 {
	0% { top:-50px; opacity: 0;}
	100% { top:0; opacity: 1;}
}
@-webkit-keyframes mainVisualTxt2 {
	0% { top:50px; opacity: 0;}
	100% { top:0; opacity: 1;}
}
@-webkit-keyframes mainVisualbar {
	0% { width: 0}
	100% { width:100px;}
}
@-webkit-keyframes mainVisualbtn {
	0% { left:-50px; opacity: 0;}
	100% {left: 0; opacity: 1;}
}
.main-visual-slide .txt-box {position: absolute; top:42%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 100%; text-align: center; color:#fff; z-index: 3}
.main-visual-slide .txt-box dl dt {font-size: 7.4rem; position: relative; top:-50px; opacity: 0; margin-bottom: 70px;  font-weight: 700}
.main-visual-slide .txt-box dl dd.bar {display: none; width: 0; height: 1px; background: #fff; margin:40px auto 40px auto;  }
.main-visual-slide .txt-box dl dd.txt {font-size: 2.1rem; margin-bottom: 70px; position: relative; top:50px; opacity: 0; font-weight: lighter}
.main-visual-slide .txt-box .more-btn {font-size: 2.2rem; border:1px solid rgba(255,255,255,0.5); border-radius: 30px; width: 150px; height: 55px; line-height: 49px; color:#fff; transition: all .3s ease;  -webkit-transition: all .3s ease; position: relative; left: -50px; opacity: 0;}
.main-visual-slide .txt-box .more-btn:hover {background: #ac0430; color:#fff; border-color:#ac0430;}
.main-visual-slide .txt-box .more-btn:after {content: ''; display: inline-block; width: 10px; height: 10px; border-top:1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left: 10px; }
.main-visual-slide .img-box img {width: 100%; height: auto; position: absolute; top:0; left: 50%; transform: translateX(-50%)}

.main-visual-slide .slick-current .txt-box dl dt {animation:mainVisualTxt1 .5s .6s forwards; -webkit-animation:mainVisualTxt1 .5s .6s forwards;}
.main-visual-slide .slick-current .txt-box dl dd.bar {animation:mainVisualbar .5s .2s forwards; -webkit-animation:mainVisualbar .5s .2s forwards;}
.main-visual-slide .slick-current .txt-box dl dd.txt {animation:mainVisualTxt2 .5s .8s forwards; -webkit-animation:mainVisualTxt2 .5s .8s forwards;}
.main-visual-slide .slick-current .txt-box .more-btn {animation:mainVisualbtn .8s 1.2s forwards; -webkit-animation:mainVisualbtn .8s 1.2s forwards;}

.main-visual-nav {text-align: center; position: absolute; bottom: 100px; left: 0; width: 100%; z-index: 3}
.main-visual-nav li {display: inline-block; margin:0 10px;}
.main-visual-nav li a {width: 80px; height: 5px; background:#fff; opacity: 0.3 }
.main-visual-nav li.on a {opacity: 1;}

.main-visual .scroll-ico {position: absolute; bottom: 25px; left: 0; right: 0; margin:0 auto; z-index: 2; width: 23px;}

/*메인팝업*/
.layerpopup {position:absolute; top:25%; left:0; right:0; margin:0 auto; z-index:999;  }
.layerpopup img {display:block; width:100%;}
.layerpopup_con .title {background: #005b9e; color:#fff; padding:15px; font-size: 2rem; text-align: center; line-height: 1.4;}
.layerpopup_con { position:absolute; top:0%; width: 96%;  max-width: 320px;  left: 0%; z-index:999; }
.layerpopup_con .footer {background:#000; color:#ccc; padding:9px 15px; overflow:hidden; clear:both; text-align: right;text-shadow: none;}
.layerpopup_con .footer a { float:right; color:#fff; display:block; margin-left: 20px; margin-top:1px; font-size: 1.5rem;}
.layerpopup_con .footer input {vertical-align: middle; margin:0; margin-right:8px; text-shadow: none;}
.layerpopup_con .footer input[type="checkout"] {vertical-align: middle;}
.layerpopup_con img {display:block; max-width:100%; width: 100%;}
.layerpopup_con > a {display: block;}
.layerpopup_con .check-set input[type="checkbox"]:checked + label {color:#fff;}

.main-glance {background: rgba(172,4,48,0.75); text-align: center; position: absolute; opacity: 0; left: 0; right: 0; z-index: 3; bottom: -50%; transition: all 1s ease; -webkit-transition: all 1s ease; }
.main-glance.on {bottom: 0; opacity: 1;}
.main-glance .close-btn {outline: none; display: inline-block; position: absolute; top:20px; right: 10%; width: 50px; height: 50px; background: url(../img/common/ico-close.png) no-repeat 50% 50%; z-index: 2; opacity: 0;}
.main-glance.on .close-btn {animation: glanceClose .5s 1s forwards; -webkit-animation: glanceClose .5s 1s forwards;}
@keyframes glanceClose {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes glanceClose {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.main-glance .inner {padding:20px 15px}
.main-glance h2 {text-align: center; color:#fff; font-size: 3.5rem; font-weight: lighter;}
.main-glance h2 strong {color:#fff;}
.main-glance ul {overflow: hidden; margin: 30px 0 10px 0;}
.main-glance ul li {float: left; width: 25%; text-align: center; padding:0px 10px; position: relative;}
.main-glance ul li:after {content: ''; width: 1px; height: 100%; border-radius: 100px; background: rgba(255,255,255,0.3); position: absolute; top:50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.main-glance ul li:last-of-type:after {display: none;}

.main-product h2 {text-align: center; margin-bottom: 30px;}
.main-product .inner > p {text-align: center; margin-bottom: 70px;}
.main-product ul {overflow: hidden}
.main-product ul li {float: left; width: 30.6%; margin-right: 4%; position: relative; overflow: hidden; background: #fbfbfb; height: 510px; padding:40px; overflow: hidden; background: #fbfbfb;}
.main-product ul li:before {content: ''; display: block; width: 130px; height: 5px; background: #ac0430; position: absolute; top:5px; left: 0; right: 0; margin:0 auto; z-index: 2}
.main-product ul li:last-of-type {margin-right: 0;}

.main-product ul li img {position: absolute; bottom:0; left: 0%;}
.main-product ul li dl {line-height: 1.2; text-align: center}
.main-product ul li dl dt {font-size: 2.4rem; color:#333; font-weight: 500; margin-bottom: 12px;  letter-spacing: -1px; font-weight: 600;}
.main-product ul li dl dd {font-size: 1.5rem; color:#666}

.main-product ul li:after {content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.3); opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease;}
.main-product ul li a {position: absolute; top:80%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); font-size: 2rem; color:#fff; width: 140px; height: 55px; line-height: 51px; border-radius: 100px; z-index: 3; background: url(../img/main/prod-more.png) no-repeat 80% 50%; background-size: 18px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; text-align: center; padding-right: 10px; border:1px solid rgba(255,255,255,0.8); }
.main-product ul li a:hover {background: #ac0430 url(../img/main/prod-more.png) no-repeat 80% 50%; border-color:#ac0430;}
.main-product ul li:hover:after {opacity: 1;}
.main-product ul li:hover a {opacity: 1;}

.main-news {background: #ededed; }
.main-news .more-btn2 {position: absolute; top:0; right: 0; margin-top: 0;}
.main-news .inner {overflow: hidden}
.main-news .news {float: left; width:46%}
.main-news .news ul li a {display: block; position: relative;}
.main-news .news ul li .img-box {padding-top: 56%; position: relative; background: #ccc; overflow: hidden}
.main-news .news ul li .img-box img {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%) scale(1); -webkit-transform: translate(-50%,-50%) scale(1); width: 100%; height: auto; transition: all 1s ease; -webkit-transition: all 1s ease;}
.main-news .news ul li a:hover .img-box img {transform: translate(-50%,-50%) scale(1.1); -webkit-transform: translate(-50%,-50%) scale(1.1);}
.main-news .news ul li .txt-box {position: absolute; bottom: 0; left: 0; width: 100%; padding:20px 30px; background: rgba(0,0,0,0.5); color:#fff;}
.main-news .news ul li .txt-box .date {font-size: 1.5rem; opacity: 0.4}
.main-news .news ul li .txt-box .tit {font-size: 2.6rem; margin:10px 0;}
.main-news .news ul li .txt-box .txt {font-size: 1.5rem; opacity: 0.6; line-height: 1.4;}


.main-news .press {float: right; width:46%}
.main-news .press ul li {margin-bottom:25px;}
.main-news .press ul li:last-of-type {margin-bottom: 0;}
.main-news .press ul li a {display: block; overflow: hidden; }
.main-news .press ul li .img-box {position: relative; padding-top: 26%; width: 27%; float: left; background: #ccc; overflow: hidden; }
.main-news .press ul li .img-box img {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%) scale(1);  -webkit-transform: translate(-50%,-50%) scale(1); width: auto; height: 100%; max-width: inherit;transition: all 1s ease; -webkit-transition: all 1s ease;}
.main-news .press ul li a:hover .img-box img {transform: translate(-50%,-50%) scale(1.1); -webkit-transform: translate(-50%,-50%) scale(1.1);}
.main-news .press ul li .txt-box {width: 70%; float: right; position: relative; min-height: 160px;}
.main-news .press ul li .txt-box .category {color:#ac0430}
.main-news .press ul li .txt-box .tit {font-size: 2rem; max-height: 80px; font-weight: 500; margin:5px 0 20px; color:#333;}
.main-news .press ul li a:hover .txt-box .tit {text-decoration: underline; text-decoration-thickness: 1px;}
.main-news .press ul li .txt-box .date {font-size: 1.5rem; color:#333; opacity: 0.6; font-weight: 600; position: absolute; bottom: 0; left: 0;}

.main-news h2 {position: relative;}
.main-news .more-btn {position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0; font-size: 1.8rem; font-weight: 500}
.main-news .more-btn:hover {text-decoration: underline; color:#000;}
.main-news .more-btn em {display: inline-block; vertical-align: middle; margin-left: 10px; width: 0px; height: 1px; background: #000; margin-right: -10px; }
.main-news .more-btn span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-top:1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left: 10px;}
.main-news .slick-slider .slick-prev {left: -5%;}
.main-news .slick-slider .slick-next {right: -5%;}

.main-network {text-align: center; position: relative;}
.main-network .txt-box {margin-bottom: -100px; position: relative; z-index: 2;}
.main-network .txt-box h2 {text-align: center; margin-bottom: 40px;}

.main-network .pg-network .map-area{background: #fff; padding-bottom: 0; margin-bottom: 0;}


@media all and (max-width:1400px){ 
	.main-content .inner {padding:50px 15px;}
	.main-news .press ul li .txt-box {min-height: auto;}
	.main-news .press ul li .txt-box .date {position: relative;}
}
@media all and (max-width:1200px){ 
	.main-content h2 {font-size: 3.5rem;}
	
	.main-product ul li {height: 400px; padding:30px 20px 20px 20px}
	

}
@media all and (max-width:1000px){ 
	.main-visual-slide .txt-box dl dt {font-size: 7vw; margin-bottom: 4vw;}
	.main-visual-slide .txt-box dl dd.txt {font-size: 2vw; }
	.main-visual video {height: 120%; width: auto; }
	.main-visual-slide .txt-box dl dd.txt {margin-bottom: 50px; padding:0 10px;}
	
	.main-content .more-btn2,
	.main-product ul li a,
	.main-visual-slide .txt-box .more-btn {width:120px; height: 45px; line-height: 40px; font-size: 1.8rem;}
	.main-content .more-btn2:after,
	.main-visual-slide .txt-box .more-btn:after {width:8px;  height: 8px;}
	
	.main-network .txt-box {margin-bottom: 0;}
}

@media all and (max-width:768px){ 
	.main-glance h2 {font-size: 5vw;}
	.main-visual-slide .txt-box dl dd.txt {font-size: 1.7rem; }
	
	.main-visual-nav li a {width: 40px; height: 2px;}
	.main-glance .close-btn {top:15px; right: 15px; width: 25px; height: 25px; background-size: 25px;}
	.main-news .news ul li .txt-box {padding:10px;}
	.main-news .news ul li .txt-box .tit {font-size: 2rem;}
	.main-news .press ul li .txt-box .tit {font-size: 1.7rem; margin-bottom: 5px;}
	
	.main-content h2 {margin-bottom: 30px;}
	.main-news .news, .main-news .press {float: none; width: 100%;}
	.main-news .news {margin-bottom: 25px;}
	.main-product ul li {height: 300px;}
	.main-product ul li dl dt {font-size: 2rem;}
	.main-product ul li:before {height: 2px; width: 70px;}
	.main-product .inner > p {margin-bottom: 40px;}
	
	.main-product ul li {text-align: center; height: auto; margin-bottom: 15px; float: none; width: 100%; margin-right: 0;}
	.main-product ul li a {width:80px; height: 40px; line-height: 35px; font-size: 1.7rem; opacity: 1; background: #ac0430 url(../img/main/prod-more.png) no-repeat 80% 50%; border-color: #ac0430; background-size: 14px; }
	.main-content .more-btn2 {width:110px; height: 40px; line-height: 35px; font-size: 1.7rem;}
	.main-content .more-btn2:after {width:7px;  height:7px;}
	.main-product ul li:after {display: none;}
	
	.main-product ul li img {max-width: 320px; position: relative; margin-top: 20px; width: 100%}
}
@media all and (max-width:600px){
	.main-visual-slide .img-box img {width: auto; max-width: inherit; height: 100%; position: absolute; top:0; left: 50%; transform: translateX(-50%)}
	
}