@charset "utf-8";
/* ********************************************************************
 * name : À¯ºñÀ¥
 * filename : layout.css
 * description : Àüü ·¹À̾ƿô css 
 * date : 2023-09-22
********************************************************************* */

#wrap {position: relative;min-width: 320px;width: 100%;height: 100%;z-index: 300;overflow: hidden;}

/* === Çì´õ === */
#header {position: fixed;min-width: 320px;width: 100%;z-index: 100;transition:all 0.5s;background:#fff;}
#headBox{position: relative;margin: 0 auto;height: 90px;z-index: 200;border-bottom: 1px solid #dededd;}
#headBox .logo {position: absolute;top: 25px;z-index: 110;left: 5%;height: 39px;}
#headBox .logo img{width:100%;height:100%;}

.scroll #headBox{height: 65px;transition:all 0.5s;box-shadow: 0 3px 6px rgba(85,85,85,0.12);border: 0;}
.scroll #headBox .logo{height: 30px;top: 18px;transition:all 0.5s;}
.scroll #gnbBox > ul > li > a{line-height: 65px;font-size: 17px;transition:all 0.5s;}
.scroll .gnb > ul > li .gnb-2dep{top:calc(65px - 10px);transition:all 0.5s;}
.scroll .gnb > ul > li .gnb-2dep ul li a {font-size: 15px;transition:all 0.5s;}
.scroll .contactBtn {top: 0;right: 70px;}
.scroll .contactBtn a {height: 65px;line-height: 65px;font-size: 16px;transition: all 0.5s;border-radius: 0;}
.scroll .bt_menuBox {height: 65px;width: 70px;transition:all 0.5s;}
.scroll .bt_menuBox span{display:none;}
.scroll #headBox .bt_menu {top: 14px;right: 24px;transition:all 0.5s;}
.scroll #headBox .bt_menu i{width: 25px;}

/* === pc¸Þ´º === */
#gnbBox{position: relative;text-align: center;z-index: 99;margin: 0 auto;}
#gnbBox > ul{display: inline-block;margin-left: -80px;}
#gnbBox > ul > li{position:relative; float:left; word-break:keep-all;}
#gnbBox > ul > li > a{position:relative; z-index:100;display:block;text-transform:uppercase;line-height:90px;padding:0 40px;text-align:center;letter-spacing: -0.05em;color:#323333; font-size:19px;font-weight:500; -webkit-transition:all 0.5s;transition:all 0.5s;}
#gnbBox > ul > li > a:hover,
#gnbBox > ul > li > a:focus,
#gnbBox > ul > li.on > a{color:#d7001c;}

.gnb > ul > li .gnb-2dep{position:absolute; top:calc(90px - 20px);	left:50%;margin-left: -95px;z-index:99;width:190px;text-align:left;visibility:hidden;opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
.gnb > ul > li .gnb-2dep:before{content:"";position:absolute;top:0px;left:0px;right:0px;height:0;border-radius: 5px;background-color:#d7001c; -webkit-transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
.gnb > ul > li .gnb-2dep ul{padding:15px 0px;}
.gnb > ul > li .gnb-2dep ul li{position:relative;padding:10px;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 > ul > li .gnb-2dep ul li a{display:block;color:#fff;font-size:16px;font-weight:400;text-align:center;line-height:1.4;opacity:0.8;filter:Alpha(opacity=80);}
.gnb > ul > li .gnb-2dep ul li a:hover{opacity:1.0;filter:Alpha(opacity=100);}

.gnb > ul > li .gnb-2dep.open{visibility:visible;opacity:1.0;filter:Alpha(opacity=100);}
.gnb > ul > li .gnb-2dep.open:before{height:100%;}
.gnb > ul > li .gnb-2dep.open 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 > ul > li .gnb-2dep.open ul li:nth-child(1){-webkit-transition-delay: 0.1s; transition-delay:0.1s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(2){-webkit-transition-delay: 0.2s; transition-delay:0.2s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(3){-webkit-transition-delay: 0.3s; transition-delay:0.3s;}
.gnb > ul > li .gnb-2dep.open ul li:nth-child(4){-webkit-transition-delay: 0.4s; transition-delay:0.4s;}

.contactBtn{position: absolute;top: 15px;right: 125px;z-index: 110;}
.contactBtn a{width: 200px;display: block;background: #e72526;text-align: center;color: #fff;height: 60px;line-height: 60px;font-size: 17px;border-radius: 50px;font-weight: 500;}
.contactBtn a i{transform: rotateZ(45deg);font-size: 24px;vertical-align: text-bottom;transition: all 0.5s;margin-left: 6px;}
.contactBtn a:hover{box-shadow: 245px 0 0 0 #274da0 inset;}
.contactBtn a:hover i{transform: rotateZ(90deg);}

/* === ¸ð¹ÙÀϸ޴º === */
.bt_menuBox{position: absolute;right: 0;top: 0;width: 100px;height: 90px;background: #2d2d2d;z-index: 110;}
.bt_menuBox span{color: #fff;font-size: 12px;line-height: 130px;text-align: center;display: block;}
#headBox .bt_menu {position:absolute; top:19px; right:33px; z-index:110; font-size:0;}
#headBox .bt_menu i {display:block; width:36px; height:2px; background:#fff; margin-top:8px;position: relative;}
#headBox .bt_menu i:nth-child(1) {animation : menubar1 .75s forwards;}
#headBox .bt_menu i:nth-child(2) {animation : menubar2 .75s forwards;}
#headBox .bt_menu i:nth-child(3) {animation : menubar3 .75s forwards;}
#headBox .close i:nth-child(1) {animation :close-menubar1 0.75s forwards;background: #fff;}
#headBox .close i:nth-child(2) {opacity : 0;}
#headBox .close i:nth-child(3) {animation : close-menubar3 .75s forwards; width:100%;background: #fff;}

.mGnb {display: none; position:fixed; top:0; left:0; width:100%; height:100%; background:#f9f9f9;z-index: 100;}
.mGnb .list_wrap {width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;}
.mGnb .list_wrap ul.dept1 {display:flex;width: 1450px;}
.mGnb .list_wrap ul.dept1 > li {width: 16.666%;}
.mGnb .list_wrap ul.dept1 > li > a {font-size: 26px;color: #474747;border-bottom: 1px solid #393939;font-weight: 600;padding: 0 20px 25px;}
.mGnb ul.dept2 {padding-top:40px;}
.mGnb ul.dept2 > li {width:100%; font-size:18px; font-weight:300; padding:10px 0; }
.mGnb ul.dept2 > li > a {color:#5f5f5f; font-weight: 400;}
.mGnb ul.dept2 > li > a:hover {text-decoration:underline; color:#d7001c;}

/* === ÄÜÅÙÃ÷ === */
#container{position:relative;height:100%}
#container #content{position:relative;min-height:300px;}
#container #content::after{display:block;clear:both;content:''}
.contentWrap{padding-top: 91px;}

.subTitle{padding: 3em 0 1em;}
.subTitle .location ul li{position:relative;font-size: 14px;display: inline-block;vertical-align: unset;color: #303030;font-weight: 500;}
.subTitle .location ul li::after{content: "\e93f";font-family: 'xeicon';display: inline-block;position: relative;top: -1px;vertical-align: middle;margin: 0px 7px;color: #747474;font-size: 20px;}
.subTitle .location ul li:last-child::after{display:none;}
.subTitle .location .home a:hover i{color:#d7001c;transition: all 0.5s ease;}
.subTitle .titleBox{color: #151515;margin: 3.5em 0;text-transform: uppercase;}
.subTitle .titleBox h1{font-size:56px;}
.subTitle .titleBox h1 em{font-size: 22px;margin-left: 25px;display: inline-block;position: relative;top: -3px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;}

/* === ¼­ºê¸Þ´º === */
.sub_menu {border-bottom:1px solid #dcdcdc;margin-left: -40px;position: relative;height: 67px;}
.sub_menu ul {display: flex;align-items: center;max-width: 1280px;margin: 0 auto;flex-wrap: wrap;}
.sub_menu ul li {position: relative;padding: 0 20px;margin-right: 25px;}
.sub_menu ul li a:after{content:''; position:absolute; bottom:-1px; left:0; width:0; height:2px; background:#d6001b;webkit-transition: all 0.5s;transition: all 0.5s;}
.sub_menu ul li:hover a,
.sub_menu ul li.active a,
.sub_menu ul li a.on{color:#d6001b;transition: all 0.5s;}
.sub_menu ul li a:hover:after,
.sub_menu ul li.active:after,
.sub_menu ul li a.on:after {width: 100%;webkit-transition: all 0.5s;transition: all 0.5s;}
.sub_menu ul li a {font-size: 22px;width: 260px;height: 72px;display: block;background: #fff;text-align: center;line-height: 72px;border-radius: 50px;}

/* === °ßÀû¹®ÀÇ === */
.contactCon{background: #ef1617;padding: 2em 0;}
.contactCon .contact{display: flex;justify-content: center;align-items: center;}
.contactCon .contact p{font-size: 29px;color: #fff;font-weight: 300;margin-right: 60px;}
.contactCon .contact p strong{display: block;font-weight: 600;}
.contactCon .contact h2 a{font-size:20px;width:260px;height:72px;display:block;background: #fff;border-radius: 50px;text-align: center;line-height: 72px;transition: all 0.5s;}
.contactCon .contact h2 a:hover{box-shadow: 265px 0 0 0 #141515 inset;color:#fff;}
.contactCon .contact h2 a i{opacity: 3;transform: rotateZ(90deg);margin-left:10px;transition: all 0.2s;}
.contactCon .contact h2 a:hover i{opacity: 1;margin-left:25px;}


/* === ǪÅÍ === */
#footer{position: relative;background: #151515;}
.tBox{position: relative;padding: 5em 0 0;}
.tBox h2 img{height: 35px;filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(344deg) brightness(104%) contrast(101%);opacity: 0.7;}
.tBox address{padding: 3em 0 4em;}
.tBox address span{display: block;color: #b7b7b7;margin-bottom: 10px;font-size: 16px;}
.tBox address p{position: relative;font-size:16px;color:#b7b7b7;margin-right: 50px;display: inline-block;}
.tBox address strong{font-size:16px;color:#808080;margin-right: 15px;}
.tBox address p:after{content: '';width: 1px;height: 9px;background: #3f3f3f;position: absolute;top: 9px;left: -27px;}
.tBox address p:nth-child(2):after{display:none;}
#footer .line{width:100%;height:1px;border-top:1px solid #3f3f3f;}
.fBox{padding: 4em 0 6em;}
.fBox small{font-size:15px;color:#808080}
.fBox .utill{text-align: right;margin-top: -26px;}
.fBox .utill li{display: inline-block;margin-left: 35px;}
.fBox .utill li a{font-size:16px;color:#9a9a9a;}
.fBox .utill li a i{color:#d7001c;position: relative;}
.fBox .utill li a i:after{content: '';position: absolute;width: 2px;height: 2px;background: #9a9ab4;top: 12px;right: -50%;}
.fBox .utill li a:hover{color:#fff}

.topBtn {position: fixed;bottom: 15px;right: 15px;display:none;width: 46px;height: 46px;background-color: #fff;outline:none;text-align: center;color: #333;z-index: 999;border: 1px solid #eee;box-sizing: border-box;cursor:pointer;
    -webkit-transition: all 0.6s;-moz-transition: all 0.6s;-o-transition: all 0.6s;-ms-transition: all 0.6s;transition: all 0.6s -webkit-border-radius:50%;-moz-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;}
.topBtn i {display: inline-block;font-size: 16px;line-height: 46px;transition: all 0.3s;}
.topBtn:hover i {transform: translateY(-3px);}

/*
===============================================
animation
===============================================
*/

@keyframes close-menubar1 {
    0% {transform:translateY(0) rotate(0);} 
    50% {transform:translateY(3px) rotate(0);} 
    100% {transform:translateY(13px) rotate(45deg);}
}

@keyframes close-menubar3 {
    0% {transform : translateY(0) rotate(0);} 
    50% {transform : translateY(-7px) rotate(0);} 
    100% {transform : translateY(-7px) rotate(-45deg);}
}
@keyframes menubar1 {
    0% {transform : translateY(8.5px) rotate(45deg);} 
    50% {transform : translateY(8.5px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}
@keyframes menubar2 {
    0% {left: 0;} 
    100% {left: 10px;}
}
@keyframes menubar3 {
    0% {transform : translateY(-9px) rotate(-45deg);} 
    50% {transform : translateY(-9px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}


/*
===============================================
¹ÝÀÀÇü css
===============================================
*/

@media all and (min-width:1921px){
	#gnbBox > ul > li > a{padding: 0 60px;}
}

@media all and (max-width:1600px){
	#headBox .logo{left:3%;}
	#gnbBox > ul {margin-left: -100px;}
	#gnbBox > ul > li > a {padding: 0 35px; font-size: 18px;}
}

@media all and (max-width:1480px){
	#gnbBox{display:none;}
	.mGnb .list_wrap ul.dept1 > li > a {font-size: 20px;}
}

@media all and (max-width:1280px){
	.contactCon .contact p {font-size: 25px;}
	.contactCon .contact h2 a {font-size: 18px;width: 230px;height: 60px;line-height: 60px;}
	.contactCon .contact h2 a i {vertical-align: -1px;}
}

@media all and (max-width:1080px){
	.mGnb .list_wrap{flex-wrap: wrap;}
	.mGnb .list_wrap ul.dept1 {width: 100%;flex-direction: row;flex-wrap: wrap;}
	.mGnb .list_wrap ul.dept1 > li {width: 33.333%;margin-top: 30px;}
	.mGnb ul.dept2 > li {font-size: 17px;padding: 6px 0;}

	.contactCon {padding: 3em 0;}
	.contactCon .contact{flex-direction: column;}
	.contactCon .contact p {margin-right: 0;text-align: center;margin-bottom: 20px;}
	.fBox .utill {text-align: left;margin-top: -65px;}
	.fBox .utill li {margin-left: 0;margin-right: 30px;}
}

@media all and (max-width:640px){
	#headBox {height: 70px;}
	#headBox .logo {left: 5%;height: 30px;top: 20px;}
	.scroll .contactBtn a {font-size: 15px;}

	.contactBtn{z-index: 120;top: 0;right: 85px;}
	.contactBtn a {width: 130px;height: 70px;line-height: 70px;font-size: 15px;border-radius: 0 0 0 15px;background: #E62324;}
	.contactBtn a i{font-size: 19px;margin-left: 0px;}
	.contactBtn a span{margin-right: -4px;}
	.mGnb {left: inherit;width: 100%; right: 0;background: #1e1e1e;overflow-y: scroll;z-index: 110;}
	.bt_menuBox {z-index: 120;height: 70px;width: 85px;}
	.mGnb .list_wrap ul.dept1 {display: block;width: 100%;}
	.bt_menuBox span{display:none;}
	#headBox .bt_menu {top: 15px;right: 29px;z-index: 120;}
	#headBox .bt_menu i {width: 27px;}
	.mGnb .list_wrap ul.dept1 > li {width: 100%;}
	.mGnb .list_wrap {display: block;margin-top: 80px;text-align: left;height:auto;margin-bottom: 50px;}
	.mGnb .list_wrap ul.dept1 > li > a {font-size: 20px;padding: 0;display: block;margin: 0 35px;padding-bottom: 20px;border-bottom: 1px solid #494949;color: #fff;font-weight: 500;}
	.mGnb ul.dept2 {padding-top: 15px;margin: 0 35px;}
	.mGnb ul.dept2 > li > a {color: #a1a1a1;font-weight: 400;font-size: 16px;}
	.mGnb ul.dept2 > li > a:hover {color: #ffca00;}

	.contactCon .contact p {font-size: 19px;letter-spacing: -0.05em;}

	.tBox {padding: 3em 0 0;}
	.tBox address {padding: 1em 0 2em;}
	.fBox {padding: 5em 0 6em;}
	.fBox .utill li {margin-right: 20px;}

	.contactCon{background:#ea1011;}
}

@media all and (max-width:380px){
	#headBox .logo {height: 25px;top: 23px;}
	.contactBtn {right: 70px;}
	.contactBtn a {width: 105px;}
	.contactBtn a span{display:none;}
	.bt_menuBox {width: 70px;}
	#headBox .bt_menu i {width: 18px;}

	.fBox {padding: 8em 0 4em;}
	.fBox .utill {margin-top: -120px;}
	.fBox .utill li {margin-right: 0;display: block;}
	.contactCon .contact p {font-size: 18px;}
	.contactCon .contact h2 a {font-size: 16px;}
}