@charset "utf-8";
/* ********************************************************************
 * name : SEM
 * filename : layout.css
 * description : 전체 레이아웃 css 
 * date : 2023-12-17
********************************************************************* */

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

/* === 헤더 === */
#header {position: relative;min-width: 320px;width: 100%;z-index: 1000;}
#headBox{display: flex;justify-content: space-between;align-items: center;}
#header .logo {position: relative;left: 9.5%;width: 155px;}
#header .logo img{width:100%;}

.main-tool-bar {height: 135px;background: #fff;text-align: center;position: fixed;width: 100%;left: 0;top: 0;transition: ease 0.4s;z-index: 110;}
/*.main-tool-bar--scrolled {height: 40px;}
.scrollable-area {height: 200vh;}*/

/* === 메뉴 === */
#header .gnbBox{display: flex;flex-direction: row;position: relative;right: 7.5%;}
#header .gnbBox .gnb{display: flex;flex-direction: row;align-items: center;}
#header .gnbBox .gnb li{margin: 0 35px;}
#header .gnbBox .gnb li a{font-size: 20px;color: #000;font-weight: 600;letter-spacing: -0.02em;}
#header .gnbBox .gnb li a span{position: relative;}
#header .gnbBox .gnb li a span:after{content:'';position: absolute;bottom: -5px;left: 0;width: 0;height: 1px;background: #000;webkit-transition: all 0.5s;transition: all 0.5s;}
#header .gnbBox .gnb li a:hover span:after{width: 100%;}
#header .gnbBox .gnb li a span:before{content: '';position: absolute;width: 0;height: 0;background: #3671f5;right: -5px;top: -6px;webkit-transition: all 0.3s;transition: all 0.3s;}
#header .gnbBox .gnb li a:hover span:before{width: 5px;height: 5px;}
#header .gnbBox .gnb .gOn span:after,
#header .gnbBox .gnb li a.active span:after{width: 100%;}
#header .gnbBox .gnb .gOn span:before{width: 5px;height: 5px;}
#header .gnbBox .gnb .lan a:hover,
#header .gnbBox .gnb li a.on{color: #3671f5;webkit-transition: all 0.5s;transition: all 0.5s;}
#header .gnbBox .gnb li a.on{font-weight: 600;}

#header .bt_menu {position:absolute; top:25px; right:3%; z-index:110; font-size:0;display:none;}
#header .bt_menu i {display:block; width:36px; height:2px; background:#000; margin-top:8px;position: relative;transition:all 0.5s;}
#header .bt_menu i:nth-child(1) {animation : menubar1 .75s forwards;}
#header .bt_menu i:nth-child(2) {animation : menubar2 .75s forwards;}
#header .bt_menu i:nth-child(3) {animation : menubar3 .75s forwards;}
#header .bt_menu:hover i:nth-child(2) {animation : menubar2hover .75s forwards;background-color:#2856be;}
#header .close i:nth-child(1) {animation :close-menubar1 0.75s forwards;background: #000;}
#header .close i:nth-child(2) {opacity : 0;}
#header .close i:nth-child(3) {animation : close-menubar3 .75s forwards; width:100%;background: #000;}

.mGnb {display: none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff;z-index: 100;}
.mGnb .box{display: flex;flex-wrap: wrap;align-items: center;box-sizing: border-box;flex-direction: column;justify-content: center;height: 100vh;position: relative;}
.mGnb .box .list_wrap {position: relative;}
.mGnb .box .list_wrap:after{content:'';position:absolute;top:0;left:0;border-left: 1px solid #878787;animation: gnb-line 2s cubic-bezier(0.2, 0, 0.2, 1) both;}
.mGnb .box .list_wrap ul {display: flex;flex-direction: column;padding: 0 0 0 50px;}
.mGnb .box .list_wrap ul > li {display: flex;align-items: center;}
.mGnb .box .list_wrap ul > li > a{font-size: 22px;color: #000;font-weight: 400;margin: 15px 0;}
.mGnb .box .list_wrap ul > li > a span{position: relative;}
.mGnb .box .list_wrap ul > li > a span:after{content:'';position: absolute;bottom: -5px;left: 0;width: 0;height: 1px;background: #000;webkit-transition: all 0.5s;transition: all 0.5s;}
.mGnb .box .list_wrap ul > li > a:hover span:after{width: 100%;}
.mGnb .box .list_wrap ul > li > a span:before{content: '';position: absolute;width: 0;height: 0;background: #3671f5;right: -5px;top: -6px;webkit-transition: all 0.3s;transition: all 0.3s;}
.mGnb .box .list_wrap ul > li > a:hover span:before{width: 5px;height: 5px;}
.mGnb .box .list_wrap .gOn span:after,
.mGnb .box .list_wrap ul > li > a.active span:after{width: 100%;}
.mGnb .box .list_wrap .gOn span:before{width: 5px;height: 5px;}
.mGnb .box .list_wrap .lan a:hover,
.mGnb .box .list_wrap li a.on{color: #3671f5;webkit-transition: all 0.5s;transition: all 0.5s;}
.mGnb .box .list_wrap li a.on{font-weight: 600;}


/* 애니효과 */
.ani{animation:ani-delay 1s ease 0s forwards;opacity:0;}

.delay1{animation-delay:0.1s;}
.delay2{animation-delay:0.3s;}
.delay3{animation-delay:0.5s;}
.delay4{animation-delay:0.8s;}
.delay5{animation-delay:1.1s;}
.delay6{animation-delay:1.4s;}
.delay7{animation-delay:1.6s;}

/* === 콘텐츠 === */
#container{position:relative;height:100%}
#container #content{position:relative;min-height:300px;}
#container #content::after{display:block;clear:both;content:''}
.c-inner{max-width:1560px;margin: 0 auto;}

/* === 푸터 === */
#footer{position: relative;background:#101010;padding-top: 8em;}
.tBox{position: relative;}
.tBox .ftxt{font-size: 38px;color:#fff;font-weight: 900;}
.tBox address{margin: 3em 0 3.5em;}
.tBox address ul{display: flex;align-items: center;}
.tBox address ul li{}
.tBox address ul li img{margin-right: 40px;}
.tBox address ul li span{font-size:15px;color:#fff;display: block;margin: 10px 0;}
.tBox address ul li span strong{position: relative;padding: 0 10px;width: 80px;display: inline-block;margin-right: 40px;text-align: center;}
.tBox address ul li span strong:after{content: '';width: 2px;height: 12px;background:#fff;display: inline-block;position: absolute;right: 0;top: 5px;}
.tBox address ul li span strong:before{content: '';width: 2px;height: 12px;background:#fff;display: inline-block;position: absolute;left: 0;top: 6px;}
.tBox .addrTfe{display: flex;align-items: flex-end;margin: 2.5em 0 0;}
.tBox .addrTfe p{font-size:22px;color:#fff;margin-right: 40px;}
.tBox .addrTfe p span{font-size:17px;color:#7D7D7D;font-weight: 900;margin-right: 30px;}
.tBox .addrBtn{background:#0000e1;color:#fff;font-size:18px;position: absolute;right: 0;bottom: 0;width: 223px;height: 60px;line-height: 59px;text-align: center;border-radius: 50px;transition: all 0.3s ease 0s;}
.tBox .addrBtn:hover{background: #006cf2;box-shadow: 0px 15px 20px rgb(0 0 0);transform: translateY(-7px);}
#footer .line{width:100%;height:1px;border-top:1px solid #343434;}
.fBox{padding: 3em 0 6em;}
.fBox small{font-size:14px;color:#7D7D7D;}
.fBox small a{color:#7D7D7D;}


.topBtn {position: fixed;bottom: 15px;right: 15px;z-index: 10;display:none;width: 46px;height: 46px;background-color: #fff0;outline:none;text-align: center;color: #333;z-index: 10;border: 1px solid #808080;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: 19px;line-height: 46px;transition: all 0.3s;color: #808080;}
.topBtn:hover{background-color: #2856be;border: 1px solid #2856be;}
.topBtn:hover i {transform: translateY(-3px);color:var(--white-color);}

/*
===============================================
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 menubar2hover {
    0% {left: 10px;} 
    100% {left: 0px;}
}

@keyframes menubar3 {
    0% {transform : translateY(-9px) rotate(-45deg);} 
    50% {transform : translateY(-9px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}

@keyframes gnb-line {
	from {
		filter:Alpha(opacity=0);
		height:0;
	}
	to {
		filter:Alpha(opacity=100);
		height:100%;
	}
}

@keyframes ani-delay{
	0%{transform: translate3d(0, 80%, 0);opacity: 0;}
	100%{transform: translate3d(0, 0, 0);opacity: 1;}
}

/*
===============================================
반응형 css
===============================================
*/
@media all and (max-width:1600px){
	#header .logo {position: relative;left: 3%;}
	#header .gnbBox{right: 2.5%;}
	.c-inner{margin:0 3%;}
}

@media all and (max-width:1280px){
	#header .gnbBox{display:none;}
	#header .bt_menu{display:block;}
	.main-tool-bar {height: 87px;}
	#header .logo {top: 6px;width: 133px;}

	#footer{padding-top:6em;}
	.tBox address ul {align-items: flex-start;flex-direction: column;}
	.tBox address ul li img {margin-bottom: 20px;}
	.tBox .addrTfe p span {display: block;}
}


@media all and (max-width:1024px){
	#header .logo {left: 3%;width: 110px;top: 2px;}
	.tBox .ftxt {font-size: 32px;}
	.tBox .addrBtn {font-size: 17px;right: inherit;bottom: inherit;top: 88px;left: 155px;width: 185px;height: 50px;line-height: 49px;}
}

@media all and (max-width:919px){
	.sem #wrap {overflow: hidden;}
}

@media all and (max-width:800px){
	.tBox .addrTfe p {font-size: 18px;}
	.fBox {padding: 3em 0 4em;}
}

@media all and (max-width:680px){
	#footer {padding-top: 5em;}
	.tBox .addrTfe {align-items: flex-start;flex-direction: column;}
	.tBox .addrTfe p span {display: inline-block;width: 60px;font-weight: 500;}
	.tBox .addrTfe p {margin: 5px 0;}
	.tBox address ul li span strong {display: block;margin: 15px 0 5px;}
}

@media all and (max-width:640px){
	#header .logo {left: 5%;}
	#header .bt_menu {right: 5%;}
	.mGnb .box {align-items: flex-start;}
	.mGnb .box .list_wrap {left: 5%;}

	@keyframes menubar2 {
		0% {left: 0;} 
		100% {left: 0px;}
	}

	@keyframes menubar2hover {
		0% {left: 0px;} 
		100% {left: 0px;}
	}

	.c-inner{margin:0 5%;}
}

@media all and (max-width:600px){
	.tBox .ftxt {font-size: 30px;font-weight: 600;}

	.tBox .addrTfe {margin: 0.5em 0 0;}
}

@media all and (max-width:500px){
	.tBox .ftxt {font-size: 25px;}
}

@media all and (max-width:430px){
	.tBox .ftxt {font-size: 24px;}
	.tBox .addrBtn {position: inherit;display: block;left: inherit;top: inherit;bottom: 27px;}
	.fBox small {font-size: 13px;}
	.tBox .addrTfe p span {display: block;}
}

@media all and (max-width:390px){
	.mGnb .box .list_wrap ul > li > a {font-size: 18px;margin: 12px 0;}		
	.tBox .ftxt{display:none;}
	#footer {padding-top: 1.5em;}
}