/* slide 공용(뷰포트) */
.slide{
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.slide.is-dragging{
  cursor: grabbing;
}

/* JS가 만드는 트랙(실제 이동 대상) */
.slide .slide-track{
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform 0.28s ease;
}

/* 아이템 기본 */
.slide .slide-track > figure{
  margin: 0;
  flex: 0 0 100%;
  user-select: none;
}
.slide .slide-track > figure img{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 한 화면 노출 개수 */
.slide.slide_1 .slide-track > figure,
.slide.silde_1 .slide-track > figure{
  flex-basis: 100%;
}

.slide.slide_2 .slide-track > figure,
.slide.silde_2 .slide-track > figure{
  flex-basis: 50%;
}

.slide.slide_3 .slide-track > figure,
.slide.silde_3 .slide-track > figure{
  flex-basis: 33.333333%;
}

/* 버튼 */
.slide-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.slide-nav:hover{
  background: rgba(0,0,0,0.72);
}
.slide-nav.prev{
  left: 10px;
}
.slide-nav.next{
  right: 10px;
}
.slide-nav[disabled]{
  opacity: 0.35;
  cursor: default;
}

/* 아이콘(이미지 안 씀) */
.slide-nav::before{
  display: block;
  font-weight: 700;
}
.slide-nav.prev::before{ content: '<'; }
.slide-nav.next::before{ content: '>'; }

/* 1개면 버튼 숨김 */
.slide.has-one .slide-nav{
  display: none;
}


/* 화면 크기가 1200px 이상일 때 모바일용 요소 숨기기 */
@media (min-width: 1200px) {
	.mo_show {
	  display: none;
	}
  }
  
  /* 화면 크기가 1200px 미만일 때 PC용 요소 숨기기 */
  @media (max-width: 1199px) {
	.pc_show {
	  display: none;
	}
  }
	.pc_show .port_slied .slide-wrap{ height:700px;}

	.pc_show .port_slied{padding-bottom:5%;}

	.port_slied{width:100%; max-width:1440px; margin:0 auto;}
	.port_list_gird{position:relative; cursor: pointer;}
	.port_list_gird_text{position:absolute; bottom:3%; left:5%; width:95%;}
	.port_list_gird_text1{color:#091217;}
	.port_list_gird_text2{color:white;}
	.port_list_gird_text h2{font-size:50px; font-family: ageo-bold; font-weight:600;}
	.port_list_gird_text p{font-size:26px; font-family: AppleSDGothicNeo; letter-spacing: -0.65px;}
	.port_list_gird_text p span{margin-left:10%;}
	.port_list_gird_text p span img{margin-top:1%; max-width: 100px;}
	.right{
		right: 13px;
	}
	.left{
		left:0;
	}
	.right, .left{
		position: absolute;
		top: 45%;
		z-index: 10;
		cursor: pointer;
	}

	.mo_show{display:none;}
.center{text-align: center;}	
.bold{font-weight: 800;}

.mt10{margin-top: 10rem;}
.mt9{margin-top: 9rem;}
.mt8{margin-top: 8rem;}
.mt7{margin-top: 7rem;}
.mt6{margin-top: 6rem;}
.mt5{margin-top: 5rem;}
.mt4{margin-top: 4rem;}
.mt3{margin-top: 3rem;}
.mt2{margin-top: 2rem;}
.mt1{margin-top: 1rem;}

.mb10{margin-bottom: 10rem;}
.mb9{margin-bottom: 9rem;}
.mb8{margin-bottom: 8rem;}
.mb7{margin-bottom: 7rem;}
.mb6{margin-bottom: 6rem;}
.mb5{margin-bottom: 5rem;}
.mb4{margin-bottom: 4rem;}
.mb3{margin-bottom: 3rem;}
.mb2{margin-bottom: 2rem;}
.mb1{margin-bottom: 1rem;}

.ml10{margin-left: 10rem;}
.ml9{margin-left: 9rem;}
.ml8{margin-left: 8rem;}
.ml7{margin-left: 7rem;}
.ml6{margin-left: 6rem;}
.ml5{margin-left: 5rem;}
.ml4{margin-left: 4rem;}
.ml3{margin-left: 3rem;}
.ml2{margin-left: 2rem;}
.ml1{margin-left: 1rem;}

.mr10{margin-right: 10rem;}
.mr9{margin-right: 9rem;}
.mr8{margin-right: 8rem;}
.mr7{margin-right: 7rem;}
.mr6{margin-right: 6rem;}
.mr5{margin-right: 5rem;}
.mr4{margin-right: 4rem;}
.mr3{margin-right: 3rem;}
.mr2{margin-right: 2rem;}
.mr1{margin-right: 1rem;}

.pt10{padding-top: 10rem;}
.pt9{padding-top: 9rem;}
.pt8{padding-top: 8rem;}
.pt5{padding-top: 5rem;}
.pt4{padding-top: 4rem;}
.pt3{padding-top: 3rem;}
.pt2{padding-top: 2rem;}
.pt1{padding-top: 1rem;}

.pb10{padding-bottom: 10rem;}
.pb9{padding-bottom: 9rem;}
.pb8{padding-bottom: 8rem;}
.pb7{padding-bottom: 7rem;}
.pb6{padding-bottom: 6rem;}
.pb5{padding-bottom: 5rem;}
.pb4{padding-bottom: 4rem;}
.pb3{padding-bottom: 3rem;}
.pb2{padding-bottom: 2rem;}
.pb1{padding-bottom: 1rem;}

.pl10{padding-left: 10rem;}
.pl9{padding-left: 9rem;}
.pl8{padding-left: 8rem;}
.pl7{padding-left: 7rem;}
.pl6{padding-left: 6rem;}
.pl5{padding-left: 5rem;}
.pl4{padding-left: 4rem;}
.pl3{padding-left: 3rem;}
.pl2{padding-left: 2rem;}
.pl1{padding-left: 1rem;}

.pr10{padding-right: 10rem;}
.pr9{padding-right: 9rem;}
.pr8{padding-right: 8rem;}
.pr7{padding-right: 7rem;}
.pr6{padding-right: 6rem;}
.pr5{padding-right: 5rem;}
.pr4{padding-right: 4rem;}
.pr3{padding-right: 3rem;}
.pr2{padding-right: 2rem;}
.pr1{padding-right: 1rem;}

.mt11{margin-top: 11rem;}
.mt12{margin-top: 12rem;}
.mt13{margin-top: 13rem;}
.mt14{margin-top: 14rem;}
.mt15{margin-top: 15rem;}
.mt16{margin-top: 16rem;}
.mt17{margin-top: 17rem;}
.mt18{margin-top: 18rem;}
.mt19{margin-top: 19rem;}
.mt20{margin-top: 20rem;}
.mt21{margin-top: 21rem;}
.mt22{margin-top: 22rem;}
.mt23{margin-top: 23rem;}
.mt24{margin-top: 24rem;}
.mt25{margin-top: 25rem;}

.mb11{margin-bottom: 11rem;}
.mb12{margin-bottom: 12rem;}
.mb13{margin-bottom: 13rem;}
.mb14{margin-bottom: 14rem;}
.mb15{margin-bottom: 15rem;}
.mb16{margin-bottom: 16rem;}
.mb17{margin-bottom: 17rem;}
.mb18{margin-bottom: 18rem;}
.mb19{margin-bottom: 19rem;}
.mb20{margin-bottom: 20rem;}
.mb21{margin-bottom: 21rem;}
.mb22{margin-bottom: 22rem;}
.mb23{margin-bottom: 23rem;}
.mb24{margin-bottom: 24rem;}
.mb25{margin-bottom: 25rem;}

.ml11{margin-left: 11rem;}
.ml12{margin-left: 12rem;}
.ml13{margin-left: 13rem;}
.ml14{margin-left: 14rem;}
.ml15{margin-left: 15rem;}
.ml16{margin-left: 16rem;}
.ml17{margin-left: 17rem;}
.ml18{margin-left: 18rem;}
.ml19{margin-left: 19rem;}
.ml20{margin-left: 20rem;}
.ml21{margin-left: 21rem;}
.ml22{margin-left: 22rem;}
.ml23{margin-left: 23rem;}
.ml24{margin-left: 24rem;}
.ml25{margin-left: 25rem;}

.mr11{margin-right: 11rem;}
.mr12{margin-right: 12rem;}
.mr13{margin-right: 13rem;}
.mr14{margin-right: 14rem;}
.mr15{margin-right: 15rem;}
.mr16{margin-right: 16rem;}
.mr17{margin-right: 17rem;}
.mr18{margin-right: 18rem;}
.mr19{margin-right: 19rem;}
.mr20{margin-right: 20rem;}
.mr21{margin-right: 21rem;}
.mr22{margin-right: 22rem;}
.mr23{margin-right: 23rem;}
.mr24{margin-right: 24rem;}
.mr25{margin-right: 25rem;}

.pt11{padding-top: 11rem;}
.pt12{padding-top: 12rem;}
.pt13{padding-top: 13rem;}
.pt14{padding-top: 14rem;}
.pt15{padding-top: 15rem;}
.pt16{padding-top: 16rem;}
.pt17{padding-top: 17rem;}
.pt18{padding-top: 18rem;}
.pt19{padding-top: 19rem;}
.pt20{padding-top: 20rem;}
.pt21{padding-top: 21rem;}
.pt22{padding-top: 22rem;}
.pt23{padding-top: 23rem;}
.pt24{padding-top: 24rem;}
.pt25{padding-top: 25rem;}

.pb11{padding-bottom: 11rem;}
.pb12{padding-bottom: 12rem;}
.pb13{padding-bottom: 13rem;}
.pb14{padding-bottom: 14rem;}
.pb15{padding-bottom: 15rem;}
.pb16{padding-bottom: 16rem;}
.pb17{padding-bottom: 17rem;}
.pb18{padding-bottom: 18rem;}
.pb19{padding-bottom: 19rem;}
.pb20{padding-bottom: 20rem;}
.pb21{padding-bottom: 21rem;}
.pb22{padding-bottom: 22rem;}
.pb23{padding-bottom: 23rem;}
.pb24{padding-bottom: 24rem;}
.pb25{padding-bottom: 25rem;}

.pl11{padding-left: 11rem;}
.pl12{padding-left: 12rem;}
.pl13{padding-left: 13rem;}
.pl14{padding-left: 14rem;}
.pl15{padding-left: 15rem;}
.pl16{padding-left: 16rem;}
.pl17{padding-left: 17rem;}
.pl18{padding-left: 18rem;}
.pl19{padding-left: 19rem;}
.pl20{padding-left: 20rem;}
.pl21{padding-left: 21rem;}
.pl22{padding-left: 22rem;}
.pl23{padding-left: 23rem;}
.pl24{padding-left: 24rem;}
.pl25{padding-left: 25rem;}

.pr11{padding-right: 11rem;}
.pr12{padding-right: 12rem;}
.pr13{padding-right: 13rem;}
.pr14{padding-right: 14rem;}
.pr15{padding-right: 15rem;}
.pr16{padding-right: 16rem;}
.pr17{padding-right: 17rem;}
.pr18{padding-right: 18rem;}
.pr19{padding-right: 19rem;}
.pr20{padding-right: 20rem;}
.pr21{padding-right: 21rem;}
.pr22{padding-right: 22rem;}
.pr23{padding-right: 23rem;}
.pr24{padding-right: 24rem;}
.pr25{padding-right: 25rem;}

.m1{margin: 1rem;}
.m2{margin: 2rem;}
.m3{margin: 3rem;}
.m4{margin: 4rem;}
.m5{margin: 5rem;}
.m6{margin: 6rem;}
.m7{margin: 7rem;}
.m8{margin: 8rem;}
.m9{margin: 9rem;}
.m10{margin: 10rem;}
.m11{margin: 11rem;}
.m12{margin: 12rem;}
.m13{margin: 13rem;}
.m14{margin: 14rem;}
.m15{margin: 15rem;}
.m16{margin: 16rem;}
.m17{margin: 17rem;}
.m18{margin: 18rem;}
.m19{margin: 19rem;}
.m20{margin: 20rem;}

.p1{padding: 1rem;}
.p2{padding: 2rem;}
.p3{padding: 3rem;}
.p4{padding: 4rem;}
.p5{padding: 5rem;}
.p6{padding: 6rem;}
.p7{padding: 7rem;}
.p8{padding: 8rem;}
.p9{padding: 9rem;}
.p10{padding: 10rem;}
.p11{padding: 11rem;}
.p12{padding: 12rem;}
.p13{padding: 13rem;}
.p14{padding: 14rem;}
.p15{padding: 15rem;}
.p16{padding: 16rem;}
.p17{padding: 17rem;}
.p18{padding: 18rem;}
.p19{padding: 19rem;}
.p20{padding: 20rem;}

.position-style{
position: relative;
}

.auto{margin: 0 auto;}
.flex{
	display: flex;
}
.justify-content{
	justify-content: space-between;
}
.flex-wrap{
	flex-wrap: wrap;
}


.f1{font-size:1.2rem;}
.f2{font-size:2rem;}
.f3{font-size:2.6rem;}
.f4{font-size:3.2rem;}
.f5{font-size:4rem;}
.f6{font-size:5rem;}
.f7{font-size:6rem;}
.f8{font-size:7rem;}
.f9{font-size:8rem;}
.f10{font-size:9rem;}
.f11{font-size:10rem;}
.f12{font-size:11rem;}
.flex{display: flex;}

	
	
.lh1  { line-height: 1; }
.lh2 { line-height: 1.05; }
.lh3 { line-height: 1.1; }
.lh4 { line-height: 1.15; }
.lh5 { line-height: 1.2; }
.lh6 { line-height: 1.25; }
.lh7 { line-height: 1.3; }
.lh8 { line-height: 1.35; }
.lh9 { line-height: 1.4; }
.lh10 { line-height: 1.45; }
.lh11 { line-height: 1.5; }
.lh12 { line-height: 1.6; }
.lh13 { line-height: 1.7; }
.lh14 { line-height: 1.8; }
.lh15 { line-height: 1.9; }
.lh16 { line-height: 2; }


	@media(max-width:1200px){
		.pc_show{display:none;}
		.mo_show{display:block;}
		.port_slied{width:100%; max-width:1440px; margin: 0 auto; padding-top:10%;}
		.port_list_gird{position:relative;}
		.port_list_gird_text{position:absolute; bottom:3%; left:5%; width:95%;}
		.port_list_gird_text1{color:#091217;}
		.port_list_gird_text2{color:white;}
		.port_list_gird_text h2{font-size:33px; font-family: ageo-bold;}
		.port_list_gird_text p{font-size:22px; font-family: AppleSDGothicNeo; letter-spacing: -0.65px;}
		.port_list_gird_text p span{margin-left:10%;}
		.port_list_gird_text p span img{margin-top:1%; }
		.right{
			right: 0;
			text-align: right;
		}
		.left{
			left:0;
		}
		.right, .left{
			position: absolute;
			top: 50%;
			z-index: 10;
			cursor: pointer;
		}
		.right img, .left img{width:50% !important;}
		.f1{font-size:1rem;}
		.f2{font-size:1.2rem;}
		.f3{font-size:2rem;}
		.f4{font-size:2.6rem;}
		.f5{font-size:3.2rem;}
		.f6{font-size:4rem;}
		.f7{font-size:5rem;}
		.f8{font-size:6rem;}
		.f9{font-size:7rem;}
	}


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

	.f1{font-size:.8rem;}	
	.f2{font-size:1rem;}
	.f3{font-size:1.8rem;}
	.f4{font-size:2.2rem;}
	.f5{font-size:2.6rem;}
	.f6{font-size:3.2rem;}
	.f7{font-size:4rem;}
	.f8{font-size:5rem;}
	.f9{font-size:6rem;}

	}
	
    @font-face {
        font-family: 'AppleSDGothicNeo';
        src: url('/pages/portfolio/upload/font/AppleSDGothicNeoL.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
     }
     
     @font-face {
        font-family: 'AppleSDGothicNeo';
        src: url('/pages/portfolio/upload/font/AppleSDGothicNeoR.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
     }
     
     @font-face {
        font-family: 'AppleSDGothicNeo';
        src: url('/pages/portfolio/upload/font/AppleSDGothicNeoM.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
     }
     
     @font-face {
        font-family: 'AppleSDGothicNeo';
        src: url('/pages/portfolio/upload/font/AppleSDGothicNeoB.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
     }
     
     @font-face {
        font-family: 'AppleSDGothicNeo';
        src: url('/pages/portfolio/upload/font/AppleSDGothicNeoEB.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
     }
     @font-face {
        font-family: 'LINESeedKR';
        src: url('/pages/portfolio/upload/font/LINESeedKR-Bd.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
     }
     
     @font-face {
        font-family: 'LINESeedKR';
        src: url('/pages/portfolio/upload/font/LINESeedKR-Rg.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
     }
     
     @font-face {
        font-family: 'LINESeedKR';
        src: url('/pages/portfolio/upload/font/_LINESeedKR-Bd.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
     }

     @font-face {
        font-family: 'LINESeedKR';
        src: url('/pages/portfolio/upload/font/LINESeedKR-Th.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
     }