@charset "utf-8";

/* ====================================================================================================================================================== */
/* 메인 [S] { */
	.main #container {position:fixed;top:0;left:0;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;width:100%;height:100%;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: 100%;
		height: calc(var(--vh, 1vh) * 100);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
	}

	.video-background video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: calc(var(--vh, 1vh) * 100);
		transform: translate(-50%, -50%);
		object-fit: cover;
	}
	.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;transform:translateX(100%);transition:all .45s .0s ease-in-out;/*opacity:0;visibility:hidden;*/}
	#ProgressBar span {display:block;width:100%;height:0;background-color:rgba(255,255,255,.8);transition:all .1s .0s ease-in-out;}
	#ProgressBar.show {transform:translateX(0);/*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 {}
	.main #section1 .swiper-container {position:relative;width:100%;height:100%;overflow:hidden;transition:all .45s .0s ease-in-out;}
	.main #section1 .swiper-container .video-background,
	.main #section1 .swiper-container .img-background {position:absolute;bottom:0;left:0;width:100%;height:0;transform:scale(.92);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-34);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-16);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 {}
	.main #section2 .inner {flex-direction:column;gap:9rem;height:auto;}
	.main #section2 .text-area {padding-top:9rem;}
	.main #section2 .text-area h2 {color:#fff;font-size:var(--f-size-30);font-weight:600;text-align:center;}
	.main #section2 .text-area p {color:rgba(255,255,255,.64);font-size:var(--f-size-16);text-align:center;margin-top:1.4rem;}
	.main #section2 ul {width:100%;display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows: repeat(4, auto);gap:1.2rem;padding-bottom:12.4rem;}
	.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/m_image/main/link-ico.svg') no-repeat center center/cover;}
	.main #section2 ul li:nth-child(3):before {background:url('/html/aw_img/m_image/main/link-ico-gray.svg') no-repeat center center/cover;}
	.main #section2 ul li figure {position:absolute;bottom:1rem;right:1rem;width:6rem;height:6rem;}
	.main #section2 ul li a {position:relative;display:block;width:100%;height:15.2rem;padding:3.2rem 2.4rem;color:#fff;font-size:var(--f-size-18);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:1;grid-row:2;}
	.main #section2 ul li:nth-child(3) {background-color:rgba(255,255,255,.9);grid-column:2;grid-row:2;}
	.main #section2 ul li:nth-child(4) {background-color:rgba(46,70,114,1);grid-column:1;grid-row:3;}
	.main #section2 ul li:nth-child(5) {background-color:rgba(41,180,255,.8);grid-column:2;grid-row:3;}
	.main #section2 ul li:nth-child(6) {background-color:rgba(73,186,227,.8);grid-column:2;grid-row:4;}
	.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 {}
	
	/* SECTION3 : 사업영역 */
	.main #section3 {}
	.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 {width:100%;height:100%;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap {left:50%;transform:translate(-50%,0);width:100%;padding:8rem 2rem 14rem;display:flex;flex-direction:column;justify-content:start;gap:2rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .text-area {display:flex;flex-direction:column;gap:.8rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .text-area p {color:#fff;font-size:var(--f-size-18);font-weight:600;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .text-area h2 {color:#fff;font-size:var(--f-size-30);line-height:1.1;font-weight:700;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area {display:flex;flex-direction:column;gap:.6rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .service {background-color:#fff;border-radius:2.4rem;padding:1.6rem 2.4rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .service h4 {color:var(--primary-color);font-size:var(--f-size-20);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-14);margin-top:.8rem;word-break:break-all;}
	.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-14);line-height:3.2rem;border:1px solid var(--primary-color);border-radius:3.2rem;padding:0 4rem 0 2.7rem;margin-top:1rem;background:url('/html/aw_img/m_image/main/ico-arrow.svg') no-repeat right 1rem center/3rem 3rem;}
	.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:1.6rem 2.4rem;display:flex;flex-direction:column;gap:.8rem;}
	.main #section3 .swiper-container .swiper-wrapper .swiper-slide .conts-wrap .explain-area .utradehub figure img {max-height:2.7rem;}
	.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-14);font-weight:300;word-break:break-all;}
	.main #section3 .swiper-container .swiper-pagination {position:absolute;bottom:15%;left:50%;transform:translate(-50%,0);width:calc(100% - 4rem);height:.4rem;display:flex;text-align:left;}
	.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-12);font-weight:600;text-align:center;margin-top:1rem;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;width:100%;margin-top:9rem;}
	.main #section4 .mainNews .m-title {position:relative;z-index:2;}
	.main #section4 .mainNews .m-title .tit {color:var(--primary-color);font-size:var(--f-size-30);font-weight:700;}
	.main #section4 .mainNews .m-title .txt {color:var(--primary-color);font-size:var(--f-size-16);}
	.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 4rem 0 2.7rem;margin-top:2rem;background:var(--primary-color) url('/html/aw_img/m_image/main/ico-arrow-white.svg') no-repeat right 1rem center/3rem 3rem;}
	.main #section4 .mainNews .mainNewsSwiper {/*position:relative;*/margin-top:4rem;width:24rem;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper {display:flex;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-wrapper .swiper-slide {flex-shrink:0;width:100%;}
	.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-20);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:9.7rem;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-controll {position:absolute;top:7.4rem;right:0;display:flex;gap:1.6rem;justify-content:end;margin-top:1rem;}
	.main #section4 .mainNews .mainNewsSwiper .swiper-controll [class^="swiper-button"] {width:4.4rem;height:4.4rem;background:url('/html/aw_img/m_image/main/ico-arrow.svg') no-repeat center center;border:1px solid var(--primary-color);border-radius:50%;margin-top:0;}
	
	.main #section4 .board {width:100%;display:grid;grid-template-columns:1fr;gap:9.8rem;padding:9.8rem 0 8rem;}
	.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-30);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 4rem 0 2.7rem;margin-top:2.8rem;background:var(--primary-color) url('/html/aw_img/m_image/main/ico-arrow-white.svg') no-repeat right 1rem center/3rem 3rem;}
	.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:grid;grid-template-columns:1fr;gap:1.2rem;padding:2.6rem 0;border-bottom:1px solid #DAE1EA;}
	.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;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
	.main #section4 .board .list ul li dd {color:#555;font-size:var(--f-size-16);word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
	.main #section4 .board .list ul li span {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:6rem 0 9rem;}
	.main #section4 .link-area .inner {}
	.main #section4 .link-area .direct {display:grid;grid-template-columns:1fr;gap:1.2rem;width:100%;}
	.main #section4 .link-area .direct li {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 4rem;z-index:1;}
	.main #section4 .link-area .direct li figure {position:absolute;top:50%;right:2rem;transform:translate(0,-50%);}
	
/* } 메인 [E] */
/* ====================================================================================================================================================== */
/* ====================================================================================================================================================== */
/* 서브 [S] { */


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