img {max-width: 100%}
#fp-nav {display: none}

.contentFelx {
	position: absolute;
	top:0;
    left: 0;
    right: 0;
    bottom: 0; 
    display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden;
}
.zizel1 .txt {line-height: 1.2}
.zizel1 .logo {
	width: 60vw; margin: 10vw 0 25vw;   
}
.zizel1 .vip {
	font-size: 25px; font-weight: 600;
}
.btn_arrow {position: absolute; bottom: 20px; left: 50%; transform:translate(-50%, 0); display: block; width: 40px; height: 20px; background: url('../images/bbs_arrow.svg') no-repeat center center; background-size: contain}
.btn_arrow.wh {background: url('../images/bbs_arrow_wh.svg') no-repeat center center;}

.zizel2 {background: url('../images/building_ill.png') no-repeat bottom center; background-size: contain}
.zizel2 .title_h2 {margin-bottom: 10vw}
.zizel2 .txt {line-height: 1.6; font-family:'Noto Sans KR';}
.zizel2 .txt p {font-size: 11px; margin-bottom: 15px}
.zizel2 .txt p:last-child {margin: 0}

.summary_data {text-align: left; margin: 30px 0 0; font-family:'Noto Sans KR'; }
.summary_data li {display: flex; height: 25px; align-items: center; border-bottom:1px solid #2b2022; font-size: 12px; }
.summary_data li em {font-weight: 500; width: 60px;}

.zizel3 {background: url('../images/bg_building.jpg') no-repeat center center; background-size: cover}
.zizel3 .data {position: absolute; top:0; left: 0; right: 0; height: 80vw; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.zizel3 .noti {width: 6px; position: absolute; right: 10px; bottom: 10px}
.zizel3 .noti img {width: 100%}

.zizel4 .map {width: 84vw; margin-bottom: 10vw}
.zizel4 .call {width: 60vw}
.zizel4 .contentFelx {position: absolute; top:0; left: 0; right: 0; height:calc(100vh - 65px); bottom: 65px;}
.btn_homepage {position: absolute; left: 0; right: 0; bottom: 0; height: 65px; background: #000 url('../images/txt_homepage.svg') no-repeat center center; background-size:auto 16px}

.title_h2 {font-size: 28px; font-weight: 600;}

.active .motion {	
	animation: fadein 3s;
	-moz-animation: fadein 3s; /* Firefox */
	-webkit-animation: fadein 3s; /* Safari and Chrome */
	animation-iteration-count:1;
	animation-fill-mode:backwards;
}
.active .motion:nth-child(1) {animation-delay: .5s;}
.active .motion:nth-child(2) {animation-delay: 1s;}
.active .motion:nth-child(3) {animation-delay: 1.5s;}



@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*** gnb ***/
.global_gnb .gnb_tab {position: relative; z-index: 1;}
.global_gnb .gnb_tab ul {display: flex;}
.global_gnb .gnb_tab li {width: calc(100% / 9); text-align: center}
.global_gnb .gnb_tab li a {display: block; height: 40px; line-height: 40px; background: #000; color: #fff; font-size: 14px; box-sizing: border-box; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s;  -o-transition: all 0.2s; transition: all 0.2s;}
.global_gnb .gnb_tab li.m01 a {background:#399235}
.global_gnb .gnb_tab li.m02 a {background: #015b41;}
.global_gnb .gnb_tab li.m03 a {background: #1d448f;}
.global_gnb .gnb_tab li.m04 a {background: #ff8400;}
.global_gnb .gnb_tab li.m05 a {background: #ffc300;}
.global_gnb .gnb_tab li.m06 a {background: #ffa0c0;}
.global_gnb .gnb_tab li.m07 a {background: #e14479;}
.global_gnb .gnb_tab li.m08 a {background: #6838b1;}
.global_gnb .gnb_tab li.m09 a {background: #9a1b1e;}
.global_gnb .gnb_tab li.active a, .global_gnb .gnb_tab li a:hover{background: #fff; color: #000;}

#brandsite_gnb {position: fixed; top: 0; left: 0; right:0; z-index: 100}

#header {width: 1200px; height: 66px; margin: 25px auto 0; display: flex; justify-content: space-between;  align-items: center}
#header .logo {width: 66px; height: 66px}
#header .logo a {display: inline-block; width: 66px; height: 66px}
#header #gnb-wrap {flex: 1 1 0;}
#header #gnb {display: flex; margin-left: 70px;}
#header #gnb li {margin-right: 70px}
#header #gnb li a {font-size: 21px; color: #000;}
.header-top .lang {font-size: 21px; color: #000;}



/*** 메인 ***/
.w_wrap {width: 1200px; margin: auto;}
#section0{position:relative;}
#section0 .contentFelx .txt {}
#section0 .txt h1 {font-size: 70px; font-weight: 600; text-align: left; display: inline-flex;}
#section0 .txt h1 span {margin: 0 0.3px}
#section0 .txt h1 span:nth-child(5) {margin: 0 15px;}
#section0 .txt h1 .or {color: #f5ab47}
#section0 .txt h1 .bl {color: #6dc8f2}
#section0 .txt h1 .re {color: #e6624b}
#section0 .txt h1 .gr {color: #bcd755}
#section0 .txt h2 {font-size: 21px; font-weight: 300; text-align: left;}
#section0 .txt .color {}
#section0 .main_visual {margin-right: -20vw}

#fullpage .txt h3 {font-size: 58px; font-weight: 600;}
#fullpage .txt h4 {font-size: 20px; font-weight: 300; margin-top: 15px; letter-spacing: -0.5px}
#fullpage .txt.wh {color: #fff}
.btn_more {display: inline-block; box-sizing: border-box; padding: 15px 60px; font-size: 14px; border-radius: 30px; border: 1px solid #afafaf; margin-top: 0px;}
.btn_more.wh {color: #fff; border: 1px solid #fff;}

#section0 .contentFelx {flex-direction: row;}
#section0 .contentFelx.futurebook {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw}
/* #section0 .contentFelx.sylvanian {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
	url('../images/main_visual_sylvanian.png') no-repeat center right}
#section0 .contentFelx.harp {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
	url('../images/main_visual_harp.png') no-repeat center right}
#section0 .contentFelx.mini {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
	url('../images/main_visual_mini.png') no-repeat center right}
#section0 .contentFelx.moon {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
	url('../images/main_visual_moon.png') no-repeat center right}
#section0 .contentFelx.bread {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
	url('../images/main_visual_bread.png') no-repeat center right} */

    .swip-con{width:100%;}
    .swip-con .mainbn-swip{width:100%;}
    .swip-con .mainbn-swip .swiper-slide{display:flex;justify-content:flex-end;}
 /* .mainbn-swip .swiper-slide img{opacity:0;}   
 .mainbn-swip .swiper-slide-active img{opacity:1 !important;} */
   
 #section0 .swip-con{position:absolute;top:50%;z-index:0;width:1650px;margin:0 auto;transform:translateY(-46%);}

#section1 .contentFelx {background: url('../images/bg_company.jpg') no-repeat 47% center; background-size: 170%}
#section2 .contentFelx, #section5 .contentFelx {background: url('../images/bg_brand_left_down.png') no-repeat bottom left, url('../images/bg_brand_right_top.png') no-repeat top right;}
#section6 .contentFelx {background: url('../images/bg_contactus.jpg') no-repeat center center; background-size: cover}

#section0 .txt {float: left;position:relative;z-index:9;}
#section3 video {position: absolute; overflow: hidden; bottom: 0;  top: 0; right: 0; min-width: 100vw; min-height: 100vh; background-color: black; background-position: center center; background-size: contain; object-fit: cover; z-index: -1;}
#section3 .w_wrap {z-index: 1}
#section3 .content_box {float: right;}
#section3 .brand_logo {width: 280px; margin: 0 auto 25px;}
#section3 .txt h3 {font-size: 50px}
#section3 .dim_box {position: absolute; top:0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.2)}


#section2 .brand_list, #section5 .news_list ul {display: flex; justify-content: space-around; margin-top: 80px;}
#section2 .brand_list{position:relative;margin: 50px 0 80px;}
#section2 .brand p {font-size: 18px; margin-top: 20px}
#section2 .brand_list .swiper-button-prev{left:-20px;}
#section2 .brand_list .swiper-button-next{right:-20px;}
#section2 .brand_list .swiper-button-next, #section2 .brand_list .swiper-button-prev{color:#292929;}
#section2 .brand_list .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:-55px;}
#section2 .brand_list .swiper-pagination-bullet-active{background-color:#222;}
/* #section2 .btn_more{margin-top:40px;} */

#section4 {background-color: #f3efcc}
#section4 .cat_img {margin: 30px 0}
#section4 .btn_box {width: 780px; display: flex; justify-content: space-between; align-content: center; margin: auto}
#section4 .btn_box .btn_cat {box-sizing: border-box; width: 240px; height: 60px; line-height: 60px; text-align: center; font-size: 15px; color: #fff; background-color: #0f8537; border-radius: 30px;}

#section5 .news_list .news {width: 345px; border: 1px solid #dbdbdb; border-radius: 30px 10px 30px 10px; overflow: hidden;}#section4 .news_list .news .txt_box {padding: 20px 30px; box-sizing: border-box;}
#section5 .news_list .news .img_box {max-height: 245px;}
#section5 .news_list .news .txt_box {text-align: left; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; padding: 20px 30px}
#section5 .news_list .news .txt_box .news_tit {font-size: 18px; color: #292929;}
#section5 .news_list .news .txt_box .news_date {font-size: 13px; color: #292929}
 


@media screen and (min-width: 1950px) {
	#section0 .contentFelx {
		background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
	url('../images/main_visual.png') no-repeat center right 10vw; background-size: auto, auto, 50vw
	}
}

@media screen and (min-width: 1366px) {

}

@media screen and (max-width: 1366px) {
	#header {width: 1000px}
	.w_wrap {width: 1000px}
	#header #gnb li {margin-right: 40px;}
	#header #gnb li a {font-size: 18px}
	.header-top .lang a {font-size: 18px}
	
	#section0 .contentFelx {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
		url('../images/main_visual.png') no-repeat center right -40px; background-size: 20vw, auto, 63vw}
	#section4 .cat_img {width: 700px; margin: 30px auto}
	#section4 .btn_box {width: 700px}
	#section4 .btn_box .btn_cat {width: 30%; height: 55px; line-height: 55px}
	#section5 .news_list .news {width: 30%}
}

@media screen and (min-width: 1000px) {

}

@media screen and (max-width: 1000px) {
	#header {width: 800px; height: 50px}
	#header .logo {width: 50px; height: 50px}
	#header .logo a {width: 50px; height: 50px}
	.w_wrap {width: 800px}
	#header #gnb {margin-left: 30px}
	#header #gnb li {margin-right: 30px;}
	#header #gnb li a {font-size: 16px}
	.header-top .lang a {font-size: 16px}
	
	.btn_more {margin-top: 30px; padding: 10px 50px}
	
	#section0 .txt h1 {font-size: 55px;}
	#section0 .txt h2 {font-size: 18px}
	#fullpage .txt h3 {font-size: 40px}
	#fullpage .txt h4 {font-size: 15px; margin-top: 0}
	#section0 .contentFelx {background: url('../images/bg_main_left_top.png') no-repeat top 40px left, url('../images/bg_main_left_down.png') no-repeat bottom left 10vw, 
		url('../images/main_visual.png') no-repeat 107% 20vh; background-size: 20vw, auto, 63vw}
	#section2 .brand_list, #section5 .news_list ul {margin-top: 40px;}
	#section2 .brand_list .brand {width: 25%}
	#section3 .content_box img {width: 250px}
	#section4 .cat_img {width: 500px; margin: 10px auto}
	#section4 .btn_box {width: 500px}
	#section4 .btn_box .btn_cat {width: 30%; height: 55px; line-height: 55px}
	#section5 .news_list .news {width: 30%}
}