@charset "UTF-8";
/*-------------------------------------------------
title       :메인
Create date :2023-08-10
-------------------------------------------------*/

#wrap.modal #hnb {right:10rem}

/*공통*/
.section .contents {width:calc(100% - 10rem); max-width:120rem; margin:0 auto; padding:7rem 0; position:relative}
.section .contents h2 {color:#212121; display:inline-block; font-size:3.6rem; font-weight:500; line-height:1.2}
.section .contents h2 small {display:block; font-size:1.8rem; font-weight:400; margin-top:2rem}
.section .contents .more {border:1px solid #D5DADD; border-radius:100rem; color:#888; display:block; font-size:1.6rem; width:8.5rem; height:3rem; line-height:2.8rem; text-align:center; overflow:hidden; position:absolute; right:0; transition:all .3s; z-index:1}
.section .contents .more i {vertical-align:-2px}

/*비주얼*/
.visual {height:65rem; position:relative}
.visual .list,
.visual .list div {height:100%}
.visual .bg {background-repeat:no-repeat; background-position:center; background-size:cover; position:absolute; left:50%; transform:translateX(-50%); width:100%; height:70rem}
.visual .bg:before {content:''; background-color:#000; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0.3; z-index:1}
.visual .bg div {height:100%}
.visual .bg .item {display:none; background-size:cover; background-position:center}
.visual .desc {width:calc(100% - 8rem); max-width:120rem; margin:0 auto; position:relative; padding-top:22rem; padding-right:20rem; word-break:keep-all}
.visual .desc .title {color:#fff; display:block; font-size:6.4rem; font-weight:700; line-height:1.2}
.visual .desc .con {color:#fff; display:block; font-size:2.4rem; font-weight:400; line-height:1.4; margin-top:3rem}
.visual .desc .btn {background-color:#0077D4; border-radius:100rem; color:#E8F4FF; display:flex; justify-content:space-between; align-items:center; font-size:1.6rem; width:16rem; height:4.5rem; padding:0 2rem 0 2.5rem; margin-top:7.5rem}
.visual .desc .btn i {transition:all .3s}
.visual .control_box {width:calc(100% - 8rem); max-width:120rem; position:absolute; left:50%; transform:translateX(-50%)}
.visual .control_box .paging {display:none}
.visual .control_box .controller {position:absolute; right:0; bottom:13.5rem}
.visual .control_box button {border:1px solid #fff; border-radius:100%; color:#fff; width:5.5rem; height:5.5rem; line-height:5.5rem; margin:0 0.5rem; overflow:hidden}
.visual .control_box button:before {color:#fff; font-size:2.2rem}
.visual .control_box .prev:before {content:''}
.visual .control_box .next:before {content:''}
@media (hover: hover) {
	.visual .desc .btn:hover i {transform:translateX(0.5rem)}
}

/*recent news*/
#section1 .board {display:block; overflow:hidden; z-index:1}
#section1 .latest {display:flex; position:relative; width:100%; padding-left:25rem; margin-top:-3rem}
#section1 .label {display:block; margin-right:3rem; position:relative; z-index:1}
#section1 .label a {color:#888; display:block; font-size:2rem; font-weight:400; position:relative; line-height:1; transition:all .3s}
#section1 .label a:after {content:''; background-color:#0077D4; width:0; height:1px; position:absolute; left:0; bottom:0; transition:all .3s}
#section1 .conBox {opacity:0; visibility:hidden}
#section1 .conBox .list {position:absolute; left:0; top:6rem; width:calc(100% + 3rem); display:flex; flex-wrap:wrap; justify-content:space-between}
#section1 .conBox .item {width:calc(33.333% - 3rem); height:100%; margin-right:3rem; overflow:hidden}
#section1 .conBox a {display:block}
#section1 .conBox .img {width:100%; height:clamp(20rem, 20vw, 23rem); border-radius:1rem; overflow:hidden; position:relative}
#section1 .conBox .img img {position:absolute; left:50%; top:0; transform:translateX(-50%); min-width:100%; min-height:100%; object-fit:cover}
#section1 .conBox .date {color:#666; display:block; font-size:1.4rem; font-weight:400; margin-top:2rem}
#section1 .conBox .tt {color:#212121; display:block; font-size:1.8rem; font-weight:700; line-height:1.4; margin-top:1rem; word-break:keep-all}
#section1 .more {display:none; top:-0.5rem}
#section1 .control_box {display:none; position:absolute; right:10rem; top:-0.7rem}
#section1 .slick-list {width:100%; margin-right:-3rem}
#section1 .slick-slide {margin-right:3rem}
#section1 .slick-dots {display:none !important}
#section1 .blank {color:#888}
#section1 .item {display:none}
#section1 .slick-slide .item {display:block}
/*active*/
#section1 .group.active .conBox {opacity:1; visibility:visible; height:clamp(37rem, 21.875vw, 40rem)}
#section1 .group.active .more {display:block}
#section1 .group.active .label a {color:#0077D4; font-weight:700}
#section1 .group.active .label a:after {width:100%}
#section1 .group.active .conBox .blank {position:absolute; left:50%; top:6rem; transform:translateX(-50%)}
#section1 .group.active .control_box {display:block}
@media (hover: hover) {
	#section1 .label a:hover {color:#0077D4}
	#section1 .conBox a:hover .tt {text-decoration:underline}
	#section1 .more:hover {border-color:#0077D4; color:#0077D4}
}


/*what we do*/
#section2 {background-color:#F2F8FD; min-height:57.5rem}
#section2 h2 {color:#0077D4; font-size:2rem; position:absolute; left:0}
#section2 .list {display:flex; justify-content:space-between; width:100%}
#section2 .desc {width:50%; padding-right:8rem; padding-top:7rem; word-break:keep-all}
#section2 .desc .tt {color:#212121; display:block; font-size:3.6rem; font-weight:700; line-height:1.2}
#section2 .desc .con {color:#212121; display:block; font-size:1.8rem; font-weight:400; line-height:1.6; margin-top:2.5rem}
#section2 .desc .btn {background-color:#0077D4; border-radius:100rem; color:#E8F4FF; display:flex; justify-content:space-between; align-items:center; font-size:1.6rem; width:16rem; height:4.5rem; padding:0 2rem 0 2.5rem; margin-top:5rem}
#section2 .desc .btn i {transition:all .3s}
#section2 .img {width:calc(50% - 1.5rem); max-width:68.5rem; height:40rem; border-radius:1rem; overflow:hidden; position:relative}
#section2 .img div {height:100%}
#section2 .img img {display:block; width:100%; height:100%; object-fit:cover}
#section2 .slick-dots {position:absolute; left:12.5rem; top:-0.3rem}
#section2 .slick-dots li {margin:0 1.5rem}
#section2 .slick-dots a {color:#212121; cursor:pointer; display:block; font-size:1.6rem; font-weight:500; opacity:0.5; line-height:1; position:relative; transition:all .3s}
#section2 .slick-dots a:after {content:''; background-color:#0077D4; width:0; height:1px; position:absolute; left:0; bottom:0; transition:all .3s}
#section2 .slick-dots .slick-active a {color:#0077D4; opacity:1}
#section2 .slick-dots .slick-active a:after {width:100%}
#section2 .slick-arrow {display:none}
#section2 .control_box {position:absolute; left:33rem; top:6.5rem}
#section2 .control_box .paging,
#section2 .control_box .slick-arrow {display:none !important}
@media (hover: hover) {
	#section2 .desc .btn:hover i {transform:translateX(0.5rem)}
}


/*explore*/
#section3 .contents h2 {margin-bottom:3.5rem; width:100%}
#section3 .group {display:grid; grid-gap:3rem; grid-template-columns:1fr 0.5fr 0.5fr; width:100%}
#section3 .item a {display:block}
#section3 .item .img {display:block; width:100%; height:clamp(32rem, 19.8vw, 38rem); overflow:hidden; position:relative}
#section3 .item .img img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; object-fit:cover}
#section3 .item .cate {background-color:#18191B; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:500; margin-top:2rem; min-width:10rem; height:4rem; padding:0.5rem 2rem; text-align:center}
#section3 .item .tt {color:#212121; display:block; font-size:1.8rem; font-weight:700; line-height:1.4; margin-top:1.5rem}
@media (hover: hover) {
	#section3 .item a:hover .tt {text-decoration:underline}
}

/*networks*/
#section4 .contents h2 {margin-bottom:3.5rem}
#section4 .network {display:block; padding:0 0 8rem}
#section4 .network .list {display:flex; flex-wrap:wrap; width:calc(100% + 3rem); gap:3rem}
#section4 .network .item {background-color:#ECF1FB; border-radius:1rem; width:calc(25% - 3rem); padding:3rem 3rem 9.5rem; position:relative}
#section4 .network .tt {color:#212121; display:block; font-size:1.8rem; font-weight:500; line-height:1.4; margin-bottom:2rem; position:relative; z-index:1}
#section4 .network .tt span {display:block}
#section4 .network .num {color:#212121; display:block; font-size:6rem; font-weight:500; line-height:1.2; position:absolute; right:3rem; bottom:3rem}