@charset "utf-8";

.ico-tel { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_tel.svg') no-repeat center/contain; }
.ico-fax { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_fax.svg') no-repeat center/contain; }
.ico-mobile { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_mobile.svg') no-repeat center/contain; }
.ico-email { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_email.svg') no-repeat center/contain; }
.ico-contact { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_contact.svg') no-repeat center/contain; }
.ico-outdoor,
.ico-01 { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_outdoor.svg') no-repeat center/contain; }
.ico-landscape,
.ico-02 { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_landscape.svg') no-repeat center/contain; }
.ico-indoor,
.ico-03 { display: block; aspect-ratio: 1/1; background: url('/resources/img/common/ico_indoor.svg') no-repeat center/contain; }


.main-wrap { display: grid; grid-template-columns: auto 24rem; gap:3.2rem; margin-bottom: 8rem; }

.main-visual { z-index: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap:2rem; height: 20rem; padding: 0 4.8rem; border-radius: 2rem; overflow: hidden; color:white; }
.main-visual-bg { z-index: -1; position: absolute; left: 0; top:0; width: 100%; height: 100%; }
.main-visual-bg img { height: 100%; object-fit: cover; }
.main-visual::before { content: ''; position: absolute; left:0; top:0; transform: translate(-10%, -30%); display: block; width: 27rem; aspect-ratio: 269/276; background: url('/resources/img/common/logo_simbol.svg') no-repeat center/contain; }
.main-visual > div:not(.main-visual-bg) { display: flex; flex-direction: column; gap:1.2rem; font-weight: 700; font-size: 2rem; }
.main-visual .visual-logo img { width: 7.9rem; }

.main-side { display: flex; flex-direction: column; justify-content: space-between; gap:1.6rem; }
.main-side .main-customer { flex:1; border:1px solid var(--lite-gray); border-radius: 2rem; overflow: hidden; }
.main-side .main-customer > p { display: flex; align-items: center; padding:0 4.3rem; height: 5.6rem; background: #fff6e6; font-weight: 700; font-size: 2rem; border-bottom:1px solid var(--lite-gray); }
.main-side .main-customer ul { display: flex; flex-direction: column; gap:2.4rem; padding: 2.4rem 3.2rem; }
.main-side .main-customer li { font-size: 1.8rem; color: var(--sub-black); }
.main-side .main-customer li p:last-child { margin-top: .8rem; letter-spacing: -.5px; }
.main-side .main-customer li b { font-weight: 700; color:var(--main-black); }
.main-side .main-customer li span { display: inline-block; width: 1.6rem; margin-right:.6rem; }

.main-side .main-contact { display: block; padding: 3.2rem; background: #fff6e6; border-radius: 2rem; cursor: pointer; border:1px solid var(--lite-gray); }
.main-side .main-contact p { font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
.main-side .main-contact .contact-title { display: flex; align-items: center; gap:1.8rem; margin-top: 2rem; font-size: 2.2rem; font-weight: 700; }
.main-side .main-contact .contact-ico { width: 4rem; padding: 1rem; background: white; border-radius: 50px; }

.main-visual-nav { display: flex; flex-direction: column; gap:3.2rem; }
.main-nav { flex:1; }
.main-nav:has(.on) { max-height: 12rem; }
.main-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap:1.6rem; height: 100%; }
.main-nav li { height: 100%; }
.main-nav li a { position: relative; display: flex; flex-direction: column; align-items: center; gap:3rem; justify-content: center; height: 100%; padding-bottom: .8rem; background: #F5F5F5; border-radius: 2rem; text-align: center; font-size: 2.4rem; font-weight: 700; transition: .3s; }
.main-nav li a:hover { background: var(--key-color); color:white; }
.main-nav li.on a { background: var(--key-color); color:white; }
.main-nav li.on a::before { content: ''; display: block; position: absolute; left: 50%; bottom:0; transform: translate(-50%, 100%); border-left:1.3rem solid transparent; border-right:1.3rem solid transparent; border-top:1.3rem solid var(--key-color); }
.main-nav .nav-icon { width: 14.4rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50rem; }
.main-nav .nav-icon span { width: 9rem; }

.main-nav.slide-nav li a { flex-direction: row; gap:1.6rem; padding-bottom: 0; }
.main-nav.slide-nav li .nav-icon { width: 6.4rem; }
.main-nav.slide-nav li .nav-icon span { width: 4rem; }
.main-nav.slide-nav li .nav-title { font-size: 2.6rem; }


/* 2 뎁스 */
.main-depth-2 { display: block; }
.main-depth-2 ul { display: grid; grid-template-columns: repeat(8, 1fr); gap:1.6rem; }
.main-depth-2 li a { display: flex; align-items: center; justify-content: center; height:7.6rem; padding: 0 .5rem; background: #f9f9f9; color:var(--sub-black); font-size: 1.8rem; font-weight: 700; border-radius: 1.2rem; transition: .3s; border:2px solid #f9f9f9; text-align: center; line-height: 1.3; }
.main-depth-2 li.on a { border: 2px solid var(--main-black); background: white; border:2px solid var(--main-black); color:var(--main-black); }


@media screen and (max-width:1400px){
  .main-nav.slide-nav li .nav-title { font-size: 2.2rem; }
}
@media screen and (max-width:1200px){
  .main-wrap { grid-template-columns: 1fr 20rem; gap:2.4rem }
  .main-depth-2 ul { gap:1rem; }

  .main-side .main-customer > p { padding:0 3rem; }
  .main-side .main-customer ul { padding: 2rem 2.4rem; gap:2rem; }
  .main-side .main-contact { padding: 2.8rem; }

  .main-nav:has(.on) { max-height: 9.8rem; }
  .main-nav li a { font-size: 2.2rem; }
  .main-nav .nav-icon { width: 13rem; }
  .main-nav .nav-icon span { width: 8rem; }
}
@media screen and (max-width:1024px){
  .main-visual { height: auto; padding: 5rem 4.4rem; }
  .main-visual .visual-logo { margin-top: 6rem; text-align: right; }
  .main-visual-nav { gap:2.4rem; }
  .main-wrap { grid-template-columns: 1fr; }
  .main-side .main-customer { display: none; }
  .main-side .main-contact { z-index: 5; position: fixed; right:24px; bottom:24px; padding: 1.2rem; border-radius: 10rem; }
  .main-side .main-contact > p { display: none; }
  .main-side .main-contact .contact-title { margin-top: 0; gap:.6rem; font-size: 1.8rem; }
  .main-side .main-contact .contact-ico { width: 3.4rem; padding: .8rem; }
  
  .main-nav { flex:auto; height:auto; }
  .main-nav li a { padding:6rem 0; gap:2rem; }
  .main-nav.slide-nav li a { padding:2rem 0; padding-bottom: 2rem; }
  .main-nav:has(.on) { max-height: none; }
  
  .main-depth-2 ul { grid-template-columns: repeat(6, 1fr); }
}
@media screen and (max-width:768px){
  .main-visual { padding: 4rem; gap:1.4rem; }
  .main-visual > div:not(.main-visual-bg) p { line-height: 1.8; }
  .main-visual .visual-logo { margin-top: 10rem; }
  .main-visual-bg img { object-position: 60%; }
  
  .main-depth-2 ul { grid-template-columns: repeat(4, 1fr); }
  
  .main-nav ul { gap:1rem; }
  .main-nav .nav-icon { width: 11rem; }
  .main-nav .nav-icon span { width: 7rem; }

  .main-nav li a { border-radius: 1.4rem; }
  .main-nav.slide-nav li a { gap:1rem; }
  .main-nav.slide-nav li .nav-icon { width: 5rem; }
  .main-nav.slide-nav li .nav-icon span { width: 3.2rem; }
}
@media screen and (max-width:500px){
  .main-visual { padding: 3.2rem 2.4rem; }

  .main-nav li a { padding: 2rem 0; font-size: 2rem; gap:1.4rem; }
  .main-nav.slide-nav li a { flex-direction: column; gap:1.4rem }
  .main-nav.slide-nav li .nav-title { font-size: 2rem; }

  .main-depth-2 ul { grid-template-columns: repeat(3, 1fr); }

  .main-nav .nav-icon { width:5rem; }
  .main-nav .nav-icon span { width: 3.2rem; }
}


/* 문의하기 팝업 */
.popup-form { display: block !important; visibility: hidden; opacity: 0; transform: translateX(100%); transition: .3s; }
.popup-form.active { transform: none; opacity: 1; visibility: visible; }
.popup-form .popup-wrap { position: relative; max-width: 102.4rem; border-radius: 2.4rem; overflow: hidden; }
.popup-form input { width: 100%; height: 5.6rem; padding: 0 1.6rem; border:none; border-bottom:1px solid var(--deep-gray); font-size: 1.6rem; color:var(--sub-black); }
.popup-form input::placeholder { color:var(--deep-gray); }
.popup-form textarea { height: 24rem; padding: 2.2rem 2.4rem; border: 1px solid var(--lite-gray); border-radius: 1.2rem; font-size: 1.7rem; line-height: 1.4; color:var(--sub-black); overflow-y: auto; }
.popup-form .frm-textarea { height: 13.4rem; padding: 2.2rem 2.4rem; border: 1px solid var(--lite-gray); border-radius: 1.2rem; font-size: 1.7rem; line-height: 1.4; color:var(--sub-black); overflow-y: auto; background: #fafafa; }
.popup-form .required::after { content: '*'; display: inline-block; padding-left: 3px; color:#ED4444; }

.popup-title { position: sticky; top:0; display: flex; align-items: center; justify-content: space-between; padding: 4.8rem 4.8rem 3.2rem; background: white; }
.popup-title h3 { font-size: 3.2rem; font-weight: 700; }
.popup-title .popup-close { position: relative; padding-right: 2.8rem; font-size: 2rem; }
.popup-title .popup-close::before { content: ''; position: absolute; right:0; top:50%; transform: translateY(-50%); display: block; width: 2rem; height: 2rem; background: url('/resources/img/common/popup_close.svg') no-repeat center/contain; }

.popup-form .popup-content { height: calc(100% - 11.2rem); padding: 0 4.8rem 4.8rem; overflow-y: auto; }

.popup-form .frm-tit { margin-bottom: 1.2rem; font-size: 2rem; font-weight: 700; }
.popup-form .basic-form { display: grid; grid-template-columns: repeat(2, 1fr); gap:4.2rem 4.8rem; }
.popup-form .basic-form .frm-grid-2 { grid-column: 1/3; }

.radio-box { display: inline-block; margin-right:4rem; }
.radio-box input { display: none; }
.radio-box input + label { position: relative; padding-left: 2.8rem; font-size: 1.8rem; line-height: 4.4rem; }
.radio-box input + label::before { content: ''; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 2rem; border:1px solid var(--lite-gray); }
.radio-box input:checked + label::before { content: ''; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 2rem; border:5px solid var(--point-color); }

.check-box { display: inline-block; margin-right:4rem; }
.check-box input { display: none; }
.check-box input + label { position: relative; padding-left: 2.8rem; font-size: 1.8rem; line-height: 4.4rem; }
.check-box input + label::before { content: ''; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border-radius: 4px; border:1px solid var(--lite-gray); }
.check-box input:checked + label::before { content: ''; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; background: var(--point-color) url('/resources/img/common/check_on.svg') no-repeat center/1.6rem; border-color:var(--point-color); }

.frm-capcha { display: flex; align-items: center; }
.frm-capcha .capt-img-box { display: flex; align-items: center; width: 14rem; aspect-ratio: 15/5; border:1px solid var(--lite-gray); border-right:none; }
.frm-capcha input { width: 14.4rem; height:4.8rem; border: 1px solid var(--lite-gray); }
.frm-capcha .refresh-captcha { display: inline-block; width: 4.4rem; padding-left: 8px; text-indent: -999px; overflow: hidden; background: white url('/resources/img/common/refresh.svg') no-repeat center/2.8rem; border:none; cursor: pointer; }

.frm-btn-wrap { margin-top: 4.8rem; }
.frm-btn-wrap button { display: flex; align-items: center; justify-content: center; width: 40rem; height: 6.4rem; margin:0 auto; border-radius: 1.2rem; font-size: 2rem; font-weight: 700; }
.frm-btn-wrap button.write_btn { background: var(--main-black); color:white; }
.frm-btn-wrap button.end_btn { background:#ddd; color:#777; border:1px solid #eee; cursor: default; transition:.3s ease; }



@media screen and (max-width:500px){
  .frm-capcha .capt-img-box { width: 128px; height: 4.8rem; }
  #captcha { width: calc(100% - 160px); }
}
@media screen and (max-width:768px){
  .popup-form input { height: 5rem; }
}

@media screen and (max-width:500px){
  .popup-form input { height: 4.8rem; }

  .popup-form .basic-form { grid-template-columns: repeat(1, 1fr); }
  .popup-form .basic-form .frm-grid-2 { grid-column: auto; }

  .frm-btn-wrap button { width: 100%; }
}


/* [필수] 인덱스 팝업 */
.divpop { position: fixed; background: #fff; border: 1px solid #eee; z-index: 9999; }
.divpop .close_box { padding: 5px; color: #000; border-top: 1px solid #eee; }
.divpop .close_box label { font-size: 12px; }
.divpop .close_box .close { float: right; padding-top: 3px; cursor: pointer; font-size: 14px; color: #999; }
@media screen and (max-width: 1200px){ 
    .divpop { left: 0px !important;} 
}
@media screen and (max-width: 768px){ 
    .divpop { width: 100% !important; height: auto !important; top: 0px !important; left: 0px !important; } 
}