@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2018-01-16
******************************************************** */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,600');
@import url("/css/fonts/font.css");	/* 나눔고딕 */ 

body { background-color:#fff; }
#wrap {overflow:hidden; width:100%;position:relative; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
/*body, table, th, td, button, select, input {
	font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}*/
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%;position:relative; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */

/* ****************** 공통클래스 ********************** */
.area{ max-width:1220px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:1638px; margin:0px auto; }
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:inherit; color:inherit; vertical-align:middle;}
.text-ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.table-layout{display:table; width:100%; height:100%; }
.table-cell-layout{display:table-cell; width:100%; height:100%; vertical-align:middle;}
.over-img{overflow:hidden;}
.over-img img{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.font-poppin{font-family: 'Poppins', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
a:hover .over-img img{
	-ms-transform: scale(1.1) rotate(0.02deg);
	  -o-transform: scale(1.1) rotate(0.02deg);
	  -moz-transform: scale(1.1) rotate(0.02deg);
	  -webkit-transform: scale(1.1) rotate(0.02deg);
	  transform: scale(1.1) rotate(0.02deg);
}

/* ****************** HEADER ********************** */
#header{/* position:fixed; */ position:absolute;  top:0px; left:0px; width:100%; height:132px; background-color: rgba( 0, 0, 0, 0.2 ); z-index:99; -webkit-transition:top 0.4s;-moz-transition:top 0.4s;-o-transition:top 0.4s;-ms-transition:top 0.4s;transition:top 0.4s}
#headerInner{position:relative; max-width:1770px; margin:0px auto; height:100%;}
#header .logo{position:absolute; top:22px; left:15px; z-index:100;}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:absolute; top:50%; right:15px; z-index:100; padding-right:58px; margin-top:-25px; }

/* Header :: 언어선택 */
.header-lang {position:relative; float:left; width:150px; height:45px;z-index:100;} /* display:block; border:1px solid #949393; -webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;*/
.header-lang .lang-open-btn {overflow:hidden; position:relative;  height:100%; padding:0 25px; font-size:16px; line-height: 45px; color:#eee; letter-spacing:-0.5px; font-weight:500;}
.header-lang .lang-open-btn i {position:absolute; top:0px; right:20px; line-height:45px; vertical-align:middle; font-size:14px;}
.header-lang > ul {position:absolute; top:30px; left:-1px; z-index:10; width:100%; border:1px solid #5c5c5c; background-color:#fff; 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;}
.header-lang > ul > li > a{display:block; padding:0 10px; font-size:10px; line-height: 30px; color:#333;}
.header-lang > ul > li > a:hover{background-color:#fff; background-color:rgba(255,255,255,0.7); }
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px;}
.header-lang.open > ul {opacity:1;filter:Alpha(opacity=100); visibility:visible;}



/* -------- Header :: GNB(PC) -------- */
/* gnb 2depth BG */
#gnbBg.open{opacity:1.0;filter:Alpha(opacity=100);}
.gnb-overlay-bg{position:fixed; visibility:hidden; opacity:0;filter:Alpha(opacity=0); top:132px; left:0; width:100%; height:0; background-color:#333; background-color:rgba(0,0,0,0.70);-webkit-transition:all 0s 0s;-moz-transition:all 0s 0s;-o-transition:all 0s 0s;-ms-transition:all 0s 0s;transition:all 0s 0s}
.gnb-overlay-bg.show{
	visibility:visible; 
	height:100%;
	opacity:1.0;filter:Alpha(opacity=100); 
	-webkit-transition:all 0.3s 0.1s;
	-moz-transition:all 0.3s 0.1s;
	-o-transition:all 0.3s 0.1s;
	-ms-transition:all 0.3s 0.1s;
	transition:all 0.3s 0.1s
}
.nav-on-icon{display:none; position:absolute; top:126px; left:50%; height:5px !important; background-color:#ec2227; width:120px; z-index:98}
/* 1차 */
#gnb{position:absolute; top:0px; left:0px; width:100%; height:131px; z-index:99; }
#gnb:after{content:""; position:absolute; top:131px; left:0px; width:100%; height:1px; background-color:#fff; background-color:rgba(255,255,255,0.4); }
#gnb > ul{width:100%; text-align:center; margin:0px auto;}
#gnb > ul > li{display:inline-block; margin-left:-4px;}
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{
	position:relative; display:block; height:131px; line-height:126px; color:#fff; font-size:16px; letter-spacing:1.45px; padding:0 46px; font-weight:500; z-index:99;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
#gnb > ul > li > a > span{display:block; padding:0 18px; /* height:126px; line-height:126px;  border-bottom:5px solid transparent; */}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color:#ec2227;}
#gnb > ul > li > a:hover > span, #gnb > ul > li.on > a span{border-bottom-color:#ec2227}






/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{width:100%; height:230px;}
#visual .visual-txt{position:relative; padding-top:78px; text-align:center; letter-spacing:-0.5px; color:#fff;}
#visual .visual-txt:before{content:""; display:block; width:1px; height:36px; position:absolute; top:0px; left:50%;background-color:#fff;}
#visual .visual-sub-txt{font-size:15px; font-weight:300; text-transform:uppercase; } 
#visual .visual-tit{font-weight:400; font-size:36px; padding:20px 0 30px; }
/*  SUB LAYOUT :: 상단정보 */
#middleArea{padding:50px 0 0;}
#contentInfoCon{ position:relative; margin-bottom:20px; border-bottom:1px solid #d1d1d1; margin-bottom:62px;}
#contentInfoCon .content-tit{color:#272727; font-size:40px; letter-spacing:-3.5px; font-weight:500; text-align:center;}
#contentInfoCon .content-tit span{position:relative; display:inline-block; padding:0 0 52px 0; }
#contentInfoCon .content-tit span:after{display:block; width:145px; height:1px; position:absolute; bottom:-1px; left:50%; margin-left:-72px; content:""; background-color:#050708;}
#contentInfoCon .content-tit span b{font-weight:500; color:#00a1e4;}
/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
.sub-page-controls-btn{position:absolute; top:0; height:55px; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} /* 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 .sub-page-name{display:inline-block; width:55px; height:55px; line-height:55px; font-size:14px; font-weight:400; text-align:center; color:#fff; vertical-align:middle; background:#404041; 
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.sub-page-controls-btn span{display:inline-block; }
.sub-page-controls-btn span i{margin-top:-2px; font-size:30px;}
.sub-page-controls-btn.sub-prev-page-btn span{margin-right:15px;}
.sub-page-controls-btn.sub-next-page-btn span{margin-left:15px;}
.sub-page-controls-btn.sub-prev-page-btn:hover{margin-left:-10px}
.sub-page-controls-btn.sub-next-page-btn:hover{margin-right:-10px}

/*  SUB LAYOUT ::  상단 컨텐츠 */
#container{padding-top:132px;e}
#container.product-container{padding-top:0;}

/*  SUB LAYOUT ::  상단 메뉴 */
#topMenu{position:relative; height:64px; background-color:#fff; }
#topMenu .top-menu-inner{width:100%; height:64px; background-color:#00a1e4;}
#topMenu .location-to-home-btn{float:left; width:62px; height:64px; left:0px; top:0px; text-align:center; border-right:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2);}
#topMenu .location-to-home-btn i{color:#fff; font-size:28px; line-height:64px;}
#topMenu .menu-location{position:relative; float:left; min-width:262px; border-right:1px solid rgba(255,255,255,0.2);}
#topMenu .menu-location > .cur-location{position:relative; display:block; height:64px; padding:0 56px 0 25px; }
#topMenu .menu-location > .cur-location span{line-height:64px; color:#fff; font-weight:400; font-size:19px; letter-spacing:-1.5px; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#topMenu .menu-location > .cur-location .arrow{position:absolute; top:50%; right:20px; margin-top:-4px; }
#topMenu .menu-location > .cur-location.open .arrow{transform:rotate(-180deg);}
#topMenu .menu-location.last-menu-location > .cur-location.open .arrow{transform:rotate(0deg);}
#topMenu .menu-location.location1 > .cur-location{opacity:0.7;filter:Alpha(opacity=70);}
#topMenu .menu-location.location1 > .cur-location.open{opacity:1.0;filter:Alpha(opacity=100);}
#topMenu .menu-location.last-menu-location > .cur-location{background-color:#007fb4}
#topMenu .menu-location.last-menu-location > .cur-location .arrow{display:none;}
#topMenu .menu-location .location-menu-con{display:none; position:absolute; top:64px; left:-1px; width:calc(100% - 1px); border:1px solid #b4bbbb; border-top:0; background-color:#fff; z-index:11; }
#topMenu .menu-location .location-menu-con li{border-top:1px solid #e5e5e5}
#topMenu .menu-location .location-menu-con li:first-child{border-top:0;}
#topMenu .menu-location .location-menu-con li a{
	display:block; height:63px; line-height:63px;padding:0 25px; font-size:16px; font-weight:400; letter-spacing:-1.65px; color:#404041;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
	white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
#topMenu .menu-location .location-menu-con li.on{position:relative;}
#topMenu .menu-location .location-menu-con li.on a,
#topMenu .menu-location .location-menu-con li a:hover{background-color:#f3f3f3;}

/*  SUB LAYOUT ::  상단 메뉴 :: fixed */
#topMenu.fixed .top-menu-inner{position:fixed; top:0; left:0; z-index:99;}

/*  SUB LAYOUT ::  상단 비주얼 */
#productVisualCon{position:relative; width:100%; overflow:hidden; height:461px; padding-top:200px;}
#productVisualCon .prd-visual-container{position:absolute; top:0; left:0; bottom:0; right:0;
	background-size:cover !important;
	-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 4000ms  ease-in-out ;
	-moz-transition:transform 4000ms ease-in-out ;
	-o-transition:transform 4000ms ease-in-out ;
	-ms-transition:transform 4000ms ease-in-out ;
    transition:transform 4000ms ease-in-out ;	
}








/**/
/* ****************** FOOTER ********************** */
#footer{background-color:#000; }
/* 푸터 :: 상단 */
#footerTopCon{max-width:1572px; margin:0px auto; width:100%; padding-top: 17px; margin-bottom: 17px;}
#footerTopCon .footer-top-controls{float:right; padding-top:12px;}
#footerTopCon .footer-top-controls .footer-sns-icons,
#footerTopCon .footer-top-controls .footer-sns-icons li,
#footerTopCon .footer-top-controls .to-top-btn{float:left;}
#footerTopCon .footer-top-controls .footer-sns-icons{margin-right:30px;}
#footerTopCon .footer-top-controls .footer-sns-icons li{margin-left:10px; }
#footerTopCon .footer-top-controls .footer-sns-icons li:first-child{margin-left:0;}
#footerTopCon .footer-top-controls .footer-sns-icons li a{display:block; width:30px; height:30px; background-color:#656565; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}
/* 푸터 :: 가운데 */
#footerMiddleCon{padding:48px 0; margin:0 20px; border-top:1px solid rgba(255,255,255,0.17); border-bottom:1px solid rgba(255,255,255,0.17);}
.footer-middle-inner-con{max-width:1572px; margin:0px auto; }
.footer-address-left-con{float:left; }
.footer-address-left-con .company-info{padding-bottom:18px; word-break:keep-all;}
.footer-address-left-con .company-info span{margin-right:15px; color:#888; font-size:13.5px; line-height: 20px; word-break:keep-all;}
.footer-address-left-con dl{padding-top:10px;}
.footer-address-left-con dl.first{padding-top:0;}
.footer-address-left-con dt, .footer-address-left-con dd{display:inline-block; vertical-align:middle; color:#7e7e7e; font-size:15px; line-height: 20px;}
.footer-address-left-con dt{color:#fff; font-weight:600; margin-right:5px;}
.footer-sns-right-con{float:right; max-width:730px; width:40%;}
.footer-sns-right-con dl{float:left; width:50%; padding:10px 0;}
.footer-sns-right-con dl dt, .footer-sns-right-con dl dd{display:inline-block;}
.footer-sns-right-con dl dt{width:90px; vertical-align:middle;}
.footer-sns-right-con dl dd{vertical-align:middle; font-size:15.5px; color:#fff; opacity:0.7;filter:Alpha(opacity=70);}
/* 푸터 :: 하단 */
#footerBottomCon{position:relative; max-width:1572px; margin:0px auto; padding:30px 0; }
#footerBottomCon .copyright{float:left; letter-spacing:-0.1px; line-height:50px; color:#fff; opacity:0.8;filter:Alpha(opacity=80);}
.family-site-box{position:relative; float:right; width:240px; text-align:left; letter-spacing:-0.25px;}
.family-site-box .family-site-open-btn{display:block; height:50px; line-height:50px; text-indent:20px; font-size:14px; border:1px solid #3a3a3a; background-color:#3a3a3a; color:#fff; }
.family-site-box .family-site-open-btn i{position:absolute; right:3px; top:50%; margin-top:-12px;}
.family-site-box.open .family-site-open-btn i{transform:rotate(180deg); right:-15px}
.family-site-list{position:absolute; bottom:52px; left:0px; width:100%;  padding:10px 0; background-color:#fff; border:1px solid #ddd; border-bottom:0;  z-index:11; display:none; box-sizing:border-box;}
.family-site-list a{display:block; padding:10px; color:#333; font-size:12px;}
.family-site-list a:hover{color:#000; text-decoration:underline;}

}