@charset "utf-8";
/**
 * @File Name : intro.css
 * @Description : ÀÎÆ®·Î
 * @Modification Information
 * <pre>
 * ¼öÁ¤ÀÏ | ¼öÁ¤ÀÚ | ¼öÁ¤³»¿ë
 * 2026.08.05 | ±èÈ¿Áø | ÃÖÃÊ µî·Ï
 * 2026.08.27 | ±èÈ¿Áø | ·Î±×ÀÎ Ãß°¡
 * </pre>
 * @author µðÀÚÀÎÆÀ ±èÈ¿Áø
 * @since 2026.08.05
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* intro1 */
#intro1 {margin-top:50px;height:calc(100% - 50px);padding:53px 24px 0;text-align:center;background:linear-gradient(to bottom, #f1faff, #c9e4ff);box-sizing:border-box;}
#intro1 h1#logo {height:40px;margin-bottom:14px;}
#intro1 h1#logo img {height:100%}
#intro1 h2#slogo {position:relative;width:241px;height:69px;background:url(../../img/inc/intro_sprite.png) no-repeat 0 0 / 1000px auto;margin:auto;text-indent:-9999px;}
#intro1 h2#slogo:before {position:absolute;top:0;left:52px;content:"";display:block;width:25px;height:26px;background:url(../../img/inc/intro_sprite.png) no-repeat 0 -79px / 1000px auto;animation:iacts_ani1 2s ease-out infinite;}
#intro1 .t1 {margin:25px 0 35px;font-size:20px;font-weight:500;color:#000;line-height:28px;}
#intro1 .t1 span, #intro1 .lst li .t2 span {display:block;}
#intro1 .lst {font-size:0}
#intro1 .lst li {position:relative;display:inline-block;vertical-align:top;width:360px;margin:0 15px;padding:32px 0 60px;background:#fff;border-radius:20px;box-shadow:10px 10px 30px rgba(0,0,0,.05)}
#intro1 .lst li i.ic1 {position:relative;display:block;width:116px;height:108px;background:url(../../img/inc/intro_sprite.png) no-repeat;background-size:1000px auto;margin:auto auto 26px}
#intro1 .lst li .h1 {display:block;font-size:28px;font-weight:700;color:#000;}
#intro1 .lst li .t2 {font-size:18px;line-height:26px;font-weight:500;color:#555;margin:10px 0 25px}
#intro1 .lst li .b1.more {position:relative;display:inline-block;vertical-align:top;width:200px;height:50px;line-height:50px;background:#2163c1;border-radius:9999px;font-size:19px;font-weight:500;color:#fff;overflow:hidden;transition:all .4s ease;z-index:1}
#intro1 .lst li .b1.more:before {position:absolute;bottom:0;left:50%;content:"";display:block;width:0;height:100%;background:#0e1d6b;z-index:-1;transform:skewX(-40deg);transition:all .5s ease}
#intro1 .lst li .b1.more:hover, #intro1 .lst li .b1.more:focus {/* background-color:#0e1d6b; */text-decoration:underline;text-underline-offset:4px;}
#intro1 .lst li .b1.more:hover:before {left:-40px;width:calc(100% + 80px)}
/* ¾ÆÀÌÄÜ */
#intro1 .lst li.n1 i.ic1 {background-position:-243px 0}
#intro1 .lst li.n1 i.ic1:before {position:absolute;top:0;left:21px;content:"";display:block;width:19px;height:24px;background:url(../../img/inc/intro_sprite.png) no-repeat -27px -79px / 1000px auto;}
#intro1 .lst li.n2 i.ic1 {background-position:-361px 0}
#intro1 .lst li.n3 i.ic1 {background-position:-479px 0}
#intro1 .ban1 {position:relative;background:linear-gradient(to left, #4e27b2, #234edd);max-width:1140px;margin:30px auto 0;border-radius:20px;color:#fff;padding:23px 50px 24px 30px;text-align:left;box-sizing:border-box;}
#intro1 .ban1 * {display:inline-block;vertical-align:middle;line-height:63px;}
#intro1 .ban1 .h1 {position:relative;font-size:30px;font-weight:700;color:#fff;margin:0 15px 0 21px;padding-left:110px;}
#intro1 .ban1 .h1:before {position:absolute;top:50%;left:0;content:"";display:inline-block;vertical-align:middle;width:89px;height:63px;background:url(../../img/inc/intro_sprite.png) no-repeat -76px -79px / 1000px auto;margin-top:-31px;}
#intro1 .ban1 .t1 {margin:0;font-size:18px;color:#fff;}
#intro1 .ban1 .b1.more {position:absolute;top:50%;right:60px;background:#fff;line-height:46px;font-size:17px;color:#000;border-radius:9999px;margin-top:-23px;padding:0 25px 0 35px;font-weight:500;}
#intro1 .ban1 .b1.more:after {content:"";display:inline-block;vertical-align:middle;width:14px;height:12px;background:url(../../img/inc/intro_sprite.png) no-repeat 0 -107px / 1000px auto;margin-left:11px;}

@media screen and (min-width:1260px){
	#intro1 .lst li.n1:hover i.ic1:before {animation:iacts_shake 2s ease-out infinite;transform-origin:bottom}
	#intro1 .lst li.n2:hover i.ic1 {animation:iacts_walk .7s infinite;}
	#intro1 .lst li.n3:hover i.ic1 {animation:iacts_move2 .6s ease-in-out infinite;will-change:transform;}
}
@media screen and (max-width:1259px){
	#intro1 {padding:45px 16px 30px}
	#intro1 h1#logo {height:28px;margin-bottom:16px;}
	#intro1 h2#slogo {width:193px;height:55px;background-size:800px auto;}
	#intro1 h2#slogo:before {left:42px;width:20px;height:21px;background-size:800px auto;background-position:0 -63px}
	#intro1 .t1 {margin:25px 0 35px;font-size:17px;line-height:28px;}
	#intro1 .lst li {width:calc(33.33% - 20px);margin:0 10px}
	#intro1 .ban1 {max-width:none;margin:20px 10px 0}
}
@media screen and (max-width:1099px){
	#intro1 .lst li {width:calc(33.33% - 20px);margin:0 10px}
}
@media screen and (max-width:999px){
	#intro1 .lst li {padding:40px 0 35px;width:calc(33.33% - 16px);margin:0 8px}
	#intro1 .lst li .h1 {font-size:22px;}
	#intro1 .lst li i.ic1 {width:93px;height:86px;background-size:800px auto;margin-bottom:20px;}
	#intro1 .lst li.n1 i.ic1 {background-position:-194px 0}
	#intro1 .lst li.n2 i.ic1 {background-position:-289px 0}
	#intro1 .lst li.n3 i.ic1 {background-position:-383px 0}
	#intro1 .lst li.n1 i.ic1:before {left:18px;width:15px;height:19px;background-size:800px auto;background-position:-22px -63px}
	#intro1 .lst li .t2 {font-size:15px;line-height:22px;margin-bottom:25px;}
	#intro1 .lst li .b1.more {width:160px;height:40px;line-height:40px;font-size:16px;}
	#intro1 .ban1 {max-width:none;margin-left:8px;margin-right:8px;padding:20px 40px;}
	#intro1 .ban1 .h1 {font-size:27px;margin-left:0}
	#intro1 .ban1 .b1.more {right:35px;}
}
@media screen and (max-width:899px){
	#intro1 .ban1 {padding:15px 25px;}
	#intro1 .ban1 * {line-height:50px}
	#intro1 .ban1 .h1 {font-size:25px;padding-left:88px;display:block;}
	#intro1 .ban1 .h1:before {width:71px;height:50px;background-size:800px auto;background-position:-61px -63px;margin-top:-15px;}
	#intro1 .ban1 .t1 {margin-left:88px;margin-top:-20px;line-height:1.2}
	#intro1 .ban1 .b1.more {right:25px;padding:0 25px}
}
@media screen and (max-width:799px){
	#intro1 {margin-top:35px;height:calc(100dvh + 70px)}
	#intro1 h2#slogo {width:169px;height:48px;background-size:700px auto;}
	#intro1 h2#slogo:before {left:36px;width:18px;height:18px;background-size:700px auto;background-position:0 -55px}
	#intro1 .t1 {margin:20px 0 30px;font-size:16px;line-height:24px;}
	#intro1 .lst li {display:inline-block;vertical-align:top;width:calc(50% - 7.5px);margin:0 0 0 15px;padding:12px 25px 20px;text-align:center;box-sizing:border-box;}
	#intro1 .lst li:nth-child(odd) {margin-left:0}
	#intro1 .lst li:last-child {width:100%;margin-top:10px;}
	#intro1 .lst li .h1:before {position:relative;top:auto;left:auto;margin:auto auto 8px;}
	#intro1 .lst li .t2 {margin:7px 0 15px;word-break:keep-all}
	#intro1 .lst li .t2 span {display:inline}
	#intro1 .lst li .b1.more {text-align:center}
	#intro1 .ban1 {margin-left:0;margin-right:0;margin-top:10px;}
}
@media screen and (max-width:699px){
	#intro1 {height:auto;}
	#intro1 h1#logo {margin-bottom:10px;}
	#intro1 .t1 {margin-bottom:30px}
	#intro1 .lst li {padding-left:15px;padding-right:15px}
	#intro1 .lst li .h1 {font-size:20px;line-height:1.1}
	#intro1 .lst li i.ic1 {position:relative;top:auto;left:auto;margin:auto auto 10px;width:70px;height:65px;background-size:600px auto;}
	#intro1 .lst li.n1 i.ic1 {background-position:-146px 0}
	#intro1 .lst li.n2 i.ic1 {background-position:-217px 0}
	#intro1 .lst li.n3 i.ic1 {background-position:-287px 0}
}
@media screen and (min-height:767px) and (max-width:699px){
	#intro1 {height:100%}
}
@media screen and (max-width:699px){
	#intro1 .ban1 {text-align:center;padding-top:20px;}
	#intro1 .ban1 * {line-height:1.1}
	#intro1 .ban1 .h1 {font-size:23px;margin-right:0;padding-left:0;margin-bottom:0;}
	#intro1 .ban1 .h1:before {position:static;top:auto;left:auto;width:53px;height:38px;background-position:-46px -47px;background-size:600px auto;margin:-8px 5px 0 0;}
	#intro1 .ban1 .t1 {font-size:15px;margin:5px 0}
	#intro1 .ban1 .b1.more {display:block;position:relative;top:auto;right:auto;padding:0 20px;margin:5px auto 0;width:140px;line-height:40px;}
}
@media screen and (max-width:549px){
	#intro1 {height:auto;padding-top:35px;padding-bottom:15px;}
	#intro1 h1#logo {height:22px;margin-bottom:12px;}
	#intro1 h2#slogo {width:121px;height:35px;background-size:500px auto;}
	#intro1 h2#slogo:before {left:26px;width:15px;height:15px;background-size:500px auto;background-position:0 -40px}
	#intro1 .t1 {font-size:15px;line-height:20px;word-break:keep-all;margin:15px 0 20px;}
	#intro1 .t1 span {display:inline}
	#intro1 .lst li {display:block;width:100%;margin-left:0;margin-bottom:10px;padding-bottom:15px;}
	#intro1 .lst li i.ic1 {width:58px;height:54px;background-size:500px auto;}
	#intro1 .lst li.n1 i.ic1 {background-position:-122px 0}
	#intro1 .lst li.n2 i.ic1 {background-position:-181px 0}
	#intro1 .lst li.n3 i.ic1 {background-position:-240px 0}	
	#intro1 .lst li .t2 {line-height:20px;margin-bottom:10px}
	#intro1 .ban1 .h1 {font-size:21px}
}

@keyframes iacts_move {
    0%, 100% {transform: translateX(0);}
    33% {transform: translateX(-3px);}
    66% {transform: translateX(3px);}
}
@keyframes iacts_move2 {
    0%,100% {transform:translateY(0);}
    50% {transform:translateY(3px);}
}

#intro1 .login1 {max-width:700px;margin:67px auto;background:#fff;border-radius:30px;box-shadow:10px 10px 30px rgba(0,0,0,.05);padding:62px 85px 55px;box-sizing:border-box}
#intro1 .login1 .hg1 .h1 {display:block;font-size:40px;font-weight:700;color:#000;line-height:1;letter-spacing:0;}
#intro1 .login1 .hg1 .t1 {font-size:18px;color:#333;font-weight:400;margin:10px 0 27px}
#intro1 .login1 .frm1 {padding-bottom:3px}
#intro1 .login1 .frm1 li {position:relative;border:1px solid #d3d8ec;border-radius:9999px;box-sizing:border-box;overflow:hidden;margin-bottom:10px}
#intro1 .login1 .frm1 li input.text {width:100%;height:58px;line-height:56px;border:0;margin:0;padding:0 60px;font-size:17px;color:#5b5b5b;font-weight:500}
#intro1 .login1 .frm1 li:before {position:absolute;top:16px;left:28px;content:"";display:block;width:20px;height:24px;background:url(../../img/inc/intro_sprite.png) no-repeat;background-size:1000px auto;z-index:1}
#intro1 .login1 .frm1 li.id:before {background-position:-54px -79px}
#intro1 .login1 .frm1 li.pw:before {background-position:-54px -105px}
#intro1 .login1 .button.submit {display:block;width:100%;height:70px;background:#005aab;color:#fff;font-size:19px;font-weight:500;border:0;border-radius:9999px}
#intro1 .login1 .members {margin-top:26px;font-size:0}
#intro1 .login1 .members li {display:inline-block;vertical-align:top;padding:0 5px;}
#intro1 .login1 .members li a {position:relative;display:block;font-size:17px;color:#333;font-weight:500;letter-spacing:0;line-height:30px;padding:0 25px}
#intro1 .login1 .members li a:before {position:absolute;top:50%;left:-5px;content:"";display:block;width:1px;height:11px;background:#d8dde5;margin-top:-5px;}
#intro1 .login1 .members li:first-child a:before {display:none}