@charset "utf-8";
/**********************************************************************
* Descript : 전체 페이지에 적용되는 레이아웃 스타일 정의
***********************************************************************/
@font-face {font-family:''Pretendard'';}

/**********************************************************************
* Descript : ★★★★★★★★★★★★주의 #wrap .inner 클래스 (전체 페이지에 적용됩며, 모든 하위메뉴의 레이아웃사이즈가 변경될 수 있습니다.)★★★★★★★★★★★★★★★★★★
***********************************************************************/
html, body{width:100%; height:100%; min-width:1200px; min-height:800px;}

/**********************************************************************
* Descript : 인트로 스타일
***********************************************************************/
.scale-in-top {-webkit-animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@-webkit-keyframes scale-in-top{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 0%;transform-origin:50% 0%;opacity:1;}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 0%;transform-origin:50% 0%;opacity:1;}}@keyframes scale-in-top{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 0%;transform-origin:50% 0%;opacity:1;}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 0%;transform-origin:50% 0%;opacity:1;}}


#intro {min-width:1400px; width:100%; height:100vh; background:linear-gradient(120deg, #fbfbfb 0%, #F4F5F7 100%) no-repeat; overflow:hidden; letter-spacing:-.03em; font-size:20px;}
#intro .inner {font-family:'Pretendard'; line-height:1.2; background:url(../img_2026/intro_bg.png); height:100vh; position:relative;}
#intro .inner:before,
#intro .inner:after {content:''; background:no-repeat 50% 50%; background-size:contain; position:absolute;}
#intro .inner:before {background-image:url(../img_2026/bg_obj01.svg); width:21.2em; height:21.9em; left:-8em; bottom:-8em;}
#intro .inner:after {background-image:url(../img_2026/bg_obj02.svg); width:25em; height:25em; right:-8em; top:-8em;}
#intro .logo {position:absolute; top:1em; left:2em;}

.section1 {padding:3em 1em 3em; text-align:center;}
.section1 .topRG {display:inline-block; padding:.4em 1.8em; font-size:.9em; letter-spacing:.3em; border:1px solid rgba(255,255,255,.7); border-radius:30px;}
.section1 .title {margin:0 0 1.2em;}
.section1 .sub-txt span {display:inline-block; margin-bottom:1em; font-size:1.3em; font-weight:800; color:#31377E; border:2px solid #31377E; border-radius:50px; padding:.4em 1em; background:#fff;}
.section1 .sub-txt i {color:#555555;}

.section2 {margin:0 auto; width:70em;}
.section2 .flex-inner {display:flex; width:100%; justify-content:space-between;}
.section2 .flex-inner > div {border-radius:2em; transition:.5s;}
.section2 .btn1 {background:#257FE0; transform:rotate(-3deg);}
.section2 .btn2 {background:#6A2CEB;}
.section2 .btn3 {background:#A52CEB; transform:rotate(3deg);}
.section2 .btn1:hover {transform:rotate(-5deg); box-shadow:12px 12px 0 #16589F;}
.section2 .btn2:hover {transform:rotate(-2deg); box-shadow:12px 12px 0 #320c80;}
.section2 .btn3:hover {transform:rotate(5deg); box-shadow:12px 12px 0 #650b99;}
.section2 a {position:relative; display:block; text-decoration:none !important; transition:.3s; padding:3em; height:14.5em; width:14.5em;}
.section2 a:before {content:''; background:no-repeat 50% 50%; background-size:contain; position:absolute; transition:.3s; right:.5em; bottom:-1.5em;}
.section2 .btn1 a:before {background-image:url(../img_2026/illu_obj01.svg); width:9.7em; height:17.45em;}
.section2 .btn2 a:before {background-image:url(../img_2026/illu_obj02.svg); width:12.25em; height:16.7em;}
.section2 .btn3 a:before {background-image:url(../img_2026/illu_obj03.svg); width:14.1em; height:16.3em;}
.section2 a i {color:#fff; font-size:.85em; opacity:.4; letter-spacing:.05em; display:block;}
.section2 a span {display:block; font-size:1.7em; font-weight:900; color:#fff; margin-top:.4em;}
.section2 a span:after {content:''; display:block; width:60px;; height:60px; background:rgba(0,0,0,.2) url(../img_2026/btn_arrow.png) no-repeat 50% 50%; vertical-align:middle; position:absolute; bottom:2em; border-radius:50%;}
.section2 a:hover span:after {background-color:#fff;}
.section2 .btn1 a:hover span:after {background-image:url(../img_2026/btn_arrow01.png);}
.section2 .btn2 a:hover span:after {background-image:url(../img_2026/btn_arrow02.png);}
.section2 .btn3 a:hover span:after {background-image:url(../img_2026/btn_arrow03.png);}