@charset "utf-8";

/*
================================================================================
LAYOUT
================================================================================
*/

/* Loading */
/*.loaded{background:url(/public/images/common/loading.gif) 50% 250px no-repeat;}*/

/* header */
#wrap {position:relative;min-width: 1350px;}
.innerWrap {position:relative;width: 1300px;margin:0 auto;} 
@media only screen and (max-width: 1080px){ 
	.innerWrap  {width: 100% !important;padding-left: 25px !important;padding-right: 25px !important;max-width: inherit;}
}
@media only screen and (max-width: 768px){ 
	.innerWrap {padding-left: 20px !important;padding-right: 20px !important;}
}
@media only screen and (max-width: 480px){ 
	.innerWrap {padding-left: 15px !important;padding-right: 15px !important;}
}

#header {width:100%;height: 100px;position:absolute;left:0;top: 0px;z-index: 910;}
#header:before{content:'';display:block;width:100%;height:1px;background:rgba(255,255,255,0.2);position:absolute;left:0;top: 99px;}
#header a {text-decoration: none;display: block;}
#header .innerWrap{ width: auto;margin:0 auto; padding:0 80px;}
.gnb_wrap{position:relative;width:100%;}
#mGnb { display:none;}

/* logo */
#header .logo {display: table;position:absolute;top: 0px;left: 80px;line-height:0;width: 175px;height: 100px;z-index: 10;}
#header .logo a {display:table-cell;vertical-align: middle;width: 100%;box-sizing:border-box;background: url('/public/images/common/ci_w.svg') no-repeat 0% 50%;font-size: 0;transition: all .01s ease-in-out;}

/* topBox */
#header .topBox{display:none;}

/* bn_siteMap */
.bn_siteMap{width: 100px;height: 100px;display: block;vertical-align:middle;text-align:center;position: absolute;right: 0;top: 0;}
.bn_siteMap a{width: 100%;height: 100%;vertical-align:middle;margin:0 auto;padding: 0 !important;display: block;}
.bn_siteMap span{font-size:0;position:absolute;top:50%;right: 50%;margin-right: -15px;display:inline-block;width: 30px;height: 3px;background: #fff;}
.bn_siteMap span:before,
.bn_siteMap span:after{content:'';position:absolute;top: 0;left:0;background: #fff;height: 3px;transition:all .5s cubic-bezier(.535,0,0,1) 0s;-webkit-transition:all .5s cubic-bezier(.535,0,0,1) 0s;}
.bn_siteMap span:before{transform: translateY(-7px);width:100%;top: 0px;}
.bn_siteMap span:after{transform: translateY(7px);width:100%;top: 0px;}
.bn_siteMap a:hover span:before, .bn_siteMap a:focus span:before{ width:65%;}
.bn_siteMap a:hover span:after, .bn_siteMap a:focus span:after{ width:55%;}

/* gnb menu */
#gnb {text-align: center;padding-right: 150px;margin: 0 auto; } /*메뉴위치*/
#gnb:after {display:block; content:""; clear:both;}
#gnb > li {text-align:center;display: inline-block;vertical-align: top;min-width: 180px;margin: 0 -2px;position: relative;word-break: keep-all;}
#gnb > li.pc_non{ display:none;}
#gnb > li .tit{position:relative;height: 100px;display: table;width: 100%;z-index: 11;}
#gnb > li .tit > a {color: #fff;font-size: 1.125em;font-weight: 700;display: table-cell;vertical-align: middle;line-height: 35px;width: 100%;padding: 0 50px;letter-spacing: -0.035em;transition: background-color .3s;}
#gnb > li .tit a:after{content:""; position:absolute; bottom:0; left:50%; width:0; height:1px;background-color: rgba(255,255,255,0.3); transform:translateX(-50%); transition:width .3s;}
#gnb > li .tit a:hover,
#gnb > li .tit a:focus,
#gnb > li .tit a:active,
#gnb > li:hover .tit a {color: #fff !important; }
/*#gnb > li.on .tit a{color: var(--mainColor); }*/
#gnb > li .tit a:hover:after,
#gnb > li .tit a:focus:after,
#gnb > li .tit a:active:after,
#gnb > li:hover .tit a:after,
#gnb > li.on .tit a:after{width: 80%;}

/* 하위메뉴 */
#gnb > li > div {display: none;opacity: 0;transition: visibility .3s, opacity .3s;}
#gnb > li .ulWrap{position:absolute;top:0;left:0px;z-index:99;width:100%;text-align:left; padding-top: 100px;opacity:0;filter:Alpha(opacity=0);}
#gnb > li .ulWrap:before{content:"";position:absolute;top:-20px;left:0px;right:0px;height:0; opacity:0; filter:Alpha(opacity=0);background: linear-gradient( 155deg, #00996a, #00d996 120%);-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 > li.over .ulWrap:before,
#gnb > li:hover .ulWrap:before, 
#gnb > li:focus .ulWrap:before{height:calc(100% + 20px);opacity: 1;filter:Alpha(opacity=100);}
#gnb > li .ulWrap{visibility:visible;opacity:1;filter:Alpha(opacity=100);}
#gnb > li.over .ulWrap > ul > li,
#gnb > li.on .ulWrap > ul > li,
#gnb > li:hover .ulWrap > ul > li, 
#gnb > li:focus .ulWrap > ul > li{ opacity: 0; filter: Alpha(opacity=0); -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 > li.over .ulWrap > ul > li{opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s;}
#gnb > li.over .ulWrap > ul > li:nth-child(1){-webkit-transition-delay: 0.1s;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay:0.1s;}
#gnb > li.over .ulWrap > ul > li:nth-child(2){-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay:0.2s;}
#gnb > li.over .ulWrap > ul > li:nth-child(3){-webkit-transition-delay: 0.3s;-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay:0.3s;}
#gnb > li.over .ulWrap > ul > li:nth-child(4){-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay:0.4s;}
#gnb > li.over .ulWrap > ul > li:nth-child(5){-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.4s;transition-delay:0.5s;}
#gnb > li.over .ulWrap > ul > li:nth-child(6){-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-o-transition-delay: 0.6s;-ms-transition-delay: 0.4s;transition-delay:0.6s;}
#gnb > li.over .ulWrap > ul > li:nth-child(7){-webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s;-o-transition-delay: 0.7s;-ms-transition-delay: 0.4s;transition-delay:0.7s;}
#gnb > li.over .ulWrap > ul > li:nth-child(8){-webkit-transition-delay: 0.8s;-moz-transition-delay: 0.8s;-o-transition-delay: 0.8s;-ms-transition-delay: 0.4s;transition-delay:0.8s;}

#gnb .depth2{position: relative;overflow: hidden;margin:0 !important;width:100%;transition: opacity .3s, height .3s;-webkit-transition:opacity .3s, height .3s;padding: 1em 0 1.5em 0;opacity:1;opacity: 0;transform: translateY(15px);}
#gnb > li.over > div {z-index:10;opacity: 1;}
#gnb > li:hover .depth2,
#gnb > li:focus .depth2,
#gnb > li.over .depth2{opacity: 1;transform: translateY(0);}
#gnb > li > .ulWrap > ul > li{color: #7c8081;text-align:center;line-height:1.4em;font-size:1em;transition:color .3s;-webkit-transition:color .3s;}
#gnb > li > div > ul > li > a {display: inline-block;vertical-align: top;position: relative;color: rgba(255,255,255,0.8);font-size: 0.95em;text-align: center;line-height: 1.4em;padding: 6px 0px;margin: 0;letter-spacing: -0.04em;font-weight: 500;}
#gnb > li > .ulWrap > ul > li > a:focus,
#gnb > li > .ulWrap > ul > li > a:active,
#gnb > li > .ulWrap > ul > li > a:hover{color: #fff;text-decoration: underline;}

/* target */
#gnb > li > .ulWrap > ul > li.target a:after,
#gnb > li > .ulWrap > ul > li a[target="_blank"]:after{content:'';display:inline-block;margin: -3px 0 0 10px;background:url('/public/images/common/ic_blank_b.gif') no-repeat 0 0;width:14px;height:14px;vertical-align: middle;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}
#gnb > li > .ulWrap > ul > li.target > a:focus:after,
#gnb > li > .ulWrap > ul > li.target > a:active:after,
#gnb > li > .ulWrap > ul > li.target > a:hover:after,
#gnb > li > .ulWrap > ul > li a[target="_blank"]:focus:after,
#gnb > li > .ulWrap > ul > li a[target="_blank"]:active:after,
#gnb > li > .ulWrap > ul > li a[target="_blank"]:hover:after{ background-image:url('/public/images/common/ic_blank.gif')}
#gnb > li > .ulWrap > ul > .arrow.on .depth3,
#gnb > li > .ulWrap > ul > .arrow .depth3{display: none;}

/* block */
#mobileblock, #pcblock{position:fixed;z-index:50;top: 0px;left:0;width:100%;height:100%;background: rgba(0,0,0,0.6);display:none;}

/* quickmenu */
.quickmenu{position:absolute;right: 100px;top: 50%;margin-top: -22px;}
.quickmenu .bn_close,
.quickmenu li > a br{display:none;}
.quickmenu li{ display:inline-block;}
.quickmenu li > a{display:block;border:1px solid #fff;border-radius:45px;line-height: 43px;font-size:0.95em;color:#fff;padding: 0 2em;font-weight: 500;}
.quickmenu li > a:hover,
.quickmenu li > a:focus{ background-color:#fff; color:#222;}
.quickmenu li:nth-child(2) > a{ border-color:#00d996; color:#00d996;}
.quickmenu li:nth-child(2) > a:after{content:"+";display:inline-block;vertical-align:middle;margin: -2px 0 0 10px;font-size: 1.25em;}
.quickmenu li:nth-child(2) > a:hover,
.quickmenu li:nth-child(2) > a:focus{ border-color:var(--mainColor); background-color:var(--mainColor); color:#fff;}

/* #header.on */
#header.on:before, #header.on:after{ display:block;}
#header.on .ulWrap{opacity:1;}

/* #header.fix */
#header.fix {position:fixed;top:0;left:0;width:100%;animation:slide-down 0.7s;background-color: rgba(255, 255, 255, 0.95);backdrop-filter: blur(30px);height: 85px;box-shadow: 0 5px 10px rgb(0, 0, 0, 0.1);z-index: 10000;}
#header.fix .innerWrap{width:100%;}
#header.fix .logo {width: 145px;height: 85px;}
#header.fix .logo a{background-image: url('/public/images/common/ci.svg'); }
#header.fix:before{top: 69px;}
#header.fix #gnb{padding-left: 50px;}
#header.fix #gnb > li .tit{height: 85px;}
#header.fix #gnb > li .tit > a{ font-size:1.125em; color:#222}
#header.fix #gnb > li .ulWrap{ padding-top:85px;} 
#header.fix .bn_siteMap{ height: 85px;right:0px;}
#header.fix .bn_siteMap span,
#header.fix .bn_siteMap span:before, #header.fix .bn_siteMap span:after{ background-color:#555}
#header.fix .quickmenu{ margin-top:-17px; right:85px;}
#header.fix .quickmenu li > a{ border-color :#888; line-height: 35px;font-size:0.88em;color:#333;padding: 0 1.5em; }
#header.fix .quickmenu li > a:hover,
#header.fix .quickmenu li > a:focus{ background-color:rgba(0,0,0,0.5); color:#fff;}
#header.fix .quickmenu li:nth-child(2) > a{border-color: var(--mainColor);color: var(--mainColor);} 
#header.fix .quickmenu li:nth-child(2) > a:hover,
#header.fix .quickmenu li:nth-child(2) > a:focus{background-color:var(--mainColor); color:#fff; }
 

/* container */
#container {padding-top:0; }
#container:after {display:block; content:""; clear:both;}

/* footer */
#footer{position:relative;padding: 80px 0 100px 0;background: #111;}
#footer .info address{display: block;clear: both;font-weight: 500;}
#footer .info address span{display: block;vertical-align: middle;position: relative;line-height: 1.4em;font-size: 0.95em;margin-bottom: 10px;color: #888;}
#footer .info address span em{display:inline-block;word-break: keep-all;position: relative;}
#footer .info address span em:after{content:'';display: inline-block;width:1px;height: 13px;vertical-align: middle;margin: 0 1em;background: rgba(255,255,255,0.15);}
#footer .info address span em:last-child:after{display:none;}
#footer .info address span b{font-weight: 500; display:inline-block;padding-right:10px;color: #aaa;}
#footer .info address a:hover, #footer .info address a:focus{text-decoration:underline;}
#footer p.copyright {clear:both;font-weight: 500;line-height: 1.2em;font-size: 0.95em;word-break: keep-all;color: #777;margin-top: 50px;}

/* btn-top */
.btn-top {position: fixed;right: 20px;bottom: -100px;width: 65px;height: 65px;margin: 0 auto;overflow:hidden;background: #1e1e1e;display: block;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s  ease;-o-transition: all 0.6s  ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;z-index: 11;box-shadow:0px 5px 10px rgba(0,0,0,0.15);}
.btn-top span:before{content:'';display:block;width:11px;height: 11px;margin: 0 auto;background:url('/public/images/common/toTop.svg') center center no-repeat}
.btn-top span{color: #fff;font-size: 12px;font-weight: 400;line-height: 1em;}
.btn-top:hover, .btn-top:focus{box-shadow: 0 3px 10px rgba(0,0,0,0.3); } 
.btn-top.on{bottom:20px;}

@media only screen and (max-width: 1480px) {
	#header .logo{left:50px;}
	#gnb > li{ min-width:140px;}
	#gnb > li .tit > a{padding:0 25px;}
}

@media only screen and (max-width: 1080px) {
	body{font-size: 15px;} 
	#wrap{width:100%;min-width: 280px;margin:0 auto; }
	.bn_siteMap{display: none !important;}
	
	#header {height:70px;top: 0;}
	#header:before{top:69px;}
	#header.fix{ position: absolute; background-color:#fff; backdrop-filter: blur(0); height:70px; z-index: 910;}
	
	#header .logo {left: 25px;height: 70px;width: 125px;}
	#header .logo a{background-size:contain;}
	
	/* mGnb */
	#mGnb {display: table;position:absolute;right: 0;top: 0px;z-index: 999;overflow:hidden;width: 70px;height: 70px;font-size:0;}		
	#mGnb a{width: 80%;position: relative;height: 100%;vertical-align: middle;margin: 0 auto;display: table-cell !important;}
	#mGnb span{font-size: 0;position: absolute;top: 50%;left: 50%;margin-left: -12px;display: inline-block;width: 25px;height: 2px;background: #fff;transition: all .5s cubic-bezier(.535,0,0,1) 0s;-webkit-transition: all .5s cubic-bezier(.535,0,0,1) 0s;border-radius: 2px;}
    #mGnb span:before,
	#mGnb span:after{content:'';position:absolute;top:-4px;left:0;background: #fff;height: 2px;transition:all .5s cubic-bezier(.535,0,0,1) 0s;-webkit-transition:all .5s cubic-bezier(.535,0,0,1) 0s;border-radius: 2px;}
	#mGnb span:before{transform: translateY(-6px);width: 100%;top: 0;}
	#mGnb span:after{transform: translateY(6px);width: 100%;top: 0;}
	#mGnb a:hover span:before, #mGnb a:focus span:before{width: 72%;}
	#mGnb a:hover span:after, #mGnb a:focus span:after{width: 72%;}	
	#mGnb.mGnbOn{position:fixed;top:0px;right: 0;width: 70px;height: 70px;border-left: 1px solid rgba(255,255,255,0.2);}
	#mGnb.mGnbOn span{top: 35px;height: 0;width: 45%;margin-left: -22%;background: #fff;}	
	#mGnb.mGnbOn span:before,
	#mGnb.mGnbOn span:after{top: 50%;width: 100% !important;background: #fff;}
	#mGnb.mGnbOn span:before{-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); }
	#mGnb.mGnbOn span:after{-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg); }	
	
	/* topBox */
	#header .topBox{display: block;overflow: hidden;background: var(--subColor);color:#fff;height: 70px;z-index: 10;}
	#header .topBox .home a{display:block;padding:0 5px;line-height: 70px;font-weight:500;color: rgba(255,255,255,0.75);font-size: 0;opacity: 0.8;width: calc(100% - 70px);height: 100%;background: url(/public/images/common/ci_w.svg) no-repeat 25px 50%;background-size: 125px;}
	
	/* gnb menu */
	.gnb_wrap {position:fixed;right: -100%;top: 0px;width: 80%;height:100%;z-index:200;display:none;background:#fff;}
	.gnb_wrap.open{ right:0; display: block;}
	.gnb_wrap nav {position:relative;width:auto;height:100%;overflow:hidden;overflow-y:auto;z-index:3;}	
	#gnb {position:static;float:none;padding-right:inherit;width:100%;height: 100%;right: inherit; margin-bottom:5em;padding: 0 !important;}
	#gnb > li {visibility:inherit;position:static;margin:0;padding:0;background:none;text-align:left;float:none;display: block;border-bottom: 1px solid #ddd;border-right:none;width: 100% !important;}
	#gnb > li .tit{ position:relative; right:inherit !important; top:inherit;display: block;height: auto !important;padding: 0 !important;}
	#gnb > li .tit a:before{display:none;}
	#gnb > li:nth-last-child(2),
	#gnb > li:last-child,
	#gnb > li.pc_non{display: block;}
	#gnb > li .tit > a{color: #444 !important;background: url(/public/images/common/ico_mgnb.png) no-repeat right 25px center;font-size: 1.25em;height: 3.5em;line-height: 3.5em !important;padding: 0 0 0 1em;padding-left: 25px;width:auto !important;position:relative;font-weight: 500;display: block;} 	
	#gnb > li .tit > a:hover, #gnb > li .tit > a:focus, #gnb > li .tit > a:active, #gnb > li:hover .tit a, #gnb > li.over .tit a, #gnb > li.on .tit a{color: var(--mainColor) !important;font-weight: 700;background-color: transparent;}
	#gnb > li .tit a::after{display:none;}			
	#gnb > li > div {left: inherit !important;top: inherit !important;min-width: inherit;margin:0;padding: 0px 0;border:0;background-color: #f7f7f7;box-shadow:none;visibility: visible;position: relative !important;height: 100%;width: 100% !important;opacity: 1;}
	#gnb > li > div > ul > li {margin:0;width:auto;float: none !important;}
	#gnb > li > div > ul > li:before{ display:none;}	
	
	/* depth2 */
	#gnb > li .ulWrap,	#gnb > li .ulWrap:before{display:none;padding-top:0;}
	#gnb > li.over .ulWrap { border:none;}
	#gnb > li.over .depth2{ display:block;}	
	#header.fix #gnb > li > div{ opacity:1;}
	#gnb .depth2{border-left:none;height:auto;padding: 0 !important;width:100%;float:none !important;display:block;margin-left: 0 !important;margin-right: 0 !important;border-top: 1px solid #e3e3e3;background: none;border-right: none !important;opacity: 1;}

	#gnb .depth2{transform: translateY(0px);}
	#gnb .depth2 li:first-child:after,
	#gnb .depth2 li:first-child:before{ display:none;}	
	#gnb > li > .ulWrap > ul > li{opacity: 1 !important;}
	#gnb > li > div > ul > li > a {display:block;margin:0;border-top: 1px solid #e3e3e3;padding: 0.88em 25px;line-height: 1.25em;background-position: left 25px center;font-size: 1.125em;text-align: left;color: #444;}	
	#gnb > li > div > ul > li > a:hover,
	#gnb > li > div > ul > li > a:focus,
	#gnb > li > div > ul > li > a:active,
	#gnb > li > div > ul > li.on > a{ text-decoration:underline;color: var(--mainColor) !important;}		
	#gnb > li > div > ul > li:first-child > a{border-top:0}
	#gnb > li > .ulWrap > ul > li > a:before{ display:none;}
	
	/* depth3 */
	#gnb > li > div > ul > li > ul{display: block !important;background: #fff;padding: 0.58em 1em 0.8em 1em;overflow: hidden;margin: 0;font-size:1em;border-top: 1px solid #ebebeb; letter-spacing:-0.05em;height: 100%;}
	#gnb > li > div > ul > li > ul li{line-height:24px;float: left;width: 50%;position:relative;margin-bottom: 0;}
	#gnb > li > div > ul > li > ul li a {color: #555;font-size: 1em;display: block;padding: 2px 0 2px 10px;position:relative;line-height: 1.6;text-align: left;}
	#gnb > li > div > ul > li > ul li a:before{content:'';display:block;background: #abadb3;width:5px;height:1px;position:absolute;top: 13px;left:0;}
	#gnb > li > div > ul > li > ul li a:hover, 
	#gnb > li > div > ul > li > ul li a:active{ color:#555; text-decoration:underline;}
	#gnb > li > .ulWrap > ul > .arrow > ul li a:hover,
	#gnb > li > .ulWrap > ul > .arrow.on > ul li a:hover{ background:none;}
	#gnb > li > div > ul > li > ul li a:hover:before, 
	#gnb > li > div > ul > li > ul li a:active:before{background:#555; }
	#gnb .depth3 li:first-child:before,
	#gnb .depth3 li:first-child:after{ display:none !important;}
	
	#gnb > li.on .tit a,
	#gnb > li .tit > a:hover, 
	#gnb > li .tit > a:focus,
	#gnb > li .tit > a:active,		
	#gnb > li .tit > a{padding-left: 25px;}
	
	/* quickmenu */
	.quickmenu{top: 15px;margin-top: 0;right: 70px;}
	.quickmenu li > a{line-height:35px;padding: 0 1.25em;}

	/* footer */	
	#footer {padding: 45px 0;}
	#footer .info address span em:after{margin: 0 0.8em;}
	#footer p.copyright{margin-top:0}	
	#footer .foot_util{padding: 0;}

	.btn-top{box-shadow: 0px 2px 8px rgba(0,0,0,0.15);width: 40px;height: 40px;right: 10px; } 
	.btn-top span:before{background-size:10px;}
	.btn-top.on{bottom:10px;}
	
}
@media only screen and (max-width: 768px) {
	body{font-size: 14px;}
	/*#container {padding-top: 60px;}*/	
	#header, #header.fix {height:60px;}
	#header:before{top:59px;}
	
	/* logo */
	#header .logo {left: 20px;height: 60px;width: 125px;}
	
	/* mGnb */
	#mGnb {width: 60px;height: 60px;}			
	#mGnb.mGnbOn{width: 60px;height: 60px;}
	#mGnb.mGnbOn span{top: 30px;}		
	
	/* topBox */
	#header .topBox{height:60px;}
	#header .topBox .home a{width: calc(100% - 60px);background-size: 110px;line-height:60px;background-position: 20px 50%;}
	
	/* gnb menu */
	#gnb > li .tit > a{font-size: 1.25em;height: 3em;line-height: 3em !important;padding-left: 20px;}	
	#gnb > li.on .tit a, #gnb > li .tit > a:hover, #gnb > li .tit > a:focus, #gnb > li .tit > a:active, #gnb > li .tit > a{padding-left: 20px;}
	
	/* depth2 */
	#gnb > li > div > ul > li > a {background-position: left 20px center;}
	
	/* quickmenu */
	.quickmenu{bottom: 50%;top: inherit !important;right: -60px;margin: 0 !important;width: 60px !important;position: fixed !important;transition: 0.3s all;z-index: 10; -ms-transform: translate(0, 50%); transform: translate(0%, 50%); box-shadow: none;background: #fff;}
	.quickmenu ul{display: block;margin: 0;width: auto !important;height: auto !important;}
	.quickmenu ul li{display:block;}
	.quickmenu li > a{display: block; padding: 10px 0;font-size: 0.88em !important;text-align: center;height: auto !important;border: none;border-width: 0 0 1px 0;border-radius: 0;line-height: 1.3;color: #444;}
	.quickmenu li > a:before{content:'';display:block;width:100%;height: 35px;background: url('/public/images/common/quick_ico.svg') no-repeat 50% 0;background-size: 39px;margin-bottom: 3px;}
	.quickmenu li:nth-child(1) > a:before{background-position:50% 0;}
	.quickmenu li:nth-child(2) > a:before{background-position:50% -50px;}
	.quickmenu li:nth-child(3) > a:before{background-position:50% -100px;}	
	.quickmenu li:nth-child(1) > a{background-color: #007269;color:#fff;}
	.quickmenu li:nth-child(2) > a{background-color:var(--mainColor); color:#fff;}
	.quickmenu li:nth-child(2) > a:after{ margin:-2px 0 0 5px;}	
	.quickmenu li:nth-child(3) > a{background-color: var(--mainColorOp);color: #008b61;}		
	.quickmenu li > a br{display:block;}
	.quickmenu .bn_close{display: block;width: 20px;height: 60px;font-size: 0;background: rgba(255,255,255,0.9) url('/public/images/common/angle-small-left.svg') no-repeat 50% 50%;position: absolute;left: -20px;top: 50%;margin-top: -32px;border-radius: 15px 0 0 15px;box-shadow: 0 0 3px rgba(0,0,0,0.15);}	
	.quickmenu.on{right:0px !important;box-shadow: 0 0 6px rgba(0,0,0,0.15);} 
	.quickmenu.on .bn_close{background-image: url('/public/images/common/angle-small-right.svg');}	
	
	/* fix */
	#header.fix,
	#header.fix .logo{ height:60px;}	
	
	/* footer */	
	#footer {padding: 30px 0;}
	#footer .info address span{ margin-bottom:5px;}	
	#footer .info address span b{padding-right:5px;}
	
}
@media only screen and (max-width:480px) {	
	#header .logo{left: 15px;}
	#header .logo a{ background-position: 0 50%;}

	#header .util{top: 14px; right: 60px; display:none;}
	
	.gnb_wrap{width: calc(100% - 50px);}
	#gnb > li .tit > a{font-size: 1.15em;}
	#gnb > li > div > ul > li > a{font-size: 1.05em;padding: 0.75em 20px;}

	#footer{text-align:center;}
	#footer .info address span{ display: block; }
	#footer .info address span em:after{margin: 0 0.6em;height: 12px;}
	#footer p.copyright{margin-top: 10px;}		
}

	
/*
================================================================================
SUB LAYOUT
================================================================================
*/
/* visual_area */
.visual_area{height: 500px;background-position: 50% 100%;background-repeat: no-repeat;background-size:cover !important;position: relative;overflow: hidden;animation: ani03 1s 1s forwards;}
.visual_area .visImg {position: absolute;left:0;top:0;width: 100%;height: 100%;overflow:hidden;z-index: -1;}
.visual_area .visImg span {position: absolute; left:0; top:0; width: 100%; height: 100%; background-size:cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; display: block; background:  url(/public/images/sub/sub_visual_01.jpg) 50% 0 no-repeat;}
.visual_area.topImg01 .visImg span{background-image:url('/public/images/sub/sub_visual_01.jpg');}
.visual_area.topImg02 .visImg span{background-image:url('/public/images/sub/sub_visual_02.jpg');}
.visual_area.topImg03 .visImg span{background-image:url('/public/images/sub/sub_visual_03.jpg');}
.visual_area.topImg04 .visImg span{background-image:url('/public/images/sub/sub_visual_04.jpg');}
.visual_area.topImg05 .visImg span{background-image:url('/public/images/sub/sub_visual_05.jpg');}
.visual_area.topImg06 .visImg span{background-image:url('/public/images/sub/sub_visual_06.jpg');}
.visual_area.topImg07 .visImg span{background-image:url('/public/images/sub/sub_visual_etc.jpg');}
.visual_area .visImg span {transition:0.95s all;-webkit-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
.start .visual_area .visImg span{ -webkit-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
.visual_area .txtBox {height: 100%;display: flex;align-items: center;width: 100%;padding-top: 100px;text-align: center;}
.visual_area .txtBox .innerWrap{ vertical-align:middle;}
.visual_area .txtBox .tit{font-size: 3.5em;line-height: 1em;display:block;position: relative;font-weight: 700;letter-spacing: 0;color: #fff;z-index: 1;} 
.visual_area .txtBox .desc{display:block;font-size: 1.125em;text-transform: uppercase;line-height: 1em;letter-spacing: 0.45em;margin-top: 20px;font-weight: 500;color: #fff;z-index: 1;position: relative;}

.visual_area .txtBox .tit,
.visual_area .txtBox .desc{ 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_area .txtBox .tit{  -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; }
.visual_area .txtBox .desc{ -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -o-transition-delay:0.5s; -ms-transition-delay:0.5s; transition-delay:0.5s; }
.start .visual_area .txtBox .tit{ 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); }
.start .visual_area .txtBox .desc{opacity: 0.6;filter:Alpha(opacity=60);-ms-transform: translateY(0px);-o-transform: translateY(0px);-moz-transform: translateY(0px);-webkit-transform: translateY(0px);transform: translateY(0px);}




/* lnb */
#menu {width: 100%;background-color: var(--subColor);margin:0;/* position: absolute; */bottom: 0;left: 0;z-index: 1;/* border-bottom: 1px solid #ddd; */}
#menu .menu_bn {width: 180px;height: 110px; margin-bottom:0;border-bottom: 1px solid #c6c6c6;background-size: cover;padding-top: 60px;font-weight: 500;color: #222;font-size: 1.625em; vertical-align: middle;line-height: 1em;letter-spacing: -1px;display: none;}

#menu nav{margin:0 auto;max-width:1300px;} 
#menu .lnb {margin:0 auto;text-align: center;/* font-size: 0; */display: flex;justify-content: space-between;width:100%;} 
#menu .lnb > li{display: flex;align-items: center;width: 100%;}
#menu .lnb > li > a {display:block;width: 100%;padding: 0 8px;font-size: 1.125em;font-weight:400;color: #fff;line-height: 70px;box-sizing: border-box;letter-spacing:-0.05em;position: relative;background-image:none;background-position: right 15px center !important;background-repeat: no-repeat !important;}
#menu .lnb > li > a:focus{outline-color:#fff !important;}
#menu .lnb > li > a:after {position: absolute;bottom: 0px;left: 50%;width: 0;height: 3px;background-color: #fff;content: "";-webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;-ms-transition: all 0.4s;transition: all 0.4s;}

#menu .lnb > li.on > a{text-decoration:none;font-weight: 600; }
.start #menu .lnb > li.on > a:after,
#menu .lnb > li > a:hover:after,
#menu .lnb > li > a:focus:after{width: 50%;margin-left: -25%;}
#menu .lnb > li.target a:after{content:'';display:inline-block;margin: 0 10px;background:url('/public/images/common/ic_blank.png') no-repeat 0 0;width:14px;height:14px;vertical-align: middle;filter: alpha(opacity=60); opacity: 0.6;}
#menu .subLnb {display:none;}
#menu .subLnb li,
#menu .subLnb li a{font-size:0; height:0}


@media only screen and (max-width: 1080px){	
	.visual_area{height: 400px;}		
	.visual_area .txtBox{ padding-top: 70px;}
	.visual_area .txtBox .tit{font-size: 2.5em;}
	.visual_area .txtBox .desc{font-size: 1em;}
	
	#menu .lnb > li > a{font-size: 1.1em;line-height: 60px;padding: 0 5px;letter-spacing: -0.1em;}
}
@media only screen and (max-width: 1024px){
	#menu .lnb {width: 100%; overflow-x: auto; -ms-overflow-style: none;overflow: -moz-scrollbars-none;white-space: nowrap;}
	#menu .lnb > li{display: inline-block;white-space: nowrap;float: none; }
}
@media only screen and (max-width: 768px){	
	.visual_area{height: 250px;}
	.visual_area .txtBox{ padding-top: 60px;}
	.visual_area .txtBox .inner{padding:0;background-color:transparent;text-align:center;width: 100%;display: table-cell;vertical-align: middle;}
	.visual_area .txtBox .inner:after{right: -85px;border-top: 85px solid #fff;border-right: 85px solid transparent; display:none;}
	.visual_area .txtBox .tit{font-size: 1.95em;color:#fff;text-shadow: 0px 0px 10px rgba(0,0,0,0.2);}
	.visual_area .txtBox .desc{font-size: 0.88em;margin-top: 15px;letter-spacing: 0.3em;color:rgba(255,255,255,0.8);text-shadow: 0px 0px 5px rgba(0,0,0,0.2);}

	#menu .lnb{padding:0 10px;}
	#menu .lnb > li > a {line-height:50px;font-size:1em;padding: 0 10px;}
	#menu .lnb > li.on > a:after{ width: 50%; margin-left: -25%;}
}
@media only screen and (max-width:480px){		
	.visual_area{height: 200px;} 
	.visual_area .txtBox .tit{font-size: 1.85em;}
	.visual_area .txtBox .desc{font-size:0.75em; margin-top:10px;}
	
	#menu .lnb {display: block;text-align: left;}
	#menu .lnb > li{width:auto; margin-right: 10px;}
	#menu .lnb > li > a{line-height:45px; }

}


/* content */
#sub_content{position:relative;width: 100%; margin: 0 auto; z-index: 0}
.title_area.blind + #page{margin-top: 80px;}
#page{clear:both;min-height:500px;margin: 0 auto; width:1300px;padding: 0 0 100px 0; }
#page.widePage{width:100%; padding-bottom:0 !important;}
#page table p{ margin-bottom:0;}

/* title_area */	
.title_area{position: relative;padding: 120px 0 80px;}
.title_area h3{font-size: 2.5em;line-height: 1em;font-weight: 700;color: #222;text-transform: uppercase;  text-align: center;}

#page .ttl01:first-child{ margin-top: 0 !important;}
.ttl01{clear: both;margin: 3.25em 0 1em;letter-spacing:-1px;font-size: 2em;font-weight: 700;color: #111;line-height: 1.3;position: relative;}
.ttl01.bar{padding-top:13px;}
.ttl01.bar:before {content:"";display:block;position:absolute;width: 30px;height:3px;background:var(--mainColor);left:2px;top:0}
.ttl01.bar.tC:before{left: 50%;margin-left: -15px;}
.ttl01 + .desc{margin-bottom: 45px; font-size:1.05em; word-break: keep-all;}
.ttl02{overflow: hidden;clear: both;margin: 3em 0 1em;letter-spacing:-1px;position:relative;font-size: 1.5em;font-weight: 700;color: #111;padding: 13px 0 0;line-height: 1.3;}
.ttl02:before {content:"";display:block;position:absolute;width: 30px;height:3px;background:var(--mainColor);left:2px;top:0}
.ttl02.tC:before{left: 50%;margin-left: -15px;}
.ttl01 span, .ttl02 span, .ttl03 span{display: inline-block;margin: 0;vertical-align: middle;color: #1f2121;font-weight: 500;margin-left: 5px;}
.ttl01 span{font-size: .55em;}
.ttl02 span{font-size: .765em;}
.ttl03 span{font-size: .75em;}
.ttl03{clear: both;margin: 2em 0 0.75em;line-height: 1.3;font-size: 1.35em;font-weight: 600;color: #222;}

.ttl01 + .ttl02 {margin-top: 0.5em;}
.ttl02 + .ttl03 { margin-top: 0;}
.ttl01 span.txt_sm{ font-size:0.7em; padding-left: 10px;}
.ttl01 span .button, .ttl02 span .button, .ttl03 span .button { margin-bottom: 0;}

@media only screen and (max-width: 1080px) {	
	/* content */	
	#sub_content {width:100%;margin:0 auto;float: none;}
	#sub_content:after{ display:none;}
	
	#page{width: 100%; min-height:400px;max-width: 100%;padding: 0px 25px 50px 25px;padding-bottom: 50px;z-index: 1;}
	#page.widePage{padding-left:0; padding-right:0; }
	
	/* title */
	.title_area{position:relative;width: 100%;padding: 80px 0 50px 0;}		
	.title_area h3{font-size: 2em;}	
	.title_area h3:after{width:12px;height:12px;margin-left: 13px;}

	.ttl01{margin: 2.5em 0 1em;font-size: 1.7em;}
	.ttl02{margin: 2.5em 0 1em;font-size: 1.385em;}
	.ttl03{margin: 1em 0 0.5em;font-size: 1.2em;}
	.ttl01.bar:before{width:20px;}
	.ttl01.bar.tC:before{margin-left: -10px;}	
	.ttl02:before{width:20px;}
	.ttl02.tC:before{margin-left: -10px;}	
	.ttl02 + .ttl03 { margin-top: 0;}
	.ttl01.center + p{margin-bottom: 30px !important;}	
	.ttl01.tC + p{margin-bottom:30px;}

}
@media only screen and (max-width: 768px) {
	#page{padding: 0px 20px 35px 20px;}
	
	.title_area{padding: 55px 0 35px 0;}
}

@media only screen and (max-width:480px) {
	#page{padding: 0px 15px 35px 15px;}
	.title_area{padding: 40px 0 25px 0;}
	.title_area h3{font-size: 1.6em;}	
	.ttl01{margin: 2.5em 0 1em;font-size: 1.65em;}
	.ttl02{margin: 2.5em 0 1em;font-size: 1.3em;}
	.ttl03{margin: 1em 0 0.5em;font-size: 1.15em;}
	
	.ttl01.center + p{margin-bottom: 25px !important;}
	.ttl01 span.fR, .ttl02 span.fR, .ttl03 span.fR{ float:left !important; margin-left: 0;}
}