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

/*비주얼*/
.visual {position:relative; width:100%; height:86rem}
.visual .desc {max-width:160rem; width:calc(100% - 4rem); margin:0 auto; padding-top:21rem; position:absolute; left:50%; transform:translateX(-50%); z-index:1}
.visual .desc .title {color:#182346; display:block; font-size:6rem; font-weight:normal; line-height:1.2; position:relative}
.visual .desc .title:before {content:''; background:url('/kor/img/main/symbol.png') no-repeat center; background-size:contain; position:absolute; left:0; top:-12rem; width:57.7rem; height:30.2rem; z-index:-1}
.visual .desc .title span {color:#317bb5; display:block}
.visual .desc .txt {color:#333; font-size:1.8rem; max-width:47rem; margin:1rem 0 0 4px; word-break:keep-all}
.visual .desc .btn {color:#333; display:inline-block; font-size:1.8rem; margin-top:3rem; position:relative; z-index:1; transition:all .3s}
.visual .desc .btn:after {content:''; background:linear-gradient(130deg, #b1569c, #009ed7); border-radius:100rem; width:5rem; height:5rem; position:absolute; left:0; top:0; z-index:-1; transition:all .3s}
.visual .desc .btn i {color:#fff; display:inline-block; font-size:2.4rem; width:5rem; height:5rem; line-height:5rem; margin-right:1rem; text-align:center; vertical-align:-3px;  transition:all .3s}
.visual .list {width:117rem; height:86rem; padding:7.5rem 4rem 0 7rem; position:absolute; right:0; bottom:0; text-align:right}
.visual .list:after {content:''; background:url('/kor/img/main/visual-bg.png') no-repeat right bottom; background-size:contain; width:100%; height:100%; position:absolute; right:0; bottom:0; z-index:-1}
.visual .list .img:first-child {display:inline-block !important}
.visual .list .img {display:none !important; overflow:hidden; position:absolute; right:0; bottom:0}
.visual .img img {display:block}
.visual .slick-list {height:100%}
.visual .slick-track {height:100%}
.visual .slick-slide {height:100%}

.visual .slick-dots {overflow:hidden; visibility:hidden}
.visual .control_box {max-width:160rem; width:calc(100% - 4rem); position:absolute; left:50%; bottom:17%; transform:translate(-50%, -50%); text-align:left}
.visual .control_box .dots {display:inline-block; margin-right:2rem}
.visual .control_box .dots .item {color:#333; opacity:0.5; margin-right:2rem; position:relative; transition:all .3s}
.visual .control_box .dots .item:after {content:''; background-color:#009ed7; width:0; height:2px; position:absolute; left:0; bottom:-2px; transition:all .3s}
.visual .control_box .dots .item.slick-active {opacity:1}
.visual .control_box .dots .item.slick-active:after {width:100%}
.visual .control_box .paging {display:none}
.visual .control_box .control {margin:0 1rem}

@media screen and (min-width:1024px) {
	/*효과*/
	.visual .desc .btn:hover {color:#fff}
	.visual .desc .btn:hover:after {width:calc(100% + 2rem)}
	.visual .desc .btn:hover i {margin:0 0.5rem}
	.visual .control_box .dots .item:hover {opacity:1}
}

/*공통*/
.section {position:relative}
.section .contents {display:flex; flex-wrap:wrap; justify-content:space-between; max-width:140rem; width:calc(100% - 4rem); margin:0 auto}
.section h3 .title {color:#182346; display:inline-block; font-size:6rem; font-weight:normal; line-height:1.2; position:relative; z-index:1}
.section h3 .title:after {content:''; background:url('/kor/img/main/symbol.png') no-repeat center; background-size:100%; width:11rem; height:5.5rem; position:absolute; right:-5rem; top:-2rem; z-index:-1}
.section h3 small {color:#777; display:block; font-size:1.6rem; font-weight:normal; line-height:1.6}
.section h3 .more {background-color:#182346; border-radius:100rem; color:#fff; display:inline-block; font-size:2rem; font-weight:normal; margin-top:3.5rem; min-width:22.5rem; height:5rem; padding:1rem 2rem; text-align:center}
.section h3 .more i {font-size:2.4rem; vertical-align:-3px; transition:all .3s}
.section .xi-new {color:#b3549b; font-size:4rem}

@media screen and (min-width:1024px) {
	/*효과*/
	.section h3 .more:hover i {margin-left:1rem}
}

/*사업영역*/
.biz {background-color:#edf7ff; padding:9.5rem 0; text-align:center}
.biz h3 {width:100%}
.biz h3 .title {margin-left:-2rem}
.biz .flex-box {width:100%}
.biz .flex-box .list {display:flex; flex-wrap:wrap; width:100%}
.biz .flex-box .list li {color:#999; font-size:1.8rem; width:25%; margin:9rem 0 0 0; position:relative; text-align:center; line-height:1.4}
.biz .flex-box .list li a {display:block; padding:0 2rem; word-break:keep-all}
.biz .flex-box .list li i {display:block; width:12rem; margin:0 auto; transition:all .3s}
.biz .flex-box .list li strong {color:#000; display:block; font-size:2rem; font-weight:normal}
@media screen and (min-width:1024px) {
	/*효과*/
	.biz .flex-box .list a:hover strong {color:#1e98d3}
	.biz .flex-box .list a:hover i {transform:rotateY(180deg)}
}

@media screen and (max-width:1024px) {

	.biz .flex-box .list li {width:33.3%}
}

@media screen and (max-width:767px) {

	.biz .flex-box .list li {width:50%}
	.biz .flex-box .list li i {width:9rem}
}


/*알림마당*/
.news {padding:20rem 0}
.news .group {width:calc(73.215% + 5rem); max-width:102.5rem; padding-left:5rem; display:flex; flex-wrap:wrap; justify-content:space-between}
.news .group .label {color:#000; font-size:3rem; font-weight:normal; margin-bottom:3.5rem}
.news .board {width:100%; margin-bottom:9rem}
.news .board a {display:block; position:relative; padding-right:12rem}
.news .board .title {color:#333; display:inline-block; font-size:2.4rem; font-weight:normal; line-height:1.4; position:relative}
.news .board .title:after {content:''; width:0; height:1px; background-color:#333; position:absolute; left:0; bottom:0; transition:all .3s}
.news .board .xi-new {position:absolute; left:-5rem; top:-1rem}
.news .board .desc {color:#777; display:none; font-size:1.6rem; line-height:2; margin:1rem 0 4.5rem; word-break:keep-all}
.news .board .date {color:#777; font-size:1.4rem; position:absolute; right:0; top:0}
.news .board li + li {margin-top:1.5rem}
.news .board li:first-child .desc {display:block}

.gallery {width:calc(66.666% - 5rem); margin-right:5rem; position:relative}
.gallery .list {display:flex; flex-wrap:wrap; width:calc(100% + 5rem)}
.gallery .list li {margin-right:5rem; width:calc(50% - 5rem); height:28rem}
.gallery .list a {background-color:#fff; border-radius:2rem; box-shadow:0 0 10px rgba(0,0,0,0.15); display:block; width:100%; height:100%; overflow:hidden}
.gallery .list .img {height:21rem; overflow:hidden; position:relative}
.gallery .list .img:before {position: absolute; left: 0; top: 50%; width: 100%; margin-top: -1rem; font-family: 'xeicon'; font-size: 3.2rem; content: ''; color:#fff; text-align: center; line-height: 0; opacity: 0; transform: rotate(180deg); z-index:1; transition:all .3s}
.gallery .list .img:after {position: absolute; left: 0; top: 50%; width: 100%; margin-top: 1rem; font-weight:500; content: '자세히 보기'; color:#fff; text-align: center; opacity: 0; transition:all .3s}
.gallery .list .img img {position:absolute; left:50%; top:0; transform:translateX(-50%); min-height:100%; object-fit:cover}
.gallery .list .title {color:#333; display:block; font-size:1.8rem; font-weight:normal; padding:2rem 3rem; width:99.9%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gallery .list .desc,
.gallery .list .date {display:none}
.gallery .more {background-color:#182346; border-radius:100%; color:#fff; font-size:2.4rem; position:absolute; right:0; top:0.5rem; width:3.5rem; height:3.5rem; line-height:3.5rem; text-align:center; overflow:hidden} 
.gallery .more i {display:block; width:100%; height:100%; line-height:inherit; transition:all .3s}

.sns {width:calc(33.333% - 5rem)}
.sns .list {background:linear-gradient(130deg, #ddcfe6, #b2e1f5); box-shadow:0 0 10px rgba(0,0,0,0.15); border-radius:2rem; height:28rem; overflow:hidden; padding:4rem 2.5rem; display:flex; flex-wrap:wrap; width:100%}
.sns .list li {display:flex; align-items:center; height:50%; padding:0 1rem; margin-bottom:1.5rem}
.sns .list a {color:#333; display:block; font-size:1.8rem; text-align:center}
.sns .list i {border-radius:100%; box-shadow:3px 3px 0 rgba(0,0,0,0.15); display:inline-block; width:6rem; height:6rem; margin:0 2rem 0.5rem 0; transition:all .3s}

@media screen and (min-width:1024px) {
	/*효과*/
	.news .board a:hover .title:after {width:100%}
	.gallery .list a:focus .img,
	.gallery .list a:hover .img {background-color:#000; transition:all .3s}
	.gallery .list a:focus .img:before,
	.gallery .list a:hover .img:before,
	.gallery .list a:focus .img:after,
	.gallery .list a:hover .img:after {opacity:1; transform:rotate(0); transition:all 0.4s 0.1s}
	.gallery .list a:focus .img img,
	.gallery .list a:hover .img img {opacity:0.6; transition:all .3s}
	.gallery .more:hover i {transform:rotate(180deg)}
	.sns .list a:hover i{transform:translateY(-5px)}
}

/*공유 세미나실*/
.seminar {padding-bottom:17rem; position:relative}
.seminar:after {content:''; background:url('/kor/img/main/seminar.jpg') no-repeat; background-size:contain; width:83.5rem; height:96rem; position:absolute; left:0; bottom:11.5rem; z-index:-1}
.seminar .contents {justify-content:right}
.seminar h3 {width:100%; text-align:right; word-break:keep-all}
.seminar .info {display:flex; justify-content:space-between; width:100%; max-width:85rem; margin-top:13.5rem}
.seminar .info li {text-align:center; width:33.333%}
.seminar .info i {border-radius:100%; display:block; width:13rem; height:13rem; line-height:13rem; margin:0 auto 3rem; text-align:center; overflow:hidden}
.seminar .info .title {color:#333; display:block; font-size:1.8rem; font-weight:normal; margin-bottom:0.5rem}
.seminar .info .desc {color:#777; display:block; font-size:1.6rem; line-height:1.4}
.seminar .info01 i {background-color:#327cb5}
.seminar .info02 i {background-color:#5ab8d0}
.seminar .info03 i {background-color:#7e8dda}