@charset "utf-8";
@media(prefers-reduced-motion: no-preference){
	section:has(:where([data-scroll_effect="slide_left"], [data-scroll_effect="slide_right"])){ overflow: hidden; }
	[data-scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); transition: .8s; }
	[data-scroll_effect="slide_up"]{ transform: translateY(20rem); opacity: 0; transition: .6s; }
	[data-scroll_effect="slide_left"]{ transform: translateX(20rem); opacity: 0; transition: .6s; }
	[data-scroll_effect="slide_right"]{ transform: translateX(-20rem); opacity: 0; transition: .6s; }
	[data-scroll_effect*="flip_"]{ backface-visibility: hidden; }
	[data-scroll_effect="flip_up"]{ transform: perspective(2500rem) rotateX(-100deg); transition: .6s; }
	[data-scroll_effect="clip_right"].effect_active{ clip-path: inset(0); }
	[data-scroll_effect*="slide_"].effect_active{ transform: translate(0); opacity: 1; }
	[data-scroll_effect*="flip_"].effect_active{ transform: perspective(2500rem) rotateX(0deg); }
	[data-scroll_effect_delay="50"].effect_active{ transition-delay: .05s; }
	[data-scroll_effect_delay="100"].effect_active{ transition-delay: .1s; }
	[data-scroll_effect_delay="150"].effect_active{ transition-delay: .15s; }
	[data-scroll_effect_delay="200"].effect_active{ transition-delay: .2s; }
	[data-scroll_effect_delay="250"].effect_active{ transition-delay: .25s; }
	[data-scroll_effect_delay="300"].effect_active{ transition-delay: .3s; }
	[data-scroll_effect_delay="350"].effect_active{ transition-delay: .35s; }
	[data-scroll_effect_delay="400"].effect_active{ transition-delay: .4s; }
	[data-scroll_effect_delay="450"].effect_active{ transition-delay: .45s; }
	[data-scroll_effect_delay="500"].effect_active{ transition-delay: .5s; }
	[data-scroll_effect_delay="600"].effect_active{ transition-delay: .6s; }
	[data-scroll_effect_delay="700"].effect_active{ transition-delay: .7s; }
	[data-scroll_effect_column] [data-scroll_effect].effect_active{ transition-delay: calc( var(--index) * calc( var(--delay) * 1ms )); }
	@media(min-width:768px){
		[data-scroll_effect].effect_active [data-scroll_effect]{ transform: translate(0); opacity: 1; }
	}
	@media(max-width:1279px){
		[data-scroll_effect_column] [data-scroll_effect*="slide_"]{ transform: translateY(20rem); }
		[data-scroll_effect_column] [data-scroll_effect*="slide_"].effect_active{ transform: translate(0); }
	}
	@media(max-width:1279px) and (min-width:768px){
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(odd){ transition-delay: 0s; }
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(4){ transition-delay: calc( (var(--index) - 1 ) * calc( var(--delay) * 1ms )); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(5){ transition-delay: calc( (var(--index) - 2 ) * calc( var(--delay) * 1ms )); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(6){ transition-delay: calc( (var(--index) - 3 ) * calc( var(--delay) * 1ms )); }
	}
	@media(max-width:767px){
		#wrap [data-scroll_effect_delay]{ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
	}
}

.inr{ position: relative; margin: 0 auto; max-width: calc( var(--inner) * 1rem); width: calc( var(--inner_width) * 100% ); height: 100%; z-index: 2; }
.inr.wide{ max-width: 1870rem; }
.wrapper{margin: 0 auto; max-width: calc( var(--inner) * 1rem); width: calc( var(--inner_width) * 100% ); }

/* header */
#header{ position: relative; background: #fff; z-index: 10; }
#header::before{ content: ''; position: absolute; inset: 100% 0 auto; height: 0; background: inherit; z-index:2;}
#header::after{ content: ''; position: absolute; inset: 0; border-bottom: 1rem solid #e5e5e5; }
.header_top{ padding: 10.5rem 0 10rem; background: #f4f4f4; color: #666; }
.header_top__inr{ display: flex; justify-content: flex-end; align-items: center; gap: 38rem; }
.header_top__a{ position: relative; }
.header_top__a + .header_top__a::before{ content: ''; position: absolute; margin: auto auto auto -17rem; inset: 0; width: 1rem; height: 12rem; background: #e1e1e1; }
.header_bottom{ height: 110rem; }
.header_bottom__inr{ display: flex; justify-content: space-between; }
#header .logo{ display: flex; align-items: center; }
#header .logo > a{ font-size: 16rem; }
#header .logo img{ height: 70rem; }
#header nav{ display: flex; align-items: center;}
.gnb{ display: flex; margin-right: 25rem; height: 100%; }
#header nav .gnb > li{position:relative;}
#header nav .gnb > li > a{display:flex; align-items: center; height: 100%; padding: 0 28.75rem; font-size:20rem; font-weight:800; }
#header nav .gnb > li > a.on{color:var(--primary);}
#header .gnb .sub_menu{ position:absolute; top:100%; left:0; z-index:90; width:100%; height: var(--sub_menu_height); padding: 25rem 0 0; box-sizing: border-box; text-align:center; clip-path: inset(0 0 100%); }
#header .gnb li:hover .sub_menu{ opacity:1; visibility:visible; }
#header .gnb .sub_menu > li > a{display:block; padding: .7em 1em; font-size:17rem; font-weight: 700; color: #8d8d8d; }
#header .gnb .sub_menu > li > a:hover{color:var(--primary);}
#header .gnb .sub_menu > li > ul{display:none;}
.cover{ position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; z-index: 9; }
.search_active + .cover{ opacity: 1; visibility: visible; }

/* search */
.area_search{ position: absolute; inset: 0 0 auto; padding: 208rem 0 55rem; background: #fff; clip-path: inset(0 0 100%); z-index: 9; }
.search_active ~ .area_search{ clip-path: inset(0); }
.area_search__search_box{ display: flex; position: relative; margin: 0 auto; max-width: 680rem; width: 100%; height: 76rem; border-bottom: 3rem solid currentColor; }
#wrap .area_search__search{ margin: 0; width: 100%; height: 100%; padding: 20rem 20rem 16rem; border: 0; font-size: 20rem; font-weight: 300; }
.area_search__btn{ display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 67rem; height: 100%; background: 0; }
.area_search__link_box{ display: flex; justify-content: center; gap: clamp(0rem, 3.33333333vw, 40rem); margin-top: 120rem; }
.area_search__link{ display: block; position: relative; height: 310rem; padding: 6.1% 4.8%; border-radius: 10rem; box-sizing: border-box; color: #fff; }
.area_search__link:nth-child(1){ background: #33393e url(/images/main/img_con2_link1.png) no-repeat 100% 100% / min(53.79310345%, 312rem) auto; }
.area_search__link:nth-child(2){ background: #002a62 url(/images/main/img_con2_link2.png) no-repeat 90% 100% / min(38.96551724%, 226rem) auto; }
.area_search__link_title{ display: block; font-size: var(--font_size24); font-weight: 800; }
.area_search__link_sub_title{ display: block; margin-top: 19rem; line-height: 1.6875; }
.area_search__link_more{ display: flex; align-items: center; gap: 10px; position: absolute; bottom: 0; left: 0; width: 47.4%; height: 75rem; padding: 20rem 10%; background: #edf0f2; border-radius: 0 10rem 0 10rem; box-sizing: border-box; font-weight: 700; color: var(--black); }
.area_search .search_tag{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10rem; width:100%; text-align:center; padding-top:40rem;}
.area_search .search_tag > a{display:inline-block; min-width:100rem; height:56rem; line-height:56rem; padding:0 30rem; text-align:center; font-size:20rem; color:#111; letter-spacing:-0.05em; background-color:#f7f7f7; border-radius:60rem; cursor:pointer; transition: all 0.5s;}
.area_search .search_tag > a::before{ content: '#'; }
.area_search .search_tag > a:hover{background-color:#111; color:#fff;}
@media(min-width:768px){
	.main_con2__link{ flex: 1; }
}
@media(min-width:1280px){
	.main_con2{ padding: 107rem 0 121rem; }
	.main_con2 .common__title{ font-size: 45rem; }
}
@media(max-width:767px){
	.main_con2__link_box{ flex-direction: column; }
	.main_con2__link_more{ font-size: 14rem; }
    .search_tag{padding-top:20px;}
    .search_tag > a{min-width:auto; height:40px; line-height:40px;  padding:0 14px; font-size: 14rem;}
}

@media(prefers-reduced-motion:no-preference){
	#header::before,
	#header .gnb .sub_menu,
	.area_search,
	.cover{ transition: .6s; }
	#header .gnb .sub_menu > li > a{ transition: .4s; }
}
@media(min-width:1280px){
	#header.active::before{ height: var(--sub_menu_height); }
	#header.active .gnb .sub_menu{ clip-path: inset(0); }
	.active + .cover{ opacity: 1; visibility: visible; }
	
	#header.search_active::before,
	#header.search_active .gnb .sub_menu{ display: none; }
}
@media(max-width:1279px){
	.gnb{ display: none; }
}

.h_btn_search{ margin-right: 18rem; width: 24rem; height: 24rem; background: url(/images/common/icon_search.png) no-repeat 50% / contain; }
.btn_menu{ position: relative; width: 24rem; height: 24rem; background: 0; }
.btn_menu span{ position: absolute; margin: auto; inset: 0; height: 2rem; background: currentColor; }
.btn_menu span:nth-child(1){ transform: translateY(-8rem); }
.btn_menu span:nth-child(3){ transform: translateY(8rem); }

@media(min-width:1280px){
	.btn_menu{ display: none; }
}

/* menu all */

.area_menu_all{display:block; visibility:hidden; position:fixed; inset: 0; z-index:90; background:rgba(0, 0, 0, 0); transition:.4s; }
.active .area_menu_all{ background:rgba(0, 0, 0, 0.5); visibility:visible; }
.area_search .area_menu_all{ display: none; }
.m_gnb{ overflow-y:auto; position: relative; max-width: 320rem; width: 100%; height: 100%; padding-top: 100rem; background: #fff; box-sizing: border-box; transition: .7s; }
#header:not(.active) .area_menu_all .m_gnb{ transform: translateX(-100%); }
.btn_close{ position: absolute; top: 40rem; left:15rem; width: 24rem; height: 24rem; z-index:1; background: 0; color: inherit; }
.btn_close::before, .btn_close::after{ content: ''; position: absolute; margin: auto; inset: 0; height: 2rem; background: currentColor; }
.btn_close::before{ transform: rotate(45deg); }
.btn_close::after{ transform: rotate(-45deg); }
.m_gnb li{position:relative;}
.m_gnb ul{ border-top:1rem solid #e9e9e9;}
.m_gnb ul > li{display:block; border-bottom:1rem solid #e9e9e9;}
.m_gnb ul > li > a{ display:block; width:auto; padding:10rem 40rem 10rem 15rem; font-size:18rem; }
.m_gnb ul ul{ display: none; margin:0 15rem 15rem; background:#f5f5f5; }
.m_gnb a.on{ color: var(--primary); }
.m_gnb ul ul > li > a{display:block; width:auto; padding:10rem 40rem 10rem 10rem; font-size: 14rem;}
.area_menu_all .open{display:block; position:absolute; right:5rem; top:5rem; width:35rem; height:35rem; background:transparent; font-size:0rem;}
.area_menu_all .open:before,
.area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12rem; height:2rem; margin-top:-6rem; background:#cfcece;}
.area_menu_all .open:before{margin-left:-8rem; transform:rotate(45deg); transform-origin:0 0;}
.area_menu_all .open:after{margin-left:-5rem;transform:rotate(-45deg); transform-origin:100% 0;}
.area_menu_all .open.active{transform:rotate(180deg);}
@media(min-width:1280px){
	.area_menu_all{ display: none; }
}

/* float menu */
.float_menu{ overflow: hidden; display: flex; align-items: center; gap: 20rem; position: fixed; right: 30rem; bottom: 30rem; width: 70rem; height: 70rem; padding: 19.5rem; border-radius: 3em; background: linear-gradient(to right, #6cbdff, #194cc1); box-sizing: border-box; font-size: 20rem; font-weight: 700; color: #fff; transition: .4s; white-space: nowrap; z-index: 5; }
.float_menu img{ width: 31rem; height: 31rem; }
@media(hover:hover){
	.float_menu:hover{ gap: 15rem; width: 328rem; padding: 19.5rem 45rem; }
}

/* footer */
#footer{ padding: 46rem 0 116rem; /*76*/ background: #111; color: #888; }
#footer .inr{ display: grid; }
.footer_link{ grid-area: link; display: flex; gap: 29rem; font-size: 15rem; color: #fff; }
.top_btn{ grid-area: top; justify-self: end; width: 50rem; height: 50rem; background: #333 url(/images/common/icon_top.png) no-repeat 50% / 14rem 12rem; border-radius: 50%; }
.footer_copy{ grid-area: copy; display: flex; flex-wrap: wrap; gap: 5rem 18rem; max-width: 650rem; font-size: 13rem; }
.footer_copy p{ margin-top: 12rem; }
.footer_logo{ grid-area: logo; height: 48rem; }
@media(min-width:768px){
	#footer .inr{ grid-template: 'link top' 'copy logo'; gap: 14rem; }
	.footer_logo{ position: relative; justify-self: end; align-self: end; bottom: 5rem; }
}
@media(max-width:767px){
	#footer .inr{ grid-template: 'link' 'logo' 'copy';  gap: 20rem; }
	.top_btn{ position: absolute; top: 51rem; right: 0; }
	.footer_logo{ margin-top: 10rem; }
}