@charset "utf-8";

/* 초기화 */
.subvisual-wrapper {
    position: sticky;
    top: -41px;
    z-index: 99;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 1px 0 0 var(--sub-color-9);
	padding-left: 15px;
    padding-right: 15px;
}
.subpage-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 150px;
    margin: var(--padding-50-100) 0 var(--padding-40-160);
	transition: padding-top var(--transition-duration) var(--transition-smooth);
}
body.hero-expanded .subpage-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 0px;
    margin: var(--padding-50-100) 0 var(--padding-40-160);
}
.subcont-area {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;  
	align-items: center;
	padding-left: 15px;
    padding-right: 15px;
}
.subcont-area.full {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;  
	align-items: center;
	padding-left: 0px;
    padding-right: 0px;
}
.subtit-area {
    display: flex;
    width: 100%;
    max-width: var(--max-width);
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}
.banner-text {
	text-align: center;
	position: absolute;
	z-index: 10;
	margin-bottom: 20px;
	transform: translate3d(0, -265px, 0);
	transition: transform var(--transition-duration) var(--transition-smooth);
}

body.hero-expanded .banner-text {	
	transform: translate3d(0, 0, 0) scale(1);
}
.banner-text .sub-title {
	color: var(--sub-color-1);
	margin-bottom: 6px;
	transition: color var(--transition-duration) var(--transition-smooth),
	opacity var(--transition-duration) var(--transition-smooth);
}
body.hero-expanded .banner-text .sub-title {
	color: #ffffff;
}
.subcont-area .sub-cont {
    margin: var(--padding-80-160) auto;
    width: 100%;
    max-width: var(--max-width2);
}
.subcont-area .sub-cont.w-100 {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}
.subcont-area .banner-wrapper,
.subcont-area.full .banner-wrapper {
	position: relative;
	width: 100%;
	height: var(--height-70-330);
	min-height: 330px;
	border-radius: 24px;
	overflow: visible;
	transform: translate3d(0, 0, 0);
	transition: transform var(--transition-duration) var(--transition-smooth),
				height var(--transition-duration) var(--transition-smooth),
				box-shadow var(--transition-duration) var(--transition-smooth);
				will-change: transform, height;
}
body.hero-expanded .subcont-area .banner-wrapper, 
body.hero-expanded .subcont-area.full .banner-wrapper {
	height: var(--height-93-530);
	/*transform: translate3d(0, -75px, 0);*/
}
.subcont-area .banner-image,
.subcont-area.full .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    transform: scale(1);
	border-radius: var(--padding-15-30);
    transition: transform var(--transition-duration) var(--transition-smooth);
				will-change: transform;
}
.subcont-area .banner-image.center,
.subcont-area.full .banner-image.center {
    object-position: top center;
}
.subcont-area .sub-cont,
.subcont-area.full .sub-cont {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.subtit-area h1.sub-title {
    font-size: var(--font-size-18-55);
    text-align: center;
}
.subtit-area .sub-h2 {
    font-size: var(--font-size-14-26);
    color: var(--main-color);
    font-weight: 600;
    text-align: center;
    padding: var(--padding-8-15) 0 0 0;
	letter-spacing: -1px;
	transition: color var(--transition-duration) var(--transition-smooth),
				text-shadow var(--transition-duration) var(--transition-smooth);
}


/* Introduction */
.subvisual-area {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: var(--max-width2);
    height: 200px;
    background-color: #ffffff;
    transition: height var(--transition-duration) var(--transition-smooth);
    justify-content: space-between;
}

/* 스크롤되었을 때 */
.subvisual-area.is-nav-condensed {
    position: fixed;
    top: 105px;
    left: 0;
    width: 100%;
    height: 80px !important;
    overflow: hidden;
    z-index: 1000;
}
.subvisual-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;	
	animation:sub_bg 3s ease 0s 1 normal both;
	-webkit-animation:sub_bg 3s ease 0s 1 normal both;
	transform-origin:50% 50%;
}
@keyframes sub_bg {
	0% {
		-ms-transform:scale(1.2);
		-webkit-transform:scale(1.2);
		transform:scale(1.2);
	}
	100% {
		-ms-transform:scale(1);
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
.subvisual-area .sv_txt_area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 9;
    gap: var(--gap-5-10);
    bottom: 30px;
    transition-duration: 0.3s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
body.nav-condensed .subvisual-area .sv_txt_area {
    bottom: 18px;
}
.subvisual-area .sub-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
}
.subvisual-area .sub-visual {
    width: 100%;
    height: 100%;
    z-index: 5;
	overflow: hidden;
}
.subvisual-area .sv_tit {
    font-size: var(--font-size-28-64);
    font-weight: 700;
	transition: font-size var(--transition-duration) var(--transition-smooth);
}   
body.nav-condensed .subvisual-area .sv_tit {
    font-size: var(--font-size-20-36);
}   
.subvisual-area .sv_txt {
    display: flex;
    font-size: var(--font-size-14-16);
    font-weight: 600;
    color: var(--sub-color-5);
	transition: display var(--transition-duration) var(--transition-smooth);
}
body.nav-condensed .subvisual-area .sv_txt {
    display: none;
}
/*서브메뉴*/
.sub_menu_wrap {
    display: flex;
    position: relative;
    height: 60px;
    bottom: 0px;
    z-index: 9;
    align-items: center;
}
.sub_menu_area {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.sub_menu {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    height: var(--height-65);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.icon_home {
    position: relative;
    height: 100%;
    border-radius: 0;
    display: flex;
    line-height: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.sub_tab {
    display: flex;
    width: 400px;
    height: 60px;
    margin-left: var(--padding-5-10);
    align-items: flex-start;
	transition: height var(--transition-duration) var(--transition-smooth);
}
body.nav-condensed .sub_tab {
    height: 40px;
}

.sub_tab ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
}
.sub_tab>ul>li {
	float:left;
	position:relative;
    font-size: var(--font-size-14-16);
    font-weight: 600;
	cursor:pointer;
	background-repeat:no-repeat;
	background-position:94% 50%;
}
.sub_tab>ul>li.sub_depth1 {
    width: 50%;
    height: 100%;
    border-left: none;
    padding-left: var(--padding-15-30);
    padding-right: var(--padding-15-30);
    background-image: url(/img/tab_box_bg_right_w.svg);
    background-position: right var(--padding-10-20) top 4px;
    z-index: 1;
    background-size: 14px;
    align-items: flex-start;
}
.sub_tab>ul>li.sub_depth2 {
	width:50%;
    height: 100%;
	display:none;
    padding-left: var(--padding-15-30);
	padding-right: var(--padding-15-30);
	background-image:url(/img/tab_box_bg_right_w.svg);
    background-position: right var(--padding-10-20) top 4px;
	z-index:1;
	background-size:14px;
}
.menu_on {
	display:flex !important;
}
.sub_tab>ul>li.tab_active {
    background-color: var(--main-color-0);
    color: var(--sub-color-1);
    border-left: 0px var(--main-color-0);
    border-right: 1px var(--main-color-0);
}
@media (hover: hover) and (pointer: fine) { /* when supported */
	.sub_tab>ul>li:hover {
		background-color: var(--main-color-0);
		color: var(--sub-color-1);
		border-left:0px var(--main-color-0);
		border-right:1px var(--main-color-0);
	}
}
.tab_box_bg_on {
	background-image:url(/img/tab_box_bg.svg) !important;
	background-size:14px;
		background-color: var(--main-color-0);
		color: var(--sub-color-1);
		border-left:0px var(--main-color-0);
		border-right:1px var(--main-color-0);
}
.sub_tab_sub {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
    height: 0;
    opacity: 0;
    z-index: -1;
    box-sizing: content-box;
    background-color: #FFF;
    border-radius: 20px;
    overflow: hidden;
	border:1px solid var(--sub-color-9);
	transition: opacity var(--transition-duration) var(--transition-smooth);
}
.sub_tab_sub_ov {
	height:auto;
	opacity:1;
	z-index:1;
}
.sub_tab_sub ul {
    display: flex;
    padding: 0 0 0 0;
    flex-direction: column;   
	/*margin: var(--padding-5-10) var(--padding-15-30);*/
}
.sub_tab_sub ul li {
    display: flex;
    align-items: center;
    line-height: 2.2;
    /*padding: 8px 0 0 0;*/
    font-size: var(--font-size-13-15);
    font-weight: 400;
    width: 100%;
    background-image: none;
}
.sub_tab_sub ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
.sub_tab_sub ul li:first-child a {
    padding-top: var(--padding-5-10);
}
.sub_tab_sub ul li:last-child a {
    padding-bottom: var(--padding-5-10);
}
.sub_tab_sub ul li a {
    display: flex;
    width: 100%;
    height: 100%;
    padding-left: var(--padding-15-30);
    align-items: center;
}
.sub_tab_sub ul li a:hover,.sub_tab_sub ul li a:focus {
	color: var(--sub-color-1);
	background: var(--sub-color-10);
	
}
.sub_tab>ul>li.sub_depth1 p {
    position: relative;
    color: var(--sub-color-5);
    line-height: 1.5;
}
.sub_depth2 p {
    width: 100%;
    line-height: 1.5;
    align-items: center;
}
.sub_depth2_mo {
	display:none !important;
}


/* CONTACT US */
#bo_list {
    margin: 0 auto;
}


/* Large Devices, Wide Screens : ~ 1280px */
@media only screen and (max-width : 1280px) {
	.subcont-area .banner-wrapper, 
	.subcont-area.full .banner-wrapper {
		min-height: 250px;
	}
	
	.subcont-area {
		padding-left: 15px;
		padding-right: 15px;
	}
	
}


/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {

}


/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
	.subcont-area.full .banner-wrapper,
	.subcont-area .banner-wrapper {
		min-height: 180px;
	}
	.subvisual-area {
		display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;  
		height: 180px;
	}
	body.nav-condensed .subvisual-area {
		height: 220px;
	}
	.sub_menu_wrap {
		height: 50px;
	}
	.sub_tab {
		height: 40px;
	}		
	body.nav-condensed .sub_tab {
		height: 30px;
	}
	.sub_tab_sub {
		top: 35px;
	}
	.subpage-wrapper {
		padding-top: 60px;
	}
	.banner-text {
		margin-bottom: 0px;
		transform: translate3d(0, -120px, 0);
	}

}


/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {
	.subcont-area .banner-wrapper,
	.subcont-area.full .banner-wrapper {
		min-height: 140px;
	}
	.sub_menu_wrap {
		padding-left: 0;
		padding-right: 0;
	}
}


/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}