@charset "utf-8"; 
@import url("../font/GmarketSans/fonts.css"); 
@import url("../font/SCDream/fonts.css"); 
@import url("../font/Paperlogy/fonts.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'); 
}

/* 스크롤 */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {background: oklch(86.867% 0.0188 250.722);border-radius: 10px;}
::-webkit-scrollbar-track {background: oklch(83.28% 0.00009 271.152 / 0.1); transition: 0.3s all;}
::-webkit-scrollbar-thumb:hover {background: oklch(74.571% 0.03045 254.773);}


/* 인트로 */
.wrap {position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;min-height: 100vh;background: linear-gradient(70.5deg, oklch(0% 0 0 / 0) 8.44%, oklch(0% 0 0 / 0.2) 89.63%), linear-gradient(0deg, oklch(0% 0 0 / 0.3), oklch(0% 0 0 / 0.3)), url(../images/intro_bg.png) no-repeat center;background-size: cover;background-position: center center;background-attachment: fixed;font-family: "Paperozi";overflow: hidden;}
.intro_page {position:relative;max-width: 60rem;width:100%;margin:0 auto;padding: 1rem;text-align:center;}
.intro_page .titleWrap {position: relative;width: 100%;}
.intro_page .titleWrap:before{content:'';width: 73.2rem;height: 25.275rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: radial-gradient(17.26% 50% at 50% 50%, oklch(0% 0 0 / 0.5) 0%, oklch(0% 0 0 / 0) 100%);}
.intro_page .titleWrap h3{font-size: 4.75rem;color: oklch(64.735% 0.19623 41.746);font-weight: 800;line-height: 1.5;word-break: auto-phrase;letter-spacing: normal;}
.intro_page .subTitle{color: oklch(100% 0.00011 271.152);font-size: 1.9rem;font-weight: 500;word-break: auto-phrase;line-height: 1.5;letter-spacing: 0.02em;margin-top: 1.1rem;}
.intro_page .subTitle span {color: oklch(0% 0 0);font-weight: 600;background: oklch(85.883% 0.14805 95.041);}
.intro_page .cont {max-width: 100%;}
.intro_page .cont .contWrap {position: relative;width: 100%;height: auto;margin-top: 7.9rem;}
.intro_page .list {position: relative;max-width: 46.4rem;width: 100%;padding-left: 1rem;margin: 0 auto;}
.intro_page .list:before{content:'';width: 2px;height: 90%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);background: oklch(100% 0.00011 271.152 / 0.6);}
.intro_page .list li{font-size: 1.1rem;font-weight: 500;line-height: 1.5;color: oklch(100% 0.00011 271.152);text-align: left;text-shadow: 4px 4px 4px oklch(0% 0 0 / 0.5);letter-spacing: 0;word-break: auto-phrase;}
.intro_page .list li span{color: oklch(100% 0.00011 271.152);font-weight: 800;margin-right: 0.25rem;}
.intro_page .cont .contWrap li.ac {justify-content: center;}
.intro_page .list li p{font-size: 1rem;line-height: 1.5rem;word-break: auto-phrase;letter-spacing: -1px;color: oklch(0% 0 0);font-weight: 600;text-align: left;}
.logoWrap{position: relative;max-width: 275px;margin: 3rem auto 0;}
.logoWrap img {max-width: 100%;width: 100%;}

@media screen and (max-width:1921px){ 
.intro_page {margin-top: 10.6rem;}
}

@media screen and (max-width:1200px){ 
.intro_page .titleWrap h3{font-size: 3rem;line-height: 1.2;}
.intro_page .titleWrap p{font-size: 1.2rem;}
.intro_page .cont .contWrap p{font-size: 0.9rem;}
}

@media screen and (max-width:768px){ 
.intro_page {margin-top: 3rem;}
.intro_page .titleWrap h3{font-size: 2.8rem;}
.intro_page .titleWrap p{font-size: 1.1rem;}
.intro_page .cont .contWrap{margin-top: 5rem;}
.intro_page .cont .contWrap p{font-size: 0.8rem;}
.intro_page .subTitle{font-size: 1.4rem;}
.intro_page .list li{font-size: 0.8rem;}
.intro_page .list li + li { margin-top: 0.5rem;}
.intro_page .list li span {display: inline-block;width: 100%;font-size: 0.9rem;margin-right: 0;}
.logoWrap img{width: 80%;}
}

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

}

@media screen and (max-width:480px){ 
    .intro_page .titleWrap h3{font-size: 2rem;}
    .intro_page .subTitle{font-size: 1.1rem;}
}