.skip{color: #fff;background: #000;text-align: center;width: 100%;height:50px;display: block;
	line-height: 50px;position: absolute;left:0;top: -100px;transition: 0.35s;}
.skip:focus{top: 0;}
body{font-family: 'Hepta Slab', serif;font-family: 'Nanum Gothic', sans-serif;background: #fff;}
/*header*/
header{width: 100%;background:#fff;box-shadow: 0 0 5px rgba(0,0,0,0.5);height: 90px;z-index: 888;
border-bottom: 3px solid #82caf3;}
header h1{position: absolute;left: 20px;top:12px;padding-top: 7px;}
header h1 a{width: 194px;height: 51px;display: block;color: transparent;
background-image: url(../images/logo2.png);text-indent: -999px;}

/*Gnb*/
header .gnb{text-align: center;}
header .gnb > ul > li{display: inline-block;position: relative;}
header .gnb > ul > li > a{display: block;padding: 0 25px;height: 90px;font-size: 17px; color: #696666;
line-height: 90px;font-weight: bold;
}
header .gnb ul ul{display: none;position: absolute;left: -50%;top: 90px;background: #000;width: 200%;z-index: 98;
}
header .gnb ul ul li{padding: 20px 30px;}
header .gnb ul ul li a{color: #fff;font-size: 13px;}
header .gnb ul ul li:hover a{color: darkorange;}
header .gnb ul ul li a:after{position: relative;content: '';display: block;width: 0;height: 2px;background:#fff;
	bottom: -10px;transition: 0.2s;}

header .gnb ul ul li:hover a:after{width: 100%;}
header .gnb >ul > li:after{
	display: none;content: '';border-style: solid;border-width: 0.5em;
	border-color: #fff transparent transparent transparent;
	position: absolute; top: 100%;left: 50%;transform: translateX(-50%);z-index: 99;}
header .gnb > ul > li:hover > a{color: darkorange;}
header .gnb > ul > li:hover ul{display: block;}
header .gnb > ul > li:hover:after{display: block;}


/*btn_all_menu*/
header .btn_all_menu{display: none;position:absolute;right: 50px;top: 0;z-index: 400;width: 50px;height: 50px;
line-height: 90px;cursor: pointer;}
header .btn_all_menu:after{display: block;content: '\e91c';font-family: 'xeicon';font-size: 50px;}
/*e91c*/
/*input[id="menuicon"]{display: none;}
input[id="menuicon"] + label{display: block;width:30px;height: 20px;position: absolute;cursor: pointer;
	top: 45px;right: 0;transform: translateY(-50%);transition: all 0.2s;}
input[id="menuicon"] + label span{display: block;width: 100%;height: 2px;background: #000;
	position: absolute;border-radius: 20px;transition: all 0.2s;}
input[id="menuicon"] + label span:nth-child(1){top: 0;}
input[id="menuicon"] + label span:nth-child(2){top: 50%;transform: translateY(-50%);}
input[id="menuicon"] + label span:nth-child(3){bottom: 0;}
input[id="menuicon"]:checked + label span:nth-child(1){top: 50%;transform: translateY(-50%) rotate(45deg);}
input[id="menuicon"]:checked + label span:nth-child(2){opacity: 0;}
input[id="menuicon"]:checked + label span:nth-child(3){bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}*/
/*visual*/
.visual{position:relative;background-image:url("../images/sub_visual01.jpg");
	background-repeat: no-repeat;background-position: center center;
	background-color: #464646;width: 100%;
	background-size: cover; 
padding-top: calc(100% / 4 * 1);height: 0}
.visual .txt{position:absolute;color: #fff;top: 50%;left: 50%;
	transform: translateY(-50%)translateX(-50%);white-space: nowrap;border: 1px solid #fff;padding: 1em 3em;border-radius: 2em;
	background-color: rgba(255,255,255,0.3);text-align: center;animation-name: titleMove;
	animation-duration: 1.5s;
}
@keyframes titleMove{
	from{
		opacity: 0;
		top: 40%;
	}
	to{
		opacity: 1;
		top: 50%;
	}
}
.visual .txt span{display: block;font-weight: bold;}
.visual .txt span:nth-child(1){font-size: 2em;}
.visual .txt span:nth-child(2){font-size: 1em;margin-top:1em; }
.visual .txt span:nth-child(2) h1{font-size: .7em;opacity: .7;}
.imageShadow{background: url(../images/shadow.png)no-repeat;background-size: 100%;height: 50px;}
/*aside Menu*/
.asideGnb{display: none;position: fixed;top: 0;left: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;}
.asideGnb .bg{position: absolute;width: 250px;height: 100%;background: #fff;left: -250px;}
.asideGnb .close{position: absolute;left:-250px;top: 10px;cursor: pointer;width: 30px;height: 30px;
z-index: 500;opacity: .5}
.asideGnb .close:after{position: relative;display: block;content: '\e921';font-family: 'xeicon';font-size: 30px;
}


.asideGnb .gnb{position: absolute;top: 80px;width: 230px;left: -250px;}
.asideGnb h1{position: absolute;left: 10px;top:0;padding-top: 7px;left: -250px;}
.asideGnb h1:after{content: '';display: block;width: 250px;height: 1px;background: #666;
margin:10px 0 0 -10px;box-shadow: 0 0 5px 0 rgba(0,0,0,.5)}
.asideGnb h1 a{width: 54px;height: 51px;display: block;color: transparent;
background-image: url(../images/logo.jpg);text-indent: -999px;}
.asideGnb .gnb ul ul{display: none;}
.asideGnb .gnb > ul > li{width: 100%;padding: 0;margin: 0;border-bottom: 1px solid #ddd;}
.asideGnb .gnb > ul > li > a{display: block;height: 30px;font-size: 13px; color: #000;
line-height: 40px;padding: 10px;}

.asideGnb .gnb ul ul li a{display: block;color: #000;font-size: 12px;padding: 10px;margin: 1px 10px;}
.asideGnb .gnb > ul > li>a:after{display: none;position: relative;content: '\e914';display: block;font-family: 'xeicon';
font-size: 20px;;color: #666;left: 190px;top: -40px;}
.asideGnb .gnb > ul > li.on > a{color: darkorange;}
.asideGnb .gnb > ul > li.on > a:after{color: darkorange;}
.asideGnb .gnb > ul > li.active > a{color: darkorange;background: #000;}
.asideGnb .gnb > ul > li.active > a:after{color: darkorange;content: '\e91b';}
.asideGnb  .gnb > ul > li.active ul{display: block;}
.asideGnb .gnb ul ul li:hover a{color: #fff;background: #000;}
/* \e91b*/
@keyframes text{
	0%{
		color: black;
		top: -30px;
		opacity: 0;
		margin-bottom: 60px;
	}
	30%{
		
		letter-spacing: 60px;
	}
	85%{
		top: 0;
		opacity: 1;
		letter-spacing: 8px;
		margin-bottom: 20px;
	}
}
/*product*/
.product{width: 100%;background:#fff;box-shadow: 0 -5px 5px -5px #333;margin-bottom: 30px;}
.product nav{width: 100%;margin: 0 auto;background: #444;}
.product nav ul{display: flex;text-align: center;justify-content: center;line-height: 60px;}
.product nav ul li{line-height: 60px;cursor: pointer;}
.product nav ul li.active{background: #fff;}
.product nav ul li.active a{color: #000;}
.product nav ul li a{color: #fff;font-size: 14px;padding: 0 30px;}

/*product thumnail*/
.product .thumview{display: flex;justify-content:center;flex-wrap: wrap;}
.product .thumview > div{margin:10px 0;}
.thumview .thumbBox{position: relative;width: 300px; height: 150px;margin: 10px;
	overflow: hidden;}
.thumview .thumbBox img{position: absolute;top: 50%;display: none;
	transform: translateY(-50%);box-sizing: border-box;transition-duration: 0.5s;}
.thumview .hiddenBox{display: none;}
.thumview .thumbBox .zoom:before{content: '\e97b';display: block;color:#fff;font-size: 40px;
font-family: 'xeicon'}
.thumview .thumbBox .zoom{position: absolute;background:transparent;color: #fff;top: 50%;left:50%;
transform: translate(-50% ,-50%);display: none;}
.thumview .thumbBox:after{content: '';display: block;width: 100%;height: 200px;background: #000;}
.product .thumview > div:hover .thumbBox img{transform: scale(1.5) translateY(-25%);opacity: .3;}
.thumview .txt_box{padding-left: 10px;}
.thumview .txt_box .titleDesc{display: none;}
.thumview .txt_box .subDesc{display: none;}
.product .thumview > div:hover .thumbBox .zoom{display: block;}
.thumview strong{display: block;font-size: 16px;line-height: 24px;color: #1c3d6e;}
.thumview p{font-size: 14px;line-height: 22px;color: #000;margin: 12px 0 2px;}
.thumview span{display: none;font-size: 12px;color: #666;line-height: 15px;}
vertical-align: top;}

/*product content*/
.caption{position: relative;width: 100%;text-align: center;}
.caption img{position: relative;width:300px;height: 200px;margin:5px auto;overflow: hidden; }
.caption strong{position: absolute;color: #fff;left: 50%;bottom:0;transform: translateX(-50%);font-size: 16px;z-index: 4;line-height: 32px;background-color: rgba(0,0,0,.5);width: 100%;}
/*opacity*/
.caption > p:nth-child(1) strong{
	opacity: 0;
}
/*left*/
.caption > p:nth-child(2) strong{
	left: -100%;
}
/*bottom*/
.caption > p:nth-child(3) strong{
	bottom: -32px;
}

.caption > p:nth-child(3) img{position: absolute;top:0;left: 0}
.caption span{position: absolute;display: block;width: 100%;height:100%;
	left: 0;top: 0; background:rgba(255,155,0,.2);
	box-shadow: inset 0 0 50px rgba(50,30,0,.6),
	 inset 0 0 100px rgba(50,30,0,.3);opacity: 0;
}

/*displayView*/
.displayView{position: relative;display: flex;width: 80%;max-width: 69em;margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em}
/* 스탭 프로세스 */
.displayView .cont_detail{text-align: center;margin-top: 2em;}
.displayView .cont_detail .process .processTitle{font-size: 2.5em;margin-bottom: 1em;color:#414042;
letter-spacing: -.05em;opacity: .5;}
.displayView .cont_detail .process ul{display: flex;justify-content: center;flex-wrap: wrap;}
.displayView .cont_detail .process ul li{position: relative;list-style: none;margin:0 1.5em;}
.displayView .cont_detail .process ul li .txtDesc{display: block;color: #000;
	width: 100%}
.displayView .cont_detail .process .icon{margin-bottom: 1em;}
.displayView .cont_detail .process ul li .txtDesc strong{font-size:1.2em;color: #4D4D4D;line-height: 2em;}
.displayView .cont_detail .process ul li .txtDesc h3{font-size:.9em;color: #808080;line-height: 1.5em;}
.displayView .cont_detail .process ul li .processBg{position: relative;}
.displayView .cont_detail .process ul li .processBg .number{position: absolute;left: 50%;top:50%;color: #fff;
transform: translateX(-50%)translateY(-56%);font-size: 1.4em;font-weight: bold;}

/*박스 프로세스 *
/*.displayView .cont_detail{margin-top: 2em;width: 100%;background: #fff;}
.displayView .cont_detail ul {display: flex;justify-content: center;flex-wrap: wrap;}
.displayView .cont_detail ul li{position: relative;list-style: none;color: #fff;
;width: 7em;height: 7em; border-radius: .5em;margin: 1em;background: #6c98bd;
box-shadow: 5px 0 5px -5px #333;}
.displayView .cont_detail ul li .number{position: absolute;top: 0;left: 0;font-size: 1.5em;top: 50%;
transform: translateY(-50%);left: 2px;opacity: .5;color: #000;font-weight: bold;background: #fff;
border-radius: 2em;padding: .25em;}
.displayView .cont_detail ul li:nth-child(1){background:#D9D9D9}
.displayView .cont_detail ul li:nth-child(2){background:#BFBFBF}
.displayView .cont_detail ul li:nth-child(3){background:#88898C}
.displayView .cont_detail ul li:nth-child(4){background:#6F7073}
.displayView .cont_detail ul li:nth-child(5){background:#F2F2F2}
.displayView .cont_detail ul li:nth-child(6){background:#D9D9D9}
.displayView .cont_detail ul li:nth-child(7){background:#BFBFBF}

.displayView .cont_detail ul li .txtDesc{position: relative;display: block;color: #000;width: 100%}
.displayView .cont_detail ul li .txtDesc strong{position: absolute;left: 50%;top: 90px;font-size: 0.75em;
transform: translateX(-50%);white-space: nowrap;overflow: hidden;}
.displayView .cont_detail ul li .txtDesc h3{position: absolute;color: #000;font-size: 0.67em;
	line-height: 1.3em;left: 50%;transform: translateX(-50%);white-space: nowrap;text-align: center;
top:2px;font-weight:200 }
.displayView .cont_detail ul li:first-child .txtDesc h3{top: 10px;}
.displayView .cont_detail ul li .icon{position: absolute;left: 50%;top: 50%;
	transform: translateX(-50%)translateY(-50%);}
.displayView .cont_detail ul li .icon img{width: 50px;height: auto;}
*//*.displayView .cont_detail ul li:after{position: absolute;content: '\e907';font-family: 'xeicon';
font-size: 30px;color: #000;top:50%;right:-30px;transform: translateY(-50%);}*/

/*;background: #fff;
box-sizing: border-box;border-top: 1px solid #000;border-bottom: 1px solid #000;*/
/*.displayView:after{content: '';clear: both;display: block;}*/
.displayView .close{position: absolute;width: 50px ;height: 50px;right:30px;top: 50px;
cursor: pointer;}
.displayView .close:after{content: '\e921';font-family:'xeicon';font-size: 50px;opacity: .5;
color:#000;}
.displayView .close:hover:after{opacity: 1;}

.displayView .content .imgageView{display: flex;margin-top:40px;justify-content: center;flex-wrap: wrap;
flex-direction: row;}
.displayView .content .lineView{border-bottom: 2px solid #000;margin-top: 20px}


/*aside img*/
.displayView .aside{width: 273px;height: 1000px;box-shadow: 5px 0 5px -5px #333;}
.displayView .content .empty:before{content: '';display: block;background:#bfbfbf;width: 100%;height: 5px;
margin:0 0 30px 0;color: #999999;}
.displayView .content .empty:after{content: '';display: block;background:#bfbfbf;width: 100%;height: 5px;
margin:40px 0 0 0;color: #999999;}
.displayView .content .empty p{font-size: 50px;font-weight: bold;margin:0 0 20px 0;
color: #368de6;opacity: 0.7;}
.displayView .content .empty span{font-size: 13px;color: #023882;font-weight: bold;line-height: 25px;}

.displayView .content  .imgageView .view{position: relative;display: none;width: 500px; height: 330px;
	overflow: hidden;margin:20px;border:1px solid #888888;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.displayView .content  .imgageView img{position: absolute;background: #000;width: 100%;top: 50%;
	transform: translateY(-50%);border: 2
	px solid #000;}
.displayView  .content {width: 100%;}
.displayView  .content .empty{text-align: center;}
.displayView  .content  .txt{display: block;padding: 20px 0px;margin: 20px 0px;}
.displayView  .content  .txt .title{position: absolute;font-size: 30px;color: #999;font-weight: bold;margin-bottom: 30px;padding: 0 10px;}

.displayView  .content  .txt .title:after{content: '';position: absolute;display: block;width: 100%;
height: 8px;background-color:#353435;left: 5px;top:40px;}

.displayView  .content  .titleDesc{display: block;font-size: 14px;margin:0 auto;
	line-height: 30px;color:#666;line-height:30px;padding: 0 10px}

.displayView .desc{position: absolute;font-size: 15px;color:#000;color: #1c3d6e;
	font-weight: bold;margin-top: 10px;padding: 0 40px;line-height: 20px;}
.displayView .desc:before{content: '';display: block;position: absolute;background: url(../images/bullet2.gif) 0 5px no-repeat;width: 13px;height: 20px;
left: 20px;top:-1px;}
.displayView .doc-tit {

    margin-top: 40px;
    padding-left: 15px;
    color: #023882;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3em;
    background: url(../images/bullet.gif) 0 4px no-repeat;
}
.displayView  .content .descEx{font-size: 13px;color: #0a75a9;margin-top:40px;margin-left: 50px;}
.displayView  .content .subDescView{font-weight: bold;font-size: 16px;margin: 50px 0;line-height: 30px;
color: #a7b2b8;}
/*footer*/
footer{position: relative;display: inline-block;text-align: center;
	background:#282828;width: 100%;overflow: hidden;box-sizing: border-box;margin-top: 20px;bottom: 0px;}
footer .copy{color:#fff;}
footer .footer_tit{display:block;font-size: 20px;margin:10px 0;}
footer ul li{list-style: none;margin:10px;}
footer ul li p{margin:5px;font-size: 13px}


/*media screen*/
/*media screen*/
@media screen and (max-width: 600px){
.summary{display: block;text-align: center;}
.summary img{width: 200px;}
}

@media screen and (min-width: 1700px){
	.displayView .content .descEx {margin: 60px 40px;}
}
@media screen and (max-width: 1600px){

.displayView  .content  .space:after{margin:20px 0 80px 0}
/*.displayView .content  .imgageView .view{width: 510px; height:300px;
overflow: hidden;}*/
.displayView  .content  .titleDesc{margin-top: 40px;}
}
@media screen and (min-width: 1600px) and (max-width: 1700px){
/*	.displayView .content  .imgageView .view{width: 600px; height: 300px;
	overflow: hidden;}*/
}
@media screen and (max-width: 1500px){
/*.displayView .content  .imgageView .view{width: 500px; height: 300px;
	overflow: hidden;}*/

.displayView .close {top:50px;}
}
@media screen and (max-width: 1400px){
/*	.displayView .content  .imgageView .view{width: 480px; height: 300px;}*/
}
@media screen and (max-width: 1350px){
/*	.displayView .content  .imgageView .view{width: 500px; height: 300px;}	*/
}
@media screen and (max-width: 1100px){
/*.displayView .content{text-align: center;}*/
.displayView  .content .empty{text-align: left;}
.displayView .cont_detail .process ul li{margin: 1.5em;}
.visual .txt span:nth-child(1){font-size: 40px;}
.visual .txt span:nth-child(2){left: 0px;font-size: 15px;}
.displayView .aside {display: none;}
.displayView .content .imgageView {display: inline-block;}
/*.displayView .content .imgageView .view{width: 650px;height: 400px;margin: 10px;}*/
.displayView .content .empty p {font-size: 40px;}
.displayView .desc {margin: 10px 0;}
.displayView .content .space:after {margin: 20px 0 0 0;}
.displayView .content .descEx {margin: 40px;}

}
@media screen and (max-width: 1007px){
	.displayView .content .imgageView .view{width: 550px;height: 350px;margin: 10px;}
}
@media screen and (max-width: 950px){
	.displayView .content .empty p {font-size: 30px;}
	.displayView .close:after {font-size: 30px;}
}

@media screen and (max-width: 1530px){
	header .gnb{display: none;}
	header .btn_all_menu{display: block;}
}
@media screen and (min-width: 900px){
	header .btn_all_menu{display: none;}
}
@media screen and (max-width: 850px){
	.displayView .cont_detail .process .processTitle{font-size: 1.5em}
	.displayView .content .empty p {font-size: 25px;}
	.displayView .close:after{font-size: 25px;}
	.displayView .content .txt .title {font-size: 16px;}
	.visual .txt span:nth-child(2){display: none;}
	.visual .txt {top: 50%;left: 50%;transform: translateY(-50%)translateX(-50%);
		white-space: nowrap;padding: 1em;}
}
@media screen and (max-width: 730px){

.displayView .content .imgageView{width: 100%}
.displayView .content .imgageView .view{margin: 20px auto;}
}
@media screen and (max-width: 700px){
	.product nav ul{display: inline-block;width: 100%}
	.product nav ul li {line-height: 50px;}
	.displayView .content .txt .title:after {width: 100%}
}
@media screen and (max-width: 580px){
.displayView .cont_detail .process .processTitle{font-size:1.2em}
.visual .txt span:nth-child(1){font-size: 20px;}

.displayView .content .imgageView .view{width: 400px;height:250px;}
.displayView .desc {margin-top: 10px;padding: 20px;}
.displayView .content .txt {margin:10px 0;}
.displayView .content .txt .title:after {width: 100%}
.displayView .content .descEx {margin-top: 80px;left: 30px;}
.displayView .desc:before {left: 0px;top: 20px;}
}
@media screen and (max-width: 450px){
.displayView .cont_detail .process .processTitle{font-size:1em}
.displayView .content .txt .title {font-size: 13px;}
.displayView .content {padding: 0 10px;}
footer{margin-top: 0px;}
footer ul li p {font-size: 12px;}
.displayView .content .imgageView .view{width: 240px;height:190px;}
.displayView .close {width: 25px;height: 25px;top:65px;right: 30px;}

.displayView .content .empty {padding: 20px 10px;}

header{height: 60px;}
header h1 {left: 5px;padding-top: 4px;top: 6px;}
header h1 a{width: 152px;height: 40px;background-image: url(../images/logo_moblie.png);}
input[id="menuicon"] + label {top: 30px;right: -40px;}
header .btn_all_menu{right: 10px;line-height: 60px;}
.displayView .content .empty p {font-size: 20px;}
.displayView .close:after {font-size: 20px;}
.displayView .content .txt .title:after {width: 100%}
header .btn_all_menu:after {font-size: 38px;}
}