/* 로딩 */
.progress {background: #fff; width:0; height:0; position: fixed; left:0; top:0; animation:disbg 1.7s; opacity:0; z-index:-1;}
.loarder-wrap{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80px; height:1px; background:#fff; overflow:hidden;}
.loader{position:absolute;left:-30px; top:0; width:30px; height:1px; background:#000; animation: load 1.5s;}

@keyframes load{
	0%{left:-30px;}
	100%{left:100%}
}

@keyframes disbg{
	0%{opacity:1; width:100%; height:100%; z-index:9999;}
	1{opacity:1; width:100%; height:100%;z-index:9999;}
	50%{opacity:1; width:100%; height:100%;z-index:9999;}
	99%{opacity:0; width:100%; height:100%;z-index:9999;}
	100%{width:0; height:0; z-index:-1;}
}


/* 헤더 */
#header{position: fixed; z-index: 1001; top: 0; left: 0; right: 0; height: 100px; padding: 30px 70px; box-sizing: border-box; transition: .3s height, .3s padding;}
#header::after{content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #000; transition: .3s opacity; opacity: 0;}

#header.scrolling{height: 66px; padding-top: 10px; padding-bottom: 10px;}
#header.scrolling::after{opacity: .3;}

#header .menuBtn{position: fixed; width: 46px; height: 46px; transition: .3s opacity, .3s top; z-index: 2001; box-sizing: border-box;}
#header .menuBtn a{position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; padding: 13px 0; box-sizing: border-box;}
#header .menuBtn a i,
#header .menuBtn a::after,
#header .menuBtn a::before{display: inline-block; position: absolute; width: 26px; height: 1px; background: #fff; margin-left: 10px; transition: .3s all;}
#header .menuBtn a::after,
#header .menuBtn a::before{content:"";}
#header .menuBtn a::before{top: 13px;}
#header .menuBtn a::after{top: 32px;}
#header .menuBtn a i{top: 22px;}
#header .menuBtn.on a::before{transform: rotate(45deg); -ms-transform: rotate(45deg); top: 22px; background: #6f6f6f;}
#header .menuBtn.on a::after{transform: rotate(-45deg); -ms-transform: rotate(-45deg); top: 22px; background: #6f6f6f;}
#header .menuBtn.on a i{opacity: 0; background: #c7c7c7;}

#header .menuWrap{position: fixed; z-index: 2000; top: 0; left: 0; width: 0; height: 0; background-color: #fff; opacity: 0; transition: .3s opacity; text-align: center; padding-top: 45px; overflow: hidden;}
#header .menuWrap .menuLogo{position:relative; display: block; width: 63px; height: 49px; margin: 0 auto; /*background: url(../images/common/menulogo.png) no-repeat center; background-size: 100%;*/ text-indent: -999999px; margin-bottom: 50px;}
#header .menuWrap .menuLogo svg{width:63px; height:49px; position:absolute; left:0; top:0;}
#header .menuWrap ul.menu li{padding: 23px 0;}
#header .menuWrap ul.menu li a{font-family: 'WorkSansLight', sans-serif; font-size: 22px; color: #666}
#header .menuWrap ul.menu li a:hover{color: #000;  font-family: 'WorkSansRegular', sans-serif;}
#header .menuWrap ul.sns{margin-top: 35px;}
#header .menuWrap ul.sns li{display: inline-block;}
#header .menuWrap ul.sns li a{display: block; padding: 8px;}

#header .logo{width: 59px; height: 46px; position: absolute; left: 50%; transform: translateX(-50%);}
#header .logo a{position:relative; display: block; height: 100%; text-indent: -9999999px; padding-top:5px; /*background: url(../images/common/logo.png) no-repeat; background-size: 100%;*/}
#header .logo a svg{width:100%; height:100%; position:absolute; left:0; top:0;}

#header .questIn{display: inline-block; position: absolute; right: 80px; width: 90px; border: 1px solid rgba(255, 255, 255, 0.5); margin-top: 8px; border-radius: 5px; height: 30px;}
#header .questIn .btnWrap{transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; display: block; position: relative; height: 30px;  box-sizing: border-box; border-radius: 5px;}
#header .questIn .btnWrap a{font-size: 14px; font-family: "NotoSansCJKkrRegular", sans-serif; text-align: center; padding: 7px 0; height: 30px; display: block; color: rgba(255, 255, 255, 0.8); position: absolute; width: 100%; box-sizing: border-box;}
#header .questIn .btnWrap:hover {
	color: #222 !important;
	background-color: transparent;
}
#header .questIn .btnWrap:hover a{
	color: #222;

}
#header .questIn .btnWrap:hover:before {
	top: 0%;
	bottom: auto;
	height: 100%;border-radius: 4px;
}
#header .questIn .btnWrap:before {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 0px;
	width: 100%;
	z-index: 0;
	content: '';
	color: #222 ;
	background: #fff;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	
}

/* 탑 버튼 */
#top{position:fixed; bottom:162px; left:93.3%; z-index:9999;}
.top{width:31px; height:35px; opacity:0; transition:all 0.3s; position:relative;}
.top svg{width:65px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:all 0.3s; opacity:0;}


/* 푸터 */
#footer{border-top: 1px solid #dadada; background: #fff; width: 100%; position: relative; z-index: 100; text-align: center; padding-top: 55px; padding-bottom: 60px;}
#footer ul{text-align: center;}
#footer ul li{display: inline-block;position:relative; margin-right:17px;}
#footer ul li.mr0{margin-right:0;}

#footer ul.sns li a{display: inline-block; padding: 0 8px; }
#footer ul.sns li a svg{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px;}

#footer ul.footMenu{padding-top: 25px;  display: inline-block;}
#footer ul.footMenu + ul.footMenu{padding-top: 0;padding-bottom: 35px;}
#footer ul.footMenu li a{display: inline-block; padding: 0 15px; font-family: 'WorkSansLight', sans-serif; color: #666; font-size: 16px;}
#footer ul.footMenu li a:hover{color: #000; font-weight:bold;}

#footer .address{font-family: 'NotoSansCJKkrLight', sans-serif; font-size: 13px; line-height: 26px;}

/*191017*/
#footer .f_box{overflow:hidden;}
#footer .f1017{display:inline-block; font-family: 'NotoSansCJKkrLight', sans-serif; font-size:13px; line-height:26px; margin-top:13px;}
#footer .copy{vertical-align: 9px;}
#footer .photo{ border-bottom:1px solid #bcbcbc; text-align:center; width:76px;  height:26px; position:relative; color:#222; background:#fff;}
#footer .photo a{font-size:12px; display:block;color:#222; width:100%;  position:absolute;}
/*#footer .photo:hover a{color:#fff;}
#footer .photo:hover {
	color: #fff !important;
	background-color: transparent;
	border: 1px solid #222;
}
#footer .photo:hover a{
	color: #fff;
}
#footer .photo:hover:before {
	top: 0%;
	bottom: auto;
	height: 100%;
}
#footer .photo:before {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 0px;
	width: 100%;
	z-index: 0;
	content: '';
	color: #fff !important;
	background: #222;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
*/
.photoModal{position:fixed; left:0; top:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:9999; display:none;}
.photoModal .pmBox{width:846px; height:700px; background:#fff; overflow-y:scroll; overflow-x:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid #000;}
.photoModal .photoTab{text-align:center; padding:43px 0;}
.photoModal .photoTab a{display:inline-block; width:200px; border-left:1px solid #ccc; text-align:center; color:#666;font-family: 'NotoSansCJKkrLight', sans-serif;}
.photoModal .photoTab a:first-child{border:none;}
.photoModal .photoTab a.on{color:#000; font-weight:bold;}
.photoModal .photoCont{width:100%; height:100%; padding:0 30px;}
.photoModal .photoCont >div{display:none;}
.photoModal .photoCont >div.on{display:block;}
.photoModal .photoCont .pc1{margin-bottom:35px;}
.photoModal .photoCont .pc2{margin-bottom:156px;}
.is-ie .photoModal .photoCont{padding-bottom:35px;}
.is-ie .photoModal .photoCont{padding-bottom:156px;}
.photoModal .pmBox .modalClose{display:block; width:16px; height:16px; position:absolute; top:43px; right:30px;}



@media screen and (max-width: 1200px) and (min-width: 641px){
	#header{padding: 25px 35px;}
	#header .logo{width: 52px; height: 41px;}

	#header .menuBtn{width: 41px; height: 41px;}
	#header .menuBtn a i, 
	#header .menuBtn a::after, 
	#header .menuBtn a::before{width: 28px; margin-left: 0; left: 50%; transform: translateX(-50%);}
	#header .menuBtn a::before{top: 10px;}
	#header .menuBtn a i{top: 20px;}
	#header .menuBtn a::after{top: 31px;}

	#header .menuBtn.on a::before{top: 20px; margin-left: -13px;}
	#header .menuBtn.on a::after{top: 20px; margin-left: -13px;}

	#header .questIn{width: 75px; margin-top: 8px; right: 48px; height: 28px;}
	#header .questIn .btnWrap{  height: 28px;}
	#header .questIn .btnWrap a{font-size: 12px; padding: 7px 0;  height: 28px;}
	
	#header .menuWrap .menuLogo{width: 65px; height: 51px; margin-bottom: 35px;}
	#header .menuWrap ul.menu li{padding: 15px 0;}
	#header .menuWrap ul.menu li a{font-size: 17px;}

	#header .questIn .btnWrap:hover{color:#fff}
	#header .questIn .btnWrap:hover a{color:#fff;}
	#header .questIn .btnWrap:before{background:none; color:#fff;}

	#header .menuWrap{/*position:absolute; width:100%; height:100vh !important;*/overflow:scroll;}
	#header .menuWrap ul.sns{margin-bottom:100px;}

	#top{bottom:10%;}
}
@media screen and (max-width: 850px){
	.photoModal .pmBox{width:90%; height:80%;}
	.photoModal .pmBox img{width:100%;}
	.photoModal .photoCont{padding:0 10px; }
	.photoModal .photoCont .pc{margin-right:16px;}
}
@media screen and (max-width: 686px){
	#footer ul.footMenu{width:60%;}
	#footer ul.footMenu + ul.footMenu{padding-top:8px;}
	#footer ul.footMenu li{width:100px; text-align:center;}
	#footer ul.footMenu li.mr17{margin-right:0;}
	#footer ul.footMenu li a{padding:0;}
}


@media screen and (max-width: 640px){
	#header{padding: 20px 20px;}
	#header.scrolling{height: 57px;}
	#header .menuBtn{width: 28px; height: 28px;}
	#header .menuBtn a{padding: 0; top:3px;}
	#header .menuBtn a i, 
	#header .menuBtn a::after, 
	#header .menuBtn a::before{width: 23px; margin-left: 0; left: 50%; transform: translateX(-50%);}
	#header .menuBtn a::before{top: 3px;}
	#header .menuBtn a i{top: 13px;}
	#header .menuBtn a::after{top: 23px;}
	#header .menuBtn.on a::before{transform: rotate(45deg); -ms-transform: rotate(45deg); top: 13px; margin-left: -11px; background: #c7c7c7;}
	#header .menuBtn.on a::after{transform: rotate(-45deg); -ms-transform: rotate(-45deg); top: 13px; margin-left: -11px; background: #c7c7c7;}
	#header .logo{width: 45px; height: 34px;}
	#header .questIn{height: 22px;right: 20px; margin-top: 5px;width: 65px; }
	#header .questIn .btnWrap a{ height:22px; width: 65px; font-size: 10px;padding: 6px 0; }

	#header .menuWrap .menuLogo{width: 55px; height: 43px; margin-bottom: 25px;}

	#header .menuWrap ul.menu li{padding: 10px 0;}
	#header .menuWrap ul.menu li a{font-size: 15px;}

	#header .menuWrap ul.sns{margin-top: 25px;}

	#footer{padding-bottom: 30px;}
	#footer ul.footMenu{width: 100%;}
	#footer ul.footMenu + ul.footMenu{padding-top: 8px;}
	#footer ul.footMenu li a{padding: 0 10px; font-size: 14px; text-align:center; padding:0;}

	
	#header .questIn .btnWrap:hover{color:#fff}
	#header .questIn .btnWrap:hover a{color:#fff;}
	#header .questIn .btnWrap:before{background:none; color:#fff;}

	#header .menuWrap{/*position:absolute; width:100%; height:100vh !important;*/overflow:scroll;}
	#header .menuWrap ul.sns{margin-bottom:100px;}

	#top{bottom:10%;}

	.photoModal .pmBox{height:50%; width:90%;}
}
@media screen and (max-width: 500px){
	.photoModal .photoTab a{display:block; border-left:none; padding-bottom:10px; width: 200px; margin:0 auto;}
}

@media screen and (max-width:400px){
	#footer ul.footMenu{width:100%;}
	#footer ul.footMenu li{margin-right:0; width:30%;}
}