@charset "utf-8";

/* ====================================================================================================================================================== */
/* 메인 [S] { */
	.main #container {max-width:100vw;width:100%;height:100%;overflow:hidden;}
	.main #sBody {width:100%;height:100%;transition:transform .55s ease-in-out;}
	.main article {position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
	.main article .inner {position:relative;max-width:148rem;width:100%;height:100%;margin:0 auto;padding:0 2rem;display:flex;justify-content:center;align-items:center;}
	.main article.scrollable {}
	.main article.scrollable .scrollable-wrap {display:flex;flex-direction:column;align-items:flex-start;overflow-y:auto;overflow-x:hidden;width:100%;height:100%;scrollbar-width:none;}
	.main article.scrollable .scrollable-wrap::-webkit-scrollbar {display:none;}
	.main article.scrollable .scrollable-wrap .scrollable-contents {width:100%;}
	
	.video-background,
	.img-background {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
	}

	.video-background video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: calc(100% + 4rem);
		min-height: calc(100% + 4rem);
		width: auto;
		height: auto;
		transform: translate(-50%, -50%);
		object-fit: cover;
		z-index: 0;
		will-change: transform;
		transform-style: preserve-3d;
	}
	.video-background .conts-wrap,
	.img-background .conts-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.main .section.active .video-background {overflow:hidden;}
	.main .section.active .video-background video {min-width:calc(100% + 2rem);min-height:calc(100% + 2rem);}
	.swiper-horizontal>.swiper-pagination-bullets,
	.swiper-pagination-bullets.swiper-pagination-horizontal,
	.swiper-pagination-custom, .swiper-pagination-fraction {width:auto;}
	.swiper-button-next, .swiper-button-prev {position:initial;text-indent:-500%;overflow:hidden;}
	.swiper-button-prev{transform:rotate(180deg);}
	.swiper-button-next:after, .swiper-button-prev:after {content:none;}
	
	/* MAIN : PROGRESS BAR */
	#ProgressBar {position:fixed;top:0;right:0;width:.6rem;height:100%;background-color:rgba(0,0,0,.6);padding:.3rem .2rem;overflow:hidden;/*opacity:0;visibility:hidden;*/}
	#ProgressBar span {display:block;width:100%;height:0;background-color:rgba(255,255,255,.8);transition:all .35s .0s ease-in-out;}
	#ProgressBar.show {opacity:1;visibility:visible;}
	
	/* MAIN : SCROLL */
	#scroll-guide {position:fixed;bottom:-10rem;left:50%;transform:translate(-50%,0);z-index:1;}
	#scroll-guide em {color:#fff;font-size:var(--f-size-14);font-style:normal;}
	#scroll-guide em:before {content:"";position:absolute;bottom:calc(100% + 1rem);left:50%;transform:translate(-50%,0);width:1px;height:2.2rem;background-color:#fff;}
	#scroll-guide em:after {
		content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%,0);width:.5rem;height:.9rem;background-color:#fff;border-radius:.3rem;
		animation-name: scroll-bounce;
		animation-duration: 2.25s;
		animation-iteration-count: infinite;
	}
	@keyframes scroll-bounce {
		0% {bottom:calc(100% + 2.45rem);}
		80% {bottom:calc(100% + .45rem);opacity:1;}
		100% {bottom:calc(100% + .45rem);opacity:0;}
	}
	
	
	/* SECTION1 : INTRO + COVER */
	.main #section1 .swiper-container {position:relative;display:block;width:100%;height:100%;overflow:hidden;transition:all .45s .0s ease-in-out;}
	.main #section1 .swiper-container .swiper-wrapper {font-size:0;line-height:0;display:flex;width:100%;height:100%;}
	.main #section1 .swiper-container .video-background,
	.main #section1 .swiper-container .img-background {position:absolute;bottom:0;left:0;width:100%;height:0;transform-origin:center bottom;border-radius:3.6rem 3.6rem 0 0;overflow:hidden;}
	.main #section1 .swiper-container .swiper-wrapper .conts-wrap {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4rem;width:100%;height:100%;padding:0 2rem;}
	.main #section1 .swiper-container .swiper-wrapper .conts-wrap h2 {opacity:0;}
	.main #section1 .swiper-container .swiper-wrapper .conts-wrap h2 span {display:block;color:#294476;font-size:var(--f-size-70);line-height:1.2;font-weight:700;text-align:center;transition:all .45s .0s ease-in-out;}
	.main #section1 .swiper-container .swiper-wrapper .conts-wrap p {opacity:0;visibility:hidden;color:rgba(255,255,255,.8);font-size:var(--f-size-26);letter-spacing:0;font-weight:500;text-align:center;}
		.main #section1 .swiper-container .swiper-wrapper .conts-wrap.active {}
		.main #section1 .swiper-container .swiper-wrapper .conts-wrap.active h2 span {color:#fff;text-shadow:0 0 .75rem rgba(0, 0, 0, 0.2);}
		.main #section1 .swiper-container .swiper-wrapper .conts-wrap.active p {text-shadow:0 0 .75rem rgba(0, 0, 0, 0.2);}
	
	.main #section1 .swiper-container .swiper-pagination {opacity:0;visibility:hidden;position:absolute;bottom:28%;left:50%;transform:translate(-50% ,0);display:flex;justify-content:center;gap:1.2rem;}
	.main #section1 .swiper-container .swiper-pagination.show {opacity:1;visibility:visible;}
	.main #section1 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:3.6rem;height:.2rem;background-color:rgba(0,37,79,.4);}
	.main #section1 .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:rgba(255,255,255,1);}
	
	
	/* SECTION2 : KTNET Service */
	.main #section2 {/*background-color:#173162;*/}
	.main #section2 .inner {flex-direction:column;}
	.main #section2 .text-area h2 {color:#fff;font-size:var(--f-size-64);font-weight:600;text-align:center;}
	.main #section2 .text-area p {color:rgba(255,255,255,.64);font-size:var(--f-size-20);text-align:center;margin-top:1.4rem;}
	.main #section2 ul {width:100%;display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows: repeat(2, auto);gap:1.6rem;margin-top:10rem;}
	.main #section2 ul li {position:relative;border-radius:2.4rem;}
	.main #section2 ul li:before {content:"";position:absolute;top:1.6rem;right:1.8rem;width:1.8rem;height:1.8rem;background:url('/html/aw_img/renew/images/main/link-ico.svg') no-repeat center center/cover;}
	.main #section2 ul li:nth-child(3):before {background:url('/html/aw_img/renew/images/main/link-ico-gray.svg') no-repeat center center/cover;}
	.main #section2 ul li figure {position:absolute;bottom:0;right:0;}
	.main #section2 ul li a {position:relative;display:block;width:100%;height:18rem;padding:3.5rem 4rem;color:#fff;font-size:var(--f-size-24);z-index:1;}
	.main #section2 ul li:nth-child(1) {background-color:rgba(37,64,162,.8);grid-column:1;grid-row:1;}
	.main #section2 ul li:nth-child(2) {background-color:rgba(37,107,206,.8);grid-column:2;grid-row:1;}
	.main #section2 ul li:nth-child(3) {background-color:rgba(255,255,255,.9);grid-column:3;grid-row:1;}
	.main #section2 ul li:nth-child(4) {background-color:rgba(46,70,114,1);grid-column:2;grid-row:2;}
	.main #section2 ul li:nth-child(5) {background-color:rgba(41,180,255,.8);grid-column:3;grid-row:2;}
	.main #section2 ul li:nth-child(6) {background-color:rgba(73,186,227,.8);grid-column:4;grid-row:2;}
	.main #section2 ul li:nth-child(3) a {color:#19418D;}
	.main #section2 .text-area h2,
	.main #section2 .text-area p,
	.main #section2 .text-area + ul li {opacity:0;}
	
	/* SECTION3 : 사업영역 */
	.main #section3 {/*background-color:#173162;*/}
	.main #section3 .swiper-container {position:relative;width:100%;height:100%;overflow:hidden;}
	.main #section3 .swiper-container .swiper-wrapper {width:100%;height:100%;font-size:0;line-height:0;display:flex;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide {min-width:100%;min-height:100%;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .img-background {z-index:1;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap {left:50%;transform:translate(-50%,0);max-width:148rem;width:100%;padding:13% 2rem 0;display:flex;justify-content:space-between;align-items:start;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .text-area {display:flex;flex-direction:column;gap:2.2rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .text-area p {color:#fff;font-size:var(--f-size-32);font-weight:500;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .text-area h2 {color:#fff;font-size:var(--f-size-80);line-height:1.1;font-weight:600;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area {width:48rem;display:flex;flex-direction:column;gap:2rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .service {background-color:#fff;border-radius:2.4rem;padding:3.8rem 5.2rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .service h4 {color:var(--primary-color);font-size:var(--f-size-32);font-weight:700;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .service p {color:var(--primary-color);font-size:var(--f-size-18);margin-top:1.4rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .service a.more {display:inline-block;color:var(--primary-color);font-size:var(--f-size-18);line-height:4.2rem;border:1px solid var(--primary-color);border-radius:4.2rem;padding:0 5rem 0 2.7rem;margin-top:2.8rem;background:url('/html/aw_img/renew/images/main/ico-arrow.svg') no-repeat right 1rem center;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .utradehub {background-color:rgba(3,78,162,.52);border-radius:2.4rem;padding:3.8rem 5.2rem;display:flex;flex-direction:column;gap:2.2rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .utradehub figure {}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .utradehub p {color:rgba(255,255,255,.7);font-size:var(--f-size-18);font-weight:300;}
	.main #section3 .swiper-container .swiper-pagination {position:absolute;bottom:15%;left:50%;transform:translate(-50%,0);max-width:148rem;width:100%;height:.4rem;display:flex;text-align:left;padding:0 2rem;}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet {flex:1;background-color:rgba(0,0,0,.4);}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet .timeline-bar {display:block;height:.4rem;}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet .timeline-bar .timeline-progress {height:100%;background-color:#fff;display:none;opacity:0;}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .timeline-bar .timeline-progress {display:block;opacity:1;}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet.disabled .timeline-bar .timeline-progress {width:100% !important;display:block;opacity:1;}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet h3 {color:rgba(255,255,255,.6);font-size:var(--f-size-24);font-weight:600;margin-top:4.4rem;cursor:pointer;}
	.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active h3 {color:rgba(255,255,255,1);}
	
	/* SECTION4 : KTNET News, 공지사항, 무역지식인, Footer 등 하단 모든 컨텐츠 */
	.main #section4 .inner {height:auto;}
	.main #section4 .mainNews {position:relative;display:flex;width:100%;margin-top:25rem;}
	.main #section4 .mainNews .m-title {position:relative;width:39.8rem;flex-shrink:0;z-index:2;}
	.main #section4 .mainNews .m-title .tit {color:var(--primary-color);font-size:var(--f-size-52);font-weight:700;}
	.main #section4 .mainNews .m-title .txt {color:var(--primary-color);font-size:var(--f-size-18);}
	.main #section4 .mainNews .m-title a.more {display:inline-block;color:#fff;font-size:var(--f-size-18);line-height:4.2rem;border:1px solid var(--primary-color);border-radius:4.2rem;padding:0 5rem 0 2.7rem;margin-top:2.8rem;background:var(--primary-color) url('/html/aw_img/renew/images/main/ico-arrow-white.svg') no-repeat right 1rem center;}
	.main #section4 .mainNews .mainNewsSwiper {width:auto;flex-grow:1;min-width:0;margin-right:calc((100vw - 1400px) / -2);overflow:hidden;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper {display:flex;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide {flex-shrink:0;width:36rem;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide > a {display:flex;flex-direction:column;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide .vTxtArea {margin-top:2.4rem;display:flex;flex-direction:column;gap:1.6rem;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide .vTxtArea .subject {font-size:var(--f-size-24);font-weight:600;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide .vTxtArea .date {color:#555;font-size:var(--f-size-18);}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide.last {width:calc(((100vw - 1400px) / 2 - 3.6rem) / 2);}
	.main #section4 .mainNews .mainNewsSwiper .swiper-controll {position:absolute;left:0;bottom:27%;display:flex;gap:1.6rem;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-controll [class^="swiper-button"] {width:4.4rem;height:4.4rem;background:url('/html/aw_img/renew/images/main/ico-arrow.svg') no-repeat center center;border:1px solid var(--primary-color);border-radius:50%;margin-top:0;}
	
	.main #section4 .board {display:grid;width:100%;grid-template-columns:repeat(2, 1fr);gap:13.7rem;padding:22rem 0 11rem;}
	.main #section4 .board .notice,
	.main #section4 .board .knowledge {flex:1 0;}
	.main #section4 .board .tit {display:flex;justify-content:space-between;align-items:end;}
	.main #section4 .board .tit h2 {color:var(--primary-color);font-size:var(--f-size-52);font-weight:700;}
	.main #section4 .board .tit a.more {display:inline-block;color:#fff;font-size:var(--f-size-18);line-height:4.2rem;border:1px solid var(--primary-color);border-radius:4.2rem;padding:0 5rem 0 2.7rem;margin-top:2.8rem;background:var(--primary-color) url('/html/aw_img/renew/images/main/ico-arrow-white.svg') no-repeat right 1rem center;}
	.main #section4 .board .list {margin-top:2.8rem;}
	.main #section4 .board .list ul {border-top:1px solid #DAE1EA;}
	.main #section4 .board .list ul li {position:relative;display:flex;padding:3.4rem 0;border-bottom:1px solid #DAE1EA;padding-right:10rem;}
	.main #section4 .board .list ul li dl {display:flex;flex-direction:column;gap:1.2rem;}
	.main #section4 .board .list ul li dt {font-size:var(--f-size-20);font-weight:600;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
	.main #section4 .board .list ul li dd {color:#555;font-size:var(--f-size-16);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
	.main #section4 .board .list ul li span {position:absolute;top:3.4rem;right:0;color:#555;font-size:var(--f-size-16);}
	.main #section4 .board .knowledge ul li {padding-right:0;}
	.main #section4 .board .knowledge ul li dt {color:var(--primary-color);font-size:var(--f-size-16);}
	.main #section4 .board .knowledge ul li dd {font-size:var(--f-size-20);font-weight:600;}
	
	.main #section4 .link-area {width:100%;background-color:#F5F5F5;padding:14rem 0 11rem;}
	.main #section4 .link-area .inner {flex-direction:column;gap:6rem;}
	.main #section4 .link-area .service {border-radius:2.4rem;background-color:rgba(3,78,162,.8);display:flex;width:100%;padding:7.8rem 0 7.4rem;}
	.main #section4 .link-area .service li {position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3rem;}
	.main #section4 .link-area .service li + li:before {content:"";position:absolute;top:2.3rem;left:0;width:1px;height:4.9rem;background-color:rgba(255,255,255,.4);}
	.main #section4 .link-area .service li .tit {color:#fff;font-size:var(--f-size-36);font-weight:700;text-align:center;}
	.main #section4 .link-area .service li .tit span {font-weight:300;}
	.main #section4 .link-area .service li a.more {display:inline-block;color:#fff;font-size:var(--f-size-18);line-height:4.2rem;border:1px solid #fff;border-radius:4.2rem;padding:0 5rem 0 2.7rem;margin-top:2.8rem;background:url('/html/aw_img/renew/images/main/ico-arrow-white.svg') no-repeat right 1rem center;}
	.main #section4 .link-area .direct {display:flex;gap:1.8rem;width:100%;}
	.main #section4 .link-area .direct li {flex:1;position:relative;background-color:#fff;border-radius:2.4rem;overflow:hidden;}
	.main #section4 .link-area .direct li a {position:relative;display:block;color:var(--primary-color);font-size:var(--f-size-22);line-height:11.4rem;height:11.4rem;padding:0 6rem;z-index:1;}
	.main #section4 .link-area .direct li figure {position:absolute;top:50%;right:4rem;transform:translate(0,-50%);}
	
	@media only screen and (max-width : 1440px){
		.main #section4 .mainNews .mainNewsSwiper {margin-right:-2rem;}
	}
	@media only screen and (max-width : 1200px){
		.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet h3 {font-size:var(--f-size-20);}
	}
	@media only screen and (max-width : 1024px){
		.main #section3 .swiper-container .swiper-pagination .swiper-pagination-bullet h3 {font-size:var(--f-size-18);}
	}
	
/* } 메인 [E] */
/* ====================================================================================================================================================== */
/* ====================================================================================================================================================== */
/* 서브 [S] { */
	/* 공통 */
		body:not(.main) #container {padding-top:9.6rem;}
		.sub-visual-area {max-width:148rem;width:100%;margin:0 auto;padding:0 2rem;display:grid;}
		.sub-visual-area figure {grid-area:1/1;border-radius:2.4rem 2.4rem 0 0;overflow:hidden;}
		.sub-visual-area figure img {transform:scale(1.4);animation:subCoverShrinkMotion 2.75s ease-in-out forwards;}
		.sub-visual-area .title-area {grid-area:1/1;position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
		.sub-visual-area .title-area h1 {color:#fff;font-size:6.4rem;font-weight:600;}

		@keyframes subCoverShrinkMotion {
			0% {transform:scale(1.25);}
			to {transform:scale(1);}
		}


/* } 서브 [E] */
/* ====================================================================================================================================================== */
/* ====================================================================================================================================================== */