.c-link-btn { position: relative; display: block; width: 274px; font-size: 14px; line-height: 37px; border: 1px solid; text-align: center; transition: 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } .c-link-btn::after { content: ">"; position: absolute; right: 0.7em; font-size: 22px; font-weight: 300; } .c-link-btn:hover { background: #000; color: #fff; } .l-inpres-drivestar__kv { padding-top: 550px; position: relative; margin: 34px auto 0; height: 0; overflow: hidden; max-width: 980px; } .l-inpres-drivestar__kv iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 170%; transform: translate(-50%, -50%); pointer-events: none; } .l-inpres-drivestar__kv .c-sound { position: absolute; right: 35px; bottom: 32px; width: 32px; height: 32px; } .l-inpres-drivestar__kv .c-sound__on { display: none; } .l-inpres-drivestar__kv .c-sound__off { display: block; } .l-inpres-drivestar__kv .c-sound.on .c-sound__off { display: none; } .l-inpres-drivestar__kv .c-sound.on .c-sound__on { display: block; } .drivestar-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background: url(https://golf.yamaha.com/wp-content/themes/inpresx2013/img/inpres_drivestar/kv_movie_thumb_mens.png) center/cover; */ } .drivestar-ladies-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/kv_movie_thumb_ladies.png) center/cover; } .c-title--h1 { padding: 55px 0 65px; } .c-title--h1 > img { margin: auto; display: block; width: 563px; } .c-title--h1 .c-icon { margin: auto; display: block; text-align: center; padding-top: 30px; } .p-button-menu { padding-bottom: 28px; } .p-button-menu ul { display: flex; justify-content: center; align-items: center; } .p-button-menu ul li { padding: 0 55px; border-right: 1px solid; } .p-button-menu ul li:last-child { border-right: none; } .l-lineup { margin-bottom: 100px; } .p-lineup-feature { margin-bottom: -65px; position: relative; height: 790px; background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/linenup_feature_bg.jpg) center top/cover no-repeat; overflow: hidden; } .p-lineup-feature h2 { position: absolute; top: 50px; left: 50%; transform: translateX(-490px); width: 555px; } .p-lineup-feature__item { position: absolute; bottom: -42px; left: 50%; margin-left: -107px; width: 629px; } .p-lineup-feature__text { position: absolute; top: 330px; left: 50%; margin-left: -384px; font-size: 18px; line-height: 31px; letter-spacing: 0.12em; } .p-ladies-lineup-feature { margin-bottom: -85px; position: relative; background: #d8d9d9; } .p-ladies-lineup-feature h2 { margin: auto; max-width: 980px; overflow: hidden; } .p-ladies-lineup-feature__text { position: absolute; top: 244px; left: 50%; margin-left: 116px; font-size: 18px; font-weight: 400; line-height: 31px; letter-spacing: 0.12em; } .p-lineup-products { position: relative; margin: 0 auto; max-width: 980px; } .p-lineup-products h3 { position: absolute; left: -58px; } .p-lineup-products ul li { position: relative; margin-bottom: 3%; } .p-lineup-products ul li .c-link-btn { position: absolute; right: 168px; bottom: 55px; } .l-special-movie__inner, .p-special-movie__inner { margin-bottom: 96px; position: relative; padding-top: 40.5%; overflow: hidden; background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/special-movie_capture.png) center/cover; } .l-special-movie__inner iframe, .p-special-movie__inner iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100vh; } .l-special-movie__inner::after, .p-special-movie__inner::after { content: ""; position: absolute; top: 50%; right: 60px; width: 426px; height: 242px; transform: translateY(-50%); background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/special-movie_label.svg) center/100% no-repeat; } .l-special-movie__wrap a::after, .p-special-movie__wrap a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 123px; height: 80px; transform: translate(-50%, -50%); background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/special-movie_play-icon.svg) center/100% no-repeat; } .l-special-movie h3, .p-special-movie h3 { position: absolute; top: 20px; left: 52px; z-index: 1; } @font-face { font-family: "wor"; src: url("https://www.yamaha.com.cn/common/fonts/20221229/wor.eot?#iefix") format("embedded-opentype"), url("https://www.yamaha.com.cn/common/fonts/20221229/wor.woff") format("woff"), url("https://www.yamaha.com.cn/common/fonts/20221229/wor.ttf") format("truetype"), url("https://www.yamaha.com.cn/common/fonts/20221229/wor.svg#ucc") format("svg"); font-weight: normal; font-style: normal; } .i-play:before, .i-close:before, .i-angle-down:before, .i-angle-left:before, .i-angle-right:before, .i-angle-up:before, .i-angle-down-bold:before, .i-angle-left-bold:before, .i-angle-right-bold:before, .i-angle-up-bold:before, .i-breadcrumb-right:before { display: inline-block; font-family: "wor"; font-size: inherit; font-style: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .i-close:before { content: "\e001"; } .modal-open .p-special-movie__wrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 0; width: 980px; padding-top: 551px; z-index: 10000; } .modal-open .p-special-movie__wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none; max-width: none; z-index: 1; } .modal-open .p-special-movie__wrap .i-close { position: absolute; top: -55px; right: -40px; font-size: 38px; display: block; color: #ffffff !important; cursor: pointer; } .modal-open .c-modal-bg { display: block; content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9999; } #c-modal-open { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .modal-open #c-modal-open { z-index: 0; } .l-sns h3, .p-sns h3 { margin-bottom: 55px; text-align: center; } .l-sns h3 img, .p-sns h3 img { margin: auto; } .l-sns--ladies, .p-sns--ladies { margin: 100px 0 0; } .l-sns-hashtagImg, .p-sns-hashtagImg { margin: 0 0 0 38px !important; } .l-sns-subTitle, .p-sns-subTitle { text-align: center; font-size: 25px; font-weight: 400; } .l-sns__fewDescription, .p-sns__fewDescription { font-size: 19px; font-weight: bold; text-align: center; line-height: 1.8; color: #0200ad; } .l-sns-btn, .p-sns-btn { margin: 22px auto 0; } .l-sns-instaList, .p-sns-instaList { display: flex; justify-content: center; margin: 30px auto 53px; max-width: 980px; position: relative; } .l-sns-instaList-item, .p-sns-instaList-item { margin: 0 7px; position: relative; width: 234px; overflow: hidden; } .l-sns-instaList__img, .p-sns-instaList__img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .l-sns-instaList .slick-next, .p-sns-instaList .slick-next { top: -43px; right: 10px; } .l-sns-instaList .slick-next::before, .p-sns-instaList .slick-next::before { display: block; content: ""; background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/icon_arrow_next.svg); width: 17px; height: 20px; } .l-sns-instaList .slick-prev, .p-sns-instaList .slick-prev { top: -43px; left: 10px; } .l-sns-instaList .slick-prev::before, .p-sns-instaList .slick-prev::before { display: block; content: ""; background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/icon_arrow_prev.svg); width: 17px; height: 20px; } .l-topics { margin: 90px auto 80px; position: relative; max-width: 980px; } .l-topics h3 { position: absolute; left: -58px; } .p-topics { display: flex; justify-content: space-between; } .p-topics li { width: 32.45%; } .p-golf-lover h3, .l-golf-lover h3 { margin-bottom: 38px; text-align: center; } .p-golf-lover__kv, .l-golf-lover__kv { padding-top: 45.58%; position: relative; background: url(https://oss.yamaha.com.cn/images/inpres_drivestar/golf-lover_kv.jpg) center top/cover no-repeat; } .p-golf-lover__kv__inner, .l-golf-lover__kv__inner { position: absolute; bottom: 27%; left: 50%; margin-left: -490px; color: #fff; } .p-golf-lover__kv__inner p, .l-golf-lover__kv__inner p { margin-bottom: 1em; font-size: 26px; font-weight: 600; letter-spacing: 0.3em; } .p-golf-lover__kv__inner .c-link-btn:hover, .l-golf-lover__kv__inner .c-link-btn:hover { background: #fff; color: #000; border: 1px solid #fff; } .p-club-setting, .l-club-setting { margin: auto; padding-top: 97px; max-width: 980px; } .p-club-setting h3, .l-club-setting h3 { margin-bottom: 26px; text-align: center; } .p-club-setting ul, .l-club-setting ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .p-club-setting ul li, .l-club-setting ul li { margin-bottom: 5%; position: relative; width: 47.34%; background: #efefef; } .p-club-setting ul li img, .l-club-setting ul li img { width: 100%; } .p-club-setting__name, .l-club-setting__name { padding: 112px 20px 15px; position: absolute; left: 0; bottom: 0; font-size: 15px; letter-spacing: 0.1em; font-weight: 400; width: 100%; color: #fff; box-sizing: border-box; background: rgb(0, 0, 0); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8029805672) 100%); } .p-club-setting .c-link-btn, .l-club-setting .c-link-btn { margin: auto; } .js-fadeIn { opacity: 0; } .js-fadeIn--bottom { opacity: 0; transform: translateY(70px); } .js-slideIn--left { opacity: 0; transform: translateX(-150px); } @media screen and (max-width: 767px) { .c-link-btn { width: 41.333%; font-size: 12px; line-height: 24px; } .c-link-btn::after { font-size: 12px; line-height: 21px; } .l-inpres-drivestar__kv { margin: auto; } .l-inpres-drivestar__kv .c-sound { right: 15px; bottom: 12px; } .c-title--h1 { padding: 17.43% auto 25%; } .c-title--h1 > img { width: 69.48%; } .c-title--h1 .c-icon { padding-top: 5%; } .c-title--h1 .c-icon img { width: 46%; } .p-button-menu { display: none; } .l-lineup { margin-bottom: 12.533%; } .p-lineup-feature { margin-bottom: 0; padding-top: 99.7%; height: 0; } .p-lineup-feature h2 { top: 6%; left: 5%; transform: translateX(0); width: 54.4%; } .p-lineup-feature__item { left: auto; right: 2%; bottom: 0%; margin-left: 0; width: 65%; } .p-lineup-feature__text { position: absolute; top: auto; left: 5%; bottom: 7vw; margin-left: 0; font-size: 3.2vw; font-weight: 500; line-height: 5.3vw; letter-spacing: 0.12em; } .p-ladies-lineup-feature { margin-bottom: 0; } .p-ladies-lineup-feature h2 img { transform: scale(1.14); transform-origin: center top; } .p-ladies-lineup-feature__text { top: 29vw; left: auto; right: 0; margin-left: 0; font-size: 1.8vw; font-weight: 500; line-height: 3.1vw; } .p-lineup-products { margin: 40px 8px 50px; } .p-lineup-products h3 { margin-bottom: 12px; padding: 0 10px; position: relative; left: 0; } .p-lineup-products h3 img { height: 14px; } .p-lineup-products ul li .c-link-btn { display: none; } .l-special-movie__inner, .p-special-movie__inner { margin-bottom: 12.533%; padding-top: 39.5%; } .l-special-movie__inner iframe, .p-special-movie__inner iframe { max-width: 100%; } .l-special-movie__inner::after, .p-special-movie__inner::after { display: none; } .l-special-movie__wrap a::after, .p-special-movie__wrap a::after { width: 70px; height: 50px; } .l-special-movie h3, .p-special-movie h3 { margin-bottom: 12px; padding: 0 20px; position: relative; top: 0; left: 0; } .l-special-movie h3 img, .p-special-movie h3 img { height: 14px; } .modal-open .p-special-movie__wrap { width: 100%; padding-top: 57%; } .modal-open .p-special-movie__wrap .i-close { top: -35px; right: 0; font-size: 28px; } .l-sns h3, .p-sns h3 { margin-bottom: 5.4666666667%; } .l-sns h3 img, .p-sns h3 img { width: 42%; } .l-sns--ladies, .p-sns--ladies { margin: 9.7333333333% 0 0; } .l-sns-hashtagImg, .p-sns-hashtagImg { margin: 12px auto 0 !important; width: 20% !important; border-bottom: 1px solid #0200ad; } .l-sns-subTitle, .p-sns-subTitle { font-size: 3.4vw; } .l-sns__fewDescription, .p-sns__fewDescription { font-size: 3.5vw; } .l-sns-instaList, .p-sns-instaList { padding: 0 3px; display: block; margin: 4.9333333333% auto 10.9333333333%; } .l-sns-instaList-item, .p-sns-instaList-item { display: block; width: 95.0666666667%; margin: 0 5px; } .l-sns-instaList .slick-next, .p-sns-instaList .slick-next { top: -28px; } .l-sns-instaList .slick-prev, .p-sns-instaList .slick-prev { top: -28px; } .l-topics { margin: 12.5% auto 24.5%; } .l-topics h3 { margin-bottom: 12px; padding: 0 10px; position: relative; left: 0; } .l-topics h3 img { height: 14px; } .p-topics { padding: 0 9px; display: block; } .p-topics li { margin-bottom: 3%; width: 100%; } .p-topics li img { width: 100%; } .p-golf-lover h3, .l-golf-lover h3 { margin-bottom: 22px; } .p-golf-lover h3 img, .l-golf-lover h3 img { margin: auto; height: 40px; } .p-golf-lover__kv, .l-golf-lover__kv { padding-top: 63.333%; } .p-golf-lover__kv__inner p, .l-golf-lover__kv__inner p { font-size: 3.2vw; } .p-golf-lover__kv__inner .c-link-btn, .l-golf-lover__kv__inner .c-link-btn { width: 100%; font-size: 3.466vw; line-height: 6.5333vw; } .p-golf-lover__kv__inner .c-link-btn::after, .l-golf-lover__kv__inner .c-link-btn::after { font-size: 3.466vw; line-height: 6.5333vw; } .p-club-setting, .l-club-setting { padding: 12.5% 8px 0; } .p-club-setting h3, .l-club-setting h3 { margin-bottom: 22px; } .p-club-setting h3 img, .l-club-setting h3 img { margin: auto; height: 40px; } .p-club-setting ul, .l-club-setting ul { padding: 8px; display: block; } .p-club-setting ul li, .l-club-setting ul li { margin-bottom: 10px; width: 100%; } .p-club-setting__name, .l-club-setting__name { padding: 35px 10px 10px; font-size: 23px; } .js-fadeIn--bottom { transform: translateY(35px); } .js-slideIn--left { transform: translateX(-75px); } } @media screen and (max-width: 979px) and (min-width: 768px) { .c-link-btn::after { font-size: 2.244vw; line-height: 3.2vw; } .p-ladies-lineup-feature__text { top: 25vw; left: auto; right: 0; margin-left: 0; font-size: 1.8vw; line-height: 3.1vw; } .p-lineup-products ul li .c-link-btn { width: 28%; font-size: 1.428vw; line-height: 3.775vw; right: 17.3%; bottom: 14%; } } @media screen and (max-width: 980px) { .l-inpres-drivestar__kv { padding-top: 56%; } } @media screen and (max-width: 979px) { .p-ladies-lineup-feature__text img { width: 30vw; } .p-golf-lover__kv__inner, .l-golf-lover__kv__inner { left: 5%; bottom: 8%; margin-left: 0; } } @media screen and (max-width: 980px) and (min-width: 768px) { .l-special-movie__inner::after, .p-special-movie__inner::after { width: 43.46vw; height: 24.69vw; } } /*# sourceMappingURL=../../sourcemaps/css/inpres-drivestar/drivestar.css.map */