@charset "UTF-8";
/*-------------------------------------------------
title       :메인
Create date :2022-09-19
-------------------------------------------------*/

#header {display:none}
body {background:url('/intro/img/bg.gif') no-repeat; background-attachment: fixed;}
#main_wrap {padding:8rem 0}

.logo {text-align:center; margin-bottom:13rem}
.logo img {width:26rem}
.logo .slogun {color:#024074; display:block; font-weight:normal; margin-top:3rem; line-height:1.2}

.intro-box {display:flex; justify-content:space-between; max-width:94rem; margin:0 auto; width:calc(100% - 2rem)}
.intro-box .item a {border-radius:5rem 0 5rem 0; box-shadow:0 10px 15px rgba(0,0,0,0.2); color:#fff; display:block; min-width:37rem; height:37rem; padding:16rem 3rem 3rem; text-align:center; position:relative; transition:all .3s}
.intro-box .item .img {position:absolute; top:-8rem; left:50%; transform:translateX(-50%); width:25rem; transition:all .3s}
.intro-box .item .tt {font-size:1.9rem; font-weight:100; line-height:1.6}
.intro-box .item .tt strong{display:block; font-size:3.2rem; font-weight:normal}
.intro-box .item .tt em {font-weight:bold}
.intro-box .item .more {background-color:#fff; border-radius:3rem 0 3rem 0; color:#000; display:block; font-size:1.8rem; width:18.5rem; text-align:center; padding:1rem 0; position:absolute; right:0; bottom:0; transition:all .3s}
.intro-box .item .more i {border-radius:100%; display:inline-block; width:3rem; height:3rem; margin-left:1rem; vertical-align:middle; transition:all .3s}
.intro-box .item .more i:before {color:#fff; line-height:1.6; transition:all .3s}

.intro-box .item.kor a {background-color:#005eae}
.intro-box .item.kor .more i {background-color:#005eae}
.intro-box .item.reserve a {background-color:#1fa7e1}
.intro-box .item.reserve .more i {background-color:#1fa7e1}

@media screen and (min-width:1025px){
	
	.intro-box .item a:hover .img {animation:img 1s infinite;}
	
	.intro-box .item a:hover {background-color:#fff; color:#444}
	.intro-box .item a:hover .more i {background-color:#fff}
	
	.intro-box .item.kor a:hover .more {background-color:#005eae; color:#fff}
	.intro-box .item.kor a:hover .more i:before {color:#005eae}
	
	.intro-box .item.reserve a:hover .more {background-color:#1fa7e1; color:#fff}
	.intro-box .item.reserve a:hover .more i:before {color:#1fa7e1}
	
	@keyframes img {
	    0% { top:-8rem;}
	    50% { top:-7rem;}
	    100% { top:-8rem;}
	}
		
	
}

#footer {background-color:#fff; font-size:1.3rem; text-align:center; position:fixed; left:0; bottom:0; padding:1.5rem 0; width:100%; line-height:normal}

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

	#main_wrap{padding:7rem 0}
	.logo {margin-bottom:3rem}
	.logo .slogun {font-size:2.6rem}
	.intro-box {flex-direction:column}
	.intro-box .item a{height:auto; padding:3rem 4rem 3rem 15rem}
	.intro-box .item .tt {text-align:left}
	.intro-box .item .tt strong {font-size:2.6rem}
	.intro-box .item .img {left:2rem; top:50%; transform:translateY(-50%); width:11rem}
	.intro-box .item .more {position:initial; margin-top:1rem; width: 16rem}
	
	.intro-box .item.kor {margin-bottom:2rem}
	
	#footer {position:relative}
	
	
}