@charset "utf-8";


/* ****************** LAYOUT ********************** */
@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');


@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}


body, table, th, td, button, select, input, textarea {
	font-family:'GMarketSans', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
}
:root{
	--main-color: #58bca5;
	--area-width: 1300px;
	--area-padding: 30px;
	--full-height: 100vh;
	--border:#e5e7eb;
    --bg:#fafafa;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family1:  'GMarketSans';
	--font-family2:  'pretendard', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }
.area{ max-width:1300px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:1510px; margin:0px auto; }
.pc_br{display:block;}
.m_br{display:none;}
/* ****************** HEADER ********************** */
#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
}	/* 배경위에 헤더가있으면 absolute변경 후 headerInnerWrap 배경삭제 */
#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; }		/* padding값 적절히 바꿔주세요 */
#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 -------- */
.header-util-box{position:absolute; top:0; right:0; z-index:100;}

/* Header :: 언어선택 */
.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;}


/* Header :: 사이트맵(기본형 or 커스텀) */
.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;}

/* -------- Header :: GNB(PC) -------- */
.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:100%; /*width: calc(100% - 300px); padding-right: 300px;*/ 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 15px; text-align:left; color:#fff; font-size:18px; font-weight:500;}
/*#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: #58bca5; -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: #58bca5;}
#gnb .gnb-wrapper > ul > li > a:hover > span:before, #gnb .gnb-wrapper > ul > li.on > a > span:before{width: 100%; margin-left: -50%;}

/* GNB :: 2차 각각메뉴 */
#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.25px; color: #535353; font-weight:500; -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: #58bca5;}


/* 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: #58bca5;}
#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: #58bca5;}
#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: #58bca5;}
.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: #58bca5;}
	#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:#0c1015;}
#footerInner{position:relative; }
.footer-left-con{float:left; width: 66%;}
.footer-right-con{float:right; padding-left: 4%; width: calc(30% - 1px); border-left: 1px solid rgba(255,255,255,0.1);}

/* -------- FOOTER :: 하단 -------- */
#footerBottom{padding:85px 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:500; letter-spacing: -0.25px; 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; font-weight:500;}
.footer-address span{display:block;}
.footer-address span em{display: inline-block; margin: 0 15px;}
.footer-address a{color:inherit}
.footer-copyright{font-size:12px; color: rgba(255,255,255,0.3); font-weight:300;}

.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:560px; }
#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%; padding-bottom:0; height:calc(100% - 25px); 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
}
#visual .visual-sub-txt{
	display:inline-block;
	margin-bottom:10px;
	font-size:14px; 
	font-weight:500; 
	padding-bottom:7px;
	letter-spacing:0.5px;
	border-bottom:1px solid #fff;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}

/* 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:18px; 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 :: 서브메뉴 */
#topMenu01{position:absolute; width:100%; bottom:0px; left:0; height:80px; z-index:1; }
#topMenu01 .side-menu-inner{text-align:center; width:100%; height:80px; background-color: #333; background-color:rgba(0,0,0,0.7);}
#topMenu01 .side-menu-inner ul{display:inline-block; *display:inline;*zoom:1;}
#topMenu01 .side-menu-inner ul li{display:inline-block; width:210px;} /* max-width 자유롭게 수정 */
#topMenu01 .side-menu-inner ul li{margin-left:-4px}
#topMenu01 .side-menu-inner ul li:first-child{margin-left:0}
#topMenu01 .side-menu-inner ul li > a{
	display:block; 
	display:table; 
	position:relative;
	width:100%;
	height:80px; 
	line-height:1.2; 
	color:#ccc; 
	font-size:16px; 
	letter-spacing:-0.5px; 
	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;
}
#topMenu01 .side-menu-inner ul li > a:before{position:absolute; top:25px; bottom:25px; left:0; width:1px; background-color:#fff; content:""; opacity:0.15;filter:Alpha(opacity=15);}
#topMenu01 .side-menu-inner ul li:first-child > a:before{display:none;}
#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 25px; }
#topMenu01 .side-menu-inner ul li > a .gnb-icon{display:none;}
#topMenu01 .side-menu-inner ul li > a:hover{color:#fff;}
#topMenu01 .side-menu-inner ul li.on > a{color:#000; font-weight:500; background-color:#fff;}
#topMenu01 .side-menu-inner ul li.on + li > a:before{display:none;}

#topMenu01 .side-menu-inner .sub-menu-company  li {width:150px;}
@media all and (max-width:1220px){
	#topMenu01 .side-menu-inner .sub-menu-company {width:100%;}
	#topMenu01 .side-menu-inner .sub-menu-company  li {width:12.5%;}
}

/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */
@media all and (min-width:1221px){
	.fixed-sub-menu.fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;}
}

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



/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content{padding:100px 0}



/* ****************** 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: #58bca5; 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/#58bca5+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='#58bca5', 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;}
}

/* quickmenu */
.quickmenu{ position: fixed; bottom:5rem;right:3rem;z-index: 7000;}
.quickmenu li {margin-top:10px; text-align:right;}
.quickmenu li a {display:inline-block;width: 38px;height: 38px;border-radius:19px; font-size: 14px; overflow:hidden;position:relative;vertical-align:central;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.quickmenu li a span {font-size:0;line-height:0;text-indent:-999px;width:0;}
.quickmenu li a i { display:inline-block;width:38px;height:38px;color: #fff; font-size: 16px;position:absolute;left: 0px;top:0; text-align: center; line-height: 38px}
.quickmenu li a:before {display:inline-block;width:38px;height:38px;content:'';position:absolute;left:0;top:0;background-repeat:no-repeat !important;background-position: 50% 50% !important; background-size: 25px auto}
/*
.quickmenu li:nth-child(1) a {background-color:#ffbb05;}
.quickmenu li:nth-child(1) a:before {background-image:url('../img/evt-icon-w.png');background-color:#ffbb05; background-size: 21px auto}

.quickmenu li:nth-child(2) a {background-color:#3e2a2e;}
.quickmenu li:nth-child(2) a:before {background-image:url('../img/ico_kakao.svg');background-color:#3e2a2e;}

.quickmenu li:nth-child(3) a {background-color:#2dc236;}
.quickmenu li:nth-child(3) a:before {background-image:url('../img/ico_naver_w.svg'); background-color: #2dc236; }

.quickmenu li:nth-child(4) a {background-color:#d03b8e;}
.quickmenu li:nth-child(4) a:before {background-image:url('../img/instagram-ico.svg'); background-color: #d03b8e; background-size: 35px auto}
*/
.quickmenu li:nth-child(1) a {background-color:#333;}
.quickmenu li:nth-child(1) a:before {background-image:url('../img/location.png');background-color:#333; background-size: 21px auto}

.quickmenu li:nth-child(3) a {background-color:#333;}
.quickmenu li:nth-child(3) a:before {background-image:url('../img/blog.png');background-color:#333; background-size: 38px auto}

.quickmenu li:nth-child(2) a {background-color:#333 ;}
.quickmenu li:nth-child(2) a:before {background-image:url('../img/ico_naver_w.svg'); background-color: #333; }

.quickmenu li:nth-child(4) a {background-color:#333;}
.quickmenu li:nth-child(4) a:before {background-image:url('../img/instagram-ico.svg'); background-color: #333; background-size: 35px auto}

.quickmenu li a:hover {padding-left: 38px;width:auto;min-width: 38px;box-shadow:0 6px 20px rgba(0, 0, 0, 0.1);}
.quickmenu li a:hover:before,
.quickmenu li a:hover i{ left:0px;}
.quickmenu li a:hover span {display:inline-block;width:auto;padding-right:1.5em;font-size: 13px;font-weight:400 !important;line-height: 36px;text-indent:0;color:#fff;}

.quickmenu-bottom {display:none !important}
.quickmenu-bottom  {position: fixed; bottom:5rem;right:3rem;z-index: 7000;}

.quickmenu-bottom li {margin-top:10px; text-align:right;}
.quickmenu-bottom li a {display:inline-block;width: 38px;height: 38px;border-radius:19px;overflow:hidden;position:relative;vertical-align: top;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.quickmenu-bottom li a span {font-size:0;line-height:0;text-indent:-999px;width:0;}
.quickmenu-bottom li a i { display:inline-block;width:38px;height:38px;color: #fff; font-size: 16px;position:absolute;left: 0px;top:0; text-align: center; line-height: 36px}
.quickmenu-bottom li a:before {display:inline-block;width:38px;height:38px;content:'';position:absolute;left:0;top:0;background-repeat:no-repeat !important;background-position: 50% 50% !important; background-size: 25px auto}
.quickmenu-bottom li:nth-child(1) a {background-color:#000 ;}
.quickmenu-bottom li:nth-child(1) a:before  {background-image:url('../img/location.png'); background-color: #333333; background-repeat:no-repeat; background-size:22px;}
.quickmenu-bottom li:nth-child(2) a {background-color:#000 ;}
.quickmenu-bottom li:nth-child(2) a:before  {background-image:url('../img/ico_kakao.svg'); background-color: #cdb88d; background-repeat:no-repeat; background-size:25px;}
.quickmenu-bottom li:nth-child(3) a {background-color:#000 ;}
.quickmenu-bottom li:nth-child(3) a:before {background-image:url('../img/ico_naver_w.svg'); background-color: #000; }
.quickmenu-bottom li:nth-child(4) a {background-color:#000 ;}
.quickmenu-bottom li:nth-child(4) a:before {background-image:url('../img/instagram-ico.svg'); background-color: #302e2e;background-repeat:no-repeat; background-size:30px;}



@media only screen and (max-width: 1200px){ 

	.quickmenu{right:-1px; top:inherit; bottom: 0; width: calc(100% + 2px ); background-color: #fff; border-top: 1px solid #383b3e; }
	.quickmenu li {margin:0px;text-align: center;float: left;width: 25%;}
	.quickmenu li:nth-child(2) {position: relative;}
	.quickmenu li:nth-child(2):before,
	.quickmenu li:nth-child(2):after{ content: ""; width: 1px; height: 50px; background-color: rgba(0,0,0,.21); position: absolute; top:50%; margin-top: -25px}
	.quickmenu li:nth-child(2):before{ left: 0}
	.quickmenu li:nth-child(2):after{ right: 0}
	.quickmenu li a {width: 100%;height: 50px;border-radius:0;background-color: transparent !important;}
	.quickmenu li a span {display:inline-block;width:auto;font-size: 14px;font-weight:400 !important;line-height: 50px;text-indent:0;color:#666; vertical-align: top; padding-right: 15px;color: #fff;}
	.quickmenu li a i,
	.quickmenu li a:before{position:relative; left:inherit; top:inherit;vertical-align: top;width: 35px; height: 50px;line-height:50px; font-size: 18px; color: #fff}

	.quickmenu li a:hover {padding-left: 0;width:100%;min-width:inherit;box-shadow:none; line-height: 45px; }
	.quickmenu li a:hover:before,
	.quickmenu li a:hover i{ left:inherit;width: 35px; height: 50px;line-height:50px;}
	.quickmenu li a:hover span {line-height: 50px; width: auto; font-size: 14px;padding-right: 15px; color: #000}

	.quickmenu li:nth-child(1),
	.quickmenu li:nth-child(1) a,
	.quickmenu li:nth-child(1) a:before {background-color: #000;}
    .quickmenu li:nth-child(3),
	.quickmenu li:nth-child(3) a,
	.quickmenu li:nth-child(3) a:before  { background-color: #333;}
	.quickmenu li:nth-child(3) a:hover span, .quickmenu li:nth-child(2) a span {color:#fff}
	.quickmenu li:nth-child(2),
	.quickmenu li:nth-child(2) a,
	.quickmenu li:nth-child(2) a:before {background-color: #35ae3c}	
	.quickmenu li:nth-child(4),
	.quickmenu li:nth-child(4) a{ background:radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), 
    radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),  radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), 
    linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);}
	.quickmenu li:nth-child(4) a:before {background:url('../img/instagram-ico.svg') no-repeat}


	.quickmenu-bottom{right:-1px; top:inherit; bottom: 0; width: calc(100% + 2px ); background-color: #fff; border-top: 1px solid #383b3e;display:block !important}
	.quickmenu-bottom li {margin:0px;text-align: center;float: left;width: 25%;}
	.quickmenu-bottom li a {width: 100%;height: 50px;border-radius:0;background-color: transparent !important;}
	.quickmenu-bottom li a span {display:inline-block;width:auto;font-size: 14px;font-weight:400 !important;line-height: 50px;text-indent:0;color:#666; vertical-align: top; padding-right: 15px;color: #fff;}
	.quickmenu-bottom li a i,
	.quickmenu-bottom li a:before{position:relative; left:inherit; top:inherit;vertical-align: top;width: 35px; height: 50px;line-height:50px; font-size: 18px; color: #fff}

	.quickmenu-bottom li a:hover {padding-left: 0;width:100%;min-width:inherit;box-shadow:none; line-height: 45px; }
	.quickmenu-bottom li a:hover:before,
	.quickmenu-bottom li a:hover i{ left:inherit;width: 35px; height: 50px;line-height:50px;}
	.quickmenu-bottom li a:hover span {line-height: 50px; width: auto; font-size: 14px;padding-right: 15px; color: #000}

	/*.quickmenu-bottom li:nth-child(1),
	.quickmenu-bottom li:nth-child(1) a,
	.quickmenu-bottom li:nth-child(1) a:before {background-color: #333333;}
	.quickmenu-bottom li:nth-child(2),
	.quickmenu-bottom li:nth-child(2) a,
	.quickmenu-bottom li:nth-child(2) a:before {background-color: #cdb88d}	
	.quickmenu-bottom li:nth-child(3),
	.quickmenu-bottom li:nth-child(3) a,
	.quickmenu-bottom li:nth-child(3) a:before {background-color: #000}	
	.quickmenu-bottom li:nth-child(4),
	.quickmenu-bottom li:nth-child(4) a,	
	.quickmenu-bottom li:nth-child(4) a:before {background-color: #302e2e}	*/
	
	.quickmenu-bottom li:nth-child(1),
	.quickmenu-bottom li:nth-child(1) a,
	.quickmenu-bottom li:nth-child(1) a:before {background-color: #333333;}
	.quickmenu-bottom li:nth-child(2),
	.quickmenu-bottom li:nth-child(2) a,
	.quickmenu-bottom li:nth-child(2) a:before {background-color: #333}	
	.quickmenu-bottom li:nth-child(3),
	.quickmenu-bottom li:nth-child(3) a,
	.quickmenu-bottom li:nth-child(3) a:before {background-color: #333}	
	.quickmenu-bottom li:nth-child(4),
	.quickmenu-bottom li:nth-child(4) a,	
	.quickmenu-bottom li:nth-child(4) a:before {background-color: #333}

  }

@media only screen and (max-width: 768px){ 

	.quickmenu li a:hover {padding-left:0;width:100%;min-width: 100%;box-shadow:none}
	.quickmenu li a:hover,
	.quickmenu li a  {height: 50px;background-color: transparent !important;}
	.quickmenu li:nth-child(2):before,
	.quickmenu li:nth-child(2):after { height: 50px}
	.quickmenu li a span,
	.quickmenu li a:hover span{display:block;width:100%;font-size: 12px;line-height: 20px;height: 20px;padding-right: 0px;position: absolute;left: 0;top: 26px;color: #fff;}
	.quickmenu li a i,
	.quickmenu li a:before,
	.quickmenu li a:hover i,
	.quickmenu li a:hover:before {position:relative;left:0;top:2px;width: 100%;height: 26px;line-height:26px;font-size: 16px;}
	
	.quickmenu-bottom li a:hover {padding-left:0;width:100%;min-width: 100%;box-shadow:none}
	.quickmenu-bottom li a:hover,
	.quickmenu-bottom li a  {height: 50px;background-color: transparent !important;}
	.quickmenu-bottom li a span,
	.quickmenu-bottom li a:hover span{display:block;width:100%;font-size: 12px;line-height: 20px;height: 20px;padding-right: 0px;position: absolute;left: 0;top: 26px;color: #fff;}
	.quickmenu-bottom li a i,
	.quickmenu-bottom li a:before,
	.quickmenu-bottom li a:hover i,
	.quickmenu-bottom li a:hover:before {position:relative;left:0;top:2px;width: 100%;height: 26px;line-height:26px;font-size: 16px;}
}