@charset "utf-8";

/********************************************************
■ Side Menu : 사이드 메뉴
********************************************************/
#sub-visual {display: flex;flex-direction: column;align-items: center;position: relative;}
#sub-visual .inner{padding: 80px 0 130px 0;}
.sub-visual__cont {width: 100%;height: 100%;z-index: 1;position: relative;overflow: hidden;}
.sub-visual__cont .sub-visual__type{width: 100%; height: 100%;}
.sub-visual__img {width:100%; max-height:510px;overflow: hidden;}
.sub-visual__img img {width: 100%;height: auto;display: block;transform: scale(1);animation: zoomInOnce 1.2s ease-out 0.2s forwards;opacity: 0;}

/* 제품페이지 메뉴 */
.page__contents{position: relative;}
.sub-page__menu{position: absolute;left: 0;top: 50px;z-index: 100;width: 100%;}
.sub-page__menu .cnavi__list{justify-content: end;letter-spacing: 1px;}

@media all and (max-width:1399px){
	.sub-page__menu{top: 50px;}
	.sub-page__menu .cnavi__list [class*=cn-dl] .list li {padding: 10px;}
}
@media all and (max-width:700px){
	.sub-page__menu .cnavi__list [class*=cn-dl]{min-width: 120px;}
	.sub-page__menu .cn-dl3{display: none !important;}
}
@media all and (max-width:500px){
	/* .sub-page__menu {display: none;} */
}


/* 서브배너 메뉴 */
.typeb__menulist{position: absolute;left: 0;top:130px;z-index: 100;width: 100%;}
.typeb__menu{margin:0 65px;}
#cnavi {padding-bottom: 80px;}
#cnavi .home {flex: 0 0 auto;display: flex;justify-content: center;align-items: center;gap: 0 15px;}
#cnavi .home > img {max-width: 33px;}
.cnavi-in {}
.cnavi__list {display: flex;align-items: center;gap: 0 15px;height: 100%;}
.cnavi__list {display: flex;align-items: center;min-width: 150px;height: 100%;position: relative;}
.cnavi__list dt {display: flex;align-items: center;width: 100%;height: 100%;position: relative;gap: 0 20px;}
.cnavi__list dt > .arrow{font-size: 12px;}
/* .cnavi__list dt > .arrow {display: block;width: 10px;height: 10px;border-top: 2px solid #000;border-right: 2px solid #000;transform: rotate(135deg);position: absolute;top: 4px;right: 0;margin: auto;cursor: pointer;} */
.cnavi__list [class*=cn-dl]:has(.list.open) dt > .arrow {transform: rotate(-180deg);}
.cnavi__list .tit {display: flex;align-items: center;gap: 0 15px;color: #929292;font-size: 23px;font-weight: 500;}
.cnavi__list .sub{display: flex;align-items: center;gap: 0 15px;color: #333;font-size: 23px;font-weight: 500;}
.cnavi__list .list {width: 100%;max-height: 0;overflow: hidden;background: #fff;position: absolute;top: 35px;left: 0;z-index: 999;transition: max-height 0.35s ease-in-out, border 0.4s ease-in-out;box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
.cnavi__list .list.open {border-width: 1px;}
.cnavi__list .toggle-list{overflow: hidden;max-height: 0;transition: max-height 0.35s ease-in-out;}
.cnavi__list .list li {padding: 10px 15px;}
.cnavi__list .list a {display: block;color: #333;font-size: 16px;font-weight: 500;transition: .35s;}
.cnavi__list .list li a:hover,
.cnavi__list .list li a:focus{color:var(--color);font-weight: 600;}
.cnavi__list .list li.active a {color: #fff;font-weight: 600;line-height: 1.2;}
.cnavi__list .list li.active {background: var(--color);}
.cnavi__list .list li.active i{color: #fff;}

/* 서브배너 타이틀 */
.title-cont{margin-bottom: 50px;display: flex;flex-direction: column;gap: 50px 0;}
.title-cont .main-tit{font-size: 4em;font-weight: 600;color: #333;}
.title-cont.depth3{gap: 20px 0;}
.title-cont.depth3 .main-tit{font-size: 2.50em;}
.title-cont .sub-tit{font-size: 1.00em;font-weight: 400;line-height: 1.5;}

/* subbnr_b - 해외이주정보/고객지원실 */
#sub-visual.board_page{}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit{position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;z-index:3}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner{padding: 0;text-align: center;}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner .title-cont{margin-bottom: 0;}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner .main-tit{font-size: 2.5em;font-weight: 600;color: #fff;padding-bottom: 20px;}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner #cnavi{padding-bottom: 0;}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner #cnavi .cnavi__list{justify-content: center;}
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner #cnavi .cnavi__list .tit,
#sub-visual.board_page .sub-visual__cont .sub-visual__tit .inner #cnavi .cnavi__list .sub{color: #fff;}






/* 반응형 */
@media all and (max-width:1499px){
	.typeb__menu{margin: 0 50px;}
}
@media all and (max-width:1399px){
	.typeb__menu{margin: 0 30px;}
}
@media all and (max-width:1024px){
	.typeb__menulist{top: 100px;}
}
@media all and (max-width:640px){
	.typeb__menulist{top: 100px;}
	.typeb__menu{margin: 0 20px;}
	.cnavi__list{gap: 0 15px;}
	.cnavi__list [class*=cn-dl]{min-width: 120px;}
	.cnavi__list [class*=cn-dl] dt{gap: 0 10px;}
	.cnavi__list [class*=cn-dl] .tit{font-size: 15px;}
	.cnavi__list [class*=cn-dl] .list a{font-size: 14px;}

    .title-cont .main-tit {font-size:3em}
    #cnavi {padding-bottom:50px}
    .cnavi__list .tit, .cnavi__list .sub {font-size:1em}
    
    
}

@media all and (max-width:500px){
    .title-cont .main-tit {font-size:2em}
    .title-cont {gap:30px 0}
}