@charset "utf-8";

/*-------------------------------------------------------------------
	분류그룹 : 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.section-wrap {display: block; padding: 0 75px;}
.sc-title-01 {display: block; position: relative; line-height: 1; font-weight: 700; font-size: 2rem; color: #000000;}
.sc-title-01 > span {display: inline-block; line-height: 1; font-weight: 300;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	.section-wrap {padding: 0 20px;}
	.sc-title-01 {font-size: 1.75rem;}
}
@media screen and (max-width: 800px) {
	.section-wrap {padding: 0 15px;}
}
@media screen and (max-width: 600px) {
	.sc-title-01 {font-size: 1.5rem;}
}




/*-------------------------------------------------------------------
	분류그룹 : section-01
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#section-01 {display: block;}
#section-01 .con-head {display: flex; height: 345px;}
#section-01 .con-head .l-con {display: block; position: relative; width: 32%; padding: 75px 40px 200px 75px; background: #313F5C;}
#section-01 .con-head .l-con .title {display: block; position: relative; line-height: 1; font-weight: 700; font-size: 2.25rem; color: #ffffff;}
#section-01 .con-head .l-con .title > strong {display: block; font-weight: 600; font-size: 1.5rem;}
#section-01 .con-head .l-con .title > strong > span {color: #f5bb7c;}
#section-01 .con-head .r-con {display: block; padding: 75px 40px 200px 40px; background: url(../images/main/bg_sc0101_02.png) no-repeat center; background-size: cover; flex-grow: 1;}
#section-01 .con-head .r-con .txt {display: block; font-weight: 700; font-size: 1.25rem; color: #000000;}
#section-01 .con-head .r-con .txt > span {color: #AD733E;}

#section-01 .con-body {display: block; position: relative; margin-top: -200px; padding-bottom: 40px;}
#section-01 .con-body .section-wrap .archive-slide {display: block; overflow: hidden; margin: 0 -20px; padding: 20px;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide {display: block;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; overflow: hidden; position: relative; height: 280px; background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: 0 0 0 0 rgba(0,0,0,0); -webkit-box-align: end; -moz-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item::after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-width: 3px; border-style: solid; border-color: transparent; box-sizing: border-box;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item.type-a {background-image: url(../images/main/bg_sc0102_01.png);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item.type-b {background-image: url(../images/main/bg_sc0102_02.png);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item.type-c {background-image: url(../images/main/bg_sc0102_03.png);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item.type-d {background-image: url(../images/main/bg_sc0102_04.png);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con {display: block; position: relative; width: 100%; padding: 30px;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: rgba(255,255,255,0);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .title {display: block; position: relative; margin-bottom: 10px; font-weight: 600; font-size: 1.125rem; color: #ffffff;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date {display: block; position: relative; color: #ffffff;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date::after {content:""; display: block; clear: both;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date .date-tit {display: block; float: left; min-width: 80px; font-weight: 600; font-size: 1rem;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date .date-txt {display: block; overflow: hidden; font-weight: 500; font-size: 1rem;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item {transition: box-shadow 0.3s, transform 0.4s;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus,
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item {box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.2); transform: translateY(-20px);}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item::after {transition: border 0.3s;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus::after,
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item::after {border-color: #1C3AA1;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con::before {transition: height 0.4s, background 0.4s;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus .item-con::before,
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item .item-con::before {height: 100%; background-color: #ffffff;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .title {transition: color 0.4s;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus .item-con .title,
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item .item-con .title {color: #000000;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date {transition: color 0.4s;}
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus .item-con .date,
#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item .item-con .date {color: #666666;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	#section-01 .con-head .l-con {padding: 75px 20px 200px 20px;}
	#section-01 .con-head .l-con .title {font-size: 2rem;}
	#section-01 .con-head .r-con {padding: 75px 20px 200px 20px;}

	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item {height: 260px;}
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con {padding: 25px 20px;}
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date .date-tit {min-width: 65px; font-size: 14px;}
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date .date-txt {font-size: 14px;}
}
@media screen and (max-width: 1200px) {
	#section-01 .con-head {height: auto;}
	#section-01 .con-head .l-con {width: 34%; padding: 50px 20px 200px 20px;}
	#section-01 .con-head .l-con::before {width: 240px; height: 233px;}
	#section-01 .con-head .l-con .title {margin-bottom: 20px; font-size: 1.75rem;}
	#section-01 .con-head .r-con {padding: 50px 20px 200px 20px;}
	#section-01 .con-head .r-con .txt-con {font-size: 1.25rem;}
}
@media screen and (max-width: 800px) {
	#section-01 .con-head {display: block;}
	#section-01 .con-head .l-con {overflow: hidden; width: auto; padding: 20px 15px;}
	#section-01 .con-head .l-con::before {top: -45px; bottom: auto; width: 150px; height: 146px;}
	#section-01 .con-head .l-con .title {margin-bottom: 0;}
	#section-01 .con-head .r-con {padding: 20px 15px 210px;}
	#section-01 .con-head .r-con .txt-con .em {padding: 10px 15px 0;}
	/* #section-01 .con-head .r-con .txt-con .em::before,
	#section-01 .con-head .r-con .txt-con .em::after {width: 15px; background-size: 10px;} */
	#section-01 .con-head .r-con .txt-con .txt {vertical-align: middle;}

	#section-01 .con-body {padding-bottom: 30px;}
	#section-01 .con-body .section-wrap .archive-slide {margin: 0 -15px; padding: 15px;}
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con {padding: 20px 15px;}

	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus,
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item {transform: translateY(-15px);}
}
@media screen and (max-width: 600px) {
	#section-01 .con-head .r-con .txt {margin-bottom: 0;}
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item:focus,
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide:hover .item {box-shadow: 0px 5px 8px 2px rgba(0,0,0,0.2); transform: none;}
}
@media screen and (max-width: 475px) {
	#section-01 .con-head .l-con .title {font-size: 1.5rem;}
	#section-01 .con-head .r-con .txt-con {font-size: 18px; text-align: center;}
	#section-01 .con-head .r-con .txt-con .em {font-size: 22px;}
	#section-01 .con-body .section-wrap .archive-slide .swiper-wrapper .swiper-slide .item .item-con .date .date-tit {float: none;}
}




/*-------------------------------------------------------------------
	분류그룹 : section-02
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#section-02 {display: block; padding: 60px 0; background-color: #F7F8FB;}
#section-02 .con-head {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#section-02 .con-head .l-con {display: block; flex-shrink: 0;}
#section-02 .con-head .l-con .sc-title-01 {padding-right: 55px;}
#section-02 .con-head .l-con .sc-title-01::before {content:""; position: absolute; bottom: 15px; right: 0; width: 46px; height: 46px; border-radius: 50%; background: #AD733E url(../images/common/i_hash.svg) no-repeat center;}
#section-02 .con-head .l-con .sc-title-01::after {content:""; position: absolute; bottom: 13px; right: 38px; border-width: 14px 7px 0 7px; border-style: solid; border-color: #AD733E transparent transparent transparent; transform: rotate(50deg);}

#section-02 .con-head .r-con {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-left: 30px; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
#section-02 .con-head .r-con .category-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -5px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#section-02 .con-head .r-con .category-list > li {display: block; padding: 5px;}

#section-02 .con-body {display: block; position: relative;}
#section-02 .con-body .timeline-box {display: block; overflow: hidden; position: relative; border: 1px solid #e9e9e9; background: #ffffff url(../images/main/bg_sc02.png) no-repeat; background-size: cover;}
#section-02 .con-body .timeline-box .timeline-slide {display: block; overflow: hidden; position: relative;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide {display: block; width: auto; min-width: 300px; padding: 25px 10px; border-right: 1px solid #e9e9e9;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide.swiper-slide-active {background-color: rgba(238, 238, 238, 0.3);}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-head .title {display: block; position: relative; margin-left:10px; padding: 10px 10px 20px 0; font-weight: 700; font-size: 1.25rem;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-head .title::before {content:""; position: absolute; top: 0; left: 0; width: 30px; height: 5px; border-radius: 5px; background: repeating-linear-gradient(90deg, #005DA9, #005DA9 50%, #AD733E 50%, #AD733E 100%);}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body {display: block; overflow-x: hidden; overflow-y: auto; height: 320px; padding: 0 10px;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body::-webkit-scrollbar {width: 10px; box-sizing: content-box;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body::-webkit-scrollbar-thumb {height: 30%; border-radius: 10px; background: rgba(173, 115, 62, 0.8);}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body::-webkit-scrollbar-track {padding: 0 5px; border-radius: 10px; background: #e4e4e4;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body .slide-list {display: block;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body .slide-list > li {display: block; margin-bottom: 10px;}
#section-02 .con-body .timeline-box .timeline-sldee .swiper-wrapper .swiper-slide .slide-body .slide-list > li:last-child {margin-bottom: 0;}
#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body .slide-list > li .sel-badge > label {max-width: 600px; word-break: break-all;}

#section-02 .con-body .slide-nav {display: block;}
#section-02 .con-body .slide-nav .btn-nav {position: absolute; top: calc(50% - 25px); z-index: 3; width: 50px; height: 50px; border-radius: 50%; background-color: #ffffff; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);}
#section-02 .con-body .slide-nav .btn-nav.btn-prev {left: -25px;}
#section-02 .con-body .slide-nav .btn-nav.btn-next {right: -25px;}
#section-02 .con-body .slide-nav .btn-nav::before {content:""; position: absolute; top: calc(50% - 6px); left: calc(50% - 3px); border-style: solid;}
#section-02 .con-body .slide-nav .btn-nav.btn-prev::before {border-width: 6px 6px 6px 0; border-color: transparent #003863 transparent transparent;}
#section-02 .con-body .slide-nav .btn-nav.btn-next::before {border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #003863;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#section-02 .con-body .slide-nav .btn-nav {transition: background 0.3s;}
#section-02 .con-body .slide-nav .btn-nav:focus,
#section-02 .con-body .slide-nav .btn-nav:hover {background-color: #AD733E;}
#section-02 .con-body .slide-nav .btn-nav::before {transition: border 0.3s;}
#section-02 .con-body .slide-nav .btn-nav.btn-prev:focus::before,
#section-02 .con-body .slide-nav .btn-nav.btn-prev:hover::before {border-color: transparent #ffffff transparent transparent;}
#section-02 .con-body .slide-nav .btn-nav.btn-next:focus::before,
#section-02 .con-body .slide-nav .btn-nav.btn-next:hover::before {border-color: transparent transparent transparent #ffffff;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	#section-02 .con-body .slide-nav .btn-nav {top: calc(50% - 20px); width: 40px; height: 40px;}
	#section-02 .con-body .slide-nav .btn-nav.btn-prev {left: -20px;}
	#section-02 .con-body .slide-nav .btn-nav.btn-next {right: -20px;}
}
@media screen and (max-width: 1400px) {
	#section-02 .con-head {display: block; margin-bottom: 25px;}
	#section-02 .con-head .l-con {margin-bottom: 15px;}
	#section-02 .con-head .l-con .sc-title-01 {display: inline-block;}
	#section-02 .con-head .r-con {display: block; overflow-x: auto; overflow-y: hidden; padding-left: 0;}
	#section-02 .con-head .r-con::-webkit-scrollbar {height: 5px; box-sizing: content-box;}
	#section-02 .con-head .r-con::-webkit-scrollbar-thumb {height: 30%; border-radius: 10px; background: #9e9e9e;}
	#section-02 .con-head .r-con::-webkit-scrollbar-track {padding: 0 5px; border-radius: 10px; background: #e4e4e4;}
	#section-02 .con-head .r-con .category-list {margin: 0; -webkit-box-lines: single; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
	#section-02 .con-head .r-con .category-list > li {max-width: 50%; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
	#section-02 .con-head .r-con .category-list > li .sel-badge {display: block; text-align: center;}
}
@media screen and (max-width: 800px) {
	#section-02 {padding: 45px 0;}
	#section-02 .con-head {margin-bottom: 20px;}
	#section-02 .con-head .l-con .sc-title-01 {padding-right: 45px;}
	#section-02 .con-head .l-con .sc-title-01::before {bottom: 5px; width: 38px; height: 38px;  background-size: 16px;}
	#section-02 .con-head .l-con .sc-title-01::after {bottom: 3px; right: 28px;}

	#section-02 .con-body .slide-nav .btn-nav.btn-prev {left: -15px;}
	#section-02 .con-body .slide-nav .btn-nav.btn-next {right: -15px;}
	#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body .slide-list > li .sel-badge > label {max-width: 300px;}
}
@media screen and (max-width: 475px) {
	#section-02 .con-head .r-con .category-list > li {max-width: 100%;}

	#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide {min-width: 0; width: 100%;}
	#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body {height: 280px;}
	#section-02 .con-body .timeline-box .timeline-slide .swiper-wrapper .swiper-slide .slide-body .slide-list > li .sel-badge > label {word-break: break-all;}
}




/*-------------------------------------------------------------------
	분류그룹 : section-03
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#section-03 {display: block; padding-bottom: 60px; background-color: #F7F8FB;}
#section-03 .con-head {display: block; margin-bottom: 30px;}
#section-03 .con-head .search-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 15px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#section-03 .con-head .search-wrap .l-con {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; overflow: hidden; padding-right: 20px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
#section-03 .con-head .search-wrap .l-con .sc-title-01 {padding-right: 50px; white-space: nowrap; flex-shrink: 0;}

#section-03 .con-head .search-wrap .l-con .selected-hash {display: block; overflow: hidden; position: relative; padding: 0 30px; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav {display: block;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav {display: block; position: absolute; top: 0; z-index: 3; width: 30px; height: 100%; border-radius: 4px; border: 1px solid transparent; background-color: transparent;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav::before {content:""; position: absolute; top: calc(50% - 6px); left: calc(50% - 3px); border-style: solid;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav.btn-prev {left: 0;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav.btn-prev::before {border-width: 6px 6px 6px 0; border-color: transparent #000000 transparent transparent;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav.btn-next {right: 0;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav.btn-next::before {border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #000000;}
#section-03 .con-head .search-wrap .l-con .selected-hash .keyword-slide {display: block; overflow: hidden;}
#section-03 .con-head .search-wrap .l-con .selected-hash .keyword-slide .swiper-wrapper .swiper-slide {width: auto; max-width: 100%;}

#section-03 .con-head .search-wrap .r-con {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;  flex-shrink: 0; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#section-03 .con-head .search-wrap .r-con .search-total {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; padding-left: 35px; min-height: 30px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#section-03 .con-head .search-wrap .r-con .search-total::before {content:""; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: #AD733E url(../images/common/i_hash.svg) no-repeat center; background-size: 14px;}
#section-03 .con-head .search-wrap .r-con .search-total .txt {display: block; font-weight: 400; font-size: 1rem;}
#section-03 .con-head .search-wrap .r-con .search-total .txt .total {font-weight: 700; color: #AD733E;}
#section-03 .con-head .search-wrap .r-con .search-total .txt .total > span {word-break: break-all;}
#section-03 .con-head .search-wrap .r-con .search-utils {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-left: 10px; flex-shrink: 0;}
#section-03 .con-head .search-wrap .r-con .search-utils .item {display: block;}
#section-03 .con-head .search-wrap .r-con .search-utils .item .sel {display: block; width: 100%; height: 45px;}
#section-03 .con-head .search-wrap .r-con .search-utils .item .btn-reset {display: block; width: 45px; height: 45px; padding: 0; background: #000000 url(../images/common/i_btn_reset.svg) no-repeat center;}

#section-03 .con-body {display: block;}
#section-03 .con-body .keyword-content {display: block;}
#section-03 .con-body .keyword-content .list-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 -20px; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#section-03 .con-body .keyword-content .list-wrap > li {display: block; width: 25%; margin-bottom: 40px; padding: 0 20px;}
#section-03 .con-body .keyword-content .list-wrap > li .item {display: block; overflow: hidden; position: relative; padding: 30px; border-radius: 5px; background-color: #ffffff;}
#section-03 .con-body .keyword-content .list-wrap > li .item::before {content:""; display: block; position: absolute; right: 15px; bottom: 10px; width: 10px; height: 10px; border-width: 5px; border-style: solid; border-color: transparent transparent #AD733E #AD733E; box-sizing: border-box;}
#section-03 .con-body .keyword-content .list-wrap > li .item::after {content:""; position: absolute; bottom: 10px; right: 25px; width: 15px; height: 3px; background-color: #AD733E;}
#section-03 .con-body .keyword-content .list-wrap > li .item .title {display: block; overflow: hidden; margin-bottom: 20px; line-height: 1; font-weight: 700; font-size: 1.125rem; color: #000000; white-space: nowrap; text-overflow: ellipsis;}
#section-03 .con-body .keyword-content .list-wrap > li .item .img-box {display: block; overflow: hidden; position: relative; height: 200px; margin-bottom: 20px; background-color: #333333;}
#section-03 .con-body .keyword-content .list-wrap > li .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover;}
#section-03 .con-body .keyword-content .list-wrap > li .item .img-box .category {display: block; position: absolute; bottom: 0; right: 0; min-width: 100px; height: 45px; padding: 0 10px; background-color: #AD733E; line-height: 45px; font-weight: 600; font-size: 1rem; text-align: center; color: #ffffff;}
#section-03 .con-body .keyword-content .list-wrap > li .item .info {display: block;}
#section-03 .con-body .keyword-content .list-wrap > li .item .info .date-info {display: block;}
#section-03 .con-body .keyword-content .list-wrap > li .item .info .date-info > li {display: block; margin-bottom: 5px;}
#section-03 .con-body .keyword-content .list-wrap > li .item .info .date-info > li:last-child {margin-bottom: 0;}
#section-03 .con-body .keyword-content .list-wrap > li .item .info .date-info > li .date-tit {display: block; float: left; min-width: 55px; font-weight: 600; font-size: 1rem; color: #000000;}
#section-03 .con-body .keyword-content .list-wrap > li .item .info .date-info > li .date-txt {display: block; overflow: hidden; font-size: 1rem; color: #666666;}
#section-03 .con-body .keyword-content .btn-more {display: block; width: 50px; height: 50px; margin: 0 auto; background: #000000 url(../images/main/i_btn_more_arr.svg) no-repeat center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav {transition: border 0.4s, background 0.4s;}
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav:focus,
#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav:hover {border-color: #e9e9e9; background-color: #ffffff;}

#section-03 .con-head .search-wrap .r-con .search-utils .item .btn-reset {transition: background 0.4s;}
#section-03 .con-head .search-wrap .r-con .search-utils .item .btn-reset:focus,
#section-03 .con-head .search-wrap .r-con .search-utils .item .btn-reset:hover {background-color: #20A089;}

#section-03 .con-body .keyword-content .list-wrap > li .item {transition: box-shadow 0.3s;}
#section-03 .con-body .keyword-content .list-wrap > li .item:focus,
#section-03 .con-body .keyword-content .list-wrap > li .item:hover {box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.1);}

#section-03 .con-body .keyword-content .list-wrap > li .item::before {transition: bottom 0.3s, right 0.3s, opacity 0.3s; opacity: 0;}
#section-03 .con-body .keyword-content .list-wrap > li .item:focus::before,
#section-03 .con-body .keyword-content .list-wrap > li .item:hover::before {right: 10px; opacity: 1;}
#section-03 .con-body .keyword-content .list-wrap > li .item::after {transition: right 0.3s, opacity 0.3s; opacity: 0;}
#section-03 .con-body .keyword-content .list-wrap > li .item:focus::after,
#section-03 .con-body .keyword-content .list-wrap > li .item:hover::after {right: 20px; opacity: 1;}

#section-03 .con-body .keyword-content .list-wrap > li .item .title {transition: color 0.3s;}
#section-03 .con-body .keyword-content .list-wrap > li .item:focus .title,
#section-03 .con-body .keyword-content .list-wrap > li .item:hover .title {color: #AD733E;}

#section-03 .con-body .keyword-content .btn-more {transition: background 0.3s, transform 0.3s;}
@media screen and (min-width: 601px) {
	#section-03 .con-body .keyword-content .btn-more:focus,
	#section-03 .con-body .keyword-content .btn-more:hover {background-color: #AD733E; transform: translateY(10px);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
/* ie 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#section-03 .con-body .keyword-content .list-wrap > li .item .img-box > img {position: absolute; top: 0; left: 50%; width: auto; max-width: none; height: 100%; transform: translateX(-50%);}
}

@media screen and (max-width: 1600px) {
	#section-03 .con-body .keyword-content .list-wrap {margin: 0 -10px;}
	#section-03 .con-body .keyword-content .list-wrap > li {margin-bottom: 20px; padding: 0 10px;}
	#section-03 .con-body .keyword-content .list-wrap > li .item {padding: 20px;}
	#section-03 .con-body .keyword-content .list-wrap > li .item .title {margin-bottom: 15px; font-size: 1.062rem;}
	#section-03 .con-body .keyword-content .list-wrap > li .item .img-box {margin-bottom: 15px;}
	#section-03 .con-body .keyword-content .list-wrap > li .item .img-box .category {min-width: 80px; height: 40px; line-height: 40px;}
}
@media screen and (max-width: 1400px) {
	#section-03 .con-head {position: relative;}
	#section-03 .con-head .search-wrap {display: block; margin-bottom: 0;}
	#section-03 .con-head .search-wrap .l-con {margin-bottom: 15px; padding-right: 0;}
	#section-03 .con-head .search-wrap .l-con .sc-title-01 {line-height: 40px;}
	#section-03 .con-head .search-wrap .r-con {-webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
	#section-03 .con-head .search-wrap .r-con .search-total {min-height: 40px;}
	#section-03 .con-head .search-wrap .r-con .search-total::before {top: 5px;}
	#section-03 .con-body .keyword-content .list-wrap > li {width: 50%;}
}
@media screen and (max-width: 800px) {
	#section-03 {padding-bottom: 45px;}
	#section-03 .con-head {margin-bottom: 25px;}
	#section-03 .con-head .search-wrap .l-con {display: block;}
	#section-03 .con-head .search-wrap .r-con .search-total {padding-left: 30px;}
	#section-03 .con-head .search-wrap .r-con .search-total::before {top: 7px; width: 26px; height: 26px; background-size: 12px;}
	#section-03 .con-head .search-wrap .r-con .search-utils .item .sel {height: 40px;}
	#section-03 .con-head .search-wrap .r-con .search-utils .item .btn-reset {width: 40px; height: 40px;}

	#section-03 .con-body .keyword-content .list-wrap {margin: 0 -7.5px;}
	#section-03 .con-body .keyword-content .list-wrap > li {margin-bottom: 15px; padding: 0 7.5px;}
	#section-03 .con-body .keyword-content .list-wrap > li .item {padding: 15px 15px 20px; border-radius: 15px;}
}
@media screen and (max-width: 600px) {
	#section-03 .con-body .keyword-content .list-wrap > li .item .img-box {height: 160px;}
	#section-03 .con-body .keyword-content .list-wrap > li .item .img-box .category {height: 30px; line-height: 30px;}

	#section-03 .con-body .keyword-content .btn-more:focus,
	#section-03 .con-body .keyword-content .btn-more:hover {background-color: #AD733E;}
}
@media screen and (max-width: 475px) {
	#section-03 .con-head .search-wrap .l-con {margin-bottom: 10px; padding-right: 0;}
	#section-03 .con-head .search-wrap .l-con .sc-title-01 {height: auto; margin-bottom: 15px; padding-right: 0; line-height: 1;}
	#section-03 .con-head .search-wrap .l-con .selected-hash {width: 100%; padding: 0 20px;}
	#section-03 .con-head .search-wrap .l-con .selected-hash .slide-nav .btn-nav {width: 20px;}
	#section-03 .con-head .search-wrap .l-con .selected-hash .keyword-slide .swiper-wrapper .swiper-slide .btn-badge {padding: 8px;}


	#section-03 .con-head .search-wrap .r-con {margin-bottom: 0; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
	#section-03 .con-head .search-wrap .r-con .search-total {margin-bottom: 10px; min-height: 30px;}
	#section-03 .con-head .search-wrap .r-con .search-total::before {top: 2px;}

	#section-03 .con-head .search-wrap .r-con .search-utils {width: 100%;}
	#section-03 .con-head .search-wrap .r-con .search-utils .item.type-long {-webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
	#section-03 .con-head .search-total {height: 30px; line-height: 30px;}
	#section-03 .con-head .search-total::before {bottom: 0;}

	#section-03 .con-body .keyword-content .list-wrap > li {width: 100%;}
	#section-03 .con-body .keyword-content .btn-more {width: 100%; height: 40px; border-radius: 4px;}
}




/*-------------------------------------------------------------------
	분류그룹 : section-04
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#section-04 {display: block; padding: 60px 0;}
#section-04 .tl-service {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; border-radius: 3px; background: #F4F5FF url(../images/main/img_timeline.png) no-repeat bottom right / 1700px;}
#section-04 .tl-service .con-head {display: block; position: relative; max-width: 320px; padding: 70px 50px 50px; -webkit-box-align: end; -moz-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#section-04 .tl-service .con-head::before {content:""; position: absolute; top: 0; left: 0; width: 120%; height: 100%; background-color: #F4F5FF; background: linear-gradient(90deg, rgba(244,245,255,1) 0%, rgba(244,245,255,0.9) 60%, rgba(244,245,255,0) 100%);}
#section-04 .tl-service .con-head .sc-title-01 {position: relative; margin-bottom: 20px;}
#section-04 .tl-service .con-head .txt {display: block; position: relative; color: #5C6C82;}

#section-04 .tl-service .con-body {padding: 50px; margin-left: auto;}
#section-04 .tl-service .con-body .btn-tl {display: block; overflow: hidden; position: relative; width: 400px; height: 200px; padding: 30px 30px 60px; border-top: 8px solid #AD733E; background-color: #ffffff; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);}
#section-04 .tl-service .con-body .btn-tl::before {content:""; position: absolute; top: 5px; right: 5px; width: 100px; height: 100px; background: url(../images/main/img_timeline_service.svg) no-repeat center;}
#section-04 .tl-service .con-body .btn-tl .tit {display: block; position: relative; font-weight: 700; font-size: 1.25rem; color: #003863;}
#section-04 .tl-service .con-body .btn-tl .more {display: block; position: absolute; bottom: 30px; right: 30px; height: 30px; padding-right: 40px; line-height: 30px; font-weight: 700; font-size: 1rem; color: #003863;}
#section-04 .tl-service .con-body .btn-tl .more .i {display: block; position: absolute; top: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #003863;}
#section-04 .tl-service .con-body .btn-tl .more .i::before {content:""; position: absolute; top: calc(50% - 1px); left: 25%; width: 50%; height: 2px; background-color: #ffffff;}
#section-04 .tl-service .con-body .btn-tl .more .i::after {content:""; position: absolute; top: 25%; left: calc(50% - 1px); width: 2px; height: 50%; background-color: #ffffff;}


/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#section-04 .tl-service .con-body .btn-tl {animation: trampoline 0.5s alternate-reverse infinite;}
#section-04 .tl-service .con-body .btn-tl::before {opacity: 0; transform: translateX(35px); transition: opacity 0.4s, transform 0.4s;}
#section-04 .tl-service .con-body .btn-tl:focus::before,
#section-04 .tl-service .con-body .btn-tl:hover::before {opacity: 0.3; transform: translateX(0);}

#section-04 .tl-service .con-body .btn-tl .more {transition: color 0.3s;}
#section-04 .tl-service .con-body .btn-tl:focus .more,
#section-04 .tl-service .con-body .btn-tl:hover .more {color: #AD733E;}
#section-04 .tl-service .con-body .btn-tl .more .i {transition: background 0.3s, transform 0.3s;}
#section-04 .tl-service .con-body .btn-tl:focus .more .i,
#section-04 .tl-service .con-body .btn-tl:hover .more .i {background-color: #AD733E; transform: rotate(180deg);}

@keyframes trampoline {
	0% {transform: translateY(0);}
	100% {transform: translateY(-10px);}
}


/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	#section-04 .tl-service .con-body .btn-tl {width: 360px; padding: 20px 20px 50px;}
	#section-04 .tl-service .con-body .btn-tl .more {bottom: 20px; right: 20px;}
}
@media screen and (max-width: 1200px) {
	#section-04 .tl-service {background-position: bottom -50px right;}
	#section-04 .tl-service .con-head {padding: 70px 30px 30px;}
	#section-04 .tl-service .con-body {padding: 30px;}
}
@media screen and (max-width: 1024px) {
	#section-04 .tl-service {background-position: bottom -90px right -80px;}
	#section-04 .tl-service .con-head {max-width: 240px;}
	#section-04 .tl-service .con-body .btn-tl {height: 160px;}
}
@media screen and (max-width: 800px) {
	#section-04 .tl-service .con-head {padding: 70px 20px 30px;}
	#section-04 .tl-service .con-body {padding: 30px 20px;}
	#section-04 .tl-service .con-body .btn-tl {width: 280px;}
}
@media screen and (max-width: 600px) {
	#section-04 .tl-service {display: block; background-position: top 20px right -20px; background-size: contain;}
	#section-04 .tl-service .con-head {max-width: none; padding: 30px 20px 10px;}
	#section-04 .tl-service .con-head::before {max-width: 300px;}
	#section-04 .tl-service .con-head .sc-title-01 {margin-bottom: 0;}
	#section-04 .tl-service .con-head .txt {display: none;}
	#section-04 .tl-service .con-body {padding: 20px;}
	#section-04 .tl-service .con-body .btn-tl {width: auto; height: 140px;}
	#section-04 .tl-service .con-body .btn-tl::before {width: 70px; height: 70px;}
}



/*-------------------------------------------------------------------
	분류그룹 : section-05
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#section-05 {display: block; padding-bottom: 60px;}
#section-05 .slide-area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding: 30px; border-radius: 10px; background-color: #F7F8FB; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#section-05 .slide-area .sc-title-01 {padding-right: 40px; font-size: 1.5rem; flex-shrink: 0;}
#section-05 .slide-area .slide-box {display: block; overflow: hidden; position: relative; padding: 0 50px; -webkit-box-flex: 1; -ms-flex: 1; flex-grow: 1;}
#section-05 .slide-area .slide-box .nav-box {display: block;}
#section-05 .slide-area .slide-box .nav-box .btn-nav {position: absolute; top: 0; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 4px; background-color: transparent; background-repeat: no-repeat; background-position: center;}
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-prev {left: 0;}
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-prev::before {content:""; position: absolute; top: calc(50% - 6px); left: calc(50% - 4px); width: 9px; height: 9px; border-width: 0 0 3px 3px; border-style: solid; border-color: #000000; transform: rotate(45deg);}
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-next {right: 0;}
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-next::before {content:""; position: absolute; top: calc(50% - 6px); right: calc(50% - 4px); width: 9px; height: 9px; border-width: 3px 3px 0 0; border-style: solid; border-color: #000000; transform: rotate(45deg);}
#section-05 .slide-area .slide-box .site-banner-slide {display: block; overflow: hidden;}
#section-05 .slide-area .slide-box .site-banner-slide .swiper-wrapper .swiper-slide {display: block; min-width: 16.666%; max-width: 100%; width: auto;}
#section-05 .slide-area .slide-box .site-banner-slide .swiper-wrapper .swiper-slide .item {display: block;}
#section-05 .slide-area .slide-box .site-banner-slide .swiper-wrapper .swiper-slide .item > img {display: block; width: auto; height: 40px; margin: 0 auto;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#section-05 .slide-area .slide-box .nav-box .btn-nav {transition: border 0.4s, background 0.4s;}
#section-05 .slide-area .slide-box .nav-box .btn-nav:focus,
#section-05 .slide-area .slide-box .nav-box .btn-nav:hover {border-color: #e9e9e9; background-color: #ffffff;}
#section-05 .slide-area .slide-box .nav-box .btn-nav::before {transition: border 0.4s;}
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-prev:focus::before,
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-prev:hover::before,
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-next:focus::before,
#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-next:hover::before {border-color: #AD733E;}

#section-05 .slide-area .slide-box .site-banner-slide .swiper-wrapper .swiper-slide .item:focus {position: relative; outline-color: transparent;}
#section-05 .slide-area .slide-box .site-banner-slide .swiper-wrapper .swiper-slide .item:focus::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #000000; box-sizing: border-box;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	#section-05 .slide-area {padding: 30px 20px;}
}
@media screen and (max-width: 1024px) {
	#section-05 .slide-area {display: block;}
	#section-05 .slide-area .sc-title-01 {margin-bottom: 15px; padding-right: 0;}
}
@media screen and (max-width: 800px) {
	#section-05 {padding-bottom: 45px;}
	#section-05 .slide-area {padding: 20px 15px;}
}
@media screen and (max-width: 600px) {
	#section-05 .slide-area .slide-box {padding: 0 45px;}
	#section-05 .slide-area .slide-box .site-banner-slide .swiper-wrapper .swiper-slide {width: 100%; min-width: 0;}
}
@media screen and (max-width: 425px) {
	#section-05 .slide-area {position: relative;}
	#section-05 .slide-area .sc-title-01 {height: 30px; line-height: 30px;}
	#section-05 .slide-area .slide-box {position: static; padding: 0;}
	#section-05 .slide-area .slide-box .nav-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; top: 25px; right: 15px;}
	#section-05 .slide-area .slide-box .nav-box .btn-nav {position: relative; top: auto; width: 30px; height: 30px;}
	#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-prev {left: auto;}
	#section-05 .slide-area .slide-box .nav-box .btn-nav.btn-next {right: auto;}
}