@charset "utf-8";

/* main css */
label, input, select{vertical-align:middle;}

/* ========== 01. layout ========== */
html,body{overflow-x:hidden;}
#wrap{width:100%;}
#header{width:100%;}
#container{width:100%; padding-top:100px;}
#footer{width:100%;}

/* header */
#header{background:#fff; /*position:relative;*/position:fixed; top:0; left:0; width:100%; z-index:200; height:100px; box-shadow:0 0 10px rgba(0,0,0,0.2)}
#header h1{position:absolute; top:32px; left:50px;}
#header h1 a{display:block; text-indent:-99999px; width:132px; height:37px; background:url('../images/common/logo.png') no-repeat 0 0}
#header #gnb{text-align:center; font-size:0;}
#header #gnb > li{display:inline-block; margin:0 50px; position:relative; letter-spacing:-0.5px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
#header #gnb > li > a{display:block; line-height:100px; color:#222; font-size:18px;}
#header #gnb > li > a:before,#header #gnb > li > a:after{content:''; width:0; height:5px; background:#035183; position:absolute; bottom:0; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
#header #gnb > li > a:before{left:50%}
#header #gnb > li > a:after{right:50%;}
#header #gnb > li.main_select > a:before,#header #gnb > li.main_select > a:after{width:30px}
#header #gnb > li > div{display:none; position:absolute; top:100px; left:50%; width:200px; margin-left:-100px; background:rgba(255,255,255,0.85); z-index:100; border:1px solid #cacaca; box-sizing:border-box;}
#header #gnb > li > div > ul > li{border-bottom:1px solid #cacaca;}
#header #gnb > li > div > ul > li:last-child{border-bottom:none;}
#header #gnb > li > div > ul > li > a{display:block; font-size:15px; line-height:18px; color:#444; font-weight:300; text-align:center; padding:15px 0;}
#header #gnb > li > div > ul > li > a:hover{color:#035183;}
#header #gnb > li > #subSet4 > ul > li:first-child{display:none;}
#header #gnb > li > #subSet2 > ul > li:first-child{display:none;}
#header #lnb{position:absolute; top:29px; right:50px;}
#header #lnb .lang{display:inline-block; vertical-align:bottom; font-size:0; padding-bottom:5px;}
#header #lnb .lang li{display:inline-block;}
#header #lnb .lang li:before{content:'|'; padding:0 15px; font-size:10px; position:relative; top:-2px; color:#bdbdbd;}
#header #lnb .lang li:first-child:before{display:none;}
#header #lnb .lang li a{font-family:'FrutigerLTStd', sans-serif; color:#999; font-size:15px; }
#header #lnb .lang li.on a{color:#035183;}
#header #lnb .search{display:inline-block; vertical-align:bottom; width:200px; margin-left:30px;}
#header #lnb .search div{position:relative;}
#header #lnb .search div input[type=text]{width:100%; border:1px solid #fff; border-bottom:1px solid #333; font-size:15px; line-height:34px; height:34px; padding:0 30px 0 10px;}
#header #lnb .search div input[type=submit]{position:absolute; top:50%; right:10px; margin-top:-8px; width:14px; height:16px; text-indent:-99999px; background:url('../images/icon/icon_sch.png') no-repeat 0 0; background-size:14px 16px; padding:0;}
#header .btn_nav{display:none;}

/* nav */
#nav{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:300; background:#f9f9f9;}
#nav:before{content:''; width:100%; height:60px; background:#fff; position:absolute; top:0; left:0; z-index:-1}
#nav .search{width:calc(100% - 75px); margin-left:15px; padding:16px 0;}
#nav .search div{position:relative;}
#nav .search div input[type=text]{width:100%; border:1px solid #fff; border-bottom:1px solid #333; font-size:12px; line-height:28px; height:28px; padding:0 30px 0 5px; border-radius:0; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none; appearance:none;}
#nav .search div input[type=submit]{position:absolute; top:50%; right:0; margin-top:-10px; width:17px; height:20px; text-indent:-99999px; background:url('../images/icon/icon_sch.png') no-repeat 0 0; background-size:17px 20px; padding:0;}
#nav .lang{overflow:hidden; background:#fff; box-sizing:border-box; border:1px solid #ebebeb; border-left:none; border-right:none;}
#nav .lang li{float:left; width:50%; box-sizing:border-box; border-left:1px solid #ebebeb;}
#nav .lang li:first-child{border-left:none;}
#nav .lang li a{display:block; text-align:center; font-family:'FrutigerLTStd', sans-serif; font-weight:700; color:#999; font-size:13px; line-height:40px;}
#nav .lang li.on a{color:#035183;}
#nav .menu{box-sizing:border-box; padding:20px 15px; letter-spacing:-0.5px;}
#nav .menu > li > a{display:block; font-size:15px; line-height:35px; color:#222; font-weight:700; position:relative;}
#nav .menu > li > a:after{content:''; width:9px; height:5px; background:url('../images/common/nav_arr.png') no-repeat 0 0; background-size:9px 5px; position:absolute; top:50%; right:0; margin-top:-3px;}
#nav .menu > li > a.on:after{transform:rotate(-180deg); -ms-transform:rotate(-180deg); -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg)}
#nav .menu > li > ul{display:none; border-top:1px solid #d3d3d3; box-sizing:border-box; padding:10px 10px 20px;}
#nav .menu > li > ul > li{margin-top:10px;}
#nav .menu > li > ul > li:first-child{margin-top:0;}
#nav .menu > li > ul > li > a{display:block; color:#666; font-size:13px;}
#nav .btn_close{width:24px; height:24px; text-indent:-99999px; background:url('../images/common/btn_close.png') no-repeat 0 0; background-size:24px; position:absolute; top:18px; right:15px;}

/* footer */
#footer{background:#333; position:relative;}
#footer .layout{max-width:1200px; margin:0 auto; box-sizing:border-box; padding:60px 0; overflow:hidden;}
#footer .layout .info{float:left; width:40%}
#footer .layout .info dl dt{color:#d4d4d4; font-size:20px; letter-spacing:-0.5px; font-weight:700}
#footer .layout .info dl dd{color:#f2f2f2; font-size:32px; font-family:'FrutigerLTStd', sans-serif; font-weight:900;}
#footer .layout .info p{padding:20px 0 0;}
#footer .layout .info p a{display:inline-block; background:#f68b1f; width:205px; text-align:center; letter-spacing:-0.5px; position:relative; overflow:hidden; z-index:1}
#footer .layout .info p a:before{box-sizing:border-box; z-index:-1; content:''; position:absolute; top:0; right:-50px; bottom:0; left:0; border-right:25px solid transparent; border-bottom:50px solid rgba(255,255,255,0.1); transform:translateX(-100%); -ms-transform:translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); transition:0.5s ease-in-out; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out;}
#footer .layout .info p a span{display:inline-block; color:#fff; font-size:14px; line-height:50px; padding-left:35px;}
#footer .layout .info p a:nth-of-type(1) span{background:url('../images/common/ftIcon_1.png') no-repeat 0 50%; background-size:24px}
#footer .layout .info p a:nth-of-type(2){display:none;}
#footer .layout .info .f_link{font-size:0; letter-spacing:-0.5px; padding:25px 0 20px;}
#footer .layout .info .f_link li{display:inline-block; font-size:15px; color:#cbcbcb; font-weight:300;}
#footer .layout .info .f_link li:before{content:'|'; color:#696969; font-size:10px; padding:0 20px; position:relative; top:-2px}
#footer .layout .info .f_link li:first-child:before{display:none;}
#footer .layout .info .f_link li a{color:#cbcbcb;}
#footer .layout .info .f_link li a:hover{text-decoration:underline}
#footer .layout .info .f_info{letter-spacing:-0.5px;}
#footer .layout .info .f_info li{line-height:26px; font-size:0;}
#footer .layout .info .f_info li span{display:inline-block; font-size:14px; color:#cbcbcb; font-weight:300; padding-right:25px;}
#footer .layout .info .f_info li span strong{color:#fff; font-weight:400;}
#footer .layout .info .f_info li span:last-child{padding-right:0;}
#footer .layout .sitemap{float:right; width:56%; font-size:0;}
#footer .layout .sitemap > div{display:inline-block; vertical-align:top; letter-spacing:-0.5px; width:25%}
#footer .layout .sitemap > div > a{display:block; color:#f4f4f4; font-size:16px; font-weight:700}
#footer .layout .sitemap > div > ul{padding-top:30px;}
#footer .layout .sitemap > div > ul li{margin-bottom:15px;}
#footer .layout .sitemap > div > ul li:last-child{margin-bottom:0;}
#footer .layout .sitemap > div > ul li a{display:inline-block; color:#c4c4c4; font-size:15px;}
#footer .layout .sitemap > div > ul li a:hover{text-decoration:underline}
/*
#footer .layout .sitemap > div:nth-of-type(2) > ul li:first-child{display:none;}
#footer .layout .sitemap > div:nth-of-type(4) > ul li:first-child{display:none;}
*/
#footer .layout .sitemap > div:nth-of-type(1) > ul li:first-child{display:none;}
#footer .layout .sitemap > div:nth-of-type(3) > ul li:first-child{display:none;}
#footer .copy{background:#202020; text-align:center; padding:25px 0; color:#727272; font-size:12px; font-family:'FrutigerLTStd', sans-serif; font-weight:300; letter-spacing:-0.5px;}

/* quickMenu */
#quickMenu{position:fixed; bottom:40px; right:50px; z-index:250}
#quickMenu ul li a{display:inline-block; vertical-align:middle; width:80px; text-align:center; letter-spacing:-0.5px; position:relative; overflow:hidden; z-index:1}
#quickMenu ul li a span{display:inline-block; color:#fff; font-family:'FrutigerLTStd', sans-serif; font-size:12px; line-height:14px;}
#quickMenu ul li:nth-of-type(1) a{background-color:#f68b1f; padding:18px 0;}
#quickMenu ul li:nth-of-type(1) a span{background:url('../images/common/ftIcon_1.png') no-repeat 50% 0; background-size:20px; padding:28px 0 0;}
#quickMenu ul li:nth-of-type(2) a{background-color:#202020; padding:23px 0 21px;}
#quickMenu ul li:nth-of-type(2) a span{background:url('../images/icon/icon_top.png') no-repeat 50% 0; background-size:12px; padding:20px 0 0;}
#quickMenu.fix{position:absolute; bottom:auto; top:-200px}

/*전자상거래 표준약관*/
.yg{font-size:16px; line-height:26px; word-break:keep-all}
.yg h2{margin-top:70px; font-size:22px; font-weight:700; color:#333;}
.yg h3{margin-top:40px; margin-bottom:0.5em; font-size:18px; font-weight:700; color:#444;}
.yg h4{margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:500; color:#555;}
.yg p{margin:0.5em 0;}
.yg dl{overflow:hidden;margin:0;}
.yg dt,.yg dd{float:left;}
.yg_nav{padding:0;margin:0;padding-bottom:20px;padding-top:20px; display:none;}
.yg_nav a{color:#0078bc;font-size:14px;}
.yg_nav li{list-style:none;}

.fly_w > li > ul > li{position:relative; padding-left:30px;}
.fly_w > li > ul > li:before{content:'-'; position:absolute; top:0; left:18px;}
.fly_w > li > ol > li{padding-left:18px;}
.fly_w > li > ol > li > ol{padding-left:18px;}
.fly_w > li a{color:#ff3838}

.yg_table{overflow:hidden;}
.yg_table table{width:50%; border-top:2px solid #666; float:left;}
.yg_table table:first-child{border-right:1px solid #ddd;}
.yg_table thead th{text-align:center; color:#333; font-weight:700; border-bottom:1px solid #ddd; padding:10px 0; background:#f2f2f2;}
.yg_table tbody th{border-bottom:1px solid #ddd; color:#333; padding:5px 20px; font-weight:500}
.yg_table tbody td{border-bottom:1px solid #ddd; padding:5px 0;}

/* PC */
@media all and (min-width:1025px){
	.pc_show{display:block;}
	.m_show{display:none;}

	#nav{display:none;}

	#footer .layout .info p a:hover:before{transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0);}
}

@media all and (max-width:1530px){
	#header #gnb{text-align:left; box-sizing:border-box; padding-left:15%}
	#header #lnb{right:15px;}

	#quickMenu{right:15px;}
}

@media all and (max-width:1230px){
	#header h1{left:15px;}
	#header #gnb > li{margin:0 30px;}

	#footer .layout{padding:60px 15px;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	.pc_show{display:none;}
	.m_show{display:block;}

	#header{position:fixed; height:60px;}
	#header h1{top:17px; left:15px;}
	#header h1 a{width:93px; height:26px; background-image:url('../images/common/logo_m.png'); background-size:93px 26px}
	#header #gnb{display:none;}
	#header #lnb{display:none;}
	#header .btn_nav{display:block; width:30px; height:23px; text-indent:-99999px; background:url('../images/common/btn_nav.png') no-repeat 0 0; background-size:30px 23px; position:absolute; top:19px; right:15px;}

	#container{padding-top:60px;}

	#footer .layout{padding:40px 15px;}
	#footer .layout .info{width:100%}
	#footer .layout .info dl dt{font-size:15px;}
	#footer .layout .info dl dd{font-size:26px;}
	#footer .layout .info p{padding:15px 0 0;}
	#footer .layout .info p a{width:65px; padding:11px 0 13px}
	#footer .layout .info p a:before{display:none;}
	#footer .layout .info p a span{font-size:12px; line-height:14px; padding:25px 0 0;  background-size:20px 18px !important}
	#footer .layout .info p a:nth-of-type(1) span{background:url('../images/common/ftIcon_1.png') no-repeat 50% 0;}
	#footer .layout .info p a:nth-of-type(2){display:inline-block; margin-left:10px;}
	#footer .layout .info p a:nth-of-type(2) span{background:url('../images/common/ftIcon_2.png') no-repeat 50% 0;}
	#footer .layout .info .f_link{padding:20px 0 15px;}
	#footer .layout .info .f_link li{font-size:13px;}
	#footer .layout .info .f_link li:before{font-size:10px; padding:0 15px;}
	#footer .layout .info .f_info li{line-height:19px;}
	#footer .layout .info .f_info li span{font-size:12px; padding-right:20px;}
	#footer .layout .sitemap{display:none;}
	#footer .copy{padding:15px 0; font-size:11px;}

	/* quickMenu */
	#quickMenu{bottom:15px; right:15px;}
	#quickMenu ul li a{width:55px}
	#quickMenu ul li a span{font-size:11px; line-height:14px;}
	#quickMenu ul li:nth-of-type(1) a{background-color:#f68b1f; padding:9px 0 8px;}
	#quickMenu ul li:nth-of-type(1) a span{background:url('../images/common/ftIcon_1.png') no-repeat 50% 0; background-size:16px; padding:22px 0 0;}
	#quickMenu ul li:nth-of-type(2) a{background-color:#202020; padding:13px 0 11px;}
	#quickMenu ul li:nth-of-type(2) a span{background:url('../images/icon/icon_top.png') no-repeat 50% 0; background-size:10px; padding:15px 0 0;}
	#quickMenu.fix{top:-125px}

	/*전자상거래 표준약관*/
	.yg {font-size:12px; line-height:18px;}
	.yg h2{margin-top:20px; font-size:17px;}
	.yg h3{margin-top:20px; font-size:15px;}
	.yg h4{margin-top:20px; font-size:14px;}

	.fly_w > li > ul > li{padding-left:25px;}
	.fly_w > li > ul > li:before{content:'-'; position:absolute; top:0; left:16px;}
	.fly_w > li > ol > li{padding-left:16px;}

	.yg_table{padding-top:0.5em}
	.yg_table table{width:100%;}
	.yg_table table colgroup col:nth-of-type(1){width:90px !important;}
	.yg_table table colgroup col:nth-of-type(2){width:calc(100% - 90px) !important;}
	.yg_table table:first-child{border-left:none; border-right:none; margin-bottom:20px;}
	.yg_table table thead th{padding:7px 0}
	.yg_table table tbody th{padding:5px 10px;}
}

/* slick-slider 필수 css */
.slick-slider{position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list{position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer; cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track{position:relative; top:0; left:0; display:flex;}
.slick-track:before,.slick-track:after{display:table; content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left; height:auto; min-height:1px;}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display: block;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:flex;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}

#product .slick-track, #product .slick-initialized .slick-slide{ display:block}

/* 컨텐츠 이미지로 작업하게될경우 들어갈 css */
@media all and (min-width:1025px){
	.pc_img{display:block; max-width:100%; margin:0 auto;}
	.m_img{display:none; max-width:100%; margin:0 auto;}

	.scroll_img{overflow-y:hidden;}
	.scroll_img img{max-width:100%;}
}

@media all and (max-width:1024px){
	.pc_img{display:none; max-width:100%; margin:0 auto;}
	.m_img{display:block; max-width:80%; margin:0 auto;}

	.scroll_img{width:80%; margin:0 auto;}
}

@media all and (max-width:640px){
	.pc_img{display:none; max-width:100%; margin:0 auto;}
	.m_img{display:block; max-width:100%; margin:0 auto;}

	.scroll_img{width:100%;}
}