@charset "utf-8";
#wrap {float:left; width:100%; background:#141414; overflow:hidden; transition:all 0.5s;}
html{scroll-behavior: smooth;}
/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.header_wrap{float:left; width:100%; position:fixed; top:0; z-index:1000;}
.header_wrap.down{background:rgba(66,38,0,0.9); box-shadow:0 0 8px rgba(0,0,0,0.7);}
.header_box{float:left; width:100%; padding:0 10px; border-bottom:1px solid rgba(255,255,255,0.2);}
.header_wrap.down .header_box{border:none;}
.gnb{float:left; width:100%;}
.gnb ul{float:left; width:100%; display:flex; align-items:center; justify-content:center; transition: all 0.3s;}
.gnb ul li{float:left; margin:0 20px; transition: all 0.3s;}
.gnb ul li a{display:block; padding:15px 10px; font-family: 'Giants-Bold'; font-size:20px; color:#ffffff; transition: all 0.3s;}
.gnb ul li:hover a{color:#ff7600;}
.logoB img{display:inline-block; width:70px;}
.sns img{display:inline-block; width:40px;}
@media screen and (max-width:1024px) {
    .gnb ul{display:grid; grid-gap: 5px; grid-template-columns: repeat(4, 1fr);}
    .gnb ul li{width:100%; margin:0;}
    .gnb ul li a{width:100%; padding:10px 5px; text-align:center; font-size:15px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);}
	.logoB{grid-column: 1 / span 4; display:none;}
	.header_wrap.down .logoB{display:block;}
	.gnb ul li.sns{position:fixed; top:100px; right:10px; width:50px; padding:0px; text-align:center; border-radius:10px; background:rgba(66,38,0,0.9); transition: all 0.3s;}
	.gnb ul li.sns img{width:100%;}
	.header_wrap.down .sns{top:200px;}
}

.main_visual{float:left; width:100%; height:100vh; min-height:300px; background:linear-gradient(rgba(0, 0, 0, 0) 30%,  rgba(0, 0, 0, 0.7)),url(../images/bg_visual.jpg), center top no-repeat; background-size:cover; display:flex; flex-direction: column; align-items:center; justify-content:center; padding:0 20px; padding-bottom:3.13vw; transition: all 0.3s; position: relative; z-index:1;} 
.main_visual_title{float:left; width:100%; text-align:center; font-family: 'Giants-Bold'; font-size:5.21vw; color:#ffffff; font-style:italic; text-shadow:2px 3px 10px rgba(0,0,0,0.3);transition: all 0.3s;}
.main_visual_text{float:left; width:100%; margin:20px 0 0 0; text-align:center; font-weight:500; font-size:20px; color:#ffffff; line-height:1.5; transition: all 0.3s;}

.bg-video {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; opacity: 1;}

.bg-video__content {height: 100%; width: 100%; object-fit: cover;}


@media screen and (max-width:1024px) {
.main_visual{}	
.main_visual_title{font-size:40px;}	
.main_visual_text{margin:10px 0 0 0; font-size:12px;}	
}

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

.main_contents_wrap{float:left; width:100%; background:url(../images/bg.jpg) center top no-repeat; background-size:100%; padding-bottom:40px;}
.main_contents_box{width:100%; max-width:1400px; margin:0 auto; min-height:400px; padding:0 10px;}
.main_contents_wrap2{float:left; width:100%; background:url(../images/8456421.jpg) center top no-repeat fixed; background-size:cover; padding-bottom:40px;}
.main_contents_box2{width:100%; max-width:1400px; margin:0 auto; min-height:400px; padding:0 10px;}

@media screen and (max-width:768px) {
	.main_contents_wrap{background:url(../images/bg.jpg) center top repeat;}
}

/* main_site_list_box */
.main_site_list_box{float:left; width:100%; padding:90px 0; display:grid; grid-gap: 40px; grid-template-columns: repeat(4, 1fr);  transition: all 0.3s;}

.main_site_list{float:left; width:100%; height:100%; border-radius:10px; overflow:hidden; background:#202020; box-shadow:0 0 10px rgba(189,134,59,0.7); border:1px solid rgba(189,134,59,0.46); display: flex; flex-direction: column; transition: all 0.3s;}


.msl_img{float:left; width:100%; position:relative; height:0; padding-bottom:62.5%; overflow:hidden; transition:all 0.5s;}
.msl_img img{position:absolute; top:0; left:0; width:100%; background:#5b5b5b; transition:all 0.5s;}

.msl_img{animation: waviy 4s infinite; animation-delay: calc(.5s * var(--i));}

.msl_middle{float:left; width:100%; text-align:center; background:url(../images/bg_logozone.jpg) center top no-repeat; background-size:cover; padding:30px 10px; transition: all 0.3s;}

.msl_logo{float:left; width:100%; text-align:center;}
.msl_logo img{width:100%; max-width:240px;}
.msl_sname{float:left; width:100%; margin:10px 0 0 0; text-align:center; padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: 'Giants-Bold'; font-weight:700; font-size:30px; color:#ffffff; transition: all 0.3s;}

.msl_bottom{float:left; width:100%; text-align:center; background:#202020; padding:20px 20px; display:flex; flex-direction: column; flex:1;  transition: all 0.3s;}

.msl_stext{float:left; width:100%; text-align:center; max-height:124px; margin-bottom:10px; font-weight:500; font-size:16px; color:#ffffff; line-height:1.5;   overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5;  /* 2줄 넘어가면 말줄임 */ -webkit-box-orient: vertical; transition: all 0.3s;}
.msl_btn{float:left; width:100%; margin:auto 0 0 0;}
.msl_btn a{display:block; width:100%; text-align:center; height:50px; line-height:50px; border-radius:10px; background:linear-gradient(to right, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%); font-weight:500; font-size:18px; color:#000000; transition: all 0.3s;}
/* .msl_btn a:hover{filter:brightness(150%);} */

.msl_btn a{position:relative; overflow:hidden;}
.msl_btn a::after{top: 0px; left: -130%; width: 100%; height:100%; content: ""; overflow: hidden; position: absolute; background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); -moz-transform: skewX(-25deg); -webkit-transform: skewX(-25deg);}
.msl_btn a:hover::after{left: 150%; transition: left 1s ease 0s;}

@media screen and (max-width:1440px) {
	.main_site_list_box{padding:6.25vw 0; grid-gap: 10px;}
}
@media screen and (max-width:1024px) {
	.main_site_list_box{grid-template-columns: repeat(2, 1fr);}
	.msl_sname{font-size:20px;}
}
@media screen and (max-width:768px) {
    .msl_bottom{padding:20px 10px;}
    .msl_sname{font-size:18px;}
	.msl_stext{font-size:14px; max-height:86px;}
	.msl_btn a{height:40px; line-height:40px; font-size:14px;}
}


/* main_site_stromg_box */
.main_site_stromg_box{float:left; width:100%; padding:60px 0; transition: all 0.3s;}
.mss_title{float:left; width:100%; text-align:center; font-family: 'Giants-Bold'; font-size:70px; color:#ffffff; transition: all 0.3s;}
.mss_title span{color:#ff7600;}
.main_site_strong_list_box{float:left; width:100%; margin:30px 0 0 0;}
.main_site_stromg_list{float:left; width:100%; margin:40px 0 0 0; display:flex; align-items:center; transition: all 0.3s;}
.mssl_left{float:left; width:35%; overflow:hidden; border-radius:5px; box-shadow:0px 0px 10px 0px rgba(189,134,59,0.4); transition: all 0.3s;}
.mssl_left img{display:inline-block; width:100%; transition: all 0.3s;}
.mssl_left img{animation-delay: calc(0.2s * var(--i));}
.mssl_right{float:left; width:65%; padding:0 30px; transition: all 0.3s;}
.mssl_title{float:left; width:100%; font-weight:700; font-size:26px; color:#ff7600; transition: all 0.3s;}
.mssl_title{background:linear-gradient(to right, #f1cd6e 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #f1cd6e 100%); background-size: 20rem 20rem; -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.mssl_text{float:left; width:100%; margin:10px 0 0 0; font-weight:500; font-size:16px; color:#ffffff; line-height:1.5; transition: all 0.3s;}

@media screen and (max-width:1024px) {
	.main_site_stromg_box{padding:4.17vw 0;}
	.mss_title{font-size:4.86vw;}
	.main_site_stromg_list{ flex-wrap:wrap;}
	.mssl_left{text-align:center; width:100%;}
	.mssl_right{margin:10px 0 0 0; width:100%; padding:0 10px;}
	.mssl_title{text-align:center; font-size:18px;}
	.mssl_text{text-align:center; font-size:14px;}

}

/* 신규 강점 */
.card1{background:url(../images/card_img1.jpg) center top no-repeat; background-size:cover;}
.card2{background:url(../images/card_img2.jpg) center top no-repeat; background-size:cover;}
.card3{background:url(../images/card_img3.jpg) center top no-repeat; background-size:cover;}
.card4{background:url(../images/card_img4.jpg) center top no-repeat; background-size:cover;}
.mss_card_box{overflow: hidden; position: relative; width:100%; height:25vw; min-height:480px; border-radius:10px; perspective: 1000rem; transition-duration: 0.8s;}
.mss_card_box_in{display: block; position: relative; width: 100%; height: 100%; text-align: left; white-space: normal; transform-style: preserve-3d; transition: transform 0.5s;}
.mss_card_img{overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: max(23.76px, 2.34375vw) 0 0 max(18.48px, 1.8229166667vw); border-radius:10px; transform: rotateY(0deg) translateZ(0.1px); transition: box-shadow 1s; backface-visibility: hidden;} 
.mss_card_info{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; flex-direction: column; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: max(23.76px, 2.34375vw) max(26.4px, 2.6041666667vw) max(26.4px, 2.6041666667vw) max(18.48px, 1.8229166667vw); border-radius:10px; transform: rotateY(180deg) translateZ(0.1px); box-shadow: calc(max(1.98px, 0.1953125vw)* -1) calc(max(1.98px, 0.1953125vw)* -1) max(79.2px, 7.8125vw) 0 rgba(189,134,59, 0.1); background-color: #1e1e1e;  backface-visibility: hidden;}

.mss_card_box:hover  .mss_card_box_in{transform: perspective(800px) rotateY(180deg);}

.mss_card_img_text{float:left; width:100%; font-weight:700; font-size:26px; color:#ff7600; transition: all 0.3s;}
.mss_card_img_text{background:linear-gradient(to right, #f1cd6e 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #f1cd6e 100%); background-size: 20rem 20rem; -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.mss_card_info_text{float:left; width:100%; margin:10px 0 0 0; font-weight:300; font-size:16px; color:#ffffff; line-height:1.5; transition: all 0.3s;}

.main_site_strong_list_box{position:relative; padding-bottom:60px;}
/* .main_site_strong_list_box .swiper-pagination{display:none;} */
.main_site_strong_list_box .swiper-pagination .swiper-pagination-bullet{width: 8px; height: 8px; background-color: #999999; border: 1px solid #878D96; opacity: 1;transition: all 0.3s;}
.main_site_strong_list_box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px; height: 8px; border-radius: 999px; background-color: #ff7600; border: 1px solid #ff7600; opacity: 1;}

@media screen and (max-width:1280px) {
    .mss_card_box{min-height:380px;}
    .mss_card_info_text{font-size:12px;}
}







/* main_site_important */
.main_site_important{float:left; width:100%; padding-top:70px; padding-bottom:70px; border-bottom:1px solid rgba(255,255,255,0.2); transition:all 0.5s;}
.main_site_important:last-child{border:none;}
.main_site_important_img{float:left; width:100%; position:relative; height:0; padding-bottom:20%; overflow:hidden; border-radius:10px; transition:all 0.5s;}
.main_site_important_img{border:1px solid transparent; border-radius: 5px; background-image: linear-gradient(#171717, #171717),  linear-gradient(to right, #f1cd6e 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #f1cd6e 100%); background-origin: border-box; background-clip: content-box, border-box;}
.main_site_important_img img{position:absolute; top:0; left:0; width:100%; background:#5b5b5b; transition:all 0.5s;}

.main_site_important_info{float:left; width:100%; margin:40px 0 0 0; display:flex; transition: all 0.3s;}
.main_site_important_info_left{float:left; width:30%; padding-right:10px}
.main_site_important_info_right{float:left; width:70%; padding:0 20px; font-weight:300; font-size:16px; color:#ffffff; line-height:1.5;}


.msii_btn{float:left; width:100%;}
.msii_btn a{display:block; width:100%; text-align:center; height:90px; line-height:90px; border-radius:10px; background:linear-gradient(to right, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%); font-weight:700; font-size:36px; color:#000000; transition:all 0.5s;}
/* .msii_btn a:hover{filter:brightness(150%);} */

.msii_btn a{position:relative; overflow:hidden;}
.msii_btn a::after{top: 0px; left: -130%; width: 100%; height:100%; content: ""; overflow: hidden; position: absolute; background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); -moz-transform: skewX(-25deg); -webkit-transform: skewX(-25deg);}
.msii_btn a:hover::after{left: 150%; transition: left 1s ease 0s;}

.msii_logo{float:left; width:100%; margin:20px 0 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; font-size:30px; color:#ffffff;}
.msii_sname{float:left; width:100%; margin:20px 0 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: 'Giants-Bold'; font-weight:700; font-size:30px; color:#ffffff;}
.msii_text{float:left; width:100%; margin:20px 0 0 0; font-weight:500; font-size:24px; color:#ffffff; line-height:1.5;}
.imp_font01{color:#ffea00;}

@media screen and (max-width:1024px) {
	.main_site_important{padding-top:90px;}
	.main_site_important_img{padding-bottom:40%;}
	
    .main_site_important_info{margin:20px 0 0 0; flex-wrap:wrap;}
    .main_site_important_info_left{width:100%; padding:0;}
    .main_site_important_info_right{width:100%; margin:20px 0 0 0; display:none;}
	.msii_btn a{height:60px; line-height:60px; font-size:20px;}
	.msii_logo{text-align:center;}
	.msii_sname{text-align:center; font-size:18px;}
	.msii_text{text-align:center; font-size:16px;}
	.main_site_important_info_right{text-align:center; font-size:14px;}
}



.main_site_video_box{float:left; width:100%; padding:60px 0; transition: all 0.3s;}

@media screen and (max-width:1024px) {
	.main_site_video_box{padding:4.17vw 0;}

}















.footer_wrap{float:left; width:100%; text-align:center; background:#282828; padding:30px 20px 50px;}
.footer_menu{float:Left; width:100%;}
.footer_menu ul{float:Left; width:100%; display:flex; align-items:center; justify-content:center;}
.footer_menu ul li{float:Left; margin:0 20px;}
.footer_menu ul li a{display:block; padding:30px 10px; font-family: 'Giants-Bold'; font-weight:700; font-size:20px; color:#ffffff; transition: all 0.3s;}
.footer_menu ul li:hover a{color:#ff7600;}
.f_copy{float:left; width:100%; text-align:center; font-size:14px; font-weight:300; color:#737373;}


@media screen and (max-width:1024px) {
    .footer_menu ul{display:grid; grid-gap: 5px; grid-template-columns: repeat(4, 1fr);}
    .footer_menu ul li{width:100%; margin:0;}
    .footer_menu ul li a{width:100%; padding:10px 5px; text-align:center; font-size:15px;}
    .f_copy{margin:20px 0 0 0;}
}