@charset "utf-8";
/* ============================================================================
   v2 pc / main — 메인 본문 (M-1 ~ M-10)
   요구사항 : docs/requirements-260904.md
   설계     : docs/v2-track-design-260904.md

   시안 실측 (get_design_context / metadata_DESIGN_PC_0-1.xml) 기준이다. 추정값 없음.
     페이지 폭 1440 / 본문 컨테이너 1140 (x 150)
     세로 리듬 : 비주얼 끝 666 → all ways 666~726 → 제목 808 → 카드 878~2210
                → 키워드 안내 2239 → 대리점+뉴스 묶음 2392~3334
   마크업은 MO 와 공용이다 (view/kor/v2/index.php). 여기서는 배치만 다르게 준다.
   ============================================================================ */

.v2_main { padding-bottom: 120px; }

/* ------------------------------------------------------- 공통 섹션 --- */
/* 섹션 제목 : SemiBold 28 / h 35 / 가운데 (4:136) */
.v2_msec { width: 1140px; margin: 0 auto; }
.v2_msec_tit {
    font-size: 28px; font-weight: 600; line-height: 35px;
    text-align: center; color: var(--dark-color);
}

/* ------------------------------------------------- M-1 메인 비주얼 --- */
/* 시안 187:1623 : 중앙 1260×565 radius 25 / 좌우 peek 1150×516 opacity .7 / 간격 20
   블록 상하 패딩 24. peek 은 축소다 — 1150/1260 = .913, 516/565 = .913 으로 같다.
   슬라이드 박스를 1260 으로 두고 .913 로 줄이면 가장자리가 55 안쪽으로 들어오므로
   시안의 간격 20 을 맞추려면 spaceBetween 을 -35 로 준다 (main_v2.js).
   GNB 와 붙이므로 상단 패딩은 없다. 하단 24 도 걷어냈다 — allways 와 10 으로 붙이라는 요청. */
.v2_visual { position: relative; padding: 0; }

.v2_visual_swiper { width: 100%; overflow: hidden; }
.v2_visual_swiper .swiper-slide {
    -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
    width: 1260px;
    -webkit-transform: scale(.913); transform: scale(.913);
    opacity: .7;
    -webkit-transition: -webkit-transform .4s ease, opacity .4s ease;
    transition: transform .4s ease, opacity .4s ease;
}
.v2_visual_swiper .swiper-slide-active {
    -webkit-transform: scale(1); transform: scale(1);
    opacity: 1;
}

/* 565 ÷ 1260 = 44.841% */
.v2_visual_item {
    position: relative; display: block; width: 100%; height: 0;
    padding-bottom: 44.841%;
    border-radius: 25px; overflow: hidden;
    background: var(--gray-1-color);
}
.v2_visual_item img,
.v2_visual_item video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    -o-object-fit: cover; object-fit: cover;
}

/* 화살표 40×40. 두 개의 간격 1206 → 중앙에서 ±583 */
/* top:50% 는 블록 중앙이다. 하단 패딩 24 때문에 슬라이드 중앙보다 12 내려가므로 되돌린다 */
.v2_visual_nav {
    position: absolute; top: 50%; left: 50%; z-index: 2;
    margin-top: -12px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sub-red-color);
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    -webkit-transition: background-color .2s ease; transition: background-color .2s ease;
}
.v2_visual_nav:hover { background: var(--primary-color); }
.v2_visual_prev { margin-left: -583px; }
.v2_visual_next { margin-left: 583px; }
/* 흰 chevron. 별도 아이콘 자산 없이 테두리로 그린다 */
.v2_visual_nav:before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.v2_visual_prev:before {
    -webkit-transform: translate(-30%, -50%) rotate(-135deg);
    transform: translate(-30%, -50%) rotate(-135deg);
}
.v2_visual_next:before {
    -webkit-transform: translate(-70%, -50%) rotate(45deg);
    transform: translate(-70%, -50%) rotate(45deg);
}

/* dot 48×10, 비주얼 하단에서 18 (D-37 : 표시 전용) */
/* 10px 3개 + 간격 9 = 48. 좌우 바깥 여백까지 더해 57 이라 컨테이너를 48 로 두면 줄바꿈된다.
   위치는 시안(블록 하단 18)이 아니라 슬라이드 안쪽으로 올렸다 — 담당자 지시.
   블록 하단 패딩이 없어 슬라이드 하단 = 블록 하단. 그보다 20 위에 둔다. */
.v2_visual_dots {
    position: absolute; left: 50%; bottom: 20px; z-index: 3;
    margin-left: -28.5px;
    width: 57px; font-size: 0; text-align: center; white-space: nowrap;
}
/* v1 swiper.css 의 .swiper-pagination-bullet 에 transform: skew(-25deg) 가 걸려 있어
   (구버전 사선 도트) 되돌리지 않으면 원이 기울어진다 */
.v2_visual_dots .swiper-pagination-bullet {
    width: 10px; height: 10px; margin: 0 4.5px;
    background: var(--gray-3-color); opacity: 1; border-radius: 50%;
    -webkit-transform: none; transform: none;
    cursor: default;
}
.v2_visual_dots .swiper-pagination-bullet-active { background: var(--sub-red-color); }

/* ------------------------------------------- D-39 한줄 공지 --- */
/* 최상단 띠배너로 올라갔다. 스타일은 pc/layout.css 가 갖는다. */

/* ------------------------------------------------ M-3 all ways 모션 --- */
/* 시안 139:199 : 블록 높이 60 / 로고 145×44 / 간격 3
   안내문 Medium 11 #6b6b6b (→ --gray-4 스냅) + arrow
   위 간격 30 : 롤링-allways 사이. 처음 10 요청(띠배너 노출 상태에서 본 값)이 띠배너 없이는 좁아 보인다는 재요청.
   롤링 하단 패딩이 0 이라 실제 간격 = 이 값. 띠배너 유무로 롤링 높이는 바뀌지 않는다. */
.v2_allways { margin-top: 30px; padding: 0; }
.v2_allways_link { display: block; text-align: center; }
.v2_allways_motion { position: relative; display: block; height: 44px; }
.v2_allways_motion img { width: 145px; height: 44px; }
/* Lottie 캔버스(viewBox 1350×100) 안에서 정지 상태 로고가 가운데도 아니고 크기도 시안과 다르다.
   lottie 가 svg 에 inline style(width/height 100%)을 걸기 때문에 svg 자체 크기는 CSS 로
   못 잡는다. 반드시 이 캔버스 박스의 크기·위치로 맞춘다.
   렌더를 픽셀로 재서 계산한 값이다 (§9-4 8번 : 색·위치는 눈으로 찍어 확인).
     캔버스 안 로고(viewBox 단위) : 폭 271.5 / 중앙 x 667.2 / 상단 y 7.45
     시안 로고 폭 145 → 배율 145 ÷ 271.5 = 0.534
     캔버스 1350×100 → 721×53.4 / 로고 중앙 = 667.2 × 0.534 = 356
     → left:50% 에서 -356 만큼 당기면 로고가 화면 중앙에 온다
     → 로고 상단 오프셋 7.45 × 0.534 = 4 이므로 캔버스를 4 위로 올린다
   ※ allways_pc.json 을 교체하면 이 값을 다시 재야 한다.
   ⚠ JSON 자체 문제 : 재생하면 C_P 레이어가 x 675 → 490 으로 왼쪽으로 흐른다.
     가운데에서 양쪽으로 펼쳐지는 모션이 아니라 왼쪽으로 쏠린다. 자산 재출력 대상. */
.v2_allways_canvas {
    position: absolute; top: -4px; left: 50%;
    width: 721px; height: 53.4px; margin-left: -356px;
    pointer-events: none;
}
.v2_allways_more {
    display: inline-block; margin-top: 6px;
    font-size: 13px; font-weight: 500; font-style: normal;
    color: var(--gray-4-color);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_allways_more:after { content: " \2192"; margin-left: 2px; }
.v2_allways_link:hover .v2_allways_more { color: var(--primary-color); }

/* ------------------------------------------------ M-5 카드 그리드 --- */
/* 시안 2027:1257 : 컨테이너 1140 / 카드 367×425.333 / 열 간격 20 · 행 간격 28
   D-24 · D-38 : 개수 제한 없이 3열로 흘리고, 마지막 줄이 덜 차면 좌측 정렬 */
.v2_msec_bike { margin-top: 82px; }

.v2_bike_list {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin-top: 35px;
}
.v2_bike_list > li {
    width: -webkit-calc((100% - 40px) / 3);
    width: calc((100% - 40px) / 3);
    margin-top: 28px;
}
.v2_bike_list > li:not(:nth-child(3n+1)) { margin-left: 20px; }
.v2_bike_list > li:nth-child(-n+3) { margin-top: 0; }

/* 카드 : padding 55/32/29/34 / radius 25 / bg #f6f6f6 / border .5px #cdd1d5 */
.v2_bike_card {
    position: relative; overflow: hidden;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 425.333px; padding: 55px 32px 29px 34px;
    text-align: center;
    background: var(--card-bg-color);
    border: .5px solid var(--card-border-color); border-radius: 25px;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
}

/* 제목 SemiBold 28. 정적은 검정, hover 시 빨강 + 아이콘 등장 (D-2 / D-32 / D-50) */
.v2_bike_tit {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 100%;
    font-size: 28px; font-weight: 600; line-height: 1.2;
    color: var(--dark-color);
    word-break: keep-all;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
/* 아이콘은 DB(bn_img_save_path2)에서 오지만 PC 정적 상태에는 없다 */
/* 폭은 width 가 아니라 max-width 로 연다.
     아이콘 9종의 가로 비율이 제각각이다(높이 26 기준 로드 54.5px ~ 전기자전거 18px).
     width 를 26px 로 고정하면 넓은 아이콘 5종이 overflow:hidden 에 잘린다.
     width:auto + max-width 전이로 바꾸면 폭은 아이콘 실제 비율대로 잡히고
     등장 애니메이션(0 → 열림)도 그대로 유지된다.
     max-width 60px 은 가장 넓은 로드(54.5px)보다 크기만 하면 되는 상한값이다. */
.v2_bike_ico {
    display: block; width: auto; max-width: 0; margin-right: 0; overflow: hidden;
    -webkit-transition: max-width .2s ease, margin-right .2s ease;
    transition: max-width .2s ease, margin-right .2s ease;
}
.v2_bike_ico img { display: block; width: auto; height: 26px; max-width: none; }

/* 부제 Regular 19 / lh 25 / 2줄(h 50). 제목과의 간격 13 */
.v2_bike_desc {
    display: block; width: 100%; margin-top: 13px;
    font-size: 19px; font-weight: 400; line-height: 25px;
    color: var(--dark-color);
}

/* 카드 이미지 : 시안은 카드 안에 절대배치한다 (left 10.9% / top 40.89% / 77.91% × 44.83%) */
.v2_bike_thumb {
    position: absolute; left: 10.9%; top: 40.89%; z-index: 0;
    display: block; width: 77.91%; height: 44.83%;
}
.v2_bike_thumb img {
    display: block; width: 100%; height: 100%;
    -o-object-fit: contain; object-fit: contain;
    -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease;
}

/* 제품 보기 Medium 17 #71797f + arrow 14 */
.v2_bike_more {
    position: relative; z-index: 1;
    display: block; margin-top: auto;
    font-size: 17px; font-weight: 500; font-style: normal;
    color: var(--text-sub-color);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
/* 화살표는 hover 에서 오른쪽으로 밀린다 — 키워드 링크(.v2_bike_keyword)와 같은 동작이다 */
.v2_bike_more:after {
    content: " \2192"; margin-left: 0;
    position: relative; left: 0;
    -webkit-transition: left .25s ease; transition: left .25s ease;
}

/* hover (D-40 Variant2 / D-50) : 배경 흰색 + 테두리 빨강 + 아이콘 등장 + 제목·제품보기 빨강 */
.v2_bike_card:hover {
    background: #fff;
    border-color: var(--primary-color);
}
.v2_bike_card:hover .v2_bike_tit,
.v2_bike_card:hover .v2_bike_more { color: var(--primary-color); }
.v2_bike_card:hover .v2_bike_more:after { left: 9px; }
.v2_bike_card:hover .v2_bike_ico { max-width: 60px; margin-right: 8px; }
/* 이미지도 살짝 확대한다. 카드가 overflow:hidden 이라 밖으로 새지 않는다 */
.v2_bike_card:hover .v2_bike_thumb img {
    -webkit-transform: scale(1.06); transform: scale(1.06);
}

/* ----------------------------------------------- M-6 키워드 안내 --- */
/* 시안 210:878 : 블록 58 / 카드 그리드에서 29 아래
   "아직 잘 모르겠어요." Medium 17 #a1a5ae h35
   "키워드로 자전거 찾기 →" SemiBold 19 #55585b (→ --gray-4 스냅) + arrow 18 */
.v2_bike_help { margin-top: 29px; text-align: center; }
.v2_bike_help_txt {
    display: block; height: 35px;
    font-size: 17px; font-weight: 500; line-height: 35px;
    color: var(--text-mute-color);
}
/* hover 에서 화살표만 오른쪽으로 9 이동한다.
   margin-left 로 밀면 요소 폭이 늘어나고, .v2_bike_help 가 text-align:center 라
   글자까지 왼쪽으로 따라 움직인다. position:relative + left 는 렌더 위치만 옮긴다.
   transform 은 :after 가 inline 이라 적용되지 않는다. */
.v2_bike_keyword {
    display: inline-block;
    font-size: 19px; font-weight: 600;
    color: var(--gray-4-color);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_bike_keyword:after {
    content: " \2192"; margin-left: 0;
    position: relative; left: 0;
    -webkit-transition: left .25s ease; transition: left .25s ease;
}
.v2_bike_keyword:hover { color: var(--primary-color); }
.v2_bike_keyword:hover:after { left: 9px; }

/* -------------------------------------------- M-7 대리점 지도 카드 --- */
/* 시안 198:1889 : 1138×452 / radius 20 / border 1px #d1dbea / padding 35/605/40/35
   지도는 카드 전체를 덮는 배경이다. 0929 교체 이미지(dealer_map_2x.jpg 2280×870)는 카드(1140×434)의 2배로
   구도가 잡혀 와서 확대·오프셋 없이 폭 100% 가운데 */
.v2_msec_dealer { margin-top: 95px; }

.v2_dealer_card {
    position: relative; overflow: hidden;
    margin-top: 35px; padding: 35px 605px 40px 35px;
    background: var(--card-bg-color) url('../../images/main/dealer_map_2x.jpg') no-repeat 50% 50%;
    background-size: 100% auto;
    border: 1px solid var(--chip-border-color); border-radius: 20px;
    -webkit-transition: background-size .4s ease; transition: background-size .4s ease;
}
/* 마우스 오버 시 지도를 살짝 확대한다 (× 1.05) */
.v2_dealer_card:hover { background-size: 105% auto; }
.v2_dealer_info { position: relative; z-index: 1; }

.v2_dealer_eyebrow { display: block; font-size: 35px; font-weight: 600; line-height: 35px; }
.v2_dealer_count {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    margin-top: 5px;
}
.v2_dealer_count strong {
    font-size: 90px; font-weight: 700; line-height: 86px;
    letter-spacing: -2.7px;
    color: var(--primary-color);
}
.v2_dealer_count span { margin-left: 2px; font-size: 37px; font-weight: 600; line-height: 59px; }

.v2_dealer_desc { margin-top: 4px; font-size: 26px; font-weight: 500; line-height: 33px; }

.v2_dealer_sub { margin-top: 14px; }
.v2_dealer_sub > li {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    line-height: 30px;
}
/* 수치 칸 고정폭 65 — 라벨(span) 시작점을 두 줄 같게. 0929 문구(90+ / 750+) 기준 84 → 65 (지시값, 750+ 실폭 약 50) */
.v2_dealer_sub strong {
    -webkit-box-flex: 0; -ms-flex: 0 0 65px; flex: 0 0 65px; width: 65px;
    font-size: 20px; font-weight: 700; color: var(--primary-color);
}
.v2_dealer_sub span { font-size: 20px; font-weight: 500; }

/* CTA : PC 는 회색이다 (시안 198:1889 — MO 의 #F55B5C 와 다르다).
   GNB 카드 CTA(.v2_card_cta)와 같은 색·모양이다. 240×52 / radius 144 */
.v2_dealer_cta {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 240px; height: 52px; margin-top: 35px; padding: 0 0 0 30px;
    font-size: 20px; font-weight: 600; color: #fff;
    background: var(--btn-gray-color);
    border: 1px solid var(--text-mute-color); border-radius: 144px;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
}
/* 버튼이 240 고정폭이라 화살표를 당긴 만큼 오른쪽에 빈 자리가 남는다 */
.v2_dealer_cta:after { content: " \2192"; margin-left: 7px; }
/* CTA 자체가 아니라 카드 전체에 마우스를 올리면 같이 강조된다 (담당자 지시) */
.v2_dealer_card:hover .v2_dealer_cta {
    background: var(--primary-color); border-color: var(--primary-color);
}

/* --------------------------------------------- M-8 뉴스·이벤트 --- */
/* 시안 198:2104 : 뉴스 875 + 간격 20 + SNS 245 = 1140, 둘 다 높이 255 / padding 35
   radius 20 / bg #f6f6f6 / border .4~.5px #cdd1d5 */
.v2_msec_news { margin-top: 95px; }

.v2_news_wrap {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    margin-top: 35px;
}
.v2_news,
.v2_sns_box {
    height: 255px; padding: 35px;
    background: var(--card-bg-color);
    border: .5px solid var(--card-border-color); border-radius: 20px;
}
.v2_news { width: 875px; margin: 0; }
.v2_sns_box { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0 0 0 20px; }

.v2_news_head {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    height: 31px;
}
.v2_news_head strong { font-size: 26px; font-weight: 600; }
.v2_news_more {
    font-size: 18px; font-weight: 500; color: var(--text-sub-color);
    text-decoration: underline;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_news_more:hover { color: var(--primary-color); }

.v2_news_list { margin-top: 12px; }
/* 구분선 : 시안 #B7C3CC 0.5px → 팔레트 밖이라 같은 계열 --card-border-color 로 스냅.
   행 사이에만 긋는다. 마지막 행 아래는 카드 테두리와 겹쳐 보여 뺀다 */
.v2_news_list > li { border-bottom: .5px solid var(--card-border-color); }
.v2_news_list > li:last-child { border-bottom: 0; }
.v2_news_list > li > a {
    position: relative;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
    height: 51px; padding: 15px 40px 15px 0;
}
/* 행 화살표 19×19 */
.v2_news_list > li > a:after {
    content: "\2192";
    position: absolute; top: 50%; right: 0;
    font-size: 19px; line-height: 1; color: var(--dark-color);
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_news_tit {
    -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 18px; font-weight: 400; line-height: 21px;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_news_tags {
    -ms-flex-negative: 0; flex-shrink: 0; margin-left: 10px; font-size: 0;
}
/* PC 태그는 회색이다 (시안 198:2239 — MO 의 빨강과 다르다).
   3번째 행만 #c3c6cc 로 다른데 시안 자체 불일치라 --btn-gray-color 로 통일했다 */
.v2_news_tags em {
    display: inline-block; padding: 2px 9px; margin-left: 6px;
    font-size: 12px; font-style: normal; font-weight: 500; line-height: 1.4;
    text-align: center; color: #fff;
    background: var(--btn-gray-color);
    border: .3px solid var(--text-mute-color); border-radius: 3px;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
}
.v2_news_list > li > a:hover .v2_news_tit,
.v2_news_list > li > a:hover:after { color: var(--primary-color); }
/* 행에 마우스를 올리면 태그도 같이 빨강으로 바뀐다 (D-53 태그 색) */
.v2_news_list > li > a:hover .v2_news_tags em {
    background: var(--sub-red-color);
    border-color: var(--sub-red-border-color);
}

/* --------------------------------------------------- M-8 SNS --- */
/* 시안 210:582 : 제목 SemiBold 26, 간격 29 / 항목 간격 18 / 이름 Regular 18
   아이콘 크기가 항목마다 다르고 간격으로 보정해 이름 시작선(47)을 맞춘다 */
.v2_sns_tit { display: block; font-size: 26px; font-weight: 600; }
.v2_sns_main { display: block; margin-top: 29px; }
.v2_sns_main > li + li { margin-top: 18px; margin-left: 0; }
.v2_sns_main > li > a {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
/* 아이콘 2장을 겹쳐 두고 opacity 로 바꾼다 (기본 #A1A5AE → hover #E41F20) */
.v2_sns_main > li > a i { position: relative; display: block; margin-right: 0; }
.v2_sns_main > li > a i img {
    position: absolute; top: 0; left: 0;
    display: block; width: 100%; height: 100%;
    -webkit-transition: opacity .2s ease; transition: opacity .2s ease;
}
.v2_sns_main > li > a .v2_sns_ico_on { opacity: 0; }
.v2_sns_main > li:nth-child(1) > a i { width: 29px; height: 28.993px; margin: 0 15px 0 3px; }
/* 유튜브만 가로·세로 2 씩 줄였다. 혼자 커 보인다.
   오른쪽 여백은 8 → 10 으로 올려 텍스트 시작선을 나머지 둘과 맞춘다 (아이콘+여백 = 47 대) */
.v2_sns_main > li:nth-child(2) > a i { width: 37.258px; height: 28.844px; margin: 0 10px 0 0; }
.v2_sns_main > li:nth-child(3) > a i { width: 28px; height: 28px; margin: 0 16px 0 3px; }
.v2_sns_main > li > a span {
    font-size: 18px; font-weight: 400;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_sns_main > li > a:hover .v2_sns_ico_off { opacity: 0; }
.v2_sns_main > li > a:hover .v2_sns_ico_on { opacity: 1; }
.v2_sns_main > li > a:hover span { color: var(--primary-color); }