@charset "utf-8"; 
@import url("../font/GmarketSans/fonts.css"); 
@import url("../font/XEIcon-2.3.3/xeicon.css"); 
/* 폰트 */
/* 본고딕 */
@font-face {
    font-family:'NotoT'; 
    src:url(../font/NotoSansKR/NotoSansKR-Thin-Hestia.eot); 
    src:url(../font/NotoSansKR/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Thin-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-Thin-Hestia.otf) format('opentype'); 
}

@font-face {
    font-family:'NotoL'; 
    src:url(../font/NotoSansKR/NotoSansKR-Light-Hestia.eot); 
    src:url(../font/NotoSansKR/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Light-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-Light-Hestia.otf) format('opentype'); 
}

@font-face {
    font-family:'NotoDL'; 
    src:url(../font/NotoSansKR/NotoSansKR-DemiLight-Hestia.eot); 
    src:url(../font/NotoSansKR/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
		 url(../font/NotoSansKR/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-DemiLight-Hestia.otf) format('opentype'); 
}

@font-face {
    font-family:'NotoR'; 
    src:url(../font/NotoSansKR/NotoSansKR-Regular-Hestia.eot); 
    src:url(../font/NotoSansKR/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Regular-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-Regular-Hestia.otf) format('opentype'); 
}

@font-face {
    font-family:'NotoM'; 
    src:url(../font/NotoSansKR/NotoSansKR-Medium-Hestia.eot); 
   	src:url(../font/NotoSansKR/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Medium-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-Medium-Hestia.otf) format('opentype'); 
}

@font-face {
    font-family:'NotoB'; 
    src:url(../font/NotoSansKR/NotoSansKR-Bold-Hestia.eot); 
    src:url(../font/NotoSansKR/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Bold-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-Bold-Hestia.otf) format('opentype'); 
}

@font-face {
    font-family:'NotoBK'; 
    src:url(../font/NotoSansKR/NotoSansKR-Black-Hestia.eot); 
    src:url(../font/NotoSansKR/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
    	 url(../font/NotoSansKR/NotoSansKR-Black-Hestia.woff) format('woff'),
    	 url(../font/NotoSansKR/NotoSansKR-Black-Hestia.otf) format('opentype'); 
}


/* 대전대학교 국제교류원 인트로 */
body {position:relative;} 
.wrap{position:relative;display: flex;width:100%;height: 100%;min-height: 100vh;margin:0 auto;background: url(../img/intro_bg.jpg) no-repeat center;background-size: cover;justify-content: center;align-items: center;}
.intro_page {width: 100%;max-width: 1400px;padding: 5rem 1rem;margin-bottom: 4rem;}
.intro_page .logo_wrap {text-align: center;margin: 0 auto;}
.intro_page .logo_wrap h1{position:relative;line-height: 1;}
.intro_page .logo_wrap h1 img {max-width:100%;}
.intro_page .tit_wrap{display: block;width: 100%;padding: 2.75rem 0 3.3rem;}
.intro_page .tit_wrap h3{font-family: 'NotoT';font-size: 2.5rem;color: #fff;text-align: center;line-height: 1;letter-spacing: 0;}
.intro_page .tit_wrap h3 strong{font-family: 'NotoB';}
.intro_page .cont_wrap {display: flex;justify-content: center;flex-wrap: wrap;align-items: center;gap: 1rem 2.5rem;padding: 0;}
.intro_page .cont_wrap > div{position: relative;display: flex;width: 14.75rem;height: 17.4rem;flex-direction: column;text-align: center;border-radius: 1.5rem;align-items: center;padding: 2rem;background: rgb(255 255 255 / 20%);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgb(255 255 255 / 30%);box-shadow: inset -2px 3px 5px rgba(0,0,0,.15),   inset 0 0 7px rgba(255,255,255,.15), -3px 4px 30px rgba(0,0,0,.3);transition: 0.3s all;overflow: hidden;}
.intro_page .cont_wrap > div:before{content:"";position: absolute;width: 15.35rem;height: 15.35rem;background: #13633e;border-radius: 50%;right: -137px;bottom: -106px;z-index: -1;opacity: 0;transition: 0.3s all;}
.intro_page .cont_wrap > div .icon{position: relative;display: flex;align-items: center;justify-content: center;width: 4.3rem;height: 4.3rem;background: rgb(255 255 255 / 30%);border-radius: 50%;}
.intro_page .cont_wrap > div .icon img{max-width: 100%;width: 100%;height: auto;filter: brightness(0) invert(1);transition: 0.3s all;}
.intro_page .cont_wrap > div .tit{position: relative;margin: 1rem 0 0rem;font-family: 'NotoB';font-size: 1.1rem;color: #fff;line-height: 30px;letter-spacing: -0.5px;white-space: nowrap;}
.intro_page .cont_wrap > div .txt{font-family: 'NotoL';font-size: 0.8rem;color: #fff;letter-spacing: -0.5px;line-height: 30px;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;}
.intro_page .cont_wrap > div .btn{display: flex;align-items: center;max-width: 10.5rem;width: 100%;height: 2.5rem;padding: 0 1rem;justify-content: center;background: rgb(255 255 255 / 30%);border-radius: 1.25rem;color: #fff;font-size: 0.9rem;line-height: 1;letter-spacing: -0.5px;font-family: 'NotoM';margin-top: auto;transition: 0.3s all;}
.intro_page .cont_wrap > div .btnWrap{display: flex;align-items: center;justify-content: center;margin-top: auto;padding: 0 0.5rem;}
.intro_page .cont_wrap > div .btnWrap > .btn2 {padding: 0 0.6rem;color: #fff;font-size: 0.85rem;line-height: 1;letter-spacing: -0.5px;font-family: 'NotoM';border-right: 1px solid rgb(255 255 255 / 40%);}
.intro_page .cont_wrap > div .btnWrap > .btn2:last-child {border-right: none;}

/* active */
.intro_page .cont_wrap > div:hover,
.intro_page .cont_wrap > div:focus {background: #00733e;box-shadow: -3px 4px 30px rgba(0,0,0,.3);border: 1px solid #00733e;}
.intro_page .cont_wrap > div:hover .icon,
.intro_page .cont_wrap > div:focus .icon {background:#d1ecdd;}
.intro_page .cont_wrap > div:hover .icon img,
.intro_page .cont_wrap > div:focus .icon img {filter:none;transform: rotateY(180deg);}
.intro_page .cont_wrap > div:hover .btn,
.intro_page .cont_wrap > div:focus .btn {background: #1b4c35;}
.intro_page .cont_wrap > div:hover::before,
.intro_page .cont_wrap > div:focus::before {opacity:1;}
@media screen and (max-width:1440px){ 

.intro_page .tit_wrap h3{font-size: 2rem;}

}


@media screen and (max-width:800px){ 
.wrap {height: 100%;}
.intro_page .tit_wrap{padding: 1.5rem 0;}
.intro_page .tit_wrap h3{font-size: 2rem;}

}

@media screen and (max-width:640px){ 
.intro_page {padding: 2em 1rem;}
.intro_page .tit_wrap{padding: 1rem 0 1.5rem;}
.intro_page .tit_wrap h3{font-size: 1.5rem;}
}

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

.intro_page .logo_wrap {padding: 0 0 1rem;}
.intro_page .logo_wrap h1{flex-direction: column;font-size: 1.2rem;gap: 0.5rem;flex-wrap: wrap;justify-content: center;}
.intro_page .logo_wrap h1 img {width: 8rem;}
.intro_page .logo_wrap span:before {display: none;}
.intro_page .logo_wrap h1 span{margin-left: 0;}
.intro_page .cont_wrap > div {justify-content: center;padding: 1rem 1rem 2rem;}
.intro_page .cont_wrap > div .tit {font-size: 1rem;}
}

@media screen and (max-width:480px){ 
.intro_page .tit_wrap h3{font-size: 1.2rem;}

}
@media screen and (max-width:300px){ 
.intro_page .tit_wrap h3 br{display:none;}
}