/*@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);*/

::-webkit-scrollbar {

display:none;

} 


@font-face {
  font-family: 'Athena';
  src: local('Athena'),
  	   url('../font/Athena-Regular.eot') format('embedded-opentype'),
       url('../font/Athena-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
    font-family: 'gotham';
    src: url('../font/GOTHAM-BOLD.eot');
    src: local('../font/GOTHAM-BOLD'),
        url('../font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'),
        url('../font/GOTHAM-BOLD.woff2') format('woff2'),
        url('../font/GOTHAM-BOLD.woff') format('woff'),
        url('../font/GOTHAM-BOLD.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('../font/GOTHAM-BOLD.eot');
    src: local('../font/GOTHAM-BOLD'),
        url('../font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'),
        url('../font/GOTHAM-BOLD.woff2') format('woff2'),
        url('../font/GOTHAM-BOLD.woff') format('woff'),
        url('../font/GOTHAM-BOLD.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Carisma Inline';
    src: url('../font/CarismaInlineOblique.eot');
    src: local('Carisma Inline Oblique'), local('CarismaInlineOblique'),
        url('../font/CarismaInlineOblique.eot?#iefix') format('embedded-opentype'),
        url('../font/CarismaInlineOblique.woff2') format('woff2'),
        url('../font/CarismaInlineOblique.woff') format('woff'),
        url('../font/CarismaInlineOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}


  @font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('../../font/Pretendard-Black.woff2') format('woff2'), url('./woff/Pretendard-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../../font/Pretendard-ExtraBold.woff2') format('woff2'), url('./woff/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../../font/Pretendard-Bold.woff2') format('woff2'), url('./woff/Pretendard-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../../font/Pretendard-SemiBold.woff') format('woff2'), url('./woff/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../../font/Pretendard-Medium.woff2') format('woff2'), url('./woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../../font/Pretendard-Regular.woff2') format('woff2'), url('./woff/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('../../font/Pretendard-Light.woff2') format('woff2'), url('./woff/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('../../font/Pretendard-ExtraLight.woff2') format('woff2'), url('./woff/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('../../font/Pretendard-Thin.woff2') format('woff2'), url('./woff/Pretendard-Thin.woff') format('woff');
}


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
body{ line-height:1.5; font-family:'Dotum'; font-size:16px; color:#333; background:#fff;-ms-overflow-style: none; } 
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0;}
ul,ol,li{list-style:none}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
fieldset,img{border:0}
hr{height:0;}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
address,caption,em,var{font-style:normal;font-weight:normal}
a{text-decoration:none;cursor:pointer;color: inherit;}
a[href^="tel"]{font-style:normal}
a:hover,a:active,a:focus{text-decoration:none !important;}
b,strong{font-weight:bold}
dfn{font-style:italic}
img{border:0;vertical-align:top}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0;}
legend, caption{overflow:hidden;text-indent:-9999999px; height:0 !important; width:0 !important;line-height:0 !important;margin:0;padding:0;}
input{vertical-align:middle;margin:0;padding:0;}
input[type="text"],input[type="password"],input[type="email"]{-webkit-appearance:none;border-radius:0;font-family:'Dotum';}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{border-radius:0;-webkit-appearance:button;font-family:'Dotum';}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
button{overflow:visible;border:none;cursor:pointer;margin:0;padding:0;}
a,input,button,select{outline:none}
button,select{text-transform:none}
optgroup{font-weight:bold}
textarea{border:1px solid #bcbcbc;overflow:auto;-webkit-appearance:none}
input::-ms-clear{display:none;}

* { scroll-behavior: smooth; box-sizing: border-box; }


body { width: 100%; max-width: 100%; margin: auto; font-family: 'Pretendard';  overflow-x: hidden; }

/*body.main { overflow-y: hidden; }*/

/**/

.main_open { font-size: 11px; width: 70px; height: 70px; line-height: 17px; background-color: #fff; color: #fff; justify-content: center; align-items: center; display: flex; font-weight: 400;  text-align: center;
position: absolute; right: 20px; top: 90px; z-index: 9; }
/*.main_open b { font-family: 'Carisma Gothic'; font-weight: 600; font-size: 22px; position: relative; top: 2px; margin-right: 2px; letter-spacing: -2px; }*/
.main_open b { font-family: 'Carisma Gothic'; font-weight: 600; font-size: 16px; position: relative; top: 0px; margin-right: 2px; letter-spacing: 0px; }
.main_open span { font-size: 11px; font-weight: 400; }
.main_open>div { transform: translateY(3px); }


.all_wrap { width: 100%; margin: auto; height: auto; position: relative; top: 0; overflow: hidden; z-index: 989; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
.fixWrap{position:fixed; top: 0; left: 0;right: 0; margin: auto; width: 100%; height:calc( 100vh + 165vw); z-index: -5;}

.sec{ width: 100%; max-width: 500px; margin: auto;}
.main_box { width: 100%; height: 100vh; position: relative; background-color: #fff; overflow: hidden; max-width: 100%; margin: auto; }

.screen { mix-blend-mode: screen; }
.multiply { mix-blend-mode: multiply; }


.main_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0;  animation: main_img 1.2s 0.2s both;  }
.main_img.img01 { background: url("../img/main_img.jpg") center no-repeat; background-size: cover; }
.main_img.img02 { background: url(../img/main_img2.jpg) center no-repeat; background-size: cover; }
.main_bt_wrap { width: 250px; height: 32px; position: absolute; margin: 0 auto; left: 0; right: 0;  bottom:10vw; z-index:5; }

.main_txt_box { font-family: 'Pretendard'; position: absolute; margin: auto; right:0; left:0; margin: auto; top:40vw; text-align:center; color: #272728; }

.main_txt_box h2 { position: relative; right:0px; left:0; margin: auto;  font-size:6.3vw; line-height: 120%; font-weight: 100; color: #fff; opacity: 0; padding-top:20px;}
.main_txt_box h2 b { font-weight: 700; position: relative; left:-.5vw;}

.main_txt_box h4 { position: relative; right:0px; left:0; margin: auto;  font-size:11vw; line-height: 120%; font-weight: bold; color: #fff; opacity: 0; margin-top: 10px; padding-top:20px; }
.main_txt_box h4 b { font-weight: 700; position: relative; left:-2vw;}

.main_txt_box p {font-size: 5.5vw; line-height: 180%; opacity: 0; position: relative; right:0px; left:0; margin: auto; margin-top:3vw; color: #fff; font-weight: bold;padding-top:20px;}
.main_logo {  opacity: 0;  position: relative; right:0px; left:0; margin: auto; margin-top: 10vw; padding-top:-5vw;}


.open_b {position: absolute; left:24px; bottom:6vw; background-color: #171c46; z-index:10;  width:20vw; height:20vw; border-radius:100px; opacity:0; transform: translateX(-120px); text-align: center; display: flex; justify-content: center; align-items: center;}
.open_b p {font-family: "Poppins", sans-serif; margin-top:1vw; color:#fff; font-size:3.3vw; line-height:120%; font-weight: 200;}
.open_b p b {font-weight: bold; }

.main_box.active .open_b { transform: translate(0); opacity: 1; transition: 1.0s 1.2s; }


@keyframes main_img {
	from { transform: scale(1.22); }
	to {  }
}
@keyframes main_txt {
	from { opacity: 0; transform: translateY(-40px); }
	to {  }
}
@keyframes main_txt2 {
	from { opacity: 0; }
	to {  }
}



/**/

.con_wrap {width: 100%; position: relative; z-index: 2; background-color: #fff; left: 0; right: 0; margin: 0 auto;}

.sec_plan {width: 100%; height: 190vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  margin-top: calc(100vh + 0vw);  max-width: 100%; top:0;}
.plan_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden; }

.plan_box {width: 85%;}

.plan_tit { text-align: left; opacity: 0; transform: translateX(-50px);  }

.plan_tit h2 { font-size: 5vw; line-height: 150%; font-weight: 400; }
.plan_tit h3 { font-size:6.5vw; line-height: 120%; font-weight: 700; margin-top:0px; color: #242a5c; }

.plan_img {width:102%; margin-top:10vw;  }
.plan_img li {float:left; width: 50%; padding: 1%; transform: translateX(-50px); opacity:0;}
/*
.plan_img li:nth-child(1) { margin-left:0px; width:29%;}
.plan_img li:nth-child(2) { width:68%; }
.plan_img li:nth-child(3) { margin-left:0; margin-top:2%; width:68%;}
.plan_img li:nth-child(4) { margin-top:2%;  width:29%;}
*/
.plan_img img {width:100%;}

.plan_txt {width:100%; position: relative; top:10vw;  display: flex; justify-content: center; align-items: center;}
.plan_txt li {/*float:left; */ text-align: left; width:100%; opacity:0; margin-left:10%;}
.plan_txt li:after { content:''; position: absolute; width: 1px; height: 100%; top:0; background-color: #000; z-index: 9; }

.plan_txt02 { margin-top:10vw; }
.plan_txt03 { margin-top:10vw; }
.plan_txt04 { margin-top:10vw; margin-bottom:10vw;}

.plan_txt li:nth-child(1) { margin-left:0; }
.plan_txt li:nth-child(2) { }
.plan_txt li:nth-child(3) { }
.plan_txt li:nth-child(4) {}

.plan_txt p {font-size: 2.9vw; line-height: 130%; font-weight: 500; padding-left:3vw; margin-top:2vw;}
.plan_txt h1 {font-size: 4vw; font-weight: bold; color:#242a5c; padding-left:3vw;}
.plan_txt h1 span { color:#ff7200;}
.plan_txt p span{font-size: 2.5vw; }


.plan_wrap.active .plan_tit { transform: translate(0); opacity: 1; transition: 1.0s 0.6s; }
.plan_wrap.active .plan_img li { opacity: 1; transition: 1.0s 0.9s; transform: translate(0); }
.plan_wrap.active .plan_img li p { bottom: 2%; font-size: 2.2vw; letter-spacing: -.2vw; padding: 2% 7%; background: #000; color: #fff; right: 2%; position: absolute; }
.plan_wrap.active .plan_txt li:nth-child(1) { opacity: 1; transition: 1.0s 1s; }
.plan_wrap.active .plan_txt li:nth-child(2) { opacity: 1; transition: 1.0s 1.1s; }
.plan_wrap.active .plan_txt li:nth-child(3) { opacity: 1; transition: 1.0s 1.2s; }
.plan_wrap.active .plan_txt li:nth-child(4) { opacity: 1; transition: 1.0s 1.3s; }


/**/

.sec_plan2 {width: 100%; height: 75vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto; max-width: 100%; top:0;}
.plan2_wrap { width: 100%; height: 100%; background-color: #fff; position: relative; overflow: hidden; }
.plan_bg {width: 100%; height: 100%;  background: url("../img/plan_bg.jpg") center no-repeat; background-size: cover;  transform: scale(1.2);}
.plan_tag {width:100%; position:absolute; top:0; left:0; transform: translateX(-150px); opacity:0;}


.plan2_wrap.active .plan_bg { opacity: 1; transform: scale(1); transition: 2.5s 0s; }
.plan2_wrap.active .plan_tag { transform: translate(0); opacity: 1; transition: 1.0s 0.3s; }


/**/

.sec_comm {width: 100%; height: 180vw; position: relative; background: #000; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 100%; top:0;}

.comm_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #000; position: relative; overflow: hidden; }
.comm_box { width: 100%;}

.comm_btn { position: relative; bottom: -54vw; width: 60%; height: 10vw; 
	z-index: 2; background-color: #ff7200;border: 1px solid #fff;
	text-align: center;margin: 0 auto; border-radius: 500px; opacity: 0;
transform: translateY(50px);}
.comm_btn a{color: #fff;line-height: 50px;font-size: 4vw;line-height: 230%;font-weight: 100;}
.comm_btn a b{font-weight: bold;}

.comm_tit { position:absolute; left: 0; right: 0; margin: auto; top:20vw; z-index:4; text-align: center; }
.comm_tit h4 {  font-family: "Poppins", sans-serif;  -webkit-text-stroke: 0.4px #fff; color: transparent; font-size: 13vw; line-height: 100%; font-weight: 800; letter-spacing: 0px;  transform: translateY(-50px); opacity:0;}
.comm_tit p { color: #fff; font-size: 3.8vw; line-height: 150%; margin-top:10vw; font-weight: 200;  transform: translateY(-50px); opacity:0;   }
.comm_tit p b { opacity:1; }
.comm_tit p span { opacity:0.5; }


.comm_img_box { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; right:0; margin:0 auto; top:0; background-color: #000;}
/*.comm_img { width: 100%; height: 100vw;  /*transform: scale(1.2);  }
/*.img01 { width: 100%; height: 100%;  background: url(../../img/comm_img01.jpg) center no-repeat; }
.comm_img.img02 { background: url(../../img/comm_img02.jpg) center no-repeat; background-size: cover; }
.comm_img.img03 { background: url(../../img/comm_img03.jpg) center no-repeat; background-size: cover; }
.comm_img.img04 { background: url(../../img/comm_img04.jpg) center no-repeat; background-size: cover; }
.comm_img.img05 { background: url(../../img/comm_img05.jpg) center no-repeat; background-size: cover; }
.comm_img.img06 { background: url(../../img/comm_img06.jpg) center no-repeat; background-size: cover; }
.comm_img.img07 { background: url(../../img/comm_img07.jpg) center no-repeat; background-size: cover; }*/

.swiper-button-next2 { position: absolute; width: 75px; height: 47px; right: 0; margin: 0 auto; top: 42%; padding: 0; outline: none; z-index: 99; animation: premium_arrow 1.0s 0.6s both; text-align: left;  }
.swiper-button-prev2 { position: absolute; width: 75px; height: 47px; left: 0; margin: 0 auto; top: 42%; padding: 0; outline: none; z-index: 99; animation: premium_arrow2 1.0s 0.6s both; text-align: right; }

.swiper_comm { width: 80%; height:100%; position:absolute; top:60vw; left: 0; right:0; margin:0 auto; margin-bottom: 0; z-index:2; opacity:0; transform: translateY(50px);}
.swiper_comm .swiper-slide { display: flex; justify-content: center; align-items: center; }

.swiper_comm .swiper-slide.swiper-slide-active .comm_img { animation: premium_img 7s 0s both; }

.comm_txt_box { width: 100%; transform: translateX(50px); opacity:0; position: absolute; top:41vw; right:3vw;}
.comm_txt_box p { position: absolute; left: 5%; font-size: 3vw; line-height: 100%; color: #fff; }
.comm_txt_box h3 { position: absolute; right: 0; font-size: 3.8vw; line-height: 100%; font-weight: 600; color: #fff; }


.swiper_commtag {width:100%; height:100%; position:relative; z-index:5; top:48vw; transform: translateX(10%); }
.comm_tag { width:35vw; height:38vw; border:1px solid rgba(225,225,225,0.3); padding:4vw 0 4vw 4vw; opacity:0; transform: translateX(150px);}
.tag01 {background: #000;}
.tag02 {background: #fff;}

.comm_tag p { font-size: 3vw; line-height: 140%; font-weight: 400; opacity:0.7;  }
.comm_tag h1 { font-size: 4.5vw; line-height: 120%; font-weight:bold; margin-top:3vw;  }
.comm_tag h2 { font-family: "Poppins", sans-serif; font-size: 4.3vw; line-height: 120%; font-weight:500; margin-top:3vw; position:absolute; bottom:4vw; right:0; text-align: right; margin-right:5vw;  opacity:0.7;}

.tag01 {color:#fff;}
.tag02 {color:#000;}

.comm_wrap.active .swiper-slide-active .comm_img {  opacity:1; transition: 2.0s 2s; }
.comm_wrap.active .swiper-slide-active .comm_img_bg {  opacity:1; transition: 2.0s 2s; }

.comm_wrap.active .comm_tit h4 {  opacity:1; transform: translate(0); transition: 1.0s 0.3s; }
.comm_wrap.active .comm_tit p {  opacity:1; transform: translate(0); transition: 1.0s 0.7s; }
.comm_wrap.active .swiper_comm {  opacity:1; transform: translate(0); transition: 1.0s 0.9s; }
.comm_wrap.active .swiper2-2 {  opacity:1; transition: 1.0s 1s; }
.comm_wrap.active .swiper-slide-active .comm_txt_box {opacity:1; transform: translate(0); transition: 0.5s 0.3s;}
.comm_wrap.active .comm_tag { opacity:1; transform: translate(0); transition: 0.7s 1.2s; }
.comm_wrap.active .comm_btn { opacity:1; transform: translate(0); transition: 1s 1.2s; }



/**/

.sec_calendar {width: 100%; height: 150vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 100%; top:0;}

.sale_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden; }

.calendar_wrap { width: 100%; height: 100%; position: relative; overflow: hidden;  display: flex; justify-content: center; align-items: center; }

.calendar_box { width:85%;  transform: translateY(-20px);}

.calendar_tit { text-align: center; color: #fff; transform: translateY(-40px); opacity:0;  text-align: center; }
.calendar_tit h2 { font-family: "Poppins", sans-serif; font-weight: 700; font-size:14vw; line-height: 100%; letter-spacing:0px; color:#242a5c; }
.calendar_tit p { font-size:3.4vw; line-height: 100%; margin-top:5vw; color: #505050; }

.calendar_bottom { margin-top: 10vw; transform: translateY(0px);  animation: calendar_content 1.0s 0.6s both; }
.calendar_con_box { display: flex; justify-content: space-between; /* float:left;*/ overflow: hidden; transform: translateY(50px); opacity:0; }

.calendar_con { width: 100%; height:20vw; position: relative; display: flex; justify-content: center; align-items: center; margin-right: 2%; color: #181818; background-color: rgba(253,235,233,0.7); border: 1px solid #f47f3f; text-align: center; }
.calendar_con:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; }
.calendar_con:last-child{ margin-right: 0; }
.calendar_con h4 {font-family: "Poppins", sans-serif; font-size:5vw; line-height: 100%; font-weight: bold; }
.calendar_con p { font-size: 3.2vw; line-height: 100%; margin-top:1vw; }

.calendar_con_box.box01 { }
.calendar_con_box.box01 li:nth-child(1) { width: 50%; background-color: #f47f3f; border: 1px solid #f47f3f; color: #fff;}
.calendar_con_box.box01 li:nth-child(2) { width: 50%; }

.calendar_con_box.box02 { margin-top: 30px; margin-top: 2%; }
.calendar_con_box.box02 li:nth-child(1) { width: 33.3%; background-color:#fff5e9;border: 1px solid #b69672;}
.calendar_con_box.box02 li:nth-child(2) { width: 33.3%; background-color:#ecf8ff;border: 1px solid #86acc4;}
.calendar_con_box.box02 li:nth-child(3) { width: 33.3%; background-color:#fdfff1;border: 1px solid #bdc38f;}

.calendar_con_box.box03 { margin-top: 30px; margin-top: 2%; width: 100%;}
.calendar_con_box.box03 li:nth-child(1) {background-color:#faf1ff; border: 1px solid #bfa6cc; }
.calendar_con_box.box03 li:nth-child(2) {background-color:#f0fcff; border: 1px solid #6ea7b3; }






.sale_wrap.active .calendar_tit {  opacity:1; transform: translate(0); transition: 1.0s 0.3s; }
.sale_wrap.active .calendar_con_box {opacity:1; transform: translate(0); transition: 1.0s 0.6s;}


/**/

.sec_mdh {width: 100%; height: 70vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 100%; top:0;}

.mdh_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden; background: url(../img/mdh_bg.jpg) center no-repeat; background-size: cover;}
.mdh_cont {width: 100%; transform: translateY(0px);  text-align: center;}
.mdh_cont h1 {font-family: "Poppins", sans-serif; font-size: 10.5vw; color:#fff; font-weight:600; letter-spacing: 0; transform: translateY(-50px); opacity:0;}
.mdh_cont h1 span {font-weight:100; }

.mdh_cont p {font-family: "Poppins", sans-serif; font-size: 3.2vw; color:#fff; font-weight:300; letter-spacing:7px; text-transform:uppercase; margin-top:0; transform: translateY(50px); opacity:0;}

.mdh_btn {position: relative; left:0; right:0; margin:0 auto;  margin-top:8vw; transform: translateY(50px); opacity:0;}
.mdh_btn01 {border-radius:100px; width:60%; height:10vw; position: relative; left:0; right:0; margin:0 auto;  border:1px solid #fff; overflow:hidden;}

.mdh_btn01:after { content:''; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-color: #242a5c; opacity: 0; transition: 0.5s; } 

.mdh_btn a {display:block; color:#fff; font-size: 4vw; line-height: 230%; font-weight:200;letter-spacing: normal;}
.mdh_btn a span {font-weight:bold; }

.mdh_wrap.active .mdh_cont h1 {opacity:1; transform: translate(0); transition: 1.0s 0.6s; }
.mdh_wrap.active .mdh_cont p {opacity:1; transform: translate(0); transition: 1.0s 0.9s;}
.mdh_wrap.active .mdh_btn {opacity:1; transform: translate(0); transition: 1.0s 1.2s;}


/**/


.sec_cmdh {width: 100%; height: 70vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 100%; top:0;}

.cmdh_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden; background: url(../img/cmdh_bg.jpg) center no-repeat; background-size: cover;}
.cmdh_cont {width: 100%; transform: translateY(0px);  text-align: center;}
.cmdh_cont h1 {font-family: "Poppins", sans-serif; font-size: 10.5vw; line-height: 120%;color:#fff; font-weight:600; letter-spacing: 0; transform: translateY(-50px); opacity:0;}
.cmdh_cont h1 span {font-weight:100; }

.cmdh_cont p {font-family: "Poppins", sans-serif; font-size: 3.2vw; color:#fff; font-weight:300; letter-spacing:7px; text-transform:uppercase; margin-top:0; transform: translateY(50px); opacity:0;}

.cmdh_btn {position: relative; left:0; right:0; margin:0 auto;  margin-top:2vw; transform: translateY(50px); opacity:0;}
.cmdh_btn01 {border-radius:100px; width:60%; height:10vw; position: relative; left:0; right:0; margin:0 auto;  border:1px solid #fff; overflow:hidden;}

.cmdh_btn01:after { content:''; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-color: #242a5c; opacity: 0; transition: 0.5s; } 

.cmdh_btn a {display:block; color:#fff; font-size: 4vw; line-height: 230%; font-weight:200;letter-spacing: normal;}
.cmdh_btn a span {font-weight:bold; }

.cmdh_wrap.active .cmdh_cont h1 {opacity:1; transform: translate(0); transition: 1.0s 0.6s; }
.cmdh_wrap.active .cmdh_cont p {opacity:1; transform: translate(0); transition: 1.0s 0.9s;}
.cmdh_wrap.active .cmdh_btn {opacity:1; transform: translate(0); transition: 1.0s 1.2s;}


/**/

.sec_news {width: 100%; height: 300vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 100%; top:0;}

.news_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden;}
.news_boxs { width: 100%;  transform: translateY(-30px); }
.news_tit {width:100%;  position: relative;  font-family: "Poppins", sans-serif; transform: translateY(-50px); opacity:0; text-align: center; }
.news_tit h1 {font-family: "Poppins", sans-serif; font-size:10vw; font-weight:bold; color:#242a5c; text-transform:uppercase; }

.news_conts {height: 220vw; /*height: 115vh;*/ overflow:hidden;}

.news_btn {position: relative; left:0; right:0; margin:0 auto; top:10vw; transform: translateY(50px); opacity:0;  text-align: center; }
.news_btn01 {border-radius:100px; width:223px; height:50px; position: relative; left:0; right:0; margin:0 auto;  background-color: #242a5c; border:1px solid #242a5c; overflow:hidden;}

.news_btn01:after { content:''; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background-color: #000; opacity: 0; transition: 0.5s; } 

.news_btn a {display:block; color:#fff;  line-height: 50px; font-weight:200; font-size: 4vw;}
.news_btn a span {font-weight:bold; }

.news_wrap.active .news_btn {opacity:1; transform: translate(0); transition: 1.0s 1.2s;}
.news_wrap.active .news_tit {opacity:1; transform: translate(0); transition: 1.0s 0.2s;}
.news_wrap.active .news_conts {opacity:1; transform: translate(0); transition: 1.0s 0.5s;}

/**/

.sec_contact {width: 100%; height: 330vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  max-width: 100%; top:0;}

.contact_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden; background: url(../img/contact_bg.jpg) left no-repeat; 
background-size: cover;}

.contact_cont {transform: translateY(-20px); }
.contact_cont h1 {text-align: center; position: relative;  font-family: "Poppins", sans-serif; font-size: 11vw; font-weight:bold; -webkit-text-stroke: 0.9px #242a5c; color: transparent; text-transform:uppercase; 
transform: translateY(-50px); opacity:0;}

.contact_maps {  width: 80%; margin:0 auto; margin-top:5vw; position: relative; left:0; right:0; text-align: center; }

.contact_map {position: relative; width: 100%; left:0; right:0; margin:0 auto; text-align: center; }
.contact_map01 {transform: translateY(50px); opacity:0;}
.contact_map02 { margin-top:15vw; transform: translateY(50px); opacity:0;}

.contact_map h2 {color:#242a5c; font-size:5vw; margin-top:8vw; font-weight: bold; }
.contact_map p {color:#4a4a4a; font-size: 4vw; margin-top:3vw; font-weight: 500; }

.map_btn {width: 220px; border-radius:100px; height:50px; line-height:50px; background-color:#242a5c; margin:0 auto; margin-top:40px;}
.map_btn a {color:#fff;  display:block;}



.contact_bus { width:70%; position: relative; left:0; right:0; margin:0 auto; text-align: left; top:10vw;  transform: translateY(50px); opacity:0;}
.contact_bus h3 { font-size:4vw; font-weight:bold; color:#242a5c; }
.contact_bus p { font-size:3.2vw; font-weight:500; color:#4a4a4a; line-height:150%; margin-top:3vw;}
.contact_bus p span { color:#223861; font-weight:bold;}

.contact_bus h3:after { content:''; width:70%; height: 1px; position: absolute; left:22vw; top: 3vw; z-index: 2; background-color: #242a5c; opacity:0.4; }

.contact_wrap.active .contact_cont h1 {opacity:1; transform: translate(0); transition: 1.0s 0.2s;}
.contact_wrap.active .contact_map01 {opacity:1; transform: translate(0); transition: 1.0s 0.5s;}
.contact_wrap.active .contact_map02 {opacity:1; transform: translate(0); transition: 1.0s 0.7s;}
.contact_wrap.active .contact_bus {opacity:1; transform: translate(0); transition: 1.0s 1.2s;}

/**/

.sec_life {width: 100%; height: 200vw; position: relative; background: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  margin-top: calc(100vh + 0vw);  max-width: 100%; top:0;}

.life_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; overflow: hidden; }
.life_box { width: 100%; height: auto; margin: auto; position: relative; padding-top: 0px; padding-bottom: 0px; text-align: center;}

.life_tit { ext-align: center; opacity: 1; transform: translateY(0); opacity: 0; width:100%; letter-spacing: -1px;}
.life_tit h4 { font-size: 4vw; line-height: 150%; font-weight: 400; }
.life_tit h4 b { font-size: 5vw; font-weight: 500; }
.life_tit h2 { font-size: 7.5vw; line-height: 120%; font-weight: 700; margin-top: 5vw; color: #242a5c; }


.swiper_life { width: 100%; opacity: 1; padding: 120px 0px 0px; margin-top: 5vw; opacity: 1; transform: translateY(0); z-index: 9; transform: translateY(120px); opacity: 0; }
.life_txt { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 9; transform: translate(-20px,-10px); }
.swiper_life .swiper-slide { text-align: center; transition: 0.4s; position: relative; overflow: hidden; cursor: pointer; filter: grayscale(1); }
.swiper_life .swiper-slide img { width: 100%; max-width: 207px; }


.swiper_life .swiper-slide-active { transform: translateY(-75px); }
.swiper_life .swiper-slide-prev { transform: translateY(-50px); }
.swiper_life .swiper-slide-prev2 { transform: translateY(-25px); }
.swiper_life .swiper-slide-prev3 { transform: translateY(-0px); }
.swiper_life .swiper-slide-next { transform: translateY(-50px); }
.swiper_life .swiper-slide-next2 { transform: translateY(-25px); }
.swiper_life .swiper-slide-next3 { transform: translateY(-0px); }

.swiper_life .swiper-slide-active { filter: grayscale(0); }

.swiper_life_tit { width: 100%; max-width: 1530px; opacity: 1; transform: translateY(0); margin-top: -40px; text-align: center; z-index: 1; transform: translateY(120px); opacity: 0; }
.swiper_life_tit h4 { font-family: "Poppins", sans-serif; font-size: 3.8vw; line-height: 100%; letter-spacing: 5px; font-weight: 400; background-color: #fff; padding-bottom:5vw; margin-top:10vw; }
.swiper_life_tit p { width: 90%; margin: auto; font-size:3vw; line-height: 166%; letter-spacing: 0; font-weight: 500; background-color: #fff; padding-bottom:5vw;}

.life_box .swiper-pagination { font-family: "Poppins", sans-serif; width: 102px; margin: auto; transform: translateY(-85px); padding: 0; color: #000; position: static; font-family: inherit; }
.life_box .swiper-pagination span { font-size: 3.8vw; line-height: 100%; }
.life_box .swiper-pagination-total { display: none; }

.swiper-button-next { position: absolute; width: 82px; height: 50px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: translate(840px,110px); padding: 0; outline: none; opacity: 0; }
.swiper-button-prev { position: absolute; width: 82px; height: 50px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: translate(-840px,110px); padding: 0; outline: none; opacity: 0; }


.life_wrap.active .life_tit { opacity: 1; transition: 1.0s 0.2s; }
.life_wrap.active .swiper_life { transform: translate(0); opacity: 1; transition: 1.0s 0.6s; }
.life_wrap.active .swiper_life_tit { transform: translate(0); opacity: 1; transition: 1.0s 0.6s; }
.life_wrap.active .swiper-button-next { opacity: 1; transition: 1.0s 0.6s; }
.life_wrap.active .swiper-button-prev { opacity: 1; transition: 1.0s 0.6s; }




.sec_pr.active .pr_tit {transform: translateY(0px);opacity: 1; transition: 1s .2s;}
/*.sec_pr.active .pr_thumb {transform: translateY(0px);opacity: 1; transition: 1s .5s;}*/
.sec_pr.active .pr_vd_box {transform: translateY(0px);opacity: 1; transition: 1s .5s;}
.sec_pr.active .pr_tabs {transform: translateY(0px);opacity: 1; transition: 1s .5s;}

/**/


.sec03 { width: 100%; height: 190vw; position: relative; background: #fff; color: #fff; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: visible; margin: auto;  /*margin-top: calc(100vh + 0vw); */ max-width: 100%; top:0;}

.location_wrap {width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center;}

.swiper2{ width: 100%; height: 100%;margin: auto; top: 0px; position: relative; transform: translateY(-20px);opacity: 0; }

.sec03_txtbox {position:relative; z-index: 2; text-align: center; width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center;}
.sec03_txt {   }
.sec03_txtbox h2{font-size: 4vw; color: #fff; font-weight: 800; margin-top: 0vw; opacity: 0;transform: translateY(-20px); letter-spacing: -0.1vw;  font-family: 'Urbanist', sans-serif;}
.sec03_txtbox h4{font-size: 6vw; line-height: 8vw; color: #fff;font-weight: 500; margin-top: 1vw; opacity: 0;transform: translateY(-20px); letter-spacing: -1px;  }
.sec03_txtbox p{font-size: 3.2vw; font-weight: 300; line-height:200%; color: rgba(255,255,255,.6); margin-top: 3vw; opacity: 0;transform: translateY(-20px); letter-spacing:0px;  }
.sec03_txtbox p span{font-size: 2vw; color: rgba(255,255,255,.4); line-height: 160%; display: inline-block; margin-top: -2vw;}
.sec03_line {position:relative; width: 1px; height: 65px; background-color: #fff; left: 0; right: 0; margin:5vw auto; opacity: 0; }


.sec03_img{position: absolute; left: 0; right: 0; width:100% ; height: 190vw; margin:0 auto; /*transform: translateX(40px);*/opacity: 1; }

.sec03_img01{background: url("../img/lo_bg01.jpg") center no-repeat; background-size: cover;}
.sec03_img02{background: url(../img/lo_bg02.jpg) center no-repeat; background-size: cover;}
.sec03_img03{background: url(../img/lo_bg03.jpg) center no-repeat; background-size: cover;}
.sec03_img04{background: url(../img/lo_bg04.jpg) center no-repeat; background-size: cover;}




.sec03.active .swiper2 {transform: translateY(0px);opacity: 1; transition: 1s .2s;}


.swiper2 .swiper-slide-active .sec03_txtbox h4{transform: translateY(0px);opacity: 1; transition: 1s .5s;}
.swiper2 .swiper-slide-active .sec03_txtbox p{transform: translateY(0px); opacity: 1; transition: 1s .7s;}
.swiper2 .swiper-slide-active .sec03_line { height: 65px; opacity: 1; transition: 1s 1.2s;}
.swiper2 .swiper-slide-active .sec03_txtbox h2{transform: translateY(0px);opacity: 1; transition: 1s 1.5s;}




/**/

.sec04 { width: 100%; height: 170vw; position: relative; background: #fff; color: #000; padding: 0 0%; box-sizing: border-box; padding-top: 0vw; overflow: hidden; margin: auto;  max-width:100%; top:0;}

.brand_wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.brand_wrap>div {  }

.brand_tit { text-align: center; opacity: 1; transform: translateY(0); opacity: 0; color: #000; }
.brand_tit h4 { font-size: 4vw; line-height: 120%; font-weight: 400; }
.brand_tit h2 { font-size: 6vw; line-height: 120%; font-weight: 700; margin-top: 5vw; color: #242a5c; letter-spacing: -1px; }

.swiper_brand { width: 100%; height: 170vw; margin: auto; max-width: 500px; margin-top:0; opacity: 0; }
.swiper_brand .swiper-slide { width: 100%; background-color: #fff; }

.brand_img {position: absolute; left: 0; right: 0; width:100% ; height:100%; margin:0 auto; opacity: 1; }

.b_img01{background: url("../img/brand_img01.jpg") center no-repeat; background-size: cover;}
.b_img02{background: url("../img/brand_img02.jpg") center no-repeat; background-size: cover;}

.brand_tag h2 { font-family: "Poppins", sans-serif; font-size: 12vw; font-weight: 700; -webkit-text-stroke: 0.4px #000; color: transparent; margin: auto; margin-top:10vw;}
.brand_txt_box { width: 100%; height: 100%; text-align: center; position: relative; display: flex; justify-content: center; align-items: center;
 transform: translateY(-25vw); }

.brand_txt h3 { font-size: 5vw; line-height: 140%; font-weight: 600; margin-top: 10vw; }
.brand_txt h3 b { font-size: 6vw; }
.brand_txt p { font-size: 3vw; line-height: 200%; margin-top:3vw; opacity: 0.7; }

.brand_txt_box.box01 .brand_txt.txt02 {text-align: left; }
.brand_txt_box.box01 .brand_txt.txt01 {  }
.brand_txt_box.box02 .brand_txt.txt01 {  }
.brand_txt_box.box02 .brand_txt.txt02 {  }


.swiper_brand .swiper-slide-active .brand_tag { animation: brand_tag 1s 0.3s both; }
.swiper_brand .swiper-slide-active .brand_txt_box.box01 .brand_txt.txt02 { animation: brand_txt2 1s 0.3s both; }
.swiper_brand .swiper-slide-active .brand_txt_box.box01 .brand_txt.txt01 { animation: brand_txt 1s 0.3s both; }
.swiper_brand .swiper-slide-active .brand_txt_box.box02 .brand_txt.txt01 { animation: brand_txt2 1s 0.3s both; }
.swiper_brand .swiper-slide-active .brand_txt_box.box02 .brand_txt.txt02 { animation: brand_txt 1s 0.3s both; }

@keyframes brand_tag {
	from { transform: translateY(10vw); opacity: 0; }
	to {  }
}

@keyframes brand_txt {
	from { transform: translateY(10vw); opacity: 0; }
	to {  }
}
@keyframes brand_txt2 {
	from { transform: translateY(-150vw); opacity: 0; }
	to {  }
}
@keyframes brand_img {
	from { transform: scale(1.25); }
	to { transform: scale(1); }
}


.brand_wrap.active .brand_tit { opacity: 1; transition: 1.0s 0.4s; }
.brand_wrap.active .swiper_brand { opacity: 1; transition: 1.0s 0.4s; }
.brand_wrap.active .swiper-button-next2 { opacity: 1; transition: 1.0s 0.4s; }
.brand_wrap.active .swiper-button-prev2 { opacity: 1; transition: 1.0s 0.4s; }
.brand_wrap.active .swiper_brand_bt { opacity: 1; transition: 1.0s 0.4s; }



/*  */



.footer { width: 100%;  background-color: #181818; color: #fff; padding: 0 0%; padding-top: 4vw; padding-bottom: 4vw; position: relative; z-index: 999; text-align: left; max-width: 100%;}


.footer h1 { font-size: 2.6vw; line-height: 160%; margin-top:0vw; color: #6e6e6e; padding-left: 6vw; }
.footer h1 span { font-size: 2.6vw; line-height: 160%; margin-top:0vw; color: #b9b9b9;  }

.footer p {color: #6e6e6e; font-size: 2.6vw; margin-top: 6vw; padding-left: 6vw; opacity: 1; line-height: 160%; padding-bottom: 10vw;}

.footer_info {
    display: flex
;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 6vw;
    margin-top: 7vw;
}
.footer_info1 { width: 100%; display: flex; justify-content: flex-start; align-items: center; padding-left: 6vw; margin-top: 5vw;}
.footer_info1 img { transform: scale(0.8); transform-origin: left center; }
.footer_info li:nth-child(2n-1) {
    width: 6%;
    opacity: 0.5;
}
.footer_info li:nth-child(2) {
    margin-top: -1.2vw;
}
.footer_info li:nth-child(2n) {
    width: 30%;
}

.ft_btn {display: flex; justify-content: flex-start; align-items: center;  /*margin-right:6vw;*/ position:absolute; right:5vw;}
.ft_btn li {  line-height: 80%; display: flex; justify-content: center; align-items: center;  margin-right:1vw; border:1px solid rgba(225,225,225,0.5); padding:10px 15px;}
.ft_btn li a {font-size: 2.6vw;  color:rgba(225,225,225,0.5); text-align: center;}

.footer_info2 li { float: left; font-size: 2.8vw; color: #fff; text-align: left; letter-spacing: 0;}
.footer_info2 li img { transform: scale(0.44); transform-origin: left center; }
.footer_info2 li:nth-child(2n-1) { width: 7%;opacity: 0.5; }
.footer_info2 li:nth-child(2n) { width: 91%;  }

.footer_info2 li:nth-child(4) { margin-top:-3.5vw;}

.footer_info3 { width: 100%; padding-left: 6vw;margin-top: 0; margin-bottom: 5vw;}
.footer_info3 li { float: left; font-size: 2.8vw; color: #fff; text-align: left; letter-spacing: 0; margin-bottom: 5vw;}
.footer_info3 li img { transform: scale(0.48); transform-origin: left center; }
.footer_info3 li:nth-child(2n-1) { width: 7%; opacity: 0.5; }
.footer_info3 li:nth-child(2n) { width: 91%;  }

.footer_info2 li:nth-child(4) { margin-top:-3.5vw;}

.footer_bt { width: 100%; height: 100%; text-align: center; font-size: 0.8rem; line-height: 2.2rem; margin: auto; position: relative; box-sizing: border-box; font-weight: 500; z-index: 9; overflow: hidden; color: #fff; z-index: 9; }
.footer_bt span { transition: 0.3s; }
.footer_bt:before { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; border: 1px solid #fff; box-sizing: border-box; }
.footer_bt:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; bottom: -100%; z-index: 8; transition: 0.5s; }
.footer_bt>div { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; }
.footer_bt>div b { display: block; font-weight: 500; transform: translateY(2.5rem); opacity: 0; transition: 0s; }

/*
.footer_bt:hover span { opacity: 0; }
.footer_bt:hover:after { bottom: 0; }
.footer_bt:hover div b { opacity: 1; transform: translateY(0px); transition: 0.5s 0.35s; }

.footer_bt.active span { opacity: 0; }
.footer_bt.active:after { bottom: 0; }
.footer_bt.active div b { opacity: 1; transform: translateY(0px); transition: 0.5s 0.35s; }

*/
.footer_family ul { width: 100%; height: 0; background-color: #fff; color: #888; overflow: hidden;box-sizing: border-box; top: -9.375rem; position: absolute; border: 1px solid #ddd; box-sizing: border-box; opacity: 0; z-index: -11;
 transition: top 0.5s, opacity 0.5s, height 0s 0.5s; }
.footer_family ul li { width: 100%; font-size: 0.875rem; height: 2.19rem; line-height: 2.19rem; box-sizing: border-box; position: relative; transition: 0.2s; }
.footer_family ul li:first-child { margin-top: 1.25rem; }
.footer_family ul li a { width: 100%; height: 100%; display: block; padding-left: 1.56rem; box-sizing: border-box; transition: 0.2s; }
.footer_family ul li:hover a { color: #555; }


.footer_family.active ul { height: 10.625rem; top: -11.56rem; opacity: 1; z-index: 9; transition: top 0.5s, opacity 0.5s, height 0s 0s; }


@media all and (max-width:300px){

	.sec05_txtbox p {font-size:2.3vw;}


}

@media all and (min-width:375px){


	.btn_set {  }
	.swiper-pagination {}


}


@media all and (min-width:600px){



/**/
	.main_box {height:100vh;}
	.main_txt_box {top:150px;}

	.txt01 {/*letter-spacing: 1.0vw!important; opacity: 0; font-size: 22px; margin-top: 0vw;*/}

	.main_txt_box h4 { font-size: 62px; margin-top: 20px; padding-top: 10px;}

	.main_txt_box p {  font-size: 16px; letter-spacing: -0.5px!important;  margin-top: 60px; line-height: 180%;  letter-spacing: -1px; }

	.main_logo {margin-top:120px;}


/* life */
	
	.sec_life {height:1200px;}
	.swiper_life {margin-top:20px;}
	.life_tit h4 {font-size:19px;}
	.life_tit h4 b {font-size:26px;}
	.life_tit h2 {font-size:40px; margin-top:30px;}
	
	.swiper_life_tit h4 {font-size:17px; padding-bottom:20px; margin-top:30px;}
	.swiper_life_tit p {font-size:15px;}
	.life_box .swiper-pagination span {font-size:17px;}

/* sec03 */


    .sec03 { height: 1000px;  padding-top: 0px; /*margin-top: 100vh; */}
	.sec03_line {}


	
	.sec03_titbox { }
	.sec03_titbox h1{font-size:18px; letter-spacing: -3.6px;  }
	
	.sec03_txtbox {}
	.sec03_txt {  margin-top: 0px;}
	.sec03_txtbox h1 {font-size: 18px;}
	.sec03_txtbox h4{font-size: 40px; line-height: 45px;  margin-top: 5px; letter-spacing: -3px;  }
	.sec03_txtbox p{font-size: 15px; line-height: 45px; margin-top:22px; letter-spacing: -1.5px;  }
	

	.sec04 {height: 936px;}
	.brand_txt_box {transform:translateY(-50px);}
	.brand_txt h3 {font-size: 27px; }
	.brand_txt h3 b {font-size: 35px; }
	.brand_txt p {font-size: 15px; margin-top:30px;}
	.swiper_brand { height: 936px; max-width: 1000px;  }

	.brand_tag h2 {font-size: 88px; margin-top:85px;}


	


/* footer */

	.footer {  }



	.footer h1 { font-size: 14px; line-height: 25px; padding-left: 40px;letter-spacing: -0.5px;  }
	.footer h1 span {  font-size: 14px; line-height: 25px; margin-top:0vw; color: #b9b9b9; letter-spacing: -0.5px; }

	.footer p {color: #6e6e6e; font-size: 15px; margin-top:40px; padding-left: 40px; line-height: 160%; padding-bottom:100px;}
	
	.footer_info2 li img {transform:scale(1);}
	.footer_info2 li:nth-child(4) {margin-top:-6px;}







}




/**//**//**//**//**//**//**//**//**//**//**//**/

/* sub */

#all_wrap { width: 100%; height: auto; overflow: hidden; margin: auto; position: relative; font-family: 'Noto Sans KR', sans-serif; }

#container{ width: 100%; position: relative; left: 0; top: 0; z-index: 90; font-family: 'Noto Sans KR', sans-serif; } 
.sub { position: relative; width: 100%; left: 0; background-color:#fff; top:0; overflow: hidden; }


/* */


  
  

  
#snb_wrap { width: 95%; height: auto; position: relative; left: 0; right: 0; margin: 0px auto 0 auto; z-index: 99; text-align: left; font-family: 'Noto Sans KR', sans-serif; }
#snb { width: 100%;  margin:0 auto; position:relative; z-index:199; }
#snb:after {content:""; display:block; clear:both; }
#snb>li {float:left; position:relative; height:30px;}
#snb>li:nth-child(2) { width: 16%; }
#snb>li:nth-child(2) img{position: absolute;top: 0;bottom: 0;left: 0;right: 0; margin: auto;}

#snb>li:nth-child(3) { width: 42%; }
#snb>li:nth-child(4) { width: 42%; }
#snb>li:first-child + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%;}
#snb>li:first-child + li + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%; margin-top:1px; text-transform: uppercase; }
#snb>li:first-child + .ov {margin-left:0;}
#snb .ov {margin-left:-1px;}
#snb .ov > a { display:block; height:30px;  line-height:30px;	padding:0 47px 0 15px; font-size:10px; color:#555; letter-spacing:0em;  border-left:1px solid #dcdcdc;  letter-spacing:-0.075em; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
#snb .ov ul {position:absolute;left:0;top:100%;min-width:100%;background:#fff;display:none;}
#snb .ov ul li {border:1px solid #dcdcdc;margin-top:-1px; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; text-transform: uppercase; background-color: #fff; }
#snb .ov ul li:first-child {margin-top:0;}
#snb .ov ul li a {display:block;font-size:10px;color:#999;padding:11px 15px;white-space:nowrap;letter-spacing:-0.075em;}
#snb .ov:hover ul {display:block;}
#snb .ov ul li a:hover {background:#f3f3f3;color:#333;}



#sub-top{
width: 100%;
height: 55vw;
/*background: #101f3a; */

position: relative; left:0; right:0; margin:0 auto;
margin-top: 0px;
margin-bottom: 5vw;
}

.sub_top_bg{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height:55vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg::after{ content:''; background: url(../img/sub-top.jpg) center bottom no-repeat; background-size: cover; width: 100%; height: 60vw; position: absolute; top: 0;left: 0; animation: sub_top 2.5s 0s both; transition: 0.6s;}

.sub_top_bg01{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 55vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg01::after{ content:''; background: url(../img/sub_top.jpg) center bottom no-repeat; background-size: cover; width: 100%; height: 60vw; position: absolute; top: 0;left: 0;}
.sub_top_bg02{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg02::after{ content:''; background: url(../img/sub-top2.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg03{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg03::after{ content:''; background: url(../img/sub-top3.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg04{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg04::after{ content:''; background: url(../img/sub-top4.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg05{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg05::after{ content:''; background: url(../img/sub-top5.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg06{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg06::after{ content:''; background: url(../img/sub-top6.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg07{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg07::after{ content:''; background: url(../img/sub-top7.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg08{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg08::after{ content:''; background: url(../img/sub-top8.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}
.sub_top_bg09{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9;	}
.sub_top_bg09::after{ content:''; background: url(../img/sub-top9.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw;	 animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;}




#sub_top_txt { width: 100%; height: 40vw; position: relative; background: #101f3a; font-family: 'Noto Sans KR', sans-serif;	 padding-left: 20px;  }
#sub_top_txt h2 { color: #fff; font-size: 6vw; font-weight: 400; line-height: 100%; animation: sub_top 0.8s 0.5s both;}
#sub_top_txt h2 span { font-size:4vw;}
#sub_top_txt h4{ margin-top: 15px; animation: sub_top 0.8s 1.2s both; }
#sub_top_txt h5 { color: #fff; font-size: 4vw; font-weight: 300; margin-top: 1vw;    }

/*
.sub-top-tit {position:absolute; top: 55%;  margin: 0 auto; text-align: center;  width: 100%; z-index: 22;}
.sub-top-tit h1 { font-weight:900; font-family: 'Futura Std Oblique'!important; color: #fff; font-size: 6vw; text-transform: uppercase; letter-spacing: 0px; margin-left: 0px;}
.sub-top-tit p { color: #fff; font-size: 3.5vw;}*/
.sub-top-tit {position:absolute; top: 60%;  margin: 0 auto; text-align: center;  width: 100%; z-index: 22;}
.sub-top-tit h1 { font-weight:400; color: #000; font-size: 6.5vw; text-transform: uppercase; margin-left: 0px; line-height: 100%;  animation: sub_top_txt 0.8s 0.5s both; opacity: 1;}
.sub-top-tit h5 { font-weight: 400; color: #000; font-size: 2.8vw; text-transform: uppercase; letter-spacing: 0; margin-left: 0px; line-height: 100%; margin-bottom: 2vw; margin-top: 2vw;  animation: sub_top_txt 0.8s 0.7s both; opacity: 1; }
.sub-top-tit p { color: #fff; font-size: 3.5vw;}
.sub_logo {width:40%;}

.st-line { z-index: -1; height: 1px; background-color: #fff; width: 100%; position: absolute; bottom: -3px;  animation: st 0.5s 0.2s both linear; }
.st {position: relative; width: 100%; z-index: 2;}
@keyframes st 
{ 
	from { width: 0%; } 
	50% {    } 
	to { } 

}

@keyframes sub-st 
{ 
	from { opacity: 0; margin-top: 0; } 
	50% {    } 
	to { } 

}


@keyframes sub-top {

    from {  transform:scale(1.5)}

    to { }
    
  }

@keyframes sub-top-bg {

    from {  opacity:0;}

    to { }
    
  }


@keyframes sub_top {
	from { opacity: 0; transform: scale(1.5); }
	to {  }
}


@keyframes sub_top_txt {
	from { transform: translateY(-5vw); opacity: 0; }
	to {  }
}



@keyframes sub_top_line {
	from { width: 0; }
	to {  }
}


@media all and (min-width:600px){

}


#sub {width:100%;margin:0 auto; position:relative; text-align:center;  font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;font-weight:700;}
#sub .sub-tit{font-size:28px; font-weight:500; padding-bottom:0px; line-height:90%; letter-spacing: -1.5px;    margin-top:40px;}
.sub_tit_txt{ font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;font-weight:400; text-align: center; color: #888; font-size:2.5vw;margin: 2vw 0;}
.sub-page{ width: 90%; text-align:center; margin:0 auto; margin-top: 10px; opacity: 1; overflow: hidden; padding-bottom: 40px; padding-top: 15px; }
.sub-page>h2{ font-size:20px; color:#111; padding-top:28px; text-align: left; margin-bottom: 10px;}
/*.sub-page img { width: 100%; }
#sub-tit-line {margin-top:30px;
	width: 90%;
	margin-left: 5%;

}
*/

.snb_wrap { width: 100%; height: auto; text-align: center; }
.snb { width: 100%; height: 45px;display: flex; /* justify-content: space-between; */ justify-content:center; border-bottom: #e1e1e1 1px solid; position: relative; left: 0; right: 0; background: #fff; }
.snb li { font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 600; width: 20%; height: 45px; line-height: 45px; /*box-sizing: border-box;*/ /*border-left: #e1e1e1 1px solid;*/  }
.snb li a { color: #484848; display: block; }
.snb li:nth-child(1) { border-left: none; }
.snb .selected { /* background-color: #e28f2f; */ }
.snb .selected a { color: #e28f2f; font-weight: 600;}


#sub-tit-line { width: 8px; height: 8px; margin: auto; margin-top: 17px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; transform: rotate(45deg); }



#container{ padding-left:0px; padding:5px 0 100px 0;} 

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    font-size:13px;
	border-left: 1px solid #ddd;
	height:40px;
}
ul.tabs li { margin-bottom:-1px; color:#444;
    float: left;
    text-align:center;
    cursor: pointer;
    width:16.5%;
    height: 39px;
    line-height: 39px;
    border: 1px solid #ccc;
    border-left: none;
    font-weight: 600;
    background: #eee;
    overflow: hidden;
    position: relative;
	
}
ul.tabs li.active { color:#f8981c;
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

ul.tabs li.selected { color:#fff;
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.tab_container {
    border: none;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #FFFFFF;max-width:900px;
}
.tab_content { position: absolute;
    margin:40px 0px 0px 0px; padding-right:60px;
    font-size: 1em;
    display: none;
}
.tab_container .tab_content ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container .tab_content ul li {
    padding:5px;
    list-style:none;
}
 #container {
    width: 1100px;
    margin: 0 auto;
}










#container2{ padding-left:0px; padding:5px 0 100px 0;} 

ul.tabs2 { font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    font-size:14px;
	height:40px;
}



ul.tabs2 li { margin-bottom:-1px; color:#232222; margin-left:0px;
    float: left;
    text-align:center;
    cursor: pointer;
    width:18.4%;

    height: 45px;
    line-height: 45px;
   border: 1px solid #e9eaec;
    font-weight: 400;
    background: none;
    overflow: hidden;
    position: relative;
	
}


ul.tabs2 li.selected, ul.tabs li.selected:hover
{
    position: relative;
    top: 0px;
	color:#707070; background:#192642;   border: 0px solid #192642; }
	
ul.tabs2 li.selected a, ul.tabs li.selected a:hover { color:#fff;}
        

ul.tabs2 li a {  font-size:12px; font-weight:600; color:#707070; text-decoration: none; display: block !important; line-height: 41px !important; }
         
ul.tabs2 li.selected a:hover
{
    text-decoration: none;
}

ul.tabs2 li.selected
{
   color:#fff;
}

ul.tabs2 li.active { color:#fff;  }




.tab_container2 {
    border: none;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #FFFFFF;max-width:900px;
}
.tab_content2 { position: absolute;
    margin:40px 0px 0px 0px; padding-right:60px;
    font-size: 1em;
    display: none;
}
.tab_container2 .tab_content2 ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container2 .tab_content2 ul li {
    padding:5px;
    list-style:none;
}
 #container2 {
    width: 1100px;
    margin: 0 auto;
}


@media all and (min-width:600px){

	.sub_top_bg {height:300px;}

	#sub-top {height:300px;}
	
	.sub-top-tit h1 {font-size:  30px;}
	.sub-top-tit p {font-size: 15px;}



}


/**/



/**/

.sub_brand_wrap { width: 100%; position: relative; max-width: 500px; margin: auto; }

.sub_brand_tit {  }
.sub_brand_tit h2 { font-size: 22px; line-height: 100%; color: #242a5c; font-weight: 600; opacity: 0; transform: translateY(-50px); }
.sub_brand_logo { width: 60%; max-width: 345px; margin-top: 0px; margin-bottom: 30px; opacity: 0; }

.sub_brand_img_box { width: 100%; height: 500px; position: relative; overflow: hidden; }
.sub_brand_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; transform: scale(1.2); }
.sub_brand_img.img01 { background: url(../../sub/brand/brand_img01_m.jpg) center no-repeat; background-size: cover; }
.sub_brand_img.img02 { background: url(../../sub/brand/brand_img02_m.jpg) center bottom no-repeat; background-size: cover; }

.sub_brand_txt { position: absolute; z-index: 9; text-align: center; color: #010101; }                            
.sub_brand_txt h2 { font-size: 22px; line-height: 115%; font-weight: 700; }
.sub_brand_txt p { font-size: 12px; line-height: 170%; opacity: 0.7; margin-top: 15px; }
.sub_brand_txt.txt01 { left: 0; right: 0; margin: auto; top: 20%; opacity: 0; transform: translateY(-60px); }
.sub_brand_txt.txt02 { right: 0; left: 0; margin: auto; top: 20%; opacity: 0; transform: translateY(60px); /*color: #fff;*/}

.sub_brand_core { width: 100%; height: auto; padding: 60px 0 60px; display: flex; justify-content: center; align-items: center; }
.sub_brand_core>div { width:100%; }
.sub_brand_core>div>h2 { font-size: 22px; line-height: 100%; color: #1b2254; font-weight: 700; opacity: 0; }
.sub_brand_core>div>p { font-size: 14px; line-height: 160%; color: #1b1b1b; margin-top: 20px; opacity: 0; }
.sub_brand_logo2 {margin-top:40px; opacity:0;}

.brand_btn {width:80%; height:70px; background-color:#10255c; border-radius: 50px;  margin:0 auto; margin-bottom:50px;}
.brand_btn a {color:#fff; font-size:18px; line-height:70px; display:block;}
.brand_btn:hover { background-color:#000; transition: 0.4s 0s; }

.hk_busi { position: relative; width:100%; height:200vw; left:0; right:0; margin:0 auto; top:20px;}
.hk_txt_box {position:relative; top:0px; width:100%; text-align:center; opacity:0; transform: translateY(-50px); }
.hk_txt_box .hk_tit { }
.hk_txt_box .hk_line { width:35px; height:1px; background-color:#a4a7bb; margin:0 auto; margin-top:25px; }
.hk_txt_box .hk_txt {margin-top:30px; }

.hk_txt_box2 {position:relative; top:70px; width:100%; text-align:center; opacity:0;  transform: translateY(-50px);}
.hk_txt_box2 .hk_tit {  }
.hk_txt_box2 .hk_line { width:35px; height:1px; background-color:#a4a7bb; margin:0 auto; margin-top:25px; }
.hk_txt_box2 .hk_txt {margin-top:30px; }

.trophy {position:relative; top:120px; margin:0 auto; opacity:0; transform: translateY(20px);}

.sub_brand_value_box { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 40px; flex-wrap: wrap;  background-color: #e7e7e7; padding:40px 20px 20px 20px;}
.sbv_wrap { width: 90%; display: flex; justify-content: space-between; align-items: flex-start;}
.sub_brand_value { width: 48.5%; background-color: #10255c; color: #fff; padding: 40px 0 50px; }
.sub_brand_value:nth-child(2n) { background-color: #fff; color: #1b2254; margin-top: 40px; opacity: 0; transform: translateY(-20px); }
.sub_brand_value:nth-child(2n)>div>div { background-color: #1b2254; }
.sub_brand_value:nth-child(2n-1) { opacity: 0; transform: translateY(20px); }
.sub_brand_value:nth-child(n+3) { position: relative; top: -30px; }

.sub_brand_value h4 { font-family: "Poppins", sans-serif; font-size: 14px; line-height: 100%; opacity: 0.2; font-weight: 600; display:none;}
.sub_brand_value h2 { font-family: "Poppins", sans-serif; font-size: 22px; line-height: 100%; font-weight: 600; margin-top: 15px; }
.sub_brand_value>div>div { width: 16%; height: 1px; background-color: #fff; opacity: 0.4; margin: 20px auto 20px; }
.sub_brand_value p { font-size: 12px; line-height: 100%; }


.sub_brand_tit.active h2 { opacity: 1; transform: translate(0); transition: 1s 0.2s; }
.sub_brand_tit.active .sub_brand_logo { opacity: 1; transform: translate(0); transition: 1s 0.2s; }
.sub_brand_img_box.active .sub_brand_img { transform: scale(1); transition: 1.8s 0s; }
.sub_brand_img_box.active .sub_brand_txt { opacity: 1; transform: translate(0); transition: 1s 0.2s; }
.sub_brand_core.active>div>h2 { opacity: 1; transform: translate(0); transition: 1s 0.2s; }
.sub_brand_core.active>div>p { opacity: 1; transform: translate(0); transition: 1s 0.2s; }
.sub_brand_core.active .sub_brand_logo2 { opacity: 1; transform: translate(0); transition: 1s 0.2s; }

.sub_brand_core.active .sub_brand_value { opacity: 1; transform: translate(0); transition: opacity 1s 0.2s, transform 0.6s 0.8s; }
.hk_busi.active .hk_txt_box { opacity: 1; transform: translate(0); transition: 1s 0.3s; }
.hk_busi.active .hk_txt_box2 { opacity: 1; transform: translate(0); transition: 1s 0.5s; }
.hk_busi.active .trophy {opacity: 1; transform: translate(0); transition: 1s 1.2s; }


/**/

.sub_over_wrap { width: 100%; max-width: 1100px; margin: auto; height: auto; position: relative; text-align: left; }

.sub_over_top { width: 100%; margin: auto; position: relative; /* display: flex; justify-content: space-between; align-items: flex-end; */ opacity: 0; }

.swiper_planning { width: 100%; margin: 0; padding: 0; position: relative;}
.swiper_planning .swiper-slide { background-color: #fff; padding-top: 35px;}
.swiper_planning .sub_planning_img { width: 100%; height: 45vw; }
.sub_planning_img.img01 { background: url(../../sub/planning01.jpg) center no-repeat; background-size: cover; }
.sub_planning_img.img02 { background: url(../../sub/planning02.jpg) center no-repeat; background-size: cover; }
.sub_planning_img.img03 { background: url(../../sub/planning03.jpg) center no-repeat; background-size: cover; }
.sub_planning_img.img04 { background: url(../../sub/planning04.jpg) center no-repeat; background-size: cover; }

.planning_txt { position: absolute; width: 100%; text-align: left; top: 0; left: 10px;}
.planning_txt h3 { font-size: 20px; font-weight: 700;}

.swiper_planning_thumb { max-width:593px; margin: 0; padding: 0; margin-top: -7px;}

.swiper_planning_thumb .swiper-wrapper { max-width: 95%; margin: 0 auto; overflow: hidden;}
.swiper_planning_thumb .swiper-slide { max-width:23.7%; height: 12vw; cursor: pointer; border: none; overflow: hidden; margin-top: 1rem; position: relative; }
.swiper_planning_thumb .swiper-wrapper div:nth-child(4) { margin-right: 0;}


 .thumb_txt {display: flex; justify-content: space-between; justify-content: flex-start; gap:1%; margin: 5px auto 0; width: 95%;}
 .thumb_txt li { float: left;text-align: left; color: #000; width: 100%; font-size: 13px; font-weight: 400;}


.swiper_planning_thumb .sub_planning_img { width: 100%; height: 100%; filter: grayscale(1); }
.swiper_planning_thumb .swiper-slide-thumb-active .sub_planning_img { opacity: 1; filter: grayscale(0); }
.swiper_planning_thumb .swiper-slide-thumb-active:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; /* border: 3px solid #000; */ box-sizing: border-box; }

.swiper-button-next-planning { position: absolute; width: 20px; height: 7px; right: 10px; top: 20px; bottom: 0; padding: 0; outline: none; z-index: 99; cursor: pointer; }
.swiper-button-prev-planning { position: absolute; width: 20px; height: 7px; right: 75px; top: 20px; bottom: 0; padding: 0; outline: none; z-index: 99; cursor: pointer; }
.swiper-button-next-planning img { width: 100%; }
.swiper-button-prev-planning img { width: 100%; }

.sub_over_top.active { opacity: 1; transition: 1.0s 0s; }
.sub_over_bottom.active { opacity: 1; transition: 1.0s 0s; }

.sub_over_top.active .over_tit b:nth-child(1) { transform: translate(0); transition: 1.3s 0.0s; }
.sub_over_top.active .over_tit b:nth-child(2) { transform: translate(0); transition: 1.3s 0.07s; }
.sub_over_top.active .over_tit b:nth-child(3) { transform: translate(0); transition: 1.3s 0.14s; }
.sub_over_top.active .over_tit b:nth-child(4) { transform: translate(0); transition: 1.3s 0.21s; }
.sub_over_top.active .over_tit b:nth-child(5) { transform: translate(0); transition: 1.3s 0.28s; }
.sub_over_top.active .over_tit b:nth-child(6) { transform: translate(0); transition: 1.3s 0.35s; }
.sub_over_top.active .over_tit b:nth-child(7) { transform: translate(0); transition: 1.3s 0.42s; }
.sub_over_top.active .over_tit b:nth-child(8) { transform: translate(0); transition: 1.3s 0.49s; }

.sub_over_top.active .over_img_box { opacity: 1; clip-path: inset(2% 37% 0% 37% round 300px); transform: rotate(30deg); transition: opacity 1.2s 1.0s, clip-path 1.5s 1.85s, transform 1.3s 3.8s; }
.sub_over_top.active .over_vd_box { transform: rotate(-30deg); transition: 1.3s 3.8s; }
.sub_over_top.active .over_txt_box.white { transform: rotate(-30deg); transition: 1.3s 3.8s; }
.sub_over_top.active .over_txt_box h4 { opacity: 1; transform: translate(0); transition: 1.3s 2.8s; }
.sub_over_top.active .over_txt_box h2 { opacity: 1; transform: translate(0); transition: 1.3s 2.8s; }