@charset "utf-8";

/* 프로그램리스트 모바일 버전 */
.all_m_btn {padding:10px; background:#323337;}
.all_m_btn img {position:absolute; top:28%; left:15px; width:10%; max-width:40px; cursor:pointer;}
.all_m_btn .mutit {text-align:center; font-weight:900; font-size:26px; color:#fff;}
.pro_m_wrap {display:none; font-family:'Nanum Gothic', sans-serif; transition:all 0.3s linear;}

.pro_m_wrap .m_menu {width:200px;}
.pro_m_wrap .bg_black {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:-1;}



.pro_m_wrap .subleftmenu {
	list-style:none;
	margin:0;
	padding:0;
}
.pro_m_wrap .subleftmenu li {
	border-bottom:1px solid #515155;
	background:#323337;
}
.pro_m_wrap .subleftmenu a {
	display:block;
	color:#b5b2b2;
	font-size:14px;
	padding:11px 5px 11px 15px;
	font-family:'Noto Sans KR';
}
.sub_title_m{
	font-size:28px !important;
	font-weight:bold;
	color:#fff !important;
	padding:12px 5px 12px 15px !important;
}
.pro_m_wrap .subleftmenu a:hover {
	background:#307dd4;
	color:#fff;
}
.sub_title_m:hover {
	background:#323337 !important;
	cursor:default;
}

@media all and (max-width:999px){
	.pro_m_wrap {display:block; position:absolute; left:-100%; top:0; z-index:999;}
	.pro_m_wrap.view {left:0;}
}


/* basic */
#wrap {overflow:hidden; }
.inner{width:100%; max-width:1200px; margin:0 auto; position:relative;}
.inner:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.serif{font-family: 'Noto Serif KR', serif;}
.poppins{font-family: 'Poppins', sans-serif;}
.mont{font-family: 'Montserrat', sans-serif;}

@media all and (max-width:1200px){
	.inner{width:93.75%}
}


/* 최근본 상품 퀵메뉴 */
.quick {display:none !important; overflow:hidden; z-index:110; position:fixed; right:20px; top:50%; width:113px;  -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%) ;}
.quick > ul {margin-bottom:0; border:1px solid #d9d9d9; box-sizing:border-box; background-color:#fff; border-radius:10px;  overflow:hidden;}
.quick ul li.recent_prod {}
.quick ul li.recent_prod p {height:30px; font-size:16px; color:#656565; letter-spacing:-0.025em; line-height:30px; background-color:#d9d9d9; text-align:center; }
.quick ul li.recent_prod ul {padding:14px; box-sizing:border-box; }
.quick ul li.recent_prod ul li {border:1px solid #d9d9d9; margin-bottom:12px; box-sizing:border-box; }
.quick ul li.recent_prod ul li:last-of-type {margin-bottom:0; }
.quick ul li.recent_prod ul li img {width:100%; height:auto; }
.quick ul li.recent_prod .quick_pager {margin-top:0; margin-bottom:30px; }
.quick ul li.recent_prod .quick_pager a {display:inline-block; vertical-align:middle; width:auto; height:auto; border:0 none; margin:0 3px; line-height:14px; font-size:14px; color:#b6b6b6; }
.quick ul li.recent_prod .quick_pager a.active {color:#666666; }
.quick ul li.recent_prod .quick_pager .page_prev,
.quick ul li.recent_prod .quick_pager .page_next {display:inline-block; vertical-align:middle; width:9px; height:11px; border:0 none; text-indent:-9999px; }
.quick ul li.recent_prod .quick_pager .page_prev {background:url('/img/theme/quick_prev_btn.png') no-repeat center center; }
.quick ul li.recent_prod .quick_pager .page_next {background:url('/img/theme/quick_next_btn.png') no-repeat center center; }
.quick ul.zzim{margin-top:30px;}

.quick ul li.top_btn {width:100%; height:48px; background-color:#666666; box-sizing:border-box; line-height:48px; text-align:center;}
.quick ul li.top_btn a {display:block; color:#fff; line-height:48px; font-size:16px; letter-spacing:-0.025em; }

.quick_top_btn {display:none; z-index:999; position:fixed; right:20px; bottom:-60px; width:57px; height:57px; background-color:#798ebb; border-radius:50%; text-align:center; cursor:pointer; transition:all 0.5s; }
.quick_top_btn.on {bottom:60px; }
.quick_top_btn img {padding-top:12px; }
.quick_top_btn p {font-size:16px; color:#ffffff; letter-spacing:-0.025em; }

@media all and (max-width:1000px){
	.quick {display:none; }
	.quick_top_btn {display:block; }
}

/*=======================================
	header
======================================*/
.header{position:fixed; top:0; left:0; width:100%; z-index:50; border-bottom:1px solid #fff; background-color:#fff; box-sizing:border-box; text-align:center; z-index:100; overflow:hidden;}
.header:after{content:''; position:absolute; top:100px; left:0; width:100%; height:1px; background:#d2d2d2; display:none; z-index:2;}
.header.on:after{display:block;}
.header .inner	{position:relative;}
.header .logo_box{position:absolute; left:0; top:20px;}
.header .logo_box a {display:block; width:158px; height:59px; background:url('/img/logo_on.png') no-repeat center center; }
.header .logo_box a img {opacity:1; }
.header .gnb > ul{font-size:0; letter-spacing:-4px;}
.header .gnb > ul > li{display:inline-block; vertical-align:top; margin:0 15px; position:relative;}
.header .gnb > ul > li > a{position:relative; display:block; font-size:18px; font-weight:400; letter-spacing:0.025em; color:#222;  padding:37px 20px 38px;}
.header .gnb > ul > li > a:before{content:''; position:absolute; bottom:-1px; left:0; display:block; width:0; height:2px; background:#1e72c7; z-index:10; transition:all 0.3s;}
.header .gnb ul.depth02{position:relative; display:none; padding:10px 0; text-align:center;}
.header .gnb ul.depth02:before{content:''; position:absolute; left:50%; top:-7px; width:14px; height:7px; background:url('/img/header_depth02_icon01.png') no-repeat center ; -webkit-transform:TranslateX(-50%); -moz-transform:TranslateX(-50%); -ms-transform:TranslateX(-50%); -o-transform:TranslateX(-50%); transform:TranslateX(-50%); opacity:0; transition:all 0.5s;}
.header .gnb ul.depth02 li{margin:10px 0;}
.header .gnb ul.depth02 li a{display:inline-block; font-size:16px; font-weight:300; letter-spacing:-0.05em; color:#666666; padding:7px 0;}
.header .gnb ul.depth02 li a:hover{color:#1e72c7; border-bottom:1px solid #1e72c7}
.header .gnb ul.depth02 li.hover a{border:1px solid #1e72c7; background:#1e72c7; color:#fff; display:block; border-radius:10px; box-sizing:border-box;}
.header .gnb ul.depth02 li.hover a:hover{background:#fff; color:#1e72c7; display:block;}
.header .gnb > ul > li:hover > a{font-weight:500; color:#1e72c7;  text-align:left;}
.header .gnb > ul > li:hover > a:before{width:100%;}
.header .gnb > ul > li:hover ul.depth02:before{opacity:1; }
.header .right_box{position:absolute; top:33px; right:0;}
.header .right_box .leng_box{position:relative; display:inline-block; vertical-align:middle; width:110px; border:1px solid #fff; background:#f1f4f7;  border-radius:17px; text-align:left; box-sizing:border-box; }
.header .right_box .leng_box p{position:relative; font-size:14px; color:#1e72c7;  letter-spacing:0em; font-weight:400; cursor:pointer; padding:5px 10px; box-sizing:border-box;}
.header .right_box .leng_box p:before{content:''; position:absolute; top:calc(50% - 3px); right:10px; display:block; width:10px; height:6px; background:url('/img/header_lang_arrow.png') no-repeat center center / contain; }
.header .right_box .leng_box p img{display:inline-block; vertical-align:middle; margin-right:5px;}
.header .right_box .leng_box ul{position:absolute; top:100%; left:0; display:none; width:100%; padding:5px 0; background:#f1f4f7; border-bottom-left-radius:17px; border-bottom-right-radius:17px; z-index:10;}
.header .right_box .leng_box ul li a{display:block; font-size:14px; font-weight:400; letter-spacing:0; color:#aaaaaa; padding:5px 10px;}
.header .right_box .leng_box ul li a img{display:inline-block; vertical-align:middle; margin-right:5px;}
.header .right_box .leng_box ul li a:hover{color:#1e72c7;}
.header .right_box .leng_box.on{border-bottom-left-radius:0; border-bottom-right-radius:0;}
.header .right_box .leng_box.on ul{display:block;}
.header .right_box .search_box {display:inline-block; vertical-align:middle; width:40px; box-sizing:border-box; position:relative; margin-left:20px; transition:all 0.5s;}
.header .right_box .search_box input{width:100%; border:0; background:#f8f8f8; border-radius:17px; height:34px; line-height:34px; font-size:16px; padding:0 40px 0 20px; font-weight:300; letter-spacing:-0.05em; color:#444; box-sizing:Border-box; opacity:0; transition:all 0.5s;}
.header .right_box .search_box input::placeholder{color:#aaaaaa}
.header .right_box .search_box a{position:absolute; right:10px; top:50%; display:inline-block; width:21px; height:21px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); background:url('/img/header_search_icon_on.png') no-repeat center center; }
.header .right_box .search_box a img {opacity:1;  }
.header .right_box .search_box.on{width:285px;}
.header .right_box .search_box.on input{opacity:1;}

.header_blank{display:block; width:100%; height:100px;}

@media all and (max-width:1200px){
	.header .gnb > ul > li > a{padding:37px 5px 38px;}
}
@media all and (max-width:1000px){
	.header {display:none;}
	.header_blank{display:none;}
}

.m_header{position:relative; height:100px; text-align:center;}
.m_header .logo_box{display:inline-block;}
.m_header .logo_box a{display:inline-block; margin:19.5px 0;}
.m_header .m_btn{position:absolute; right:20px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }
.m_header .m_btn a{displaY:inline-block;}
.m_header .search_btn{position:absolute; left:20px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }
.m_header .search_btn a{displaY:inline-block;}
.m_header .search_box {display:none; position:absolute; left:0; top:100%; width:100%; background:#fff; padding:15px 20px; box-sizing:border-box; z-index:90; box-sizing:border-box; }
.m_header .search_box.on {display:block;}
.m_header .search_box input{width:100%; border:0; padding:10px 40px 10px 0; border-bottom:1px solid #e7e7e7; font-size:18px; font-weight:300; letter-spacing:-0.05em; color:#444; box-sizing:Border-box;}
.m_header .search_box input::placeholder{color:#aaaaaa}
.m_header .search_box a{position:absolute; right:50px; top:50%; display:inline-block; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }

.m_menu{position:fixed; left:0; top:-100%; width:100%; height:100%; overflow-y:auto; padding:25px 0; box-sizing:Border-box; background:#fff; z-index:999; transition:all 0.3s;}
.m_menu.on{top:0;}
.m_menu .top_box{font-size:0; letter-spacing:-4px; padding:0 20px; box-sizing:border-box;}
.m_menu .top_box .search_box{display:inline-block; vertical-align:middle; width:calc(100% - 64px); position:relative; margin-right:34px;}
.m_menu .top_box .search_box input{width:100%; border:0; padding:11.5px 50px 11.5px 20px; background:#f1f4f7; font-size:18px; font-weight:300; letter-spacing:-0.05em; color:#444; box-sizing:Border-box; border-radius:25px;}
.m_menu .top_box .search_box input::placeholder{color:#aaaaaa}
.m_menu .top_box .search_box a{position:absolute; right:20px; top:50%; display:inline-block; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }
.m_menu .top_box .x_btn{display:inline-block; vertical-align:middle;}
.m_menu .top_box .x_btn a{displaY:INLINE-BLOCK;}
.m_menu .gnb{padding:50px 0;}
.m_menu .gnb > ul{ text-align:center;}
.m_menu .gnb > ul > li{}
.m_menu .gnb > ul > li > a{display:block; font-size:30px; font-weight:bold; letter-spacing:0.025em; color:#222222; line-height:1; padding:25px 0;}
.m_menu .gnb > ul > li.on > a{color:#1e72c7;}
.m_menu .gnb ul.depth02{display:none; font-size:0; letter-spacing:-4px; border-bottom:1px solid #e5eaef; }
.m_menu .gnb ul.depth02 li{display:inline-block; vertical-align:top; width:50%; box-sizing:border-box; border:1px solid #e5eaef; border-bottom:0; border-right:0;}
.m_menu .gnb ul.depth02 li:nth-of-type(2n){border-righT:0;}
.m_menu .gnb ul.depth02 li a{display:block; font-size:24px; font-weight:300; letter-spacing:-0.05em; color:#444444; padding:20px 0; background:#f1f4f7;}
.m_menu .member_box{font-size:0; letter-spacing:-4px; text-align:center;}
.m_menu .member_box ul{font-size:0; letter-spacing:-4px;}
.m_menu .member_box ul li{display:inline-block; vertical-align:top; margin-right:6px; position:relative}
.m_menu .member_box ul li:last-of-type{margin-right:0;}
.m_menu .member_box ul li a{display:block; font-size:16px; font-weight:400; letter-spacing:0; color:#666666; width:82px; height:37px; line-height:35px; border:1px solid #dcdcdc; box-sizing:border-box;}
.m_menu .leng_box{margin-top:15px;}
.m_menu .leng_box ul{font-size:0; letter-spacing:-4px; text-align:center;}
.m_menu .leng_box ul li{display:inline-block; vertical-align:top; margin-right:30px; position:relative}
.m_menu .leng_box ul li:last-of-type{margin-right:0;}
.m_menu .leng_box ul li:not(:last-child):before{content:''; position:absolute; right:-15px; top:2px; width:1px; height:13px; background:#5a656f;}
.m_menu .leng_box ul li a{display:block; font-size:16px; font-weight:400; letter-spacing:0; color:#aaaaaa;}
.m_menu .leng_box ul li.on a{color:#1e72c7;}

@media all and (min-width:1001px){
	.m_header {display:none;}
	.m_menu{display:none;}
}
/*=======================================
	footer
======================================*/
.footer{background:#f7f7f7;}
.footer .top_box{border-bottom:1px solid #eeeeee;}
.footer .top_box:after{content:''; display:table; clear:both;}
.footer .top_box .left{float:left;}
.footer .top_box .left ul{font-size:0; letter-spacing:-4px; padding:18px 0;}
.footer .top_box .left ul li{display:inline-block; vertical-align:top; margin-right:25px;}
.footer .top_box .left ul li a{display:block; font-size:16px; font-weight:300; letter-spacing:-0.025em; color:#aaaaaa;}
.footer .top_box .right{float:right;}
.footer .top_box .right .top_btn{}
.footer .top_box .right .top_btn a{display:block; width:60px; height:60px; background:#272f37; line-height:60px; font-size:16px; font-weight:500; letter-spacing:-0.025em; color:#ffffff; text-align:center;}
.footer .bot_box{padding:45px 0 75px; font-size:0; letter-spacing:-4px;}
.footer .bot_box .logo_box{display:inline-block; vertical-align:middle; width:250px;}
.footer .bot_box .logo_box a{display:inline-block;}
.footer .bot_box .addr_box{display:inline-block; vertical-align:middle; width:calc(100% - 504px);}
.footer .bot_box .addr_box ul{font-size:0; letter-spacing:-4px;}
.footer .bot_box .addr_box ul li{display:inline-block; vertical-align:top; margin-right:20px; margin-bottom:5px; font-size:16px; font-weight:300; letter-spacing:-0.025em; color:#444444; position:relative;}
.footer .bot_box .addr_box ul li:before{content:''; position:absolute; right:-10px; top:7px; width:1px; height:12px; background:#d9d9d9;}
.footer .bot_box .addr_box ul li:nth-of-type(2):before,
.footer .bot_box .addr_box ul li:nth-of-type(3):before,
.footer .bot_box .addr_box ul li:last-of-type:before{display:none;}
.footer .bot_box .addr_box p.copy{font-size:14px; font-weight:300; letter-spacing:-0.025em; color:#888888; padding-top:10px;}
.footer .bot_box .call_box{display:inline-block; vertical-align:middle; width:254px;text-align:right;}
.footer .bot_box .call_box p{font-size:18px; font-weight:500; letter-spacing:-0.025em; color:#222222;}
.footer .bot_box .call_box a{display:inline-block; font-size:38px; font-weight:bold; letter-spacing:-0.025em; color:#1e72c7; padding-top:10px; line-height:1;}

@media all and (max-width:1000px){
	.footer .bot_box .logo_box{width:100%;}
	.footer .bot_box .addr_box{width:100%; margin:20px 0;}
	.footer .bot_box .addr_box ul br{display:none;}
	.footer .bot_box .addr_box ul li:before{display:none;}
	.footer .bot_box .call_box{width:100%; text-align:left;}

}


/*=======================================
	main_quick
======================================*/
.main_quick{position:fixed; top:50%; right:0; width:100px; z-index:999; -webkit-transform:TranslateY(-50%); -moz-transform:TranslateY(-50%); -ms-transform:TranslateY(-50%); -o-transform:TranslateY(-50%); transform:TranslateY(-50%);}
.main_quick ul{border-top-right-radius:20px; border-bottom-left-radius:20px; overflow:hidden; }
.main_quick ul li{padding:13px 0; text-align:Center; border-bottom:1px solid #48515b; background:#272f37; cursor:pointer;}
.main_quick ul li:last-of-type{border-bottom:0;}
.main_quick ul li:hover {background:#1e72c7}
.main_quick ul li p{font-size:16px; font-weight:500; letter-spacing:-0.05em; color:#b1b1b1; padding-top:10px;}
.main_quick ul li:hover p{color:#c5d8ec}
.main_quick ul li span{display:block; font-size:18px; font-weight:500; letter-spacing:-0.05em; color:#ffffff; padding:15px 0;}
.main_quick .top_btn{margin-top:10px; text-align:center; }
.main_quick .top_btn a{display:inline-block; width:68px; height:68px; border-radius:50%; background:#fff; box-shadow:5px 5px 10px rgba(0,0,0,0.15); font-size:16px; font-weight:500; letter-spacing:-0.05em; color:#1e72c7; padding:17px 0; box-sizing:border-box;}
.main_quick .top_btn a img{display:block; margin:0 auto 10px}

@media all and (max-width:1000px){
	.main_quick{display:none;}
}



/*=======================================
	sub_common
======================================*/
.sub_common{width:calc(100% - 80px); margin:0 auto; padding:144px 0 84px; background-color:#1e72c7; background-position:center center; background-size:cover; background-repeat:no-repeat; font-size:0; letter-spacing:-4px;}
.sub_common h1{display:inline-block; vertical-align:middle; width:calc(100% - 225px); font-size:48px; color:#fff; letter-spacing:-0.05em; font-weight:700; line-height:1.2; margin:0;}
.sub_common h1 i{display:block; width:62px; height:29px; background:url('/img/sub_common_deco.png') no-repeat center center / contain; margin-bottom:5px;}
.sub_common ul.route{position:relative; display:inline-block; vertical-align:middle; width:225px; }
.sub_common ul.route:before{content:''; position:absolute; top:0; left:0; display:block; width:1px; height:100%; background:#4183c6;}
.sub_common ul.route > li{position:relative; display:inline-block; vertical-align:top; width:180px; box-sizing:border-box;}
.sub_common ul.route > li.home{width:45px; text-align:center;}
.sub_common ul.route > li.home a{display:block; padding:15px 0;}
.sub_common ul.route > li p{position:relative; min-height:43px; font-size:16px; color:#fff; letter-spacing:-0.025em; font-weight:400; padding:11px 20px 11px 10px; border:1px solid #fff; cursor:pointer; box-sizing:border-box;}
.sub_common ul.route > li p:before{content:''; position:absolute; top:50%; right:10px; display:block; width:12px; height:6px; background:url('/img/sub_common_arrow.png') no-repeat center center / contain; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%);}
.sub_common ul.route > li ul{position:absolute; top:100%; left:0; display:none; width:100%; padding:5px 0; border:1px solid #fff; background:#1063b7; box-sizing:border-box; z-index:10;}
.sub_common ul.route > li ul li a{display:block; font-size:16px; color:#fff; letter-spacing:-0.025em; font-weight:400; padding:5px 10px;}

@media all and (max-width:1400px){
	.sub_common{width:calc(100% - 40px);}
}
@media all and (max-width:1000px){
	.sub_common{width:100%; padding:60px 0;}
	.sub_common h1{width:100%;}
	.sub_common ul.route{width:100%; margin-top:40px;}
}