* {
	-webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라(신) */
	-ms-text-size-adjust : none;  /* IE */
	-moz-text-size-adjust : none;  /* 파이어폭스 */
	-o-text-size-adjust : none;  /* 오페라(구)*/
}
html { /* cursor: url('../image/cursor_hover.svg'), auto; */ }
body { transition: 0.5s; }
a { /* cursor: url("../image/cursor_hover.svg"), auto; */ }

*::-moz-selection{color:#fff;background-color:#102a8d}
*::selection{color:#fff;background-color:#102a8d}
*::-webkit-selection{color:#fff;background-color:#102a8d}

::-webkit-scrollbar { width:5px; height: 5px; }
/* ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:block; height:5px; background:#ddd} */
::-webkit-scrollbar-track {
	background:#eee;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
}
::-webkit-scrollbar-thumb {
	height:50px;
	width:50px;
	background:#102a8d;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}

::-webkit-scrollbar-thumb:window-inactive {
	background:#102a8d;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}


@keyframes ani { 0%{transform:translate(0,0px);} 100%{transform:translate(0,20px);} }

@keyframes cursor_scale {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	50% {
		opacity: 1;
		transform: scale(0.5, 0.5);
	}
	100% {
		opacity: 0;
		transform: scale(1, 1);
	}
}

.cursor {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: transparent;
	width: 70px;
	height: 70px;
	margin:-29px 0 0 -29px;
	border: 3px solid #ddd;
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 10px 0.5px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 10px 0.5px rgba(0, 0, 0, 0.2);
	z-index: 10000;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	animation:cursor_scale 1s 1s infinite linear;
}

.cursor.hover {
	border: 3px solid #102a8d;
	opacity: 0.6;
}

.button {
	--background: transparent;
	--text: #102a8d;
	--font-size: 18px;
	--duration: .44s;
	--move-hover: -4px;
	--shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.2);
	--shadow-hover: 0 4px 20px -2px rgba(0, 0, 0, 0.2);
	--font-shadow: var(--font-size);
	font-weight: 500;
	line-height: var(--font-size);
	border-radius: 0px;
	display: block;
	outline: none;
	text-decoration: none;
	font-size: var(--font-size);
	letter-spacing: .5px;
	background: var(--background);
	color: var(--text);
	box-shadow: var(--shadow);
	-webkit-transform: translateY(var(--y));
	transform: translateY(var(--y));
	transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease;
	transition: transform var(--duration) ease, box-shadow var(--duration) ease;
	transition: transform var(--duration) ease, box-shadow var(--duration) ease, -webkit-transform var(--duration) ease;
}

.button span {
	display: flex;
	overflow: hidden;
	text-shadow: 0 var(--font-shadow) 0 var(--text);
}

.button span i {
	display: block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	font-style: normal;
	transition: -webkit-transform var(--duration) ease;
	transition: transform var(--duration) ease;
	transition: transform var(--duration) ease, -webkit-transform var(--duration) ease;
	-webkit-transform: translateY(var(--m));
	transform: translateY(var(--m));
}
.button span i:nth-child(1) { transition-delay: 0.05s; }
.button span i:nth-child(2) { transition-delay: 0.1s; }
.button span i:nth-child(3) { transition-delay: 0.15s; }
.button span i:nth-child(4) { transition-delay: 0.2s; }
.button span i:nth-child(5) { transition-delay: 0.25s; }
.button span i:nth-child(6) { transition-delay: 0.3s; }
.button span i:nth-child(7) { transition-delay: 0.35s; }
.button span i:nth-child(8) { transition-delay: 0.4s; }
.button span i:nth-child(9) { transition-delay: 0.45s; }
.button span i:nth-child(10) { transition-delay: 0.5s; }
.button span i:nth-child(11) { transition-delay: 0.55s; }

.button:hover {
	--y: var(--move-hover);
	--shadow: var(--shadow-hover);
}
.button:hover i {
	--m: calc(var(--font-size) * -1);
}
.button.reverse {
	--font-shadow: calc(var(--font-size) * -1);
}
.button.reverse:hover i {
	--m: calc(var(--font-size));
}

/* main */
.main_vis {
	overflow: hidden;
	display: flex;
	align-content: center;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100vh;
    /* background: linear-gradient(-45deg, #102a8d, #8f00d8);
	background-size: 400% 400%; */

	background: url('../img/main/slide-img-2.jpg') center top no-repeat;
	background-size: cover;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

.main_vis2 {
	background: url('../img/main/slide-img-3.png') center top no-repeat;
	background-size: cover;
}
.main_vis2 .typing ul li { color:#3a474e; }
.main_vis2 .typing ul li:nth-child(1) {font-family:'PuradakGentleGothicR';}
.main_vis2 .typing ul li:nth-child(2),.main_vis2 .typing ul li:nth-child(3) {font-family:'NotoSerifKR';}

.main_vis3 {
	background: url('../img/main/slide-img-1.jpg') center top no-repeat;
	background-size: cover;
}
.main_vis3 .typing ul li { color:#333; }
.main_vis3 .typing ul li:nth-child(1) {font-family:'NanumSquareNeoExtraBold';}
.main_vis3 .typing ul li:nth-child(2),.main_vis3 .typing ul li:nth-child(3) {font-family:'NanumSquareNeoLight'}

.main_vis4 {
	background: url('../img/main/slide-img-4.jpg') center top no-repeat;
	background-size: cover;
}
.main_vis4 .typing ul li { color:#000; }
.main_vis4 .typing ul li:nth-child(1) {font-family:'Jeju Hallasan';}
.main_vis4 .typing ul li:nth-child(2),.main_vis4 .typing ul li:nth-child(3) {font-family:'Jeju Hallasan'}

.main_vis5 {
	background: url('../img/main/slide-img-A.jpg') center top no-repeat;
	background-size: cover;
}
.main_vis5 .typing ul li { color:#333; }
.main_vis5 .typing ul li:nth-child(1) {font-family:'Jeju Hallasan';}
.main_vis5 .typing ul li:nth-child(2),.main_vis5 .typing ul li:nth-child(3) {font-family:'Jeju Hallasan'}

.main_vis6 {
	background: url('../img/main/slide-img-B.jpg') center top no-repeat;
	background-size: cover;
}
@media(max-width:768px) {
	.main_vis6 {
	background: url('../img/main/slide-img-BA.jpg') center top no-repeat;
	}
	.main_vis {
        height: 100vh !important;
    }
}
.main_vis6 .typing ul li { color:#333; }
.main_vis6 .typing ul li:nth-child(1) {font-family:'PuradakGentleGothicR';}
.main_vis6 .typing ul li:nth-child(2),
.main_vis6 .typing ul li:nth-child(3) {font-family:'S-CoreDream';  }

.main_vis7 {
	background: url('../img/main/slide-img-7.png') center top no-repeat;
	background-size: cover;
}
.main_vis7 .typing ul li { color:#000; }
.main_vis7 .typing ul li:nth-child(1) {font-family:'NotoSerifKR';}
.main_vis7 .typing ul li:nth-child(2),.main_vis7 .typing ul li:nth-child(3) {font-family:'NotoSerifKR';  }

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.main_text {
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
	justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0 5%;
    padding-bottom: 100px;
    padding-left: 150px;
}

.main_text h2 {
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 5em;
    font-weight: 900;
}

.typing-txt{
	display: none;
}

.typing ul li {
	text-align: center;
    color: #fff;
    font-size: 1.8em;
    font-weight: 100;
    letter-spacing: -0.5px;
    line-height: 1.3;
	padding-right: 10px;
}

.typing ul li:first-child {
	margin-bottom: 0px;
	font-size: 8em;
	font-weight: 300;
	letter-spacing:15px;
	color:#102a8d;
}

.typing ul li:nth-child(2) {
	margin-top: 40px;
	margin-bottom:10px;
	font-size: 1.8em;
	letter-spacing:-1px;
}

.typing ul li:nth-child(3) {
	color:#666;
}

.typing ul li.on {  
	display: inline-block; 
	animation-name: cursor; 
	animation-duration: 0.3s; 
	animation-iteration-count: infinite; 
}

@keyframes cursor{
	0%{ border-right: 1px solid #fff } 
	50%{ border-right: 1px solid rgba(255, 255, 255, 0) } 
	100%{ border-right: 1px solid #fff } 
}

.typing-effect { width: 100%; }
.typing-effect p { position:relative; margin: 10px 0; }
.typing-effect p span {
	display:inline-block;
	padding-right:15px;
	height:95px;
	line-height:95px;
	vertical-align:top;
	font-weight:700;
	font-size:85px;
	color:#fff;
	letter-spacing:-1px;
	white-space:nowrap;
}
.typing-effect p i { width: 1px; height: 85px; vertical-align: top; background: #fff; margin-top: 5px; display: none; animation: cursorAni linear 0.4s infinite alternate; }
.typing-effect p.on i {display:inline-block;}
.typing-effect .holding {display:block;height:0;overflow:hidden;}

@keyframes cursorAni {
	0% {background:#fff;}
	100% {background:transparent;}
}

/* ----- scroll down ----- */
.scroll-down {
	position: fixed;
	bottom:15%;
	left:2%;
	width:45px;
	height:120px;
	z-index: 9;
	opacity: 1;
	transition: 0.5s;
}

.scroll-down.scrolled { opacity: 0; }

.scroll-down i {
	position:absolute; 
	left:50%;
	bottom:0;
	overflow:hidden;
	width:2px;
	height:100px;
	border-radius:0;
	border:none;
	background-color: rgba(255,255,255,0.3);
	-webkit-transition:height 0.1s;
	-moz-transition:height 0.1s;
	-ms-transition:height 0.1s;
	-o-transition:height 0.1s;
	transition:height 0.1s;
}

.scroll-down p {
	position:absolute;
	left:50%;
	top:0;
	margin-left: -10px;
	margin-top: 0px;
	width:100px;
	font-size:13px;
	color:#fff;
	letter-spacing:1px;
	font-weight:300; 
	-webkit-transform:rotate(-90deg); 
	-moz-transform:rotate(-90deg); 
	-ms-transform:rotate(-90deg); 
	-o-transform:rotate(-90deg); 
	transform:rotate(-90deg); 
	-webkit-transform-origin:0% 0%;
	-moz-transform-origin:0% 0%;
	-ms-transform-origin:0% 0%;
	-o-transform-origin:0% 0%;
	transform-origin:0% 0%;
	-webkit-transition:margin 0.3s;
	-moz-transition:margin 0.3s;
	-ms-transition:margin 0.3s;
	-o-transition:margin 0.3s;
	transition:margin 0.3s;	
}

.scroll-down i:after{
	position: absolute;
	top: 50%;
	left: 0%;
	display: block;
	content: "";
	width: 100%;
	height: 10px;
	border-radius:0;
	background: #fff; 
	-webkit-animation: scrollDown 2s infinite;
	-moz-animation: scrollDown 2s infinite;
	-ms-animation: scrollDown 2s infinite;
	-o-animation: scrollDown 2s infinite;
	animation: scrollDown 2s infinite;
}

.hide {
    position: absolute;
    left: -9999%;
    font-size: 0;
    line-height: 0;
    text-indent: -9999%;
}

.wave {
	animation: moveTheWave 2400ms linear infinite;
	stroke-dasharray: 0 16 101 16;
}

@keyframes moveTheWave {

	0% {
		stroke-dashoffset: 0;
		transform: translate3d(0, 0, 0);
	}

	100% {
		stroke-dashoffset: -133;
		transform: translate3d(-90px, 0, 0);
	}

}

.waves_box {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
}

.flex { /*Flexbox for containers*/
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.waves {
	position:relative;
	width: 100%;
	height:15vh;
	margin-bottom:-7px; /*Fix for safari gap*/
	min-height:100px;
	max-height:150px;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% { 
		transform: translate3d(85px,0,0);
	}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }

}

/* ADD */
@media screen and (max-width: 1600px) {
	
	.wrap { max-width: 96%; }

	/* main */
	.main_text { padding-left: 5%; }

	.typing-effect p { position: relative; margin: 0px 0; }
	.typing-effect p span { height: 6vw; line-height: 6vw; font-size: 5vw }
	.typing-effect p i { height: 6vw; }
	
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1280px) {
	.scroll-down { width: 25px; }
}

@media screen and (max-width: 1100px) {
}

@media screen and (max-width: 1024px) {
	
	.button { --font-size: 15px; }
	.cursor { display:none; }

	/* main */
	
	.main_vis {
		animation: none;
		background-size: cover;
	}

	.typing ul li { font-size: 2em; }
	.typing ul li:first-child { font-size: 5em; }

}

@media screen and (max-width: 975px) {
	.only-m-block {display:block;}
}

@media screen and (max-width: 875px) {
}

@media screen and (max-width: 768px) {
		
	.scroll-down { display: none; }
	.scroll-down p { font-size: 12px; }	

	/* main */
	.main_text { padding-bottom: 0; }
	.waves_box { display: none; }

	.main_vis {
		height: 100vh;
	}

}

@media screen and (max-width: 640px) {
	
	body { font-size: 13px; }

	.button { --font-size: 14px; }
	
}

@media screen and (max-width: 575px) {
}

@media screen and (max-width: 480px) {
	
}

@media screen and (max-width: 425px) {

}

@media screen and (max-width: 400px) {

}

@media screen and (max-width: 375px) {

}

@media screen and (max-width: 340px) {

}

.main_scroll {display:block;}
.main_scroll .m_mouse {
	position:absolute; bottom:70px; left:50%; width:20px; height:30px; margin-left:-10px;
	border:2px solid #333; border-radius:100px; box-sizing:border-box; z-index:10;
}
.main_scroll .m_mouse:before {position:absolute; top:7px; left:50%; content:""; width:2px; height:7px; margin-left:-1px; background:#333; animation:scrollAni1 2s infinite;}
.main_scroll .m_down {
	position:absolute; bottom:-10px; left:50%; content:""; transform:translateX(-50%); font-size:14px;
	letter-spacing:0; color:#333; animation:down 2s infinite; z-index:10;
}
.main_scroll .m_down:before {
	position:absolute; content:""; bottom:70px; left:50%; width:8px; height:8px; margin-left:-5px; 
	border-bottom:2px solid #333; border-right:2px solid #333; animation:scrollArrow1 2s infinite;
}

@keyframes scrollAni1 {
	0% {transform:translate(0, 0);}
	80% {transform:translate(0, 5px);}
}
@keyframes scrollArrow1 {
	0% {
		transform:rotate(45deg) translate(0, 0); 
		opacity:0; 
	}
	50% {opacity:1}
	100% {
		transform:rotate(45deg) translate(10px, 10px); 
		opacity:0; 
	}
}

@media(min-width:1200px) {
	.main_scroll .m_mouse {width:26px; height:40px; margin-left:-13px;}
	.main_scroll .m_mouse:before {height:10px;}

	@keyframes scrollAni1 {
		0% {transform:translate(0, 0);}
		80% {transform:translate(0, 10px);}
	}
}