@charset "utf-8";


@import url('https://fonts.googleapis.com/css?family=Play:400,700&display=swap'); /* play체 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap');

body, table, th, td, button, select, input, textarea {
	font-family:'微软雅黑';
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }
.area{ max-width:1300px; margin:0px auto;} 
.area-box{ max-width:1510px; margin:0px auto; }


#header{
	position:absolute; height:100px; top:0; left:0; width:100%; z-index:9999;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}	
#headerInnerWrap{
	position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:9999; border-bottom: 1px solid rgba(255,255,255,0.25);
	-webkit-transition:background-color 0.3s;
	-moz-transition:background-color 0.3s;
	-o-transition:background-color 0.3s;
	-ms-transition:background-color 0.3s;
	transition:background-color 0.3s
}
#headerInner{
	position:relative; height:100%; margin:0px auto; padding:0 45px;  
	-webkit-transition:padding 0.3s;
	-moz-transition:padding 0.3s;
	-o-transition:padding 0.3s;
	-ms-transition:padding 0.3s;
	transition:padding 0.3s
}
#header .logo{position:relative; z-index:100; float:left; padding:24px 0; }		
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}
#header .logo img.ver1{display: block;}
#header .logo img.ver2{display: none;}


.header-util-box{position:absolute; top:0; right:0; z-index:100;display: none;}


.header-lang {position:relative; float:left; width:198px; height:100px; border-left:1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25); z-index:100; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.header-lang .lang-open-btn {overflow:hidden; padding: 0 45px; position:relative; display:block; height:100%; font-size:14px; line-height: 100px; color:#fff; background-color: transparent; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.header-lang .lang-open-btn strong{font-weight:400}
.header-lang .lang-open-btn .arrow{display: block; width: 16px; height: 16px; position: absolute; top: 50%; margin-top: -8px; right: 40px; font-size:16px; color: #fff;}
.header-lang .lang-open-btn .arrow i{position: absolute; top: 0; left: 0;}
.header-lang > ul {position:absolute; top:100px; left:-1px; z-index:10; width:100%; border:1px solid #0c1015; background-color:#0c1015; opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-align: center; padding: 20px 0;}
.header-lang > ul:before{position: absolute; top: -1px; left: 50%; margin-left: -90px; display: block; content: ''; width: 180px; height: 1px; background-color: rgba(255,255,255,0.2);}
.header-lang > ul > li > a{display:block; padding:0 10px; font-size:16px; line-height: 30px; color:#7d8690;}
.header-lang > ul > li > a:hover, .header-lang > ul > li.selected > a{color: #fff;}

.header-lang.open{border-color: #0c1015;}
.header-lang.open .lang-open-btn{background-color: #0c1015;}
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg);}
.header-lang.open > ul {opacity:1;filter:Alpha(opacity=100); visibility:visible;}



.sitemap-line-btn{float:left; width:100px; height:100px;}
.sitemap-line-btn .line{display:block; width:24px; height:1px; background-color:#fff; margin: 7px auto;}


.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9997;}	/* gnb overlay BG */
#gnbBg{visibility:hidden; opacity:0;filter:Alpha(opacity=0);position:absolute; right:0; top:100px; width:100%; height:70px; background:#f2f2f2; z-index:98;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;}	/* gnb 2depth BG */
#gnbBg.on{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#gnb{position:absolute; width: calc(100% - 50px); padding-right: 50px; top:0; left: 0; z-index:99;}
#gnb .gnb-wrapper{text-align:right; margin: 0; float: right;}
#gnb .gnb-wrapper > ul{display: inline-block; margin: 0 auto; *display:inline;*zoom:1;}
#gnb .gnb-wrapper > ul > li{float: left; display: block;}
#gnb .gnb-wrapper > ul > li > a{z-index:100; display:block; height:100px; line-height:100px; padding:0 5px; text-align:left; color:#fff; font-size:18px; font-weight:600;}
#gnb .gnb-wrapper > ul > li:last-child > a{padding-right: 70px;}
#gnb .gnb-wrapper > ul > li > a > span{display: inline-block; position: relative; padding: 0 25px;}
#gnb .gnb-wrapper > ul > li > a > span:before{display: block; position: absolute; left: 50%; bottom: -1px; content: ''; width: 0; height: 3px; z-index: 100; background-color: #800a0a; -webkit-transition: all 0.4s;
-moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}

#gnb .gnb-wrapper > ul > li > a:hover, #gnb .gnb-wrapper > ul > li.on > a{color: #800a0a;}
#gnb .gnb-wrapper > ul > li > a:hover > span:before, #gnb .gnb-wrapper > ul > li.on > a > span:before{width: 100%; margin-left: -50%;}


#gnb .gnb-wrapper > ul > li .gnb-2dep{
	/* display:none; */
	position:absolute; 
	top:100px; 
	left:0px; 
	z-index:99;
	width:100%; 
	text-align:center; 
	visibility:hidden; opacity:0;filter:Alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
#gnb .gnb-wrapper > ul > li .gnb-2dep.on{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#gnb .gnb-wrapper > ul > li .gnb-2dep ul{}
#gnb .gnb-wrapper > ul > li .gnb-2dep ul li{position: relative; display: inline-block; padding: 0 60px;}
#gnb .gnb-wrapper > ul > li .gnb-2dep ul li:before{position: absolute; top: 50%; margin-top: -5.5px; left: 0; margin-left: -5.5px; display: block; content: ''; width: 11px; height: 11px; background: url("../images/icon/icon_gnb.png") 0 0 no-repeat;}
#gnb .gnb-wrapper > ul > li .gnb-2dep ul li:first-child:before{display: none;}
#gnb .gnb-wrapper > ul > li .gnb-2dep ul li a{display: block; font-size: 17px; line-height: 75px; letter-spacing: -0.65px; color: #535353; font-weight: 300; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
#gnb .gnb-wrapper > ul > li .gnb-2dep ul li a:hover, #gnb .gnb-wrapper > ul > li .gnb-2dep ul li.on a{color: #800a0a;}


/* header over시 */
#header.over{border-color: #d9d9d9;}
#header.over #headerInnerWrap{background-color:#fff; border-color: #d9d9d9;}
#header.over #gnb .gnb-wrapper > ul > li > a{color:#484848;}
#header.over #gnb .gnb-wrapper > ul > li > a:hover, #header.over #gnb .gnb-wrapper > ul > li.on > a{color: #800a0a;}
#header.over .logo img.ver1{display: none;}
#header.over .logo img.ver2{display: block;}
#header.over .header-lang{border-color: #d9d9d9;}
#header.over .header-lang .lang-open-btn{color: #484848;}
#header.over .header-lang .lang-open-btn .arrow{color: #000;}
#header.over .sitemap-line-btn .line{background-color: #000;}

/* header black ver */
#header.black{}
#header.black #headerInnerWrap{border-color: #d9d9d9;}
#header.black #gnb .gnb-wrapper > ul > li > a{color:#484848;}
#header.black #gnb .gnb-wrapper > ul > li > a:hover, #header.over #gnb .gnb-wrapper > ul > li.on > a{color: #800a0a;}
#header.black .logo img.ver1{display: none;}
#header.black .logo img.ver2{display: block;}
#header.black .header-lang{border-color: #d9d9d9;}
#header.black .header-lang .lang-open-btn{color: #484848;}
#header.black .header-lang .lang-open-btn .arrow{color: #000;}
#header.black .sitemap-line-btn .line{background-color: #000;}
#header.black .header-lang.open{border-color: #0c1015;}
#header.black .header-lang.open .lang-open-btn{color: #fff;}
#header.black .header-lang.open .lang-open-btn .arrow{color: #fff;}


/* header fixed ver */
.sub-wrap #header.fixed{}
.sub-wrap #header.fixed #headerInnerWrap{border-color: #d9d9d9; background-color: #fff;}
.sub-wrap #header.fixed #gnb .gnb-wrapper > ul > li > a{color:#484848;}
.sub-wrap #header.fixed #gnb .gnb-wrapper > ul > li > a:hover, #header.over #gnb .gnb-wrapper > ul > li.on > a{color: #800a0a;}
.sub-wrap #header.fixed .logo img.ver1{display: none;}
.sub-wrap #header.fixed .logo img.ver2{display: block;}
.sub-wrap #header.fixed .header-lang{border-color: #d9d9d9;}
.sub-wrap #header.fixed .header-lang .lang-open-btn{color: #484848;}
.sub-wrap #header.fixed .header-lang .lang-open-btn .arrow{color: #000;}
.sub-wrap #header.fixed .sitemap-line-btn .line{background-color: #000;}

.sub-wrap #header.fixed .header-lang.open{border-color: #0c1015;}
.sub-wrap #header.fixed .header-lang.open .lang-open-btn{color: #fff;}
.sub-wrap #header.fixed .header-lang.open .lang-open-btn .arrow{color: #fff;}
.sub-wrap #header.fixed .nav-open-btn .line {background-color: #000;}
.sub-wrap #header.fixed .nav-open-btn.active .line {background-color: #fff;}
.sub-wrap #header.fixed #headerInnerWrap {position: fixed; height: 100px;}




@media all and ( max-width: 1220px ){
	.sub-wrap #header.fixed #headerInnerWrap{height: 80px;}
}
@media all and ( max-width: 1024px ){
	/* header fixed ver */
	#header.fixed{}
	#header.fixed #headerInnerWrap{border-color: #d9d9d9; background-color: #fff;}
	#header.fixed #gnb .gnb-wrapper > ul > li > a{color:#484848;}
	#header.fixed #gnb .gnb-wrapper > ul > li > a:hover, #header.over #gnb .gnb-wrapper > ul > li.on > a{color: #800a0a;}
	#header.fixed .logo img.ver1{display: none;}
	#header.fixed .logo img.ver2{display: block;}
	#header.fixed .header-lang{border-color: #d9d9d9;}
	#header.fixed .header-lang .lang-open-btn{color: #484848;}
	#header.fixed .header-lang .lang-open-btn .arrow{color: #000;}
	#header.fixed .sitemap-line-btn .line{background-color: #000;}

	#header.fixed .header-lang.open{border-color: #0c1015;}
	#header.fixed .header-lang.open .lang-open-btn{color: #fff;}
	#header.fixed .header-lang.open .lang-open-btn .arrow{color: #fff;}
	#header.fixed .nav-open-btn .line {background-color: #000;}
	#header.fixed .nav-open-btn.active .line {background-color: #fff;}
}
@media all and ( max-width: 800px ){
	.sub-wrap #header.fixed #headerInnerWrap{height: 60px;}
}

/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

/* ****************** FOOTER ********************** */
#footer{background-color:#800a0a;}
#footerInner{position:relative; }
.footer-left-con{float:left; width: 66%;}
.footer-right-con{float:left; padding-left: 4%; width: calc(90% - 1px); /* border-left: 1px solid rgba(255,255,255,0.1); */}

/* -------- FOOTER :: 하단 -------- */
#footerBottom{padding:35px 0;}
.footer-gnb-list{}
.footer-gnb{float: left; width: 20%;}
.footer-gnb ul{}
.footer-gnb ul li{margin-top: 15px; font-size: 15px; font-weight: 400; letter-spacing: -0.65px; color: rgba(255,255,255,0.5);}
.footer-gnb ul li:first-child{margin-top: 0;}
.footer-gnb ul li.tit{font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 40px;}

/* Footer :: 왼쪽정보 */
.footer-address p{color:rgba(255,255,255,0.5); font-size:15px; line-height:25px; padding-bottom:20px; letter-spacing: -0.5px;}
.footer-address span{display:block;}
.footer-address span em{display: inline-block; margin: 0 15px;}
.footer-address a{color:inherit}
.footer-copyright{font-size:15px; color: rgba(255,255,255,0.3);}

.box-group-con{margin: 25px -1.5% 0;}
/* Footer :: 오른쪽정보 :: 패밀리사이트 */
.family-site-box{position:relative; width:47%; margin: 0 1.5%; float: left; text-align:left; letter-spacing:-0.25px;}
.family-site-box .family-site-open-btn{display:block; height:50px; line-height:50px; text-indent:30px; font-size:15px; background-color:#1a1e23; color:rgba(255,255,255,0.5);}
.family-site-box .family-site-open-btn i{position:absolute; right:35px; top:50%; margin-top:-8px; font-size: 16px;}
.family-site-list{position:absolute; bottom:50px; left:0px; width:100%; padding:10px 0; background-color:#1a1e23; border:1px solid #1a1e23; border-bottom:0;  z-index:11; display:none; box-sizing:border-box;}
.family-site-list a{display:block; padding:10px; color:rgba(255,255,255,0.5); font-size:12px;}
.family-site-list a:hover{color:#fff; text-decoration:underline;}

/* Footer :: 오른쪽정보 :: 사이트맵 */
.site-map-box{width:47%; margin: 0 1.5%; float: left; position: relative; text-align:left; letter-spacing:-0.25px;}
.site-map-box a{display:block; height:50px; line-height:50px; text-indent:30px; font-size:15px; background-color:#1a1e23; color:rgba(255,255,255,0.5);}
.site-map-box a i{position:absolute; right:35px; top:50%; margin-top:-8px; font-size: 16px;}

/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{position:relative; overflow:hidden; width:100%; height:400px; }
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-webkit-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	-moz-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	-ms-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	-o-transition: transform 2s ease-in-out, opacity 2s ease-in-out;
	transition: transform 2s ease-in-out, opacity 2s ease-in-out;	
    transform: scale(1.2) rotate(0.003deg);
    opacity: 0.4;
	/* -ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
    	-webkit-transition:transform 5000ms  ease-in-out ;
    	-moz-transition:transform 5000ms ease-in-out ;
    	-o-transition:transform 5000ms ease-in-out ;
    	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	 */
}
#visual .visual-txt-con{position:relative; z-index:1; text-align:center; display:table; width:100%; height:calc(100% - -125px); letter-spacing:-0.5px; color:#fff;}
#visual .visual-txt-container{position:relative; width:100%; }
#visual .visual-tit,
#visual .location,
.sub-page-controls-btn{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-30px); 
    -o-transform: translateY(-30px); 
    -moz-transform: translateY(-30px);
    -webkit-transform: translateY(-30px); 
    transform: translateY(-30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#visual .visual-tit{
	font-weight:500; 
	font-size:58px; 
	letter-spacing:-0.65px
}

/* SUB LAYOUT :: 상단효과 active */
#visual.active .visual-img-con{
	/* -ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg); */
	-ms-transform: scale(1) rotate(0.003deg);
	-o-transform: scale(1) rotate(0.003deg);
	-moz-transform: scale(1) rotate(0.003deg);
	-webkit-transform: scale(1) rotate(0.003deg);
	transform: scale(1) rotate(0.003deg);
    opacity: 1;
}
#visual.active .visual-tit,
#visual.active .location,
#visual.active .sub-page-controls-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}

/* SUB LAYOUT :: 위치정보(location) */
.location{overflow:hidden; margin-bottom: 30px;}
.location li{display:inline-block; vertical-align:middle; color:#fff; font-weight: 400; font-size:48px; letter-spacing:-0.5px;}
.location li a{color:inherit;}
.location li i{font-size:18px; margin-top:-2px;}
.location li:before{display:inline-block; content:">"; position:relative; top:-1px; vertical-align:middle; margin:0px 20px 0 17px; font-family:"돋움", Dotum, Arial, sans-serif; color:#fff; font-size:12px;}
.location li:first-child:before{display:none;}
.location li:last-child{color:#fff;}

/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
.sub-page-controls-btn{display: block; height: 52px; position:absolute; top:50%; margin-top:-26px;} /* margin-top:수정*/
.sub-page-controls-btn.sub-prev-page-btn{left:0; }
.sub-page-controls-btn.sub-next-page-btn{right:0; }
.sub-page-controls-btn span{display: block; color:#fff; vertical-align:middle;}
.sub-page-controls-btn span img{opacity: 0.5; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s;}

@media all and (min-width:801px){
	.sub-page-controls-btn.sub-prev-page-btn:hover span img, .sub-page-controls-btn.sub-next-page-btn:hover span img{opacity: 1;}
}

/*  SUB LAYOUT :: 서브메뉴(스타일1) */
#topMenu01{position:relative; width:100%; height:150px; margin-top: -150px; z-index: 1;}
#topMenu01 .side-menu-inner{text-align:center; width:100%; height:150px;}
#topMenu01 .side-menu-inner .area-box{background-color: #fff; height: 150px;}
#topMenu01 .side-menu-inner ul{display: block; height: 104px; border-bottom: 1px solid #d6d6d6;
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(-30px); 
    -o-transform: translateY(-30px); 
    -moz-transform: translateY(-30px);
    -webkit-transform: translateY(-30px); 
    transform: translateY(-30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
	-webkit-transition-delay:0.2s;
	-moz-transition-delay:0.2s;
	-o-transition-delay:0.2s;
	-ms-transition-delay:0.2s;
	transition-delay:0.2s;
}
#topMenu01.active .side-menu-inner ul{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}
#topMenu01 .side-menu-inner ul li{display:inline-block; width:175px; position: relative;} /* max-width 자유롭게 수정 */
#topMenu01 .side-menu-inner ul li:before{position:absolute; top: 50%; margin-top: -10px; left:0; content:"/"; font-size: 20px; color: #d8d8d8;}
#topMenu01 .side-menu-inner ul li:first-child:before{display: none;}
#topMenu01 .side-menu-inner ul li > a{
	display:block; 
	display:table; 
	position:relative;
	width:100%;
	height:104px; 
	line-height:1.2; 
	color:#585858; 
	font-size:20px; 
	letter-spacing:-0.65px; 
	font-weight:400; 
	word-break:keep-all;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
	font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
#topMenu01 .side-menu-inner ul li > a:before{
	position:absolute;
	bottom:-1px;
	left:50%;
	width:0;
	height:3px;
	background-color:#800a0a;
	content:"";
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
}
#topMenu01 .side-menu-inner ul li > a:after{position: absolute; width: 20px; height: 17px; left:50%; margin-left: -10px; bottom: -8px; content: ''; background-color: transparent; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;}
#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 25px;}
#topMenu01 .side-menu-inner ul li > a:hover,
#topMenu01 .side-menu-inner ul li.on > a{color: #800a0a; font-weight:600}
#topMenu01 .side-menu-inner ul li > a:hover:before, 
#topMenu01 .side-menu-inner ul li.on > a:before{width:100%; margin-left:-50%;}
#topMenu01 .side-menu-inner ul li > a:hover:after,
#topMenu01 .side-menu-inner ul li.on > a:after{background: url("../images/icon/icon_tri_gr.png") 0 0 no-repeat;}



/* SUB LAYOUT :: 모바일메뉴(공통)  */
#topMenuM01,
#topMenuM02{display:none;}



/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content{/*padding-top:70px;*/padding-top:59px; padding-bottom: 140px;}

/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; }
.footer-modal-content h1{height:60px; line-height:60px; font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0; background-color:#f57f20; color:#fff;}
.modal-close-btn{position:absolute; top:11px; right:10px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd;}

/* 사이트맵 */
.sitemap-wrapper{height: 100%;}
.sitemap-wrapper .num{display: block; font-size: 24px; font-weight: 600; color: #800a0a; margin-bottom: 40px;}
.sitemap-wrapper > ul{overflow:hidden; height: 100%;}
.sitemap-wrapper > ul > li{position: relative; float:left; width:20%; height: 100%; text-align:left;}	/* 메뉴 갯수에 맞게 %로 계산, 두줄로 들어갈 경우 height값 설정 */
.sitemap-wrapper > ul > li:before{position: absolute; top: 0; left: -1px; display: block; content: ''; width: 1px; height: 100%; background-color: rgba(255,255,255,0.1);}
.sitemap-wrapper > ul > li:first-child:before{display: none;}
.sitemap-wrapper > ul > li > h2{color:#fff; height: 160px; font-size:38px; line-height: 43px; font-weight:700; padding-right: 10px;}
.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 40px;}
.sitemap-wrapper > ul > li .sitemap-2dep li{margin-top: 30px;}
.sitemap-wrapper > ul > li .sitemap-2dep li:first-child{margin-top: 0;}
.sitemap-wrapper > ul > li .sitemap-2dep a{position: relative; display:block; color:rgba(255,255,255,0.5); font-size:21px; font-weight:300;}
.sitemap-wrapper > ul > li .sitemap-2dep a:before{position: absolute; top: 50%; margin-top: -11px; right: 0; display: block; content: '+'; font-size: 22px; color:rgba(255,255,255,0.5);}
.sitemap-wrapper > ul > li .sitemap-2dep a span{display: inline-block; padding-right: 30px;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{}

@media all and (max-width:1536px){
	.sitemap-wrapper .num{font-size: 22px; margin-bottom: 35px;}
	.sitemap-wrapper > ul > li > h2{font-size:33px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 35px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:19px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a span{padding-right: 25px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 20px; margin-top: -10px;}
}
@media all and (max-width:1366px){
	.sitemap-wrapper .num{font-size: 20px; margin-bottom: 30px;}
	.sitemap-wrapper > ul > li > h2{font-size:30px; line-height: 40px; height: 150px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 25px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:18px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a span{padding-right: 20px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 18px; margin-top: -9px;}
}
@media all and (max-width:1220px){
	/* .sitemap-wrapper .num{font-size: 20px; margin-bottom: 30px;}
	.sitemap-wrapper > ul > li > h2{font-size:25px; line-height: 35px; height: 140px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 20px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:16px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 16px; margin-top: -8px;} */

	.sitemap-wrapper .num{font-size: 20px; margin-bottom: 30px;}
	.sitemap-wrapper > ul > li > h2{font-size:22px; line-height: 32px; height: 130px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 15px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:16px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 16px; margin-top: -8px;}
}
@media all and (max-width:1024px){
	/* .sitemap-wrapper .num{font-size: 20px; margin-bottom: 30px;}
	.sitemap-wrapper > ul > li > h2{font-size:22px; line-height: 32px; height: 130px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 15px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:16px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 16px; margin-top: -8px;} */

	.sitemap-wrapper .num{font-size: 15px; margin-bottom: 20px;}
	.sitemap-wrapper > ul > li > h2{font-size:18px; line-height: 28px; height: 100px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 10px;}
	.sitemap-wrapper > ul > li .sitemap-2dep li {margin-top: 20px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:13px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a span{padding-right: 15px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 13px; margin-top: -6.5px;}
}
/* @media all and (max-width:800px){
	.sitemap-wrapper .num{font-size: 15px; margin-bottom: 20px;}
	.sitemap-wrapper > ul > li > h2{font-size:18px; line-height: 28px; height: 100px;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 10px;}
	.sitemap-wrapper > ul > li .sitemap-2dep li {margin-top: 20px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:13px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a span{padding-right: 15px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 13px; margin-top: -6.5px;}
}
@media all and (max-width:680px){
	.sitemap-wrapper .num{font-size: 13px; margin-bottom: 15px;}
	.sitemap-wrapper > ul > li > h2{font-size:16px; line-height: 24px; height: 100px; -ms-word-break: break-all; word-break: break-all;}
	.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{font-size:11px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a:before{font-size: 11px; margin-top: -5.5px;}
} */






/* -------- Product :: Main -------- */
#prdMainWrapper{width:100%; max-width:1300px; margin:0px auto;
	opacity: 0;
    filter: Alpha(opacity=0);
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
	-webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
#content.active #prdMainWrapper {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
/* Product :: Main :: PC */
.prd-main-list-wrap{width:100%; height:666px;}
.prd-main-list-container > li > a{position:relative; display:block; height:100%;}
.prd-main-img-thum{position:relative; width:100%; height:666px; border-left:1px solid #000; border-right:1px solid #000; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s}
.prd-main-img-cover{position:absolute; top:0; left:0; bottom:0; right:0; opacity:0;filter:Alpha(opacity=0); background-color:#000; background-color:rgba(0,0,0,0.6); visibility:hidden; -webkit-transition:all 0.4s, opacity 0.6s; -moz-transition:all 0.4s, opacity 0.6s; -o-transition:all 0.4s, opacity 0.6s; -ms-transition:all 0.4s, opacity 0.6s; transition:all 0.4s, opacity 0.6s; }
.prd-main-list-container > li.kwicks-collapsed .prd-main-img-cover{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}

.prd-main-txt-thum{position:absolute; top:0; bottom:0; left:0; right:0;}
.prd-main-txt-thum-inner{position:absolute; width: 260px; top: 180px; left:0; right:42px; /* -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s */}
.prd-main-list-tit{position:relative; left:0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
/* -webkit-transition:left 0.3s; -moz-transition:left 0.3s; -o-transition:left 0.3s; -ms-transition:left 0.3s; transition:left 0.3s; 
-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s; */}
.prd-main-list-tit{font-size:36px; line-height:40px; color:#fff; font-weight:700; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.37);}
.prd-main-view-box{position:absolute; left:0; right:0; bottom:75px; width:100%; height:54px; text-align:center; line-height:54px;}
.prd-main-view-box > span{display:inline-block; height: 100%;}
.prd-main-more-box{position:absolute; right:0; width:220px; height:100%; opacity:0;filter:Alpha(opacity=0); visibility:hidden;
	-webkit-transition:all 0.4s, opacity 0.6s; -moz-transition:all 0.4s, opacity 0.6s; -o-transition:all 0.4s, opacity 0.6s; -ms-transition:all 0.4s, opacity 0.6s; transition:all 0.4s, opacity 0.6s; 
}
.prd-main-more-box.active{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
.prd-main-more-box:before{position:absolute; top:0; left:0; display:block; content:""; width:100%; height:0; background:none; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s;}
.prd-main-more-box.active:before{height:100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#006066+0,0e2c3f+100 */
background: rgb(0,96,102); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(0,96,102,1) 0%, rgba(14,44,63,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(0,96,102,1) 0%,rgba(14,44,63,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(0,96,102,1) 0%,rgba(14,44,63,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006066', endColorstr='#0e2c3f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.prd-main-more-box p{position:relative; width:100%; height:499px; height:calc(100% - 180px); padding:90px 0; }
.prd-main-more-box p span{position:absolute; display:inline-block; -ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); transform-origin:center center; min-width:100px; font-size:18px; color:#fff; letter-spacing:-0.2px; padding-top:20px; margin-top:45px;}
.prd-main-more-box p em{position:absolute; bottom:90px; left:0; right:0; text-align:center;}
.prd-main-more-box div{position:relative; padding-top:70px; height:636px; height:calc(100% - 70px);}
.prd-main-more-box div .prd-main-category-list{position:relative; padding-left:30px; opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s; transition:all 0.4s;}
.prd-main-more-box div .prd-main-category-list > li{margin-top: 30px;}
.prd-main-more-box div .prd-main-category-list > li:first-child{margin-top: 0;}
.prd-main-more-box div .prd-main-category-list > li a{font-size:17px; line-height:28px; font-weight: 400; color:#fff; padding-bottom: 7px; border-bottom: 1px solid transparent; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s;}
.prd-main-more-box div .prd-main-category-list > li a:hover{border-color: #fff;}
.prd-main-more-box div em{position:absolute; bottom:90px; left:0; right:0; text-align:center;}
.prd-main-more-box div em .view-more{margin-top: 0; opacity:0;filter:Alpha(opacity=0); visibility:hidden; transition-delay:0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s;}
.prd-main-more-box.active div .prd-main-category-list{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}

.prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-inner, .prd-main-list-container li.selected .prd-main-txt-thum-inner{width: 295px; top: 70px; left:0; right:0;}
.prd-main-list-container li.kwicks-expanded .prd-main-list-tit, .prd-main-list-container li.selected .prd-main-list-tit{width: 100%; left:0; text-align: center; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
.prd-main-list-container li.kwicks-expanded .prd-main-view-box, .prd-main-list-container li.selected .prd-main-view-box{opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
.prd-main-list-container li.kwicks-expanded .prd-main-more-box div em .view-more, .prd-main-list-container li.selected .prd-main-more-box div em .view-more{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}

.prd-main-list-container li.kwicks-collapsed .prd-main-txt-thum-inner, .prd-main-list-container li.noselected .prd-main-txt-thum-inner{top: 150px; width: 186px;}
.prd-main-list-container li.kwicks-collapsed .prd-main-list-tit, .prd-main-list-container li.noselected .prd-main-list-tit{text-align: left; font-size: 22px;}
.prd-main-list-container li.kwicks-collapsed .prd-main-view-box > span, .prd-main-list-container li.noselected .prd-main-view-box > span{font-size:21px;}

/* 기본 셀렉트 */
.prd-main-list-container li.selected{width: 39.2% !important; position: relative !important;}
.prd-main-list-container li.noselected{width: 15.2% !important; position: relative !important; left: 0 !important;}
.prd-main-list-container li.noselected .prd-main-img-cover {visibility: visible; opacity: 1 !important; filter: Alpha(opacity=100) !important;}

/* Product :: Main :: M */
.prd-main-list-wrap-m{display:none;}

@media all and (max-width:1320px){
	#prdMainWrapper{width:auto; padding:0;}
	/* .prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-inner{right:80px; padding-right:0;}*/
}

@media all and (max-width:1220px){
	/* Product :: Main :: PC */
	.prd-main-txt-thum-inner, .prd-main-list-container li.kwicks-collapsed .prd-main-txt-thum-inner, .prd-main-list-container li.noselected .prd-main-txt-thum-inner{width: 100%;}
	.prd-main-txt-thum-inner {top: 140px;}
	.prd-main-list-tit{font-size:22px; line-height:28px;}
	.prd-main-view-box{height:56px; line-height:56px;}
	.prd-main-view-box > span{font-size:21px;}
	.prd-main-more-box{width:134px;}
	.prd-main-more-box p span{padding-top:45px;}
	
	.prd-main-more-box div .prd-main-category-list{padding:0 15px;}
	.prd-main-more-box div .prd-main-category-list > li a{font-size:13px; line-height:20px;}
	.prd-main-more-box div em{}
	.prd-main-more-box div em .view-more{width: 80%; margin: 0 auto;}
	
	.prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-inner, .prd-main-list-container li.selected .prd-main-txt-thum-inner{width: calc(100% - 134px); top: 70px;}

	.prd-main-list-container li.kwicks-collapsed .prd-main-txt-thum-inner, .prd-main-list-container li.noselected .prd-main-txt-thum-inner{top: 120px;}
	.prd-main-list-container li.kwicks-collapsed .prd-main-list-tit, .prd-main-list-container li.noselected .prd-main-list-tit{font-size: 18px;}
}

@media all and (max-width:800px){
	#prdMainWrapper {padding: 0;}
	/* Product :: Main :: PC */
	.prd-main-list-wrap{display:none;}
	
	/* Product :: Main :: M */
	.prd-main-list-wrap-m{display:block; width:100%;}
	.prd-main-list-container-m{width:100%;}
	.prd-main-list-container-m > li{position:relative; float:left; width:48.79%; border:1px solid #ddd; margin-bottom:2%;}
	.prd-main-list-container-m > li:nth-child(even){float:right;}
	.prd-main-img-thum-m{}
	.prd-main-img-thum-m img{max-width:100%;}
	.prd-main-list-tit-m{position:absolute; top:50%; left:0; right:35px; text-align:center; font-size:16px; line-height:18px; color:#fff; font-weight:600; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.37); margin-top:-9px;}

	.prd-main-list-container-m > li .prd-main-more-box{width:35px; top:0; opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
	.prd-main-list-container-m > li .prd-main-more-box p{height:calc(100% - 25px); padding:10px 0 15px 0;}
	.prd-main-list-container-m > li .prd-main-more-box p span{font-size:13px; margin-top:25px; letter-spacing:0px; padding-top:63px;}
	.prd-main-list-container-m > li .prd-main-more-box p em{bottom:18px;}
	.prd-main-list-container-m > li .prd-main-more-box:before{height:100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#006066+0,0e2c3f+100 */
	background: rgb(0,96,102); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(0,96,102,1) 0%, rgba(14,44,63,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(0,96,102,1) 0%,rgba(14,44,63,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(0,96,102,1) 0%,rgba(14,44,63,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006066', endColorstr='#0e2c3f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	}

@media all and (max-width:480px){
	
}


/* ****************** Product ********************** */
#prdWrapper{position:relative; padding-left: 330px; width: calc(100% - 330px); height: 670px; overflow:hidden;
	opacity: 0;
    filter: Alpha(opacity=0);
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
	-webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
#content.active #prdWrapper {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
/* ***** 제품 이미지 ***** */
#prdContainer{position:relative; width: 100%;}
ul.prd-main-img{width: 100%;}
ul.prd-main-img li{float: left;}
ul.prd-main-img li span{display: block; position: relative; width: 100%; height: 670px; overflow: hidden;}
ul.prd-main-img li img{position: absolute; top: 50%; margin-top: -335px; left: 50%; margin-left: -485px; width: 970px; height: 670px;}
/* ***** 제품 설명 ***** */
#prdMenuSideBar{position:absolute; top:0; left:0; bottom:0; width:330px; padding:65px 40px 0; z-index:99; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#800a0a+0,156a6d+50,0f3143+100 */
background: rgb(26,151,142); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(26,151,142,1) 0%, rgba(21,106,109,1) 50%, rgba(15,49,67,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(26,151,142,1) 0%,rgba(21,106,109,1) 50%,rgba(15,49,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(26,151,142,1) 0%,rgba(21,106,109,1) 50%,rgba(15,49,67,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800a0a', endColorstr='#0f3143',GradientType=0 ); /* IE6-9 */}
/* 제품명 */
.prd-sidebar-tit{padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,0.3); text-align: center; font-size:32px; line-height:1.1; color:#fff; font-weight:700;}
.prd-info-menu-wrapper{width: 100%;}
/* 제품설명 */
.prd-info-list{}
.prd-info-list p{margin-top: 37px; font-size: 17px; line-height: 1.2; font-weight: 300; letter-spacing: -0.65px; color: #fff; text-align: center;}
.prd-info-list p .tit{display: inline-block; padding: 0 10px; height: 25px; line-height: 25px; margin: 0 auto; margin-bottom: 10px; background-color: #136e6a;}
/* 제품리스트 */
.prd-menu-list{width:calc(100% - 80px); padding: 0 40px; position: absolute; left: 0; bottom: 55px;}
.prd-menu-list li{margin-top: 6px;}
.prd-menu-list li:first-child{margin-top: 0;}
.prd-menu-list li a{position: relative; display:block; font-size:17px; line-height:24px; color:#fff; padding: 12px 40px; border:1px solid rgba(255,255,255,0.5); background-color: transparent; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; overflow: hidden;}
.prd-menu-list li a span{display: inline-block; width: calc(100% - 20px);}
.prd-menu-list li a i{position: absolute; top: 50%; margin-top: -8px; right: 40px; font-size: 16px;}

@media all and (min-width: 800px){
	.prd-menu-list li:hover a{background-color: rgba(255,255,255,0.3);}
}

/* ***** 제품 닫기 버튼 ***** */
.prd-menu-open-close-btn{position:absolute; top:0; right:0; width:82px; height:82px; text-align:center; background:#060606; z-index: 1000;}
.prd-menu-open-close-btn > i{display:block; font-size:24px; color:#fff;}
.prd-menu-open-close-btn > span{display:inline-block; font-size:12px; color:#fff; padding-top:10px;}
/* ***** 슬라이드 dot ***** */
ul.prd-main-img .slick-dots{position: absolute; width: 100%; bottom: 34px; left: 0; text-align: center; z-index: 1000;}
ul.prd-main-img .slick-dots li{display: inline-block; margin: 0 10px; float: none; position: static; width: auto; height: auto;}
ul.prd-main-img .slick-dots li a{display: block; position: relative; width: 84px; height: 0; padding-top: 69%; cursor: pointer;}
ul.prd-main-img .slick-dots li a img{width: 100%; height: 100%; position: absolute; top: 0; margin-top: 0; left: 0; margin-left: 0;}
ul.prd-main-img .slick-dots li a:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: calc(100% - 4px); height: calc(100% - 4px); border: 2px solid transparent; z-index: 1; -webkit-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -o-transition: border-color 0.3s; transition: border-color 0.3s;}
ul.prd-main-img .slick-dots li.slick-active a:before{border-color: #fff;}
/* ***** 슬라이드 arrow ***** */
ul.prd-main-img .slick-arrow{position: absolute; bottom: 50px; z-index: 1001;}
ul.prd-main-img .slick-arrow i{font-size: 24px; color: #fff;}
ul.prd-main-img .slick-prev{left: 50%; margin-left: -180px;}
ul.prd-main-img .slick-next{right: 50%; margin-right: -180px;}


@media all and (max-width:1024px){
	#prdWrapper{padding-left: 0; width:auto; height: auto;}
	/* ***** 제품 이미지 ***** */
	ul.prd-main-img li{float: left; width: 100%;}
	ul.prd-main-img li span{position: relative; width: 100%; height: 0; padding-top: 69%;}
	ul.prd-main-img li span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0; margin-top: 0;}
	/* ***** 제품 설명 ***** */
	#prdMenuSideBar{position:relative; bottom:auto; right:0; width:100%; padding: 80px 40px;}
	/* 제품명 */
	.prd-sidebar-tit{line-height: 1.2; font-size: 32px;}
	/* 제품설명 */
	.prd-info-menu-wrapper{}
	.prd-menu-list {margin: 40px auto 0; max-width: 255px; width: 100%; padding: 0; position: static; bottom: auto;}
	/* ***** 제품 닫기 버튼 ***** */
	.prd-menu-open-close-btn{width:80px; height:80px; z-index: 100;}
}

@media all and (max-width:800px){
	#prdMenuSideBar {padding: 60px 30px;}
	.prd-main-img{left:0; margin-left:0; max-width:100%;}
	.prd-sidebar-tit{font-size:20px; line-height: 1.2;}
	/* 제품설명 */
	.prd-info-menu-wrapper{top: 45px;}
	#prdWrapper.open .prd-info-menu-wrapper{height:430px;}
	.prd-info-list p{margin-top: 20px; font-size: 14px; line-height: 1.2;}
	.prd-info-list p .tit{display: inline-block; padding: 0 5px; height: 25px; line-height: 25px; margin-bottom: 5px;}
	/* 제품리스트 */
	.prd-menu-list {margin-top: 20px; width: calc(100% - 40px); padding: 0 20px;}
	.prd-menu-list li{margin-top: 3px;}
	.prd-menu-list li a{font-size:14px; line-height:19px; padding: 10px 20px;}
	.prd-menu-list li a span{display: inline-block; width: calc(100% - 20px);}
	.prd-menu-list li a i{margin-top: -8px; right: 20px; font-size: 16px;}
	/* ***** 제품 닫기 버튼 ***** */
	.prd-menu-open-close-btn{width:60px; height:60px;}
	.prd-menu-open-close-btn > i {font-size:18px;}
	.prd-menu-open-close-btn > span{padding-top:3px;}
	/* ***** 슬라이드 dot ***** */
	ul.prd-main-img .slick-dots{bottom: 20px;}
	ul.prd-main-img .slick-dots li{margin: 0 7px;}
	ul.prd-main-img .slick-dots li a{width: 60px;}
	/* ***** 슬라이드 arrow ***** */
	ul.prd-main-img .slick-arrow{bottom: 30px;}
	ul.prd-main-img .slick-arrow i{font-size: 20px;}
	ul.prd-main-img .slick-prev{margin-left: -140px;}
	ul.prd-main-img .slick-next{margin-right: -140px;}
}

@media all and (max-width:480px){
	#prdMenuSideBar {padding: 45px 20px;}
	.prd-sidebar-tit{font-size:16px;}
	/* ***** 제품 닫기 버튼 ***** */
	.prd-menu-open-close-btn{width:45px; height:45px;}
	.prd-menu-open-close-btn > i {font-size:16px;}
}