@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap');

/*Common*/
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%}
html{overflow-y:scroll; font-size:62.5%;}
body{background-color:#fff;word-break:keep-all;
-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;-ms-text-size-adjust: 100% !important;}
body,h1,h2,h3,h4,h5,h6,th,td,li,dt,dd,a,p,input,textarea,select,option,button{
	color:#555;
	font-family:"Manrope","pretendard","돋움",dotum,sans-serif;
	font-size:14px;font-weight:normal
}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{color:#7d7d7d;text-decoration:none;cursor:pointer}
a:hover{color:#333;text-decoration:none}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
textarea{overflow:auto}
option{padding-right:6px}
.input_text, textarea{*margin:-1px 0;padding-right:1px}
.input_check, .input_radio{width:13px;height:13px}
.blind, legend, caption{text-indent:-9999px;font-size:0;line-height:0;overflow:hidden}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}
img{max-width:100%;}

/* 색상변수 */
:root {
--main-color: #121c65
}

/*test*/
.test1{border:1px solid red}
.test2{background:#4f7beb}

.font1{font-family:"pretendard";}
.font2{font-family:"Montserrat";}




/*로딩 이미지*/
#loading_img{text-align:center;display:none;width:100%;margin:10px 0px 10px 0px;}

/* popup */
.pop_today_close{padding:1px 7px 3px 7px;color:#ffffff;background:#303030;vertical-align:middle;border:0px;}
.pop_close{padding:1px 7px 3px 7px;color:#ffffff;background:#303030;vertical-align:middle;border:0px;}

@media(max-width:767px){
	/* 메인 레이어 팝업 */
	.main_layer_popup{width:96%!important;left:50%!important;top:50px!important;transform:translateX(-50%)}
	.main_layer_popup .popupContent{height:100%!important}
	.main_layer_popup img{width:100%}
}




/* common */
#wrap{overflow:hidden;}
.innerwrap{max-width:1490px;width:90%;margin:0 auto;}




/* header */
#header{
	position:fixed;left:0;top:0;z-index:1000;
	width:100%;
	background:transparent;
	box-shadow:0 -1px 0 #d9d9d9 inset;
}

#header.scroll {
background: #fff;
}

.head{
	position:relative;
	display:flex;align-items:center;justify-content:space-between;
	max-width:1490px;width:90%;height:72px;
	margin:0 auto;
}
.head h1{width:117px;height:30px;}
.head h1 a{
	display:block;
	width:100%;height:100%;
	background:url(/images/common/logo1.png) no-repeat center;
	text-indent:-9999px;
}
.head .gnb{display:flex;align-items:center;}
.head .gnb .language{}
.head .gnb .language>a{
	display:block;
	width:21px;height:21px;
	background:url(/images/common/btnLanguage1.png) no-repeat;
}
.head .gnb .btnMenu{
	display:flex;flex-wrap:wrap;align-content:space-between;
	width:39px;height:10px;
	margin-left:1.5vw;
	cursor:pointer;
}
.head .gnb .btnMenu>div{
	width:100%;height:2px;
	background:#27272c;
}

.head .pcNav{
	position:absolute;left:50%;top:0;
	transform:translateX(-50%);
}
.head .pcNav>ul{display:flex;align-items:center;}
.head .pcNav>ul>li{margin:0 1.8vw;}
.head .pcNav>ul>li>a{
	display:flex;align-items:center;justify-content:center;
	height:71px;
	font-size:17px;color:#000;font-weight:500;
}

/* sub nav */
.sub_nav{
display:none;
box-sizing:border-box;
position:absolute;left:0;top:72px;
width:100%;
padding:23px 20px;
background:#f2f2f2;
}

.sub_nav .menuwrap{display:none;}
.sub_nav .menuwrap>div{display:flex;align-items:center;width:auto;justify-content: center;}
.sub_nav .menuwrap>div ul{
	display:flex;flex-wrap:nowrap;
	align-items:center;
	box-sizing:border-box;
	position: relative;
}

.sub_nav .menuwrap>div ul li{
width:auto;
padding:0 1.4vw;
}
.sub_nav .menuwrap>div ul li a{
text-align: center;
position:relative;
display:block;
width:100%;
padding:0px 0;	
white-space:nowrap;
font-size:18px;
color:#949494;
font-weight:500;
}
.sub_nav .menuwrap>div ul li:hover a{
	text-decoration: underline;
	color: #111111;
}

#allmenu{
position:absolute;left:0;top:-100vh;z-index:2000;
box-sizing:border-box;
width:100%;height:100vh;
text-align:center;
transition: all 0.4s;
}

#allmenu.open{
top:0;
}

#allmenu .inner {
width: 100%;
height: 100%;
backdrop-filter: blur(8px);
}

#allmenu .allBtnMenu {
position: absolute;
top: 25px;
right: 35px;
z-index: 999;
cursor: pointer;
}

#allmenu .allBtnMenu div:first-child{
width: 24px;
height: 1px;
background-color: #000;
transform: rotate(45deg);
}

#allmenu .allBtnMenu div:last-child{
width: 24px;
height: 1px;
background-color: #000;
transform: rotate(-45deg);
}

#allmenu .gnb {
width: 100%;
height: 100%;
}

#allmenu .gnb > ul {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}

#allmenu .gnb ul .depth1 {
width: 20%;
padding-top: 350px;
position: relative;	
transition: all 0.4s;
}

#allmenu .gnb ul .depth1 > a {
font-size: clamp(25px,3vw,48px);
color: #111;
transform: translateY(40px);
opacity: 0;
} 

#allmenu .gnb ul .depth1::after {
content: '';
position: absolute;
width: 1px;
height: 1px;
background-color: #B3B3B3;
top: 0;
right: 0;
}

#allmenu .gnb ul .depth2 {
margin-top: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
gap: 40px;
}

#allmenu .gnb ul .depth2 li {
opacity: 0;
transform: translateY(40px);
}

#allmenu .gnb ul .depth2  a {
font-size: clamp(18px,2vw,24px);
color: #111;
transition: all 0.4s;
}

#allmenu .gnb ul .depth2  a:hover {
color: var(--main-color);
text-decoration: underline;
}

/*motion*/

#allmenu.open .gnb ul li{transition:all 1s 0.7s;transform:translateY(0);opacity:1;}
#allmenu.open .gnb ul .depth1 a{opacity:1;transform:translateY(0);transition:all 1s 0.7s;}
#allmenu.open .gnb ul .depth1::after{height:100vh;transition:height 1s 0.7s ease;}

#allmenu.open .gnb ul .depth2 li::nth-child(1){transition:all 1s 0.8s; opacity:1;transform:translateY(0);}
#allmenu.open .gnb ul .depth2 li::nth-child(2){transition:all 1s 0.9s; opacity:1;transform:translateY(0);}
#allmenu.open .gnb ul .depth2 li::nth-child(3){transition:all 1s 1.0s;opacity:1;transform:translateY(0);}
#allmenu.open .gnb ul .depth2 li::nth-child(4){transition:all 1s 1.1s;opacity:1;transform:translateY(0);}
#allmenu.open .gnb ul .depth2 li::nth-child(5){transition:all 1s 1.2s;opacity:1;transform:translateY(0);}


/* footer */
#footer{
	padding:55px 0;
	border-top:1px solid #ccc;
}
.foot{}
.foot .toparea{
	display:flex;
	padding:0 0 55px;
	border-bottom:1px solid #ccc;
}
.foot .toparea h1{width:25%;}
.foot .toparea .company{display:flex;width:75%;}
.foot .toparea .company dl{margin-right:6vw;}
.foot .toparea .company dl:last-child{margin-right:0;}
.foot .toparea .company dl dt{font-size:16px;color:#000;font-weight:500;}
.foot .toparea .company dl dd{margin-top:5px;font-size:16px;color:#000;font-weight:500;}
.foot .copy{padding-top:25px;font-size:16px;color:#000;font-weight:500;}





/* btnMore */
.btnMore{font-size:14px;color:#222;font-weight:500;}
.btnMore span{display:inline-flex;align-items:center;}
.btnMore span .arr{
	position: relative;
	width:27px;height:27px;
	margin-left:10px;
	background:#121212;
	border-radius:50%;
}
.btnMore span .arr i{
	position:relative;z-index:10;
	width:100%;height:100%;
	background: url(/images/common/btnMore_arr.png) no-repeat center;
	transition:all 0.4s;	
	border-radius:50%;
}
.btnMore span .arr i:nth-child(2) {
	content: '';
	position: absolute;left:0%;top:0;
	width:100%;height:100%;
	background: url(/images/common/btnMore_arr2.png) no-repeat center;
	opacity:0;
	transition: all 0.4s;
}
.btnMore:hover{}
.btnMore:hover span .arr i{transform:translateX(55%);}
.btnMore:hover span .arr i:nth-child(2){opacity:0.5;}



@media (max-width: 1399px) {
#header.scroll {
background: transparent;
}
    .head .pcNav {
        display: none;
    }
}

@media(max-width:812px){
.foot .toparea {
    flex-direction: column;
}

.foot .toparea h1 {
width:100%;
}

.foot .toparea .company {
margin-top: 40px;
width:100%;
gap: 20px;
row-gap: 40px;
flex-wrap: wrap;
}

.foot .toparea .company dl {
margin-right: 0;
}

.foot .toparea .company dl:first-child {
width: 100%;
}

.foot .toparea .company dl:not(:first-child) {
width: calc((100% - 20px)/2);
}

.foot .copy,
.foot .toparea .company dl dt,
.foot .toparea .company dl dd {
font-size:14px;
}
}

@media(max-width:450px){
.foot .toparea .company {
flex-direction: column;
}

.foot .toparea .company dl:not(:first-child) {
width: 100%;
}

}