@charset "UTF-8";

#wrap { overflow: hidden; }
.container { width: 68.75rem; max-width: 100%; margin: 0 auto; text-align: left; }
.layout { max-width:1280px;margin:0 auto;position: relative; }

#header { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 6.5rem; padding: 0 17.5rem 0 10.5rem; background-color: #fff; text-align: center; line-height: 6.5rem; }
#header .logo { 
	position: absolute;
	left: 2.5rem; top: 50%; -webkit-transform: translateY(-50%); 
	transform: translateY(-50%);
	
	width:9.99rem;
	height:1.0rem;
	display: block;
	overflow: hidden; 
}
#header .logo a { display: block;overflow: hidden; width:100%; height:100%; }
#header .logo a img { vertical-align: top; position: relative; max-width:100%; }

#header.on .logo a img { 
	margin-top:-1.0rem; 
	width:10.05rem;
}
 
#header .util { position: absolute; right: 2.5rem; top: 50%; line-height: 100%;transform: translateY(-50%); }
#header.active .util { z-index:3; }
#header .util .menu { float: right; }
#header .util .menu li { display: inline; vertical-align: top; }
#header .util .menu .sitemap { display: inline-block; overflow: hidden; position: relative; z-index: 2; color:#000; font-size: 0; height: 1.75rem; line-height: 1.75rem; }
#header .util .menu .sitemap::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; font-size: 1.75rem; color: #000; content: ''; }

#header .util .recruit {border:1px solid #ffa800; color:#fff;padding:.35rem .5rem;font-size:.9rem; margin-right:1.65rem;font-weight: 400;line-height: 100%; display: inline-block; background: #ffa800; vertical-align: middle; letter-spacing: .45px; }
#header.active .util .recruit { display: none; } 
#header .util .lang { display: inline-block; position: relative; font-weight: 600; color: #000; margin-right:1.7rem; width:auto;vertical-align: middle; }
#header .util .lang a { width: 4.6rem; font-size: 0.75rem;display: block;letter-spacing: .16px;  }
#header.active .util .lang { display: none; } 
#header .util .lang .label::after { position: absolute; right:0; top: auto; margin-left: 0.3rem; font-family: "xeicon"; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; color:#000; }
#header .util .lang .label::before { position: absolute; left: 0; top: auto; font-family: "xeicon"; content: "\e9d1"; font-size:1.2rem;font-weight: 300; }
#header .util .lang ul { visibility: hidden; overflow: hidden; position: absolute; left: 0; top: 2rem; width: 100%; height: 0; padding: 0; border: 1px solid #ddd; border-top: 2px solid #ffa800; background-color: #fff; font-size: 0.65rem; line-height: 1.923; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s; margin-top:0; }
#header .util .lang ul a:hover, #header .util .lang ul a:focus, #header .util .lang ul a:active { color: #ffa800; -webkit-transition: all 0.2s; transition: all 0.2s; }
#header .util .lang ul li a { color:#000; }
#header .util .lang.active .label::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#header .util .lang.active ul { visibility: visible; height: auto; margin-top: 0; padding: 0.5rem 0; opacity: 1; }

#gnb { position: relative; z-index: 0; display: table; margin: 0 auto; }
#gnb::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: 6.5rem; height: 0; background-color: #fff; border-top:0; transition: none;border-bottom: 1px solid #C4C4C4;}
#gnb > li { display: table-cell; overflow: hidden; width: 8rem; text-align: center; vertical-align: top; }
#gnb > li > a { display: block; font-size: 1.1rem; font-weight: 500; color: #000;letter-spacing: -.55px; position: relative; }
#gnb > li > a>span { position: relative; }
#gnb > li > a>span:before { position: absolute;bottom:-2.5rem;left:50%;transform: translateX(-50%);width:0;height: .25rem;background: #ffa800; opacity: 0; content:""; transition: all .3s; }
#gnb > li > a:hover>span:before { width:100%; opacity: 1; }
#gnb > li.active .depth2::before { background-color: #f0f3f3; }
#gnb .depth3 { display: none; }
#gnb .depth2 { visibility: hidden; overflow: hidden; position: relative; height: 0; margin-top: 1px; opacity: 0; }
#gnb .depth2 ul { padding: 1rem 0; }
#gnb .depth2 li { line-height: 1.25rem; word-break: keep-all; }
#gnb .depth2 li + li { margin-top: 0.5rem; }
#gnb .depth2 a { display: block; position: relative; z-index: 0; color: #555; -webkit-transition: all 0.2s; transition: all 0.2s;letter-spacing: -.45px; }
#gnb .depth2 a:hover { color:#ffa800; text-decoration: underline; }
#gnb.active::before { height: calc(100% - 6.5rem);-webkit-transition: all 0.3s; transition: all 0.3s; border-top: 1px solid #C4C4C4;}
#gnb::after { opacity: 0;background: #fff url("/images/common/layout/nav_before.png") no-repeat center center;width:22.05rem;height: 6.15rem;content:"";position: absolute;right:-65%;bottom:1px; }
#gnb.active::after {  -webkit-transition: all .3s .3s; transition: all .3s .3s; opacity: 1;}
#gnb.active .depth2 { visibility: visible; overflow: visible; height: auto; padding: 0.125rem 0; opacity: 1; -webkit-transition: all 0.3s 0.3s; transition: all 0.3s 0.3s;}

#header.active { z-index: 104;background: #fff; }
#header.active .util .menu .sitemap::before { color: #fff; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }
#header.active .util .menu .sitemap:hover::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s; transition: all 0.2s; }
#header.active > nav { position: fixed; left: 0; top: 6.5rem; z-index: 1; width: 100%; height: calc(100% - 6.5rem); background-color: #fff; border-top:1px solid #c8c8c8; }
#header.active #gnb { top: 40%; width: 68.75rem; max-width: 100%; margin: 0 auto; table-layout: fixed; -webkit-transform: translateY(-50%); transform: translateY(-50%); counter-reset: section; }
#header.active #gnb::before { display: none; }
#header.active #gnb > li { overflow: visible; padding: 0 2rem; text-align: left; line-height: 1.2; width:25%; }
#header.active #gnb > li > a { font-size: 1.75rem; font-weight: 400; color: #fff; }

#header.active #gnb > li:last-child .depth2::before { display: none; }
#header.active #gnb .depth2 { visibility: visible; overflow: visible; height: auto; margin-top: 0; padding: 2rem 0 !important; opacity: 1; }
#header.active #gnb .depth2::before { top: -1.5rem; right: -2rem; height: 28.5rem !important; border-color: #5e6771; background: none !important; }
#header.active #gnb .depth2::after { display: none; }
#header.active #gnb .depth2 a { font-size: 0.9rem; color: #fff; line-height: 2.5rem; }
#header.active #gnb .depth2 a::after { display: none; }
#header.active #gnb .depth2 a:hover, #header.active #gnb .depth2 a:focus, #header.active #gnb .depth2 a:active { text-decoration: underline; }

#header.active #gnb .depth3 { display: block; margin: 0 0 0.25rem; padding-left: 0.75rem; border-left: 2px solid #ff730c; }
#header.active #gnb .depth3 li + li { margin-top: 0.75rem; }
#header.active #gnb .depth3 a { font-size: 0.8rem; color: #c1cbd2; line-height: 1rem;}
#header.active .util .menu .sitemap::before { color:#000; }

#header.active #gnb > li > a { font-size: 1.5rem; font-weight: 400; color: #000; text-align: center; padding-bottom:1rem;margin-bottom:1rem;border-bottom:2px solid #ffa800; }
#header.active .util .menu .sitemap::before { color:#000; }
#header.active .logo a img { margin-top:-1.1rem; }
#header.active #gnb .depth2 a { color:#555; text-align: center; line-height: 2rem;font-size:1rem; font-weight: 400;}
#header.active #gnb .depth2 a:hover { color:#ffa800;text-decoration: none !important;}
#header.active #gnb .depth2 { padding:0 !important; }
#header.active > nav:before { content:"";display: block;position: absolute;top:2rem;right:3rem; width:25.8rem; height:14.7rem; background: url("/images/common/layout/header_active_before.png") no-repeat center center/cover; }

#header.active #gnb > li > a>span:before { display: none; }
#header.active #gnb > li > a:hover>span:before { display: none; }

.wrap_main #header.active #gnb > li > a { font-size: 1.5rem; font-weight: 400; color: #000;text-align: center; padding-bottom:1rem;margin-bottom:1rem; border-bottom:2px solid #ffa800;}
.wrap_main #header.active .util .menu .sitemap::before { color:#000; }
.wrap_main #header.active { background: #fff; }
.wrap_main #header.active #gnb .depth2 a { color:#555;text-align: center;line-height: 2rem; font-size:1rem;font-weight: 400; }
.wrap_main #header.active #gnb .depth2 a:hover { color:#ffa800; text-decoration: none !important; }
.wrap_main #header.active #gnb .depth2 { padding:0 !important; }


/* 메인헤더 */
.wrap_main #header { background: none; }
.wrap_main #header.on { background: #fff; }
.wrap_main #header.on #gnb > li > a { color:#000; }
.wrap_main #header #gnb > li > a { color:#fff; }
.wrap_main #header .util .recruit { color:#fff;border:1px solid #A3A6B0; background: none; }
.wrap_main #header .util .lang>a { color:#fff; }
.wrap_main #header .util .lang .label::after { color:#fff; }
.wrap_main #header.on .util .lang .label::after { color:#000; }
.wrap_main #header.on .util .lang >a { color:#000; } 
.wrap_main #header.on .util .recruit { background: #ffa800;border: 1px solid #ffa800 }
.wrap_main #header .util .menu .sitemap::before { color:#fff; }
.wrap_main #header.on .util .menu .sitemap::before { color:#000; }
/* 서브헤더 */
.wrap_sub #header .logo a img { margin-top:-1.1rem; }

/* 액티브헤더 */
#header.type02 .logo a img {margin-top: -1.1rem; transition: all .3s; }
#header.type02 { background: #fff; transition: all .3s; }
#header.type02 #gnb > li > a { color:#000; transition: all .3s; }
#header.type02 .util .recruit { color:#fff;border:1px solid #ffa800; background: #ffa800; transition: all .3s; }
#header.type02 .util .lang>a { color:#000; transition: all .3s; }
#header.type02 .util .lang .label::after { color:#000; transition: all .3s; }
#header.type02 .util .lang >a { color:#000; transition: all .3s; } 
#header.type02 .util .recruit { background: #ffa800;border: 1px solid #ffa800 transition: all .3s; }
#header.type02 .util .menu .sitemap::before { color:#000; transition: all .3s; }

.go-top { position: absolute; left: 50%; top: auto; z-index: 1; width: 5rem; height: 3.5rem; margin-left: 28.375rem; padding-right: 0.5rem; border-left: 1px solid #3c3c3c; border-right: 1px solid #3c3c3c; font-size: 0.75rem; font-weight: 600; color: #fff; text-align: center; line-height: 3.5rem; }
.go-top::before { position: absolute; right: 1rem; bottom: 50%; font-family: "xeicon"; font-size: 0.65rem; content: ''; line-height: 0.4; }
.go-top::after { position: absolute; right: 1rem; top: 50%; font-family: "xeicon"; font-size: 0.65rem; content: ''; line-height: 0.4; }

.footer { background-color: #333333; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-weight: 400; text-align: center; }
.footer .request .control { overflow: hidden; position: fixed; right: 0; top: 0; z-index: 102; width: 4rem; height: 4rem; background-color: #000; font-size: 0.75rem; font-weight: 700; color: #fff; text-align: center; line-height: 4rem; }
.footer .request .group { position: fixed; right: -47.5rem; top: 0; z-index: 101; width: 47.5rem; height: 100%; padding: 4rem; background-color: #000; color: rgba(255, 255, 255, 0.7);}
.footer .request .group::before { position: fixed; right: 0; top: 0; z-index: -1; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.6); content: ''; opacity: 0; }
.footer .request .item { width: 25.75rem; max-width: 100%; margin: 0 auto; }
.footer .request .item h2 { margin-bottom: 0.5rem; font-size: 3rem; color: #fff; text-align: left; }
.footer .request .item button { width: 100%; height: 3rem; margin-top: 0.5rem; border: 3px solid #fff; font-size: 0.95rem; font-weight: 700; color: #fff; text-align: center; }
.footer .request .form-textbox { width: 100%; height: 4rem; border: 0 none; border-bottom: 1px solid #4d4d4d; background: none; color: rgba(255, 255, 255, 0.7); text-align: left; }
.footer .request textarea.form-textbox { height: 5.25rem; padding-top: 1.25rem; }
.footer .request .form-select { overflow: hidden; position: relative; height: 4rem; border-bottom: 1px solid #4d4d4d; line-height: 4rem; }
.footer .request .form-select::after { position: absolute; right: 0; top: 0; width: 2rem; height: 100%; background-color: #000; font-family: "xeicon"; font-size: 1.2rem; color: #808080; content: ''; line-height: inherit; }
.footer .request .form-select select { width: 100%; height: 100%; border: 0 none; background: none; }
.footer .request .form-set { display: block; padding: 0.25rem 0; text-align: right; }
.footer .request .agree { line-height: 1.538; }
.footer .request .agree .title { margin: 0.5rem 0; font-size: 0.75rem; font-weight: 300; text-align: left; }
.footer .request .agree .box { overflow: hidden; overflow-y: auto; border: 1px solid #4d4d4d; height: 8.5rem; padding: 0 0.8rem; font-size: 0.65rem; text-align-last: left; white-space: pre-line; }
.footer .request .agree .box::after { display: block; height: 0.8rem; content: ''; }
.footer .request.active .group { right: 0; -webkit-transition: all 0.3s 0.1s; transition: all 0.3s 0.1s; }
.footer .request.active .group::before { width: 100%; opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.footer .request.active .control { position: fixed; right: 47.5rem; top: 1rem !important; width: 3rem; height: 3rem; margin-right: 1.5rem; border-radius: 100%; }
.footer .request.active .control::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; font-size: 2rem; content: ''; line-height: 3.2rem; -webkit-transition: all 0.2s; transition: all 0.2s; }
.footer .request.active .control:hover::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s; transition: all 0.2s; }

/* 메인푸터 */
.wrap_main .footer { display: block; height: auto !important; background-color: #333333; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-weight: 400; text-align: center; }
.wrap_main .footer .fp-tableCell { height: auto !important; padding: 0;display: block; }

#fnb { display: inline-block; position: relative; z-index: 0; width: 72rem; max-width: 100%; height: 3.5rem; margin: 0 auto; text-align: left; line-height: 3.5rem; }
#fnb::after { position: absolute; left: 50%; bottom: 0; width: 1000%; height: 1px; margin-left: -500%; background-color: #3c3c3c; content: ''; }
#fnb .menu { float: left; }
#fnb .menu a { color: #fff;font-size: .8rem;font-weight: 700; letter-spacing:-.45px; font-weight: 300; }
#fnb .menu a:first-of-type { color:#ffa800;font-weight: 700; }
#fnb .menu a + a::before { display: inline-block; width: 1px; height: 0.7rem; margin: 0 1rem; background-color: #707070; content: ''; vertical-align: middle; }
#fnb .sns { float: right; }
#fnb .sns .label { margin-right: 1rem; color: #fff; }
#fnb .sns .label strong { font-weight: 700; }
#fnb .sns a { display: inline-block; overflow: hidden; width: 1.8rem; height: 1.8rem; margin-right: 0.5rem; border-radius: 100%; background-color: rgba(255, 255, 255, 0.7); text-align: center; line-height: 1.8rem; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }
#fnb .sns a.instagram { background: url("/images/common/layout/instagram.png") no-repeat center center/cover; }
#fnb .sns a.facebook { background:#3B5998; }

#fnb .sns a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; font-size: 1rem; color: #fff; content: ''; line-height: inherit; }
#fnb .sns a.facebook::before { content: ''; }
#fnb .sns a:hover, #fnb .sns a:focus, #fnb .sns a:active { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

#siteinfo { clear: both; position: relative; width: 72rem; max-width: 100%; margin: 1.5rem auto 0; padding: 0 9rem 1.8rem 13rem; background: url("/images/footer_logo.png") no-repeat 0 0.25rem; text-align: left; }
#siteinfo .customer { position: absolute; right: 1rem; top: 0; font-size: 1.25rem; color: #fff; text-align: center; line-height: 1.5; }
#siteinfo .customer span { display: block; font-size: 0.7rem; font-weight: 700; color: #fff; opacity: .6; line-height: .9rem; letter-spacing: .7px; }

#siteinfo .customer strong { font-weight: 600;font-size:1.25rem;  letter-spacing: .25px;}
#siteinfo address { display: inline-block; vertical-align: middle;font-size:.8rem;color:#fff; opacity: .35; font-weight: 400; letter-spacing: -.45px;}
#siteinfo span { display: inline-block; vertical-align: middle;font-size:.8rem; color:#fff;opacity: .35; font-weight: 300;}
#siteinfo .copyright { letter-spacing: 1px;font-size:.8rem;color:#fff;opacity: .35; }

#contents { max-width:1280px; margin: 5.5rem auto 10rem; }

.wrap_main #contents{ width: 100%; max-width: 100%; margin: 0; }
.wrap_sub #main{ padding-top: 6.5rem; }

#snb .snb_tit_wrap { height: 10rem;line-height: 10rem; }
#snb .snb_tit_wrap .layout { height: 100%; }
#snb .snb-title { font-size: 2rem; color: #000;  font-weight: 900; letter-spacing: -2.5px;display: inline;position: relative; }
#snb .snb-title:before { width:.5rem;height: .5rem; display: block; content:""; position: absolute; bottom:0; right:0; border-radius: 50%; background: #ffa800; bottom:.3rem; right:-1.25rem; }
.h3_tit { font-size:1.5rem;font-weight: 700;letter-spacing: -1.75px; color:#000000;position: relative;padding-top:5.5rem;padding-bottom:5rem;border-bottom:1px solid #333333; }
.h3_tit.first { padding-top:0; }
.h3_tit.no_bd { border:0; }
.h3_tit:after { width:.45rem;height: .45rem;content:"";display: inline-block;background: #ffa800;border-radius: 50%; margin-left:.6rem; vertical-align: -0.3rem;}
.h3_tit span { color:#ffa800; }

.h4_tit { margin-top:3.25rem; margin-bottom:2rem; font-size:1.3rem;color:#333;font-weight: 700; }
.h4_tit.first { margin-top:0; }
.h4_tit+p { margin-bottom:2.5rem;font-size:1.2rem;color:#555; }

#snb nav { overflow: hidden; overflow-x: auto; position: relative; height: 3.5rem; border-top: 1px solid rgba(255, 255, 255, 0.3); line-height: 3.5rem; white-space: nowrap; }
#snb nav li { display: inline; vertical-align: top; }
#snb nav a { display: inline-block; position: relative; z-index: 0; margin: -1px 1.5rem 0; padding: 0 0.75rem; font-size: 0.9rem; color: #fff; vertical-align: top; }
#snb nav a::before { position: absolute; left: 50%; top: 0; width: 0; height: 4px; background-color: #fff; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }
#snb nav a:hover::before, #snb nav a:focus::before { left: 0; width: 100%; }
#snb nav .active a { border: 0 none !important; }
#snb nav .active a::before { left: 0; width: 100%; } 

#snb .snb_wrap { position: relative;z-index: 99; }
#snb .snb_wrap:after { content: "";display: block; clear: both; }
#snb .snb_wrap:before { display: block; position: absolute; left:0; top:0; content: ""; background: #ffa800; width:100%; height: 100%; }
#snb .snb_wrap .home { width:3.75rem;height: 3rem; display: block; position: relative; float: left;border-left:1px solid #eb9e00; }
#snb .snb_wrap .home img { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);color:#fff;width:1.1rem;height: 1rem; } 
#snb .snb_wrap .snb_select { float: left;border-left:1px solid #eb9e00; position: relative; }
#snb .snb_wrap .snb_select:last-of-type { border-right: 1px solid #eb9e00; }
#snb .snb_wrap .snb_select .select_active { width: 11.75rem;height: 3rem;line-height: 3rem;position: relative; padding:0 1rem 0 1.5rem; text-align: left; }
#snb .snb_wrap .snb_select .select_active i { color:#fff; font-size: .8rem; position: absolute; top:50%; right:1rem; transform: translateY(-50%); }
#snb .snb_wrap .snb_select .select_active.on i { transform: translateY(-50%) rotate(180deg);  }
#snb .snb_wrap .snb_select .select_active span { position: relative;color:#fff;font-size:.8rem; font-weight: 500; }
#snb .snb_wrap .snb_select .select_list { display: none; position: absolute; left:0;top:100%; width:100%; z-index: 1; background: #fff;padding:1rem 1.5rem;border:1px solid #A5A5A5;border-top:0; }
#snb .snb_wrap .snb_select .select_list li { border-top:1px solid #fff; position: relative; margin-top:.8rem; }
#snb .snb_wrap .snb_select .select_list li:first-of-type { margin-top:0; } 
#snb .snb_wrap .snb_select .select_list li a { display: block;position: relative;text-align: left; }
#snb .snb_wrap .snb_select .select_list li a span { font-weight: 300;color:#777777; }
#snb .snb_wrap .snb_select .select_list li a:hover span { color:#333;font-weight: 400; }

#snb .sub_visual { height:21.65rem;background: #ddd;position: relative;overflow: hidden; }
#snb .sub_visual.on:before { transform: translate(-50%, -50%) scale(1); }
#snb .sub_visual:before { position: absolute;left:50%;top:50%; transform: translate(-50%, -50%) scale(1.3);content:"";width:100%;height: 100%; transition: all 5s .5s;}

#snb.snb1_1 .sub_visual:before { background: url(/images/sub_visual01.jpg) no-repeat center center/cover; }
#snb.snb1_2 .sub_visual:before { background: url(/images/common/layout/sub_visual01.jpg) no-repeat center center/cover; }
#snb.snb1_3 .sub_visual:before { background: url(/images/common/layout/sub_visual01_03.png) no-repeat center center/cover; }
#snb.snb1_4 .sub_visual:before { background: url(/images/common/layout/sub_visual01_04.png) no-repeat center center/cover; }
#snb.snb1_5 .sub_visual:before { background: url(/images/common/layout/sub_visual01_05.png) no-repeat center center/cover; }
#snb.snb1_6 .sub_visual:before { background: url(/images/common/layout/sub_visual01_06.png) no-repeat center center/cover; }
#snb.snb1_7 .sub_visual:before { background: url(/images/common/layout/sub_visual01_07.png) no-repeat center center/cover; }

#snb.snb2_1 .sub_visual:before { background: url(/images/common/layout/sub_visual02_01.png) no-repeat center center/cover; }
#snb.snb2_2 .sub_visual:before { background: url(/images/common/layout/sub_visual02_02.png) no-repeat center center/cover; }
#snb.snb2_3 .sub_visual:before { background: url(/images/common/layout/sub_visual02_03.png) no-repeat center center/cover; }
#snb.snb2_4 .sub_visual:before { background: url(/images/common/layout/sub_visual02_04.png) no-repeat center center/cover; }
#snb.snb2_5 .sub_visual:before { background: url(/images/common/layout/sub_visual02_05.png) no-repeat center center/cover; }
#snb.snb2_6 .sub_visual:before { background: url(/images/common/layout/sub_visual02_06.png) no-repeat center center/cover; }
#snb.snb2_7 .sub_visual:before { background: url(/images/common/layout/sub_visual02_07.png) no-repeat center center/cover; }
#snb.snb3_1 .sub_visual:before { background: url(/images/common/layout/sub_visual03_01.png) no-repeat center center/cover; }
#snb.snb3_2 .sub_visual:before { background: url(/images/common/layout/sub_visual03_02.png) no-repeat center center/cover; }
#snb.snb3_3 .sub_visual:before { background: url(/images/common/layout/sub_visual03_03.png) no-repeat center center/cover; }

#snb.snb4_1 .sub_visual:before { background: url(/images/common/layout/sub_visual04_01.png) no-repeat center center/cover; }
#snb.snb4_2 .sub_visual:before { background: url(/images/common/layout/sub_visual04_02.png) no-repeat center center/cover; }
#snb.snb4_3 .sub_visual:before { background: url(/images/common/layout/sub_visual04_03.png) no-repeat center center/cover; }
#snb.snb4_4 .sub_visual:before { background: url(/images/common/layout/sub_visual04_04.png) no-repeat center center/cover; }
#snb.snb4_5 .sub_visual:before { background: url(/images/common/layout/sub_visual04_05.png) no-repeat center center/cover; }
#snb.snb4_6 .sub_visual:before { background: url(/images/common/layout/sub_visual04_06.png) no-repeat center center/cover; }

#snb.snb5_1 .sub_visual:before { background: url(/images/common/layout/sub_visual05_01.png) no-repeat center center/cover; }
#snb.snb5_2 .sub_visual:before { background: url(/images/common/layout/sub_visual05_02.png) no-repeat center center/cover; }
#snb.snb5_3 .sub_visual:before { background: url(/images/common/layout/sub_visual05_03.png) no-repeat center center/cover; }

#snb.snb8_1 .sub_visual:before { background: url(/images/common/layout/sub_visual08_01.png) no-repeat center center/cover; }
#snb.snb8_2 .sub_visual:before { background: url(/images/common/layout/sub_visual08_02.png) no-repeat center center/cover; }
#snb.snb8_3 .sub_visual:before { background: url(/images/common/layout/sub_visual08_03.png) no-repeat center center/cover; }

/* 견적문의 */
.request_order { width:6.7rem;height:6.7rem;position: fixed;right:4rem;top:50%;background: #ffa800;display: table; margin-top:8rem; border-radius: 50%;z-index: 99;box-shadow: 0px .15rem .3rem rgba(0, 0, 0, 0.09); }
.request_order span { display: table-cell;vertical-align:middle;text-align: center;color:#fff; }
.request_order span em { font-size:.5rem;color:#fff; font-weight: 400; letter-spacing: 1px;}
.request_order span i { font-weight: 900;font-size: 1.1rem; letter-spacing: -1.1px; }
.request_order_page { position: fixed;top:0;right:-100%;height: 100%;z-index: 101; padding:0 2.5rem; display: table;transition: all .5s; width:40.05rem;visibility: hidden; background: #fff;}
.request_order_page::before { position: absolute;left: -1000%;top: 0;z-index: -1;width: 0;height: 100%;background-color: rgba(0, 0, 0, 0.6);content: '';
opacity: 0; }
.request_order_page.on::before { width: 1000%;opacity: 1;
-webkit-transition: opacity 0.3s;transition: opacity 0.3s; }
.request_order_page .inner { display: table-cell;vertical-align: middle; padding:0 2rem; }
.request_order_page .close { position: absolute;left:-1.7rem;top:50%; width:3.4rem; height: 3.4rem; transform: translateY(-50%);background: #ffa800; border-radius: 50%; color:#fff;line-height: 3.4rem; box-shadow: 0px .15rem .3rem rgba(0, 0, 0, 0.09); }
.request_order_page .close i { font-size:1rem; }
.request_order_page.on { right:0; visibility: visible; }
.request_order_page .inner .tit { display: block;margin-bottom:2.75rem;color:#000;font-size:1.5rem; text-align: center; }
.request_order_page .inner .request_form .box_wrap .box { width:49%;float:left;margin-left:2%; }
.request_order_page .inner .request_form .box_wrap .box:first-of-type { margin-left:0; }
.request_order_page .inner .request_form .box_wrap .box label { display: block;font-size:.85rem;margin-bottom:.25rem;color:#333;font-weight: 400; }
.request_order_page .inner .request_form .box_wrap .box input { width:100%; height: 2.75rem; text-indent: 1rem;padding-right:1.25rem; }


.request_order_page .inner .request_form .box_wrap .box input::placeholder { font-style: normal; color:#c8c8c8;}
.request_order_page .inner .request_form .box_wrap .box textarea { width:100%;padding:.5rem 1.25rem; }
.request_order_page .inner .request_form .box_wrap .box textarea::placeholder { font-size:.8rem;color:#c8c8c8; }
.request_order_page .inner .request_form .box_wrap { overflow: hidden;margin-top:1.25rem; }
.request_order_page .inner .request_form .box_wrap:first-of-type { margin-top:0; }
.request_order_page .inner .request_form .box_wrap .box.full { width:100%;margin:0; }
.request_order_page .inner .request_form .box_wrap .box select { height: 2.75rem;width:100%;  -webkit-appearance: none; -moz-appearance: none;appearance: none; position:relative; text-indent: 1rem; background: url(/images/common/layout/select_arr.png) no-repeat center right 1.25rem;padding-right:1.25rem; color:#333; }
.request_order_page .inner .sm_tit { display: block; margin:1rem 0 .5rem 0;font-size:.85rem;color:#333333; }
.request_order_page .inner .request_form .agree_box { padding:1rem; border:1px solid #DDDDDD; }
.request_order_page .inner .request_form .agree_box .ag_inner { height: 8.75rem;overflow-y: auto; }
.request_order_page .inner .request_form .agree_box .ag_inner p b { color:#000;display: block; margin:.5rem 0 .25rem 0; }
.request_order_page .inner .request_form .agree_box .ag_inner p b.first { margin-top:0; }
.request_order_page .inner .request_form .submit_bt { text-align: center;margin-top:2.5rem; }
.request_order_page .inner .request_form .submit_bt button { width:8.65rem;height: 2.6rem;line-height: 2.6rem; color:#fff;background: #ffa800; }
.request_order_page .inner .request_form .submit_bt button span { font-size:.85rem; }

@media (max-width:1920px){
    #header .logo { left:1rem; }
    #header .util { right:1rem; }
}
@media (max-width:1800px){
    .request_order { right:2rem;margin-top:0; }
}

@media (max-width: 1500px) {
  #gnb > li { width: 6rem; } 
}
@media (max-width: 1440px) { html { font-size: 18px; }

  #header.active > nav:before { display: none; }
  .container { padding:0 1rem;width:100% !important; }
  #snb .snb-title { height: 12rem; line-height: 12rem; }
  #header { padding:0; }
  #header.active { background: #fff; }
  #header.active .util .recruit { display: inline-block;border:1px solid #ffa800; background: #ffa800; }
  #header.active .util .lang { display: inline-block; }
  #header.active .util .lang a { color:#000; }
  #header.active .util .lang .label::after { color:#000; }

  #header.active .logo a img { margin-top:-1.1rem; }

  .footer .request .group { right: -100%; width: calc(100% - 6.5rem); }
  .footer .request.active .control { position: fixed; right: calc(100% - 6.5rem); }
  .go-top { left: auto; right: 0; margin-left: 0; }
  #siteinfo address { display: block; }


  #header .util { right: 1rem !important; padding-right: 0; }

  #header .util .menu .recruit { width: 3.5rem; height: 3.5rem; padding: 0.8rem; line-height: 1.2; }
  #gnb { visibility: hidden; overflow: hidden; height: 0; opacity: 0; -webkit-transition: all 0s; transition: all 0s; }
  #header.active .util .menu .sitemap::before { color: #000; }
  #header.active > nav { top: calc(6.5rem - 1px); border-top: 1px solid #ddd; background-color: #fff; }
  #header.active #gnb { visibility: visible; display: block; height: auto; top: 0; width: 100%; padding: 2rem; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  #header.active #gnb > li { display: block; overflow: hidden; width: 100%; height: 2.5rem; padding: 0; }
  #header.active #gnb > li > a { position: relative; font-size: 1.1rem; color: #516468; line-height: 2.5rem; padding-bottom:0; margin-bottom:0;text-align: left; }
  .wrap_main #header.active #gnb > li > a { position: relative; font-size: 1rem; color: #516468; line-height: 2.5rem; padding-bottom:0; margin-bottom:0;text-align: left; }
  #header.active #gnb > li > a::before { position: absolute; right: 0; top: 50%; font-family: "xeicon"; font-size: 1.5rem; color: #000; content: ''; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

  #header.active #gnb > li + li { border-top: 1px solid #ddd; }
  #header.active #gnb > li.active { height: auto; }
  #header.active #gnb > li.active > a { color: #000; }
  #header.active #gnb > li.active > a::before { content: ''; }
  #header.active #gnb div { visibility: hidden !important; overflow: hidden; height: 0 !important; -webkit-transition: all 0.3s; transition: all 0.3s; }
  #header.active #gnb .active > div { visibility: visible !important; height: auto !important; }
  #header.active #gnb .active > div.depth2 { padding: 0.5rem 0 1rem !important; }
  #header.active #gnb .active > div.depth3 { margin: 0.5rem 0; }
  #header.active #gnb .depth2 { width: 100%; padding: 0 !important; }
  #header.active #gnb .depth2::before { display: none; }
  #header.active #gnb .depth2 a { color: #333; line-height: 1.8;text-align: left;font-size:.9rem; }
  .wrap_main #header.active #gnb .depth2 a { color: #333; line-height: 1.8;text-align: left;font-size:.9rem; }

  #header.active #gnb .depth2 ul { padding:.5rem 0; }

  #header.active #gnb .depth3 { margin: 0; }
  #header.active #gnb .depth3 li + li { margin-top: 0; }
  #header.active #gnb .depth2 li.active a { color:#ffa800; }
  .go-top { display: none; }
.footer .request .control { width: 3.5rem; height: 3.5rem; padding: 0.8rem; border-bottom: 1px solid #3c3c3c; line-height: 1.2; }
.footer .request .control::before { margin-bottom: 0.5rem; line-height: 2rem !important; }


  /* #siteinfo { margin-top: 0.5rem; padding: 0; background: none; text-align: center; }
  #siteinfo .customer { display: none; }
  #siteinfo .copyright { margin-top: 0.5rem; padding: 0.5rem 0; border-top: 1px solid #3c3c3c; }
  #fnb { height: 2.5rem; line-height: 2.5rem; }
  #fnb .menu { border-right: 0 none; }
  #fnb .sns { margin-right: 0; }
  #fnb .sns a { width: 1.3rem; margin: 0; background: none; }
  #fnb .sns a::before { color: #fff; }  */

.ts_inner { margin-top:.5rem; }
.ts_inner .chks {display:inline-block;position:relative; font-weight:normal; margin-right:1rem;}
.ts_inner .chks:last-of-type { margin-right:0; }
.ts_inner .chks label { font-size:.7rem;color:#555; }

.ts_inner .chks input[type="checkbox"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.ts_inner .chks input[type="checkbox"] + label {display:inline-block;vertical-align:middle;position:relative;padding-left:1.5rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.ts_inner .chks input[type="checkbox"] + label:before {content:'';position:absolute;left:0;top:0;margin:0;width:1.05rem;height:1.05rem;text-align:center;background:#fff;border:1px solid #DFDFDF;box-sizing:border-box;}
.ts_inner .chks input[type="checkbox"] + label:after { content: "";display: block;position: absolute;width: .5rem;height: 0.3rem;left: .25rem;top: .3rem;border-width: 0 0 .1rem .1rem;border-style: solid;transform: rotate(-45deg); border-color: #ddd; }
.ts_inner .chks input[type="checkbox"]:checked + label:before {background:#ffa800;border:1px solid #ffa800}
.ts_inner .chks input[type="checkbox"]:checked + label:after {border-color:transparent transparent #fff #fff;}

  #fnb { padding:0 1rem; }
  #siteinfo { background: url(/images/common/layout/logo_footer.png) no-repeat 1rem 0.25rem; }
}
@media (max-width:1280px){
    .layout { padding:0 1rem; }
    #contents { padding:0 1rem; }
    .wrap_main #contents { padding:0; }
}

@media (max-width: 1024px) { 
    #contents { margin: 4rem auto 6rem; }
    #snb .snb-title { height: 10rem; line-height: 10rem; }
    #snb nav { height: 3rem; line-height: 3rem; }
    #snb nav a { margin: -1px 0.5rem 0; padding: 0 0.5rem; }
    .request_order_page { width:90%;display: block;padding:2rem 2.5rem; }
    .request_order_page .inner { overflow-y: auto;display: block;height: 100%; padding:0; }
 }

@media (max-width: 768px) { html { font-size: 16px; }

    .footer .request .group { width: calc(100% - 3rem); padding: 2rem 3rem; }
    .footer .request.active .control { right: calc(100% - 3rem); width: 2rem; height: 2rem; margin-right: 0.5rem; padding: 0; }
    .footer .request.active .control::before { font-size: 1.5rem; }
    #fnb .menu a + a::before { margin: 0 0.5rem; }
    #fnb .sns .label { margin-right: 0.5rem; } 
    #siteinfo { padding:0 11rem 1.8rem 1rem;background: none; }
    
}

@media (max-width:640px){html { font-size: 15px; }
    .request_order { width:6rem;height: 6rem;right:1rem; }
    .request_order span em { font-size:.3rem; }
    .request_order span i { font-size:.8rem; }
    .request_order_page { padding:4rem 2rem; }
    .h3_tit br{ display: none; }
   
}

@media (max-width: 500px) { 
    .request_order_page .inner .request_form .box_wrap .box { width:100%;margin-left:0; margin-top:1rem; }
    .request_order_page .inner .request_form .box_wrap .box:first-of-type { margin-top:0; }
    #fnb .menu { float: none;text-align: center; }
    #siteinfo { padding: 0 1rem 1.5rem 1rem;text-align: center; }
    #fnb .sns { float: none; text-align: center; }
    #siteinfo .customer { right: auto;top: auto;margin-top: 1rem;position: relative; }

    #snb .snb_wrap .layout { padding:0; }
    #snb .snb_wrap .home { width:3rem }
    #snb .snb_wrap .snb_select .select_active { width:100%; }
    #snb .snb_wrap .snb_select { width:calc(50% - 1.5rem); }
}

@media (max-width: 440px) { 
#footer .request .item h2 { font-size: 2rem; }
.footer .request textarea.form-textbox { height: 5rem; padding-top: 1rem; }
.footer .request .form-textbox, #footer .request .form-select { height: 3rem; line-height: 3rem; }
  #fnb .menu { padding: 0 0 0 0.5rem; }

  #fnb .sns .label { display: none; }

  #siteinfo span:nth-child(5) { display: block; margin-left: 0; } 

  #header .util .lang { margin-right:.5rem; }
  #header .util .recruit { margin-right:.5rem;font-size:.7rem; }

  #fnb .menu a { font-size:.8rem; }
}