@charset "utf-8"; 

/* YJS
   main - main layout
*/

/* 타이틀 */
.title_cont {text-align:left;}
.title_cont .sub_tit {padding:0; margin-bottom:20px; font-size:15px; font-weight:600; color:var(--blue); text-align:left;}
.title_cont h3 {font-size:32px; font-weight:400; color:var(--blck); letter-spacing:-0.5px;}
.title_cont h3 b {font-weight:600;}

/* 버튼 */
.btn_more {position:absolute; top:-8px; right:0px; display:block; width:40px; height:40px; background:url(../image/common/main_icon_is.png) -240px -80px no-repeat;}

/* 비주얼 */
.visual {overflow:hidden; position:relative;}
.visual .swiper-slide {position:relative; ; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover;}
.visual .swiper-slide:before {content:""; display:block; padding-top:calc(722 / 1920 * 100%);}
.vis_control {position:absolute; bottom:200px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:5px; padding:10px 20px; border-radius:20px; background:rgba(0,0,0,0.5); z-index:2;}
.vis_control button {display:inline-block; width:10px; height:10px; background:url(../image/common/icon_wrap.png) 0 -150px;}
.vis_control button.vis_auto {background-position-x:-10px;}
.vis_control button.vis_auto.on {background-position-x:-20px;}
.vis_control button.vis_next {background-position-x:-30px;}
.vis_control button + .vis_control button {margin-right:3px;}
.vis_control .swiper-pagination-bullets.swiper-pagination-horizontal {width:fit-content;}
.vis_control .swiper-pagination-bullet {width:8px; height:8px; border-radius:50%; background-color:var(--gray-50);}
.vis_control .swiper-pagination-bullet-active {background-color:#53C4E3;}
.vis_tit {position:absolute; top:37%; left:50%; transform:translate(-50%,-50%); z-index:10; width:100%; text-align:center; color:var(--blck-30); font-size:20px; font-weight:400;}
.vis_tit>.pnt_blck {font-size:60px; font-weight:500; color:var(--blck); margin-bottom:5px;}
.vis_tit>.pnt {margin-bottom:22px; font-size:80px; font-weight:800; color:var(--blue);}

/* 바로가기 메뉴 */
.shortcut {position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(6,1fr); justify-content:center; width:1400px; margin:0 auto; padding:40px 120px; text-align:center; border-top-left-radius:30px; border-top-right-radius:30px; background-color:var(--blue); z-index:2;}
.shortcut li a {position:relative; padding-top:85px; color:#fff; text-decoration:none;}
.shortcut li a::before {content:""; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:80px; height:80px; background:url(../image/common/main_icon_is.png) 0 0 no-repeat; zoom:0.95;}
.shortcut li:nth-child(2) a::before {background-position-x:-80px;}
.shortcut li:nth-child(3) a::before {background-position-x:-160px;}
.shortcut li:nth-child(4) a::before {background-position-x:-320px;}
.shortcut li:nth-child(5) a::before {background-position-x:-480px;}
.shortcut li:nth-child(6) a::before {background-position-x:-560px;}

/* 알림마당 */
.brd_wrap {padding:80px 0; letter-spacing:-0.5px; background-color:#F3F4F5;}
.brd_wrap .tab_wrap {position:relative;}
.brd_wrap .tab_menu {display:flex; gap:40px; margin:40px 0 20px 0; color:var(--blck-50); font-size:20px; font-weight:600; letter-spacing:-0.5px;}
.brd_wrap .tab_menu > li >a {text-decoration:none;}
.brd_wrap .tab_menu > li.on {position:relative; padding-left:30px; color:var(--blue);}
.brd_wrap .tab_menu > li.on::before {content:""; position:absolute; top:4px; left:0; width:20px; height:20px; line-height:1.4; background:url(../image/common/icon_wrap.png) 0 -90px no-repeat;}
.brd_wrap .tab_cont ul {display:grid; grid-template-columns:repeat(4,2fr); gap:20px;}
.brd_wrap .tab_cont .box {display:flex; flex-direction:column; gap:20px; height:200px; padding:40px; text-decoration:none; border-radius:8px; background-color:#fff;}
.tab_cont .box:hover, .sec_01 .tab_cont .box:focus, .sec_01 .tab_cont .box:active {outline:3px solid var(--blue); transition:all .2s ease-in-out;}
.brd_wrap .tab_cont .tit {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:38px; font-size:16px; font-weight:600; color:var(--blck-70); overflow:hidden;}
.date {position:relative; padding-left:17px; font-size:15px; color:var(--blck-50);}
.date::before {content:""; position:absolute; top:3px; left:0; width:12px; height:12px; ; background:url(../image/common/icon_wrap.png) -60px 0px no-repeat;}
span[class^="badge"] {display:inline-block; width:fit-content; padding:3px 15px; font-size:15px; font-weight:500; text-align:center; border-radius:12.5px;}
.badge_01 {color:#9E3725; background-color:var(--red-20);}
.badge_02 {color:var(--blue); background-color:var(--blue-20);}
.badge_03 {color:#2B2617; background-color:var(--gold-20);}

/* SW소개 */
.itrd_wrap {padding:80px 0 40px 0;}
.itrd_wrap > .inner {display:flex; justify-content:space-between; gap:32px; letter-spacing:-0.5px;}
.itrd_wrap > .inner > div {flex:1; display:flex; justify-content:space-between;}
.itrd_wrap .title_cont {position:relative; padding-bottom:203px;}
.itrd_wrap .title_cont::after {content:""; position:absolute; bottom:0; left:0; width:240px; height:211px; ; background:url(../image/common/main_icon_is.png) -0px -589px no-repeat;}

.link_sw {display:flex; flex-direction:column; justify-content:space-between; align-self:flex-end; height:calc(100% - 38px);}
.link_sw > p {position:relative; padding-top:32px; font-size:16px; font-weight:400; color:var(--blck-50); line-height:1.4;}
.link_sw > p::before, .link_box::before {content:""; position:absolute; top:0; left:0; width:40px; height:36px; background:url(../image/common/main_icon_is.png) -0px -280px no-repeat; z-index:-1;}
.link_list  {display:flex; flex-direction:column; gap:10px;}
.link_list li a {position:relative; display:block; padding:20px 30px; font-size:16px; font-weight:600; color:#fff; text-decoration:none; border-radius:30px; background-color:var(--blue);}
.link_list li a::after {content:""; position:absolute; top:23px; right:20px; width:7px; height:12px; background:url(../image/common/icon_wrap.png) -60px -90px no-repeat;}
.link_list li:nth-child(2) a {color:var(--blue); background-color:var(--gray-50);}
.link_list li:nth-child(2) a::after {background:url(../image/common/icon_wrap.png) -71px -38px no-repeat;}

.link_box_wrap {display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap;}
.link_box {flex:1; position:relative; height:calc(100% - 38px); padding:30px; border-top-left-radius:30px; border-bottom-right-radius:30px; border:1px solid var(--gray-50);}
.link_box::before {top:30px; left:30px;}
.link_box::after {content:""; position:absolute; bottom:30px; right:30px; width:120px; height:120px; ; background:url(../image/common/main_icon_is.png) -120px -160px no-repeat; z-index:-1;}
.link_box_wrap .link_box:nth-child(2):after {background-position-x:0;}
.link_box > p {font-size:20px; font-weight:400; line-height:1.2; color:var(--blck-70); padding-top:50px; margin-bottom:20px;}
.link_box > p > b {font-weight:600;}
.link_box > a {position:relative; font-weight:400;}
.link_box > a::after {content:""; position:absolute; top:4px; right:-20px; width:7px; height:12px; background:url(../image/common/icon_wrap.png) -71px -38px no-repeat;}

/* 사업단소개 */
.bsn_wrap {padding:0; letter-spacing:-0.5px;}
.bsn_wrap .inner {position:relative; display:flex; gap:140px; padding:60px 80px; border-top-left-radius:50px; border-bottom-right-radius:50px; background-color:#EFF1F8; overflow:hidden; z-index:1;}
.bsn_wrap .inner::after {content:""; position:absolute; bottom:-40px; left:-30px; width:342px; height:353px; ; background:url(../image/common/main_icon_is.png) -240px -447px no-repeat; zoom:0.78; opacity:0.8; z-index:-1;}
.bsn_wrap .quick_btn {position:relative; display:inline-block; margin-top:40px; padding:8px 60px 8px 20px; font-size:16px; color:#fff; text-decoration:none; border-radius:30px; background-color:var(--blue);}
.bsn_wrap .quick_btn::before {content:""; position:absolute; top:11px; right:20px; width:7px; height:12px; background:url(../image/common/icon_wrap.png) -60px -90px no-repeat;}

.bsn_cont {flex:3 1 0;  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; z-index:1;}
.bsn_cont > li > a {position:relative; height:278px; padding:30px; border-radius:30px; background-color:#fff; text-decoration:none; filter:drop-shadow(3px 4px 5px #C2C6D7); -webkit-filter:drop-shadow(3px 4px 5px #C2C6D7);}
.bsn_cont > li:nth-child(2) > a {top:20px;}
.bsn_cont > li > a:hover, .bsn_cont > li > a:active, .bsn_cont > li > a:focus {outline:3px solid var(--blue); transition:all .2s ease-in-out;}
.bsn_cont > li > a::before {content:""; position:absolute; bottom:30px; right:30px; width:80px; height:80px; background:url(../image/common/main_icon_is.png) 0 -80px no-repeat;}
.bsn_cont > li:nth-child(2) > a:before {background-position-x:-80px;}
.bsn_cont > li:nth-child(3) > a:before {background-position-x:-160px;}

.bsn_cont > li > a p {font-size:15px; font-weight:400; line-height:1.4; color:var(--blck-50); word-break:keep-all;}
.bsn_cont > li > a p.tit {font-size:18px; font-weight:600; line-height:1.2; color:var(--blck); margin-bottom:15px;}

/* 모바일 */
@media screen and (max-width:1400px) {
	.visual .swiper-slide:before {padding-top:calc(722 / 1200 * 100%);}
	.shortcut {width:100%;}
}

@media screen and (max-width:1000px)  { 
	.vis_control {bottom:288px;}
	.vis_tit {top:50%;}
	.vis_tit > .pnt_blck {font-size:45px; margin-bottom:0;}
	.vis_tit > .pnt {font-size:50px; margin-bottom:5px;}
	.shortcut {position:relative; bottom:auto; left:auto; grid-template-columns:repeat(3,2fr); gap:15px 10px; padding:20px; transform:none;}
	.shortcut li a::before {zoom:0.7;}
	.shortcut li a {padding-top:65px;}
	
	/* 알림마당 */
	.brd_wrap .tab_cont ul {grid-template-columns:repeat(1,5fr); gap:15px;}
	.brd_wrap .tab_cont .box {flex-direction:row; justify-content:space-between; align-items:center; height:auto; padding:20px;}
	span[class^="badge"] {display:none;}
	.brd_wrap .tab_cont li:nth-child(n+6) {display:none;}
	.brd_wrap .tab_cont .tit {min-height:auto;}

	/* SW소개 */
	.itrd_wrap > .inner {flex-direction:column;}
	.itrd_wrap .title_cont::after {left:auto; right:0; top:0;}
	.itrd_wrap > .inner > div:first-child {flex-direction:column; flex:1; width:100%;}
	.link_sw {align-self:normal; gap:30px;}
	.link_box {min-width:245px; height:304px;}
	.itrd_wrap .title_cont {padding-bottom:92px;}
	
	/* 사업단소개 */
	.bsn_wrap .inner {flex-direction:column; padding:50px 30px; gap:20px;}
	.bsn_wrap .inner>div {display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px;}
	.bsn_cont {grid-template-columns:repeat(1,3fr);}
	.bsn_cont > li > a {width:100%; height:140px; border-radius:15px;}
	.bsn_cont > li > a p {padding-right:40%;}
	.bsn_cont > li:nth-child(2)>a {top:0;}
	.bsn_wrap .quick_btn {margin:0;}
}

@media screen and (max-width:500px)  {
	.vis_tit {font-size:16px;}
	.vis_tit > .pnt_blck {font-size:30px;}
	.vis_tit > .pnt {font-size:35px;}
	.brd_wrap .tab_menu {gap:15px;}
	.title_cont h3 {font-size:28px;}
	.itrd_wrap .title_cont {padding-bottom:85px;}
	.itrd_wrap .title_cont::after {top:auto; bottom:-45px; zoom:0.8;}
	.bsn_cont > li > a {height:180px;}
	.bsn_cont > li > a::before {top:65px; bottom:auto;}
}