/*-- sub css --*/

/*-- container --*/
.normal-wrap{background: #000;}
.normal-section{padding: 200px 0;}
.normal-container{width: 95%;max-width: 1480px;margin: 0 auto;}

.sub-wrap{padding-top: 100vh;}

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

	.normal-container{max-width: 1380px;}
}

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

	.normal-section{padding: 150px 0;}
}

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

	.normal-container{width: 90%;}
}

/*-- form - input/etc --*/
.form-title{display: flex;align-items: flex-end;justify-content: space-between;}
.form-title h4, .form-title span{line-height: 140%;}
.form-title h4{font-size: var(--font-size-28);font-weight: 600;color: #FFF;}
.form-title span{font-weight: 400;color: rgba(255,255,255,.4);}
.form-title span b{color: #FFF;}

.form-title-ing{margin-top: 50px;padding-top: 38px;border-top: 1px solid rgba(255,255,255,.2);}

.field-wrap{margin-top: 25px;}
.field-wrap h5{font-weight: 600;color: #FFF;margin-bottom: 10px;}

.form-wrap .common-link-wrap{margin-top: 40px;}

@media screen and (max-width: 720px){
	
	.form-title{display: block;}
	.form-title h4{font-size: 24px;}
	.form-title span{display: block;font-size: 15px;margin-top: 15px;margin-bottom: 40px;}
	
	.field-wrap{margin-top: 20px;}
	.field-wrap h5{font-size: 15px;margin-bottom: 8px;}

	.form-wrap .common-link-wrap{margin-top: 30px;}
	.form-wrap .common-link-wrap .common-link{width: 100%;height: 54px;line-height: 52px;font-size: 18px;}
}

/*input*/
.form-input{display: block;width: 100%;height: 58px;line-height: 54px;border: 2px solid rgba(255,255,255,.3);color: #FFF;padding: 0 18px;background-color: transparent;outline: none !important;}
.form-input::placeholder{color: rgba(255,255,255,.4);}
.form-input:focus{border-color: #FFF;}
.form-input:focus::placeholder{color: rgba(255,255,255,.7);}

.form-textarea{min-height: 150px;resize: vertical;line-height: 160%;padding: 16px 18px;}

.form-select{background: url(/img/icon/select_arrow.png);background-repeat: no-repeat;background-position: right 15px center;cursor: pointer;
	-webkit-appearance:none; 
	-moz-appearance:none;
	appearance:none;
}
.form-select::-ms-expand{display:none;}

.board-input{background-color: #232323;}

.check-box{position: relative;}
.check-box input[type=checkbox], .check-box input[type=radio]{position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;outline: 0;z-index: -1;overflow: hidden;}
.check-box input[type=checkbox] + label, .check-box input[type=radio] + label{display: flex;align-items: center;gap: 10px;font-size: var(--font-size-15);color: rgba(255,255,255,.7);font-weight: 500;cursor: pointer;}
.check-box input[type=checkbox] + label span, .check-box input[type=radio] + label span{width: 20px;height: 20px;border: 2px solid #FFF;overflow: hidden;}
.check-box input[type=checkbox] + label a, .check-box input[type=radio] + label a{font-size: 12px;background-color: var(--color-1);color: #FFF;font-weight: 700;line-height: 26px;padding: 0 10px;border-radius: 26px;}
.check-box input[type=checkbox]:checked + label, .check-box input[type=radio]:checked + label{color: #FFF;}
.check-box input[type=checkbox]:checked + label span, .check-box input[type=radio]:checked + label span{background: url(/img/chk_black.png) no-repeat 50% 50% #FFF;border-color: #FFF;}

.serviceRadio{display: flex;gap: 20px;font-weight: 400;}

@media screen and (max-width: 720px){
	
	.form-input{height: 50px;line-height: 46px;font-size: 15px;}

	.check-box input[type=checkbox] + label, .check-box input[type=radio] + label{font-size: 14px;}
	.check-box input[type=checkbox] + label a, .check-box input[type=radio] + label a{font-size: 11px;line-height: 24px;padding: 0 8px;border-radius: 24px;}
}

/*-- sub title --*/
.sub-title{display: flex;flex-direction: column;align-items: center;justify-content: center;}

.sub-title span{font-size: var(--font-size-36);font-weight: 600;color: #FFF;}

.sub-title h2{text-align: center;margin-top: 100px;}
.sub-title h2 span{display: block;font-size: var(--font-size-160);line-height: 110%;}

/*-- sub visual --*/
.sub-visual{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: #000;}
.sub-visual>div, .sub-visual>div .sub-title{height: 100%;}

.normal-visual{height: 800px;position: relative;}
.normal-visual figure{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-image: url(/img/sub/sv_1.jpg);background-repeat: no-repeat;background-size: cover;background-position: bottom;}

.normal-visual-text{position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);z-index: 10;}
.normal-visual-text h2{color: #FFF;font-size: var(--font-size-180);font-weight: var(--font-weight-700);line-height: 100%;}

@media screen and (max-width: 1921px){
	
	.normal-visual-text h2{font-size: var(--font-size-160);}
}

@media screen and (max-width: 1480px){
	
	.normal-visual-text{bottom: 80px;}
}

@media screen and (max-width: 1280px){
	
	.normal-visual-text h2{font-size: var(--font-size-140);}
}

@media screen and (max-width: 1080px){
	
	.normal-visual-text h2{font-size: var(--font-size-120);}
}

@media screen and (max-width: 860px){
	
	.normal-visual-text{bottom: 0;}
	.normal-visual-text h2{font-size: var(--font-size-90);}
}

@media screen and (max-width: 720px){
	
	.normal-visual{height: 80vh;}
	.normal-visual-text{bottom: 0;}
	.normal-visual-text h2{font-size: 60px;line-height: 105%;}
}

/*-- company page --*/
.company-wrap{position: relative;}
/*.company-wrap::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.1);z-index: 1;}*/
.company-wrap::after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 50vh;z-index: 2;
	-webkit-background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 70%);
	background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 70%);
}
.company-wrap .main-inner{padding-top: 56.3vh;}
.company-wrap .visual-title h2{font-size: 10.65vw;}
.company-wrap .visual-title h2 span:first-child{height: auto;}
.company-wrap .visual-title h2 span:nth-child(2){margin-top: 60px;}
.company-wrap .section-2-text{margin-top: 100px;}
.company-wrap .section-2-text p{margin-bottom: 0;}

#company{position: fixed;top: 0;left: 0;z-index: -1;width: 100% !important;height: 100vh !important;}

.company_section{width: 100%;min-height: 100vh;position: relative;z-index: 10;}
.company-wrap .visual-text{z-index: 10;}

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

	.company-wrap .main-inner{padding-top: 52vh;}
}

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

	.company-wrap .main-inner{padding-top: 54vh;}

	.company-wrap .visual-title h2 span:nth-child(2){margin-top: 25px;}
}

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

	.company-wrap .main-inner{padding-top: 65vh;}

	.company-wrap .visual-title h2 span:nth-child(2){margin-top: 15px;}
}

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

	.company-wrap .main-inner{padding-top: 65vh;}

	.company-wrap .visual-title h2 span:nth-child(2){margin-top: 15px;}
}

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

	.company-wrap .main-inner{padding-top: 68vh;}

	.company-wrap .visual-title h2 span:nth-child(2){margin-top: 10px;}
	.company-wrap .section-2-text{margin-top: 70px;}
}

/*company-1*/
@media screen and (max-width: 1480px){
	
	#company_1{min-height: auto;}
}

@media screen and (max-width: 1280px){
	
	#company_1 .section-2-text p{word-break: keep-all;}
	#company_1 .section-2-text p span{display: block;}
	#company_1 .section-2-text p br{display: none;}
}

@media screen and (max-width: 1080px){
	
	#company_1 .section-2-text p{font-size: 20px;}

	#company_1 .visual-title h2{line-height: 110%;}
}

@media screen and (max-width: 720px){
	
	#company_1 .visual-title h2{font-size: 55px;line-height: 100%;}

	#company_1 .section-2-text p{font-size: 15px;}
}

/*company-2*/
#company_2{padding-top: 300px;}
#company_2 .visual-title h2{font-size: 8vw;}

.company-info{margin-top: 130px;}
.company-info ul{display: flex;flex-wrap: wrap;border-top: 3px solid #FFF;}
.company-info ul li{width: 50%;border-bottom: 1px solid #FFF;padding: 80px 40px;}
.company-info ul li h4, .company-info ul li p{color: #FFF;}
.company-info ul li h4{font-size: var(--font-size-50);font-weight: 400;margin-bottom: 50px;}
.company-info ul li p{font-size: var(--font-size-22);line-height: 180%;}
.company-info ul li p i{display: block;}

@media screen and (max-width: 1740px){
	
	.company-info ul li{padding: 70px 30px;}
}

@media screen and (max-width: 1480px){
	
	.company-info{margin-top: 100px;}
	.company-info ul li{width: 100%;padding: 70px 0;}
	.company-info ul li h4{margin-bottom: 40px;}
}

@media screen and (max-width: 960px){
	
	.company-info{margin-top: 70px;}
	.company-info ul li{padding: 60px 0;}
	.company-info ul li h4{margin-bottom: 35px;}
}

@media screen and (max-width: 720px){
	
	#company_2{padding-top: 200px;}
	#company_2 .visual-title h2{font-size: 45px;}
	
	.company-info{margin-top: 50px;}
	.company-info ul li{padding: 50px 0;}
	.company-info ul li h4{font-size: 30px;}
	.company-info ul li p{font-size: 15px;word-break: keep-all;}
	.company-info ul li p br{display: none;}
	.company-info ul li p i{display: inline;}
}

/*company-3*/
#company_3{padding-top: 300px;}

.company-link>ul{display: flex;flex-wrap: wrap;width: 70%;}
.company-link>ul>li{width: 50%;padding: 0 40px;}
.company-link>ul>li + li{margin-top: 200px;}
.company-link>ul>li:nth-child(2){margin-top: 0;}
.company-link>ul>li h4{font-size: var(--font-size-60);font-weight: 600;color: #FFF;line-height: 125%;border-bottom: 2px solid #FFF;padding-bottom: 40px;margin-bottom: 40px;}
.company-link>ul>li p{font-size: var(--font-size-26);color: #FFF;line-height: 180%;margin-bottom: 45px;word-break: keep-all;}
.company-link>ul>li p i{display: block;}

@media screen and (max-width: 1740px){
	
	.company-link>ul>li{padding: 0 30px;}
}

@media screen and (max-width: 1480px){
	
	.company-link>ul>li{padding: 0 50px;padding-left: 0;}
	.company-link>ul>li + li{margin-top: 150px;}
	.company-link>ul>li:nth-child(2){margin-top: 0;}

	.company-link>ul>li h4{padding-bottom: 35px;margin-bottom: 38px;}
}

@media screen and (max-width: 1080px){
	
	#company_3{padding-top: 250px;}

	.company-link>ul{width: 100%;column-gap: 60px;}
	.company-link>ul>li{width: calc( ( 100% - 60px ) / 2 );padding: 0 !important;}
	.company-link>ul>li h4{font-size: 3.57rem;}
}

@media screen and (max-width: 960px){
	
	.company-link>ul>li h4{font-size: 40px;}
	.company-link>ul>li p{font-size: 18px;}

	.company-link>ul>li + li{margin-top: 100px;}
}

@media screen and (max-width: 720px){
	
	#company_3{padding-top: 200px;}

	.company-link>ul{display: block;}
	.company-link>ul>li{width: 100%;}
	.company-link>ul>li + li, .company-link>ul>li:nth-child(2){margin-top: 70px;}
	.company-link>ul>li h4{font-size: 33px;padding-bottom: 23px;margin-bottom: 28px;}
	.company-link>ul>li p{font-size: 16px;margin-bottom: 35px;}
}

/*company-4*/
#company_4{padding-top: 300px;position: relative;min-height: auto;}
#company_4 .visual-text{position: relative;top: auto;left: auto;}

#company_4 .visual-text>div{display: flex;justify-content: center;flex-wrap: wrap;}
#company_4 .visual-text>div span{display: flex;align-items: center;gap: 20px;width: 100%;font-weight: 400;line-height: 140%;}

#company_4 .visual-text>div span i{height: 100px;transition: all .1s ease;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#company_4 .visual-text>div span:nth-child(1) i{width: 350px;
	background-image: url(/img/company/company_1.jpg);
}
#company_4 .visual-text>div span:nth-child(2) i{width: 480px;}
#company_4 .visual-text>div span:nth-child(3) i{width: 240px;
	background-image: url(/img/company/company_3.jpg);
}

#company_4 .visual-text p{font-family: 'Pretendard Variable';font-size: var(--font-size-18);line-height: 240%;font-weight: 300;margin-top: 70px;}

@media screen and (max-width: 1480px){
	
	#company_4{padding-top: 250px;}
	
	#company_4 .visual-text>div span i{height: 65px;}
	#company_4 .visual-text>div span:nth-child(1) i{width: 300px;}
	#company_4 .visual-text>div span:nth-child(2) i{width: 410px;}
	#company_4 .visual-text>div span:nth-child(3) i{width: 190px;}
	#company_4 .visual-text p{margin-top: 60px;}
}

@media screen and (max-width: 1080px){
	
	#company_4{padding-top: 250px;}
	
	#company_4 .visual-text>div span i{height: 45px;}
	#company_4 .visual-text>div span:nth-child(1) i{width: 200px;}
	#company_4 .visual-text>div span:nth-child(2) i{width: 310px;}
	#company_4 .visual-text>div span:nth-child(3) i{width: 100px;}
	#company_4 .visual-text p{margin-top: 50px;}
}

@media screen and (max-width: 860px){
	
	#company_4 .visual-text>div span + span{margin-top: 20px;}
	#company_4 .visual-text>div span i{height: 45px;}
	#company_4 .visual-text>div span:nth-child(1) i{width: 180px;}
	#company_4 .visual-text>div span:nth-child(2) i{width: 260px;}
	#company_4 .visual-text>div span:nth-child(3) i{width: 120px;}
	#company_4 .visual-text p{line-height: 180%;}
}

@media screen and (max-width: 720px){
	
	#company_4{padding-top: 200px;}

	#company_4 .code-deco{margin-bottom: 25px;}

	#company_4 .visual-text{width: 100%;}
	#company_4 .visual-text>div span{font-size: 33px;flex-direction: column;align-items: flex-start;gap: 8px;}
	#company_4 .visual-text>div span + span{margin-top: 3px;}

	#company_4 .visual-text>div span i{height: 55px;}
	#company_4 .visual-text>div span:nth-child(1) i{width: 70%;}
	#company_4 .visual-text>div span:nth-child(2) i{width: 100%;}
	#company_4 .visual-text>div span:nth-child(3) i{width: 30%;}

	#company_4 .visual-text p{font-size: 14px;margin-top: 30px;}
	#company_4 .visual-text p br{display: none;}
}

/*company-5*/
#company_5{padding: 300px 0;}

.company-story{width: 50%;border-top: 3px solid #FFF;margin-bottom: 100px;margin-top: 40px;}
.company-story>li{border-bottom: 1px solid #FFF;position: relative;}
.company-story>li::before{content: "";position: absolute;top: 0;left: 0;width: 0;height: 100%;background-color: var(--color-1);
	-webkit-transition: width .6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	transition: width .6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.company-story>li>a{display: flex;justify-content: space-between;padding: 30px 40px;position: relative;z-index: 1;}
.company-story>li>a h5, .company-story>li>a span{font-size: var(--font-size-18);color: #FFF;font-weight: 400;}

.company-story>li:hover::before{width: 100%;}

@media screen and (max-width: 1920px){
	
	#company_5{padding: 250px 0;}
}

@media screen and (max-width: 1480px){
	
	#company_5{padding: 150px 0;}

	.company-story{width: 70%;margin-bottom: 70px;}
	.company-story>li>a{padding: 25px 0;}
	.company-story>li>a h5, .company-story>li>a span{font-size: 16px;}
}

@media screen and (max-width: 1080px){
	
	.company-story{width: 100%;}
}

@media screen and (max-width: 720px){
	
	#company_5{padding-top: 70px;}

	.company-story{margin-top: 30px;}
	.company-story>li:nth-child(n+11){display: none;}
	.company-story>li>a h5, .company-story>li>a span{font-size: 14px;}
}

/*-- service page --*/
#business-1{border-top: 1px solid rgba(255,255,255,.2);padding-top: 300px;background-image: url(/img/sub/business_bg.png);position: relative;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
}

.business-text{color: #FFF;}
.business-text>span{font-size: var(--font-size-400);letter-spacing: -0.05em;display: block;margin-bottom: 100px;line-height: .85;}
.business-text h3{font-size: var(--font-size-40);font-weight: 700;line-height: 150%;margin-bottom: 60px;}
.business-text p{font-size: var(--font-size-18);font-weight: 400;line-height: 180%;}

/*card*/
.business-card{display: flex;flex-wrap: wrap;justify-content: flex-end;align-items: flex-start;gap: 120px;padding-left: calc( 100% - 920px );padding-top: 100px;}
.business-card>li{width: 400px;padding: 2px;position: relative;
	-webkit-box-shadow: 15px 15px 25px rgba(0,0,0,.3);
	box-shadow: 15px 15px 25px rgba(0,0,0,.3);
}
.business-card>li::before, .business-card>li::after{content: "";position: absolute;border-radius: 25px;}
.business-card>li::before{top: 0;left: 0;width: 100%;height: 100%;border: 2px solid #343434;}
.business-card>li::after{top: 2px;left: 2px;width: calc( 100% - 4px );height: calc( 100% - 4px );background: rgba(0,0,0,.6);filter: blur(20px);transition: transform .45s ease;}
.business-card>li:nth-child(2n+1){margin-top: 200px;}
.business-card>li:last-child{margin-top: 0;}
.business-card>li, .business-card>li>a{border-radius: 25px;overflow: hidden;}
.business-card>li>a{display: block;width: 100%;height: 100%;padding: 34px 33px;position: relative;z-index: 10;}

.business-card>li>a>span{display: block;color: rgba(255,255,255,.6);font-weight: 400;margin-bottom: 140px;}

.card-text{color: #FFF;margin-bottom: 54px;}
.card-text h4{font-size: var(--font-size-60);line-height: 110%;font-weight: 600;margin-bottom: 32px;}
.card-text p{font-size: var(--font-size-17);color: rgba(255,255,255,.3);line-height: 180%;font-weight: 400;word-break: keep-all;transition: color .2s ease;}

.card-teg{display: flex;align-items: center;gap: 15px;}
.card-teg i{font-weight: 600;color: #FFF;}

.business-card>li:hover .card-text p{color: #FFF;}
.business-card>li:hover::before{border-color: #565656;}
.business-card>li:hover::after{transform: rotate(45deg);}

#business-2{padding: 0;position: relative;}
#business-2 .common-link-wrap{position: absolute;bottom: 20%;left: 50%;transform: translateX(-50%);z-index: 500;}

@media screen and (max-width: 1920px){
	
	.business-text>span{font-size: 20rem;}
}

@media screen and (max-width: 1480px){
	
	.business-text>span{font-size: 15rem;}

	.business-card{gap: 100px;padding-left: calc( 100% - 900px );padding-top: 70px;}

	#business-2 .common-link-wrap{bottom: 25%;}
}

@media screen and (max-width: 1080px){
	
	.business-text>span{font-size: 11rem;}

	.business-card{justify-content: space-between;gap: 70px;padding-left: 13%;}
	.business-card>li{width: 370px;}

	.business-card>li>a>span{margin-bottom: 120px;}

	.card-text h4{font-size: var(--font-size-50);}
}

@media screen and (max-width: 960px){
	
	.business-card{gap: 0;padding-left: 0;}
	.business-card>li{width: 340px;}
	.business-card>li:nth-child(2n+1){margin-top: 150px;}

	.business-card>li>a>span{margin-bottom: 80px;}
	
	.card-text{margin-bottom: 40px;}
	.card-text h4{margin-bottom: 26px;}

	#business-2 .common-link-wrap{bottom: 30%;}
}

@media screen and (max-width: 720px){
	
	#business-1{padding-top: 200px;}

	.business-text>span{font-size: 55px;margin-bottom: 70px;}

	.business-text h3{margin-bottom: 40px;}
	.business-text p{font-size: 15px;line-height: 180%;word-break: keep-all;}
	.business-text p br{display: none;}
	
	.business-card{row-gap: 25px;}
	.business-card>li{width: 85%;margin-top: 0 !important;}
	.business-card>li>a{padding: 30px 28px;}
	.business-card>li:nth-child(2n+1){margin-left: 15%;}

	.card-text h4{font-size: 40px;}
	.card-text p{font-size: 15px;line-height: 180%;color: rgba(255,255,255,.9);}

	.card-teg{gap: 10px;}

	#business-2 .common-link-wrap{bottom: 35%;}
}

/*-- business page --*/
#port-visual{display: block;width: 100%;height: 100vh;background: #000;overflow: hidden;}

#port-visual .normal-visual-text{bottom: auto;top: 50%;transform: translate(-50%, -50%);text-align: center;}
#port-visual .common-link-wrap{justify-content: center;margin-top: 50px;}

#port-visual>ul{position: absolute;display: grid;grid-template-columns: repeat(6, 1fr);gap: 120px;width: 3582px;height: 2325px;padding: 120px;}
#port-visual>ul>li{background-color: #333;height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#business-3{position: relative;z-index: 100;background: #000;}
#business-3 .normal-container{max-width: 1280px;}
#business-3 .business-text h3{font-size: var(--font-size-50);}

.business-box>ul>li{display: flex;align-items: center;justify-content: space-between;gap: 220px;margin-top: 220px;}
.business-box>ul>li:nth-child(odd){flex-direction: row-reverse;}

.business-box>ul>li figure img{display: block;}

.business-box-text>span{display: block;font-weight: 500;color: rgba(255,255,255,.4);margin-bottom: 28px;}
.business-box-text h4{font-size: var(--font-size-60);font-weight: 600;line-height: 160%;margin-bottom: 15px;color: #FFF;}
.business-box-text p{font-size: var(--font-size-18);font-weight: 400;line-height: 180%;color: rgba(255,255,255,.7);word-break: keep-all;margin-bottom: 45px;}

#business-4{height: 700px;background-image: url(/img/sub/sv_2.jpg);background-repeat: no-repeat;background-size: cover;background-position: center center;position: relative;}
#business-4 h3, #business-4 p{position: absolute;z-index: 1;}
#business-4 h3{top: 40px;left: 2.5%;font-size: var(--font-size-180);font-weight: var(--font-weight-700);color: #000;line-height: 100%;}
#business-4 p{bottom: 50px;right: 2.5%;width: calc( 50% - 4% );font-size: 1.4vw;font-weight: 400;color: #000;line-height: 120%;word-break: keep-all;}

@media screen and (max-width: 1480px){
	
	#port-visual>ul{gap: 96px;width: 2784px;height: 2736px;padding: 96px;}

	.business-box>ul>li{gap: 200px;margin-top: 200px;}
	.business-box>ul>li figure img{max-width: 420px;}

	#business-4{height: 600px;}
	#business-4 h3{top: 30px;font-size: 10rem;}
	#business-4 p{bottom: 40px;}
}

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

	.business-box>ul>li{gap: 160px;}
	.business-box>ul>li figure img{max-width: 400px;}

	#business-4{height: 500px;}
	#business-4 h3{font-size: 9rem;}
	#business-4 p{font-size: 1.45rem;line-height: 140%;}
}

@media screen and (max-width: 1080px){
	
	#port-visual>ul{gap: 76.8px;width: 2227.2px;height: 2188.8px;padding: 76.8px;}

	.business-box>ul>li{gap: 140px;margin-top: 180px;}
	.business-box>ul>li figure img{max-width: 360px;}

	#business-4 h3{font-size: 8rem;}
	#business-4 p{font-size: 1.45rem;}
}

@media screen and (max-width: 960px){
	
	#business-4{height: 430px;}
	#business-4 h3{font-size: 6.5rem;}
	#business-4 p{font-size: 1.3rem;}
}

@media screen and (max-width: 860px){
	
	#port-visual>ul{gap: 61.44px;width: 1781.76px;height: 1751.04px;padding: 61.44px;}

	.business-box>ul>li{display: block;}
	.business-box>ul>li figure{margin-bottom: 40px;}
	.business-box>ul>li figure img{margin: 0 auto;}

	.business-box-text>span{margin-bottom: 23px;}

	#business-4{height: 400px;}
	#business-4 h3{font-size: 6rem;}
	#business-4 p{font-size: 1.2rem;}
}

@media screen and (max-width: 720px){
	
	#port-visual .common-link-wrap{margin-top: 30px;}

	#port-visual>ul{gap: 49.152px;width: 1425.408px;height: 1400.832px;padding: 49.152px;}

	#business-3 .business-text h3{font-size: 30px;}

	.business-box>ul>li{margin-top: 120px;}
	.business-box>ul>li figure{margin-bottom: 25px;}
	.business-box>ul>li figure img{margin: 0;max-width: 250px;}

	.business-box-text>span{font-size: 13px;}
	.business-box-text h4{font-size: 33px;}
	.business-box-text p{font-size: 14px;margin-bottom: 40px;}

	#business-4{height: 40vh;background-position: right;}
	#business-4 h3{left: 5%;top: 50px;font-size: 42px;line-height: 110%;}
	#business-4 p{right: 5%;bottom: 50px;width: 90%;font-size: 16px;line-height: 160%;}

	#business-wrap{padding-bottom: 150px;}
}

/*-- contact page --*/
#contact-2{background-image: url(/img/sub/sv_1.jpg);background-repeat: no-repeat;background-size: cover;background-position: bottom;}

.contact-wrap{padding: 150px 0;background-color: #000;}
.contact-wrap>div{display: flex;justify-content: flex-start;align-items: flex-start;}
.contact-left{width: 34%;}
.contact-right{width: 66%;margin-top: 10px;}

.contact-title h4{font-size: var(--font-size-100);font-weight: var(--font-weight-400);line-height: 100%;color: #FFF;margin-bottom: 54px;}
.contact-title p{font-weight: var(--font-weight-400);line-height: 220%;color: #FFF;}

.contact-info{color: #FFF;margin-top: 100px;}
.contact-info .info-rgt{display: block;}

.contact-info .info-box{margin-top: 42px;}
.contact-info .info-box h4{font-weight: var(--font-weight-600);} 
.contact-info .info-box p{opacity: .5;}

.contact-sns{display: flex;align-items: center;gap: 6px;margin-top: 55px;}
.contact-sns>li{border-radius: 8px;overflow: hidden;}

.contact-box{display: flex;align-items: flex-start;gap: 32px;width: 100%;margin-bottom: 87px;}

.contact-num{display: flex;justify-content: center;align-items: center;font-size: var(--font-size-26);font-weight: var(--font-weight-600);color: #FFF;width: 60px;height: 60px;background-color: #f10a0a;border-radius: 13px;overflow: hidden;}

.contact-contents{width: calc( 100% - 92px );}

.contact-text{font-size: var(--font-size-22);font-weight: var(--font-weight-500);color: #FFF;line-height: 140%;margin-bottom: 25px;}
.contact-text-flex{display: flex;align-items: flex-end;justify-content: space-between;}
.contact-text-flex>span{font-size: var(--font-size-14);font-weight: var(--font-weight-400);color: #FFF;margin-bottom: 30px;}

.contact-check{display: flex;align-items: center;gap: 8px;position: relative;}
.contact-check input[type=checkbox], .contact-check input[type=radio]{position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;outline: 0;z-index: -1;overflow: hidden;}
.contact-check input[type=checkbox] + label, .contact-check input[type=radio] + label{cursor: pointer;}
.contact-check input[type=checkbox] + label span, .contact-check input[type=radio] + label span{display: flex;justify-content: center;align-items: center;gap: 15px;width: 205px;height: 80px;border: 1px solid #FFF;border-radius: 8px;overflow: hidden;opacity: .4;}
.contact-check input[type=checkbox] + label span img, .contact-check input[type=radio] + label span img{display: block;}
.contact-check input[type=checkbox] + label span b, .contact-check input[type=radio] + label span b{font-size: var(--font-size-18);font-weight: var(--font-weight-500);color: #FFF;}
.contact-check input[type=checkbox]:checked + label span, .contact-check input[type=radio]:checked + label span{opacity: 1;}

.contact-field-wrap{display: flex;flex-wrap: wrap;gap: 8px;}
.contact-field{position: relative;width: calc( ( 100% - 8px ) / 2 );}
.contact-field b{position: absolute;top: 7px;right: 11px;font-size: var(--font-size-18);font-weight: var(--font-weight-600);color: #FFF;}

.contact-input{display: block;width: 100%;height: 60px;line-height: 60px;border: 1px solid #353535;color: #FFF;padding: 0 23px;background-color: #1b1b1b;outline: none !important;border-radius: 5px;overflow: hidden;}
.contact-input::placeholder{color: rgba(255,255,255,.4);}
.contact-input:focus{border-color: #FFF;}
.contact-input:focus::placeholder{color: rgba(255,255,255,1);}

.contact-textarea{min-height: 180px;resize: vertical;line-height: 160%;padding: 16px 23px;}

.detail-up{display: none;}

/*Mobile*/
#contact-scroll{display: none;}

@media screen and (max-width: 1280px){
	
	.contact-wrap>div{flex-direction: column;}
	.contact-left, .contact-right{width: 100%;}
	.contact-left{margin-bottom: 100px;}
	
	.contact-title h4{margin-bottom: 45px;}
	.contact-title p{line-height: 180%;}
	
	.contact-info{margin-top: 20px;}
	.contact-info .info-rgt{display: flex;}

	.contact-sns{margin-top: 40px;}

	.contact-num{width: 50px;height: 50px;}

	.contact-contents{width: calc( 100% - 82px );}

	.contact-check input[type=checkbox] + label span, .contact-check input[type=radio] + label span{gap: 10px;width: 200px;height: 65px;}
}

@media screen and (max-width: 720px){
	
	#contact-1{padding-bottom: 50px;}

	.contact-info .info-rgt{display: block;}

	.contact-box{gap: 20px;margin-bottom: 65px;}

	.contact-num{width: 45px;height: 45px;font-size: 18px;margin-top: 1px;}

	.contact-contents{width: calc( 100% - 65px );}

	.contact-text{font-size: 17px;margin-bottom: 18px;}

	.contact-text-flex{display: block;}
	.contact-text-flex .contact-text{margin-bottom: 18px;}
	.contact-text-flex>span{display: block;font-size: 12px;margin-bottom: 18px;}

	.contact-check{gap: 6px;}
	.contact-check input[type=checkbox] + label, .contact-check input[type=radio] + label{width: calc( ( 100% - 6px ) / 2 );}
	.contact-check input[type=checkbox] + label span, .contact-check input[type=radio] + label span{gap: 8px;width: 100%;height: 60px;}
	.contact-check input[type=checkbox] + label span b, .contact-check input[type=radio] + label span b{font-size: 15px;}
	.contact-check input[type=checkbox] + label span img, .contact-check input[type=radio] + label span img{max-height: 21px;}

	.contact-field-wrap{flex-direction: column;}
	.contact-field{width: 100%;}

	.contact-input{height: 50px;line-height: 50px;padding: 0 18px;font-size: 14px !important;}

	.contact-textarea{padding: 16px 18px;}

	.contact-wrap .check-box input[type=checkbox] + label, .contact-wrap .check-box input[type=radio] + label{flex-wrap: wrap;}
	.contact-wrap .check-box input[type=checkbox] + label a, .contact-wrap .check-box input[type=radio] + label a{display: none;}

	/*Mobile*/
	#contact-scroll{display: block;position: fixed;bottom: 20px;left: 5%;width: 90%;height: 54px;line-height: 52px;border-radius: 54px;font-size: 18px;font-weight: 400;background: var(--color-1);color: #FFF;text-align: center;z-index: 1;}
}

/*-- contact page -> 첨부파일 추가 --*/
.filebox{display: flex;align-items: center;gap: 10px;position: relative;}
.filebox .dummy-button{display: flex;align-items: center;justify-content: center;gap: 8px;font-weight: 600;width: 140px;height: 60px;background: var(--color-1);color: #FFF;border-radius: 5px;overflow: hidden;}
.filebox .dummy-button i{font-size: var(--font-size-18);padding-bottom: 2px;}
.filebox .upload-name{width: calc( 100% - 150px );text-overflow: ellipsis;}

.filebox label{position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;z-index: 1;}
.filebox input[type=file]{position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;border: 0;outline: 0;z-index: -1;overflow: hidden;}

@media screen and (max-width: 1480px){
	
	.filebox{gap: 8px;}
	.filebox .dummy-button{width: 120px;}
	.filebox .upload-name{width: calc( 100% - 128px );}
}

@media screen and (max-width: 1080px){
	
	.contact-field-file{width: 100%;}
}

@media screen and (max-width: 720px){
	
	.filebox .dummy-button{gap: 6px;width: 90px;height: 50px;}
	.filebox .upload-name{width: calc( 100% - 98px );}
	.filebox .dummy-button i{padding-bottom: 1px;}
}