/* 계열사 소개 - 상세 */
#detail{ 
	--menuH: 90px;
	--arrowW: 9px;
	--arrowH: 14px;

    --secPadding: 160px;
}  
#detail{ letter-spacing: -0.02em; }
#detail .grayBg + section:not(.grayBg){ padding-top: var(--secPadding); }


/* sec-menu */
#detail .sec-menu{ background: #FFF; position: sticky; top: var(--headerH); left: 0; z-index: 500; margin-bottom: var(--secPadding); transition: top 0.4s; }
#detail .sec-menu .flex-box{ height: var(--menuH); display: flex; justify-content: space-between; align-items: center; }
#detail .sec-menu h2{ flex-shrink: 0; display: inline-flex; height: 48px; margin-left: 25px; }
#detail .sec-menu h2 img{ width: auto; max-height: 100%; object-fit: contain; object-position: right; }  
#detail .sec-menu .nav{ flex: 1 1 auto; min-width: 0; }
#detail .sec-menu .nav > button{ display: none; width: 100%; height: var(--menuH); background: none; border: none; font-family: var(--engFont); font-size: 18px; font-weight: 600; color: var(--mainColor); padding: 10px 0; }
#detail .sec-menu .nav > button::after{ content: ""; flex-shrink: 0; display: inline-block; width: var(--arrowW); height: var(--arrowH); background: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center center / contain; transform: rotate(90deg); margin-left: 20px; }
#detail .sec-menu .nav ul{ display: flex; margin-left: -25px; }
#detail .sec-menu .nav ul li button{ background: none; border: none; font-family: var(--engFont); font-size: 22px; font-weight: 500; color: #888; text-align: center; padding: 10px 25px; position: relative; transition: color 0.4s; }
#detail .sec-menu .nav ul li button::after{ content: ""; width: calc(100% - 50px); height: 2px; display: inline-block; background: var(--mainColor); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); transition: transform 0.4s; }
#detail .sec-menu .nav ul li.on button{ color: var(--mainColor); }
#detail .sec-menu .nav ul li.on button::after{ transform: translateX(-50%) scaleX(1); }  

body.up #detail .sec-menu{ top: 0; }


/* arrowBtn */
#detail .arrowBtn{
    --before: 8px;
    --after: 40px;
}
#detail .arrowBtn{ height: var(--after); display: inline-flex; align-items: center; font-size: 20px; font-weight: 500; color: #111; letter-spacing: -0.01em; transition: color 0.4s; }
#detail .arrowBtn i{ flex-shrink: 0; display: inline-block; width: var(--after); height: var(--after); background: #111; border-radius: 50%; margin-right: 15px; position: relative; overflow: hidden; transition: width 0.4s, height 0.4s, background 0.4s; }
#detail .arrowBtn i::before{ content: ""; width: var(--after); height: var(--arrowH); background: #FFF; mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center  left 55% / contain; -webkit-mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center left 55% / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

@media screen and (hover: hover) and (pointer: fine){
    #detail .arrowBtn i{ width: var(--before); height: var(--before); }

    #detail .arrowBtn:hover{ color: var(--mainColor); }
    #detail .arrowBtn:hover i{ width: var(--after); height: var(--after); background: var(--mainColor); }
}


/* slick-info */
.slick-info{ display: flex; align-items: center; margin-top: 60px; }
.slick-info .bar{ flex: 1 1 auto; min-width: 0; position: relative; z-index: 10; }
.slick-info .bar::before{ content: ""; width: 100%; height: 1px; background: #DDD; position: absolute; top: 1px; left: 0; z-index: -1; }
.slick-info .bar div{ width: 0; height: 3px; background: #111; }
.slick-info .btns{ flex-shrink: 0; display: flex; margin-left: 30px; }
.slick-info .btns button{ width: 30px; height: 30px; background: #000; border: none; padding: 0; overflow: hidden; }
.slick-info .btns button:not(:last-of-type){ margin-right: 10px; }
.slick-info .btns button.prev{ transform: scaleX(-1); }
.slick-info .btns button i,
.slick-info .btns button i::before,
.slick-info .btns button i::after{ display: block; height: var(--arrowH); background: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center  left 55% / contain; filter: grayscale(1) brightness(5); -webkit-filter: grayscale(1) brightness(5); }
.slick-info .btns button i{ position: relative; transform: translateX(0); transition: transform 0.5s; }
.slick-info .btns button i::before,
.slick-info .btns button i::after{ content: ""; width: 100%; position: absolute; top: 0; left: 0; }
.slick-info .btns button i::before{ transform: translateX(-75%); }
.slick-info .btns button i::after{ transform: translateX(-150%); }

@media screen and (hover: hover) and (pointer: fine){
    .slick-info .btns button:hover i{ transform: translateX(150%); }
}


@media screen and (max-width: 1700px){
    #detail{ 
        --menuH: 80px;

        --secPadding: 120px;
    }

    /* sec-menu */
    #detail .sec-menu h2{ height: 44px; }
    #detail .sec-menu .nav ul{ margin-left: -20px; }
    #detail .sec-menu .nav ul li button{ font-size: 20px; padding-inline: 20px; }
    #detail .sec-menu .nav ul li button::after{ width: calc(100% - 40px); }

    /* arrowBtn */
    #detail .arrowBtn{
        --after: 35px;
    }
    #detail .arrowBtn{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
    #detail{ 
        --menuH: 70px;

        --secPadding: 80px;
    }

    /* sec-menu */
    #detail .sec-menu h2{ height: 40px; }
    #detail .sec-menu .nav ul{ margin-left: -15px; }
    #detail .sec-menu .nav ul li button{ font-size: 18px; padding: 7px 15px; }
    #detail .sec-menu .nav ul li button::after{ width: calc(100% - 30px); }

    /* arrowBtn */
    #detail .arrowBtn{
        --before: 6px;
        --after: 30px;
    }
    #detail .arrowBtn{ font-size: 18px; }
    #detail .arrowBtn i{ margin-right: 10px; }

    /* slick-info */
    .slick-info{ margin-top: 40px; }
}

@media screen and (max-width: 1200px){
    #detail .sec-menu .nav{ flex: 1 1 auto; max-width: 300px; min-width: 0; position: relative; }
    #detail .sec-menu .nav > button{ display: flex; justify-content: space-between; align-items: center; }
    #detail .sec-menu .nav > button::after{ transition: transform 0.5s; }
    #detail .sec-menu .nav ul{ display: block; background: #000; padding: 10px 0; margin: 0; position: absolute; top: 100%; left: 0; right: 0; clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path 0.5s; }
    #detail .sec-menu .nav ul li button{ width: 100%; padding: 10px 20px; color: rgba(255, 255, 255, 0.5); text-align: left; }
    #detail .sec-menu .nav ul li button::after{ display: none; }

    #detail .sec-menu .nav.active > button::after{ transform: rotate(-90deg); }
    #detail .sec-menu .nav.active ul{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
    #detail .sec-menu .nav ul li.on button{ color: #FFF; }
}

@media screen and (max-width: 900px){
    #detail{ 
        --menuH: 60px;
    }

    /* sec-menu */
    #detail .sec-menu h2{ height: 35px; }
}


/* company */
#detail .company{
    --width: 680px;
}
#detail .company .grid-box{ display: grid; grid-template-columns: var(--width) calc(100% - var(--width)); grid-template-rows: auto 1fr; opacity: 1; }
#detail .company .grid-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }
#detail .company .text{ padding-right: 90px; transform: translateX(var(--aosM)); }
#detail .company .text h4{ font-size: 38px; font-weight: 600; color: #111; line-height: 1.5; } 
#detail .company .text p{ font-size: 20px; font-weight: 300; color: #111; line-height: 1.6; margin-top: 30px; } 
#detail .company .text ul{ margin-top: 60px; }
#detail .company .text ul li:not(:last-of-type){ margin-bottom: 10px; }
#detail .company .text ul li button{ max-width: 100%; width: 420px; display: flex; align-items: center; background: rgba(var(--mainRGB), 0.05); border: none; font-size: 20px; font-weight: 600; color: #111; letter-spacing: -0.03em; text-align: left; padding: 20px 40px; }
#detail .company .text ul li button figure{ flex-shrink: 1; background: #FFF; border-radius: 50%; position: relative; }
#detail .company .text ul li button figure::after{ content: ""; width: 100%; height: 100%;  border: 2px solid rgba(var(--mainRGB), 0.2); border-radius: 50%; position: absolute; top: 0; left: 0; box-sizing: border-box; }
#detail .company .text ul li button span{ flex: 1 1 auto; min-width: 0; display: block; padding: 0 20px; }
#detail .company .text ul li button::after{ content: ""; flex-shrink: 0; width: var(--arrowW); height: var(--arrowH); background: var(--mainColor); mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center center / contain; }

#detail .company .image{ grid-row: auto / span 2; transform: translateX(var(--aosP)); }
#detail .company .image .bottom{ display: flex; margin-top: 10px; }
#detail .company .image .bottom button{ width: calc(var(--arrowW) + 40px); flex-shrink: 0; background: none; border: none; padding: 0; position: relative; }
#detail .company .image .bottom button i{ display: inline-flex; width: var(--arrowW); height: var(--arrowH); background: var(--mainColor); mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center center / contain; -webkit-mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center center / contain; position: absolute; top: 37%; left: 50%; transform: translate(-50%, -50%); }
#detail .company .image .bottom button.prev i{ transform: translate(-50%, -50%) scaleX(-1); }
#detail .company .image .bottom .slide{ flex: 1 1 auto; min-width: 0; }
#detail .company .image figure{ display: block; position: relative; padding-bottom: 67.62%; overflow: hidden; }
#detail .company .image figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .company .image p{ font-size: 18px; font-weight: 500; color: #111; letter-spacing: -0.03em; text-align: center; margin-top: 10px; }
#detail .company .image .big-wrap p{ display: none; }
#detail .company .image .small-wrap .slick-list{ padding: 0 10px; margin-right: -10px; }
#detail .company .image .small-wrap .slick-track{ display: flex; justify-content: center; margin: 0 auto; }
#detail .company .image .small-wrap figure::after{ content: ""; width: 100%; height: 100%; border: 3px solid transparent; position: absolute; top: 0; left: 0; box-sizing: border-box; }
#detail .company .image .small-wrap .slick-slide{ margin-right: 10px; cursor: pointer; }
#detail .company .image .small-wrap .slick-current figure::after{ border-color: var(--mainColor); }

#detail .company .grid-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; }

@media screen and (max-width: 1700px){
    #detail .company{
        --width: 600px;
    }
    #detail .company .text h4{ font-size: 34px; }
    #detail .company .text p{ font-size: 19px; margin-top: 20px; }
    #detail .company .text ul{ margin-top: 40px; }
    #detail .company .text ul li button{ width: 380px; font-size: 19px; padding: 17px 30px; }
    #detail .company .text ul li button figure img{ width: 55px; }

    #detail .company .image p{ font-size: 17px; }
}

@media screen and (max-width: 1400px){
    #detail .company .text{ padding-right: 60px; }
}

@media screen and (max-width: 1280px){
    #detail .company{
        --width: 45%;
    }
    #detail .company .text h4{ font-size: 30px; }
    #detail .company .text p{ font-size: 18px; margin-top: 15px; }
    #detail .company .text p br{ display: none; }
    #detail .company .text ul{ margin-top: 30px; }
    #detail .company .text ul li button{ width: 320px; font-size: 18px; padding: 14px 20px; padding-right: 25px; }
    #detail .company .text ul li button span{ padding: 0 15px; }
    #detail .company .text ul li button figure img{ width: 52px; }

    #detail .company .image p{ font-size: 16px; }
}

@media screen and (max-width: 1024px){
    #detail .company .grid-box{ display: block; }
    #detail .company .text{ padding-right: 0; transform: translateY(var(--aosP)); }
    #detail .company .text br{ display: none; }
    #detail .company .text ul li button{ width: 100%; }

    #detail .company .image{ margin: 30px 0 40px; transform: translateY(var(--aosP)); }
	#detail .company .image .bottom button{ width: calc(var(--arrowW) + 30px); }
}

@media screen and (max-width: 900px){
    #detail .company .text h4{ font-size: 26px; }
    #detail .company .text ul li button{ padding-left: 15px; }
}

@media screen and (max-width: 650px){
	#detail .company .image .bottom button{ width: calc(var(--arrowW) + 20px); }
}


/* product */
#detail .product{
	--btnW: 185px;
}
#detail .product .page-title{ text-align: left; }
#detail .product .menu{ display: flex; align-items: center; margin-bottom: 40px; }
#detail .product .menu button{ background: none; border: none; font-family: var(--engFont); letter-spacing: -0.03em; line-height: 1.3; }
#detail .product .tab-content01 .tab:not(:first-of-type),
#detail .product .tab-content02 .tab:not(:first-of-type){ display: none; }

#detail .product .left{ flex-shrink: 0; max-width: calc((var(--btnW) * 3) + 20px); background: var(--mainColor); border-radius: 999px; padding: 10px; margin-right: 60px; }
#detail .product .left .swiper-wrapper{ position: relative; }
#detail .product .left .swiper-wrapper::before{ content: ""; width: var(--btnW); height: 100%; background: #FFF; border-radius: 99px; position: absolute; top: 0; left: 0; transform: translateX(calc(100% * var(--idx))); transition: width 0.4s, transform 0.4s; }
#detail .product .left .swiper-slide{ width: auto; height: unset; min-width: var(--btnW); }  
#detail .product .left .swiper-slide button{ width: var(--btnW); height: 100%; font-size: 20px; font-weight: 500; color: #FFF; text-stroke: 0.01em transparent; -webkit-text-stroke: 0.01em transparent; padding: 15px 10px; transition: color 0.4s, text-stroke 0.4s; }
#detail .product .left .swiper-slide.on button{ color: var(--mainColor); text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); }

#detail .product .right{ flex: 1 1 auto; min-width: 0; overflow: hidden; }
#detail .product .right ul{ display: flex; flex-wrap: wrap; margin-left: -21px; }
#detail .product .right ul li{ display: flex; position: relative; }
#detail .product .right ul li::before{ content: ""; width: 1px; height: 15px; background: #E5E5E5; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#detail .product .right ul li button{ font-size: 18px; font-weight: 500; color: #CCC; padding: 5px; padding-inline: 21px 20px; }
#detail .product .right ul li.on button{ color: var(--mainColor); }

#detail .product .content{ margin-top: 30px; }
#detail .product .prod-wrap{ width: calc(100% + ((var(--vw) - 100%) / 2)); }
#detail .product .prod-wrap .slick-list{ margin-right: -40px; }
#detail .product .prod{ width: 450px; padding-top: 10px; margin-right: 40px; }
#detail .product .prod a{ display: block; background: var(--grayBg); padding: 40px; transform: translateY(0); transition: background 0.5s, transform 0.5s; }
#detail .product .prod figure{ display: block; padding-bottom: 77.03%; position: relative; overflow: hidden; }
#detail .product .prod figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .product .prod .text h6{ font-family: var(--engFont); font-size: 30px; font-weight: 500; color: #000; text-stroke: 0.01em #000; -webkit-text-stroke: 0.01em #000; letter-spacing: -0.03em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color 0.5s, text-stroke-color 0.5s; }
#detail .product .prod .text p{ display: block; font-size: 16px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.03em; text-stroke: 0.01em var(--mainColor); -webkit-text-stroke: 0.01em var(--mainColor); margin-top: 20px; transition: color 0.5s, text-stroke-color 0.5s; } 
#detail .product .prod .arrow{ text-align: right; }
#detail .product .prod .arrow i{ width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; background: #FFF; border-radius: 50%; position: relative; overflow: hidden; }
#detail .product .prod .arrow i span,
#detail .product .prod .arrow i span::before,
#detail .product .prod .arrow i span::after{ display: block; width: 100%; height: var(--arrowH); background: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center left 55% / contain; filter: grayscale(1) contrast(10); -webkit-filter: grayscale(1) contrast(10); }
#detail .product .prod .arrow i span::before,
#detail .product .prod .arrow i span::after{ content: ""; position: absolute; top: 50%; left: 0; }
#detail .product .prod .arrow i span{ position: relative; transform: translateX(0); transition: transform 0.5s; }
#detail .product .prod .arrow i span::before{ transform: translate(-100%, -50%); }
#detail .product .prod .arrow i span::after{ transform: translate(-200%, -50%); }

/* slick-current */
#detail .product .prod.slick-current a{ background: var(--mainColor); transform: translateY(-10px); }
#detail .product .prod.slick-current .text h6{ color: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
#detail .product .prod.slick-current .text p{ color: rgba(255, 255, 255, 0.8); text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
#detail .product .prod.slick-current .arrow i span{ transform: translate(200%); }

#detail .product .btns{ display: flex; justify-content: center; align-items: center; margin-top: 40px; }
#detail .product .btns button{ width: 30px; height: 30px; background: #BBB; border: none; border-radius: 50%; padding: 0; overflow: hidden; }
#detail .product .btns button.prev{ transform: scaleX(-1); }
#detail .product .btns button i,
#detail .product .btns button i::before,
#detail .product .btns button i::after{ display: block; width: 100%; height: var(--arrowH); background: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center left 55% / contain; filter: grayscale(1) brightness(5); -webkit-filter: grayscale(1) brightness(5); }
#detail .product .btns button i{ position: relative; transform: translateX(0); transition: transform 0.5s; }
#detail .product .btns button i::before,
#detail .product .btns button i::after{ content: ""; position: absolute; top: 0; left: 0; }
#detail .product .btns button i::before{ transform: translateX(-75%); }
#detail .product .btns button i::after{ transform: translateX(-150%); }
#detail .product .btns .dots{ margin: 0 25px; }

#detail .product .slick-dots{ display: flex; }
#detail .product .slick-dots li{ width: 20px; height: 3px; background: #DDD; cursor: pointer; }
#detail .product .slick-dots li.slick-active{ width: 40px; background: var(--mainColor); }
#detail .product .slick-dots li:not(:last-of-type){ margin-right: 5px; }
#detail .product .slick-dots li button{ display: none; }

/* 고무소재 표 */
#detail .product .prod-table{ margin-top: -30px; }
#detail .product .prod-table section:not(:last-of-type){ padding-bottom: 60px; }
#detail .product .prod-table h4{ font-size: 32px; }

@media screen and (hover: hover) and (pointer: fine){
	#detail .product .left .swiper-wrapper:hover::before{ transform: translateX(calc(100% * var(--hoverIdx))); }
    #detail .product .left .swiper-wrapper:hover .swiper-slide.on button{ color: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
    #detail .product .left .swiper-slide:hover button, 
    #detail .product .left .swiper-wrapper:hover .swiper-slide:only-child button{ color: var(--mainColor) !important; text-stroke-color: var(--mainColor) important; -webkit-text-stroke-color: var(--mainColor) important; }


    #detail .product .prod.slick-current a{ background: var(--grayBg); transform: translateY(0); }
	#detail .product .prod.slick-current .text h6{ color: #000; text-stroke-color: #000; -webkit-text-stroke-color: #000; }
	#detail .product .prod.slick-current .text p{ color: var(--mainColor); text-stroke-color: var(--mainColor); -webkit-text-stroke-color: var(--mainColor); }
	#detail .product .prod.slick-current .arrow i span{ transform: translate(0); }


	#detail .product .prod:hover a{ background: var(--mainColor); transform: translateY(-10px); }
	#detail .product .prod:hover .text h6{ color: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
	#detail .product .prod:hover .text p{ color: rgba(255, 255, 255, 0.8); text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
	#detail .product .prod:hover .arrow i span{ transform: translate(200%); }
    
    #detail .product .btns button:hover i{ transform: translateX(150%); }
}

@media screen and (max-width: 1700px){
    #detail .product{
        --btnW: 170px;
    }
    #detail .product .left .swiper-slide button{ font-size: 19px; padding-block: 12px; }

    #detail .product .prod{ width: 400px; }
    #detail .product .prod a{ padding: 35px; }
    #detail .product .prod .text h6{ font-size: 26px; }
    #detail .product .prod .text p{ margin-top: 15px; }
	
	/* 고무소재 표 */
	#detail .product .prod-table{ margin-top: -20px; }
	#detail .product .prod-table h4{ font-size: 28px; }
}

@media screen and (max-width: 1400px){
    #detail .product .left{ margin-right: 40px; }
}

@media screen and (max-width: 1280px){
    #detail .product{
        --btnW: 150px;
    }
    #detail .product .menu{ margin-bottom: 30px; }
    #detail .product .left{ max-width: calc((var(--btnW) * 3) + 14px); padding: 7px; }
    #detail .product .left .swiper-slide button{ font-size: 18px; }

    #detail .product .right ul{ margin-left: -16px; }
    #detail .product .right ul li button{ font-size: 17px; padding-inline: 16px 15px; }

    #detail .product .prod-wrap .slick-list{ margin-right: -20px; }
    #detail .product .prod{ width: 350px; margin-right: 20px; }
    #detail .product .prod a{ padding: 30px; }
    #detail .product .prod .text h6{ font-size: 23px; }
    #detail .product .prod .text p{ margin-top: 10px; }

    #detail .product .btns .dots{ margin: 0 20px; }
    #detail .product .slick-dots li{ width: 15px; }
    #detail .product .slick-dots li.slick-active{ width: 30px; }
	
	/* 고무소재 표 */
	#detail .product .prod-table h4{ font-size: 24px; }
}

@media screen and (max-width: 1200px){
    #detail .product{
        --btnW: calc((var(--vw) - 60px - 14px) / 3);
    }
    #detail .product .menu{ flex-direction: column; margin-bottom: 20px; }
    #detail .product .left{ max-width: 100%; width: 100%; margin-right: 0; margin-bottom: 30px; }

    #detail .product .right ul{ justify-content: center; }
    #detail .product .right ul li:first-of-type::before{ display: none; }
}

@media screen and (max-width: 1024px){
    #detail .product{
        --btnW: calc((var(--vw) - 40px - 14px) / 3);
    }
}

@media screen and (max-width: 900px){
    #detail .product .page-title{ padding-bottom: 25px; }

    #detail .product .left{ padding: 5px; }
    #detail .product .left .swiper-slide button{ font-size: 17px; padding-block: 10px; }

    #detail .product .prod a{ padding: 25px; }
	
	/* 고무소재 표 */
	#detail .product .prod-table{ margin-top: 0; }
	#detail .product .prod-table h4{ font-size: 22px; }
	#detail .product .prod-table .blue-table th, 
	#detail .product .prod-table .blue-table td{ padding-block: 10px; }
}

@media screen and (max-width: 650px){
    #detail .product .prod-wrap{ width: var(--vw); margin-left: -20px; }
    #detail .product .prod-wrap .slick-list{ margin-right: 0; }

    /* slick-current */
    #detail .product .prod.slick-current a{ background: var(--mainColor); transform: translateY(-10px); }
    #detail .product .prod.slick-current .text h6{ color: #FFF; text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
    #detail .product .prod.slick-current .text p{ color: rgba(255, 255, 255, 0.8); text-stroke-color: transparent; -webkit-text-stroke-color: transparent; }
    #detail .product .prod.slick-current .arrow i span{ transform: translate(200%); }
}


/* rnd */
#detail .rnd{ background: url("/img/sub/affiliate/rnd_bg.jpg") no-repeat center center / cover; }
#detail .rnd .flex-box{ display: flex; background: #FFF; padding: 10px; opacity: 0; transform: translateY(var(--aosP)); transition: opacity var(--aosT), transform var(--aosT); transition-delay: 0.4s; }
#detail .rnd.aos-animate .flex-box{ opacity: 1; transform: translateY(0); }

#detail .rnd .img{ flex-shrink: 0; width: 46.203%; }
#detail .rnd .img figure,
#detail .rnd .img figure img{ width: 100%; height: 100%; }
#detail .rnd .img figure img{ object-fit: cover; }

#detail .rnd .text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 100px; }
#detail .rnd .text .page-title{ text-align: left; padding-bottom: 85px; }
#detail .rnd .text .p-box{ margin-top: 40px; }
#detail .rnd .text .p-box p{ font-size: 18px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.7; }
#detail .rnd .text .p-box p:not(:last-of-type){ margin-bottom: 15px; }
#detail .rnd .text .link{ display: flex; }

#detail .rnd + section{ padding-top: var(--secPadding); }

@media screen and (max-width: 1700px){
    #detail .rnd .text{ padding: 70px; }
    #detail .rnd .text .page-title{ padding-bottom: 65px; }
    #detail .rnd .text .p-box{ margin-top: 30px; }
}

@media screen and (max-width: 1280px){
    #detail .rnd .text{ padding: 50px; }
    #detail .rnd .text .page-title{ padding-bottom: 35px; }
    #detail .rnd .text .p-box{ margin-top: 20px; }
    #detail .rnd .text .p-box p{ font-size: 17px; }
}

@media screen and (max-width: 1024px){
    #detail .rnd{ padding: 40px 0; }
    #detail .rnd .flex-box{ flex-direction: column; padding: 20px; }
    #detail .rnd .text .page-title{ padding-bottom: 20px; }
    #detail .rnd .img{ width: 100%; }
    #detail .rnd .text{ padding: 30px 0 10px; }
}


/* certify */
#detail .certify{
    --imgW: 280px;
    --imgLR: 70px;

    --before: 22px;
    --after: 28px;
    --icon: 30px;
}
#detail .certify .flex-box{ display: flex; }
#detail .certify .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }

#detail .certify .left{ flex-shrink: 0; width: 500px; padding-right: 30px; transform: translateX(var(--aosM)); }
#detail .certify .left .page-title{ text-align: left; padding-bottom: 0; }

#detail .certify .right{ flex: 1 1 auto; min-width: 0; transform: translateY(var(--aosP)); }
#detail .certify .board ul{ border-top: 2px solid #000; }
#detail .certify .board ul li{ border-bottom: 1px solid #DDD; padding: 50px 60px; cursor: pointer; }
#detail .certify .board ul li .box{ position: relative; }
#detail .certify .board ul li .flex{ display: flex; align-items: center; }
#detail .certify .board ul li .flex > div{ flex: 1 1 auto; min-width: 0; padding-right: 30px; }
#detail .certify .board ul li .img{ display: none; }
#detail .certify .board ul li h6{ font-size: var(--before); font-weight: 300; color: #999; transition: font-size 0.5s, font-weight 0.5s, color 0.5s; }
#detail .certify .board ul li p{ font-family: var(--engFont); font-size: 18px; font-weight: 400; color: #999; padding-top: 20px; display: none; }
#detail .certify .board ul li i{ flex-shrink: 0; width: var(--icon); height: var(--icon); display: inline-flex; flex-direction: column; justify-content: center; background: #000; border-radius: 50%; opacity: 0; transition: opacity 0.5s; } 
#detail .certify .board ul li i::before{ content: ""; display: block; height: var(--arrowH); background: #FFF; mask: url("/img/sub/affiliate/icon_plus.svg") no-repeat center center / auto; -webkit-mask: url("/img/sub/affiliate/icon_plus.svg") no-repeat center center / auto; }
#detail .certify .board ul li.cursor i{ opacity: 1; }

#detail .certify .flex-box.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; } 

@media screen and (hover: hover) and (pointer: fine){
    #detail .certify .board ul li:hover h6{ font-size: var(--after); font-weight: 600; color: #000; }
}

@media screen and (max-width: 1700px){
    #detail .certify{
        --imgW: 220px;
        --imgLR: 50px;
    
        --before: 20px;
        --after: 24px;
    }

    #detail .certify .left{ width: 400px; }

    #detail .certify .board ul li{ padding: 35px 45px; }
    #detail .certify .board ul li p{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
    #detail .certify{
        --imgW: 180px;
        --imgLR: 25px;
    
        --before: 18px;
        --after: 22px;
    }

    #detail .certify .left{ width: 300px; }

    #detail .certify .board ul li{ padding: 20px 30px; }
    #detail .certify .board ul li p{ font-size: 16px; padding-top: 15px !important; }
}

@media screen and (max-width: 1024px){
    #detail .certify .flex-box{ flex-direction: column; }
    #detail .certify .left{ width: 100%; padding-right: 0; padding-bottom: 25px; transform: translateY(var(--aosP)); }
}

@media screen and (max-width: 900px){
    #detail .certify .board ul li{ padding-inline: 15px; }
}

@media screen and (min-width: 701px){
    #detail .certify .board ul li .img{ display: block !important; }
}

@media screen and (max-width: 700px){
    #detail .certify{
        --after: 20px;
    }
    #detail .certify .board ul li{ padding: 0; }
    #detail .certify .board ul li .flex,
    #detail .certify .board ul li .img{ padding-inline: 15px; }
    #detail .certify .board ul li .flex{ padding-block: 20px; }
    #detail .certify .board ul li h6{ font-size: var(--after); font-weight: 600; color: #000; }
    #detail .certify .board ul li p{ height: auto !important; display: block !important; }
}


/* ir */
#detail .ir .page-title{ padding-bottom: 80px; }
#detail .ir .page-title p{ font-size: 21px; font-weight: 300; color: #111; line-height: 1.6; margin-top: 30px; }

#detail .ir .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; }
#detail .ir .grid-box > *{ margin: 10px; }
#detail .ir .grid-box > * h6{ font-size: 30px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; }
#detail .ir .grid-box > * p{ font-size: 18px; font-weight: 200; color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-top: 10px; }

#detail .ir .img{ grid-row: auto / span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; position: relative; z-index: 10; overflow: hidden; }
#detail .ir .img .bg{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#detail .ir .img .bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.4s; }
#detail .ir .img .top{ display: flex; justify-content: space-between; margin-bottom: 65px; }

#detail .ir .item{ display: flex; justify-content: space-between; align-items: center; padding: 30px 60px; }

@media screen and (hover: hover) and (pointer: fine){
    #detail .ir .img:hover .bg img{ transform: scale(1.1); }
}

@media screen and (max-width: 1700px){
    #detail .ir .page-title{ padding-bottom: 50px; }
    #detail .ir .page-title p{ font-size: 19px; margin-top: 25px; }

    #detail .ir .grid-box > * h6{ font-size: 26px; }
    #detail .ir .img{ padding: 30px; }
    #detail .ir .img .top{ margin-bottom: 45px; }
    #detail .ir .item{ padding: 25px 40px; }
}

@media screen and (max-width: 1280px){
    #detail .ir .page-title{ padding-bottom: 30px; }
    #detail .ir .page-title p{ font-size: 18px; margin-top: 20px; }

    #detail .ir .grid-box{ grid-template-columns: repeat(2, 50%); }
    #detail .ir .grid-box > * h6{ font-size: 22px; }
    #detail .ir .grid-box > * p{ font-size: 17px; }

    #detail .ir .img{ grid-row: unset; padding: 30px; }
    #detail .ir .img .top{ margin-bottom: 65px; }
    #detail .ir .item{ padding: 30px; }
}

@media screen and (max-width: 800px){
    #detail .ir .grid-box{ grid-template-columns: repeat(1, 100%); }
}


/* esg */
#detail .esg{
    --num: 40px;
    --plus: 30px;
    --afterW: 65%;
    --afterP: 160px;
    --afterFS: 5rem;
}
#detail .esg > *{ position: relative; }
#detail .esg .page-title{ padding-bottom: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 20; }

#detail .esg .item-wrap{ display: flex; }
#detail .esg .item{ width: calc(100% / var(--length)); height: 100vh; text-align: center; padding: 10px; padding-top: 360px; position: relative; z-index: 10; flex-grow: 1; flex-shrink: 1; transition: width 0.5s; }
#detail .esg .item .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; opacity: 0; transition: opacity 0.5s; }
#detail .esg .item .bg img{ width: 100%; height: 100%; object-fit: cover; }
#detail .esg .item .text .num{ display: inline-block; width: var(--num); height: var(--num); border: 1px solid #BBB; border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 600; color: #BBB; line-height: calc(var(--num) - 2px); transition: border-color 0.5s, color 0.5s, left 0.5s, transform 0.5s; }
#detail .esg .item .text{ display: flex; flex-direction: column; align-items: flex-start; padding: 0; transition: padding 0.5s; }
#detail .esg .item .text > *{ display: inline-block; position: relative; left: 50%; transform: translateX(-50%); }
#detail .esg .item .text .icon{ padding: 10px; margin: 40px 0; transition: left 0.5s, transform 0.5s; }
#detail .esg .item .text .icon i{ display: inline-flex; background: var(--mainColor); box-shadow: 0 0 0 10px rgba(var(--mainRGB), 0.5); border-radius: 50%; transition: background 0.5s, box-shadow 0.5s; } 
#detail .esg .item .text .icon i::before{ content: ""; display: inline-block; width: 80px; height: 80px; background: #FFF; mask: var(--mask) no-repeat center center / contain; -webkit-mask: var(--mask) no-repeat center center / contain; transition: background 0.5s; }
#detail .esg .item .text h6{ display: inline-block; font-size: 20px; font-weight: 600; color: #333; letter-spacing: -0.03em; margin-bottom: 40px; transition: font-size 0.5s, color 0.5s, left 0.5s, transform 0.5s; }
#detail .esg .item .text .link{ display: flex; transition: left 0.5s, transform 0.5s; }
#detail .esg .item .text .link > i{ display: inline-block; width: 30px; height: 30px; background: #000 url("/img/sub/affiliate/icon_plus.svg") no-repeat center center / contain; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 1; transition: opacity 0.5s; }
#detail .esg .item .text .link .arrowBtn{ font-weight: 400; color: #FFF; opacity: 0; transition: opacity 0.5s; }
#detail .esg .item .text .link .arrowBtn i{ background: var(--mainColor); }

#detail .esg .slick-info{ display: none; }

@media screen and (hover: hover) and (pointer: fine){
    #detail .esg .item .text .link .arrowBtn i{ background: #FFF; }

    #detail .esg .item:hover{ width: var(--afterW); }
    #detail .esg .item:hover .bg{ opacity: 1; }
    #detail .esg .item:hover .text{ padding-inline: var(--afterP); }
    #detail .esg .item:hover .text > *{ left: 0; transform: translateX(0); }
    #detail .esg .item:hover .text .num{ border-color: #FFF; color: #FFF; }
    #detail .esg .item:hover .text .icon i{ background: #FFF; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5); }
    #detail .esg .item:hover .text .icon i::before{ background: var(--mainColor); }
    #detail .esg .item:hover .text h6{ font-size: var(--afterFS); color: #FFF; }
    #detail .esg .item:hover .text .link > i{ opacity: 0; }
    #detail .esg .item:hover .text .link .arrowBtn{ opacity: 1; }  
    #detail .esg .item .text .link .arrowBtn:hover i{ background: var(--mainColor); }
}

@media screen and (max-width: 1700px){
    #detail .esg{
        --num: 35px;
        --afterP: 120px;
    }

    #detail .esg .item .text .icon{ margin: 30px 0; }
    #detail .esg .item .text h6{ font-size: 19px; margin-bottom: 30px; }
}

@media screen and (max-width: 1400px){
    #detail .esg{
        --afterP: 90px;
    }

    #detail .esg .item .text h6{ font-size: 18px; }
}

@media screen and (max-width: 1300px){
    #detail .esg .page-title{ position: static; padding-bottom: 40px; }

    #detail .esg .item-wrap{ width: 70%; display: block; margin: 0 auto; overflow: visible; }
    #detail .esg .item-wrap .slick-list{ margin-right: -20px; overflow: visible; }
    #detail .esg .item-wrap .slick-track{ display: flex; }
    #detail .esg .item,
    #detail .esg .item:hover{ width: unset; }
    #detail .esg .item{ float: unset; height: auto; padding: 100px 0; margin-right: 20px; }  
    #detail .esg .item .bg{ opacity: 1; }
    #detail .esg .item .text{ padding-inline: var(--afterP); }
    #detail .esg .item .text > *{ left: 0; transform: translateX(0); }
    #detail .esg .item .text .num{ border-color: #FFF; color: #FFF; }
    #detail .esg .item .text .icon i{ background: #FFF; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5); }
    #detail .esg .item .text .icon i::before{ background: var(--mainColor); }
    #detail .esg .item .text h6{ font-size: var(--afterFS); color: #FFF; }
    #detail .esg .item .text .link > i{ opacity: 0; }
    #detail .esg .item .text .link .arrowBtn{ opacity: 1; }  

    #detail .esg .slick-info{ display: flex; }
}

@media screen and (max-width: 900px){
    #detail .esg{
        --afterP: 40px;
    }

    #detail .esg .item-wrap{ width: 80%; }
    #detail .esg .item{ padding: 70px 0; }
}


/* news */
#detail .news .news-wrap .slick-list{ margin-right: -40px; }
#detail .news .item{ margin-right: 40px; }
#detail .news .item figure{ display: block; padding-bottom: 51.285%; position: relative; overflow: hidden; }
#detail .news .item figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .news .item .text{ letter-spacing: -0.03em; padding-top: 30px; }
#detail .news .item .text h6,
#detail .news .item .text p{ text-overflow: ellipsis; overflow: hidden; }
#detail .news .item .text h6{ font-size: 26px; font-weight: 600; color: #111; white-space: nowrap; }
#detail .news .item .text p{ height: 3.2em; display: -webkit-box; font-size: 18px; font-weight: 300; color: #111; line-height: 1.6; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 20px 0 40px; }
#detail .news .item .text span{ font-family: var(--engFont); font-size: 16px; font-weight: 400; color: rgba(17, 17, 17, 0.4); }

@media screen and (max-width: 1700px){
    #detail .news .item .text{ padding-top: 25px; }
    #detail .news .item .text h6{ font-size: 23px; }
    #detail .news .item .text p{ margin: 15px 0 30px; }
}

@media screen and (max-width: 1400px){
    #detail .news .news-wrap .slick-list{ margin-right: -25px; }
    #detail .news .item{ margin-right: 25px; }
}

@media screen and (max-width: 1280px){
    #detail .news .news-wrap .slick-list{ margin-right: -20px; }
    #detail .news .item{ margin-right: 20px; }
    #detail .news .item .text h6{ font-size: 21px; }
    #detail .news .item .text p{ font-size: 17px; margin: 10px 0 20px; }
    #detail .news .item .text span{ font-size: 15px; }
}

@media screen and (max-width: 900px){
    #detail .news .item .text h6{ font-size: 20px; }
}


/* location */
#detail .location{
    --width: 47.5%;
    --paddingL: 100px;
}

#detail .location .content{ min-height: 480px; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; padding-left: calc(var(--width) + var(--paddingL)); position: relative; opacity: 1; }
#detail .location .content > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }

#detail .location .fade{ transform: translateX(var(--aosP)); }
#detail .location .fade figure{ margin-bottom: 60px; }
#detail .location .fade figure img{ width: auto; height: 70px; }
#detail .location .fade address ul li{ display: flex; align-items: center; background: #F8F8F8; padding: 40px; }
#detail .location .fade address ul li:not(:last-of-type){ margin-bottom: 10px; }
#detail .location .fade address i{ flex-shrink: 0; width: 50px; height: 50px; display: inline-block; background: var(--mainColor); border-radius: 50%; margin-right: 30px; }
#detail .location .fade address i::before{ content: ""; width: 100%; height: 100%; display: block; }
#detail .location .fade address i.add::before{ background: url("/img/sub/affiliate/location_icon01.png") no-repeat center center / contain; }
#detail .location .fade address i.tel::before{ background: url("/img/sub/affiliate/location_icon02.png") no-repeat center center / contain; }
#detail .location .fade address dl{ flex: 1 1 auto; min-width: 0; letter-spacing: -0.03em; }
#detail .location .fade address dl dt{ font-family: var(--engFont); font-size: 22px; font-weight: 600; color: #000; margin-bottom: 10px; }
#detail .location .fade address dl dd{ font-size: 20px; font-weight: 300; color: #333; }

#detail .location .map{ width: var(--width); position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(var(--aosM)); }
#detail .location .map iframe{ width: 100% !important; height: 100% !important; }

#detail .location .content.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; }

@media screen and (max-width: 1700px){
    #detail .location{
        --paddingL: 70px;
    }
    #detail .location .fade figure{ margin-bottom: 40px; }
    #detail .location .fade figure img{ height: 65px; }
    #detail .location .fade address ul li{ padding: 30px; }
    #detail .location .fade address i{ margin-right: 30px; }
    #detail .location .fade address dl dt{ font-size: 21px; }
    #detail .location .fade address dl dd{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
    #detail .location{
        --width: 50%;
        --paddingL: 60px;
    }
    #detail .location .fade figure{ margin-bottom: 30px; } 
    #detail .location .fade figure img{ height: 55px; } 
    #detail .location .fade address i{ margin-right: 20px; }
    #detail .location .fade address ul li{ padding: 25px; }
    #detail .location .fade address dl dt{ font-size: 20px; }
    #detail .location .fade address dl dd{ font-size: 18px; }

    #detail .location .map{ width: 50%; }
    #detail .location .map iframe{ height: 400px; }
}

@media screen and (max-width: 1100px){
    #detail .location .content{ padding: 0; }

    #detail .location .fade{ transform: translateY(var(--aosP)); }
    #detail .location .fade figure{ margin-bottom: 20px; }

    #detail .location .map{ width: 100%; height: 400px; position: static; margin-bottom: 5px; transform: translateY(var(--aosP)); }
}

@media screen and (max-width: 900px){
    #detail .location .fade figure img{ height: 50px; }
    #detail .location .fade address dl dt{ font-size: 19px; margin-bottom: 7px; }
    #detail .location .fade address dl dd{ font-size: 17px; }
}



/* list */
#detail .listBtn{ text-align: center; }
#detail .listBtn a{ display: inline-block; justify-content: center; align-items: center; background: transparent; border: 2px solid #111; font-size: 20px; font-weight: 500; color: #111; padding: 27px 50px; transition: background 0.4s, color 0.4s; }
#detail .listBtn a i{ width: var(--arrowW); height: var(--arrowH); display: inline-block; background: #111; mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center  left 55% / contain; -webkit-mask: url("/img/sub/affiliate/icon_detail_arrow.svg") no-repeat center  left 55% / contain; transform: scaleX(-1); margin-right: 10px; transition: background 0.4s; } 

@media screen and (hover: hover) and (pointer: fine){
    #detail .listBtn a:hover{ background: #111; color: #FFF; }
    #detail .listBtn a:hover i{ background: #FFF; }
}

@media screen and (max-width: 1700px){
    #detail .listBtn a{ font-size: 19px; padding: 24px 40px; }
}

@media screen and (max-width: 1280px){
    #detail .listBtn a{ font-size: 18px; padding: 20px 35px; }
}




/* popup - affiliate */
#popup.affiliate{
    --innerMH: 92vh;
    --innerPT: 80px;
    --innerLR: 100px;
}
#popup.affiliate{ display: block; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#popup.affiliate.on{ opacity: 1; pointer-events: auto; }
#popup.affiliate .close{ top: 30px; right: 30px; z-index: 10; transform: unset; }
#popup.affiliate .close i{ filter: invert(1); -webkit-filter: invert(1); }
#popup.affiliate .inner{ width: 1700px; background: #FFF; padding: var(--innerPT) calc((var(--innerLR) / 2) - 3px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#popup.affiliate .inner.on{ opacity: 1; pointer-events: unset; }
#popup.affiliate .page-title{ background: #FFF; padding-bottom: 60px; position: sticky; top: 0; left: 0; z-index: 100; }

#popup.affiliate .scroll-box{ max-height: calc(var(--innerMH) - (var(--innerPT) * 2)); padding-inline: calc(var(--innerLR) / 2); overflow-x: clip; overflow-y: auto; }
#popup.affiliate .scroll-box::-webkit-scrollbar{ width: 6px; height: 6px; }
#popup.affiliate .scroll-box::-webkit-scrollbar-thumb{ background: #D9D9D9; border-top: var(--innerPT) solid #FFF; background-clip: padding-box; }
#popup.affiliate .scroll-box::-webkit-scrollbar-track{ background: transparent; }


/* popup - affiliate (대표자 인사말) */
#popup.affiliate .ceo{
    --innerPT: 40px;
    --width: 600px;
}
#popup.affiliate .ceo .scroll-box{ max-height: calc(var(--innerMH) - var(--innerPT)); }
#popup.affiliate .ceo .content{ position: relative; padding-right: var(--width); }
#popup.affiliate .ceo .text{ min-height: 760px; display: flex; flex-direction: column; justify-content: center; letter-spacing: -0.02em; padding-right: 100px; }
#popup.affiliate .ceo .text .column{ margin: 40px 0; }
#popup.affiliate .ceo .text .column > p:not(:first-of-type){ margin-top: 20px; }
#popup.affiliate .ceo .text h6{ font-size: 42px; font-weight: 600; color: #111; }
#popup.affiliate .ceo .text p{ font-size: 24px; font-weight: 600; color: var(--mainColor); line-height: 1.6; }
#popup.affiliate .ceo .text .p-box p{ font-size: 19px; font-weight: 300; color: #111; line-height: 1.7; margin-top: 20px; }
#popup.affiliate .ceo .text .name{ display: flex; align-items: center; font-size: 20px; font-weight: 500; color: #333; }
#popup.affiliate .ceo .text .name strong{ display: inline-block; font-family: var(--pointFont); font-size: 34px; font-weight: 400; margin-left: 30px; }

#popup.affiliate .ceo .img{ width: var(--width); position: absolute; top: 0; right: 0; bottom: 0; }
#popup.affiliate .ceo .img figure,
#popup.affiliate .ceo .img figure img{ width: 100%; height: 100%; }
#popup.affiliate .ceo .img figure img{ object-fit: cover; }


/* popup - affiliate (회사 현황) */
#popup.affiliate .info .flex-box{ display: flex; justify-content: space-between; letter-spacing: -0.03em; text-align: center; }
#popup.affiliate .info .flex-box > *{ width: calc((100% - 60px) / 2); }
#popup.affiliate .info .tit{ margin-bottom: 10px; }
#popup.affiliate .info .tit h6{ font-size: 26px; font-weight: 600; color: #111; }
#popup.affiliate .info .tit p{ min-height: 1.3em; font-size: 18px; font-weight: 400; color: #999; text-align: right; }

#popup.affiliate .info table th,
#popup.affiliate .info table td{ font-family: var(--engFont); border: 1px solid var(--border); }
#popup.affiliate .info table th{ width: 240px; background: #F5F5F5; font-size: 20px; font-weight: 500; color: #000; }
#popup.affiliate .info table td{ font-size: 19px; font-weight: 300; color: #333; }
#popup.affiliate .info table .min80,
#popup.affiliate .info table .min68{ display: flex; flex-direction: column; justify-content: center; padding: 10px; }
#popup.affiliate .info table .min80{ min-height: 80px; }
#popup.affiliate .info table .min68{ min-height: 68px; }


/* popup - affiliate (회사 연혁) */
#popup.affiliate .history{
    --left: 635px;
    --rightT: 20px;
    --before: 8px;
    --after: 12px;
}
#popup.affiliate .history .flex-box{ display: flex; }
#popup.affiliate .history .img{ flex-shrink: 0; width: var(--left); padding-right: 135px; }
#popup.affiliate .history .sticky{ position: sticky; top: 130px; left: 0; }
#popup.affiliate .history .sticky p{ font-size: 4.8rem; font-weight: 500; color: #FFF; letter-spacing: -0.02em; padding: 40px; position: absolute; top: 0; left: 0; z-index: 10; }
#popup.affiliate .history .img figure{ display: block; padding-bottom: 110%; position: relative; overflow: hidden; }
#popup.affiliate .history .img figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#popup.affiliate .history .text{ flex: 1 1 auto; min-width: 0; letter-spacing: -0.02em; position: relative; }
#popup.affiliate .history .text::before{ content: ""; width: 1px; height: calc(100% - var(--rightT)); background: #D9D9D9; position: absolute; top: var(--rightT); left: 0; }
#popup.affiliate .history .text .item{ display: flex; align-items: flex-start; }
#popup.affiliate .history .text .item:not(:last-of-type){ margin-bottom: 60px; }
#popup.affiliate .history .text .year{ flex-shrink: 0; width: 235px; position: relative; }
#popup.affiliate .history .text .year i{ width: var(--before); height: var(--before); background: #BBB; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); box-sizing: content-box; transition: all 0.4s; }
#popup.affiliate .history .text .year strong{ display: inline-block; padding-left: 85px; font-family: var(--engFont); font-size: 36px; font-weight: 600; color: #555; transition: color 0.4s; }
#popup.affiliate .history .text .dl{ flex: 1 1 auto; min-width: 0; padding-top: 9px; }
#popup.affiliate .history .text .dl dl{ display: flex; align-items: baseline; }
#popup.affiliate .history .text .dl dl:not(:last-of-type){ margin-bottom: 20px; }
#popup.affiliate .history .text .dl dl dt{ flex-shrink: 0; width: 40px; font-family: var(--engFont); font-size: 20px; font-weight: 600; color: #555; }
#popup.affiliate .history .text .dl dl dd{ flex: 1 1 auto; min-width: 0; font-size: 19px; font-weight: 300; color: #555; }

#popup.affiliate .history .text .item.on .year i{ width: var(--after); height: var(--after); background: var(--mainColor); border: 9px solid rgba(255, 255, 255, 0.8); }
#popup.affiliate .history .text .item.on .year strong{ color: var(--mainColor); }


/* popup - affiliate (인증 및 수상내역) */
#popup.affiliate .certify{ width: 1000px; background: #FFF; padding: 40px; }
#popup.affiliate .certify .close{ top: 5px; right: 5px; }
#popup.affiliate .certify .img-wrap .slick-list{ margin-right: -20px; }
#popup.affiliate .certify .img-wrap .slick-track{ display: flex; }  
#popup.affiliate .certify .img{ float: unset; height: auto; display: flex; flex-direction: column; justify-content: center; margin-right: 20px; }
#popup.affiliate .certify .img figure{ width: 100%; }
#popup.affiliate .certify .img figure img{ width: 100%; max-height: 75vh; object-fit: contain; }

#popup.affiliate .certify .slick-dots{ display: flex; justify-content: center; margin-top: 25px; }
#popup.affiliate .certify .slick-dots li{ width: 20px; height: 3px; background: var(--border); cursor: pointer; }
#popup.affiliate .certify .slick-dots li:not(:last-of-type){ margin-right: 5px; }
#popup.affiliate .certify .slick-dots li button{ display: none; }
#popup.affiliate .certify .slick-dots li.slick-active{ width: 30px; background: var(--mainColor); }


@media screen and (max-width: 1700px){
    #popup.affiliate{
        --innerPT: 50px;
        --innerLR: 70px;
    }
    #popup.affiliate .close{ right: 15px; }
    #popup.affiliate .page-title{ padding-bottom: 40px; }

    /* popup - affiliate (대표자 인사말) */
    #popup.affiliate .ceo{
        --width: 500px;
    }
    #popup.affiliate .ceo .text{ padding-right: 70px; }
    #popup.affiliate .ceo .text .column{ margin: 30px 0; }
    #popup.affiliate .ceo .text h6{ font-size: 36px; }
    #popup.affiliate .ceo .text p{ font-size: 22px; }
    #popup.affiliate .ceo .text .p-box p{ font-size: 18px; }
    #popup.affiliate .ceo .text .name{ font-size: 19px; }
    #popup.affiliate .ceo .text .name strong{ font-size: 30px; }

    /* popup - affiliate (회사 현황) */
    #popup.affiliate .info .flex-box > *{ width: calc((100% - 40px) / 2); }
    #popup.affiliate .info .tit h6{ font-size: 23px; }
    #popup.affiliate .info .tit p{ font-size: 17px; }

    #popup.affiliate .info table th{ width: 200px; font-size: 19px; }
    #popup.affiliate .info table td{ font-size: 18px; }
    #popup.affiliate .info table .min80{ min-height: 70px; }
    #popup.affiliate .info table .min68{ min-height: 60px; }

    /* popup - affiliate (회사 연혁) */
    #popup.affiliate .history{
        --left: 550px;
    }
    #popup.affiliate .history .img{ padding-right: 100px; }
    #popup.affiliate .history .sticky p{ padding: 30px; }

    #popup.affiliate .history .text .year strong{ font-size: 32px; padding-left: 65px; }
    #popup.affiliate .history .text .dl dl dt{ font-size: 19px; }
    #popup.affiliate .history .text .dl dl dd{ font-size: 18px; }
	
	/* popup - affiliate (인증 및 수상내역) */
	#popup.affiliate .certify{ padding-inline: 30px; }
}

@media screen and (max-width: 1450px){
    #popup.affiliate br{ display: none; }
}

@media screen and (max-width: 1280px){
    #popup.affiliate{
        --innerPT: 40px;
        --innerLR: 40px;
    }
    #popup.affiliate .close{ top: 0; right: 0; }
    #popup.affiliate .page-title{ padding-bottom: 30px; }

    /* popup - affiliate (대표자 인사말) */
    #popup.affiliate .ceo{
        --innerPT: 40px;
        --width: 450px;
    }
    #popup.affiliate .ceo .text{ padding-right: 50px; }
    #popup.affiliate .ceo .text .column{ margin: 20px 0; }
    #popup.affiliate .ceo .text .column > p:not(:first-of-type){ margin-top: 15px; }
    #popup.affiliate .ceo .text h6{ font-size: 32px; }
    #popup.affiliate .ceo .text p{ font-size: 20px; }
    #popup.affiliate .ceo .text .p-box p{ font-size: 17px; margin-top: 15px; }
    #popup.affiliate .ceo .text .name{ font-size: 18px; }
    #popup.affiliate .ceo .text .name strong{ font-size: 26px; margin-left: 20px; }

    /* popup - affiliate (회사 현황) */
    #popup.affiliate .info .flex-box > *{ width: calc((100% - 20px) / 2); }
    #popup.affiliate .info .tit h6{ font-size: 21px; }
    #popup.affiliate .info .tit p{ font-size: 16px; }

    #popup.affiliate .info table th{ width: 150px; font-size: 18px; }
    #popup.affiliate .info table td{ font-size: 17px; }
    #popup.affiliate .info table .min80{ min-height: 58.5px; }
    #popup.affiliate .info table .min68{ min-height: 50px; }

    /* popup - affiliate (회사 연혁) */
    #popup.affiliate .history{
        --left: 450px;
        --after: 8px;
        --rightT: 15px;
    }
    #popup.affiliate .history .img{ padding-right: 70px; }
    #popup.affiliate .history .sticky{ top: 130px; }
    #popup.affiliate .history .sticky p{ padding: 30px; }

    #popup.affiliate .history .text .year{ width: 160px; }
    #popup.affiliate .history .text .year strong{ font-size: 28px; padding-left: 45px; }
    #popup.affiliate .history .text .dl{ padding-top: 7px; }
    #popup.affiliate .history .text .dl dl dt{ font-size: 18px; }
    #popup.affiliate .history .text .dl dl dd{ font-size: 17px; }

    #popup.affiliate .history .text .item.on .year i{ border: 7px solid rgba(255, 255, 255, 0.8); }
	
	/* popup - affiliate (인증 및 수상내역) */
	#popup.affiliate .certify .img figure img{ max-height: 70vh; }
}

@media screen and (max-width: 1200px){
    /* popup - affiliate (회사 현황) */
    #popup.affiliate .info .flex-box{ flex-direction: column; }
    #popup.affiliate .info .flex-box > *{ width: 100%; }
    #popup.affiliate .info .flex-box > *:not(:last-of-type){ margin-bottom: 60px; }
    #popup.affiliate .info .tit p{ min-height: unset; padding-top: 5px; }
}

@media screen and (max-width: 1024px){
    #popup.affiliate .scroll-box::-webkit-scrollbar-thumb{ border-top-width: 0; }

    /* popup - affiliate (대표자 인사말) */
    #popup.affiliate .ceo .content{ padding-right: 0; }
    #popup.affiliate .ceo .text{ padding-right: 0; }
    #popup.affiliate .ceo .text .column{ margin-top: 25px; }
    #popup.affiliate .ceo .text h6{ margin-bottom: 25px; }
    #popup.affiliate .ceo .img{ width: 100%; position: static; }

    /* popup - affiliate (회사 연혁) */
    #popup.affiliate .history .flex-box{ flex-direction: column; }
    #popup.affiliate .history .img{ width: 100%; padding-right: 0; margin-bottom: 30px; }
    #popup.affiliate .history .text{ padding-left: 10px; }
    #popup.affiliate .history .text::before{ left: 9px; }
}

@media screen and (max-width: 900px){
    /* popup - affiliate (대표자 인사말) */
    #popup.affiliate .ceo .text h6{ font-size: 26px; }
    #popup.affiliate .ceo .text p{ font-size: 19px; }
    #popup.affiliate .ceo .text .name{ font-size: 17px; }
    #popup.affiliate .ceo .text .name strong{ font-size: 24px; }

    /* popup - affiliate (회사 현황) */
    #popup.affiliate .info table th{ width: 100px; font-size: 17px; }
    #popup.affiliate .info table .min80{ min-height: 55px; }

    /* popup - affiliate (회사 연혁) */
    #popup.affiliate .history .sticky p{ padding: 20px 25px; }

    #popup.affiliate .history .text .item{ flex-direction: column; }
    #popup.affiliate .history .text .year strong{ font-size: 24px; padding-left: 30px; }
    #popup.affiliate .history .text .dl{ padding-left: 30px; padding-top: 10px; }
    #popup.affiliate .history .text .dl dl:not(:last-of-type){ margin-bottom: 10px; }
    #popup.affiliate .history .text .dl dl dt{ width: 30px; font-size: 17px; }
}

@media screen and (max-width: 650px){
    #popup.affiliate{
        --innerPT: 35px;
        --innerLR: 35px;
    }

    /* popup - affiliate (대표자 인사말) */
    #popup.affiliate .ceo{
        --innerPT: 35px;
    }
	
	/* popup - affiliate (인증 및 수상내역) */
	#popup.affiliate .certify{ padding-inline: 25px; }
	#popup.affiliate .certify .img figure img{ max-height: 60vh; }
}