@charset "utf-8";

.only-desktop {display:block;}
.only-mobile {display:none;}

@media (max-width: 640px) {
	.only-desktop {display:none;}
	.only-mobile {display:block;}
}

.port-st-1 {position:relative; margin-bottom:150px;}
.port-st-1 .image {position:relative; height:100vh; overflow:hidden;}
.port-st-1 .image img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.port-st-1 .content {position:absolute; bottom:0; left:0; width:100%;}
.port-st-1 .inner-wrap {display:flex; padding:65px 70px 45px; background:#fff;}
.port-st-1 .cnt-area {width:66%;}
.port-st-1 .cnt-area .txt1 {font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; margin-bottom:6px;}
.port-st-1 .cnt-area .txt2 {font-family:'Play', sans-serif; font-size:45px; line-height:1.111em; letter-spacing:0; margin-bottom:35px;}
.port-st-1 .cnt-area .txt3 {font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; margin-bottom:10px;}
.port-st-1 .cnt-area .txt4 {color:#454545; font-weight:300; line-height:1.563em; letter-spacing:-.03em;}
.port-st-1 .info-area {width:calc(34% - 50px); margin-left:50px; line-height:1.563em;}
.port-st-1 .info-area dl {margin-bottom:25px;}
.port-st-1 .info-area dt {font-weight:500;}
.port-st-1 .info-area dd {color:#686868; font-weight:300;}
.port-st-1 .info-area dd a {display:inline-block; word-break:break-all;}
.port-st-1 .info-area ul {margin-top:45px;}
.port-st-1 .info-area ul li {font-family:'Play', sans-serif; text-decoration:underline; font-size:18px; line-height:1.3em; margin-bottom:18px;}
.port-st-1 .info-area ul li:last-child {margin-bottom:0;}

.port-st-2 {display:flex;}
.port-st-2 div {width:50%;}
.port-st-2 img {width:100%;}

.port-st-3 {padding:150px 0; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
.port-st-3 .title {display:flex; justify-content:space-between; margin-bottom:35px; margin-top:-10px;}
.port-st-3 .tab {display:flex; align-items:flex-end;}
.port-st-3 .tab li {margin-right:44px;}
.port-st-3 .tab li a {display:block; font-family:'Play', sans-serif; color:#d5d5d5; font-size:30px; line-height:40px; transition:none;}
.port-st-3 .tab li.active a {color:#fff; font-size:45px; line-height:50px;}
.port-st-3 .pager {width:auto; margin-top:10px; line-height:0;}
.port-st-3 .pager .swiper-pagination-bullet {width:15px; height:15px; opacity:1; background:#fff; margin-left:10px;}
.port-st-3 .pager .swiper-pagination-bullet-active {background:#fdb813}
.port-st-3 .swiper {border-radius:30px;}

.port-st-4 .inner {position:relative; padding:150px 0;}
.port-st-4 .line {position:absolute; top:0; width:1px; height:100%; background:#ecebeb; z-index:-1;}
.port-st-4 .line-1 {left:14.3%}
.port-st-4 .line-2 {left:50%}
.port-st-4 .line-3 {right:14.3%;}
.port-st-4 h2 {font-family:'Play', sans-serif; font-size:45px; font-weight:400; line-height:1.1em; margin-bottom:35px;}
.port-st-4 .imgs {display:flex; justify-content:space-between;}
.port-st-4 .imgs div {width:30%; max-width:400px;}
.port-st-4 .imgs div:nth-child(2) {margin-top:-70px;}
.port-st-4 .imgs div:nth-child(3) {margin-top:80px;}
.port-st-4 .imgs img {border-radius:30px; box-shadow:0 0 20px rgba(0,0,0,.15);}

.port-st-5 {padding:150px 0; text-align:center;}
.port-st-5 h2 {font-family:'Play', sans-serif; font-size:45px; font-weight:400; line-height:1.1em;}
.port-st-5 .bar {display:block; width:50px; height:2px; background:#242424; margin:45px auto 70px;}
.port-st-5 .font-name {font-size:25px; line-height:1.3em; margin-bottom:15px;}
.port-st-5 .font-style {font-size:45px; line-height:1.333em; letter-spacing:.1em;}

.port-st-6 {padding:150px 0; text-align:center;}
.port-st-6 h2 {font-family:'Play', sans-serif; font-size:45px; font-weight:400; line-height:1.1em;}
.port-st-6 .bar {display:block; width:50px; height:2px; background:#ddd; margin:45px auto 85px;}

@media (max-width: 1024px) {
	.port-st-1 {margin-bottom:80px;}
	.port-st-1 .inner-wrap {padding:35px 35px 10px;}
	.port-st-1 .cnt-area .txt1 {font-size:14px;}
	.port-st-1 .cnt-area .txt2 {font-size:32px; margin-bottom:27px;}
	.port-st-1 .cnt-area .txt3 {font-size:16px;}
	.port-st-1 .cnt-area .txt4 {font-size:14px;}
	.port-st-1 .info-area {margin-left:40px; font-size:14px;}
	.port-st-1 .info-area dl {margin-bottom:17px;}
	.port-st-1 .info-area ul {margin-top:30px;}
	.port-st-1 .info-area ul li {font-size:16px; margin-bottom:10px;}

	.port-st-3 {padding:100px 0;}
	.port-st-3 .title {margin-bottom:20px;}
	.port-st-3 .tab li {margin-right:30px;}
	.port-st-3 .tab li a {font-size:20px; line-height:30px;}
	.port-st-3 .tab li.active a {font-size:35px; line-height:40px;}

	.port-st-4 .inner {padding:100px 0;}
	.port-st-4 h2 {font-size:35px; margin-bottom:25px;}
	.port-st-4 .imgs div:nth-child(2) {margin-top:-60px;}
	.port-st-4 .imgs div:nth-child(3) {margin-top:70px;}

	.port-st-5 {padding:100px 0;}
	.port-st-5 h2 {font-size:35px;}
	.port-st-5 .bar {width:45px; margin:35px auto 50px;}
	.port-st-5 .font-name {font-size:20px;}
	.port-st-5 .font-style {font-size:35px;}

	.port-st-6 {padding:100px 0;}
	.port-st-6 h2 {font-size:35px;}
	.port-st-6 .bar {width:45px; margin:35px auto 65px;}
}

@media (max-width: 640px) {
	.port-st-1 {margin-bottom:55px;}
	.port-st-1 .image {height:auto; z-index:-1;}
	.port-st-1 .image img {position:static;}
	.port-st-1 .content {position:static; margin-top:-190px; padding:0 5px;}
	.port-st-1 .inner-wrap {display:block; padding:22px 20px 0;}
	.port-st-1 .cnt-area {width:auto; margin-bottom:25px;}
	.port-st-1 .cnt-area .txt2 {font-size:24px; margin-bottom:20px;}
	.port-st-1 .cnt-area .txt2 br {display:none;}
	.port-st-1 .cnt-area .txt4 {font-size:12px;}
	.port-st-1 .info-area {width:auto; margin:0;}
	.port-st-1 .info-area ul li {font-size:15px;}

	.port-st-3 {padding:60px 0;}
	.port-st-3 .title {margin-bottom:15px;}
	.port-st-3 .tab li {margin-right:20px;}
	.port-st-3 .tab li a {font-size:15px; line-height:18px;}
	.port-st-3 .tab li.active a {font-size:24px; line-height:26px;}
	.port-st-3 .pager .swiper-pagination-bullet {width:12px; height:12px; margin-left:4px;}
	.port-st-3 .swiper {border-radius:10px;}

	.port-st-4 {overflow:hidden;}
	.port-st-4 .inner {padding:60px 0 100px;}
	.port-st-4 .line-1,
	.port-st-4 .line-3 {display:none;}
	.port-st-4 h2 {font-size:24px; margin-bottom:15px;}
	.port-st-4 .imgs {display:flex; justify-content:flex-start; margin:-15px; padding:15px; overflow:auto;}
	.port-st-4 .imgs img {border-radius:15px; box-shadow:0 0 10px rgba(0,0,0,.15);}
	.port-st-4 .imgs div {flex-shrink:0; width:200px; margin-right:15px;}
	.port-st-4 .imgs div:last-child {margin-right:0;}
	.port-st-4 .imgs div:nth-child(2) {margin-top:0;}
	.port-st-4 .imgs div:nth-child(3) {margin-top:0;}

	.port-st-5 {padding:70px 0;}	
	.port-st-5 h2 {font-size:24px;}
	.port-st-5 .bar {width:30px; margin:22px auto 35px;}
	.port-st-5 .font-name {font-size:14px;}
	.port-st-5 .font-style {font-size:25px; word-break:break-all; width:250px; margin:0 auto;}

	.port-st-6 {padding:60px 0;}
	.port-st-6 h2 {font-size:24px;}
	.port-st-6 .bar {width:30px; margin:22px auto 35px;}
}