/**--------------------------- 이너 사이즈 **/
.inner { margin: 0 auto; position: relative; width:100%; max-width: var(--inner); } 

@media screen and (max-width:1430px) { 
 .inner { padding-right:16px !important; padding-left: 16px !important; } 
}


/**--------------------------- 레이아웃 **/
.container { position: relative; z-index: 1; background:#fff; } 
.content { padding:6.25rem 0; position: relative; } 

@media screen and (max-width:640px) { 
 .content { padding:4rem 0; } 
}



/**--------------------------- 서브 레이아웃 **/
.sub_layout { padding-top:5rem; position: relative; background: url("../../images/sub/bg_sub_top.png") no-repeat top right; } 
.sub_layout::after { display: block; position: absolute; top:100%; left:0; z-index: -1; width:100%; height:500px; background:url("../../images/sub/bg_content.png") no-repeat top right; content: ""; } 
/** 제목 **/
.sub_layout .title_box { margin-bottom:2.5rem; padding-top:3.875rem; font-family: var(--kanit); } 
.sub_layout .title_box span { font-size: 1.875rem; font-weight: 400; color: var(--secondary, #3F2825); } 
.sub_layout .title_box p { margin-top:0.625rem; font-size: 4.625rem; font-weight: 700; color: var(--secondary, #3F2825); text-transform: uppercase; } 

@media screen and (max-width:640px) { 
 .sub_layout .title_box { display: none; } 
 .sub_layout::after { background-size: 80%; } 
}



/** 서브비주얼 **/
.sub_visual { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; height:21.875rem; background-color:#000; background-repeat: no-repeat; background-attachment: scroll; background-position:center center; background-size: cover; } 
.sub_visual:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; animation: visualScale 1s linear; content: ""; } 
.sub_visual.company:before { background-image:url("../../images/sub/bg_company.png?ver2"); } 
.sub_visual.product:before { background-image:url("../../images/sub/bg_product.png?ver2"); } 
.sub_visual.family:before { background-image:url("../../images/sub/bg_family.png?ver2"); } 
.sub_visual.quality:before { background-image:url("../../images/sub/bg_quality.png?ver2"); } 
.sub_visual.community:before { background-image:url("../../images/sub/bg_community.png?ver2"); } 

.sub_visual h2 { position: relative; z-index: 1; font-size: 4.375rem; font-weight: 600; line-height: 140%; color: var(--gray-0, #FFF); text-align: center; letter-spacing: -2.8px; } 

html[lang="en"] .sub_visual h2 { font-size: 3.75rem; } 



@media screen and (max-width:640px) { 
.sub_visual { height:15rem; } 
.sub_visual h2 { font-size: 2.5rem; letter-spacing: 0; } 
html[lang="en"] .sub_visual h2 { font-size: 2rem; } 
}


@keyframes visualScale { 
 0% { -webkit-transform: scale(1.12); transform: scale(1.12) } 
 100% { -webkit-transform: scale(1); transform: scale(1) } 
}

/** 서브 네비게이션 **/
.sub_nav { border-bottom: 1px solid #E5E5E5; background: #FFF; } 
.sub_nav .inner { display: flex; align-items: center; padding:1.25rem 0; } 
.sub_nav a.home { display: flex; align-items: center; justify-content: center; width:2.75rem; height:auto; } 
.sub_nav .line { margin:0 1.25rem; width:1px; height:2.1875rem; background: var(--gray-100, #E5E5E5); content: ""; } 
.sub_nav .line:first-of-type { margin-left:0.625rem; } 

.sub_nav .dropdown { display: flex; align-items: center; position: relative; } 
.sub_nav .dropdown button { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding:0 1.25rem; border: 1px solid #D9D4D3; width:15rem; height:42px; font-weight: 600; color: var(--gray-900, #1A1A1A); text-align: left; letter-spacing: -0.64px; border-radius: 10px; } 
.sub_nav .dropdown button::after { flex-shrink: 0; width:10px; height:7px; background:url("../../images/sub/ico_dropdown.svg"); transition: transform 0.2s ease; content: ""; } 
.sub_nav .dropdown ul { padding:0.625rem 0; border:1px solid rgba(63, 40, 37, 0.28); position: absolute; top:calc(100% + 1px); left:0; z-index: 100; width:100%; visibility: hidden; background: var(--gray-50, #F8F8F8); opacity: 0; border-radius: 10px; } 
.sub_nav .dropdown ul li a { display: block; padding:0.25rem 1.25rem; font-weight: 500; line-height: 160%; color: var(--secondary, #3F2825); letter-spacing: -0.68px; } 
.sub_nav .dropdown ul li a:hover { text-decoration: underline; } 

.sub_nav .dropdown.active button::after { transform: rotate(-180deg); } 
.sub_nav .dropdown.active ul { visibility: visible; opacity: 1; } 

@media screen and (max-width:640px) { 
 .sub_nav a.home { width:1.5rem; } 
 .sub_nav .line { margin:0 0.625rem; } 
 .sub_nav .dropdown { flex:1; } 
 .sub_nav .dropdown button { padding:0 0.625rem; width:100%; font-size: 1.125rem;} 
 .sub_nav .dropdown ul li a { padding:0.375rem 1.25rem; font-size: 1.125rem; } 
}


/** 쓰리 댑쓰 메뉴 **/
.third_nav_box { padding-top:6.875rem; } 
.third_nav_box button { display: none; align-items: center; justify-content: space-between; padding:0 1.25rem; border: 1px solid #D9D4D3; width:100%; height:42px; background-color: #fff; font-weight: 600; color: var(--gray-900, #1A1A1A); text-align: left; letter-spacing: -0.64px; border-radius: 10px; } 

.third_nav_box .third_nav { display: flex; flex-wrap: wrap; flex-wrap: wrap; border: 1px solid #D7D0C8; overflow: hidden; background: var(--gray-0, #FFF); border-radius: 2.5rem; } 
.third_nav_box .third_nav li { flex:1; border-right:1px solid #D7D0C8; height:8.75rem; } 
.third_nav_box .third_nav li:last-child { border-right:0 none; } 
.third_nav_box .third_nav li a { display: flex; align-items: center; justify-content: center; padding:0.625rem; width:100%; height:100%; font-size: 1.15rem; font-weight: 500; line-height: 170%; text-align: center; letter-spacing: -0.8px; transition: font-size 0.3s; } 

.third_nav_box .third_nav li.active a { background: var(--primary, #D81F36); font-size: 1.3rem; font-weight: 600; color: #FFF; letter-spacing: -0.96px; } 

@media screen and (max-width:768px) { 
 .third_nav_box { padding-top:5.25rem; } 
 .third_nav_box button { display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; width: 100%; height: 60px; background-color: #402A29; font-size: 1.5rem; font-weight: bold; font-weight: 600; color: #fff; text-align: center; letter-spacing: -0.88px; border-radius: 2.375rem; } 
 .third_nav_box button::after { position: absolute; top:50%; right: 2.5rem; font-size:14px; color:#fff; color:#fff; letter-spacing: -0.88px; content: '▼'; pointer-events: none; cursor: pointer; transform: translateY(-50%); border-radius: 2.375rem; } 
 .third_nav_box button.active + .third_nav { display: flex; } 
 .third_nav_box .third_nav { display: none; flex-direction: column; margin-top:2px; border-radius: 20px; } 
 .third_nav_box .third_nav li { border-bottom:1px solid #D7D0C8; border-right:0 none; height:3.75rem; } 
 .third_nav_box .third_nav li:last-child { border-bottom:0 none; } 
 .third_nav_box .third_nav li.active a { background-color: transparent; background-color: #fafafa; font-size: 1.25rem; color:#000; } 
 
}