@charset "utf-8";
* {font-family:rixsinhead-pro, sans-serif}
#intro-wrap {background:#ECF1F5 url(/resources/_Etc/Intro/_Img/intro_bg.png) no-repeat 50% 100%;background-size:100% auto;box-sizing:border-box}

#contents h2.intro-tit {border-left:8px solid #176e45;margin-bottom:33px;padding-left:40px;color:#000;font-size:2.5em;font-weight:600;line-height:1.15}

/* 상단 */
#intro-wrap #header {padding-top:50px;text-align:right;}
#intro-wrap #contents {display:flex;flex-direction: row-reverse;justify-content: space-between;width:100%;max-width:1440px;margin:0 auto;padding:30px 20px 80px 20px;box-sizing:border-box;word-break:keep-all;}

#intro-wrap .intro-all { width:100% }
#intro-wrap .intro-all .intro-link-list { padding-top:70px; padding-bottom: 35px;}
#intro-wrap .intro-all .intro-link-list > ul > li { width: calc(33% - 10px); }
#intro-wrap .intro-right {position:relative;width:58.572%;text-align:center;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#intro-wrap .intro-tit {display:inline-block;position:relative;padding:26px 45px 0 45px;}
#intro-wrap .intro-tit:before {display:block;content:'';position:absolute;top:0;left:0;width:71px;height:71px;border-top:11px solid #469973;border-left:11px solid #469973;box-sizing:border-box;}
#intro-wrap .intro-tit .txt {display:block;color: rgba(0, 0, 0, 0.60);font-size: 23px;line-height: 150%;}
#intro-wrap .intro-tit .tit {display:block;color: #000;font-size: 50px;font-weight: 700;line-height: 150%;}

#intro-wrap .intro-link-list {display:flex;flex-wrap:wrap;row-gap:20px;position:relative;padding-top:155px;}
#intro-wrap .intro-link-list > ul {display:flex;flex-wrap:wrap;gap:20px;width:100%;}
#intro-wrap .intro-link-list > ul > li {width: calc(50% - 10px);}
#intro-wrap .intro-link-list .list1 a {display:block;position:relative;padding:50px 40px;height:270px;box-sizing:border-box;background: #0A90DB;text-align:left;overflow:hidden;}
#intro-wrap .intro-link-list .list1 a:before {display:block;content:'';position:absolute;bottom:15px;right:34px;width:111px;height:115px;background:url(/resources/_Etc/Intro/_Img/intro_icon01.png) no-repeat 0 0;background-size:100% auto;z-index:1;transition:all .3s ease;}
#intro-wrap .intro-link-list .list1 a.link-pass {background: #510adb;}
#intro-wrap .intro-link-list .list1 a.link-pass:before {background:url(/resources/_Etc/Intro/_Img/intro_icon01-1.png) no-repeat 0 0;}
#intro-wrap .intro-link-list .list1 a.link-notify {background: #510adb;}
#intro-wrap .intro-link-list .list1 a.link-notify:before {background:url(/resources/_Etc/Intro/_Img/intro_icon01-2.png) no-repeat 0 0;}
#intro-wrap .intro-link-list .list1 a .txt {display:block;position:relative;color:#fff;font-size: 20px;font-weight: 700;line-height: 150%;z-index:2;}
#intro-wrap .intro-link-list .list1 a .txt span {display:block;font-size: 24px;}
#intro-wrap .intro-link-list .list1 a .arr {display:flex;align-items:center;position:relative;width:40px;height:40px;border-radius: 20px;background: #FFF;margin-top:40px;overflow:hidden;z-index:2;transition:all .3s ease;}
#intro-wrap .intro-link-list .list1 a .arr:before {display:block;content:'';position:absolute;top:0;bottom:0;right:15px;margin:auto 0;width:7px;height:7px;border-bottom:2px solid #000;border-right:2px solid #000;transform:rotate(-45deg);transition:all .3s ease;}
#intro-wrap .intro-link-list .list1 a.link-susi {background: #FBC356;}
#intro-wrap .intro-link-list .list1 a.link-susi:before {bottom:29px;right:43px;width:100px;height:96px;background-image:url(/resources/_Etc/Intro/_Img/intro_icon02.png);}
#intro-wrap .intro-link-list .list1 a.link-susi .txt {color:#222;}

#intro-wrap .intro-link-list .list2 a {display:flex;align-items:center;justify-content:center;position:relative;padding:20px;height:130px;box-sizing:border-box;background: #008451;overflow:hidden;}
#intro-wrap .intro-link-list .list2 a .txt {display:block;position:relative;color:#fff;font-size: 24px;font-weight: 700;line-height: 150%;z-index:2;transition:all .3s ease;}
#intro-wrap .intro-link-list .list2 a .txt:before {display:block;content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:#fff;transition:all .3s ease;}
#intro-wrap .intro-link-list .list2 a.link-kor:before {display:block;content:'';position:absolute;bottom:0;right:0;width:144px;height:124px;background:url(/resources/_Etc/Intro/_Img/intro_icon03.png) no-repeat 0 0;background-size:100% auto;z-index:1;transition:all .3s ease;}
#intro-wrap .intro-link-list .list2 a.link-grad {background: #62960E;}
#intro-wrap .intro-link-list .list2 a.link-grad:after {display:block;content:'';position:absolute;top:0;left:0;width:71px;height:12px;background:rgba(5, 250, 155, 0.5);transition:all .3s ease;}
#intro-wrap .intro-link-list .list2 a.link-grad:before {display:block;content:'';position:absolute;top:0;left:0;width:12px;height:71px;background:rgba(32, 187, 255, 1);transition:all .3s ease;}
#intro-wrap .intro-link-list .list2 a:hover .txt:before {left:0;width:100%;}

#intro-wrap .intro-link-list .list3-1 a {display:block;position:relative;padding:50px 40px;height:270px;box-sizing:border-box;background: #689d0e;text-align:left;overflow:hidden;}
#intro-wrap .intro-link-list .list3-1 a:before {display:block;content:'';position:absolute;bottom:15px;right:34px;width:111px;height:115px;background:url(/resources/_Etc/Intro/_Img/intro_icon02.png) no-repeat 0 0;background-size:100% auto;z-index:1;transition:all .3s ease;}
#intro-wrap .intro-link-list .list3-1 a.link-pass {background: #510adb;}
#intro-wrap .intro-link-list .list3-1 a.link-pass:before {background:url(/resources/_Etc/Intro/_Img/intro_icon01-1.png) no-repeat 0 0;}
#intro-wrap .intro-link-list .list3-1 a.link-notify {background: #510adb;}
#intro-wrap .intro-link-list .list3-1 a.link-notify:before {background:url(/resources/_Etc/Intro/_Img/intro_icon01-2.png) no-repeat 0 0;}
#intro-wrap .intro-link-list .list3-1 a .txt {display:block;position:relative;color:#fff;font-size: 20px;font-weight: 700;line-height: 150%;z-index:2;}
#intro-wrap .intro-link-list .list3-1 a .txt span {display:block;font-size: 24px;}
#intro-wrap .intro-link-list .list3-1 a .txt .tt {display:block;font-size: 0.85em;}
#intro-wrap .intro-link-list .list3-1 a .arr {display:flex;align-items:center;position:relative;width:40px;height:40px;border-radius: 20px;background: #FFF;margin-top:40px;overflow:hidden;z-index:2;transition:all .3s ease;}
#intro-wrap .intro-link-list .list3-1 a .arr:before {display:block;content:'';position:absolute;top:0;bottom:0;right:15px;margin:auto 0;width:7px;height:7px;border-bottom:2px solid #000;border-right:2px solid #000;transform:rotate(-45deg);transition:all .3s ease;}
#intro-wrap .intro-link-list .list3-1 div.box:before { display: block; content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 71px; background: rgba(32, 187, 255, 1); transition: all .3s ease; }
#intro-wrap .intro-link-list .list3-1 div.box:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 71px; height: 12px;  background: rgba(5, 250, 155, 0.5);  transition: all .3s ease; }


#intro-wrap .intro-link-list .list3-2 a {display:flex;align-items:center;justify-content:center;position:relative;padding:20px;height:130px;box-sizing:border-box;background: #008451;overflow:hidden;min-height: 180px;}
#intro-wrap .intro-link-list .list3-2 a .txt {display:block;position:relative;color:#fff;font-size: 24px;font-weight: 700;line-height: 150%;z-index:2;transition:all .3s ease;}
#intro-wrap .intro-link-list .list3-2 a .txt:before {display:block;content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:#fff;transition:all .3s ease;}
#intro-wrap .intro-link-list .list3-2 a .txt .tt {display:block;font-size: 0.85em;}
#intro-wrap .intro-link-list .list3-2 a.link-kor:before,
#intro-wrap .intro-link-list .list3-2 a.link-susi:before,
#intro-wrap .intro-link-list .list3-2 a.link-ipsi:before{display:block;content:'';position:absolute;bottom:0;right:0;width:144px;height:124px;background:url(/resources/_Etc/Intro/_Img/intro_icon03.png) no-repeat 0 0;background-size:100% auto;z-index:1;transition:all .3s ease;}
#intro-wrap .intro-link-list .list3-2 a.link-susi {background: #c97307;}
#intro-wrap .intro-link-list .list3-2 a.link-ipsi {background: #97942e;}
#intro-wrap .intro-link-list .list3-2 a:hover .txt:before {left:0;width:100%;}


#intro-wrap .intro-link-list a i {position:absolute;display: block;width:0;height:0;border-radius: 50%;transition: all 0.6s ease-in-out;transform: translate(-50%, -50%);}
#intro-wrap .intro-link-list a:hover i {width:800px;height:800px;}
#intro-wrap .intro-link-list a.link-ws i {background: #0970C4;}
#intro-wrap .intro-link-list a.link-susi i {background: #a3600b;}
#intro-wrap .intro-link-list a.link-ipsi i {background: #737021;}
#intro-wrap .intro-link-list a.link-kor i {background: #00774A;}
#intro-wrap .intro-link-list a.link-grad i {background: #547E0C;}
#intro-wrap .intro-link-list a.i-none:before { background: none !important; }
#intro-wrap .intro-link-list div.box{display: block; position: relative; padding: 50px 40px; height: 270px; box-sizing: border-box; background: #0A90DB; text-align: center; overflow: hidden;}
#intro-wrap .intro-link-list div.box .txt {display:block;position:relative;color:#fff;font-size: 26px;font-weight: 700; line-height: 150%;z-index:2;}
#intro-wrap .intro-link-list div.box .txt span {display:block;}
#intro-wrap .intro-link-list div.box .txt .tt {display:block;font-size: 0.75em;line-height: 1.6em; padding-top: 10px; line-height: 150%;}
#intro-wrap .intro-link-list div.box:before {display:block;content:'';position:absolute;bottom:0;right:0;width:144px;height:124px;background-size:100% auto;z-index:1;transition:all .3s ease;}
#intro-wrap .intro-link-list div.box.col01 {background: #5a0adb;}
#intro-wrap .intro-link-list div.box.col02 {background: #0e57c5;}

#intro-wrap .intro-left {position:relative;width:35.715%;padding:0 40px 40px 40px;background: #FFF;box-sizing:border-box;}
#intro-wrap .susi-flow .flow-tit {padding: 20px 0px;text-align:center;border-radius: 0px 0px 30px 30px;background: linear-gradient(90deg, #169D6A 0%, #0689C4 100%);}
#intro-wrap .susi-flow .flow-tit .txt {color: rgba(255, 255, 255, 0.70);font-size: 20px;font-weight: 700;line-height: 150%;}
#intro-wrap .susi-flow .flow-tit .tit {color: #FFF;font-size: 30px;font-weight: 700;line-height: 150%;}
#intro-wrap .susi-flow .susi-flow-list {position:relative;display:flex;flex-direction: column;margin-top:30px;}
#intro-wrap .susi-flow .susi-flow-list > li {position:relative;width:100%;padding-bottom:20px;padding-left:30px;box-sizing:border-box;}
#intro-wrap .susi-flow .susi-flow-list > li:before {display:block;content:'';position:absolute;top:4px;left:4px;width:2px;height: calc(100% - 4px);border-left:2px dashed #CECECE;}
#intro-wrap .susi-flow .susi-flow-list > li:after {display:block;content:'';position:absolute;top:18px;left:0;margin-top:-5px;width: 10px;height: 10px;box-shadow:4px 8px 8px rgba(0, 0, 0, 0.25);background:#008451;border-radius:50%;}

#intro-wrap .susi-flow .susi-flow-list .f-step {position:relative;display:flex;align-items:center;justify-content:center;height: 43px;color: #0DA95F;font-size: 15px;font-weight: 700;line-height: 150%;padding: 5px 20px;border-radius: 100px;background: #F5F5F5;box-sizing:border-box;}
#intro-wrap .susi-flow .susi-flow-list .f-tit {position:relative;display:block;color: #000;font-size: 22px;font-weight: 700;line-height: 150%;padding-top:10px;padding-left:20px;box-sizing:border-box;}
#intro-wrap .susi-flow .susi-flow-list .f-date {position:relative;display:block;color: #333;font-size: 16px;line-height: 150%;padding-left:20px;}
#intro-wrap .susi-flow .susi-flow-list > li:first-child:before {top:20px;height: calc(100% - 20px);}
#intro-wrap .susi-flow .susi-flow-list > li:last-child {padding-bottom:0;}
#intro-wrap .susi-flow .susi-flow-list > li:last-child:before {height: 20px;}


@media all and (max-width:999px) {
#intro-wrap .intro-right {width:50%;}
#intro-wrap .intro-tit:before {width:60px;height:60px;border-top:6px solid #469973;border-left:6px solid #469973;}
#intro-wrap .intro-tit .txt {font-size: 18px;}
#intro-wrap .intro-tit .tit {font-size: 36px;}

#intro-wrap .intro-link-list {padding-top:30px;}
#intro-wrap .intro-link-list > ul > li {width:100%;}
#intro-wrap .intro-link-list .list1 a {padding:30px 55px 30px 30px;height:180px;}
#intro-wrap .intro-link-list .list1 a:before {bottom:-5px;right:-5px;transform:scale(0.7);}
#intro-wrap .intro-link-list .list1 a.link-susi:before {bottom:0;right:0;}
#intro-wrap .intro-link-list .list1 a .txt {font-size: 17px;}
#intro-wrap .intro-link-list .list1 a .txt span {font-size: 20px;}
#intro-wrap .intro-link-list .list1 a .arr {width:34px;height:34px;margin-top:20px;}
#intro-wrap .intro-link-list .list2 a {height:100px;}
#intro-wrap .intro-link-list .list2 a .txt {font-size: 20px;}
#intro-wrap .intro-link-list .list2 a.link-grad:after {width:60px;height:6px;}
#intro-wrap .intro-link-list .list2 a.link-grad:before {width:6px;height:60px;}

#intro-wrap .intro-left {width:45%;padding:0 20px 20px 20px;}
#intro-wrap .susi-flow .flow-tit .txt {font-size:16px;}
#intro-wrap .susi-flow .flow-tit .tit {font-size: 24px;}
}

@media all and (max-width:599px) {
	#intro-wrap #header {padding-top:30px;text-align:center;}
	#intro-wrap #header img {width:220px;}
	#intro-wrap #contents {flex-wrap:wrap;row-gap:30px;}

	#intro-wrap .intro-right {width:100%;padding-top:10px;}
	#intro-wrap .intro-tit {padding:26px 20px 0 20px;}
	#intro-wrap .intro-tit:before {width:40px;height:40px;}
	#intro-wrap .intro-tit .txt {font-size: 16px;}
	#intro-wrap .intro-tit .tit {font-size: 30px;}
	#intro-wrap .intro-link-list .list1 a {height:auto;}
	#intro-wrap .intro-link-list .list1 a .txt {font-size: 15px;}
	#intro-wrap .intro-link-list .list1 a .txt span {font-size: 17px;}
	#intro-wrap .intro-link-list .list2 a .txt {font-size: 17px;}

	#intro-wrap .intro-left {width:100%;}
	#intro-wrap .susi-flow .flow-tit .txt {font-size:14px;}
	#intro-wrap .susi-flow .flow-tit .tit {font-size: 19px;}
	#intro-wrap .susi-flow .susi-flow-list .f-step {font-size: 13px;}
	#intro-wrap .susi-flow .susi-flow-list .f-tit {font-size: 18px;}
	#intro-wrap .susi-flow .susi-flow-list .f-date {font-size: 13px;}
}