/* subvisual */
.subvisual { display: none; }
.subvisual.active { display: block; }
.subvisual .contwrap { height: 100%; }

.subvisual .textbox { z-index: 20; position: relative; top: 55%; transform: translateY(-50%); }
.subvisual .textbox .text1 { font-family: 'FuturaExtraBlackCondensedRegular'; font-size: 110px; color: #fff; line-height: 1; }
.subvisual .textbox .text1 .color1 { font-size: inherit !important; color: #fff000; }
.subvisual .textbox .text1 .color2 { font-size: inherit !important; color: #00ff48; }


/* .subvisual1 */
.subvisual1 { overflow-x: hidden; overflow-y: visible; height: 543px; background: url(/image/sub/sub1/subtop_bg1.png) no-repeat center/cover; }
.subvisual1 .racket1 { position: absolute; right: 0; bottom: 0; }
.subvisual1 .racket1 img { display: inline-block; width: 630px; }
.subvisual1 .racket1 { }

@media (max-width: 1580px) {
    .subvisual1 { height: 450px; }
    .subvisual1 .racket1 img { width: calc(400px + 14vw); }
}
@media (max-width: 1279px) {
    .subvisual1 { height: 400px; }
    .subvisual1 .racket1 img { width: calc(330px + 10vw); }
}
@media (max-width: 1023px) {
    .subvisual1 { height: 330px; background-position-x: 0 !important; }
    .subvisual1 .racket1 img { margin-left: 10%; }
}
@media (max-width: 767px) {
    .subvisual1 { height: 300px; }
    .subvisual1 .racket1 img { margin-left: 20%; width: calc(270px + 7vw); }
}

/* .subvisual2 */
.subvisual2 { position: relative; /* overflow-x: hidden; overflow-y: visible; */ height: 543px; background: url(/image/sub/sub2/subtop_bg2.jpg) no-repeat center/cover; }
.subvisual2 .racket1 { z-index: 10; position: absolute; right: 0; bottom: -10%; }
.subvisual2 .racket1 img { display: inline-block; width: 700px; }

@media (max-width: 1580px) {
    .subvisual2 { height: 450px; }
    .subvisual2 .racket1 img { width: calc(350px + 14vw); }
}
@media (max-width: 1279px) {
    .subvisual2 { height: 400px; }
    .subvisual2 .racket1 img { width: calc(300px + 10vw); }
}
@media (max-width: 1023px) {
    .subvisual2 { height: 330px; background-position-x: 0 !important; }
    .subvisual2 .racket1 img { width: calc(250px + 7vw); }
}
@media (max-width: 767px) {
    .subvisual2 { height: 300px; }
    .subvisual2 .racket1 img { width: calc(230px + 5vw); }
}

/* .subvisual3 (order) */
.subvisual3 { overflow-x: hidden; overflow-y: visible; height: 404px; background: url(/image/sub/sub3/subtop_bg3.jpg) no-repeat center/cover; }

@media (max-width: 1580px) {
    .subvisual3 { height: 350px; }
}
@media (max-width: 1279px) {
    .subvisual3 { height: 300px; }
}
@media (max-width: 1023px) {
    .subvisual3 { height: 260px; background-position-x: 0 !important; }
}
@media (max-width: 767px) {
    .subvisual3 { height: 230px; }
}


/* .subvisual5 (cscenter) */
.subvisual5 { overflow-x: hidden; overflow-y: visible; height: 404px; background: url(/image/sub/sub5/subtop_bg5.jpg) no-repeat center/cover; }

@media (max-width: 1580px) {
    .subvisual5 { height: 350px; }
}
@media (max-width: 1279px) {
    .subvisual5 { height: 300px; }
}
@media (max-width: 1023px) {
    .subvisual5 { height: 260px; background-position-x: 0 !important; }
}
@media (max-width: 767px) {
    .subvisual5 { height: 230px; }
}

/* .subvisual6 (내용관리 content) */
.subvisual6 { overflow-x: hidden; overflow-y: visible; height: 404px; background: url(/image/sub/sub5/subtop_bg5.jpg) no-repeat center/cover; }

@media (max-width: 1580px) {
    .subvisual6 { height: 350px; }
}
@media (max-width: 1279px) {
    .subvisual6 { height: 300px; }
}
@media (max-width: 1023px) {
    .subvisual6 { height: 260px; background-position-x: 0 !important; }
}
@media (max-width: 767px) {
    .subvisual6 { height: 230px; }
}

/* .subvisual7 (member) */
.subvisual7 { overflow: hidden; height: 80px; background: url(/image/sub/member/member_bg.jpg) no-repeat center/cover; }

@media (max-width: 1580px) {
    .subvisual7 { height: 70px; }
}
@media (max-width: 1279px) {
    .subvisual7 { height: 60px; }
}
@media (max-width: 1023px) {
    .subvisual7 { height: 50px; background-position-x: 0 !important; }
}

/* subtabs */
.subtabs { border-bottom: 1px solid #a1a1a1; font-family: 'MyriadWebPro'; font-weight: 500; font-size: 30px; color: #7a7a7a; } 
.subtabs * { font-family: inherit; font-weight: inherit; font-size: inherit; color: inherit; }
.subtabs ul { display: flex; flex-wrap: nowrap; justify-content: center; }
.subtabs ul li { width: 25%; }
.subtabs ul li a { position: relative; display: block; text-align: center; padding-bottom: 25px; }
.subtabs ul li a::after { display: none; content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; height: 3px; background-color: #000; }
.subtabs ul li.active a::after { display: block; }
.subtabs ul li a span { position: relative; display: block; }
.subtabs ul li.active a span { color: #000; }
.subtabs ul li a span::before { display: block; content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 70%; background-color: #999; }
.subtabs ul li:first-of-type a span::before { display: none; }

.subtabs.subtabs5 { font-size: 20px; } 
.subtabs.subtabs5 ul { margin: 0 auto; max-width: 700px; }
.subtabs.subtabs5 ul li { width: 33.3333%; }
@media (max-width: 1580px) {
    .subtabs ul li a { padding-bottom: 23px; }
}
@media (max-width: 1279px) {
    .subtabs ul li a { padding-bottom: 20px; }
}
@media (max-width: 1023px) {
    .subtabs ul { flex-wrap: wrap; }
    .subtabs ul li { width: 50%; }
    .subtabs ul li a { padding-bottom: 16px; }
}
@media (max-width: 767px) {
    .subtabs ul li a { padding-bottom: 12px; }
}

/* sub_sect */
.sub_sect { position: relative; padding: 110px 0; overflow: hidden; } 
.sub_sect .sub_tit1 { padding-bottom: 40px; text-align: center; font-family: 'MyriadPro'; font-weight: 700; font-size: 55px; color: #000; }
.sub_sect .sub_tit2 { padding-bottom: 40px; text-align: center; font-weight: 700; font-size: 30px; color: #000; }
.sub_sect .sub_tit3 { padding-bottom: 40px; font-family: 'Gobold Bold'; text-align: center; font-weight: 700; font-size: 58px; color: #000; }


/* sub1 */
.sub1_contents1 { padding: 150px 0 70px; }
.sub1_contents1 .text1 { text-align: center; font-family: 'Gobold Bold'; font-weight: 700; font-size: 66px; color: #000; line-height: 1.35; }
.sub1_contents1 .descbox { margin-top: 60px; padding: 50px 0; border-top: 1px solid #a6a6a6; background-color: #f6f6f6; }
.sub1_contents1 .descbox .desc1 { font-weight: 700; font-size: 20px; color: #000; line-height: 1.8; }
.sub1_contents1 .descbox .desc2 { font-size: 20px; color: #000; line-height: 1.8; }

/* sub1 */
.sub1 .contents0 { margin-top: 110px; font-family: 'MyriadWebPro'; text-align: center; }
.sub1 .contents0 img { display: inline-block; width: 815px; }
.sub1 .contents0 .cbtn { margin-top: 50px; display: inline-block; padding: 27px 100px; text-align: center; font-family: 'MyriadPro'; font-size: 20px; color: #fff; background-color: #000; transition: background-color 0.3s; }
.sub1 .contents0 .cbtn:hover { background-color: #444; }
@media (max-width: 1580px) {
    .sub1 .contents0 img { width: calc(500px + 19vw); }
}
@media (max-width: 1279px) {
    .sub1 .contents0 img { width: calc(450px + 16vw); }
}
@media (max-width: 1023px) {
    .sub1 .contents0 img { width: calc(350px + 12vw); }
}

/* sub1_1 */
.sub1_1 .contents1 .desc1 { padding-bottom: 40px; font-family: 'Gobold Bold'; font-size: 55px; color: #000; }
.sub1_1 .contents1 .cont1 { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.sub1_1 .contents1 .cont1 li { display: flex; align-items: center; justify-content: center; width: 32%; background-color: #f6f6f6; }
.sub1_1 .contents1 .textbox { margin-top: 65px; font-family: 'MyriadWebPro'; font-size: 22px; color: #000; line-height: 1.5; }
.sub1_1 .contents1 .textbox b { display: block; font-weight: 600; }
.sub1_1 .contents1 .cont2 { display: flex; align-items: center; justify-content: center; background-color: #f6f6f6; }
.sub1_1 .contents1 .cont2 .img1 { display: inline-block; }
.sub1_1 .contents1 .cont2 .img2 { display: none; }
@media (max-width: 767px) {
    .sub1_1 .contents1 .cont1 { flex-wrap: wrap; }
    .sub1_1 .contents1 .cont1 li { width: 48%; }
    .sub1_1 .contents1 .cont1 li:nth-of-type(n + 3) { margin-top: 4%; }
}
@media (max-width: 450px) {
    .sub1_1 .contents1 .cont2 .img1 { display: none; }
    .sub1_1 .contents1 .cont2 .img2 { display: inline-block; }
}
@media (max-width: 380px) {
    .sub1_1 .contents1 .cont1 { display: block; }
    .sub1_1 .contents1 .cont1 li { width: 100%; }
    .sub1_1 .contents1 .cont1 li:nth-of-type(n + 3) { margin-top: initial; }
    .sub1_1 .contents1 .cont1 li:nth-of-type(n + 2) { margin-top: 15px; }
    .sub1_1 .contents1 .cont1 li img { width: 100%; }
}

/* sub1_2 */
.sub1_2 .contents1 { text-align: center; }


/* sub2 */
.lineupcont1 { position: relative; padding: 120px 0; overflow: hidden; background-color: #e3ecfa; }
.lineupcont1 .desc1 { padding-bottom: 40px; font-family: 'Gobold Bold'; font-size: 41px; color: #000; }


.grid-container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.grid-container .item { position: relative; overflow: hidden; border-radius: 8px; }
.grid-container .item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s; }
.grid-container .item img:hover { filter: brightness(0.9); }
.grid-container .item .img1 { display: block; }
.grid-container .item .img2 { display: none; }

.grid-container .blade { grid-row: 1 / span 2; grid-column: 1 / 2; }
.grid-container .textile { grid-row: 1 / 2; grid-column: 2 / 4; }
.grid-container .accessories { grid-row: 1 / 2; grid-column: 4 / 4; }
.grid-container .rubber { grid-row: 2 / 3; grid-column: 2 / 3; }
.grid-container .ball { grid-row: 2 / 3; grid-column: 3 / 4; }
.grid-container .etc { grid-row: 2 / 3; grid-column: 4 / 5; }

@media (max-width: 1440px) {
    .lineupcont1 .desc1 { text-align: center; }

    .grid-container { max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .grid-container .item { width: 32%; }
    .grid-container .item:nth-of-type(n + 4) { margin-top: 2%; }
    .grid-container .item .img1 { display: none; }
    .grid-container .item .img2 { display: block; }
}
@media (max-width: 560px) {
    .grid-container { }
    .grid-container .item { width: 48%; }
    .grid-container .item:nth-of-type(n + 4) { margin-top: initial; }
    .grid-container .item:nth-of-type(n + 3) { margin-top: 4%; }
}

/* sub5 */
.sub5_contents1 { padding: 150px 0 70px; }
.sub5_contents1 .text1 { text-align: center; font-family: 'Gobold Bold'; font-weight: 700; font-size: 66px; color: #000; line-height: 1.35; }