@charset "utf-8";

/*
================================================================================
LAYOUT
================================================================================
*/

/* Loading */
/*.loaded{background:url(../images/common/loading.gif) 50% 250px no-repeat;}*/

/* header */
#wrap {position:relative;min-width: 1250px;}
.innerWrap {position:relative;max-width: 1160px; width:100%;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: 120px;position:absolute;left:0;top: 0px;z-index: 910;/* overflow: hidden; */}
#header a {text-decoration: none;display: block;}
#header .innerWrap{width: auto;max-width:inherit;margin:0 auto;padding:0 100px;}
.gnb_wrap{position:relative;width:100%;}
#mGnb,.gnb_foot { display:none;}

/* logo */
#header .logo {display: table;position:absolute;top: 0px;left: 80px;line-height:0;width: 320px;height: 120px;z-index: 10;}
#header .logo a {display:table-cell;vertical-align: middle;width: 100%;box-sizing:border-box;background: url('../images/common/ci.svg') no-repeat 0% 50%;font-size: 0;transition: all .01s ease-in-out;}

/* topBox */
#header .topBox{display:none;}

/* bn_siteMap */
.bn_siteMap{width: 20px;height: 20px;display: block;vertical-align:middle;text-align:center;position: absolute;right: 100px;top: 50px;}
.bn_siteMap a{width: 100%;height: 100%;vertical-align:middle;margin:0 auto;padding: 0 !important;display: block;}
.bn_siteMap a span{width: 4px;height: 4px;background-color: #222;display: block;border-radius: 50%;position: absolute;}
.bn_siteMap a:hover span{/* transform: scale(1.2); */transition: 350ms cubic-bezier(.8, .5, .2, 1.4);}
.bn_siteMap a span:nth-child(1){left: 0;top: 0;}
.bn_siteMap a span:nth-child(2){left: calc(50% - 2px);top: 0;/* transition-delay: 20ms; */}
.bn_siteMap a span:nth-child(3){right: 0;top: 0;}
.bn_siteMap a span:nth-child(4){ left: 0; top: calc(50% - 2px); }
.bn_siteMap a span:nth-child(5){ position: absolute; left: calc(50% - 2px); top: calc(50% - 2px); }
.bn_siteMap a span:nth-child(6){ right: 0px; top: calc(50% - 2px); }
.bn_siteMap a span:nth-child(7){left: 0px;bottom: 0px;}
.bn_siteMap a span:nth-child(8){position: absolute;left: calc(50% - 2px);bottom: 0px;/* transition-delay: 200ms; */}
.bn_siteMap a span:nth-child(9){ right: 0px; bottom: 0px; }
.bn_siteMap a:hover{ /*transform: rotate(180deg);*/ cursor: pointer; transition: .2s cubic-bezier(.8, .5, .2, 1.4); }
.bn_siteMap a:hover span{width: 3px;height: 3px;transition-delay: 200ms;transition: .2s cubic-bezier(.8, .5, .2, 1.4);}
.bn_siteMap a:hover span:nth-child(1),
.bn_siteMap a:hover span:nth-child(3),
.bn_siteMap a:hover span:nth-child(7),
.bn_siteMap a:hover span:nth-child(5),
.bn_siteMap a:hover span:nth-child(9){display:none;}
.bn_siteMap a:hover span:nth-child(4){width:100%;border-radius:2px;}
.bn_siteMap a:hover span:nth-child(2){transform: rotate(45deg);width: 55%;border-radius:2px;top: 5px;left: 50%;}
.bn_siteMap a:hover span:nth-child(8){transform: rotate(-45deg);width: 55%;border-radius:2px;bottom: 5px;left: 50%;}

/* gnb menu */
#gnb {text-align: center;padding-right: 50px; float: right;} /*메뉴위치*/
#gnb:after {display:block; content:""; clear:both;}
#gnb > li {text-align:center;display: inline-block;vertical-align: top; margin: 0 -2px;position: relative;word-break: keep-all;}
#gnb > li.pc_non{ display:none;}
#gnb > li .tit{position:relative;height: 120px;display: flex;align-items: center;width: 100%;z-index: 11;}
#gnb > li .tit > a {color: #222;font-size: 2rem;font-weight: 700;line-height: 35px;width: 100%;padding: 0 3rem;letter-spacing: -0.04rem;transition: background-color .3s;display: flex;flex-direction: column;align-items: center;}
#gnb > li .tit a:hover,
#gnb > li .tit a:focus,
#gnb > li .tit a:active,
#gnb > li:hover .tit a {color: #00712f !important;}
#gnb > li.on .tit a{color: #00712f;}

/* 하위메뉴 */
#gnb > li > div {display: none;opacity: 0;transition: visibility .3s, opacity .3s;}
#gnb > li .ulWrap{position:absolute;top: 115px;left:0px;z-index:99;width:100%;text-align:left;opacity:0;filter:Alpha(opacity=0);}

#gnb .depth2{position: relative;overflow: hidden;margin:0 !important;width:100%;transition: opacity .3s, height .3s;-webkit-transition:opacity .3s, height .3s;padding: 1.5em 0;opacity:1;opacity: 0;transform: translateY(15px);background: #0f0f0f;border-top: 3px solid var(--mainColor);}
#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: block;vertical-align: top;position: relative;color: rgba(255,255,255,0.8);font-size: 1.6rem;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('../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('../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;}

/* #header.fix */
#header.fix {position: fixed;top:0;left:0;width:100%;animation:slide-down 0.7s;background-color: #fff;backdrop-filter: blur(30px);height: 80px;box-shadow: 0 2px 5px rgb(0, 0, 0, 0.1);z-index: 10000;}
#header.fix .innerWrap{width:100%;}
#header.fix .logo {width: 240px;height: 80px;}
#header.fix #gnb > li .tit{height: 80px;}
#header.fix #gnb > li .tit > a{font-size: 1.8rem;}
#header.fix #gnb > li .ulWrap{top: 80px;} 
#header.fix .bn_siteMap{top:30px;}


/* quickmenu */
.quickmenu{position:fixed;right: 20px;top: 140px;z-index: 999;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;word-break: keep-all;/* transform: translate(0%, 50%); */}
.quickmenu.on{top: 100px;/* transform: translate(0, 50%); */}
.quickmenu > div {display: flex;text-align:center; margin-bottom:10px;}
.quickmenu > div:last-child { margin-bottom:0;}
.quickmenu > div a{display: flex;flex-direction: column;align-items: center;position:relative;}
.quickmenu > div .txt{font-family: 'S-CoreDream';position: relative;display:block;width:150px;height:150px;border-radius: 100%;background: url('../images/common/quick_banner.png') no-repeat 50% 50% / cover;display: flex;flex-direction: column;align-items: center;border: 2px solid #1a0e44;color: #1a0e44;line-height: 1.2;font-weight: 500;font-size: 1.5rem;letter-spacing: -0.05em;padding-top: 1.5em;margin-bottom: -15px;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);transition: all .3s ease-in-out;}
.quickmenu > div .txt em{font-weight: 700;font-size: 2rem;}
.quickmenu > div .btn{position: relative;background:var(--mainColor);color:#fff;display: flex;align-items: center;width: 85px;padding: 0 0.8em;border-radius: 15px;font-size: 1.4rem;line-height: 28px;z-index: 2;box-shadow: 0px 2px 10px rgba(0,0,0,0.15);transition: all .3s ease-in-out;}
.quickmenu > div .btn:after{content:'';display: inline-block;vertical-align: middle;width: 12px;height: 12px;background: url(../images/common/quick_btn.svg) no-repeat 50% 50% / contain;margin-left: 5px;}
.quickmenu > div a:hover .txt, .quickmenu > div a:focus .txt{box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);}
.quickmenu > div.banner01 .txt{ background-image:url('../images/common/quick_banner01.png');}
.quickmenu > div.banner02 .txt{ background-image:url('../images/common/quick_banner02.png');}
.quickmenu .bn_close{ display: none;}
.quickmenu > div a:hover .btn, .quickmenu > div a:focus .btn{ font-weight:500}
.quickmenu > div a:hover .txt, .quickmenu > div a:focus .txt{border-color: var(--mainColor);}


/* container */
#container { padding-top: 120px; }
#container:after {display:block; content:""; clear:both;}


/* footer */
#footer{position:relative;padding: 6rem 0;background: #2d3037;font-size: 1.4rem;}
#footer .innerWrap{display:flex;flex-direction: row-reverse;}
#footer .logo_foot{margin-left: auto;}
#footer .logo_foot img{width:255px; height:48px; opacity: 0.35; transition: all .3s ease-in-out;}
#footer .logo_foot a:hover img, #footer .logo_foot a:focus img{ opacity: 0.75;}
#footer em { display: inline-block;}
#footer .foot_util{overflow:hidden;display: flex;align-items: center;margin-bottom: 2.5rem;}
#footer .foot_util li{ position:relative;margin-right: 22px;}
#footer .foot_util li:last-child { margin-right: 0px;}
#footer .foot_util li a{color: #96979b;font-size: 1.8rem; }
#footer .foot_util li a:hover{ color:#fff; text-decoration:underline;}
#footer .info {color: #96979b; }
#footer .info p{ margin-bottom: 10px;letter-spacing: 0;}
#footer .info p:first-child {line-height: 1.4}
#footer .info address{display: block;font-style:normal; margin-bottom: 0;}
#footer .info address span{display: inline-block;line-height: 1.2em;position: relative;margin-right: 13px;padding-right: 3px;font-weight: 300;}
#footer .info address p{margin-bottom: 0; display: inline-block; margin-right: 13px; padding-right: 3px;}
#footer .info address p:last-child{padding-right:0;margin-right: 0;}
#footer p.copyright {color: #96979b;margin-bottom: 0;font-weight: 300;}

/* btn-top */
.btn-top {position: fixed;right: 20px;bottom: -100px;width: 50px;height: 50px;border-radius: 50px;margin: 0 auto;overflow:hidden;background: #fff;display: block;border: 1px solid #d8d8d8;-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;}
.btn-top span{ background:url('../images/common/icon-top-arrow.svg') no-repeat 50% 50%; font-size:0; width:100%; height:100%; display:block;}
.btn-top:hover, .btn-top:focus{ box-shadow:0px 2px 10px rgba(0,0,0,0.15); } 
.btn-top.on{bottom:20px;}


@media only screen and (max-width: 1440px) {
	#header .logo{left:50px;}
	.bn_siteMap{right:50px;}
	#gnb{padding-right:0}
	#gnb > li{min-width: 120px;}
	#gnb > li .tit > a{padding: 0 2rem;}
	
	.quickmenu > div .txt{width: 100px; height: 100px; font-size: 1rem;padding-top: 1.3em;}
	.quickmenu > div .txt em{font-size: 1.3rem;}
	.quickmenu > div .btn{width: 79px;font-size: 1.3rem;line-height: 26px;}
	.quickmenu > div .btn:after{width:10px; height: 10px;}
}

@media only screen and (max-width: 1080px) {
	#container {padding-top:70px; }
	body{font-size: 15px;} 
	#wrap{width:100%;min-width: 280px;margin:0 auto; }
	.bn_siteMap{display: none !important;}
	
	#header {height:70px;top: 0;/* background-color: rgba(255, 255, 255, 0.95); */overflow: hidden;}
	#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: 220px;}
	#header .logo a{background-size:contain; background-image: url('../images/common/ci.svg'); }


	#header .utill{margin-top: 17px;right:70px;}
	#header .utill li > a{line-height: 35px;font-size: 1.3rem;padding: 0 1.5rem;}
	#header .utill li > a:after{ margin-left:5px;}
	#header .utill li:nth-child(1) > a{border:1px solid #f4d82b !important;background-color:#f4d82b !important;color: #333 !important;}
	#header .utill li:nth-child(1) > a:after{background-image: url('../images/common/sns_k_b.svg');}
	#header .utill li:nth-child(2) > a{border-color: #20a8f7;color: #20a8f7;background-color: transparent;} 
	#header .utill li:nth-child(2) > a:hover,
	#header .utill li:nth-child(2) > a:focus{color:#fff;}
	
	
	/* topBox */
	#header .topBox{ overflow: hidden;padding: 4em 20px 2.5em 20px;position: relative;display:flex;align-items: flex-end;}
	#header .topBox .logo{padding:0 !important;height: auto;width: 220px;margin: 0;position: relative;top:inherit;left: inherit;display: block;}
	#header .topBox .logo a{height: auto; width:auto;display: block;}
	#header .topBox .logo a span{display: block;width: 100%;height: auto;}
	#header .topBox .logo a .tit{text-align:center;font-size: 1.35em;line-height: 1.3em;padding: 0 !important;}
	#header .topBox .logo a .tit{color: #222;line-height: 50px;}
	#header .topBox .utill{ position:relative; right:inherit; top:inherit; margin:0 0 0 auto;}
	
	/* mGnb */	
	.btn_menu{position: absolute;right: 25px;top: 24px;}
	#mGnb {display: block;z-index: 999;overflow:hidden;padding: 10px;font-size:0;position: relative;}		
	#mGnb button{idth: 100%;height: 100%;position: relative;transition: .1s; cursor: pointer;display: inline-block; }
	#mGnb span{width: 3px;height: 3px;background-color: #000;display: block;border-radius: 50%;position: absolute;}
	#mGnb span:nth-child(1){left: 0;top: 0;}
	#mGnb span:nth-child(2){left: calc(50% - 1px);top: 0;  }
	#mGnb span:nth-child(3){right: 0;top: 0;}
	#mGnb span:nth-child(4){ left: 0; top: calc(50% - 1px); }
	#mGnb span:nth-child(5){position: absolute;left: calc(50% - 1px);top: calc(50% - 1px);}
	#mGnb span:nth-child(6){ right: 0px; top: calc(50% - 1px); }
	#mGnb span:nth-child(7){left: 0px;bottom: 0px;}
	#mGnb span:nth-child(8){position: absolute;left: calc(50% - 1px);bottom: 0px; }
	#mGnb span:nth-child(9){ right: 0px; bottom: 0px; }	
	#mGnb.mGnbOn{transform: rotate(180deg); cursor: pointer; transition: .2s cubic-bezier(.8, .5, .2, 1.4);}
	#mGnb.mGnbOn span{ border-radius: 50%; transition-delay: 200ms; transition: .5s cubic-bezier(.8, .5, .2, 1.4); }
	#mGnb.mGnbOn span:nth-child(2) {left: calc(100% - 78%);top: calc(100% - 78%);}
	#mGnb.mGnbOn span:nth-child(4) {left: calc(100% - 78%);top: calc(100% - 36%);}
	#mGnb.mGnbOn span:nth-child(6) { right: calc(100% - 78%); top: calc(100% - 78%); }
	#mGnb.mGnbOn span:nth-child(8) { left: calc(100% - 36%); bottom: calc(100% - 78%); }

	
	.gnb_foot{position: absolute;bottom: 0;left: 0;z-index: 4;text-align: center;width: 100%;display: block;}
	.gnb_foot .tel{font-family: 'Gmarket Sans', 'Noto Sans KR', 'Malgun Gothic', '맑은고딕', '돋움', sans-serif;color:var(--mainColor);font-weight: 300;font-size: 1.25em;margin-bottom: 10px;}
	.gnb_foot .tel b{ font-weight:700;}
	.gnb_foot .txt_s{font-size: 0.95em;display: block;background: #f7f7f7;padding: 15px;}
	
	
	.gnb_wrap {position:fixed;right: -100%;top: 0px;width: 50%;min-width:400px;height:100%;z-index:200;display:block;background:#fff;}
	.gnb_wrap nav {position:relative;width:auto;height:100%;background: #fff;overflow:hidden;overflow-y:auto;z-index:3;}
	#gnb {position:static;float:none;width:100%;padding-left: 0 !important;text-align: center;padding-right: 0;}/*메뉴위치*/
	#gnb:after {display:block; content:""; clear:both;}
	#gnb > li:first-child{border-top: 1px solid #ededed;}
	#gnb > li {visibility:inherit;position:static;margin: 0 !important;padding:0;background:none;text-align:left;float:none;display: block;width:auto !important;border-bottom: 1px solid #ededed;border-right:none;}
	#gnb > li.pc_non{display: block;}
	
	#gnb > li .tit{position:relative;z-index: 2;/* display: block; */height: auto;}
	#gnb > li .tit > a{display:block;color: #111;font-size: 1.25em;height: 2.8em;line-height: 2.8em;letter-spacing: -0.05em;padding: 0px 0 0px 20px;border:none;width: 100%;position:relative;font-weight: 500;}
	#gnb > li .tit > a:after{content:'';display:block;width: 10px !important;height: 10px !important;border: 2px solid #b2b2b2;border-width: 2px 2px 0 0;position:absolute;right: 20px;top:50%;margin: -5px 0 0 0;background: none;transform: rotate(45deg);transition: all .3s ease-in-out;}
	#gnb > li.arrow .tit > a:after{transform: rotate(135deg);}
	#gnb > li.on .tit a,
	#gnb > li .tit > a:hover, 
	#gnb > li .tit > a:focus,
	#gnb > li .tit > a:active,
	#gnb > li:hover .tit a{color: var(--mainColor) !important;}
	#gnb > li .tit > a:hover:after,
	#gnb > li .tit > a:focus:after,
	#gnb > li .tit > a:active:after,
	#gnb > li.on .tit > a:after{border-color: var(--mainColor);}

	#gnb > li > .ulWrap{ opacity:1;}
	#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;}	
	#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 > 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;}	
	
	/* quickmenu */
	.quickmenu{right:10px;top: 50% !important; transform: translate(0%, -50%);}
	.quickmenu > div {height: 80px;}
	.quickmenu > div .btn{display:none;}
	.quickmenu > div .txt{width: 80px;height: 100%;font-size: 0.9rem;padding-top: 1.3em;}
	.quickmenu > div .txt em{font-size: 1.2rem;}
	.quickmenu .bn_close{display: block;width: 20px;height: 60px;font-size: 0;background: url(../images/common/colse_bn.svg) no-repeat 50% 50%;position: relative;left: inherit;top: inherit;width: 100%;height: 15px;background-color: transparent;box-shadow: inherit;border-radius: 0;margin-top: 10px;}	
	.quickmenu.on{top: 50% !important;right: -80px !important;} 
	.quickmenu.on .bn_close{background: rgba(255,255,255,0.9) url('../images/common/angle-small-left.svg') no-repeat 50% 50%;position: relative;width: 20px;height: 60px;position: absolute;left: -20px;top: 50%;margin-top: -32px;border-radius: 15px 0 0 15px;box-shadow: -3px 0px 8px rgba(0, 0, 0, 0.15);}	
	
	
	/* footer */	
	#footer {padding: 3rem 0;font-size: 1.3rem;}
	#footer .foot_util{ margin-bottom:1.5rem}
	#footer .foot_util li a{ font-size:1.5rem}
	#footer .logo_foot img{ height:auto;}
	#footer .info{ width: 100%;}   
	#footer .info > p:first-child br { display: none;}
	#footer .info > p:first-child { font-size: 11px}
	#footer p.copyright{margin-top:5px;font-size: 11px;}
	
	.btn-top{box-shadow: 0px 2px 8px rgba(0,0,0,0.15);width: 40px;height: 40px;right: 10px;} 
	.btn-top span{/* font-size:1.15rem; */background-size: 15px;}
	.btn-top span:before{background-size:10px;}
	.btn-top.on{bottom:10px;}
	
}
@media only screen and (max-width: 768px) {
	#container {padding-top:55px; }
	body{font-size: 14px;}
	#header {/* background-color: rgba(255, 255, 255, 0.95); */}
	#header .logo {left: 20px;height: 55px;width: 180px;}
	#header, #header.fix {height:55px;}
	#header:before{display: none !important;}
	
	#header .utill{right: 50px;margin-top: 12px;}
	#header .utill li > a{line-height: 30px;font-size: 1.2rem;padding: 0 1rem;}
	#header .utill li > a:after{ margin-left:3px;}
	#header .utill li > a em{display: none;}
	
	#header .topBox{padding:4em 15px 2.5em 20px;}
	
	/* mGnb */
	.btn_menu{top:20px;right: 20px;}
	#mGnb.mGnbOn{right: 0;}
		
	/* Gnb */
	.gnb_wrap{width: 100%;min-width: 300px;}
	#gnb > li.on .tit a,
	#gnb > li .tit > a:hover, 
	#gnb > li .tit > a:focus,
	#gnb > li .tit > a:active,		
	#gnb > li .tit > a{ height:45px; line-height:45px; padding-left:15px;}
	#gnb > li > div > ul > li > ul{padding: 6px 15px;}
	#gnb > li .tit > a, #header.fixed-header #gnb > li .tit > a{font-size: 1.2em;}
	#gnb > li > div > ul > li > a{ padding-left:15px;}
	#gnb > li > .ulWrap > ul > li > a:focus, #gnb > li > .ulWrap > ul > li > a:active, #gnb > li > .ulWrap > ul > li > a:hover, #gnb > li:hover > div > ul > li:hover > a {padding-left: 20px;}
	
	.quickmenu.on{right: -70px !important;} 
	
	/* fix */
	#header.fix,
	#header.fix .logo{ height:55px;}	

	.quickmenu > div{height:70px;margin-bottom: 7px;}
	.quickmenu > div .txt{width: 70px;height: 100%;font-size: 0.75rem;}
	.quickmenu > div .txt em{font-size: 1.1rem;}
	
	/* footer */		
	#footer{text-align:center;}
	#footer .innerWrap{ flex-direction:column;}
	#footer .logo_foot{margin:0 auto 20px auto;height: 28px;}
	#footer .logo_foot img{height:100%; width:auto;}
	#footer .foot_util{margin-bottom:1rem;justify-content: center;}
	#footer .foot_util li a{font-size:1.4rem}
	#footer .info address span{margin-bottom: 5px;}	   
	#footer .btn-top, footer .btn-top:before{width: 40px;height: 40px;bottom: 10px;}
	#footer .btn-top:before{background-size:15px;}
	
}
@media only screen and (max-width:480px) {	
	#header .logo{left: 15px;}
	#header .logo a{ background-position: 0 50%;}
	.btn_menu{right:15px;}

	#header .util{top: 14px; right: 60px; display:none;}
	
	#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;font-size: 1.3rem;}
	#footer .logo_foot{position:relative;right:0;top:0;/* padding-top:20px; */}
	#footer .top_box{flex-direction: column; border-bottom: none;}
	#footer .sns{margin:0 auto;}
	#footer .info{padding: 0 2.5rem;}
	#footer .info address p{padding-right:0; margin-right:0; letter-spacing: -0.03em;}
	#footer .info address span{display: inline-block;}
	#footer .info address span em:after{margin: 0 0.6em;height: 12px;}
	#footer p.copyright{margin-top: 10px;}		
}
@media only screen and (max-width:380px) {
	#header .utill{ display:none;}
	#header .topBox .utill{display:block;}
	#header .utill li:nth-child(1) > a:after{width:20px; height:20px;}
}





	
/*
================================================================================
SUB LAYOUT
================================================================================
*/
/* visual_area */
.visual_area{height: 280px;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(../images/sub/sub_visual_etc.jpg) 50% 0 no-repeat;}
.visual_area.topImg01 .visImg span{background-image:url('../images/sub/sub_visual_01.jpg');}
.visual_area.topImg02 .visImg span{background-image:url('../images/sub/sub_visual_02.jpg');}
.visual_area.topImg03 .visImg span{background-image:url('../images/sub/sub_visual_03.jpg');}
.visual_area.topImg04 .visImg span{background-image:url('../images/sub/sub_visual_04.jpg');}
.visual_area.topImg05 .visImg span{background-image:url('../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: 85px; */text-align: center;}
.visual_area .txtBox .innerWrap{ vertical-align:middle;}
.visual_area .txtBox .tit{font-size: 6rem;line-height: 1em;display:block;position: relative;font-weight: 100;letter-spacing: 0;color: #fff;z-index: 1;} 
.visual_area .txtBox .desc{display:block;font-size: 1.8rem; line-height: 1em;letter-spacing: 0.3rem;margin-bottom: 20px;font-weight: 300;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.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; }
.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.75;filter:Alpha(opacity=60);-ms-transform: translateY(0px);-o-transform: translateY(0px);-moz-transform: translateY(0px);-webkit-transform: translateY(0px);transform: translateY(0px);}


/* topnavWrap */
.topnavWrap{position: relative; width: 100%;padding-top: 60px;z-index: 10;}
.topnavWrap .innerWrap {border-bottom: 1px solid rgba(0, 0, 0, .1);padding:0}
.topnavWrap .swiper {width: 100%;}
.topnavWrap .swiper-wrapper {justify-content: flex-start;flex-wrap: nowrap;}
.topnavWrap .swiper-slide {width: auto;flex: 1; min-width: 80px;}
.topnavWrap .swiper-slide a{display: block;height: 100%;position:relative;text-align: center;line-height: 60px;color: #222;font-weight: 700;font-size: 1.7rem;}
.topnavWrap .swiper-slide.active a {  color: #111;}
.topnavWrap .swiper-slide.active a:after{content: "";display: block;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 2px;background: #222;}
.fixedMenu.topnavWrap{position: fixed;top: 80px;background: #fdfaf7;box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);transition: .25s;padding-top: 0;}

@media only screen and (max-width: 1080px){	
	.visual_area{height: 200px;}		
	.visual_area .txtBox .tit{font-size: 3.5rem;}
	
	.topnavWrap{padding-top:0px;}
	.topnavWrap .swiper-slide a{line-height:45px;font-size:1.5rem}
	.fixedMenu.topnavWrap{top:0;}	
}
@media only screen and (max-width: 768px){	
	.visual_area{height: 135px;}
	.visual_area .txtBox .tit{font-size: 2.5rem; }
}
@media only screen and (max-width: 480px){
	.topnavWrap .innerWrap{ height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative;}
	.topnavWrap .swiper-slide{cursor: pointer;display: flex;align-items: center;min-width: inherit;flex: none;}
	.topnavWrap .swiper-slide a{padding: 0 15px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
}

/* content */
#sub_content{position:relative;background-color:#fdfaf7;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:1160px;padding: 100px 0;}
/*
#page{opacity:0; transform: translate(0,50px); -webkit-transition:all 1.5s ease, opacity 1.1s ease, trasnsform 1.1s ease;transition:all 1.5s ease, opacity 1.1s ease, trasnsform 1.1s ease;}
.start #page{opacity: 1;transform: translate(0,0px);}*/
#page.widePage{width:100%; padding-bottom:0 !important;}
#page table p{ margin-bottom:0;}


/* title_area */	
.title_area{position: relative;padding: 100px 0 0px; display: none; }
.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: 2.4em;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.85em;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.5em;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: 75px 25px;padding-bottom: 50px;z-index: 1;}
	#page.widePage{padding-left:0; padding-right:0; }
	
	/* title */
	.title_area{position:relative;width: 100%;padding: 75px 0 0px 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: 2em;}
	.ttl02{margin: 2.5em 0 1em;font-size: 1.5em;}
	.ttl03{margin: 1em 0 0.5em;font-size: 1.25em;}
	.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: 55px 20px;}
	
	.title_area{padding: 55px 0 0px 0;}
	.ttl01 span{font-size: .75em;}
}

@media only screen and (max-width:480px) {
	#page{padding: 40px 15px;}
	.title_area{padding: 40px 0 0px 0;}
	.title_area h3{font-size: 1.6em;}	
	.ttl01{margin: 2.5em 0 0.75em;font-size: 1.75em;}
	.ttl02{margin: 1.75em 0 0.75em;font-size: 1.35em;}
	.ttl03{margin: 1em 0 0.5em;font-size: 1.2em;}
	
	.ttl01.center + p{margin-bottom: 25px !important;}
	.ttl01 span.fR, .ttl02 span.fR, .ttl03 span.fR{ float:left !important; margin-left: 0;}
}
