@charset "utf-8";
@import "reset.min.css";
@import "style.min.css";

body,html {width:100%; height:100%; margin:0px; padding:0px; font-size:14px; font-family: 'Noto Sans KR', sans-serif; color:#222; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; word-break:keep-all;}

@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#wrap{width:100%; min-width:340px; height:100vh; height:calc((var(--vh, 1vh) * 100));}

.introHead{display:flex; justify-content:center; align-items:center; width:100%; height:90px; background:#fff; position:fixed; top:0; left:0; z-index:5;}
.introHead img{display:inline-block;}

.introBox{display:flex; justify-content:center; width:100%; height:100%; overflow:hidden;}
.introBox .boxItem{display:inline-flex; justify-content:center; align-items:center; width:50%; height:100%; overflow:hidden; position:relative; padding-top:90px;}
.introBox .boxItem .bg{width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; transition:all 0.45s linear;}
.introBox .boxItem:hover .bg{transform:translate(-50%,-50%) scale(1.15);}
.introBox .boxItem.left .bg{background:url("/html/resource/img/intro/left_bg.jpg");}
.introBox .boxItem.right .bg{background:url("/html/resource/img/intro/right_bg.jpg");}
.introBox .boxItem .textBox{width:calc(100% - 50px); max-width:530px; height:275px; border:3px solid rgba(255,255,255,.5); box-shadow:0 0 6px rgba(10,9,9,.58); text-align:center; position:relative; z-index:2;}
.introBox .boxItem .textBox a{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:100%; height:100%; color:#fff;}
.introBox .boxItem .textBox .engText{display:block; width:100%; height:auto; font-family: 'GmarketSans'; font-size:13px; font-weight:500; letter-spacing:0.23em; line-height:1;}
.introBox .boxItem .textBox p{width:100%; height:auto; font-family: 'ONE-Mobile-Title'; font-size:40px; font-weight:400; letter-spacing:0.03em; line-height:1; margin-top:25px; margin-bottom:5px; text-shadow:0 0 8px rgba(10,9,9,.6);}
.introBox .boxItem .textBox .logo{display:flex; justify-content:center; align-items:center; width:100%; height:auto; margin-bottom:10px;}
.introBox .boxItem .textBox .logo img{display:inline-block;}
.introBox .boxItem .textBox .circle{width:45px; height:45px; border-radius:50%; border:1px solid #fff; box-shadow:0 0 6px rgba(10,9,9,.58); background:url("/html/resource/img/intro/arrow.png") no-repeat center center/18px auto;}

@media (max-width:1000px) {
	.introHead{display:none;}

	.introBox{flex-wrap:wrap;}
	.introBox .boxItem{width:100%; height:50%; padding-top:0;}
	.introBox .boxItem .bg{width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; transition:all 0.3s linear;}
	.introBox .boxItem:hover .bg{transform:translate(-50%,-50%) scale(1.2);}
	.introBox .boxItem .textBox{width:calc(100% - 50px); max-width:530px; height:275px; border-width:3px; box-shadow:0 0 6px rgba(10,9,9,.58);}
	.introBox .boxItem .textBox .engText{font-size:13px;}
	.introBox .boxItem .textBox p{font-size:40px; margin-top:25px; margin-bottom:5px; text-shadow:0 0 8px rgba(10,9,9,.6);}
	.introBox .boxItem .textBox .logo{margin-bottom:10px;}
	.introBox .boxItem .textBox .logo img{display:inline-block;}
	.introBox .boxItem .textBox .circle{width:45px; height:45px; box-shadow:0 0 6px rgba(10,9,9,.58); background:url("/html/resource/img/intro/arrow.png") no-repeat center center/18px auto;}
}

@media (max-width:480px) {
	.introBox .boxItem .bg{top:50%; left:50%; transform:translate(-50%, -50%); z-index:1; transition:unset;}
	.introBox .boxItem:hover .bg{transform:translate(-50%,-50%);}
	.introBox .boxItem .textBox{width:calc(100% - 30px); max-width:530px; height:auto; border-width:2px; box-shadow:0 0 5px rgba(10,9,9,.58); padding:25px 0;}
	.introBox .boxItem .textBox .engText{font-size:12px;}
	.introBox .boxItem .textBox p{font-size:36px; margin-top:20px; margin-bottom:5px; text-shadow:0 0 6px rgba(10,9,9,.6);}
	.introBox .boxItem .textBox .logo{margin-bottom:10px;}
	.introBox .boxItem .textBox .logo img{display:inline-block;}
	.introBox .boxItem .textBox .circle{width:45px; height:45px; box-shadow:0 0 4px rgba(10,9,9,.58); background:url("/html/resource/img/intro/arrow.png") no-repeat center center/18px auto;}
}

@media (max-width:380px) {
	.introBox .boxItem .textBox{width:calc(100% - 7.89474vw); height:auto; border-width:0.52632vw; box-shadow:0 0 1.31579vw rgba(10,9,9,.58); padding:6.57895vw 0;}
	.introBox .boxItem .textBox .engText{font-size:3.15789vw;}
	.introBox .boxItem .textBox p{font-size:9.47368vw; margin-top:5.26316vw; margin-bottom:1.31579vw; text-shadow:0 0 1.57895vw rgba(10,9,9,.6);}
	.introBox .boxItem .textBox .logo{margin-bottom:2.63158vw;}
	.introBox .boxItem .textBox.left .logo img{width:60.26316vw; height:auto;}
	.introBox .boxItem .textBox.right .logo img{width:64.47368vw; height:auto;}
	.introBox .boxItem .textBox .circle{width:11.84211vw; height:11.84211vw; box-shadow:0 0 1.05263vw rgba(10,9,9,.58); background:url("/html/resource/img/intro/arrow.png") no-repeat center center/4.73684vw auto;}
}