@charset "UTF-8"; 

/*
*   name : main
*	main과 관련된 요소들을 모아놓습니다.
*/

/*--------------------- 헤더 변경 ---------------------*/
#header {background:#fff;border-bottom:1px solid #eaeaea;}
#logo img {filter:none;}
.gnb-pc .mn_a1 span {color:var(--black-color);}
.header__mypage-btn span {color:var(--black-color);}
.header__login-btn span,
.header__logout-btn span {color:var(--black-color);}
.header__mypage-btn span:before,
.header__login-btn span:before,
.header__logout-btn span:before {filter:none;}
.allMenu-open-btn i {background:var(--black-color);}
.allMenu-open-btn i:nth-child(1),
.allMenu-open-btn i:nth-child(4),
.allMenu-open-btn i:nth-child(5),
.allMenu-open-btn i:nth-child(8),
.allMenu-open-btn i:nth-child(9) {background:var(--point-color);}

	@media screen and (min-width: 1200px)
	{
		/* hover */
		.allMenu-open-btn:hover i {background:var(--point-color);}
	}


/*--------------------- 메인 공통 ---------------------*/
.m-tit,
.m-tit span {font-family: 'TitilliumWeb';font-weight:500;font-size:4rem;}
.m-tit .point {color:var(--point-color);}

.m-container {overflow-x:hidden;}

	@media screen and (max-width:1200px)
	{
		.m-tit,
		.m-tit span {font-size:3rem;}
	}


/*--------------------- 메인 페이징 ---------------------*/
.m-paging {position:fixed;top:50%;right:4rem;z-index:200;margin-top:-10rem;}
.m-paging-lst li {text-align:right;position:Relative;padding-right:4rem;color:#d2d4dc;font-family: 'TitilliumWeb';font-weight:600;}
.m-paging-lst li + li {margin-top:2rem;}
.m-paging-lst .ico {content:"";display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;position:absolute;top:50%;right:0;margin-top:-1.2rem;}
.m-paging-lst .ico:before {content:"";display:block;width:0.6rem;height:0.6rem;border-radius:50%;background:#d2d4dc;}
.m-paging-lst .act {color:var(--point-color);color:var(--point-color);}
.m-paging-lst .act .ico {border:1px solid var(--point-color);border-radius:50%;}
.m-paging-lst .act .ico:before {background:var(--point-color);}

.m-scrollDown {margin-top:4rem;}
.m-scrollDown .ico {position:relative;display:block;width:1.5rem;height:2.5rem;border:2px solid #d2d4dc;border-radius:100px;margin-left:auto;margin-right:0.5rem;}
.m-scrollDown .ico:before {content:"";display:block;width:0.5rem;height:0.5rem;border-radius:50%;background:#d2d4dc;position:absolute;top:7px;left:50%;margin-left:-0.25rem;}
	
	@media screen and (max-width:1200px)
	{
		.m-paging {display:none;}
	}


/*--------------------- 메인비쥬얼 슬라이드 ---------------------*/
.m-vis-sld {height:90rem;position:relative;}
.m-vis-sld:after {content:"";display:block;width:48rem;height:48rem;background:url(../img/main/m-vis_circle.png);border-radius:50%;position:absolute;bottom:0;right:72rem;}
/*-- .m-vis-sld:after {content:"";display:block;width:48rem;height:48rem;background:var(--black-color);border-radius:50%;position:absolute;bottom:0;right:72rem;} --*/

.m-vis-sld .btxt {margin-bottom:1rem;position:relative;z-index:1;overflow:hidden;}
.m-vis-sld .btxt span {display:block;font-family: 'TitilliumWeb';font-weight:600;font-size:7rem;letter-spacing:-0.03em;color:var(--point-color);}
.m-vis-sld .btxt br {display:none;}
.m-vis-sld .stxt {position:relative;z-index:1;overflow:hidden;}
.m-vis-sld .stxt span {display:block;font-family: 'TitilliumWeb';font-size:6rem;letter-spacing:-0.03em;line-height:100%;}
.m-vis-sld .swiper-slide {position:relative;padding-top:16rem;}
.m-vis-sld figure {position:absolute;top:-32rem;right:-12rem;width:120rem;height:120rem;border-radius:50%;overflow:hidden;display:flex;align-items:flex-end;}
.m-vis-sld figure img {width:calc(100% - 12rem);object-position: center top;}
.m-vis-sld .swiper-slide:not(.swiper-slide-active) {opacity:0 !important;}
.m-vis-sld .navi {position:absolute;top:0;left:0;width:100%;z-index:2;padding-top:10rem;}
.m-vis-sld .navi .inwrap {display:flex;align-items:center;gap:0 2rem;}
.m-vis-sld .navi .current,
.m-vis-sld .navi .total {font-size:1.5rem;font-weight:600;font-family: 'SCoreDream', sans-serif;}
.m-vis-sld .navi .current {color:var(--point-color);}
.m-vis-sld .navi .progressbar {width:21rem;background:#ececec;height:2px;position:relative;overflow:hidden;}
.m-vis-sld .navi .progressbar span {display:block;position:absolute;top:0;bottom:0;left:0;background:var(--point-color);}

	/* animation */
	.m-vis-sld .btxt span {transform:translateY(100%);}
	.m-vis-sld .stxt span {transform:translateY(100%);}
	.m-vis-sld .swiper-slide-active .btxt span {opacity:1;transform:none;transition:all .7s;transition-delay:.1s;}
	.m-vis-sld .swiper-slide-active .stxt span {opacity:1;transform:none;transition:all .7s;transition-delay:.4s;}

	@media screen and (max-width:1200px)
	{
		.m-vis-sld {height:65rem;margin-bottom:6rem;}
		.m-vis-sld:after {width:36rem;height:36rem;right:52rem;}
		.m-vis-sld .btxt span {font-size:4.5rem;}
		.m-vis-sld .stxt span {font-size:3.6rem;}
		.m-vis-sld figure {width:91rem;height:91rem;top:-26rem;}
		.m-vis-sld .navi {padding-top:5rem;}
	}

	@media screen and (max-width:700px)
	{
		
		.m-vis-sld:after {right:auto;left:-17rem;}
		.m-vis-sld figure {right:auto;left:-7rem;}
		
		.m-vis-sld .btxt br {display:block;}
	}


/*--------------------- 교육리스트 ---------------------*/
.m-edu {margin-bottom:19.5rem;position:relative;}
.m-edu-sld .swiper-slide {position:relative;width:auto;}
.m-edu-sld .swiper-slide:after {content:"";display:block;width:36rem;height:57rem;position:absolute;top:2rem;left:2rem;border:1px solid #f0f1f5;border-radius:10px;}
.m-edu-sld a {display:block;width:36rem;height:57rem;border-radius:10px;position:relative;overflow:hidden;z-index:2;padding:9rem 4rem 7rem;}
.m-edu-sld a:before {content:"";width:100%;height:100%;display:block;position:absolute;top:0;left:0;background:rgba(34, 34, 34, 0.25);z-index:1;}
.m-edu-sld a:after {content:"";width:100%;height:100%;display:block;position:absolute;top:0;left:0;}
.m-edu-inwrap {display:flex;justify-content:center;flex-wrap:wrap;height:100%;position:relative;z-index:2;}
.m-edu-sld .btxt {font-family: 'TitilliumWeb';font-weight:500;letter-spacing:-0.02em;text-align:center;color:#fff;font-size:4rem;}
.m-edu-sld .stxt {text-align:center;line-height:160%;color:#fff;}
.m-edu-sld .more {margin-top:auto;width:7.5rem;height:7.5rem;line-height:7.5rem;border-radius:50%;border:2px solid #fff;color:#fff;font-family: 'TitilliumWeb';font-weight:500;text-align:center;}
.m-edu-sld .sld-item01 a:after {background:url(../img/main/m-edu-01.png) no-repeat center center;}
.m-edu-sld .sld-item02 a:after {background:url(../img/main/m-edu-02.png) no-repeat center center;}
.m-edu-sld .sld-item03 a:after {background:url(../img/main/m-edu-03.png) no-repeat center center;}
.m-edu-sld .sld-item04 a:after {background:url(../img/main/m-edu-04.png) no-repeat center center;}
.m-edu-deco {position:absolute;top:50%;width:100%;}
.m-edu-deco .m-edu-deco__item {font-family: 'TitilliumWeb';font-weight:600;font-size:20rem;color:#f0f1f5;letter-spacing:-0.02em;white-space:nowrap;}
.m-edu-deco .m-edu-deco__item:nth-child(1) {transform:translateX(1500px);text-align:right;}
.m-edu-deco .m-edu-deco__item:nth-child(2) {transform:translateX(1500px);text-align:right;}

	/* animation */
	.m-edu-sld .swiper-slide:after {transition:all .3s;}
	.m-edu-sld a:after {transition:all .3s;}
	.m-edu-sld a {transition:all .3s;}


	@media screen and (min-width:1200px){
		
		.m-edu-sld {max-width:90rem;margin:-14rem 0 0;overflow:visible;}
		.m-edu-sld .swiper-wrapper {flex-wrap:wrap;gap:8rem;}
		
		.m-edu-sld .swiper-slide {opacity:0;transform:translateY(-7rem);transition:all 1s;}
		.m-edu-sld .swiper-slide.ani {opacity:1;transform:none;}
		.m-edu-sld .sld-item02 {transition-delay:.2s;}
		.m-edu-sld .sld-item04 {transition-delay:.2s;}
		.m-edu-sld .sld-item02 {margin-top:23rem;}
		.m-edu-sld .sld-item03 {margin-top:-23rem;}
		
		/* hover */
		.m-edu-sld .swiper-slide:hover:after,
		.m-edu-sld .swiper-slide:has(a:focus):after {background:#f0f1f5;}
		.m-edu-sld .swiper-slide:hover a,
		.m-edu-sld .swiper-slide:has(a:focus) a {background-color:var(--point-color);}
		.m-edu-sld .swiper-slide:hover a:after,
		.m-edu-sld .swiper-slide:has(a:focus) a:after {opacity:0.15;filter: blur(3px);}
		.m-edu-sld .swiper-slide:hover a:before,
		.m-edu-sld .swiper-slide:has(a:focus) a:before {display:none;}
	}
	
	@media screen and (max-width:1200px)
	{
		.m-edu-sld {margin-top:0;padding:0 2rem;margin-left:-2rem;width:calc(100% + 4rem);}
		.m-edu-sld .swiper-slide {padding:0 2rem 2rem 0;}
		.m-edu-sld .swiper-slide:nth-child(2),
		.m-edu-sld .swiper-slide:nth-child(3) {margin-top:0;}
		.m-edu-sld a {width:27rem;height:42.7rem;padding:7rem 2.5rem 4.5rem;}
		.m-edu-sld .swiper-slide:after {width:27rem;height:42.7rem;}
		.m-edu-sld .btxt {font-size:3rem;}

		.m-edu {opacity:0;transform:translateY(-3rem);transition:all 1s;}
		.m-edu.ani {opacity:1;transform:none;}
	}


/*--------------------- 스케쥴 ---------------------*/
.m-schedule {position:relative;}
.m-schedule .deco-small {width:34.2rem;height:34.2rem;background:#f0f1f5;border-radius:50%;position:absolute;top:-17.5rem;right:36rem;}
.m-schedule .deco-big {width:50rem;height:50rem;border:2px solid #f0f1f5;border-radius:50%;position:absolute;top:-36.5rem;right:-7rem;}
.m-schedule-box {display:flex;align-items:center;gap:0 4rem;height:22rem;padding:0 12rem;margin-bottom:12rem;border-radius:17px;background:url(../img/main/m-schedule-box-bg.png) no-repeat center top;box-shadow:0px 12px 22px rgba(0, 0, 0, 0.07);position:relative;z-index:1;}
.m-schedule-box .txt {font-weight:300;position:relative;padding-left:5rem;}
.m-schedule-box .txt:before {content:"";position:absolute;top:50%;left:0;margin-top:-2rem;display:block;width:4rem;height:4rem;background:url(../img/main/m-schedule-box.svg) no-repeat center center /100% 100%;}
.m-schedule-box .txt,
.m-schedule-box .txt strong,
.m-schedule-box .txt span {font-size:3.6rem;color:#fff;}
.m-schedule-box .txt .point {color:var(--point-color);}
.m-schedule-box .txt strong,
.m-schedule-box .txt span {font-weight:800;}
.m-schedule-box .more {flex:none;margin-left:auto;width:7.5rem;height:7.5rem;line-height:7.5rem;border:2px solid #fff;border-radius:50%;font-family: 'TitilliumWeb';text-align:center;color:#fff;}

	/* animation */
	.m-schedule {opacity:0;transition:all .8s;transform:translateY(-3rem);}
	.m-schedule.ani {opacity:1;transform:none;}
	.m-schedule-box .more {transition:all .3s;}
	

	@media screen and (min-width:1200px){
		/* hover */
		.m-schedule-box:hover .more,
		.m-schedule-box:focus .more {border-color:var(--point-color);background:var(--point-color);}
	}

	@media screen and (max-width:1200px){
		
		.m-schedule-box {padding:0 4rem 0 5rem;margin-bottom:6rem;}
		.m-schedule-box .txt {padding-left:0;line-height:160%;}
		.m-schedule-box .txt:before {display:none;}
		.m-schedule-box .txt span {display:block;margin-bottom:1rem;}
		.m-schedule-box .txt strong {display:block;}
		.m-schedule-box .txt,
		.m-schedule-box .txt strong,
		.m-schedule-box .txt span {font-size:3rem;}

		.m-schedule .deco-small {right:5rem;top:-4rem;width:20rem;height:20rem;}
		.m-schedule .deco-big {right:-21rem;top:-15rem;width:30rem;height:30rem;}
	}
	@media screen and (max-width:380px){
		.m-schedule-box {padding: 0 3rem 0 3rem;gap:0;}
	}


/*--------------------- 공지사항 ---------------------*/
.m-news {padding-bottom:15rem;}
.m-news .m-tit {margin-bottom:2rem;}
.m-news-lst li {padding:4rem 0;border-bottom:1px solid #f0f1f5;}
.m-news-lst a {display:block;width:100%;position:relative;padding-right:6rem;}
.m-news-lst .tit {font-size:2.2rem;margin-bottom:1.5rem;line-height:160%;}
.m-news-lst .date {font-size:1.4rem;color:#767676;}
.m-news-lst .arrow {position:absolute;top:0;right:0;border-radius:50%;border:2px solid #333;}
.m-news-lst .arrow .ico {position:relative;display:block;width:4rem;height:4rem;}
.m-news-lst .arrow .ico:before {content:"";display:block;position:absolute;top:50%;left:50%;margin:-3px 0 0 -6px;width:11px;height:6px;background:url(../img/main/news-arrow.svg) no-repeat center center;}

	/* animation */
	.m-news-lst .tit {transition:all .3s;}
	.m-news-lst .arrow {transition:all .3s;}
	.m-news-lst .arrow .ico:before {transition:all .3s;}
	.m-news .m-tit {opacity:0;transition:all .6s;}
	.m-news-lst li {opacity:0;transform:translateY(-5rem);transition:all .6s;}
	.m-news.ani .m-tit {opacity:1;}
	.m-news.ani .m-news-lst li {opacity:1;transform:none;}
	.m-news.ani .m-news-lst li:nth-child(1) {transition-delay:.2s;}
	.m-news.ani .m-news-lst li:nth-child(2) {transition-delay:.4s;}
	.m-news.ani .m-news-lst li:nth-child(3) {transition-delay:.6s;}

	@media screen and (min-width:1200px){
		/* hover */
		.m-news-lst a:hover .tit,
		.m-news-lst a:focus .tit {color:var(--point-color);}
		.m-news-lst a:hover .arrow,
		.m-news-lst a:focus .arrow {background:var(--point-color);border-color:var(--point-color);}
		.m-news-lst a:hover .arrow .ico:before,
		.m-news-lst a:focus .arrow .ico:before {filter: brightness(0) invert(1);}
	}
	@media screen and (max-width:1200px)
	{
		.m-news-lst .tit {font-size:1.8rem;}
	}


/*--------------------- 파트너 ---------------------*/
.m-partner {padding:18rem 0 23rem;background:url(../img/main/m-partner-bg.png) no-repeat center top /cover;}
.m-partner .inwrap {display:flex;gap:6rem 8rem;}
.m-partner .m-tit {flex:none;line-height:100%;}
.m-partner .m-tit .point {position:relative;line-height:100%;padding-left:0.8em;}
.m-partner .m-tit .point:before,
.m-partner .m-tit .point:after {content:"";display:block;width:2rem;height:0.2rem;background:var(--point-color);position:absolute;top:0.45em;left:0;}
.m-partner .m-tit .point:after {transform:rotate(90deg);}
.m-partner-lst {display:flex;flex-wrap:wrap;gap:8rem 10.5rem;margin-left:auto;}
.m-partner-lst li {width:calc(33.33% - 7rem);text-align:center;}
.m-partner img {max-width:100%;}
.m-partner .Kshipbuilding img {width:157px;}
.m-partner .imabari img {width:222px;}
.m-partner .sumitomo img {width:166px;}

.m-partner .maran img {width:20rem;}
.m-partner .marinetrust img {width:20rem;}
.m-partner .cma img {width:19.4rem;}
.m-partner .atlantska img {width:20rem;}
.m-partner .maersk img {width:16.2rem;}
.m-partner .seaspan img {width:20rem;}
.m-partner .tsakos img {width:16.6rem;}
.m-partner .msc img {width:20rem;}
.m-partner .nyk img {width:19.4rem;}
.m-partner .marantankers img {width:16rem;}
.m-partner .anglo img {width:20rem;}
.m-partner .bsm img {width:10.6rem;}
.m-partner .golar img {width:13rem;}
.m-partner .mol img {width:19.7rem;}
.m-partner .torm img {width:15rem;}

	/* animation */
	.m-partner {opacity:0;transition:all .7s;}
	.m-partner .m-tit {opacity:0;transition:all .8s;transition-delay:.3s;}
	.m-partner-lst {opacity:0;transform:translateX(-10rem);transition:all 1s;transition-delay:.5s;}
	.m-partner.ani {opacity:1;}
	.m-partner.ani .m-tit {opacity:1;}
	.m-partner.ani .m-partner-lst {opacity:1;transform:none;}

	@media screen and (max-width:1200px)
	{
		.m-partner {padding:6rem 0 8.5rem;}
		.m-partner .inwrap {flex-wrap:wrap;}
		.m-partner .m-tit {width:100%;}
		.m-partner-lst {gap:8rem 6rem;}
		.m-partner-lst li {width:calc(50% - 3rem);}
	}


/*--------------------- 페이지 top 버튼 ---------------------*/
	@media screen and (max-width:1200px)
	{
		.m-top-btn {display:none;}
	}