* {margin: 0;padding: 0;box-sizing: border-box;word-wrap: auto-phrase;}
html, body { width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif; line-height: 1.3; color: #000; overflow-x: hidden; letter-spacing: -0.04em;scroll-behavior: smooth;}
section {position: relative;padding: 50px 5%;text-align: center;margin-top: -1px;}
h2 { font-size: 2.5em; margin-bottom: 40px; color: #000; }
h3 { font-size: 1.5em; margin-bottom: 15px; color: #000; }
p {font-size: 1.1em;margin-bottom: 20px;line-height: 1.5;word-break: auto-phrase;letter-spacing: -0.045em;}
main {width: 100%;padding: 20px 0 0;}
main.popup {flex-grow:1; overflow-y:auto;padding:0;}

.cont_body {width: 980px;}

.btn {display: inline-block;background-color: #FFC107;border: 0;font-size: 15px;font-weight: 400;color: #000;padding: 10px 20px;border-radius: 0;text-decoration: none;font-weight: bold;transition: background-color 0.3s ease;cursor: pointer;}
.btn:hover { background-color: #E0A800; }
.btn-sm {display: inline-block;background-color: #FFC107;color: #000;padding: 10px 20px;border-radius: 0;text-decoration: none;font-weight: bold;transition: background-color 0.3s ease;}
.btn-sm:hover { background-color: #E0A800; }
.full-bt {padding: 15px; 20px;}
.margin-top2 {margin-top: 10px;}

.color1 {color: #FFC107}

/* visual  */
.visual {width: 100%;height: 40vh;max-height: 600px;background-image: url('/resources/img/campaian/carpentry/header_background.jpg');background-size: cover;background-position: center;display: flex;align-items: end;justify-content: center;position: relative;color: #FFFFFF;text-align: center;}
.visual-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.1);}
.visual-content {position: relative;padding-bottom: 40px;z-index: 1;}
.visual.index .visual-content p {max-width: 94vw; margin:auto;}
.carpentry-logo {max-width: 30vw;margin-bottom: 20px;}
.visual-content h1 { font-size: 3em; font-weight: 900; margin-bottom: 30px; line-height:1.2; }

/* menu */
.main-nav {background-color: #000;width: 100%;padding: 20px 0;text-align: center;}
.main-nav ul {list-style: none;display: flex;justify-content: center;gap: 80px;}
.main-nav ul li a,
.main-nav ul li button{color: #FFFFFF;text-decoration: none;font-size: 1.1em;font-weight: 500;padding: 5px 10px;transition: color 0.3s ease;background: transparent;border: none;cursor: pointer;}
.main-nav ul li a.on,
.main-nav ul li a:hover,
.main-nav ul li button.on,
.main-nav ul li button:hover { color: #FFC107; }
.main-nav.main a {cursor: pointer;}
.main-nav.main .pc {display: flex !important;}
.main-nav.main .m {display: none !important;}

/* intro */
.intro-section {background-color: #ffffff;padding: 80px 5% 25px;}
.intro-section p { font-size: 3em; font-weight: 700; color: #000; line-height:1.4;}

/* video */
.video { padding: 0 5% 100px;}
.video:before {position:absolute;z-index: -1;width:100%;height: 58%;bottom:0;left:0;background:#000;content:"";display:block;}
.video-box {position: relative;width: 100%;max-width: 1300px;padding-top: 731px;overflow: hidden;background-color: #CCCCCC;margin: 0 auto;display: flex;align-items: center;justify-content: center;font-size: 1.5em;color: #666666;}
.video-box iframe { position:absolute; top:0; left: 0; width:100%; height:100%; }

/* tools1 */
.tools1 {background-color: #000; }
.tools1 h2 { color: #FFFFFF; }
.product-categories {max-width: 1300px;display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;margin: 0 auto;}
.category-item {background-color: #FFFFFF;padding: 0 0 20px 0;border-radius: 0;width: calc(25% - 22.5px);min-width: 250px;text-align: center;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);transition: 0.5s;overflow: hidden;}
.category-item img {width: 100%; height: 180px;object-fit: cover;border-radius: 0;margin-bottom: 0;transition: 0.5s;font-size: 0;}
.category-item:hover img { transform: scale(1.05); transition: 0.5s}
.category-item div {width: 100%; height: 178px; overflow: hidden;}
.category-item h3 {font-size: 1.3em;margin-bottom: 10px;padding: 20px 20px 0;color: #000;}
.category-item p {font-size: 0.95em;color: #000;margin-bottom: 20px;padding: 0 20px;}

/* tools2 */
.tools2 {/* background-color: #FFFFFF; */}
.tools2:before {position:absolute;z-index: -1;width:100%;height: 54%;top: 0;left:0;background: #000;content:"";display:block;}
.tools2 h2 { color: #FFFFFF; }
.solutions-container {max-width: 1300px;margin: 0 auto;display: flex;flex-direction: column;gap: 0;}
.solution-item {display: flex;align-items: flex-start;background-color: #f4f4f4;padding: 0;/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */}
.solution-item.image-left .solution-image {flex: 1;margin-right: 0;overflow: hidden;}
.solution-item.image-left .solution-text { flex: 1; text-align: left; }
.solution-item.text-left .solution-image {flex: 1;margin-left: 0;overflow: hidden;}
.solution-item.text-left .solution-text { flex: 1; text-align: left; }
.solution-item .solution-text div {padding: 70px;}
.solution-image {min-width: 45%;max-width: 50%;}
.solution-image img { width: 100%; height: auto; display: block; border-radius: 0; }
.solution-text {padding: 0;}
.solution-text h3 { font-size: 1.8em; margin-bottom: 10px; color: #000; }
.solution-text p {font-size: 1.1em;margin-bottom: 20px;color: #000;line-height: 1.5;}

/* tools3 -목공 작업 솔루션 */
.tools3 {padding: 80px 0 0 0;display: flex;justify-content: center;align-items: center;}
.product-showcase {display: flex;width: 100%;overflow: hidden;gap: 5px;}
.showcase-item {position: relative;flex: 1;height: 580px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.showcase-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease; border-radius: 0; }
.showcase-item:hover img { transform: scale(1.05);  transition: 1s}
.overlay-text {position: absolute;bottom: 50px;left: 0;color: #FFFFFF;width: 100%;padding: 10px 15px;border-radius: 0;}
.overlay-text h3 {color: #FFFFFF;margin: 16px auto;font-size: 2.2em;}
.solution-item  {overflow: hidden;}
.solution-item:hover img { transform: scale(1.05); transition: 1s}
.solution-item img {transition: 0.5s;}

@media (max-width: 1400px) {
    .video-box {padding-top: 56.3%;}
}
@media (max-width: 1280px) {
    .solution-text .pc {display:none;}
}
@media (max-width: 1240px) {
    .product-categories {gap: 2vw;}
    .category-item {width: calc(50% - 20px);}
}

@media (max-width: 1024px) {
    .visual {width: 100%;max-height: 600px; height:30vw; background: url('/resources/img/campaian/carpentry/header_background.jpg') no-repeat 50%;}
    .visual.index {min-height: 400px;height:50vw;}
    .visual-content h1 { font-size: 2.5em; }
    .intro-section p {font-size: 2.3em;}
    .main-nav ul { gap: 20px; }
    .solutions-grid { grid-template-columns: 1fr; }
    .showcase-item { height: 350px; }
    .solutions-container {gap: 3vw;width: 85vw;}
    .tools2 {background: #fff; padding-top: 12vw;}
    .tools2:before {display: none;}
    .tools2 h2 {color: #000;}
    .solution-item .solution-text div {padding: 5vw;}
    .solution-item {flex-direction: column;text-align: center;}.solution-item.image-left .solution-image,
    .solution-item.text-left .solution-image {margin-right: 0;margin-left: 0;/* margin-bottom: 20px; */width: 100%;max-width: 100%;}
    .solution-text { text-align: center; padding: 0; }
    .solution-item.text-left {flex-direction: column-reverse;}
}

@media (max-width: 768px) {
    .visual-content h1 { font-size: 2em; }
    .visual.index .visual-content p {font-size: 0.9em;}
    section { padding: 30px 3%; }
    h2 { font-size: 5vw; }
    h3, .solution-text h3 {font-size: 5vw;}
    p  {font-size:  0.95em;margin-bottom: 5px;}
    .solution-text p,
    .overlay-text p {font-size:  0.95em;margin-bottom: 15px;}
    br.pc {display: hidden;}
    .main-nav ul {/* flex-direction: column; */gap: 10px;}
    .intro-section {padding: 8vw 5vw 5vw;}
    .intro-section p {font-size: 5vw;}
    .video {padding: 0 5vw 10vw;}
    .video-box {/* width: 95%; *//* height: 300px; */}
    .product-categories { flex-direction: column; align-items: center; }
    .category-item div {height: auto;}
    .category-item { width: 90%; max-width: 400px; }
    .product-showcase { flex-direction: column; }
    .showcase-item { width: 100%; height: 300px; flex: none; }
    .showcase-item.large-image, .showcase-item.smaller-image { flex: none; width: 100%; }
    .overlay-text {bottom: 10px;left: 0;padding: 5vw;}
    .overlay-text h3 { font-size: 1.2em; }


    html,body {scroll-behavior: auto; }
    
    .main-nav.main .pc {display: none !important;}
    .main-nav.main .m {display: flex !important;}
    .main-nav.main {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;padding: 12px 0;}

}

@media (max-width: 480px) {
    .visual-content h1 { font-size: 1.5em; }
    .main-nav ul li a {font-size: 0.95em;padding: 5px;}
    .intro-section p {font-size: 1.1em;}
    .video-box { height: 200px; }
    .category-item { padding: 15px; }
    .category-item img { height: 150px; }
}


/* modal */
.modal-backdrop {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #00000066;display: flex;justify-content: center;align-items: center;z-index: 1000;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;z-index: 9999;}
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal-content {background-color: white;padding: 0px;border-radius: 10px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);max-w;max-width: 1160px;: 90%;width: 94%;max-height: 90%;/* overflow: hidden; *//* overflow-y: scroll; */text-align: center;position: relative;transform: translateY(-20px);transition: transform 0.3s ease;border: 10px solid #fff;flex-direction: column;display: flex;}
.modal-backdrop.show .modal-content {transform: translateY(0);}
.modal-content .close_top {position: absolute; top: 0; display: flex;width:100%;justify-content: right;padding:20px;}
.close-modal-btn {width: 50px;height: 50px;background:#FFC107;display:flex;justify-content:center;align-items:center;z-index: 99;border: 0;padding: 10px;border-radius: 50%;z-index:100; cursor: pointer;}
.close-modal-btn.txt {position:static; width: 120px;margin:auto; border-radius:2px; font-size:16px; font-weight:500;}
.close-modal-btn img {width: 80%;}
.close-modal-btn:hover {background: #e3ad0b}

@media (max-width: 600px) {
    .close-modal-btn {width: 40px;height: 40px;}
    .button-container { flex-direction: column; gap: 10px; }
    .open-modal-btn { width: 80%; padding: 10px 20px; }
    .modal-content {padding: 0;width: 95%;}
    .modal-content h2 { font-size: 1.5em; }
    .modal-content p { font-size: 1em; }
}

/* tools page common */
.visual.tools_page .visual-overlay {background-color: rgba(0, 0, 0, 0);}
.visual .carpentry_logo {position: absolute;bottom: -1px;margin: 0px auto;margin-bottom: 0;padding: 50px 0 0;width:100%;max-width:1300px;background:#fff;}
.visual .carpentry_logo img {margin: 0;}
.framing-tools-section {padding: 0px 5% 50px;text-align: center;}
.framing-tools-section h2 {color: #000;font-size: 3em;font-weight: 900;letter-spacing: -0.05em;margin-bottom: 15px;margin-top: 20px;}
.framing-tools-section .section-description {font-size: 1.1em;color: #000;margin-bottom: 40px;}
.framing-tools-container {display: flex;justify-content: center;gap: 15px;max-width: 1300px;margin: 0 auto;}
.framing-tool-item {background-color: #eeeeee;padding: 0px 0 50px;border-radius: 0;flex: 1;min-width: 280px;text-align: center;}
.framing-tool-item img {width: 100%;/* height: 200px; */object-fit: cover;border-radius: 0;margin-bottom: 15px;}
.framing-tool-item h3 {font-size: 2.2em;margin: 25px 0 14px;color: #000;}
.framing-tool-item p {color: #000;margin-bottom: 0;}
.framing-tool-item p.v-center {padding-top: 14px;}

@media (max-width: 768px) {
    .visual.tools1_page {height: 50vw;}
    .visual .carpentry_logo  {padding: 10px 0 0;}
    .framing-tools-section {padding:0 0 5vw}
    .framing-tools-section h2 {font-size: 5vw;}
    .framing-tool-item h3 {font-size: 5vw}
    .framing-tools-container {flex-direction: column;align-items: center;}
    .framing-tool-item {width: 100%;max-width: 400px;padding: 0 0 8vw;}
    .framing-tools-section .section-description {font-size: 0.95em;}
    .framing-tool-item p.v-center {padding-top:0;}
}
@media (max-width: 600px) {
    .framing-tools-section h2 {font-size: 7vw;}
    .framing-tool-item h3 {font-size: 7vw;margin: 2vw 0;}
    .tools3 {padding:10vw 0 0 0;}
}


/*visual common*/
.visual.tools1_page { background-image: url('/resources/img/campaian/carpentry/tools1_page_bg.jpg');}
.visual.tools2_page { background-image: url('/resources/img/campaian/carpentry/tools2_page_bg.jpg');}
.visual.tools3_page { background-image: url('/resources/img/campaian/carpentry/tools3_page_bg.jpg');}
.visual.tools4_page { background-image: url('/resources/img/campaian/carpentry/tools4_page_bg.jpg');}

@media (max-width: 1024px) {
    .visual .carpentry_logo img {max-width: 30vw;}
    .visual.index             {height:70vw; background: url('/resources/img/campaian/carpentry/header_background.jpg') no-repeat 50%;}
    .visual.tools1_page {height:70vw;background: url('/resources/img/campaian/carpentry/tools1_page_bg.jpg') no-repeat 50% 0;background-size: 150%;}
    .visual.tools2_page {height:70vw;background: url('/resources/img/campaian/carpentry/tools2_page_bg.jpg') no-repeat 50% 0;background-size: 150%;}
    .visual.tools3_page {height:70vw;background: url('/resources/img/campaian/carpentry/tools3_page_bg.jpg') no-repeat 50% 0;background-size: 150%;}
    .visual.tools4_page {height:70vw;background: url('/resources/img/campaian/carpentry/tools4_page_bg.jpg') no-repeat 50% 0;background-size: 150%;}
}


/*solutions page*/
#sub-wrap {height:auto}
.solution_list view,.solution_list.view {max-width:980px;margin-top: 0;}
.solution_list.view .img {max-width:220px; margin: auto;}
.solution_list h4 {margin:10px;padding-bottom:10px;border-bottom:2px solid #000;margin-top: 60px;}
.solution_item .tab-button {color: #fff;padding: 13px 10px;height: auto;font-size: 18px;font-weight: 500;border-bottom: 3px solid #000;}
.solution_wrap .solution_visual {position: relative; }
.solution_wrap .solution_visual .img {background:#000;}
.solution_wrap .solution_visual .img img { opacity: 0.9}
.solution_wrap .solution_visual .desc {position: absolute;bottom: 0;background: transparent;/* backdrop-filter: blur(2px); */width: 100%;font-size: 0.95em;}
.solution_wrap .solution_visual .desc h3 {color: #fff;}
.center {text-align: center;}
.main-nav.solution_item {padding: 0;max-width: 980px;margin: auto;margin-top: 20px;}
.main-nav.solution_item .tab{}
.tab-button.active {color: #FFC107;border-bottom: 3px solid #FFC107;border-radius: 0;}
.tab-content {display: none;}
.tab-content.active {display: block;max-width: 980px;}
.solution_wrap .solution_list ul {margin:50px 0 100px 0;}

.product-item .tit {font-size:20px; color:555; font-weight:500;}
.product-item .desc {font-size:16px;color: #999;margin-top: 10px;}
.product-item a .img {max-width: 220px;transition:.5s;margin: 0 auto;}
.product-item a:hover .img {transition:.5s; transform: scale(.97);}
.navigation {display:flex;position: absolute;right: 0;bottom: 0;}
.navigation .nav-btn {width:32px;min-width: 32px;padding: 0;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50px;}
.navigation .nav-btn img {width: 8px;}
.item-banner {margin: auto;text-align: center;width: auto;padding: 130px 0 50px;display: flex;justify-content: center;}

/* trades/outdoor hero: 이미지 하단~중간(50%) 그라데이션 dim — 이미지 위·desc 아래(z-index) */
.solution_wrap.outdoor-hero .solution_visual .img {
    position: relative;
    line-height: 0;
    background: #000;
}
.solution_wrap.outdoor-hero .solution_visual .img img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
}
.solution_wrap.outdoor-hero .solution_visual .hero-dim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}
.solution_wrap.outdoor-hero .solution_visual .desc {
    z-index: 2;
}

@media (max-width: 768px) {
.solution_wrap .solution_visual .desc {position: static; font-size:1em !important; background:#000}
#contentWrap .solution_wrap .solution_visual .desc {font-size: 0.9em !important;padding: 5vw;line-height: 1.6;}
#contentWrap .solution_wrap .solution_visual h3 {display:none;}
.solution_item .tab-button {min-width:auto;}

.product-item .tit {font-size:16px; }
.product-item .desc {font-size: 13px;}
.product-item .img {max-width: 200px;}

.product-item .img {max-width: 30vw;}
.modal-content .close_top {padding:10px;}
.item-banner {padding: 0;}
.m {display:none;}
}