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

:root {
	/*color*/
	--color-base: #000;
	--color-gray: #838383;
	--color-wh-gray: #bdbdbd;
	--color-point: #b91d1d;

	--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-23: 1.438rem; /*사용*/
	--font-size-25: 1.563rem; /*사용*/

	--font-size-26: 1.625rem;

	--font-size-27: 1.688rem; /*사용*/
	--font-size-31: 1.938rem; /*사용*/
	--font-size-36: 2.25rem; /*사용*/


	--font-size-80: 5rem;
	/*font-weight*/
	--font-dl: 100;
	--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-20);} /*사용*/
.fs_23{font-size: var(--font-size-23);} /*사용*/
.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_36{font-size: var(--font-size-36);}
.fs_80{font-size: var(--font-size-80);}


/*font weight*/
.font_dl{font-weight: var(--font-dl);}
.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;}

.section.on .motion {transform: translateY(0);opacity: 1;}
.motion {transform: translateY(-25px);opacity: 0;transition: transform .8s ease, opacity .4s;}


.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;}

/*세정*/
#main_01{background:url('/img/main_section/main_01_bg.jpg') no-repeat center / cover;}
#main_02{background:url('/img/main_section/main_02_bg.jpg') no-repeat center / cover;}
#main_03{background-color: #000026;}





/*main_section*/
.main_section {width:100%; max-width:1920px; margin:0 auto;}

/*---header---*/




#j_header {height:110px; position:fixed; left:0; top:0; width:100%; z-index:99; display:block;}
#j_header .j_hd_con {max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; height:100%; align-items: end; width:90%;}
#j_header > .j_hd_con >.j_gnb {height:100%;}
#j_header > .j_hd_con >.j_gnb > ul {display:flex; height:100%;}
#j_header > .j_hd_con >.j_gnb > ul > li {margin-right:54px; position:relative;}
#j_header > .j_hd_con >.j_gnb > ul > li:last-child{margin-right:0;}
#j_header > .j_hd_con >.j_gnb > ul > li:first-child a i:before {display:none;}
#j_header > .j_hd_con >.j_gnb > ul > li > a {display:block; font-size:1.0625rem; font-weight:500; height:100%; line-height:165px; }


#j_header > .j_hd_con >.j_gnb > ul > li > a i {position:relative;}
#j_header > .j_hd_con >.j_gnb > ul > li > a i:before {content:''; left:-27px; top:50%; position:absolute; transform:translateY(-50%); border-radius:50%; width:4px; height:4px; background:#fff;}

#j_header > .j_hd_con >.j_gnb > ul > li > .depth02 {position:absolute; left:50%; transform:translateX(-50%); top:120px; width:100px; text-align: center; display:none;}
#j_header > .j_hd_con >.j_gnb > ul > li > .depth02 > li > a {padding:3px 0; display:block; transition:0.28s; font-weight:400; color:rgba(255, 255, 255, 0.7);}
#j_header > .j_hd_con >.j_gnb > ul > li > .depth02 > li > a:hover {color:#5cfffb; font-weight:700;}



/*page_nav*/
.page_nv {    position: absolute; top: 47%; right: 0;  width: 100%;transform: translateY(-50%); z-index: 99;}
.j_nv_con {max-width:1472px; margin:0 auto; width:90%; position:relative;}   
.mymenu { position: absolute; right: 0; top:50%; transform:translateY(-50%); display:flex; flex-direction: column; gap:13px;}
.full_nav_btn a.on {background:#5cfffb;}
.mymenu a {display:block; width:12px; height:12px; border-radius:12px; background:rgba(255, 255, 255, 0.5);}



/*main01*/
.main_tit {position:absolute; left:0; top:50%; transform:translateY(-50%);}
.main_tit p {width:27px; height:4px; background:#fff;}
.main_tit h2 {margin-top:25px;}
.main_btn {display: block; width:190px; height:43px; line-height:36px; text-align:center; color:#fff; border:2px solid rgba(255, 255, 255, 0.5); margin-top:25px; transition:0.25s;}
.main_btn:hover {border-color:#5cfffb;}


/*main02*/

.main_tit02 {position:absolute; left:0; top:205px;}
.main_tit02 p {width:27px; height:4px; background:#fff;}
.main_tit02 h2 {margin-top:25px;}
.main_tit02-1 {position:absolute; right:0; bottom:205px;}
.main_tit02-1 h2 {line-height: 2.6em;}
.main_tit02-1 h2 i:last-child {text-align:right; display:block;}    


/*main03*/

.main_03_list {position:absolute; left:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; width:100%;}
.main_03_list li {cursor:pointer;}
.main_03_list li .img_box {overflow:hidden;}
.main_03_list li .img_box img {transition: all 0.3s linear;}
.main_03_list li .img_box:hover img {transform: scale(1.2);}

.main_03_btn {display:block; width:100%; border: 1px solid rgba(255, 255, 255, 0.5); height:55px; line-height:52px; text-align:center; margin-top:28px; transition:0.25s;}
.main_03_btn:hover {color:#5cfffb; border-color:#5cfffb;}

.main_03_btn01 {position:absolute; right:-65px;; bottom:184px;     display: flex;  align-items: center;}
.main_03_btn01 i {margin-left:30px;}




/*footer*/
#main_04 {height:240px;}
.j_footer {background:#000026; padding: 84px 0;}
.ft_content {display:flex; position:relative;}
.ft_content:after {content:''; width:100%; height:2px; position:absolute; bottom: -50px; left:0; background:url('/img/icon/ft_icon06.png') no-repeat center / cover; }
.ft_inner {max-width:1200px; width:90%; margin:0 auto;}
.ft_logo_box {margin-right:77px;}
.ft_info_box p i {color:rgba(255, 255, 255, 0.5); cursor:pointer; position:relative;}

.ft_info_box p i.ft1:before {content:''; position:absolute; left:-25px; top:50%; transform:translateY(-50%); width:16px; height:16px; background:url('/img/icon/ft_icon01-2.png') no-repeat center /cover; }
.ft_info_box p i.ft2:before {content:''; position:absolute; left:-19px; top:50%; transform:translateY(-50%); width:10px; height:15px; background:url('/img/icon/ft_icon02-1.png') no-repeat center /cover; }
.ft_info_box p i.ft3:before {content:''; position:absolute; left:-22px; top:50%; transform:translateY(-50%); width:10px; height:16px; background:url('/img/icon/ft_icon03-1.png') no-repeat center /cover; }
.ft_info_box p i.ft4:before {content:''; position:absolute; left:-25px; top:50%; transform:translateY(-50%); width:14px; height:16px; background:url('/img/icon/ft_icon04-1.png') no-repeat center /cover; }
.ft_info_box p i.ft5:before {content:''; position:absolute; left:-24px; top:50%; transform:translateY(-50%); width:14px; height:11px; background:url('/img/icon/ft_icon05-1.png') no-repeat center /cover; }

.ft_info_box p i {margin-right:50px;}

.top_btn {position:absolute; right:-150px; bottom:-50px;;}