:root{
	--color-main01: #213054;
	--color-main02: #024781;
	--color-main03: #005CAA;
}

html,body{width:100%; height:100%;}
.w1600{width:1600px; margin:0 auto;}

div.intro-wrap{background:url(../img/intro/bg.jpg) no-repeat center; background-size:cover; width:100%; min-height:100%; display:flex; align-items: center;}
div.intro-wrap div.w1600{height:100%;}

div.intro-wrap div.logo{width: 36rem; margin: 0 auto; padding-top: 6.25rem; margin-bottom: 5rem;}
div.intro-wrap div.logo img{width: 100%; height: auto; object-fit: contain; }

div.intro-wrap div.lang-btn-wrap{display: flex; justify-content: space-between; padding-bottom: 5rem;}
div.intro-wrap div.lang-btn-wrap a.btn{display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 30%; height: 30rem; border: 4px solid var(--color-main01); background: rgba(255, 255, 255, 0.7); padding: 4rem; transition: 0.3s;}
div.intro-wrap div.lang-btn-wrap a.btn img.character{width: 13rem; object-fit: contain; text-align: center;}
div.intro-wrap div.lang-btn-wrap a.btn > p{font-size: 2.875rem; color: var(--color-main01); border-bottom: 2px solid var(--color-main01);}
div.intro-wrap div.lang-btn-wrap a.btn:nth-child(2){border-color: var(--color-main02);}
div.intro-wrap div.lang-btn-wrap a.btn:nth-child(3){border-color: var(--color-main03);}
div.intro-wrap div.lang-btn-wrap a.btn:nth-child(2) > p{color: var(--color-main02); border-color: var(--color-main02);}
div.intro-wrap div.lang-btn-wrap a.btn:nth-child(3) > p{color: var(--color-main03); border-color: var(--color-main03); font-weight:bold;}
@media (hover: hover){
    div.intro-wrap div.lang-btn-wrap a.btn:hover{transform: translateY(-2rem); background: #fff;}
}

/* 반응형 */
@media screen and (max-width: 1600px){
	.w1600{width:90%;}
}
@media screen and (max-width: 1440px){

}
@media screen and (max-width: 1280px){
    div.intro-wrap div.logo{width: 30rem;}

    div.intro-wrap div.lang-btn-wrap a.btn{padding: 3rem; height: 23rem;}
    div.intro-wrap div.lang-btn-wrap a.btn img.character{width: 10rem;}
    div.intro-wrap div.lang-btn-wrap a.btn > p{font-size: 2.5rem;}
}
@media screen and (max-width: 1024px){
	div.intro-wrap div.lang-btn-wrap a.btn{padding:2.5rem; height:21rem;}
	div.intro-wrap div.lang-btn-wrap a.btn img.character{width:10rem; height:10rem;}
}
@media screen and (max-width: 800px){
    div.intro-wrap div.logo{width:26rem;}
	div.intro-wrap div.lang-btn-wrap a.btn{height:17rem; padding:2rem;}
	div.intro-wrap div.lang-btn-wrap a.btn img.character{width:8rem; height:8rem;}
	div.intro-wrap div.lang-btn-wrap a.btn > p{font-size:2rem;}
}
@media screen and (max-width: 640px){
	div.intro-wrap div.logo{width:20rem; margin-bottom:2.5rem; padding-top:2.5rem}
    div.intro-wrap div.lang-btn-wrap{flex-direction: column; align-items:center; gap:1.5rem;}
    div.intro-wrap div.lang-btn-wrap a.btn{width: 100%; height: 22vh; padding:1.25rem;}
    div.intro-wrap div.lang-btn-wrap a.btn img.character{height: 65%;}
	div.intro-wrap div.lang-btn-wrap a.btn > p{font-size:1.5rem;}
}
@media screen and (max-width: 480px){
    div.intro-wrap div.logo{width: 70%; margin-bottom:2rem; padding-top:0;}

	div.intro-wrap div.lang-btn-wrap{gap:1rem; padding-bottom:0;}
	div.intro-wrap div.lang-btn-wrap a.btn{height:21vh;}
}
@media screen and (max-width: 400px){
}
@media screen and (max-width: 320px){
}