/*main.css*/
.table_box{display: table-cell; vertical-align: middle; text-align: center;}

/*공통요소*/
.main_sec{width: 100%;}
.inner{max-width: 1800px; width: 100%; margin: 0 auto;}
#main_tit{font-family: 'pretendard-variable';}
#main_tit span{color: #18a2e2; display: block;}

.main_sec .button_link{margin-top: 40px;}
.main_sec .button_link a{color: #18a2e2; display: inline-block; padding: 5px 15px; transition: .25s; border-radius: 3px; border: 1px solid #dbdbdb; box-sizing: border-box; font-family:'pretendard-variable'; }
.main_sec .button_link a:hover{background: #18a2e2; color: #fff; border: 1px solid #18a2e2;}

.main_sec .main_flex{width: 100%; display: flex; flex-wrap: wrap;}
.main_sec .main_flex > div:nth-child(1){width: 28%;}
.main_sec .main_flex > div:nth-child(2){width: 72%;}

.main_tab ul{display: flex; flex-direction: column; align-items: flex-start;}
.main_tab ul li{font-size: 22px; font-weight: 800; color: #9b9b9b; cursor: pointer; display: inline-block; margin-bottom: 10px; font-family: 'pretendard-variable';}
.main_tab ul li.on{color: #18a2e2; position: relative;}
.main_tab ul li.on::before{content: ''; width: 100%; height: 15px; background: #efefef; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); z-index: -1;}
.main_tab ul.row{flex-direction: row;}
.main_tab ul.row li:not(:last-child){margin-right: 20px;}


.swiper-button-next,
.swiper-button-prev{background: #fff; width: 40px; height: 40px; border-radius: 100%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; color: #000; text-align: center; line-height: 40px; font-size: 18px;box-shadow: 4px 5px 20px 0px #56565640;}
.swiper-button-next:hover,
.swiper-button-prev:hover{background: #18a2e2; color: #fff;}

.swiper-pagination-fraction{font-size: 17px; position: absolute; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.main_sec1 .inner{max-width: 1200px; width: 100%; margin: 0 auto;}

@media screen and (max-width : 1800px) {
    .inner{padding: 0 20px !important;}
}
@media screen and (max-width : 1020px) {
	.main_sec .main_flex > div:nth-child(1){width: 100%;}
	.main_sec .main_flex > div:nth-child(2){width: 100%; margin-top: 30px;}
	.main_tab ul{flex-direction: row;}
	.main_tab ul li:not(:last-child){margin-right: 20px;}
	.main_sec .button_link a{font-size: 15px !important;}
}
@media screen and (max-width : 768px) {
	.swiper-button-next,
	.swiper-button-prev{width: 30px; height: 30px; line-height: 30px; font-size: 15px;}
	.swiper-pagination-fraction{font-size: 15px;}
	.main_sec .button_link a{font-size: 13px !important;}
}

/* main_sec1 */
.main_sec1{padding-top: 150px; padding-bottom:150px}
.main_sec1 .main_show .prod_latest{display: none;}
.main_sec1 .main_show .prod_latest.on{display: block;}

.main_sec1 .bottom_ctt{width: 100%; margin-top: 50px; position: relative;}
/*.main_sec1 .bottom_ctt::before{content: ''; width: 100%; height: 370px; background: #efefef; position: absolute; bottom: 0; left: 0; z-index: -1;}*/

@media screen and (max-width : 1200px) {
	.main_sec1{padding-top: 80px;}
	.main_sec1 .bottom_ctt .inner{padding: 0 !important;}
}
@media screen and (max-width : 900px) {
	.main_sec1 .bottom_ctt::before{height: 300px; }
}

/* main_sec2 */
.main_sec2{padding: 180px 0;}
.main_sec2 .main_tab{margin-top: 50px;}

.main_pcs{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.main_pcs li{width: calc(33.3333% - 10px); min-height: 300px; padding: 20px; border-top: 1px solid #c8c8c8; position: relative; transition: .25s;}
.main_pcs li > img{position: absolute; right: 20px; top: 20px;}
.main_pcs li .hide{position: absolute; bottom: 20px; left: 20px; height: 38px; overflow: hidden; line-height: 38px; transition: .25s;}
.main_pcs li .hide p{line-height: 150%;}
.main_pcs li:nth-child(1n+4){border-bottom: 1px solid #c8c8c8;}

.main_pcs li:hover .hide{height: auto;}
.main_pcs li:hover .hide p{opacity: 1; visibility: visible;}
.main_pcs li:hover .hide h3{color: #18a2e2;}
.main_pcs li:hover{border-top: 1px solid #18a2e2;}

.main_show .main_pcs{display: none;}
.main_show .main_pcs.on{display: flex;}

@media screen and (max-width : 1200px) {
	.main_sec2{padding: 80px 0 100px;}
}
@media screen and (max-width : 1020px) {
	#main_tit h3 br{display: none;}
	.main_sec2 .main_tab{margin-top: 20px;}
}
@media screen and (max-width : 900px) {
	.main_pcs li{width: calc(50% - 10px);  min-height: 250px; padding: 20px 10px;}
	.main_pcs li:nth-child(4){border-bottom: 0;}
	.main_pcs li .hide{left: 10px; height: auto; line-height: 30px;}
	.main_pcs li .hide p{opacity: 1; visibility: visible;}
}
@media screen and (max-width : 550px) {
	.main_pcs li{width: calc(100%);  min-height: 200px;}
	.main_pcs li:nth-child(3){border-bottom: 0;}
	.main_pcs li > img{height: 60px;}
}


.main_sec .top_flex{width: 100%; display: flex; justify-content: center; }
.main_sec .top_flex .arrow{width: 180px; position: relative; height: 40px;}

/* main_sec3 */
.main_sec3{position: relative; width: 100%; padding: 140px 0 200px;}
.main_sec3::before{content: ''; width: 100%; height: 780px; background: url(../img/main/main_port_bg.png) no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: -1;}
.main_sec3 .bottom_ctt{width: 100%; margin-top: 50px; display: flex; flex-wrap: wrap;}
.main_sec3 .bottom_ctt .port_banner{width: calc(40% - 20px); height: auto; margin-right: 20px; background: url(../img/main/main_port_img.png) no-repeat; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 3%;}
.main_sec3 .bottom_ctt .port_latest{width: 60%;}

.main_sec3 .bottom_ctt .port_banner h3{color: #fff;}
.main_sec3 .bottom_ctt .port_banner a{color: #fff;}

@media screen and (max-width : 1200px) {
	.main_sec3{padding: 80px 0 100px}
	.main_sec3 .bottom_ctt .port_banner{width: calc(100%); height: auto; margin-right: 0px; order: 2; padding: 8% 20px 20px 20px; margin-top: 30px;}
	.main_sec3 .bottom_ctt .port_latest{width: 100%; order: 1;}
}
@media screen and (max-width : 768px) {
/*	.main_sec .top_flex{width: 100%; display: flex; flex-wrap; flex-direction: column; align-items: flex-start;}*/
	.main_sec .top_flex .arrow{width: 170px; position: relative; height: 40px; left: -20px;}
	.main_sec .top_flex #main_tit{margin-bottom: 10px;}
}




/* main_sec4 */
.main_sec4{position: relative; width: 100%; height: 980px;}
.main_sec4 .inner{height: 100%;}
.main_sec4 .hover_bg{position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1;}
.main_sec4 .hover_bg li{position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; visibility: hidden; transition: .25s;}
.main_sec4 .hover_bg li img{width: 100%; height: 100%; object-fit: cover;}
.main_sec4 .hover_bg li.on{opacity: 1; visibility: visible;}

.main_sec4 .half_hover{width: 100%; height: 100%;}
.main_sec4 .half_hover > ul{width: 100%; height: 100%; display: flex; flex-wrap: wrap; border: 1px solid #ccc; border-top: 0; border-bottom: 0;}
.main_sec4 .half_hover > ul > li{width: 50%; height: 100%; color: #fff; padding-left: 8%; position: relative; display: flex; flex-direction: column; justify-content: center; transition: .25s;}
.main_sec4 .half_hover > ul > li:first-child{border-right: 1px solid #ccc;}
.main_sec4 .half_hover > ul > li h2{color: #fff; padding-bottom:30px}
.main_sec4 .half_hover > ul > li p{padding: 15px 0 30px;}
.main_sec4 .half_hover > ul > li ul li{margin: 5px 0;}

.main_sec4 .half_hover > ul > li .half_a{position: absolute; bottom: 0; right: 0; width: 150px; height: 150px; line-height: 150px; text-align: center;}
.main_sec4 .half_hover > ul > li .half_a a{display: block; width: 100%; height: 100%; background: #18a2e2 ; color: #fff; transition: .25s; font-size: 17px; font-family:'pretendard-variable'}

.main_sec4 .half_hover > ul > li:hover{background: #0000006b;}
.main_sec4 .half_hover > ul > li:hover .half_a a{background: #fff ; color: #18a2e2;}

@media screen and (max-width : 1520px) {
	.main_sec4 .inner{padding: 0 !important;}
	.main_sec4 .half_hover > ul{border-left: 0; border-right: 0;}
	.main_sec4 .half_hover > ul > li{padding-left: 6%;}
}
@media screen and (max-width : 1200px) {
	.main_sec4 .half_hover > ul > li{padding-left: 4%;}
	.main_sec4 .half_hover > ul > li .half_a{width: 120px; height: 120px; line-height: 120px;}
	.main_sec4 .half_hover > ul > li .half_a a{font-size: 15px;}
}
@media screen and (max-width : 1020px) {
	.main_sec4{height: auto;}
	.main_sec4 .half_hover > ul > li{width: 100%; height: auto; padding: 12% 20px;}
	.main_sec4 .half_hover > ul > li:first-child{border-bottom: 1px solid #ccc; border-right: 0;}
}
@media screen and (max-width : 768px) {
	.main_sec4 .half_hover > ul > li .half_a{width: 90px; height: 90px; line-height: 90px;}
	.main_sec4 .half_hover > ul > li .half_a a{font-size: 13px;}
}


/* main_sec5 */
.main_sec5{padding: 180px 0 200px;}

.main_sec5 #main_tit {text-align:left}
@media screen and (max-width : 1200px) {
	.main_sec5{padding: 80px 0 120px;}
}



/* main_sec6 */
.main_sec6 {height: 500px; position: relative;}
.main_sec6 iframe{width: 100%; height: 100%;}
.main_sec6 .inner{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.main_sec6 .main_map{background: #18a2e2; display: inline-block; padding: 60px 5%; color: #fff; border-radius: 5px 5px 0 0; width: 40%}
.main_sec6 .main_map a{color: #fff; display: inline-block;}

.main_sec6 .main_map #main_tit span{color: #fff !important;}
.main_sec6 .main_map #main_tit h3{color: #fff !important;}

.main_sec6 .map_info{padding: 30px 0 0}
.main_sec6 .map_info h3{display: flex; align-items: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #4469b8;}
.main_sec6 .map_info h3 img{margin-right: 10px;}

.main_sec6 .map_info ul {display:flex}
.main_sec6 .map_info ul li:first-child {width:300px}

.main_sec6 .button_link{display: flex; align-items: center;}
.main_sec6 .button_link a.font-17{margin-right: 20px;}
.main_sec6 .button_link a.font-17:hover{background: #fff; color: #18a2e2;}
.main_sec6 .button_link a:hover{border: 1px solid #fff;}
.main_sec6 .button_link a.none{border: none; padding: 0; margin-left: 10px;}
.main_sec6 .button_link a.none img{filter: brightness(1.6); transition: .25s;}
.main_sec6 .button_link a.none img:hover{filter: brightness(10);}

@media screen and (max-width : 1200px) {
	.main_sec6 .main_map{padding: 50px 20px;}
}
@media screen and (max-width : 950px) {
	.main_sec6 .main_map{width: 50%; padding: 30px 20px;}
	.main_sec6 .map_info{padding: 15px 0 0}
}
@media screen and (max-width : 768px) {
	.main_sec6 {height: 600px;}
	.main_sec6 .main_map{width: 100%;  padding: 20px 20px;}
}