@import url("reset.css");

#wrap {width:100%; position:relative; box-sizing:border-box; min-width:360px; overflow:hidden;}


header {width:100%; box-sizing:border-box; background:#8c2232; position:fixed; text-align:center; z-index:1000;}
header .header-wrap {width:95%; max-width:1600px; margin:0 auto; position:relative;}
header .header-wrap .logo {width:53px; height:72px; background:transparent; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); visibility:hidden;}
header .header-wrap .logo a {display:block; width:100%; height:100%; font-size:0;}
header .header-wrap .gnb-box {display:inline-block;}
header .header-wrap .gnb-box ul {font-size:0; text-align:center; position:relative;}
header .header-wrap .gnb-box ul:before {content:""; width:100%; height:0; position:absolute; left:0; top:100px;}
header .header-wrap .gnb-box ul > li {display:inline-block; vertical-align:middle; margin-left:40px; box-sizing:border-box; position:relative;}
header .header-wrap .gnb-box ul > li:nth-child(1) {margin-left:0;}
header .header-wrap .gnb-box ul > li > a {display:block; box-sizing:border-box; padding:0 10px; font-size:22px; font-weight:400; color:#fff; line-height:100px; position:relative;}
header .header-wrap .gnb-box ul > li > a:before {content:""; width:0; height:2px; background:#8C2232; position:absolute; left:0; bottom:0; transition:width 0.25s linear;}
header .header-wrap .gnb-box ul > li:hover > a:before {width:100%;}
header .header-wrap .gnb-box ul > li > dl {width:140px; position:absolute; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); top:100px; padding:30px 0; display:none;}
header .header-wrap .gnb-box ul > li > dl.snb-4, header .header-wrap .gnb-box ul > li > dl.snb-5 {width:120px;}
header .header-wrap .gnb-box ul > li > dl.snb-4 {left:calc(50% - 5px);}
header .header-wrap .gnb-box ul > li > dl dd {width:100%; margin-top:15px;}
header .header-wrap .gnb-box ul > li > dl dd:nth-child(1) {margin-top:0;}
header .header-wrap .gnb-box ul > li > dl dd a {font-size:16px; line-height:1.2; box-sizing:border-box; display:block; padding:10px 0;}
header .header-wrap .gnb-box ul > li > dl dd p {display:inline-block; vertical-align:middle; position:relative;}
header .header-wrap .gnb-box ul > li > dl dd p:before {content:""; width:0; height:1px; border-top:1px solid #8c2232; position:absolute; left:0; bottom:-3px; transition:width 0.25s linear;}
header .header-wrap .gnb-box ul > li > dl dd:hover a {color:#8c2232;}
header .header-wrap .gnb-box ul > li > dl dd:hover p:before {width:100%;}
header .header-wrap .btn-sitemap {width:40px; height:36px; position:absolute; right:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); cursor:pointer;}
header .header-wrap .btn-sitemap i {display:inline-block; font-size:0;}
header .header-wrap .btn-sitemap:before,
header .header-wrap .btn-sitemap:after {content:""; width:100%; height:4px; background:#fff; position:absolute; left:0; z-index:0;}
header .header-wrap .btn-sitemap:before {top:0;}
header .header-wrap .btn-sitemap:after {bottom:0;}
header .header-wrap .btn-sitemap i {width:100%; height:4px; background:#fff; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}

header.scroll .header-wrap .logo {background:url(/img/comm/logo_w.png) center no-repeat; background-size:auto 100%; visibility:visible;}

header.on {background:#fff;}
header.on .header-wrap .logo {background:url(/img/comm/logo.png) center no-repeat !important; background-size:auto 100%; visibility:visible;}
header.on .header-wrap .gnb-box ul:before {height:320px;}
header.on .header-wrap .gnb-box ul li a {color:#000;}
header.on .header-wrap .btn-sitemap:before,
header.on .header-wrap .btn-sitemap:after,
header.on .header-wrap .btn-sitemap i{background:#8c2232;}

header.active {background:#fff;}
header.active:before {content:""; width:100%; height:1px; border-top:1px solid #dedede; position:absolute; left:0; top:100px; z-index:100;}
header.active .header-wrap .logo {background:url(/img/comm/logo.png) center no-repeat !important; background-size:auto 100%; visibility:visible;}
header.active .header-wrap .gnb-box {height:100px;}
header.active .header-wrap .gnb-box ul {display:none;}
header.active .header-wrap .gnb-box ul:before {height:320px;}
header.active .header-wrap .gnb-box ul li a {color:#000;}
header.active .header-wrap .btn-sitemap:before,
header.active .header-wrap .btn-sitemap:after {height:2px; background:#000; left:0; top:17px;}
header.active .header-wrap .btn-sitemap:before {-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg);}
header.active .header-wrap .btn-sitemap:after {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg);}
header.active .header-wrap .btn-sitemap i {display:none;}

.gnb-bg {width:100%; height:320px; box-sizing:border-box; border:solid #dedede; border-width:1px 0; position:fixed; left:0; top:100px; z-index:999; background:#fff;}
.gnb-bg:before {content:""; width:100%; height:217px; background:url(/img/comm/gnb_bg.jpg) right 12% bottom no-repeat; background-size:auto 100%; position:absolute; left:0; bottom:0;}


footer {width:100%; box-sizing:border-box; background:#333;}
footer > .inner {width:95%; margin:0 auto; font-size:0; box-sizing:border-box; padding:80px 0; max-width:1600px;}
footer > .inner > * {display:inline-block; vertical-align:top; box-sizing:border-box; position:relative;}
footer .lf-box {width:255px;}
footer .lf-box .logo {width:255px; height:85px; background:url(/img/comm/logo_footer.png) center no-repeat; background-size:auto 100%; font-size:0;}
footer .lf-box .info {width:100%; margin:30px 0; font-size:16px; line-height:1.6; color:#959595;}
footer .lf-box ul.meb-fnb {width:100%; font-size:0; margin-bottom:30px;}
footer .lf-box ul.meb-fnb li {display:inline-block; vertical-align:middle; margin-right:20px; position:relative;}
footer .lf-box ul.meb-fnb li:before {content:""; width:1px; height:70%; border-right:1px solid #474747; position:absolute; right:-10px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
footer .lf-box ul.meb-fnb li:last-child {margin-right:0;}
footer .lf-box ul.meb-fnb li:last-child:before {display:none;}
footer .lf-box ul.meb-fnb li a {font-size:16px; color:#d5d5d5;}
footer .lf-box ul.sns {font-size:0; text-align:left;}
footer .lf-box ul.sns li {width:40px; height:40px; margin-left:10px; display:inline-block; vertical-align:middle;}
footer .lf-box ul.sns li:nth-child(1) {margin-left:0;}
footer .lf-box ul.sns li a {display:block; width:100%; height:100%; font-size:0;}
footer .lf-box ul.sns li.facebook {background:url(/img/comm/icon_facebook.png) center no-repeat; background-size:cover;}
footer .lf-box ul.sns li.youtube {background:url(/img/comm/icon_youtube.png) center no-repeat; background-size:cover;}
footer .rt-box {width:calc(100% - 255px);}
footer .rt-box .fnb {width:100%; font-size:0; text-align:right;}
footer .rt-box .fnb dl {margin-right:40px; min-width:150px; display:inline-block; vertical-align:top; text-align:left;}
footer .rt-box .fnb dl:last-child {margin-right:0;}
footer .rt-box .fnb dl > * {box-sizing:border-box; width:100%;}
footer .rt-box .fnb dl dt {font-size:17px; color:#ccc; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,1);}
footer .rt-box .fnb dl dd {margin-top:15px;}
footer .rt-box .fnb dl dd a {font-size:15px; color:#7c7c7c;}
footer .family-site {width:60%; max-width:200px; height:40px; box-sizing:border-box; margin:0 auto; border:1px solid #fff; position:relative;}
footer .family-site:before {content:""; width:0; height:0; border:solid transparent; border-width:0 4px; border-top:5px solid #fff; position:absolute; right:10px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
footer .family-site button {width:100%; height:38px; box-sizing:border-box; padding:0 20px 0 10px; font-size:15px; color:#fff; cursor:pointer; border:none; text-align:left;}
footer .family-site ul {width:calc(100% + 2px); position:absolute; left:-1px; bottom:39px; background:#fff; padding:10px 0; box-sizing:border-box; display:none;}
footer .family-site ul li {width:100%; box-sizing:border-box;}
footer .family-site ul li a {display:block; box-sizing:border-box; padding:8px 10px; font-size:15px;}
footer .copyright {width:100%; background:#333; text-align:center; box-sizing:border-box; padding:30px 0; border-top:1px solid rgba(255,255,255,0.1); font-size:16px; color:#545454;}

.sitemap {width:100%; height:calc(100vh - 100px); max-height:750px; background:#fff; position:absolute; left:0; top:100px; display:none;}
.sitemap.active {display:table;}
.sitemap:before {content:""; width:511px; height:519px; background:url(/img/comm/sitemap_bg.png) center top 50px no-repeat; position:absolute; right:3%; bottom:0; z-index:0;}
.sitemap > .inner {width:100%; display:table-cell; vertical-align:middle; box-sizing:border-box; padding:0 30px;}
.sitemap ul {width:100%; max-width:1000px; margin:0 auto;}
.sitemap ul li {width:100%; font-size:0; text-align:left; margin-top:30px;}
.sitemap ul li:nth-child(1) {margin-top:0;}
.sitemap ul li > * {display:inline-block; vertical-align:middle; margin-right:70px;}
.sitemap ul li > *:last-child {margin-right:0;}
.sitemap ul li .depth-1 {width:250px; font-size:40px; font-weight:700; letter-spacing:-2px; box-sizing:border-box; padding:5px 10px; cursor:pointer; position:relative; z-index:10;}
.sitemap ul li dl {font-size:0; width:calc(100% - 320px); font-size:0;}
.sitemap ul li dl dd {display:inline-block; vertical-align:middle; margin-right:30px;}
.sitemap ul li dl dd:last-child {margin-right:0;}
.sitemap ul li dl dd a {font-size:16px; font-weight:400;}
.sitemap ul li dl dd p {display:inline-block; vertical-align:middle; position:relative;}
.sitemap ul li dl dd p:before {content:""; width:0; height:1px; border-top:1px solid #8c2232; position:absolute; left:0; bottom:-4px; transition:width 0.25s linear;}
.sitemap ul li dl dd:hover a {color:#8c2232;}
.sitemap ul li dl dd:hover p:before {width:100%;}


.btn-top {width:60px; height:60px; background:#8c2232; position:fixed; right:5%; bottom:40px; font-size:0; cursor:pointer; z-index:500; transition:all 0.25s ease-in-out; display:none;}
.btn-top:before {content:""; width:8px; height:8px; border:solid #fff; border-width:2px 0 0 2px; position:absolute; left:50%; top:calc(50% + 1px); -webkit-transform:translate(-50%,-50%) rotate(45deg);- moz-transform:translate(-50%,-50%) rotate(45deg); transform:translate(-50%,-50%) rotate(45deg);}
.btn-top.active {display:block;}


.fade-in {opacity:0; transition:opacity 0.8s ease-in-out;}
.fade-in.on {opacity:1;}
.fade-in-up {opacity:0; -webkit-transform:translateY(30px); -moz-transform:translateY(30px); transform:translateY(30px); transition:transform 1s ease-in-out, opacity 0.5s ease-in-out;}
.fade-in-up.on {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0);}
.fade-in-left {opacity:0; -webkit-transform:translateX(-30px); -moz-transform:translateX(-30px); transform:translateX(-30px); transition:transform 1s ease-in-out, opacity 0.5s ease-in-out;}
.fade-in-left.on {opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0);}
.left-in {-webkit-transform:translateX(30px);- moz-transform:translateX(30px); transform:translateX(30px); transition:transform 0.5s linear;}
.left-in.on {-webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0);}
.right-in {-webkit-transform:translateX(-30px);- moz-transform:translateX(-30px); transform:translateX(-30px); transition:transform 0.5s linear;}
.right-in.on {-webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0);}
.delay-2 {transition-delay:0.2s;}
.delay-3 {transition-delay:0.3s;}
.delay-4 {transition-delay:0.4s;}
.delay-5 {transition-delay:0.5s;}
.delay-6 {transition-delay:0.6s;}
.delay-7 {transition-delay:0.7s;}
.delay-8 {transition-delay:0.8s;}
.delay-9 {transition-delay:0.9s;}
.delay-10 {transition-delay:1s;}


.layer-popup {width:90%; max-width:500px;  background:#fff; position:fixed; z-index:10000; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); display:none;}
.layer-popup .popup-title {width:100%; height:60px; background:#8c2232; padding:0 20px; box-sizing:border-box;}
.layer-popup .popup-title h1 {font-size:20px; font-weight:500; color:#fff; line-height:60px;}
.layer-popup .btn-close {width:30px; height:30px; position:absolute; right:20px; top:15px; cursor:pointer; font-size:0;}
.layer-popup .btn-close:before, .layer-popup .btn-close:after {content:""; width:1px; height:100%; border-left:1px solid #fff; position:absolute; left:14px; top:0;}
.layer-popup .btn-close:before {-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg);}
.layer-popup .btn-close:after {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg);}
.layer-popup .popup-conts {width:100%; height:calc(60vh - 60px); max-height:500px; box-sizing:border-box; position:relative;}
.layer-popup .popup-conts > .wrap {width:100%; height:calc(100% - 60px); padding:0 30px; box-sizing:border-box; overflow-y:auto; position:absolute; left:0; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.layer-popup .popup-conts > .wrap .conts {width:100%; height:100%; box-sizing:border-box; font-size:16px; font-weight:300; line-height:1.6; word-wrap:break-word; word-break:keep-all; white-space:pre-wrap;}

.popup-bg {width:100%; height:100vh; position:fixed; left:0; top:0; z-index:9999; background:rgba(0,0,0,0.7);}



@media screen and (max-width: 1920px){

	.btn-top {right:20px;}

}


@media screen and (max-width: 1600px){

	footer .lf-box {width:100%;}
	footer .lf-box .logo {width:100%; margin:0 auto;}
	footer .lf-box .info {text-align:center; width:100%; font-size:0;}
	footer .lf-box .info p {display:inline-block; vertical-align:middle; margin:0 20px; font-size:15px; position:relative;}
	footer .lf-box .info p:before {content:""; width:1px; height:50%; border-left:1px solid rgba(255,255,255,0.1); position:absolute; left:-20px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
	footer .lf-box .info p:nth-child(1):before {display:none;}
	footer .lf-box ul.meb-fnb {text-align:center;}
	footer .lf-box ul.sns {text-align:center;}
	footer .rt-box {width:100%; margin-top:50px;}
	footer .rt-box .fnb {text-align:center;}
	footer .rt-box .fnb dl {margin-right:30px;}

}



@media screen and (max-width: 1280px){

	header .header-wrap .gnb-box ul > li {margin-left:30px;}
	header .header-wrap .gnb-box ul > li > a {font-size:20px;}
	header .header-wrap .gnb-box ul > li > dl {width:130px;}
	header .header-wrap .gnb-box ul > li > dl.snb-4, header .header-wrap .gnb-box ul > li > dl.snb-5 {width:110px;}
	header .header-wrap .gnb-box ul > li > dl.snb-4 {left:calc(50% - 7px);}
	header .header-wrap .gnb-box ul > li > dl dd {margin-top:10px;}
	header .header-wrap .gnb-box ul > li > dl dd a {font-size:15px;}

	header.on .header-wrap .gnb-box ul:before {height:280px;}

	.gnb-bg {height:280px; box-sizing:border-box; border:solid #dedede; border-width:1px 0; position:fixed; left:0; top:100px; z-index:999;}
	.gnb-bg:before {height:177px; background-position:right 5% bottom;}

	footer .rt-box {width:100%; max-width:900px; margin:0 auto; margin-top:50px; display:block;}
	footer .rt-box .fnb dl {margin-right:40px; width:calc(((100% - 80px) / 3) - 1px); margin-top:50px;}
	footer .rt-box .fnb dl:nth-child(3n) {margin-right:0;}
	footer .rt-box .fnb dl:nth-child(-n+3) {margin-top:0;}

	.sitemap {max-height:500px;}
	.sitemap:before {width:380px; height:386px; background-size:cover;}
	.sitemap ul {max-width:700px;}
	.sitemap ul li {margin-top:30px;}
	.sitemap ul li > * {margin-right:50px;}
	.sitemap ul li .depth-1 {width:200px; font-size:32px; letter-spacing:-1.5px;}
	.sitemap ul li dl {width:calc(100% - 250px);}
	.sitemap ul li dl dd a {font-size:15px;}


}

@media screen and (max-width: 1024px){}

@media screen and (max-width: 900px){

	header .header-wrap {height:80px;}
	header .header-wrap .logo {background:url(/img/comm/logo_w.png) center no-repeat; background-size:auto 100%; width:40px; height:55px; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); visibility:visible;}
	header .header-wrap .gnb-box {display:none;}
	header .header-wrap .btn-sitemap {height:33px;}

	header.on {border-bottom:1px solid #dedede;}
	header.on .header-wrap .gnb-box ul:before {display:none;}

	header.active:before {top:80px;}
	header.active .header-wrap .logo {background-size:auto 100% !important;}
	header.active .header-wrap .btn-sitemap:before,
	header.active .header-wrap .btn-sitemap:after {top:16px;}

	footer .lf-box .logo {height:70px;}
	footer .lf-box .info p {font-size:14px;}
	footer .lf-box ul.meb-fnb li a {font-size:15px;}
	footer .rt-box .fnb {display:none;}
	footer .copyright {padding:20px 0; font-size:15px;}

	.sitemap {top:80px;}

	.btn-top {width:50px; height:50px;}
	.btn-top:before {width:7px; height:7px;}

	.layer-popup .popup-title h1 {font-size:18px;}
	.layer-popup .popup-conts {max-height:400px;}
	.layer-popup .popup-conts > .wrap > .conts {font-size:15px;}

}

@media screen and (max-width: 768px){

	footer > .inner {padding:60px 0;}
	footer .lf-box .logo {height:60px;}
	footer .lf-box .info p {font-size:13px;}
	footer .lf-box ul.meb-fnb li a {font-size:14px;}

	.sitemap {max-height:100vh; height:calc(100vh - 80px); padding:50px 30px; overflow-y:auto; box-sizing:border-box;}
	.sitemap:before {width:280px; height:285px; background-position:center; bottom:auto; top:70%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
	.sitemap > .inner {width:100%; height:100%;}
	.sitemap ul {max-width:700px;}
	.sitemap ul li {margin-top:40px; text-align:center;}
	.sitemap ul li > * {margin-right:0;}
	.sitemap ul li .depth-1 {width:auto; font-size:28px; margin-bottom:10px;}
	.sitemap ul li dl {width:100%; display:none; margin-top:10px;}
	.sitemap ul li dl dd {width:100%; margin-right:0; margin-top:20px;}
	.sitemap ul li dl dd:nth-child(1) {margin-top:0;}
	.sitemap ul li dl dd a {font-size:15px;}

	.btn-top {width:40px; height:40px; bottom:30px;}
	.btn-top:before {width:6px; height:6px;}

	.layer-popup .popup-title h1 {font-size:17px;}
	.layer-popup .popup-conts > .wrap {height:calc(100% - 50px); padding:0 25px;}
	.layer-popup .popup-conts > .wrap > .conts {font-size:14px;}

}

@media screen and (max-width: 600px){}

@media screen and (max-width: 480px){

	header .header-wrap {height:60px;}
	header .header-wrap .logo {width:33px; height:45px;}
	header .header-wrap .btn-sitemap {width:30px; height:21px;}
	header .header-wrap .btn-sitemap:before,
	header .header-wrap .btn-sitemap:after,
	header .header-wrap .btn-sitemap i {height:2px;}

	header.active:before {top:60px;}
	header.active .header-wrap .btn-sitemap:before,
	header.active .header-wrap .btn-sitemap:after {top:10px;}

	footer > .inner {padding:50px 0;}
	footer .lf-box .logo {height:45px;}
	footer .lf-box .info {margin:20px 0;}
	footer .lf-box .info p {font-size:12px; margin:0 10px;}
	footer .lf-box .info p:before {left:-10px;}
	footer .lf-box ul.meb-fnb {margin-bottom:20px;}
	footer .lf-box ul.meb-fnb li a {font-size:13px;}
	footer .rt-box {margin-top:30px;}
	footer .family-site button {font-size:13px}
	footer .family-site ul li a {font-size:13px;}
	footer .copyright {font-size:12px;}

	.sitemap {height:calc(100vh - 60px); padding:40px 20px; top:60px;}
	.sitemap:before {width:170px; height:173px; top:80%;}
	.sitemap ul li {margin-top:20px;}
	.sitemap ul li .depth-1 {font-size:20px;}
	.sitemap ul li dl {width:100%;}

	.btn-top {width:35px; height:35px; bottom:20px;}
	.btn-top:before {width:5px; height:5px;}

	.fade-in-up {opacity:0; -webkit-transform:translateY(15px); -moz-transform:translateY(15px); transform:translateY(15px); transition:transform 1s ease-in-out, opacity 0.5s ease-in-out;}
	.fade-in-up.on {opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0);}
	.fade-in-left {opacity:0; -webkit-transform:translateX(-15px); -moz-transform:translateX(-15px); transform:translateX(-15px); transition:transform 1s ease-in-out, opacity 0.5s ease-in-out;}
	.fade-in-left.on {opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0);}
	.left-in {-webkit-transform:translateX(15px);- moz-transform:translateX(15px); transform:translateX(15px); transition:transform 0.5s linear;}
	.left-in.on {-webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0);}
	.right-in {-webkit-transform:translateX(-15px);- moz-transform:translateX(-15px); transform:translateX(-15px); transition:transform 0.5s linear;}
	.right-in.on {-webkit-transform:translateX(0); -moz-transform:translateX(0); transform:translateX(0);}

	.layer-popup .popup-title {height:50px;}
	.layer-popup .popup-title h1 {font-size:16px; line-height:50px;}
	.layer-popup .btn-close {width:24px; height:24px; top:13px; right:10px;}
	.layer-popup .btn-close:before, .layer-popup .btn-close:after {left:11px;}
	.layer-popup .popup-conts {max-height:300px;}
	.layer-popup .popup-conts > .wrap {height:calc(100% - 40px); padding:0 20px;}
	.layer-popup .popup-conts > .wrap > .conts {font-size:13px;}

}