@charset "utf-8";
/* CSS Document */
/*================AI교육원 인트로 화면 KJH ===================*/
* {box-sizing: border-box; margin: 0; padding: 0}
img {vertical-align: middle}
html {font-size:14px}

/* 인트로 사용 폰트 */
/* 나눔스퀘어 네오 */
@font-face {font-family:NSQ; font-weight: 800; 	font-display: swap;	src: local('NanumSquareNeo Black'), url('../font/NanumSquareNeoTTF-eHv.woff2') format('woff2'), url('../font/NanumSquareNeoTTF-eHv.woff') format('woff');}
@font-face {font-family:NSQ; font-weight: 600; 	font-display: swap; src: local('NanumSquareNeo ExtraBold'), url('../font/NanumSquareNeoTTF-dEb.woff2') format('woff2'), url('../font/NanumSquareNeoTTF-dEb.woff') format('woff');}
@font-face {font-family:NSQ; font-weight: 500; 	font-display: swap;	src: local('NanumSquareNeo Bold'), url('../font/NanumSquareNeoTTF-cBd.woff2') format('woff2'), url('../font/NanumSquareNeoTTF-cBd.woff') format('woff');}
@font-face {font-family:NSQ; font-weight: 300;	font-display: swap;	src: local('NanumSquareNeo SemiBold'), url('../font/NanumSquareNeoTTF-bRg.woff2') format('woff2'), url('../font/NanumSquareNeoTTF-bRg.woff') format('woff');}
@font-face {font-family:NSQ; font-weight: 200;	font-display: swap;	src: local('NanumSquareNeo Medium'), url('../font/NanumSquareNeoTTF-aLt.woff2') format('woff2'), url('../font/NanumSquareNeoTTF-aLt.woff') format('woff');}

/* 공통 상단 */
#wrap {min-width:320px}
.introwrap {display:flex; flex-direction: column; justify-content: space-between; min-height:100vh; font-family:NSQ; overflow: hidden; position: relative}
.intro_headtop {background:linear-gradient(0deg, #25343d, #465f6f)}
.intro_headtop h1 {max-width:1300px; margin:0 auto; padding:1.5rem 10px}

/* 공통 컨텐츠 */
#container.introcontainer {display:flex; flex-direction:column; justify-content: center; flex:1; background:linear-gradient(90deg, #e9f1f7, #f5f4f7); box-sizing: border-box}
.intro_content {max-width:1300px; width:100%; margin:0 auto; padding:2.5rem 0}
.intro_contop {border-bottom:1px solid #bfc2c7}
.intro_contit {text-align: center; font-size:clamp(1.714rem, 1.5vw, 2rem); font-weight:600}
.intro_contit span {display:inline-block; padding:12px 39px; border-radius:50px; border:2px solid #ccc}
.intro_contit2 {padding:1.214rem 0 1.93rem; text-align: center; font-size:clamp(3rem, 1.5vw, 3.286rem); font-weight:800; color:#3a4c58}
.intro_contit2 span {color:#fa663e}

.intro_conarea {text-align: center}
.icon_txt {line-height:150%; padding:2.07rem 0 2rem; font-size:clamp(1.429rem, 1.5vw, 1.714rem); font-weight:400; color:#303131; word-break: keep-all}
.icon_txt strong {font-weight:800}

.intro_link dl {width:52.8rem; margin:0 auto 15px; padding-bottom:39px}
.intro_link dl dt {position:relative; margin-bottom:-18px; font-size:clamp(1.143rem, 1.5vw, 1.286rem); font-weight:600; text-align: center}
.intro_link dl dt span {display:inline-block; min-width:142px; padding:6px 10px; background:#8c9fbb; border:2px solid #8c9fbb; color:#fff}
.intro_link dl dd {display: block; padding:2.714rem 1rem 1.43rem; font-size:clamp(1.143rem, 1.5vw, 1.714rem); font-weight:500; background:#fff; border:2px solid #8c9fbb; color:#7d7d7d}
.intro_link dl dd:hover a{text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:0.6rem} 
.intro_link dl.intro_before {position: relative}
.intro_link dl.intro_before:before {content:""; display: block; position: absolute; bottom:0; left:0; width:100%; height:39px; background:url(../../images/intro/bg_intro_arr.png) no-repeat 50% 100%}

.intro_link dl.intro_after {border-color:#6a94f8; margin-bottom:0; padding-bottom:2rem}
.intro_link dl.intro_after span {color:#000; background:#fff; border-color:#6a94f8}
.intro_link dl.intro_after dd {padding:3.57rem 1rem 1.78rem; background:#6a94f8; font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,0.2); text-decoration:inherit; font-size:clamp(2rem, 1.5vw, 2.143rem); border-color:#6a94f8; box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.intro_link dl.intro_after dd a {color:#fff; }

.btn_introgo {max-width:535px; margin:0 auto}
.btn_introgo a {display:block; position: relative; padding:14px 70px 14px 50px; background:#3a4c58 url(../../images/intro/blt_intro_homego.png) no-repeat 20px 50%; border-radius:50px; font-size:clamp(1.286rem, 1.5vw, 1.42rem); color:#fff; font-weight:600; text-align:left; transition:.3s}
.btn_introgo a span {display:block; padding:10px}
.btn_introgo a:before{content:""; position:absolute; top:50%; right:14px; width:48px;height:32px;margin-top:-16px;border-radius:50px;background:#fff url(../../images/intro/btn_intro_baro.png) no-repeat 0 50%; opacity:1; transition:opacity .3s ease}
.btn_introgo a:after{content:""; position:absolute; top:50%; right:14px; width:48px;height:32px;margin-top:-16px;border-radius:50px;background:#fff url(../../images/intro/btn_intro_baro.png) no-repeat 0 50%; opacity:0; transition:opacity .3s ease}
.btn_introgo a:hover {background-color:#fa663e}
.btn_introgo a:hover:before{opacity:0}
.btn_introgo a:hover:after {opacity:1}
.btn_introgo a span br {display:none}

/* 공통 하단 */
.intro_footer {background:#2f3940; text-align: center; word-break: keep-all}
.intro_footarea {max-width:1300px; line-height:1.6; padding:1.78rem 0; margin:0 auto; color:#fff; font-size:1rem}
.ifoot_info strong {margin-right:10px}
.ifoot_copy {padding:1rem 0; border-top:1px solid rgba(255,255,255,0.25); color:#838e96; text-align: center; font-weight:500}

/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
    #container.introcontainer {justify-content: flex-start}
    .intro_headtop h1 {padding:1.214rem 10px; text-align: center}
    .intro_headtop h1 img {width:100%; height:100%; max-width:220px}
    .intro_content {padding:1.8rem 10px}
    .intro_contit2 {font-size:clamp(2rem, 1.5vw, 3rem)}
    .icon_txt {padding:1.5rem 0; font-size:clamp(1.15rem, 1.5vw, 1.28rem)}
    .icon_txt br {display:none}
    .intro_contit {font-size:clamp(1.28rem, 1vw, 1.714rem)}
    .intro_contit span {padding:8px 30px}
    .intro_link dl {width:100%}
    .intro_link dl dd {padding:2rem 1rem 1.2rem}
    .intro_link dl.intro_after dd {padding:2.5rem 1rem 1.5rem; font-size:clamp(1.42rem, 1.5vw, 1.85rem)}
    .intro_footarea {padding:1.5rem 10px; font-size:0.929rem}
    .btn_introgo {max-width:100%}
    .btn_introgo a {font-size:clamp(1.07rem, 1vw, 1.214rem); border-radius:10px}
    .btn_introgo a span {padding:5px; padding-right:0}
    .btn_introgo a {padding:10px 60px 10px 36px; background-position:10px 50%}
    .btn_introgo a:after,.btn_introgo a:before {width:40px; height:28px; margin-top:-14px; right:10px}
}


/* PC LAYOUT */
@media only screen and (min-width:1025px) {
    
    
}

@media only screen and (max-width:450px) {
   .btn_introgo a span br {display:block}
    
}