/*---common css---*/

:root {
	/*color*/
	--color-base: #000;
	--color-kakao: #ffc401;
	--color-kakao-text: #442f01;
	--color-naver: #00c13a;

	/*font-size*/
	--font-size-14: 0.875rem;
	--font-size-16: 1rem; 
	--font-size-17: 1.0625rem; 
	--font-size-18: 1.125rem;
	--font-size-20: 1.25rem; 
	--font-size-22: 1.375rem; 
	--font-size-26: 1.625rem;
	--font-size-27: 1.688rem; 
	--font-size-31: 1.938rem; 
	--font-size-60: 3.75rem; 
	--font-size-80: 5rem;
	--font-size-110: 6.875rem;


	/*font-weight*/
	--font-l: 300;
	--font-r: 400;
	--font-m: 500;
	--font-sb: 600;
	--font-b: bold;
	--font-bl: 900;
}

/*font size*/

.fs_14{font-size: var(--font-size-14);}
.fs_16{font-size: var(--font-size-16);} 
.fs_17{font-size: var(--font-size-17);} 
.fs_18{font-size: var(--font-size-18);}
.fs_20{font-size: var(--font-size-20);} 
.fs_22{font-size: var(--font-size-22);} 
.fs_26{font-size: var(--font-size-26);}
.fs_27{font-size: var(--font-size-27);} 
.fs_31{font-size: var(--font-size-31);}
.fs_60{font-size: var(--font-size-60);}
.fs_80{font-size: var(--font-size-80);}
.fs_110{font-size: var(--font-size-110);}

@media screen and (max-width:1020px){
.fs_110 {font-size:60px;}
}

@media screen and (max-width:720px){
.fs_110 {font-size:35px;}
}


/*font weight*/
.font_l{font-weight: var(--font-l);}
.font_r{font-weight: var(--font-r);}
.font_m{font-weight: var(--font-m);}
.font_sb{font-weight: var(--font-sb);}
.font_b{font-weight: var(--font-b);}
.font_bl{font-weight: var(--font-bl);}


/*text-motion*/
.j_motion.common_motion{transform: translateY(25px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion.on {transform: translateY(0);opacity: 1;}

.j_delay_01{transition-delay: .2s !important;}
.j_delay_02{transition-delay: .4s !important;}
.j_delay_03{transition-delay: .6s !important;}
.j_delay_04{transition-delay: .8s !important;}
.j_delay_05{transition-delay: 1s !important;}
.j_delay_06{transition-delay: 1.2s !important;}
.j_delay_07{transition-delay: 1.4s !important;}
.j_delay_08{transition-delay: 1.6s !important;}
.j_delay_09{transition-delay: 1.8s !important;}
.j_delay_10{transition-delay: 2s !important;}
.j_delay_11{transition-delay: 2.2s !important;}

/*common*/
.fc_f {color:#fff;}
.mr9 {margin-right:9px;}
.mt10 {margin-top:10px;}
.mt25{margin-top:25px;}
.ml26{margin-left:26px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt55 {margin-top:55px;}
.ml135 {margin-left:135px;}
.common_btn {display:flex; align-items:center; gap:19px; width:210px; height:60px; line-height:60px; background:#f52828; color:#fff; justify-content: center;}


@media screen and (max-width:1230px){
	.ms01_br {display:none;}
}

@media screen and (max-width:720px){
.ml26 {margin-left:10px;}
}


/*---header---*/

#j_header {position:absolute; left:0; top:0; width:100%; height:100px; z-index:99; transition:0.28s;}
#j_header > .j_inner {height:100%;}
#j_header.active {position:fixed; background:#000;}

.hdWrap {width:100%; display:flex; justify-content:space-between; height:100%; align-items:center;}
.hdWrap > .j_gnb {display:flex; height:100%;}
.hdWrap > .j_gnb > li {height:100%;}
.hdWrap > .j_gnb > li:first-child > a {padding-left:0;}
.hdWrap > .j_gnb > li:last-child > a {padding-right:0;}
.hdWrap > .j_gnb > li > a {display:block; height:100%; line-height:100px; color:#fff; padding:0 24px; font-weight:600; font-size:1.063rem; transition:0.28s;}
.hdWrap > .j_gnb > li > a:hover {color:#f52828;}

@media screen and (max-width:1020px){
.hdWrap > .j_gnb {display:none;}

}
@media screen and (max-width:720px){
#j_header {height:80px;}
.hdLogo img {width:70%;}

}



/*--- hd_btn ---*/

.hd_btn {width:55px; height:55px; border-radius:20px; position:relative; background:#f52828; display:flex; flex-direction: column;justify-content: center;align-items: center; position:relative; display:none;}
.hd_btn_wrap {width:23px; height:17px; position:absolute; top:50%; transform:translate(-50%, -50%);}
.hd_btn span {display: block;width: 100%; height: 2px; border-radius: 4px; background-color: #fff;transition: .3s;position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}

.hd_btn span:nth-of-type(1) {transform:translateY(5px)}
.hd_btn span:nth-of-type(2) {transform:translateY(0px)}
.hd_btn span:nth-of-type(3) {transform:translateY(-5px)}

.hd_btn.on {z-index:99;}
.hd_btn.on span:nth-of-type(1){ transform: rotate(-45deg);}
.hd_btn.on span:nth-of-type(2){display:none;}
.hd_btn.on span:nth-of-type(3){ transform:rotate(45deg);}

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

.hd_btn {display:flex;}
}

@media screen and (max-width:720px){
.hd_btn {width:45px; height:45px;}
}


/*--- allGnb ---*/

.allGnb {width:100%; height:100vh; position:fixed; background:rgba(0,0,0, 0.9); z-index:90; display:none;}
.allGnb.show {display:block; opacity:1;}
.allInner {max-width:1200px; margin:0 auto; width:92%; height:100%; }
.allInner > .j_gnb {height:100vh; display:flex; align-items:center;flex-direction: column; justify-content: center; gap:10px; }
.allInner > .j_gnb > li {opacity:0; transform: translateX(50px); padding:10px; text-align:Center;}
.allInner > .j_gnb > li.animate {animation: slideIn 0.5s forwards;}
.allInner > .j_gnb > li:nth-child(1) {animation-delay: 0.1s;}
.allInner > .j_gnb > li:nth-child(2) {animation-delay: 0.2s;}
.allInner > .j_gnb > li:nth-child(3) {animation-delay: 0.3s;}
.allInner > .j_gnb > li:nth-child(4) {animation-delay: 0.4s;}
.allInner > .j_gnb > li:nth-child(5) {animation-delay: 0.5s;}

.allInner > .j_gnb > li > a {color:#fff; font-size:3.125rem; font-weight:700; transition:0.45s;}
.allInner > .j_gnb > li:hover > a{color:#f52828;}
.allInner > .j_gnb > li > ul {display:none; text-align:center; padding:30px 0;}

.allInner > .j_gnb > li > ul > li > a {display:block; padding:10px 0; font-size:1.25rem; font-weight:500;  transition:0.45s;word-break:keep-all;}
.allInner > .j_gnb > li > ul > li > a:hover {color:#f52828;}

  @keyframes slideIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

/*--- MV ---*/

.mainVisual {width:100%; height:100vh; position:relative;}
.mainVisual:after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url(/img/main/temp_img.jpg) no-repeat center / cover;}

.maintxt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; color:#fff; z-index:10; text-align:center;}    
.maintxt h2 {line-height: 1em;}

.scrollDownBox {position:absolute; left:50%; transform:translateX(-50%); bottom:57px; z-index:10; display:flex; align-items:center; gap:10px;}
.mouse {  width: 17px;height: 26px; border: 1px solid #fff;border-radius: 60px;position: relative;}
.mouse:after {content: '';width: 5px;height: 5px;position: absolute; top: 5px; left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 50%; opacity: 1;animation: wheel 2s infinite; -webkit-animation: wheel 2s infinite;}

@keyframes wheel {
  to {
    opacity: 0;
    top: 18px;
  }
}
@media screen and (max-width:720px){
.maintxt i img {width:10%;}
}


/*--- ms01 ---*/

.mainSec01 {padding:210px 100px 150px; background:url(/img/main/ms01_bg.jpg) no-repeat center / cover;  position:relative;}
.ms01__content {display:flex; justify-content:end;}
.ms01_list {display:flex;}
.ms01_list li {position:relative; width:calc((100% - 35px*2)/3); margin-right:35px; transition: transform 0.28s ease;}
.ms01_list li figure img {width:100%;}
.ms01_list li.active { transform: translateY(-65px); /* active 클래스가 붙으면 위로 65px 이동 */}
.ms01_list li:nth-of-type(3n){margin-right:0;}
.ms01_lt {position: absolute; left: 63px;z-index: 10; top:155px;}
.ms01_lt h2{line-height:1em;}
.ms01_txt {position:absolute; left:50%; transform:translateX(-50%); bottom:28px; width:100%; padding:0px 27px;}
.ms01_txt p {opacity:0.6; margin-top:16px; line-height:1.3em; word-break:keep-all;}

@media screen and (max-width:1680px){
.ms01__content {flex-wrap:wrap; justify-content:center;}
.ms01_lt {position:relative; width:100%;left:unset; top:unset; text-align:Center;}
.ms01_lt .common_btn {margin:30px auto 0 auto;}
.ms01_lt h2 b{margin-left:0;}
.ms01_rt {margin-top:100px; width:100%;}
}

@media screen and (max-width:1080px){
.ms01_list li {width:calc((100% - 15px*2)/3); margin-right:15px; transition: transform 0.28s ease;}
}

@media screen and (max-width:976px){
.ms01_rt {margin-top:50px;} 
.ms01_list {flex-wrap:wrap;}

.ms01_list li {width:100%; margin-right:0;}
.ms01_list li + li{margin-top:15px;} 
.mainSec01 {padding:100px 100px 100px;}
}

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

.mainSec01 {padding:80px 20px;}
.ms01_lt .common_btn {width:150px; height:50px;}
}


/*--- ms02 ---*/

.ms02__content { height:532px;}
.ms02_list {display:flex; align-items:center; height:100%;}
.ms02_txt p {line-height:1.3em;}
.ms02_list li {width:50%; height:100%;}
.ms02_list li.ms02_lt {background:url(/img/main/ms02_bg01.jpg) no-repeat center / cover; height:100%;}
.ms02_list li.ms02_rt {background:url(/img/main/ms02_bg02.jpg) no-repeat center / cover; height:100%; padding:110px 80px; box-sizing:border-box;}



@media screen and (max-width:1190px){
.ms02_list li.ms02_rt {padding:110px 40px 110px 80px;}
}

@media screen and (max-width:1110px){
.ms02_list li.ms02_rt {padding:110px 40px 110px;}
}


@media screen and (max-width:1020px){
.ms02_list {flex-wrap:wrap;}
.ms02_list li {width:100%;}
.ms02_list li.ms02_lt {height:380px;}
.ms02__content {height:auto;}
.ms02_list li.ms02_rt {padding:110px 35px 110px;}
.ms02_txt {text-align:center;}
.ms02_txt .common_btn {margin:35px auto 0 auto;}
}

@media screen and (max-width:720px){
.ms02_list li.ms02_rt {padding:80px 0;}
.ms02_txt .common_btn {width:150px; height:50px;}
}



/*--- ms03 ---*/

.mainSec03 {background:#000; padding-top:140px;}
.ms03Tit {text-align:center;}
.ms03_swip {overflow:visible; padding:62px 0 80px;}
.ms03_swip ul li figure img {width:100%;}
.ms03_page_box {position:absolute; width:100%; bottom:22px; left:0; display:flex;     justify-content: space-between; align-items: center;}

.swiper-pagination.ms03page {width:calc(100% - 100px); top:unset;}
.swiper-pagination.ms03page .swiper-pagination-progressbar-fill {background:#fff;}
.swiper-pagination-progressbar.ms03page {background:rgba(255,255,255, 0.3);}
.ms03_naviBox {width:70px; display:flex; gap:22px; position:absolute; height:20px; right:0;}
.swiper-button-next.ms03_next {right:0;}
.swiper-button-prev.ms03_prev {left:0;}
.swiper-button-next { background: url(/img/icon/ms03_next_off.png) no-repeat center / cover; width:27px; height:20px;  margin-top:0; top:unset;}
.swiper-button-prev { background: url(/img/icon/ms03_prev_off.png) no-repeat center / cover; width:27px; height:20px;   margin-top:0; top:unset;}
.swiper-button-next.active {background: url(/img/icon/ms03_next.png)}
.swiper-button-prev.active {background: url(/img/icon/ms03_prev.png)}
.swiper-button-next::after, .swiper-button-prev::after {display: none;}

@media screen and (max-width:1020px){
.mainSec03 {padding-top:100px;}
}

@media screen and (max-width:720px){
.mainSec03 {padding-top:80px;}

}


/*--- ms04 ---*/

.w100 {width:100% !important;}
.mainSec04 {padding:155px 0 113px; background:#000;}
.ms04_txt p {line-height:1.3em;}
.ms04_list {display: flex; justify-content: space-between;}
.ms04_lt {margin-top:40px;}
.ms04_rt {width:567px;}

.j_form_wrap {display:flex; flex-wrap:wrap;}
.j_form_btn {display:flex; align-items:center;}
.j_form_box {width:calc((100% - 10px)/2); margin-right:10px;}
.j_form_box:nth-of-type(n + 2) {margin-right:0;}
.j_form_box:nth-of-type(n + 3) {margin-top:10px;}

.field_box input {width:100%; box-sizing:border-box; padding:15px 23px; background:#262626; border: 1px solid #4d4d4d; color:#fff; font-size:15px; font-weight:400;}
.field_box input::placeholder {color:#fff;}
.field_box textarea {width:100%; box-sizing:border-box; padding:15px 23px; background:#262626; border: 1px solid #4d4d4d; resize:none; height:130px; color:#fff; font-size:15px; font-weight:400;}
.field_box textarea::placeholder {color:#fff;}

.j_form_btn {display:flex; width:100%; background:#f52828; justify-content:center; color:#fff; gap:11px; letter-spacing:0.075em; height:60px;}

@media screen and (max-width:1080px){
.mainSec04 {padding:100px 0;}
.ms04_txt {text-align:center;}
.ms04_list {flex-wrap:wrap;}
.ms04_lt {width:100%; margin-top:0;}
.ms04_rt {width:100%; margin-top:40px;}
}

@media screen and (max-width:720px){
.mainSec04 {padding:80px 0;}

}



/*--- footer ---*/
footer {background:#000; padding:60px 0;}
.ft_list {display:flex; align-items:center; justify-content:space-between;}
.ft_lt p {color:#999; line-height: 2em;} 
.ft_list02 li + li {margin-top:10px;}
.ft_list02 li a {display:block; color:rgba(255,255,255, 0.5); transition:0.28s;}
.ft_list02 li a:hover {color:rgba(255,255,255, 1);}

@media screen and (max-width:720px){
.ft_list {flex-wrap:wrap;}
.ft_list > li {width:100%;}
.ft_list > li + li {margin-top:10px;}
.ft_list .ft_list02 {display:flex; gap:10px;}
.ft_list02 li + li {margin-top:0;}
}

/*---관리자버튼---*/
.hd_admin {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 999;
}
.hd_admin a {
  padding: 0 20px;
  display: inline-block;
  line-height: 40px;
  background: #d12323;
  color: #fff;
}
.hd_admin a:hover {
  background: #ff0000;
}


.adm_btn{
  display: inline-block;
  margin-left: 20px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}

@media screen and (max-width: 760px){
	.adm_btn{
	 margin: 5px 0;
	}
}