﻿/* 파트너 메인 */

/* 베스트 파트너 */
#best-partners-area { width: 94%; margin:2.7% auto 3%;}
#best-partners-area .best-partner.slick-slide { border: 0.1rem solid var(--default-gray); border-radius: 1rem; display: flex; align-items: center; justify-content: space-between; padding:0.7% 0.4%; margin:0.1% 0.1%;}
#best-partners-area .best-partner figure { width: 40%; display: flex; flex-direction: column; align-items: center; }
#best-partners-area .best-partner figure > div { width: 18rem; height: auto; border-radius: 50%; aspect-ratio: 1 / 1; background-color: var(--default-gray); overflow: hidden; margin-bottom: 8%; }
#best-partners-area .best-partner figure > div img { margin-left: calc((20% * -1)); width: 25rem; }
#best-partners-area .best-partner figure > div img.kjc { margin-left: calc((13% * -1));}
#best-partners-area .best-partner figure figcaption {text-align: center; font-size: 2rem; color:#303030;}
#best-partners-area .best-partner > div { width: 56%; text-align: center; }
#best-partners-area .best-partner > div b { font-size: 2.6rem; color:#303030;}
#best-partners-area .best-partner > div p { font-size: 2.1rem; word-break: keep-all; margin: 5% 0; line-height: 1.35; color:#303030;}
#best-partners-area .best-partner > div a { display: inline-block; width: 15rem; border: 0.1rem solid var(--default-red); padding: 4% 0; text-align: center; color: var(--default-red); font-size: 2rem; font-weight: bold; border-radius: 5rem; }
#best-partners-area .best-partner > div a::after { content:''; display:inline-block; width:1.55rem; height:auto; aspect-ratio: 45 / 48; margin-left:5%; margin-right:-5%; background:url('https://swimg.wowtv.co.kr//stockwinN/static/images/icons/home.png') no-repeat right; background-size:contain; filter: invert(70%) sepia(83%) saturate(5498%) hue-rotate(332deg) brightness(109%) contrast(101%);}
#best-partners-area .best-partner.app { border-color: transparent; padding-top: 0; padding-bottom:0;}
#best-partners-area .best-partner.app img { border-radius:1rem; }

#best-partners-area .best-partner-dots { width: 100%; text-align: center; margin-top: 3%; }
#best-partners-area .best-partner-dots li { display: none; }
#best-partners-area .best-partner-dots li.slick-active { display:block; }
#best-partners-area .best-partner-dots li > span { font-size: 2rem; font-weight: bold; }
#best-partners-area .best-partner-dots li > span::before { content: ' '; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/pause_circle_black.png') no-repeat center; display: inline-block; width: 2rem; height: auto; aspect-ratio: 41 / 41; background-size: 100%; margin-right: 2%; vertical-align:middle;}
#best-partners-area .best-partner-dots li > span span { font-weight: normal; }


/* 전체 파트너 */
#all-partner {background-color: var(--default-background); padding: 5% 4%; margin: 0;}
#all-partner p {font-size: 3rem; text-align: center; margin:2% 0 5%; line-height:1.35;}
#all-partner > div {display: flex; flex-wrap: wrap; justify-content: flex-start; gap:2%;}
#all-partner .partner-card {width: calc(100% / 3.15); background-color: #fff; text-align: center; position: relative; padding: 5% 0; border-radius: 2rem; margin-bottom: 2.5%; box-shadow: 0px 0px 2rem 0px rgba(214, 215, 216, 0.3);}
#all-partner .partner-card div {width: 100%; margin: 0 0 5%; position: relative;}
#all-partner .partner-card div a {display: flex ; align-items: center; justify-content: center; width: 55%; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--default-background); overflow: hidden; margin: 0 auto;}
#all-partner .partner-card div a img { width: 110%; margin-top: 10%; }

#all-partner .partner-card span {font-size: 1.7rem; font-weight: 500; display: inline-block; width: 55%; word-break: keep-all;}

#all-partner .dibs-btn {position: absolute; right: 17%; bottom: 0; z-index: 3; padding: 0;}
#all-partner .dibs-btn::before {content: ''; display: block; width: 3.2rem; height: auto; aspect-ratio: 62 / 59; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/heart_empty_line.png') no-repeat right; background-size: contain;}
#all-partner .dibs-btn.on::before {background-image: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/heart_fill_line.png');}

/* 신규 파트너의 경우 new 표시 */
#all-partner .partner-card.new div a {background-color: #fde6e6;}
#all-partner .partner-card.new span::before {content: 'NEW'; color: #ff0000; font-size: 0.8rem; vertical-align: top; margin: 0 1% 0 -20%;}

/* 라이브 중인 파트너의 경우 live 표시 */
#all-partner .partner-card.live div a {background-color: #fde6e6;}
#all-partner .partner-card.live::before {content:''; display: block; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/live_s.png') no-repeat left; background-size: contain; width: 5rem; aspect-ratio: 23 / 13; position:absolute; top: 16%; left: 11%; z-index: 3;}

#banner-top.partner-main {background-color:var(--default-background);}

/*********************************/

/* 파트너 홈 */

/* 파트너 소개 */
#intro-area #btn-dibs {position:absolute; top:10%; right:4%; z-index:7;}
#intro-area #btn-dibs::before {content:''; display:block; width:2.6rem; height:2.6rem; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/heart_empty.png') no-repeat center; background-size:contain;}
#intro-area #btn-dibs.on::before {background-image:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/heart_fill.png');}

@media (max-width:767px) {
    #all-partner .partner-card div a {width: 52%;}
    #all-partner .partner-card.live::before {width: 4.5rem; top: 18%;}
}

@media (max-width:600px) {
    #best-3-partners .partner-img {width: calc(100% / 2.5);}
    #all-partner .dibs-btn::before {width: 2.8rem;}
}

@media (max-width:450px){
    #all-partner .partner-card.new::after {width: 2.4rem; left: 18%;}

    #best-partners-area .best-partner figure > div {width: 15rem;}
    #best-partners-area .best-partner figure > div img {width: 21rem; margin-left: calc(20% * -1);}
    #best-partners-area .best-partner figure > div img.kjc {margin-left: calc(13% * -1);}

    #best-partners-area .best-partner > div { width: 55%;}
    #best-partners-area .best-partner > div a {width:13rem;}
}

@media (max-width:400px) {
    #all-partner .partner-card.live::before {width: 4rem;}
}