/*---common css---*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Russo+One&display=swap');



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

	/*font-size*/
	--font-size-13: 0.813rem;
	--font-size-14: 0.875rem;
	--font-size-16: 1rem; 
	--font-size-17: 1.0625rem; 
	--font-size-18: 1.125rem;
	--font-size-19: 1.188rem;
	--font-size-20: 1.25rem; 
	--font-size-23: 1.438rem;
	--font-size-24: 1.5rem; 	
	--font-size-25: 1.563rem; 
	--font-size-26: 1.625rem;
	--font-size-27: 1.688rem; 
	--font-size-31: 1.938rem; 
	--font-size-32: 2rem; 
	--font-size-38: 2.375rem; 
	--font-size-40: 2.5rem; 
	--font-size-45: 2.813rem; 
	--font-size-52: 3.25rem; 
	--font-size-55: 3.438rem; 
	--font-size-60: 3.75rem; 
	--font-size-65: 4.063rem; 
	--font-size-80: 5rem;
	--font-size-82: 5.125rem;

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

/*font size*/
.fs_13{font-size: var(--font-size-13);}
.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_19{font-size: var(--font-size-19);}
.fs_20{font-size: var(--font-size-20);}
.fs_23{font-size: var(--font-size-23);}
.fs_24{font-size: var(--font-size-24);}
.fs_25{font-size: var(--font-size-25);}
.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_32{font-size: var(--font-size-32);}
.fs_38{font-size: var(--font-size-38);}
.fs_40{font-size: var(--font-size-40);}
.fs_45{font-size: var(--font-size-45);}
.fs_52{font-size: var(--font-size-52);}
.fs_55{font-size: var(--font-size-55);}
.fs_60{font-size: var(--font-size-60);}
.fs_65{font-size: var(--font-size-65);}
.fs_80{font-size: var(--font-size-80);}
.fs_82{font-size: var(--font-size-82);}

@media screen and (max-width:767px){
.fs_25 {font-size:16px;}
.fs_52 {font-size:24px;}
.fs_55 {font-size:24px;}
.fs_60 {font-size:30px;}
.fs_65 {font-size:30px;}
.fs_80 {font-size:40px;}
.fs_82 {font-size:40px;}
}

/*font color*/
.fc_f {color:#fff;}
.fc_p01 {color:#00a26a;}
/*font weight*/
.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_eb{font-weight: var(--font-eb);}
.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 ---*/
.j_inner {max-width:1700px; width:92%; margin:0 auto; height:100%; position:relative;}
.j_inner02 {max-width:1520px; width:92%; margin:0 auto; height:100%; position:relative;}
.j_eng {font-family: "Russo One", sans-serif;}
.mt15 {margin-top:15px;}
.mt25 {margin-top:25px;}
.mt42 {margin-top:42px;}
.mt48 {margin-top:48px;}
.MainSubtit {color:#c6c6c6;}
.j_white {color:#fff;}
.pd160 {padding:160px 0;}
.fc_point01 {color:#008655;}
.tc {text-align:center;}

@media screen and (max-width:767px){
.pd160 {padding:80px 0;}
.mt42 {margin-top:20px;}
.mt48 {margin-top:20px;}
}


/*---header---*/
#j_header {width:100%; height:100px; position:absolute; left:0; top:0; z-index:20; transition:0.28s;}
#j_header.active {position:fixed; background:rgba(0,0,0, 0.8);}
.hdWrap {display:flex; align-items:center; justify-content: space-between; height:100%;}
.hdWrap > .j_gnb {display:flex; height:100%; align-items:center;}
.hdWrap > .j_gnb > li > a {display:block; color:#fff; font-weight:700; font-size:1.125rem; height:100%; line-height:100px; padding:0 47px; transition:0.28s;}
.hdWrap > .j_gnb > li > a:hover {color:#00a26a;}
.hdWrap > .j_gnb > li:first-child > a {padding-left:0;}
.hdWrap > .j_gnb > li:last-child > a {padding-right:0;}

.utilBox {display:flex; align-items:center; gap:20px;}

.famSiteList {position:relative;}
.famSiteList > li > a {display:flex; width:121px; height:36px; border-radius:18px; color:#fff; font-size:0.875rem; font-weight:700; align-items: center; justify-content: space-around; background:rgba(255,255,255, 0.35);}
.famSiteList > a i img {display:block;}
.famSiteList .fam02 {display:none; text-align:center; position:absolute; top: 120%; left: 50%;transform: translateX(-50%); width: 100%; background: rgba(255, 255, 255, 0.35); border-radius: 18px; }
.famSiteList .fam02 > li a {padding:10px 0; display:block;}
.famSiteList li a {font-size:0.875rem; font-weight:700; color:#fff;}

/*mo_gnb*/
.btn_box {width: 24px; height: 21px; position:relative;}
.btn_box.on  {z-index:98;}
.btn_box.on .nav_btn>span {}
.btn_box.on .nav_btn>span:nth-of-type(1) {transform: rotate(45deg);}
.btn_box.on .nav_btn>span:nth-of-type(2) {display:none;}
.btn_box.on .nav_btn>span:nth-of-type(3) {transform: rotate(-45deg);}

.nav_btn{width:100%; height:100%;}
.nav_btn>span {display: block;width: 100%; height: 2px;background: #fff;position: absolute; transition: .3s;}
.nav_btn>span:nth-of-type(1) {transform: translateY(6px);}
.nav_btn>span:nth-of-type(2) {transform: translateY(0px);}
.nav_btn>span:nth-of-type(3) {transform: translateY(-6px);}

/*mobileWrap*/

.mobileWrap {margin: 0;padding: 0; position: fixed; top: 0; left: -100%; width: 100%;  height: 100%;background:rgba(0,0,0 ,0.8);z-index: 97;transition: 0.5s;}
.mobileWrap.active {left:0;}
.mobileWrap .mo_gnb { margin: 0; padding: 0;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.mobileWrap .mo_gnb > .j_gnb > li > a {display:block; font-size: var(--font-size-40); padding:20px; font-weight:700; color:#fff; transition:0.28s;}
.mobileWrap .mo_gnb > .j_gnb > li > a:hover {color:#00a26a;}

@media screen and (max-width:1200px){
.hdWrap > .j_gnb > li > a  {padding: 0 20px;}
}

@media screen and (max-width:920px){
.hdWrap > .j_gnb > li > a  {display:none;}
}
@media screen and (max-width:720px){
.hdWrap > .j_gnb > li > a  {display:none;}
.hdLogo a img {width:50%;}
#j_header {height:70px;}
.mobileWrap .mo_gnb > .j_gnb > li > a {font-size:22px;}
}


/*---mainvisual ---*/
.mainBg {width:100%; height:100vh;  position:relative;}
.mainBg.mv01 {background:url('../img/main/mv01.jpg') no-repeat center / cover;}
.mainBg.mv02 {background:url('../img/main/mv01.jpg') no-repeat center / cover;}
.mainBg.mv03 {background:url('../img/main/mv01.jpg') no-repeat center / cover;}
.mainTxt {position:absolute; width:100%; top:258px; left:0;}
.mainTxt p {font-size:1.438rem; font-weight:600; color:#fff; margin-top:28px; transform: translateY(25px);opacity: 0;transition: transform 1s ease, opacity .6s;}
.mainTxt h2{width:100%;transform: translateY(25px);opacity: 0;transition: transform 1s ease, opacity .6s;}

.mainLink {position:absolute; left:50%; transform:translateX(-50%);width: 100%; bottom:135px;  max-width:1327px; z-index:20; }
.mainLink ul {display:flex; width:100%;}
.mainLink ul li a {display:flex; align-items:center; justify-content:space-between;padding:24px; position:relative; transition:0.28s;}
.mainLink ul li a:hover {background:rgba(0,162,106, 0.3); color:#fff; font-weight:900;}
.mainLink ul li a:after {content:''; position:absolute; width:100%; height:1px; bottom:0px; left:0; background:rgba(255,255,255,0.35);}
.mainLink ul li.active a:before {content:''; position:absolute; width:100%; height:2px; bottom:0px; left:0; background:rgba(0,136,86, 1);animation-name: active_p; animation-duration: 5s;  animation-timing-function:linear;}
.mainLink ul li {width:calc((100% - 35px*2)/3); margin-right:35px;}
.mainLink ul li:nth-of-type(3n) {margin-right:0;}

.mainBg.on .mainTxt h2 { transform: translateY(0);opacity: 1;}
.mainBg.on .mainTxt p { transform: translateY(0);opacity: 1;}

@keyframes active_p{
    0%{
        width:0; 
    }
    100%{
        width:100%; 
    }
}

@media screen and (max-width:767px){
.mainLink {width:92%;}
.mainLink ul li {width:calc((100% - 20px*2)/3); margin-right:20px}
.mainLink ul li a {padding:10px; font-size:14px;}
.mainLink ul li a i img {width:50%;}
.mainTxt p  {font-size:13px;}
}


/*sec01*/
.sec01 {padding:270px 0; background:url('../img/main/sec01_bg.jpg') no-repeat center / cover; }
.typing {min-height:126px; word-break: keep-all;}
.typing:after  {display:inline-block; margin-left:2px;vertical-align:middle; content:'';background:#000; width:2px;height:50px; animation:blink infinite 1s ease;}

@keyframes blink {
  0%	{opacity:0;}
  100%	{opacity:1;}
}

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




/*sec02*/
.sec02 {background:url('../img/main/sec02_bg.jpg') no-repeat center / cover; }
.sec02Desc {}
.sec02Content {display:flex; gap: 180px;  margin-top:150px;}
.sec02ContentList {display:flex; flex-wrap:wrap; margin-top:124px;}
.sec02ContentList li figure {border-radius:22px; overflow:hidden;}
.sec02ContentList li figure img {width:100%;}
.sec02ContentList li h2 {line-height:1.375em; margin-top:35px;}
.sec02ContentList li p {line-height:1.75em; color:#989999; font-size:1.25rem; margin-top:34px;}
.sec02ContentWrap {padding-top:55px;}
.sec02ContentList li {width:calc((100% - 155px)/2); margin-right:155px;}
.sec02ContentList li:nth-of-type(2n) {margin-right:0; margin-top:380px;}

.vm_btn {display:block; margin-top:40px;}


@media screen and (max-width:1150px){
	.sec02Content {flex-wrap:Wrap; gap:20px;}
	.sec02ContentWrap {width:100%;}
}


@media screen and (max-width:860px){
	.sec02ContentList li {    width: calc((100% - 50px) / 2);margin-right: 50px;}
}

@media screen and (max-width:720px){
	.sec02ContentList li {width:100%;;margin-right: 00px;}
	.sec02ContentList li:nth-of-type(2n) {margin-right:0; margin-top:30px;} 
	.sec02ContentList li + li {margin-top:30px;}
	.sec02Content {margin-top:75px;}
	.sec02ContentList {margin-top:60px;}
	.sec02ContentWrap {padding-top:20px;}
}




/*sec03*/
.sec03 {background:url('../img/main/sec03_bg.jpg') no-repeat center / cover; padding-top:160px; }
.sec03Top {padding-bottom:106px;}
.sec03Top h2 {line-height:1.38em;}
.sec03Bot {background:rgba(255,255,255, 0.85);}
.sec03List {display:flex;}
.sec03List li {width:25%; padding:99px 110px; box-sizing:border-box;}
.sec03List li + li {border-left:1px solid #c8c3c1;}
.sec03List li:nth-of-type(3) .sec03cont b {top:0px} 
.sec03List li:nth-of-type(4) .sec03cont b {top:0px; right:0;} 
.sec03NumBox {position:relative;     display: flex; align-items: center; width:230px;}
.sec03cont h3 {position:relative;}
.sec03cont b {    position: absolute; top: -17px;right: -45px;}


@media screen and (max-width:1680px){
	.sec03List li {padding:60px;}
}

@media screen and (max-width:1420px){
.sec03List {flex-wrap:wrap;}
.sec03List li {width:50%;}
.sec03List li:nth-of-type(3) {border-top:1px solid #c8c3c1;}
.sec03List li:nth-of-type(4) {border-top:1px solid #c8c3c1;}
}

@media screen and (max-width:767px){
.sec03 {padding-top:80px;}
.sec03cont b {right:35%;}
.sec03List li {padding:20px;}
.sec03List li:nth-of-type(3) {border-left:0;} 
.sec03List li:nth-of-type(4) .sec03cont b {right:50%;}

}





/*sec04*/
.logoSlide {height:64px; position:relative;}
.logoSlide img {margin-right:102px;}
.logoWrap {height: 100%; display: flex; align-items: center; position: absolute; left: 0;  top: 0;animation-name: part_motion; animation-duration: 25s;animation-timing-function: linear; animation-iteration-count: infinite;}	
.partShip {margin-top:145px;}

@keyframes part_motion{ 
	0%{left:0;}	
	100%{left:-100%;}	
}
@media screen and (max-width:767px){
.partShip {margin-top:40px;}
.logoWrap {animation-duration: 5s;}
}


/*sec05*/

.sec05 {background:url('../img/main/sec05_bg.jpg') no-repeat center / cover; padding:370px 0; position:relative;}
.sec05Tit h2 {line-height:1.38em;}

@media screen and (max-width:1080px){
.sec05 {padding:180px 0;}
}

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


/*footer*/

.j_footer {background:#000; padding:56px 0;}
.ftWrap {display:flex;}
.ftLt {display:flex; justify-content: space-between; width:50%}
.ftRt {display:flex; width:50%; justify-content: space-around;}
.ftInfo p{color:#989999; margin-top:42px; line-height:1.66em;}

.ftNav li a {display:block;}
.ftNav li + li {margin-top:14px;}
.ftSiteList {position:relative;}
.ftSiteList > li > a {width:253px; height:50px; line-height:50px; display:flex; justify-content:space-between; padding:20px; align-items:center; border-radius:5px; border:1px solid #fff; }
.ftSiteList .fam02 {display:none;}
.ftSiteList .fam02 > li a {padding: 10px 20px;display: block;}

@media screen and (max-width:1680px){
.ftWrap {flex-wrap:Wrap;}
.ftLt {width:100%; flex-wrap:wrap;}
.ftInfo  {width:100%;}
.ftRt {width:100%; flex-wrap:Wrap; justify-content: normal;margin-top:20px; gap:20px;}
.ftNav {display:flex; gap:20px;}
.ftNav li + li {margin-top:0;}
.ftSite {width:100%;}


}

@media screen and (max-width:767px){
.ftInfo {margin-top:20px;}
.ftInfo p {margin-top:20px;}
.ftNav {gap:5px;}
.ftSiteList > li > a {height:35px; line-height:35px; padding:10px;}
}