html {
  font-size: 10px;
}

@media screen and (max-width: 1560px) {
  html {
    font-size: 0.7142vw;
  }
	.j_inner {}
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 5px;
  }
}

/*inner*/

.j_inner {max-width:1760px; padding:0 20px; margin:0 auto;}
.j_inner02 {max-width:1680px; width:92%; margin:0 auto; position:relative;}

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

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

	--color-sub_color: #455d7d;
 	--color-sub_color02: #5e94fe;
	--color-sub_color03: #7B85F9;

	/*font-size*/
	--font-size-12: 1.2rem;
	--font-size-14: 1.4rem;
	--font-size-16: 1.6rem; 
	--font-size-17: 1.7rem; 
	--font-size-18: 1.8rem;
	--font-size-20: 2rem;
 	--font-size-22: 2.2rem;
	--font-size-26: 2.6rem;
 	--font-size-28: 2.8rem;
 	--font-size-30: 3rem;
	--font-size-32: 3.2rem;
	--font-size-36: 3.6rem;
	--font-size-40: 4rem;
	--font-size-42: 4.2rem;
	--font-size-48: 4.8rem;
	--font-size-54: 5.4rem;	
	--font-size-64: 6.4rem;
	--font-size-72: 7.2rem;
	/*font-weight*/
	--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_28{font-size: var(--font-size-28);}
.fs_30{font-size: var(--font-size-30);}
.fs_32{font-size: var(--font-size-32);}
.fs_36{font-size: var(--font-size-36);}
.fs_40{font-size: var(--font-size-40);}
.fs_42{font-size: var(--font-size-42);}
.fs_48{font-size: var(--font-size-48);}
.fs_54{font-size: var(--font-size-54);}
.fs_64{font-size: var(--font-size-64);}
.fs_72{font-size: var(--font-size-72);}

@media screen and (max-width:768px){
	.fs_72 {font-size:38px;}
	.fs_64 {font-size:34px;}
	.fs_54 {font-size:30px;}
	.fs_48 {font-size:26px;}
	.fs_42 {font-size:24px;}
	.fs_40 {font-size:24px;}
	.fs_36 {font-size:24px;}
	.fs_32 {font-size:22px;}
	.fs_30 {font-size:20px;}
	.fs_28 {font-size:18px;}
	.fs_26 {font-size:18px;}
	.fs_22 {font-size:16px;}
	.fs_20 {font-size:16px;}
	.fs_18 {font-size:14px;}
	.fs_16 {font-size:12px;}
	.fs_14 {font-size:12px;}
}

/*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_bl{font-weight: var(--font-bl);}

/*font_color*/
.base_color {color:var(--color-base);}
.base_color02 {color:var(--color-base02);}
.sub_color01 {color:var(--color-sub_color);}
.sub_color02 {color:var(--color-sub_color02);}
.sub_color03 {color:var(--color-sub_color03);}
/*text-align*/
.texc {text-align:center;}

/*::selection{background-color: #7478F6; color: #fff; }*/



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




/*우 -> 좌*/
.j_motion.common_motion02 {transform: translateX(80px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion02.on{transform: translatex(0);opacity: 1;}


/*좌 -> 우*/
.j_motion.common_motion03 {transform: translateX(-80px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion03.on{transform: translatex(0);opacity: 1;}




/*높이에 따른 등장*/
.j_motion02.common_motion {transform: translateY(30px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion02.common_motion.on {transform: translateY(0);opacity: 1;}

.j_motion03.common_motion {transform: translateY(50px);opacity: 0;transition: transform .8s ease, opacity .8s;}
.j_motion03.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*/

/*.commen_btn01 {width:183px; height:53px; position:relative; line-height:50px; border-radius:26px; border:2px solid #999; display:flex; align-items:center; margin:0 auto; transition:0.3s;}*/

.commen_btn01 {width:200px; height:53px; position:relative; line-height:50px; border-radius:26px; border:2px solid #999; display:flex; align-items:center; margin:0 auto; transition:0.3s;}
.btn_icon_c {display:none;}
.commen_btn01:hover {background:#fff; color:#000; border:2px solid #fff;}
.commen_btn01:hover .btn_icon_c{display:block;}
.commen_btn01:hover .btn_icon_b {display:none;}
.commen_btn01 i.btn_txt {position:absolute; transform:translateX(30px);} 
/*.commen_btn01 i.btn_icon {position:absolute; transform:translateX(138px);} */
.commen_btn01 i.btn_icon {position:absolute; transform:translateX(155px);} 

.section_tit h4{color:#7478F6; margin-top:20px;}

.texc {text-align:center;}
.main {background:#fff;}
.main_seciton {padding:250px 0;}
.pt-0 {padding-top:0;}


@media screen and (max-width:1024px){
/*
	.commen_btn01 {width:125px; height:35px;}
	.commen_btn01 i.btn_icon {width:25px; transform: translateX(92px);}
	.commen_btn01 i.btn_txt {transform: translateX(20px);}
*/
	.commen_btn01 {width:135px; height:35px;}
	.commen_btn01 i.btn_icon {width:25px; transform: translateX(102px);}
	.commen_btn01 i.btn_txt {transform: translateX(20px);}
	
}





/*---header---*/
#j_header {height:90px; background-color: #fff; border-bottom:1px solid #eef0f2; position:fixed; width:100%; top:-90px; left:0;  z-index: 99;  transition: all .45s ease;}
#j_header.fixed {top:0; }
#j_header.on4 {background:#fff;}
#j_header.active > .j_hd_con > .hd_right_box > .j_gnb {}
#j_header .lang_btn a.on {color:#00a8bc; font-weight: 400;}
#j_header.scr_on {background-color:#fff;}


.hd_logo {z-index:99; margin:0; display:flex; align-items:center;}
.hd_w {display:none;}
.hd_b {display:block;}
.hd_logo a {display:flex; align-items:center; width:100%; max-width: 70px; transform: translateY(-6px)}
.hd_logo a img {display:block; width:100%; height:auto;}
.hd_m_w {display:none;}
.hd_m_b {display:none;}
.hd_logo a img.hd_m_b {display:none;}
.hd_logo.active .hd_m_w{display:none;}
.hd_logo.active .hd_m_b {display:block;}



.j_hd_con {max-width:1620px; margin:0 auto; width:92%; display:flex; align-items:center; height:100%;justify-content: flex-start;gap:50px;}


.j_hd_con .hd_right_box {display:flex; align-items:center; height:100%;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb {display:flex; height:100%;position:relative;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li {height:100%; transition:0.3s; display:flex; align-items:center;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li > a {display:flex; align-items:center; height:100%; padding:0 28px; font-size:16px; transition:0.1s; color:#222;letter-spacing: -0.5px;}

#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 {}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 > a {line-height:40px; padding:16px 28px;}
/*#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 > a > span { width:170px; height:40px; line-height:40px;  background:#486284;  text-align:center; border-radius:20px; display:inline-block; color:#fff; transition:0.3s;}*/

#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 > a > span { width:170px; height:42px; line-height:40px; border:solid 2px #4A3AB2; text-align:center; border-radius:22px; display:inline-block; color:#fff; transition:0.3s;}

/* depth02 기본 */
#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02 {display:none; position:absolute; width:300%; left: 28px; top:90px; z-index:2;}
/* hover / JS 클래스 양쪽 모두 트리거 */
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li:hover > .depth02,
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.gnb_hovered > .depth02 {display:flex;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02.on {display:flex;}
/* depth02 위쪽에 투명 브릿지 - 마우스가 헤더 하단을 지날 때 hover 유지 */
#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02::before {content:''; position:absolute; top:-20px; left:0; width:100%; height:20px;}

#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02 > li > a{display:block; padding:25px 50px 25px 0; font-size:1rem; font-weight:400; color:#555; transition:0.3s; position:relative;}

#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02 > li > a:hover{color:#00a8bc; }
#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02 > li > a:hover:after {display:block;}

/*헤더 서브메뉴 위치*/
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_3 .depth02{left: 340px;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_4 .depth02{left: 340px;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_5 .depth02{left: 197px;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 .depth02{left: 235px;}

.web_btn {margin-left:35px; border-radius:20px; background:#486284; width:145px; height:40px; line-height:40px; text-align:center;}
.web_btn_a {color:#fff;}
.web_btn li {position:relative;}
.web_depth {display:none; color:#777; position:absolute; top:125%; left:0; width:150px; }
.web_depth li a {display:block; transition:0.3s;}
.web_depth li a:hover {color:#fff;}
.lang_btn {margin-left:70px; display:flex; position:relative;}
.lang_btn:after {content:''; width:1px; height:12px; background:#777777; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.lang_btn a {display:block; color:#777;}
.lang_btn a.on {color:#fff;}
.lang_btn a:nth-of-type(2) {margin-left:23px;}

/*헤더 hover*/

#j_header > .j_hd_con > .hd_right_box > .j_gnb > li > a > i{position:relative; transition:0.3s;}

#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6:hover  > a span {color:#fff;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li:hover > a  {color:#00a8bc;}
#j_header > .j_hd_con > .hd_right_box > .j_gnb > li:hover > a i:after {width:100%;}
#j_header.view .nav_2depth_bg {animation:j_fadeIn .6s; display:flex;}

/*nav_2depth_bg*/
.nav_2depth_bg {position:absolute; width:100%; top:90px; height:72px; background:#fff; border-top:1px solid #eef0f2; box-shadow:0 8px 20px rgba(0,0,0,0.03); z-index:1; display:none;}
/* 서비스(j_menu_1) 호버시에만 서브바 표시 */
#j_header:has(.j_menu_1:hover) .nav_2depth_bg,
#j_header:has(.j_menu_1.gnb_hovered) .nav_2depth_bg {display:flex;}


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




@media screen and (max-width:1480px){
	/*헤더 서브메뉴 위치*/
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_3 .depth02{left: 320px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_4 .depth02{left: 320px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_5 .depth02{left: 190px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 .depth02{left: 245px;}
}
@media screen and (max-width:1280px){

	#j_header{height:90px;}
	.j_hd_con{width:88%;}
	.hd_logo a {width: 100px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02{top: 90px;}

	.nav_2depth_bg {top: 90px;}

	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li > a{padding:0 20px; font-size:14px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 > a{padding: 16px 20px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 > a > span{width: 150px;}
	
	/*헤더 서브메뉴 위치*/
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_3 .depth02{left: 372px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_4 .depth02{left: 270px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_5 .depth02{left: 120px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 .depth02{left: 142px;}
	
}

@media screen and (max-width:1200px){
	/*헤더 서브메뉴 위치*/
	#j_header > .j_hd_con > .hd_right_box > .j_gnb .depth02{left: 15px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_3 .depth02{left: 220px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_4 .depth02{left: 220px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_5 .depth02{left: 50px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 .depth02{left: 60px;}
	
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li > a {padding:0 15px;}
	#j_header > .j_hd_con > .hd_right_box > .j_gnb > li.j_menu_6 > a {padding:24px 15px;}
}

@media screen and (max-width:1024px){
	#j_header {height:60px;}
	#j_header.on2 {border-bottom:1px solid #e2e2e2;}
	.j_hd_con .hd_right_box {display:none;}
	.hd_w {display:none;}
	.hd_b {display:none;}
	.hd_m_w {display:none;}
	.hd_m_b {display:block;}
	.hd_logo a img.hd_b {display:none;}
	.hd_logo a img.hd_m_b {display:block;}
	#j_header.on {background:#fff;}
	#j_header.on .hd_m_w {display:none;}

	#j_header.on .hd_m_b {display:block;}
 	#j_header.on .hd_b {display:none;}
	#j_header.on .hd_w {display:none;}
	#j_header.on .m_lang_btn {background: #00a8bc; color: #fff;}
	#j_header.on .nav_btn span {background:#1a1a2e;}
	
	.hd_logo a{width: auto;}
	.hd_logo a img{width: 72px;}/*230318*/
/*	.hd_logo a object{width: 100%;}*/
	.j_hd_con{justify-content: space-between;}

}

/*mobile_wrap*/
body.mo_nav_open { overflow: hidden; }
.mobile_wrap { position: fixed; top:60px;  right: 0;  width: 100%;  height:calc(100vh - 60px);    background:#fff; display:none; color:#000; overflow-y:auto; z-index:98;}
.hd_m_box {display:none; z-index:99;}
.lang_box {position:relative;}
.lang_box.on .m_lang_btn {background:#2bc5db; color:#fff;}
.lang_box ul {display:none;    position: absolute; width: 50px;  background: #f9f9f9;  border-radius: 10px; top: calc(100% + 15px); left: 0; text-align: center;box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);}
.lang_box ul > li > a {font-weight: 400; color: #555555; transition: 0.28s;  display: block; padding: 10.5px 0;}
.m_lang_btn {display:flex; justify-content:center; align-items:center; width:50px; height:25px; border-radius:12.5px; background:rgba(255, 255, 255, 0.2); position:relative;}
.m_lang_btn i {margin-left:5px;}

.mo_btn {display:none; background:#486284; color:#fff; font-size:18px; font-weight:400; border-radius:17.5px; text-align:center; width:140px; height:35px; line-height:35px; margin:0 auto; }
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li.mo_btn {padding:0; }
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li.mo_btn  > .depth02 > li > a {padding:0;}
.mobile_wrap > .mo_inner {height:100%;}
.mobile_wrap > .mo_inner > .mo_gnb {height:100%; display:flex; justify-content: center; padding:25px 0; text-align:center;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb {width:100%;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li {padding:20px 0;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li > a {display:block; font-size:18px; font-weight:400; transition:.3s;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li.mo_btn.on > a {color:#fff;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li.on > a {color:#00a8bc;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li > a i {position:relative;}

.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li > .depth02 {display:none; background:#f9f9f9; margin-top: 16px ;padding: 16px 0;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li > .depth02 > li > a {display:block; font-size:18px; font-weight:400; color:#999999; padding:8px 0;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li > .depth02 > li > a i { position:relative;}
.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li > .depth02 > li > a:hover {color:#000;}


.nav_btn {width:24px; height:27px; margin-left:20px;}
.nav_btn.on span {background:#000;}
.nav_btn.on span:nth-of-type(2) {display:none;}
.nav_btn.on span:nth-of-type(1) {transform: rotate(45deg);}
.nav_btn.on span:nth-of-type(3) {transform: rotate(-45deg);}

.nav_btn span {display: block;width: 24px; height: 2px;  background: #1a1a2e;  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);}


@media screen and (max-width:1024px){
	.hd_m_box {display:flex; align-items:center;}
	.mo_btn {display:block;}	
	.mobile_wrap > .mo_inner > .mo_gnb > .j_gnb > li.j_menu_6 > a > span {width:170px; height:35px; text-align:center; color:#fff; background:#486284; border-radius:17.5px; line-height:35px; display:block; margin:0 auto; }
}


/*mv*/

.main_visual {
	position: relative;
	background: url('/img/main/visual_bg.jpg') no-repeat center center / cover;
	overflow: hidden;
	padding: 160px 0 0;
	min-height: 950px;
	display: flex;
	align-items: flex-start;
}
.visual_text_wrap {
	position: relative;
	z-index: 2;
	margin-bottom: 52px;
}
.visual_sub { color: #222;margin-bottom: 10px;}
.visual_title { line-height: 1.35; color: #111; }
.visual_linc_logo {
	width: 100%;
	max-width: 120px;
	vertical-align: middle;
	display: inline-block;
	margin: 0 4px;
	position: relative;
	top: -0.2em;
}
.visual_img_wrap { position: relative; z-index: 2; text-align: center; }
.visual_tab_img { max-width: 660px; width: 100%; display: inline-block; vertical-align: bottom; animation: visual_float 3s ease-in-out infinite; }
@keyframes visual_float {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-16px); }
	100% { transform: translateY(0); }
}

@media screen and (max-width:1280px){
	.main_visual { padding-top: 130px; min-height: 620px; }
	.visual_tab_img { width: 82%; }
}
@media screen and (max-width:1024px){
	.main_visual { padding-top: 110px; min-height: 520px; }
	.visual_tab_img { width: 88%; }
}
@media screen and (max-width:770px){
	.main_visual {
		background: linear-gradient(180deg, #b8e8f5 0%, #cdf0f9 50%, #e8f9fd 100%);
		padding-top: 90px;
		padding-bottom: 40px;
		min-height: auto;
		align-items: flex-start;
	}
	.main_visual .j_inner { display: flex; flex-direction: column; align-items: center; }
	.visual_text_wrap { margin-bottom: 28px; text-align: center; }
	.visual_sub { font-size: 14px; color: #444; }
	.visual_title { font-size: 28px; line-height: 1.45; }
	.visual_linc_logo { max-width: 80px; }
	.visual_img_wrap { width: 100%; }
	.visual_tab_img { width: 88%; }
}
@media screen and (max-width:480px){
	.main_visual { padding-top: 80px; }
	.visual_title { font-size: 24px; }
	.visual_linc_logo { max-width: 68px; }
}

.glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* 비비스톤 css 시작 ------------------------------------------------------------------------------------*/

#j_header {display: none}


/*main01*/

.main01 {background: url("../img/main01_bg.jpg") no-repeat center center / cover; padding: 15rem 0; }
.main01 .j_inner {display: flex; gap: 8rem; justify-content: center; align-items: center; flex-direction: row-reverse}
.main01 .left {position: relative;}
.main01 .left .img01 {width:50rem; aspect-ratio: 500 / 638;}
.main01 .left .img02 {width:48.8rem; aspect-ratio: 488 / 304;margin: -10rem 0 0 -12rem}
.main01 .right {display: flex; flex-direction: column; gap: 3rem;}
.main01 .right .desc{display: flex; flex-direction: column; gap: 1.5rem;}

.main01 .left .img01 {background: url("../img/main01_img01.jpg") no-repeat center center / contain;}
.main01 .left .img02 {background: url("../img/main01_img02.jpg") no-repeat center center / contain;}

@media screen and (max-width:768px){
	.main01 {background: url("../img/main01_bg_m.jpg") no-repeat center center / cover; padding: 15rem 0; }
	.main01 .j_inner {flex-direction: column;}
	.main01 .left {width:100%;}
	.main01 .left .img01 {width:100%; aspect-ratio: 1 / .6;}
	.main01 .left .img01 {background: url("../img/main01_img01.jpg") no-repeat center center / cover;}
}


/*main02*/
.main02 {}
.main02 .swiper {cursor: grab; user-select: none}
.main02 .swiper img {width:100%}
.main02 nav {position: absolute; top:50%; left:100px; transform: translateY(-50%)}


.main02 [class^=slide0] {/*height: 100vh;*/ /*padding:0 5rem;*/ display: flex; justify-content: flex-end; align-items: center;}
.main02 [class^=slide0] .right_box {width:75rem;/* height: 100vh; */padding: 6rem 5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; gap:10vh}
.main02 [class^=slide0] .right_box .top {}
.main02 [class^=slide0] .right_box .top .txt_wrap {display: flex; flex-direction: column; gap:1rem;}
.main02 [class^=slide0] .right_box .top .txt_wrap .tit {font-family: "Cormorant Garamond", serif;  font-optical-sizing: auto;  font-weight: 600;}
.main02 [class^=slide0] .right_box .top .txt_wrap .sup {color: #866632;}
.main02 [class^=slide0] .right_box .top .icon_wrap {display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem;}
.main02 [class^=slide0] .right_box .top .icon_wrap li {padding:1rem 1.5rem; background: #fff; display: flex; align-items: center; gap: 1rem; color:#333; border-radius: .5rem;}
.main02 [class^=slide0] .right_box .top .icon_wrap li span {width:2.5rem; aspect-ratio:1 / 1}
.main02 [class^=slide0] .right_box .bottom {display: flex; gap: 1rem;}
.main02 [class^=slide0] .right_box .bottom [class^=item0] {display: flex; flex-direction: column; gap: 2rem;}
/*.main02 [class^=slide0] .right_box .bottom [class^=item0] .img img {width:40rem}*/
.main02 [class^=slide0] .right_box .bottom [class^=item0] .txt_wrap {display: flex; flex-direction: column; gap:1rem;}
.main02 [class^=slide0] .right_box .bottom [class^=item0] .txt_wrap .tit_wrap {display: flex; gap: 1rem; align-items: baseline;}
.main02 [class^=slide0] .right_box .bottom [class^=item0] .txt_wrap .code {color:#333;}

@media screen and (max-width:768px){
	.main02 [class^=slide0] {height: 100vh; align-items: flex-end; /* padding: 0 20px */}
	.main02 [class^=slide0] .right_box {width:100%; height: auto; gap: 4rem; }
	.main02 [class^=slide0] .right_box .top .icon_wrap li span {width:3.5rem;}
/*	.main02 [class^=slide0] .right_box .bottom [class^=item0] .img {width:30rem;}*/
	.main02 [class^=slide0] .right_box .bottom [class^=item0] .img img {width:100%}
	.main02 [class^=slide0] .right_box .bottom [class^=item0] .desc {display: none}
	.main02 [class^=slide0] .right_box .bottom [class^=item0] .recom {display: none}
	
}
@media screen and (max-width:600px){
	.main02 [class^=slide0] .right_box .bottom [class^=item0] .img img {width:75%}
}
@media screen and (max-width:450px){
	.main02 [class^=slide0] .right_box .bottom [class^=item0] .img img {width:100%}
}


/* 컬렉션 - 골재 슬라이드 버튼 */
.main02 [class^=slide0] .right_box .bottom {position: relative;}

.main02 [class^=slide0] .right_box .bottom .swiper-prev,
.main02 [class^=slide0] .right_box .bottom .swiper-next {
    position: absolute; bottom:0; width: 6rem; height: 6rem; border: 1px solid #aaa; border-radius: 50%; cursor: pointer; z-index: 10;
}

.main02 [class^=slide0] .right_box .bottom .swiper-prev {
	right:7rem; background-image: url("../img/arrow_prev_gray.png"); background-repeat: no-repeat; background-position: 46%;
}
.main02 [class^=slide0] .right_box .bottom .swiper-next {
	right:0; background-image: url("../img/arrow_next_gray.png"); background-repeat: no-repeat; background-position: 54%; 
}
.main02 [class^=slide0] .right_box .bottom .swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}
@media screen and (max-width:1024px){
	.main02 [class^=slide0] .right_box .bottom .swiper-prev,
	.main02 [class^=slide0] .right_box .bottom .swiper-next {background-size: 27%}
}
@media screen and (max-width:768px){
	.main02 [class^=slide0] .right_box .bottom .swiper-prev,
	.main02 [class^=slide0] .right_box .bottom .swiper-next {width: 6.5rem; height: 6.5rem; background-size: 20%}
	.main02 [class^=slide0] .right_box .bottom .swiper-prev {right:7.5rem;}
	.main02 [class^=slide0] .right_box .bottom .swiper-next {right:0; }
}

/* 컬렉션 - 골재 설명 안보임 */

.main02 [class^=slide0] .right_box .bottom [class^=item0] .txt_wrap .desc {opacity: 0; transition: .3s}
.main02 [class^=slide0] .right_box .bottom [class^=item0] .txt_wrap .recom {opacity: 0; transition: .3s}
.main02 [class^=slide0] .right_box .bottom .swiper-slide-active [class^=item0] .txt_wrap .desc {opacity: 1}
.main02 [class^=slide0] .right_box .bottom .swiper-slide-active [class^=item0] .txt_wrap .recom {opacity: 1}



/* main02 이미지들 */

.main02 .slide01 {background: url("../img/main02_slide01.jpg") no-repeat center center / cover;}
/*.main02 .slide01 .right_box {background: rgba(255, 255, 255, 0.8);}*/
.main02 .slide01 .right_box {background: rgba(255, 255, 255, 1);}
.main02 .slide01 .right_box .bottom .swiper-prev {background-color: rgba(255, 255, 255, 1);}
.main02 .slide01 .right_box .bottom .swiper-next {background-color: rgba(255, 255, 255, 1);}
.main02 .slide01 .icon01 span {background: url("../img/main02_slide01_icon01.png") no-repeat center center / contain;}
.main02 .slide01 .icon02 span {background: url("../img/main02_slide01_icon02.png") no-repeat center center / contain;}
.main02 .slide01 .icon03 span {background: url("../img/main02_slide01_icon03.png") no-repeat center center / contain;}
.main02 .slide01 .icon04 span {background: url("../img/main02_slide01_icon04.png") no-repeat center center / contain;}
.main02 .slide01 .icon05 span {background: url("../img/main02_slide01_icon05.png") no-repeat center center / contain;}
.main02 .slide01 .icon06 span {background: url("../img/main02_slide01_icon06.png") no-repeat center center / contain;}
.main02 .slide01 .icon07 span {background: url("../img/main02_slide01_icon07.png") no-repeat center center / contain;}
.main02 .slide01 .icon08 span {background: url("../img/main02_slide01_icon08.png") no-repeat center center / contain;}

.main02 .slide02 {background: url("../img/main02_slide02.jpg") no-repeat center center / cover;}
.main02 .slide02 .right_box {background: rgba(246, 241, 231, 1);}
.main02 .slide02 .right_box .bottom .swiper-prev {background-color: rgba(246, 241, 231, 1);}
.main02 .slide02 .right_box .bottom .swiper-next {background-color: rgba(246, 241, 231, 1);}
.main02 .slide02 .icon01 span {background: url("../img/main02_slide02_icon01.png") no-repeat center center / contain;}
.main02 .slide02 .icon02 span {background: url("../img/main02_slide02_icon02.png") no-repeat center center / contain;}
.main02 .slide02 .icon03 span {background: url("../img/main02_slide02_icon03.png") no-repeat center center / contain;}
.main02 .slide02 .icon04 span {background: url("../img/main02_slide02_icon04.png") no-repeat center center / contain;}
.main02 .slide02 .icon05 span {background: url("../img/main02_slide02_icon05.png") no-repeat center center / contain;}
.main02 .slide02 .icon06 span {background: url("../img/main02_slide02_icon06.png") no-repeat center center / contain;}
.main02 .slide02 .icon07 span {background: url("../img/main02_slide02_icon07.png") no-repeat center center / contain;}
.main02 .slide02 .icon08 span {background: url("../img/main02_slide02_icon08.png") no-repeat center center / contain;}

.main02 .slide03 {background: url("../img/main02_slide03.jpg") no-repeat center center / cover;}
.main02 .slide03 .right_box {background: rgba(240, 227, 218, 1);}
.main02 .slide03 .right_box .bottom .swiper-prev {background-color: rgba(240, 227, 218, 1);}
.main02 .slide03 .right_box .bottom .swiper-next {background-color: rgba(240, 227, 218, 1);}
.main02 .slide03 .icon01 span {background: url("../img/main02_slide03_icon01.png") no-repeat center center / contain;}
.main02 .slide03 .icon02 span {background: url("../img/main02_slide03_icon02.png") no-repeat center center / contain;}
.main02 .slide03 .icon03 span {background: url("../img/main02_slide03_icon03.png") no-repeat center center / contain;}
.main02 .slide03 .icon04 span {background: url("../img/main02_slide03_icon04.png") no-repeat center center / contain;}
.main02 .slide03 .icon05 span {background: url("../img/main02_slide03_icon05.png") no-repeat center center / contain;}
.main02 .slide03 .icon06 span {background: url("../img/main02_slide03_icon06.png") no-repeat center center / contain;}
.main02 .slide03 .icon07 span {background: url("../img/main02_slide03_icon07.png") no-repeat center center / contain;}
.main02 .slide03 .icon08 span {background: url("../img/main02_slide03_icon08.png") no-repeat center center / contain;}

.main02 .slide04 {background: url("../img/main02_slide04.jpg") no-repeat center center / cover;}
.main02 .slide04 .right_box {background: rgba(255, 246, 246, 1);}
.main02 .slide04 .right_box .bottom .swiper-prev {background-color: rgba(255, 246, 246, 1);}
.main02 .slide04 .right_box .bottom .swiper-next {background-color: rgba(255, 246, 246, 1);}
.main02 .slide04 .icon01 span {background: url("../img/main02_slide04_icon01.png") no-repeat center center / contain;}
.main02 .slide04 .icon02 span {background: url("../img/main02_slide04_icon02.png") no-repeat center center / contain;}
.main02 .slide04 .icon03 span {background: url("../img/main02_slide04_icon03.png") no-repeat center center / contain;}
.main02 .slide04 .icon04 span {background: url("../img/main02_slide04_icon04.png") no-repeat center center / contain;}
.main02 .slide04 .icon05 span {background: url("../img/main02_slide04_icon05.png") no-repeat center center / contain;}
.main02 .slide04 .icon06 span {background: url("../img/main02_slide04_icon06.png") no-repeat center center / contain;}
.main02 .slide04 .icon07 span {background: url("../img/main02_slide04_icon07.png") no-repeat center center / contain;}
.main02 .slide04 .icon08 span {background: url("../img/main02_slide04_icon08.png") no-repeat center center / contain;}
.main02 .slide04 .icon09 span {background: url("../img/main02_slide04_icon09.png") no-repeat center center / contain;}

.main02 .slide05 {background: url("../img/main02_slide05.jpg") no-repeat center center / cover;}
.main02 .slide05 .right_box {background: rgba(237, 239, 244, 1);}
.main02 .slide05 .right_box .bottom .swiper-prev {background-color: rgba(237, 239, 244, 1);}
.main02 .slide05 .right_box .bottom .swiper-next {background-color: rgba(237, 239, 244, 1);}
.main02 .slide05 .icon01 span {background: url("../img/main02_slide05_icon01.png") no-repeat center center / contain;}
.main02 .slide05 .icon02 span {background: url("../img/main02_slide05_icon02.png") no-repeat center center / contain;}
.main02 .slide05 .icon03 span {background: url("../img/main02_slide05_icon03.png") no-repeat center center / contain;}
.main02 .slide05 .icon04 span {background: url("../img/main02_slide05_icon04.png") no-repeat center center / contain;}
.main02 .slide05 .icon05 span {background: url("../img/main02_slide05_icon05.png") no-repeat center center / contain;}
.main02 .slide05 .icon06 span {background: url("../img/main02_slide05_icon06.png") no-repeat center center / contain;}
.main02 .slide05 .icon07 span {background: url("../img/main02_slide05_icon07.png") no-repeat center center / contain;}
.main02 .slide05 .icon08 span {background: url("../img/main02_slide05_icon08.png") no-repeat center center / contain;}

.main02 .slide06 {background: url("../img/main02_slide06.jpg") no-repeat center center / cover;}
.main02 .slide06 .right_box {background: rgba(250, 246, 254, 1);}
.main02 .slide06 .right_box .bottom .swiper-prev {background-color: rgba(250, 246, 254, 1);}
.main02 .slide06 .right_box .bottom .swiper-next {background-color: rgba(250, 246, 254, 1);}
.main02 .slide06 .icon01 span {background: url("../img/main02_slide06_icon01.png") no-repeat center center / contain;}
.main02 .slide06 .icon02 span {background: url("../img/main02_slide06_icon02.png") no-repeat center center / contain;}
.main02 .slide06 .icon03 span {background: url("../img/main02_slide06_icon03.png") no-repeat center center / contain;}
.main02 .slide06 .icon04 span {background: url("../img/main02_slide06_icon04.png") no-repeat center center / contain;}
.main02 .slide06 .icon05 span {background: url("../img/main02_slide06_icon05.png") no-repeat center center / contain;}
.main02 .slide06 .icon06 span {background: url("../img/main02_slide06_icon06.png") no-repeat center center / contain;}
.main02 .slide06 .icon07 span {background: url("../img/main02_slide06_icon07.png") no-repeat center center / contain;}
.main02 .slide06 .icon08 span {background: url("../img/main02_slide06_icon08.png") no-repeat center center / contain;}
.main02 .slide06 .icon09 span {background: url("../img/main02_slide06_icon09.png") no-repeat center center / contain;}

@media screen and (max-width:768px){
	.main02 .slide01 {background: url("../img/main02_slide01_m.jpg") no-repeat center center / cover;}
	.main02 .slide02 {background: url("../img/main02_slide02_m.jpg") no-repeat center center / cover;}
	.main02 .slide03 {background: url("../img/main02_slide03_m.jpg") no-repeat center center / cover;}
	.main02 .slide04 {background: url("../img/main02_slide04_m.jpg") no-repeat center center / cover;}
	.main02 .slide05 {background: url("../img/main02_slide05_m.jpg") no-repeat center center / cover;}
	.main02 .slide06 {background: url("../img/main02_slide06_m.jpg") no-repeat center center / cover;}
}


/* see all */
.see_all {text-align: center; padding: 8rem 0 15rem;}
.see_all .img {width:100%; margin-top: 5rem}
.see_all .img img {margin: 0 auto;}



/*main03*/
.main03 {padding: 15rem 0; background: url("../img/main03_bg.png") no-repeat center center / cover;}
.main03 .j_inner {display: flex; flex-direction: column; align-items: center; gap: 1.5rem}
.main03 .tit_wrap {text-align: center; margin-bottom: 1.5rem;}
.main03 .tit_wrap .tit {margin-bottom: 1rem}

.main03 .slider {width:100%; max-width: 1260px;/* padding: 4rem 2rem 5rem;*/ /*border:1px solid #ddd;*/ border-radius: .5rem; background: #fff; }

.main03 .icon_box {display: flex; gap: 1.5rem; width:100%; max-width: 1260px;}
.main03 .icon_box [class^=box] {width: 100%; padding: 2rem 2.5rem; border:1px solid #ddd; border-radius: .5rem; background: #fff; }
.main03 .icon_box [class^=box] .icon {width: 4.5rem; aspect-ratio: 1 / 1; margin-bottom: 2.5rem; }
.main03 .icon_box [class^=box] .tit {margin-bottom: 1rem; }

@media screen and (max-width:768px){
	.main03 {background: url("../img/main03_bg_m.png") no-repeat center center / cover;}
	.main03 .icon_box {display: grid; grid-template-columns: repeat(3, 1fr)}
}
@media screen and (max-width:500px){
	.main03 .icon_box {display: grid; grid-template-columns: repeat(2, 1fr)}
}

.main03 .main_desc {display: flex; flex-direction: column; gap: 1.5rem;}
.main03 .system_wrap {width:100%; max-width: 1560px; background: #fff; margin-bottom: 2rem }

/* main03 table */
.main03 .section_table {width:100%}
.main03 .section_table .tit_wrap {margin-top: 5rem}
.main03 .table_wrap{width:100%; max-width: 1260px;border: 1px solid #ddd; border-radius: .5rem; margin: 0 auto; overflow: auto; overflow: scroll; overflow-x: scroll; overflow-y: auto; -ms-overflow-style:none;scrollbar-width:none;}
@media screen and (max-width:480px){.main03 .table_wrap{scrollbar-width:auto;}} /*표 하단 스크롤바 보이게*/
.main03 table {width:100%; text-align: center;  min-width: 420px}
.main03 table th {padding: 1rem 1rem; border:1px solid #ddd; border-top: none; background: #EEEDF6}
.main03 table td {padding: 1rem 1rem;  border:1px solid #ddd;}
.main03 table .left {border-left: none;}
.main03 table .right {border-right: none}
.main03 table .bottom {border-bottom: none;}
.main03 table  .cate { background: #F8F8FF}

.main03 .icon_box .box01 .icon {background: url("../img/main03_icon01.png") no-repeat center center / contain;}
.main03 .icon_box .box02 .icon {background: url("../img/main03_icon02.png") no-repeat center center / contain;}
.main03 .icon_box .box03 .icon {background: url("../img/main03_icon03.png") no-repeat center center / contain;}
.main03 .icon_box .box04 .icon {background: url("../img/main03_icon04.png") no-repeat center center / contain;}
.main03 .icon_box .box05 .icon {background: url("../img/main03_icon05.png") no-repeat center center / contain;}



/*main04*/

#section04 {  border-bottom: 2px solid #866632;}
.main04 {color:#fff; width:100%; height: 100vh;}
.main04 .main04_inner {display:flex;height:100%}
.main04 .main04_inner .inner{width:50%;display:flex;flex-direction:column;}
.main04 .main04_inner .inner > div{flex:1;transition:0.3s}
.main04 [class^=item] {padding:4rem; width:100%; position: relative;}
.main04 [class^=item]:before {content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: #000; opacity: .6;transition:0.3s}
.main04 [class^=item] .icon {width:6rem; aspect-ratio:1 / 1; position: absolute}
.main04 [class^=item] .txt_wrap {width:100%; height: 100%; display: flex; flex-direction: column;position: relative; z-index: 1;transition:0.3s}
.main04 [class^=item] .txt_wrap .desc {margin-top: 1rem;;height:0;opacity:0;transition:0.3s}
@media (min-width:1025px){
.main04 [class^=item]:hover{flex:5 !important}
.main04 [class^=item]:hover:before{opacity:0}
.main04 [class^=item]:hover .txt_wrap .desc {height:54px;opacity:1}
}

.main04 .item01 .txt_wrap {text-align: right; justify-content: flex-end; align-items: flex-end}
.main04 .item02 .txt_wrap {justify-content: flex-end;}
.main04 .item03 .txt_wrap {text-align: right;}
.main04 .item04 .txt_wrap {align-items: flex-start}

.main04 .item01 .icon {top:4rem; left:4rem;}
.main04 .item02 .icon {top:4rem; right:4rem;}
.main04 .item03 .icon {bottom:4rem; left:4rem;}
.main04 .item04 .icon {bottom:4rem; right:4rem;}

.main04 .item01 {background: url("../img/main04_img01.jpg") no-repeat center center / cover; border-bottom: 1px solid #866632; border-right: 1px solid #866632; }
.main04 .item02 {background: url("../img/main04_img02.jpg") no-repeat center center / cover;border-bottom: 1px solid #866632; border-left: 1px solid #866632;}
.main04 .item03 {background: url("../img/main04_img03.jpg") no-repeat center center / cover;border-top: 1px solid #866632; border-right: 1px solid #866632;}
.main04 .item04 {background: url("../img/main04_img04.jpg") no-repeat center center / cover;border-top: 1px solid #866632; border-left: 1px solid #866632;}


@media screen and (max-width:1024px){
	#section04 {  border-bottom: none}
	.main04 .main04_inner {display: flex; flex-direction: column;}
	.main04 .main04_inner .inner{width:100%;height:50vh}
	.main04 [class^=item] { height: 25vh; border: none; border-bottom: 2px solid #866632; text-align: left}
	.main04 [class^=item]:before {opacity: .2;}
	.main04 [class^=item] .txt_wrap {text-align: left; align-items: flex-start; justify-content: flex-end}
	.main04 [class^=item] .txt_wrap .desc {display: block;height:auto;opacity:1}
	.main04 [class^=item] .icon {top:4rem; right:4rem; left:auto; bottom:auto;}

}
@media screen and (max-width:768px){
	.main04 [class^=item] .txt_wrap .tit {font-size: 16px }
	.main04 [class^=item] .txt_wrap .desc {}
	
}


.main04 .item01 .icon {background: url("../img/main04_icon01.png") no-repeat center center / contain;}
.main04 .item02 .icon {background: url("../img/main04_icon02.png") no-repeat center center / contain;}
.main04 .item03 .icon {background: url("../img/main04_icon03.png") no-repeat center center / contain;}
.main04 .item04 .icon {background: url("../img/main04_icon04.png") no-repeat center center / contain;}


.main05 .item01 {background: url("../img/main05_img01.jpg") no-repeat center center / cover; border-bottom: 1px solid #866632; border-right: 1px solid #866632; }
.main05 .item02 {background: url("../img/main05_img02.jpg") no-repeat center center / cover;border-bottom: 1px solid #866632; border-left: 1px solid #866632;}
.main05 .item03 {background: url("../img/main05_img03.jpg") no-repeat center center / cover;border-top: 1px solid #866632; border-right: 1px solid #866632;}
.main05 .item04 {background: url("../img/main05_img04.jpg") no-repeat center center / cover;border-top: 1px solid #866632; border-left: 1px solid #866632;}

.main05 .item01 .icon {background: url("../img/main05_icon01.png") no-repeat center center / contain;}
.main05 .item02 .icon {background: url("../img/main05_icon03.png") no-repeat center center / contain;}
.main05 .item03 .icon {background: url("../img/main05_icon02.png") no-repeat center center / contain;}
.main05 .item04 .icon {background: url("../img/main05_icon04.png") no-repeat center center / contain;}




/*j_footer*/

.j_footer {background:#000; width:100%; padding:8rem 0;}
.j_footer .top {display: flex; justify-content: space-between; padding-bottom: 5rem; border-bottom: 1px solid #777}
.j_footer .top .tit {color: #fff; margin-bottom: 1rem;}
.j_footer .top .desc {color: #bbb; line-height: 1.6}
.j_footer .top .right {width:fit-content; height: fit-content;color:#000; background: #fff; border-radius: .5rem; }
.j_footer .top .right .right_inner {display: flex; align-items: center; gap: 4rem; width:100%; height: 100%; padding: .8rem .8rem .8rem  2rem; }
.j_footer .top .right .arr {width:5.2rem; aspect-ratio: 1 / 1; background: url("../img/footer_arr.png") no-repeat center center / 40%; background-color: #000; border-radius: .4rem; transition: .3s}

.j_footer .top .right:hover .arr {filter: invert(1); border: 1px solid #ddd;}

.j_footer .bottom {color:#bbb; margin-top: 5rem; display: flex; justify-content: space-between; align-items: flex-end}
.j_footer .bottom .left {display: flex; flex-direction: column; gap:1rem; }
.j_footer .bottom .left ul {display: flex; align-items: center; gap: 1.5rem;}
.j_footer .bottom .left ul li {position: relative; display: flex; align-items: center; gap:1rem;}
.j_footer .bottom .left ul li:after {content: ''; display: block; width:.2rem; height: 1.5rem; background: #fff;}
.j_footer .bottom .left ul li:last-child:after {display: none;}
.j_footer .bottom .left span {color:#fff; }
.j_footer .bottom .right {width: 80px; height:80px; border:1px solid #fff; border-radius: 100px; color:#fff; display: flex; justify-content: center; align-items: center; }
.j_footer .bottom .right .top_wrap {display: flex; flex-direction: column; gap: .5rem; justify-content: center; align-items: center;margin-top: .5rem; width:100%; height: 100%; cursor: pointer}
@media screen and (max-width:1024px){
	.j_footer .bottom .right {width: 60px; height:60px;}
	.j_footer .bottom .right .top_wrap img {width:26%}
}
@media screen and (max-width:550px){
	.j_footer .top {flex-direction: column; gap: 6rem; }
	.j_footer .top .right .right_inner {padding: 1rem 1rem 1rem  2.5rem; }
	
	.j_footer .bottom {flex-direction: column; gap:3rem;}
	.j_footer .bottom .left {gap:2rem; width: 100%}
	.j_footer .bottom .left ul { flex-direction: column; align-items: baseline}
	.j_footer .bottom .left ul li { gap:.8rem;}
	.j_footer .bottom .left ul li:after {display: none}
	.j_footer .bottom .right .top_wrap {gap: .8rem;}
}














#visual {
  padding-top: 0;
}
#visual .swiper-slide {
  position: relative;
  height: 100vh;
  padding-top: 10rem;
}
#visual .swiper-slide .wfix {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
}
#visual .img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#visual img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.05);
  transition: 3s;
}
#visual .tit_visual {
  position: relative;
  z-index: 2;
  padding-bottom: 15rem;
}
#visual .tit_visual .title {
  display: block;
  font-size: 7.6rem;
  font-weight: bold;
  line-height: 1.2;
  transform: translateY(3.2rem);
  transition: 1s;
  opacity: 0;
}
#visual .tit_visual .desc {
  margin-top: 0.9em;
  font-size: 2.4rem;
  line-height: 1.45;
  opacity: 0.85;
  transform: translateY(3.2rem);
  transition: 1s 0.5s;
  opacity: 0;
}
#visual .swiper-slide-active img {
  transform: scale(1);
}
#visual .swiper-slide-active .tit_visual .title,
#visual .swiper-slide-active .tit_visual .desc {
  transform: translateY(0);
  opacity: 1;
}
#visual .pager {
  position: absolute;
  bottom: 15rem;
  left: 0;
  width: 100%;
}
#visual .pager .wfix {
  position: relative;
}
#visual .pager .swiper-pagination {
  left: auto;
  bottom: 0;
  right: 0;
  top: auto;
  width: auto;
}
#visual .pager .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  opacity: 1;
  transition: 0.5s;
}
#visual .pager .swiper-pagination .swiper-pagination-bullet-active {
  width: 5rem;
}
#visual .pager .swiper-pagination .swiper-pagination-bullet-active i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #fff;
}
@keyframes bar {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  #visual .swiper-slide {
    max-height: 450px;
  }
  #visual .swiper-slide .wfix {
    padding: 0;
  }
  #visual img {
    height: 450px;
  }
  #visual .tit_visual {
    padding: 0 20px 60px;
    padding-right: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
  }
  #visual .tit_visual .title {
    font-size: 38px;
  }
  #visual .tit_visual .desc {
    font-size: 14px;
    word-break: keep-all;
  }
  #visual .pager {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  #visual .tit_visual .desc .block {
    display: inline;
  }
}