/* keyboard accessibility */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 10px 14px;
    color: #fff;
    background: #1672c9;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-180%);
    transition: transform .2s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; color:inherit; }
img { vertical-align: top; }

/* common */
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1200px; margin:0 auto; position: relative; font:16px/1.6 stm;  }
.wrap * { word-break: keep-all; }
.wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; }
.blind { position:absolute; width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; }
.fl:after { display:none; }
.dn { display:none !important; }
.shd { box-shadow: 4px 4px 8px rgba(0,0,0,0.2); border-radius: 16px; overflow: hidden; }
.cp { color:#1693f4; }
.mtitle { font:36px/1.4 steb; }
h1.mtitle { margin-block: 1em; }
.stitle { font:24px/1.4 steb; }
.more { border:2px solid #1693f4; text-align: center; width: 180px; text-transform: uppercase; font:12px/40px steb; display: inline-block; border-radius: 50px; transition:0.3s; }
.more:hover { background: #1693f4; }


/* header & footer */
#w_header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; transition:0.3s; height: 80px; overflow: hidden; color:#fff; }
#w_header .wrap { width: 1400px; }
#w_header.fix, #w_header.down { background:#131313; border-bottom:1px solid #ddd; }
#w_header.down { height: 320px; }

#w_header h1, #w_header .site-logo { position: absolute; left: 0; top:23px; z-index:1; }
#w_header .site-logo { margin:0; }

#w_header #w_gnb { align-items: flex-start; text-align: center; padding-top: 26px; }
#w_header #w_gnb > li:first-child { margin-left: 40px; }
#w_header #w_gnb > li > a { padding:0 40px; font-size:18px; font-family: stb; display: inline-block; }
#w_header #w_gnb > li > a:after { content:""; border-top:2px solid #1693f4; width:100%; display: block; margin-top:22px; opacity: 0; }
#w_header #w_gnb > li.select > a:after { opacity: 1; }
#w_header #w_gnb ul { padding-top: 20px; }
#w_header #w_gnb ul li { line-height: 40px; }

#w_header .lang { position:absolute; right:calc((1400px - 100vw) / 4 + 12px); top:21px; z-index:1; width:184px; height:32px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.9); border-radius:16px; }
#w_header .lang:before { content:"LANGUAGE"; position:absolute; left:0; top:0; width:112px; height:30px; color:#fff; font:13px/30px stm; letter-spacing:0; text-align:center; }
#w_header .lang:after { content:"|"; position:absolute; left:111px; top:0; height:30px; color:#fff; font:15px/29px stm; }
#w_header .lang select { position:absolute; right:0; top:0; width:72px; height:30px; border:0; border-radius:0; appearance:none; -webkit-appearance:none; background:transparent url("data:image/svg+xml,%3Csvg width=%2210%22 height=%226%22 viewBox=%220 0 10 6%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M1 1l4 4 4-4%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.5%22/%3E%3C/svg%3E") no-repeat right 10px center; color:#fff; outline:none; box-sizing:border-box; padding:0 20px 1px 0; font:13px/30px stm; text-align:center; text-align-last:center; cursor:pointer; }#w_header .lang select option { background:#176fc8; color:#fff; }

#w_footer { background: #000; color:#999; padding:60px 0; }
#w_footer .wrap { width: 1400px; }
#w_footer img { position: absolute; left: 0; top: 0; }
#w_footer address { padding-left: 240px; font-style: normal; font-size:14px; }
#w_footer .footer-policy { display:inline-block; margin-left:12px; }
#w_footer .footer-policy:before { content:"|"; margin-right:12px; color:#666; }
#w_footer .footer-policy a { color:#bbb; text-decoration:none; }
#w_footer .footer-policy a:hover { color:#fff; text-decoration:underline; }
#w_footer .w_adm { position:absolute; right:0; bottom:0; color:#666; }
#w_footer .w_adm:hover { color:#fff; }

/* index */
#main { display:flow-root; background:url(../image/2367a9cae043-bg_main1.png) no-repeat center/cover; background-image:image-set(url(../image/2367a9cae043-bg_main1.webp) type("image/webp"), url(../image/2367a9cae043-bg_main1.png) type("image/png")); color:#fff; padding-bottom: 80px; }
#main h1, #main h2 { padding-top: 280px; font:46px/1.4 stb; }
#main .hero-en-title { font-size:42px; }
#main h1 { margin-block: .83em; }
#main p { font:20px/1.6 str; margin-top: 40px; }
#main .more { margin-top: 200px; }
#main .bnr { justify-content: space-between; margin-top: 200px; }
#main .bnr a { width: 380px; height: 380px; padding:20px; box-sizing: border-box; padding-top: 190px; box-sizing: border-box; }
#main .bnr a:nth-child(1) { background:#1d1d1d url(../image/73c2f9303ef7-main1.png) no-repeat 20px 20px;  }
#main .bnr a:nth-child(2) { background:#1d1d1d url(../image/67835493b21e-main2.png) no-repeat 20px 20px;  }
#main .bnr a:nth-child(3) { background:#1d1d1d url(../image/12ef5169b7e9-main3.png) no-repeat 20px 20px;  }
#main .bnr a dt { font:20px steb; }
#main .bnr a dt:after { content:""; width: 30px; border-top:2px solid #1693f4; display: block; margin:16px 0 20px; }
#main .bnr a dd { line-height:1.8; }

@media (min-width:801px) {
    #main .bnr a {
        transition:transform .48s cubic-bezier(.16, 1, .3, 1);
    }
    #main .bnr a dt:after {
        transition:width .48s cubic-bezier(.16, 1, .3, 1);
    }
    #main .bnr a:focus-visible {
        outline:2px solid #1693f4;
        outline-offset:4px;
        transform:translate3d(0, -2px, 0);
    }
    #main .bnr a:focus-visible dt:after {
        width:48px;
    }
}

@media (min-width:801px) and (hover:hover) and (pointer:fine) {
    #main .bnr a:hover {
        transform:translate3d(0, -2px, 0);
    }
    #main .bnr a:hover dt:after {
        width:48px;
    }
}

@media (min-width:801px) and (prefers-reduced-motion:reduce) {
    #main .bnr a {
        transition:none;
    }
    #main .bnr a dt:after {
        transition:width .48s cubic-bezier(.16, 1, .3, 1);
    }
}

#lineup { background: #131313; padding:100px 0; color:#fff; }
#lineup .fl { justify-content: space-between; align-items: flex-start;  }
#lineup div p { margin-top: 20px; }
#lineup div .more { margin-top: 60px; }
#lineup ul { width: 790px; }
#lineup ul li { width: 380px; margin:0 30px 30px 0; height: 340px; float:left; position: relative;  }
#lineup ul li:nth-child(2n) { margin-right: 0; }
#lineup ul li a { display: block; height: 340px; position: relative; padding: 190px 20px 0; box-sizing: border-box; background: #ccc; transition:0.3s; }
#lineup ul li a:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(1); transition:0.3s; }
#lineup ul li:nth-child(1) a:before { background:url(../image/11f2afe2a35c-line1.png) no-repeat center/cover; }
#lineup ul li:nth-child(2) a:before { background:url(../image/d3f64b4032a6-line2.png) no-repeat center/cover; }
#lineup ul li:nth-child(3) a:before { background:url(../image/fc9dc59d0ff6-line3.png) no-repeat center/cover; }
#lineup ul li:nth-child(4) a:before { background:url(../image/11f2afe2a35c-line1.png) no-repeat center/cover; }
#lineup ul li a:after { content:""; background: #1d1d1d; opacity: 0.8; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition:0.3s; }
#lineup ul li dl { position: relative; z-index:1; }
#lineup ul li dl dt { font:20px steb; }
#lineup ul li dl dt:after { content:""; width: 30px; border-top:2px solid #1693f4; display: block; margin:20px 0; transition:0.3s; }
#lineup ul li:hover a { background: #1693f4; }
#lineup ul li:hover a:before { transform: scale(1.1); }
#lineup ul li:hover a:after { opacity: 0; }
#lineup ul li:hover dl dt:after { border-color:#fff; }


#pf { background: #131313; padding:80px 0; color:#fff; }
#pf p { margin-top: 10px; }
#pf ul { margin-top: 60px; justify-content: space-between; }
#pf ul li figure { border-radius: 30px; }
#pf ul li dl { margin-top: 40px; }
#pf ul li dl dt { font:20px steb; }
#pf ul li dl dt:after { content:""; width: 30px; border-top:2px solid #1693f4; display: block; margin:20px 0; }
#pf .more { margin-top: 60px; }


#contact { background: #131313; padding:80px 0 160px; color:#fff; }
#contact ul.fl { justify-content: space-between; }
#contact ul.fl > li { width: 380px; height:340px; box-sizing: border-box; padding:30px 20px; background: #1d1d1d; position: relative; }
#contact p { margin-top: 10px; }
#contact .ct { position: absolute; bottom: 30px; left: 20px; padding-left: 100px; }
#contact .ct span { position: absolute; left: 0; font-family: stb; }
#contact .ct .contact-address { line-height: 1.4; }
#contact .more { position: absolute; left: 20px; bottom: 30px; }


/* sub layout */
.sv { height: 440px; padding-top: 80px; color:#fff; font:60px stb; }

#sub1 { background:url(../image/bb25ab07da5e-bg_sub1.png) no-repeat center top fixed; background-image:image-set(url(../image/bb25ab07da5e-bg_sub1.webp) type("image/webp"), url(../image/bb25ab07da5e-bg_sub1.png) type("image/png")); }
#sub2 { background:url(../image/f2c4fe661ea1-bg_sub2.png) no-repeat center top fixed; }
#sub3 { background:url(../image/4f27952f6cff-bg_sub3.png) no-repeat center top fixed; background-image:image-set(url(../image/4f27952f6cff-bg_sub3.webp) type("image/webp"), url(../image/4f27952f6cff-bg_sub3.png) type("image/png")); }
#sub4 { background:url(../image/77393357409a-bg_sub4.png) no-repeat center top fixed; }
#sub5 { background:url(../image/b97f489af5a6-bg_sub5.png) no-repeat center top fixed; background-image:image-set(url(../image/b97f489af5a6-bg_sub5.webp) type("image/webp"), url(../image/b97f489af5a6-bg_sub5.png) type("image/png")); }

.pad { padding:100px 0 200px; }
.title { position: relative; margin-bottom: 80px; }
.path { position: absolute; right:0; bottom:4px; font-size:14px; color:#666; }
.path em { font-style: normal; }
.left { width:380px; float:left; }
.right { width:780px; float:right; }

/* sub1_1 */
#sub1_1 .cont1 img { width: 100%; }
#sub1_1 .cont2 { margin-top: 80px; }
#sub1_1 .cont2 .left { font:24px/1.4 stb; }
#sub1_1 .cont2 .right strong { margin-left: 30px; font-family: steb; }

/* sub1_2 */
#sub1_2 .history li { padding-left: 420px; position: relative; margin-bottom: 30px; }
#sub1_2 .history li strong { font-family: stb; position: absolute; left:340px; }
#sub1_2 .history li p { cursor:pointer; margin-bottom: 10px; }
#sub1_2 .history li p i { font-weight: bold; }
#sub1_2 .history li figure { display: none; }
#sub1_2 .history li figure img { width: 100%; }

/* sub1_3 */
#sub1_3 .cont1 ul { justify-content: space-between; flex-wrap: wrap; align-items: flex-start; text-align: center; } 
#sub1_3 .cont1 ul li { margin-bottom: 60px; cursor: pointer; width: 220px; } 
#sub1_3 .cont1 ul li img { width: 100%; }
#sub1_3 .cont1 ul li p { margin-top: 10px; }

/* sub1_4 */
#sub1_4 .contact li { position: relative; margin-bottom: 30px; }
#sub1_4 .contact li span {color:#1693f4; font-family: steb;}
#sub1_4 .con2 {display: block;}


.box { position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 100; display: none;  }
.box.on { display:flex; }
.box .area { max-height:70vh; max-width:60vw; }
.box .area img { width:100%; }

/* sub2_1 */
.prd nav { float:left; width: 270px; border-top:2px solid #1693f4; }
.prd nav ul li { border-bottom:1px solid #ddd; }
.prd nav ul li a { display:flex; justify-content: space-between; align-items: center; height: 50px; font:20px stsb; }
.prd nav ul li a i { display: none; }
.prd nav ul li span{font:16px stb;}
.prd nav ul li.select a { font-family: steb; }
.prd nav ul li.select a i { display: block; }

.prd > div { float:right; width: 870px; border-top:2px solid #1693f4; padding-top: 14px; }
.prd .stitle { padding-top: 10px; padding-bottom: 30px; }
.prd .cont1 ~ div { border-top:1px solid #ddd; margin-top: 60px; padding-top: 20px;  }
.prd .cl h4 { float:left; width:200px; font:16px steb; }
.prd .cl div { float:right; width: 670px; }

.prd .cont1 img { width: 100%; margin-bottom: 20px;}

.prd .cont2 ul li { position: relative; padding-left: 16px; margin-bottom: 6px; }
.prd .cont2 ul li:before { content:"·"; position: absolute; left: 0;  }

.prd .cont3 img { width: 100%; margin-bottom: 20px; }
.prd .cont3 .ultra-spec-drawing-frame { margin: 0 0 20px; }
.prd .cont3 .ultra-spec-drawing-frame img { display: block; margin: 0; }
.prd .cont3 table { width: 100%; border-collapse: collapse; border-top:1px solid #1693f4; }
.prd .cont3 table th, .prd .cont3 table td { border-bottom:1px solid #ddd; text-align: center; padding:6px 0; font-size:14px; }
.prd .cont3 table th:first-child { width: 25%;}
.prd .cont3 p.fl { justify-content: space-between; margin-top: 10px; font-size:14px;  }

.prd .cont4 ul { justify-content: space-between; flex-wrap: wrap;  }
.prd .cont4 ul li { width: 150px; }
.prd .cont4 ul li:nth-child(5){width:100%; margin-top: 20px;}
.prd .cont4 ul li img { width: 100%; }
.prd .cont4 ul li p { margin-top: 10px; text-align: center; }

.prd .cont5 ul {display: block;}
.prd .cont5 ul li{ width: 100%; }
.prd .cont5 ul li img { width: 100%; }
.prd .cont5 ul li p { margin: 10px 0 30px; }

.prd .cont6 ul { justify-content: space-between; flex-wrap: wrap;  }
.prd .cont6 ul li { width: 330px; }
.prd .cont6 ul li:nth-child(3){width:100%; margin-top: 20px;}
.prd .cont6 ul li img { width: 100%; }
.prd .cont6 ul li p { margin-top: 10px; text-align: center; }


/* sub3_1 */
#bbs { font-size:12px; }
#sub3_1 #bo_gall .gall_li { width:370px; padding:0; }
.pg_current { background: #1393f4; border-color:#1693f4; }

/* sub4_1 */
#sub4_1 #bo_gall .gall_li { width:200px; padding:0; }
#sub4_1 #bo_gall .gall_text_href a { text-align: center; }
/*#sub4_1 .cont1 ul { justify-content: space-between; flex-wrap: wrap; align-items: flex-start; text-align: center; } 
#sub4_1 .cont1 ul li { margin-bottom: 60px; cursor: pointer; width: 220px; } 
#sub4_1 .cont1 ul li img { width: 100%; }
#sub4_1 .cont1 ul li p { margin-top: 10px; }*/

/* sub5_1 */
#sub5_1 .tbl_wrap table { border-top:2px solid #1693f4; }


/* sub5_2 */
#sub5_2 .left { border-top:2px solid #1693f4; width: 270px; padding-top: 20px; font:20px/1.4 stb; }
#sub5_2 .left .eyebrow { display:block; color:#1693f4; font:20px/1.4 stb; letter-spacing:0; }
#sub5_2 .left .message { display:block; margin-top:22px; color:#111; font:22px/1.45 stb; letter-spacing:-.02em; }
#sub5_2 .left .message:only-child { margin-top:0; }
#sub5_2 .right { border-top:2px solid #1693f4; width: 870px; padding-top: 20px; }
#sub5_2 .right ul li { width: 415px; margin:0 0 20px 40px; float:left; }
#sub5_2 .right ul li:nth-child(2n+1) { margin-left: 0; }
#sub5_2 .right ul li:last-child { width: 100%; }
#sub5_2 .right ul li input { border:none; background: #eee; padding:0 20px; height: 50px; width: 100%; font:14px/1.6 stm; }
#sub5_2 .right ul li textarea { border:none; background: #eee; padding:20px; width: 100%; font:14px/1.6 stm; } 
#sub5_2 .right .privacy-agree { margin:2px 0 24px; color:#555; font:13px/1.6 stm; }
#sub5_2 .right .privacy-agree input { width:auto; height:auto; margin:0 7px 0 0; vertical-align:middle; }
#sub5_2 .right .privacy-agree label { font:inherit; vertical-align:middle; }
#sub5_2 .right .privacy-agree a { margin-left:8px; color:#167bd5; font:inherit; text-decoration:underline; vertical-align:middle; }
#sub5_2 .right .privacy-agree__summary { display:block; margin:4px 0 0 24px; color:#777; font:12px/1.55 stm; word-break:keep-all; }
#sub5_2 .right .more { background: none; }
#sub5_2 .right .more:hover { background: #1693f4; color:#fff; }

/* local product banner: supplied steel rebar coupler image */
#sub2 {
    background-color: #fff;
    background-image: linear-gradient(rgba(12, 22, 31, 0.34), rgba(12, 22, 31, 0.34)), linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 99%, #fff 100%), image-set(url(../image/coupler-product-banner.webp) type("image/webp"), url(../image/coupler-product-banner.jpg) type("image/jpeg"));
    background-position: center top, center top, center -116px;
    background-size: min(1920px, 100vw) 440px, 1200px 440px, 1200px auto;
    background-repeat: no-repeat;
    background-attachment: scroll, fixed, fixed;
}

/* local header menu: equal spacing between the five top-level items */
#w_header #w_gnb > li {
    flex: 0 0 170px;
    min-width: 0;
}
#w_header #w_gnb > li > a {
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    padding: 0;
    text-align: center;
}

@media (max-width: 768px) {
    #sub2 {
        background-position: center top, center top, center center !important;
    }
}

/* local certificate page banner: supplied material-testing laboratory image */
#sub4 {
    background-image: image-set(url(../image/certificate-banner.webp) type("image/webp"), url(../image/certificate-banner.png) type("image/png"));
    background-position: center -210px;
    background-size: 1920px auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
@media (max-width: 768px) {
    #sub4 {
        background-position: center top;
        background-size: 100% auto;
        background-attachment: scroll;
    }
}

/* local product pages: wide content layout */
.prd .cl h4,
.prd .assembly-video h4,
.prd .diagonal-ultra h4 {
    color: #0072bc;
}
.prd .cont1 img,
.prd .cont4 ul li img,
.prd .cont6 ul li img,
.prd .assembly-size-photo img,
.prd .cont5 ul li img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 1px solid #cfd6db;
    background: #fff;
}
.prd .cont5 ul li img {
    width: 100%;
    height: auto;
}
.prd .cont5 ul li img.assembly-step-two {
    border: 0;
}
.prd .cont4 ul li {
    border: 0;
    background: transparent;
}
.prd .cont3 .drag {
    width: 100%;
    margin-left: 0;
}
.prd .cont3 .specification-notice {
    margin: 10px 0 0;
    font-size: 14px;
}
.prd .cont3 .terminator-spec-components {
    margin: 0 0 70px;
}
.prd .cont3 .terminator-spec-components img {
    display: block;
    width: 100%;
    margin: 0;
    border: 1px solid #cfd6db;
    box-sizing: border-box;
}
.prd .cont3 .terminator-drawing-frame {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 56px;
    padding: 36px 0;
    border: 1px solid #cfd6db;
    background: #fff;
}
.prd .cont3 .terminator-drawing-frame img.terminator-drawing {
    display: block;
    width: 66%;
    margin: 0 auto;
    border: 0;
}
.prd .cont1 img.pc-hero {
    min-height: 350px;
    object-fit: contain;
}
.prd .cont3 .pc-spec-drawing-frame {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 56px;
    padding: 42px 26px;
    border: 1px solid #cfd6db;
    background: #fff;
}
.prd .cont3 .pc-spec-drawing-frame img.pc-spec-drawing {
    display: block;
    width: 80%;
    margin: 0 auto;
    border: 0;
}
.prd .cont6 ul.pc-parts-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.prd .cont6 ul.pc-parts-list li,
.prd .cont6 ul.pc-parts-list li:nth-child(3) {
    width: auto;
    margin: 0;
}
.prd .cont6 ul.pc-parts-list li img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}
.prd .cont6 ul.pc-parts-list li p {
    margin-top: 12px;
}
.prd .cont5 ul.pc-assembly-list li {
    margin: 0;
}
.prd .cont5 ul.pc-assembly-list li img {
    background: #fff;
}
.prd .cont5 ul.pc-assembly-list li p {
    margin: 12px 0 36px;
}
.prd .terminator-size-range {
    margin: 64px 0 0;
}
.prd .terminator-size-card {
    position: relative;
    padding-bottom: 0;
    border: 1px solid #cfd6db;
    background: #fff;
}
.prd .terminator-size-card:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #cfd6db;
}
.prd .terminator-size-card img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    background: #fff;
}
.prd .terminator-size-range figcaption {
    display: block;
    margin: 12px 0 0;
    color: #252b31;
    text-align: center;
}
.prd .terminator-size-labels {
    display: grid;
    position: absolute;
    right: 0;
    top: 74%;
    left: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 84%;
    margin: 0 auto;
    color: #252b31;
    text-align: center;
}
.prd .terminator-size-labels span:nth-child(2),
.prd .terminator-size-labels span:nth-child(3) {
    transform: translateX(-14px);
}
.prd .cont6 ul li {
    text-align: center;
}
.prd .cont6 ul li p {
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
}
.prd .cont1 ~ div,
.prd .assembly-video {
    border-top: 0;
}
.prd .cont4 ul li p {
    margin: 8px 0 0;
}
.prd .assembly-video {
    margin-top: 76px;
    padding-top: 26px;
}
.prd .assembly-video h4 {
    margin: 0 0 24px;
    font: 20px steb;
}
.prd .assembly-video-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #dce1e5;
    box-sizing: border-box;
    background: #000;
}
.prd .assembly-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.prd .assembly-size-photo {
    margin-top: 60px;
}
.prd .assembly-size-photo img {
    height: auto;
}
.prd .assembly-size-photo figcaption {
    margin-top: 12px;
    color: #252b31;
    text-align: center;
}
.prd .diagonal-ultra {
    margin-top: 80px;
    padding-top: 26px;
}
.prd .diagonal-ultra h4 {
    margin: 0 0 24px;
    font: 20px steb;
}
.prd .diagonal-ultra > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
.prd .diagonal-ultra figure {
    margin: 0;
}
.prd .diagonal-ultra figure img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #dce1e5;
    background: #fff;
}
.prd .diagonal-ultra-coupler img {
    object-fit: contain;
}
.prd .diagonal-ultra-knob img {
    object-fit: contain;
}
.prd .diagonal-ultra figcaption {
    margin-top: 12px;
    color: #252b31;
    text-align: center;
}
.prd .cont5 ul li.assembly-step-two-item {
    position: relative;
    margin-bottom: 36px;
}
.prd .cont5 ul li.assembly-step-two-item > p {
    position: absolute;
    top: calc(61% + 10px);
    left: 0;
    z-index: 1;
    margin: 0;
}

.prd .cont1 img.structural-hero {
    height: 350px;
    padding: 18px 44px;
    object-fit: contain;
}
.prd .cont3 .structural-spec-drawing-frame {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 16px;
    padding: 42px 26px;
    border: 1px solid #cfd6db;
    background: #fff;
}
.prd .cont3 .structural-spec-drawing-frame img.structural-spec-drawing {
    display: block;
    width: 80%;
    margin: 0 auto;
    border: 0;
}
.prd .structural-dimension-notes {
    display: grid;
    font-size: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    margin: 18px 0 36px;
}
.prd .structural-dimension-notes > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid #e2e6e9;
}
.prd .structural-dimension-notes > div:first-child {
    border-top: 0;
}
.prd .structural-dimension-notes dt {
    color: #0072bc;
    font-family: steb;
}
.prd .structural-dimension-notes dd {
    margin: 0;
    color: #252b31;
    line-height: 1.45;
}
.prd .cont5 ul.structural-assembly-list li img {
    padding: 32px 58px;
    object-fit: contain;
    background: #fff;
}
.prd .cont6 ul.structural-parts-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.prd .cont6 ul.structural-parts-list li,
.prd .cont6 ul.structural-parts-list li:nth-child(3) {
    width: auto;
    margin: 0;
}
.prd .cont6 ul.structural-parts-list li img {
    height: 230px;
    object-fit: contain;
}
.prd .cont6 ul.structural-parts-list li p {
    margin: 12px 0 0;
    color: #252b31;
    text-align: center;
}
.prd .cont6 ul.structural-parts-list li.structural-part-reduced .structural-part-frame {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 230px;
    margin: 0;
    border: 1px solid #cfd6db;
    background: #fff;
}
.prd .cont6 ul.structural-parts-list li.structural-part-reduced .structural-part-frame img {
    display: block;
    width: 90%;
    height: 90%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
    background: transparent;
}
.prd .cont5 ul.structural-assembly-list li.structural-assembly-step-one p {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.prd .cont5 ul.structural-assembly-list li.structural-assembly-step-one .structural-assembly-step-number {
    flex: 0 0 auto;
}
.prd .cont5 ul.structural-assembly-list li.structural-assembly-step-one .structural-assembly-step-copy {
    min-width: 0;
}
.prd .cont5 ul.structural-assembly-list li.structural-assembly-step-four p {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.prd .cont5 ul.structural-assembly-list li.structural-assembly-step-four .structural-assembly-step-number {
    flex: 0 0 auto;
}
.prd .cont5 ul.structural-assembly-list li.structural-assembly-step-four .structural-assembly-step-copy {
    min-width: 0;
}
@media (max-width: 768px) {
    .prd .cont1 img.structural-hero {
        height: auto;
        padding: 8px 19px;
    }
    .prd .cont5 ul.structural-assembly-list li img {
        padding: 20px 28px;
    }
    .prd .cont6 ul.structural-parts-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .prd .cont6 ul.structural-parts-list li img {
        max-width: 420px;
        height: auto;
        margin: 0 auto;
    }
    .prd .structural-dimension-notes {
        grid-template-columns: minmax(0, 1fr);
    }
    .prd .cont6 ul.structural-parts-list li.structural-part-reduced .structural-part-frame {
        max-width: 420px;
        height: 230px;
        margin: 0 auto;
    }
    .prd .cont3 .structural-spec-drawing-frame {
        padding: 12px;
    }
}
@media (min-width: 769px) {
    .prd .structural-dimension-notes > div:nth-child(-n + 2) {
        border-top: 0;
    }
    .prd nav {
        float: left;
        width: 270px;
        margin: 0;
        border-top: 2px solid #1693f4;
        border-bottom: 0;
    }
    .prd nav ul {
        display: block;
        width: auto;
    }
    .prd nav ul li {
        border-bottom: 1px solid #ddd;
    }
    .prd nav ul li + li {
        border-left: 0;
    }
    .prd nav ul li a {
        justify-content: space-between;
        height: 50px;
        font: 20px stsb;
    }
    .prd nav ul li.select {
        background: transparent;
    }
    .prd nav ul li.select a {
        color: inherit;
        font-family: steb;
    }
    .prd nav ul li.select a i {
        display: block;
    }

    .prd > div {
        float: right;
        width: 870px;
        border-top: 2px solid #1693f4;
        padding-top: 14px;
    }
    .prd .cont1 img {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    .prd .cont1 ~ div {
        margin-top: 60px;
        padding-top: 20px;
    }
    .prd .cl h4 {
        float: none;
        width: auto;
        margin: 0 0 24px;
        font: 20px steb;
    }
    .prd .cl div {
        float: none;
        width: 100%;
    }
    .prd .cont2 ul {
        max-width: none;
    }
    .prd .cont3 img {
        display: block;
        width: 100%;
    }
    .prd .cont3 .terminator-drawing-frame img.terminator-drawing {
        width: 66%;
        margin: 0 auto;
    }
    .prd .cont4 ul {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
    .prd .cont4 ul li {
        width: auto;
        margin: 0;
    }
    .prd .cont4 ul li:nth-child(5) {
        width: auto;
        margin-top: 20px;
    }
    .prd .cont6 ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .prd .cont6 ul li {
        width: auto;
        margin: 0;
    }
    .prd .cont6 ul li:nth-child(3) {
        width: auto;
        margin-top: 20px;
    }
    .prd .cont5 ul li img {
        display: block;
    }
    .prd .cont5 ul li p {
        margin: 10px 0 30px;
    }
    .prd .assembly-video {
        display: flow-root;
        margin-top: 60px;
        padding-top: 20px;
    }
    .prd .assembly-video h4 {
        float: none;
        width: auto;
        margin: 0 0 24px;
        font: 20px steb;
    }
    .prd .assembly-video-frame {
        float: none;
        width: 100%;
    }
    .prd .assembly-size-photo {
        width: 100%;
        margin: 60px 0 0;
    }
    .prd .diagonal-ultra {
        margin-top: 80px;
        padding-top: 20px;
    }
    .prd .diagonal-ultra h4 {
        float: none;
        width: auto;
        margin: 0 0 24px;
        font: 20px steb;
    }
    .prd .diagonal-ultra > div {
        float: none;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}
/* local product pages: wide content layout end */

/* local company pages: original greeting layout, CEO photo and responsive map */
#sub1_1 .ceo-greeting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
    margin-top: 80px;
}
#sub1_1 .ceo-heading {
    margin: 0 0 26px;
    color: #1373c7;
    font: 24px/1.35 stb, "Noto Sans KR", sans-serif;
}
#sub1_1 .cont1 picture,
#sub1_1 .ceo-photo picture,
.prd .diagonal-ultra-knob picture,
.prd .cont6 ul.pc-parts-list picture {
    display: block;
}
#sub1_1 .cont1 img.greeting-construction-banner {
    display: block;
    width: 100%;
    aspect-ratio: 40 / 13;
    object-fit: cover;
    object-position: center bottom;
}
#sub1_1 .ceo-copy p {
    margin: 0 0 22px;
    line-height: 1.6;
    word-break: keep-all;
}
#sub1_1 .ceo-photo {
    margin: 91px 0 0;
}
#sub1_1 .ceo-photo img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto;
    padding: 3px;
    border: 1px solid #d9dde1;
    background: #fff;
}
#sub1_1 .ceo-photo figcaption {
    margin-top: 14px;
    text-align: right;
    font-size: 17px;
    letter-spacing: .08em;
}
#sub1_1 .ceo-photo figcaption strong {
    margin-left: 10px;
    font: 21px steb, "Noto Sans KR", sans-serif;
}
#sub1_4 .google-map {
    display: block;
    width: 100%;
    height: 500px;
    border: 0;
}

@media (max-width: 768px) {
    #sub1_1 .ceo-greeting {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }
    #sub1_1 .ceo-heading {
        margin-bottom: 22px;
        font-size: 20px;
    }
    #sub1_1 .ceo-copy p {
        margin-bottom: 18px;
        line-height: 1.75;
    }
    #sub1_1 .ceo-photo {
        width: min(260px, 72vw);
        margin: 10px auto 0;
    }
    #sub1_4 .google-map {
        height: 360px;
    }
}

/* local CI page: JUNSUNG corporate identity */
#sub1_ci .ci-intro {
    padding: 18px 0 48px;
    color: #0072bc;
    font-family: Montserrat, "Noto Sans KR", sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
}
#sub1_ci .ci-intro p,
#sub1_ci .ci-intro strong {
    display: block;
    margin: 0;
}
#sub1_ci .ci-block {
    padding: 42px 0 54px;
    border-top: 1px solid #e5eaed;
}
#sub1_ci .ci-block h4 {
    margin: 0 0 28px;
    color: #0072bc;
    font-family: Montserrat, "Noto Sans KR", sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .02em;
}
#sub1_ci .ci-symbol-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
#sub1_ci figure {
    margin: 0;
}
#sub1_ci figure img {
    display: block;
    width: 100%;
    height: auto;
}
#sub1_ci .ci-symbol-grid figure {
    box-sizing: border-box;
    padding: 32px;
    border: 1px solid #edf0f2;
    background: #fff;
}
#sub1_ci .ci-symbol-grid h5 {
    margin: 0 0 18px;
    color: #0072bc;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    word-break: keep-all;
}
#sub1_ci .ci-symbol-grid article > p {
    margin: 0;
    color: #555;
    line-height: 1.85;
    word-break: keep-all;
}
#sub1_ci .ci-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
#sub1_ci .ci-downloads a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    min-width: 112px;
    padding: 11px 14px;
    border: 1px solid #0072bc;
    color: #0072bc;
    text-decoration: none;
}
#sub1_ci .ci-downloads a:hover,
#sub1_ci .ci-downloads a:focus {
    background: #0072bc;
    color: #fff;
}
#sub1_ci .ci-downloads span {
    font-size: 12px;
}
#sub1_ci .ci-logotype-block figure {
    box-sizing: border-box;
    max-width: 760px;
    padding: 34px 48px;
    border: 1px solid #edf0f2;
    background: #fff;
}
#sub1_ci .ci-version {
    max-width: 760px;
    margin: 12px 0 0;
    color: #777;
    text-align: center;
}
#sub1_ci .ci-color-block ul {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#sub1_ci .ci-color-block li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    min-width: 260px;
}
#sub1_ci .ci-color-block li > span {
    grid-row: 1 / 3;
    width: 88px;
    height: 88px;
}
#sub1_ci .ci-color-blue > span { background: #0072bc; }
#sub1_ci .ci-color-black > span { background: #231f20; }
#sub1_ci .ci-color-block strong { align-self: end; }
#sub1_ci .ci-color-block p { align-self: start; margin: 5px 0 0; color: #777; }

@media (max-width: 768px) {
    #sub1_ci .ci-intro {
        padding-bottom: 34px;
        font-size: 34px;
    }
    #sub1_ci .ci-block {
        padding: 32px 0 40px;
    }
    #sub1_ci .ci-symbol-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    #sub1_ci .ci-symbol-grid figure {
        width: min(260px, 78vw);
        margin: 0 auto;
        padding: 24px;
    }
    #sub1_ci .ci-logotype-block figure {
        padding: 24px 18px;
    }
    #sub1_ci .ci-color-block ul {
        flex-direction: column;
    }
    #sub1_ci .ci-color-block li {
        min-width: 0;
    }
}
/* end local CI page */

/* local home product lineup: product hero backgrounds */
#lineup ul li:nth-child(1) a,
#lineup ul li:nth-child(4) a {
    overflow: hidden;
}
#lineup ul li:nth-child(1) a:before,
#lineup ul li:nth-child(4) a:before {
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    mix-blend-mode: multiply;
}
#lineup ul li:nth-child(1) a:before {
    background-image: url(../image/ultra-hero.jpg);
    transform: rotate(-40deg) scale(1.12);
}
#lineup ul li:nth-child(4) a:before {
    background-image: url(../image/structural-hero.jpg);
    background-size: 72% auto;
    transform: rotate(-40deg) scale(1.12);
}
#lineup ul li:nth-child(1):hover a:before,
#lineup ul li:nth-child(4):hover a:before {
    transform: rotate(-40deg) scale(1.24);
}
/* Homepage product and Portfolio refinements */
#lineup ul li:nth-child(1) a:before {
    background: url(../image/history-ultra-coupler.png) no-repeat center / contain;
    background-image: image-set(url(../image/history-ultra-coupler.webp) type("image/webp"), url(../image/history-ultra-coupler.png) type("image/png"));
    transform: rotate(-40deg) scale(0.96);
}
#lineup ul li:nth-child(1):hover a:before,
#lineup ul li:nth-child(1):focus-within a:before {
    transform: rotate(-40deg) scale(1.06);
}
#lineup ul li:nth-child(4) a:before {
    background: url(../image/structural-coupler-lineup.png) no-repeat center / 67.2% auto;
    background-image: image-set(url(../image/structural-coupler-lineup.webp) type("image/webp"), url(../image/structural-coupler-lineup.png) type("image/png"));
    transform: rotate(-40deg) scale(1.12);
}
#lineup ul li:nth-child(4):hover a:before,
#lineup ul li:nth-child(4):focus-within a:before {
    transform: rotate(-40deg) scale(1.24);
}
#lineup ul li:nth-child(1):hover a,
#lineup ul li:nth-child(1):focus-within a,
#lineup ul li:nth-child(4):hover a,
#lineup ul li:nth-child(4):focus-within a {
    background: #1693f4;
}

#pf ul li > .pf-card {
    display: block;
    color: inherit;
}
#pf ul li .pf-card figure {
    position: relative;
    overflow: hidden;
    aspect-ratio: 581 / 342;
    background: #0b0b0b;
}
#pf ul li .pf-card figure:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(6, 13, 20, 0.58), rgba(5, 11, 18, 0.24));
    transition: opacity 0.45s ease;
    pointer-events: none;
}
#pf ul li .pf-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    filter: brightness(0.58) saturate(0.78) contrast(1.06);
    transition: transform 0.55s ease, filter 0.45s ease;
}
#pf ul li .pf-card dl dt:after {
    transition: width 0.35s ease;
}
#pf ul li .pf-card:hover figure:after,
#pf ul li .pf-card:focus-visible figure:after {
    opacity: 0;
}
#pf ul li .pf-card:hover figure img,
#pf ul li .pf-card:focus-visible figure img {
    transform: scale(1.08);
    filter: brightness(1) saturate(1.03) contrast(1.02);
}
#pf ul li .pf-card:hover dl dt:after,
#pf ul li .pf-card:focus-visible dl dt:after {
    width: 48px;
}
#pf ul li .pf-card:focus-visible {
    outline: 2px solid #1693f4;
    outline-offset: 8px;
}
#lineup ul li:nth-child(1) a:before,
#lineup ul li:nth-child(4) a:before {
    mix-blend-mode: normal;
}
@media (min-width: 801px) {
    #pf ul li {
        width: 581px;
    }
}

@media (max-width: 768px) {
    #w_header .lang {
        top: 15px;
        height: 44px;
        border-radius: 22px;
    }
    #w_header .lang:before {
        top: 14px;
    }
    #w_header .lang:after {
        top: 12px;
    }
    #w_header .lang select {
        height: 42px;
    }
    #lineup ul li:nth-child(2) a:before {
        background-size: 100% auto;
    }
    #lineup ul li:nth-child(3) a:before {
        background-size: 99% auto;
    }
    #lineup ul li:nth-child(4) a:before {
        background-size: 72% auto;
    }
    #pf ul li .pf-card figure:after {
        opacity: 0;
    }
    #pf ul li .pf-card figure img {
        transform: scale(1.08);
        filter: brightness(1) saturate(1.03) contrast(1.02);
    }
}