@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*Common*/
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%}
html{overflow-y:scroll}
body{background-color:#fff;*word-break:break-all;-ms-word-break:break-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:#000;
	font-family:"Poppins", sans-serif;
	font-size:14px;font-weight:normal; word-break: keep-all;
}
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%;}

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

.font1{font-family:"Pretendard Variable";}
.font2{font-family:"Noto Sans KR";}
.font3{font-family:"Montserrat";}
.font4{font-family:"Poppins";}





/* header */
#header{position:fixed;left:0;top:0;width:100%;z-index:1000;transition:all 0.4s;}
.head{
	position:relative;
	box-sizing:border-box;
	max-width:1660px;width:100%;height:100px;
	margin:0 auto;padding:0 3%;
	text-align:center;
	transition:all 0.4s;
	z-index: 1002;
}
.head h1{position:absolute;left:0%;top:32px;z-index:1002;}
.head h1 a{
	display:block;
	width:180px;height:37px;
	background:url(/en/images/common/logo1.png) no-repeat center;
	text-indent:-9999px;
	transition:all 0.4s;	
}
.head .pcNav{}
.head .pcNav>ul{display:flex;justify-content:center;}
.head .pcNav>ul>li{margin:0 2.8vw;}
.head .pcNav>ul>li>a{
	font-size:30px;color:#fff;line-height:100px;
	text-shadow:1px 1px 5px rgba(0,0,0,0.1);
	transition:all 0.4s;
}
.head .gnb{
	position:absolute;right:0;top:35px;
	display:flex;align-items:center;
}
.head .gnb .btnHome{
	width:77px;height:30px;
	border:1px solid rgba(255,255,255,0.3);border-radius:15px;
	font-family:"Montserrat";font-size:14px;color:#fff;font-weight:500;text-align:center;line-height:28px;
	transition:all 0.4s;
}
.head .gnb .btnLang{margin:0 25px 0 20px;position: relative;}
.head .gnb .btnLang>a{
	display:block;
	width:27px;height:27px;
	background:url(/images/common/btn_lang1.png) no-repeat;
	transition:all 0.4s;	
}
.head .gnb .btnLang .lang_box .lang_list{
	display:none;
	position:absolute;left:50%;top:calc(100% + 10px);
	transform:translate(-50%);
	background:#fff;
	border-radius: 10px;
	padding: 3px 0;
	text-align:center;
	border: 1px solid #ccc;
}
.head .gnb .btnLang .lang_box .lang_list li a{font-family: "Montserrat"; display: block; font-size: 14px; font-weight: 600; padding: 7px 17px; color: #000;}
.head .gnb .btnLang .lang_box .lang_list li.on a{color: #0f427d;}
.head .gnb .btnLang .lang_box .lang_list li.on a span{border-bottom: 1px solid #0f427d;}
.head .gnb .btnLang .lang_box .lang_list li a:hover{color: #0f427d;}
.head .gnb .btnMenu{
	position:relative;z-index:1002;
	width:36px;
	cursor:pointer;
}
.head .gnb .btnMenu>div{display:flex;}
.head .gnb .btnMenu>div>span{
	display:block;
	height:2px;
	background:#fff;
	transition:all 0.4s;
}
.head .gnb .btnMenu>div:nth-child(1){justify-content:flex-end;}
.head .gnb .btnMenu>div:nth-child(1)>span{width:50%;}
.head .gnb .btnMenu>div:nth-child(2)>span{width:100%;margin:5px 0;}
.head .gnb .btnMenu>div:nth-child(3)>span{width:50%;}

.head .gnb .btnMenu.open>div:nth-child(1)>span{
	width: 100%;
	transform: translateY(8px) rotate(45deg);
	background: #000;
}
.head .gnb .btnMenu.open>div:nth-child(2)>span{
	opacity: 0;
	background: #000;
}
.head .gnb .btnMenu.open>div:nth-child(3)>span{
	width: 100%;
	transform: translateY(-5px) rotate(-45deg);
	background: #000;
}



@media(max-width:1399px){
	.head .pcNav{display:none;}
	.head h1{left:3%;top:25px;}
	.head .gnb{right:3%;}
}
@media(max-width:812px){
	.head{height: 80px;}
	.head h1 a{
		width:140px;height:29px;
		background:url(/en/images/common/logo1.png) no-repeat center / contain;
		background-size:contain
	}
	.head .gnb{top: 27px;}
	.head .gnb .btnHome{display:none;}
}




/* black Ver */
.bl #header{background: #fff; box-shadow:0 -1px 0 rgba(0,0,0,0.1) inset;}
.bl .head h1 a{background:url(/en/images/common/logo2.png) no-repeat center / contain;}
.bl .head .pcNav>ul>li>a{color:#000;}
.bl .head .gnb .btnHome{border:1px solid rgba(0, 0, 0, 0.3);color:#000;}
.bl .head .gnb .btnLang>a{background:url(/images/common/btn_lang2.png) no-repeat;}
.bl .head .gnb .btnMenu>div>span{background:#000;}
.bl #fp-nav ul li.on:after{background:rgba(0,0,0,0.4);}
.bl #fp-nav ul li a span,
.bl #fp-nav ul li:hover a span{border:1px solid #000;}
.bl #fp-nav ul li a.active span,
.bl #fp-nav ul li:hover a.active span{background:#000;}

@media(max-width:812px){
	.bl .head h1 a{
		background:url(/en/images/common/logo2.png) no-repeat center;
		background-size:contain;
	}	

}

#header.active{background: #fff;box-shadow:0 -1px 0 rgba(0,0,0,0.1) inset;}
.active .head h1 a{background:url(/en/images/common/logo2.png) no-repeat center / contain;}
.active .head .pcNav>ul>li>a{color:#000;}
.active .head .gnb .btnHome{border:1px solid rgba(0, 0, 0, 0.3);color:#000;}
.active .head .gnb .btnLang>a{background:url(/images/common/btn_lang2.png) no-repeat;}
.active .head .gnb .btnMenu>div>span{background:#000;}

.head h1 a.open{background:url(/en/images/common/logo2.png) no-repeat center / contain;}

.head.open .pcNav{display: none;}
.head.open .gnb .btnHome{display: none;}
.head.open .gnb .btnLang{display: none;}







.allmenu{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1001;
	width: 100%;
	height: 100vh;
	background: url(/images/common/allmenu_bg.jpg) no-repeat center / cover;
	transform: translateY(-100%);
	transition: all 0.8s;
}
.allmenu .inner {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 5vw;
	box-sizing: border-box;
	transition: all 0.6s;
}
.allmenu .inner .allmenuwrap{
	display: flex;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	width: calc(100% - 500px);
	padding-right: 7vw;
}
.allmenu .inner .allmenuwrap>ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
}
.allmenu .inner .allmenuwrap>ul>li{
	width: 33.3333%;
}
.allmenu .inner .allmenuwrap>ul>li:nth-child(1),
.allmenu .inner .allmenuwrap>ul>li:nth-child(2){
	margin-bottom: 70px;
}
.allmenu .inner .allmenuwrap>ul>li:nth-child(2){
	width: 53%;
}
.allmenu .inner .allmenuwrap>ul>li>a{
	font-size: 36px;
	font-weight: 700;
	color: #000;
}
.allmenu .inner .allmenuwrap>ul>li:hover>a{
	color: #0f427d;
}
.allmenu .inner .allmenuwrap>ul>li>ul{
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
}
.allmenu .inner .allmenuwrap>ul>li>ul>li{
	width: 100%;
	margin-bottom: 15px;
}
.allmenu .inner .allmenuwrap>ul>li:nth-child(2)>ul>li{
	width: 33.3333%;
}
.allmenu .inner .allmenuwrap>ul>li>ul>li>a{
	display: inline-block;
}
.allmenu .inner .allmenuwrap>ul>li>ul>li>a>span{
	font-size: 18px;
	color: #808080;
}
.allmenu .inner .allmenuwrap>ul>li>ul>li>a:hover>span{
	font-weight: 600;
	color: #0f427d;
}

.allmenu .inner .bg{
	width: 500px;
	height: 600px;
	border-radius: 20px;
	background: url(/images/common/allmenu_img.png) no-repeat center / cover;
}
.allmenu.open{
	transform: translateY(0);
}

@media (max-width: 1399px){
	.allmenu .inner .bg{display: none;}
	.allmenu .inner .allmenuwrap{width: 100%;padding-right: 0;}
}
@media (max-width: 812px){
	.allmenu .inner .allmenuwrap>ul{flex-direction: column;}
	.allmenu .inner .allmenuwrap>ul>li{width: 100% !important; margin-bottom: 0 !important; padding: 10px; border-bottom: 1px solid #ccc;}
	.allmenu .inner .allmenuwrap>ul>li>a{font-size: 24px;}
	.allmenu .inner .allmenuwrap>ul>li>ul{margin-top: 20px; display: none;}
	.allmenu .inner .allmenuwrap>ul>li>ul>li:last-child{margin-bottom: 0;}
	.allmenu .inner .allmenuwrap>ul>li:nth-child(2)>ul>li{display: inline-block; width: 32%;}
	.allmenu .inner .allmenuwrap>ul>li>ul>li>a>span{font-size: 15px;}

}


/* subMenu */
.subMenu{
	display:none;
	position:absolute;left:0;top:100%;z-index:100;
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
	height:300px;
	transform-origin:top;
	background:#fff;
	/* box-shadow:0 1px 0 rgba(0,0,0,0.1) inset; */
}
.subMenu .menuwrap{
	display:none;
	box-sizing:border-box;
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	padding:40px 100px 80px;
}
.subMenu .menuwrap>div{
	display:flex;
}
.subMenu .menuwrap>div .depthInfo{
	overflow:hidden;
	display: flex;
	align-items: center;
}
.subMenu .menuwrap>div .depthInfo .img img{border-radius: 10px;}
.subMenu .menuwrap>div .depthInfo .txts{
	padding: 0 45px;
	width: 345px;
	box-sizing: border-box;
}
.subMenu .menuwrap>div .depthInfo .txts h2{
	font-size: 32px;
	font-weight: 700;
	color: #000;
}
.subMenu .menuwrap>div .depthInfo .txts p{
	margin-top: 15px;
	font-size: 18px;
	line-height: 1.5em;
	color: #666;
}

.subMenu .menuwrap>div ul{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 700px;
	box-sizing: border-box;
	padding-left: 70px;
	border-left: 1px solid #ccc;
}
.subMenu .menuwrap:nth-child(2)>div ul{
	flex-direction: row;
	justify-content: space-between;
}
.subMenu .menuwrap>div li{
	width: 25%;
	margin-bottom: 20px;
}
.subMenu .menuwrap>div li a{
	display: inline-block;
}
.subMenu .menuwrap>div li a span{
	font-size: 16px;
	color: #414141;
}
.subMenu .menuwrap>div li a:hover span{
	font-weight: 500;
	color: #0f427d;
}




/* foot */
.foot{padding: 60px 0;}
.foot .innerwrap{
	display: flex;
}
.foot .innerwrap .logo{
	position: relative;
	width: 200px;
}
.foot .innerwrap .logo img{
	width: 152px;
}
.foot .innerwrap .logo:after{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: #ccc;
}
.foot .innerwrap .infowrap{
	width: calc(100% - 200px - 360px);
	padding: 0 45px;
	box-sizing: border-box;
}
.foot .innerwrap .infowrap .top{
	display: flex;
	margin-bottom: 35px;
}
.foot .innerwrap .infowrap .top dl{display: flex;}
.foot .innerwrap .infowrap .top dl:first-child{
	margin-right: 36px;
}
.foot .innerwrap .infowrap .top dl dt{
	margin-right: 15px;
	font-size: 16px;
	color: #222;
}
.foot .innerwrap .infowrap .top dl dd{
	font-size: 16px;
	font-weight: 300;
	color: #666;
}
.foot .innerwrap .infowrap .place{
	display: flex;
}
.foot .innerwrap .infowrap .place > div:first-child{margin-right: 80px;}
.foot .innerwrap .infowrap .place > div .name{
	font-size: 16px;
	color: #222;
	margin-bottom: 20px;
}
.foot .innerwrap .infowrap .place > div dl{
	display: flex;
}
.foot .innerwrap .infowrap .place > div dl dt{
	width: 85px;
	font-size: 16px;
	line-height: 1.7em;
	color: #222;
}
.foot .innerwrap .infowrap .place > div dl dd{
	width: calc(100% - 85px);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7em;
	color: #222;
}

.foot .innerwrap .etc{
	width: 360px;
	text-align: right;
}
.foot .innerwrap .etc ul li{
	position: relative;
	display: inline-block;
	font-size: 16px;
}
.foot .innerwrap .etc ul li:last-child{
	padding-left: 31px;
}
.foot .innerwrap .etc ul li:last-child:after{
	content: "";
	position: absolute;
	left: 16px;
	top: 4px;
	width: 1px;
	height: 13px;
	background: #cccbc9;
}
.foot .innerwrap .etc ul li a{color: #222;}
.foot .innerwrap .etc .copy{
	font-family: "Poppins";
	margin-top: 100px;
	font-size: 16px;
	color: #999;
	
}

@media(max-width:1399px){
	.foot .innerwrap{flex-direction: column;}
	.foot .innerwrap .logo{width: 100%;}
	.foot .innerwrap .logo:after{display: none;}
	.foot .innerwrap .infowrap{width: 100%; padding: 0; margin: 30px 0;}
	.foot .innerwrap .etc{width: 100%;text-align: left;}
	.foot .innerwrap .etc .copy{margin-top: 20px;}

}
@media(max-width:812px){
	.foot .innerwrap .logo img{width: 140px;}
	.foot .innerwrap .infowrap .top{flex-direction: column;}
	.foot .innerwrap .infowrap .top dl:first-child {margin-right: 20px;}
	.foot .innerwrap .infowrap .top dl dt{font-size: 14px;}
	.foot .innerwrap .infowrap .top dl dd{font-size: 14px;}
	.foot .innerwrap .infowrap .place{flex-direction: column;}
	.foot .innerwrap .infowrap .place > div:first-child{margin-right: 0; margin-bottom: 20px;}
	.foot .innerwrap .infowrap .place > div .name{font-size: 14px;}
	.foot .innerwrap .infowrap .place > div dl dt{font-size: 14px;}
	.foot .innerwrap .infowrap .place > div dl dd{font-size: 14px;}
	.foot .innerwrap .etc .copy{font-size: 14px;}
}

/*ALLMENAU ANI*/
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeRight{
0%{transform:translate3d(60px, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeDown{
0%{transform:translate3d(0%, -60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
.allmenu .inner .allmenuwrap>ul>li>a{
opacity:0;display: inline-block;
}
.allmenu .inner .allmenuwrap>ul>li>ul{opacity:0;}
.allmenu .inner .bg{opacity:0;}
.allmenu.open .inner .allmenuwrap>ul>li>a{
animation-name: fadeUp;animation-duration: 1s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.1s;
}
.allmenu.open .inner .allmenuwrap>ul>li>ul{
animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.3s;
}
.allmenu.open .inner .bg{
animation-name: fadeRight;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;;
animation-delay:0.4s;
}