main {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1vw;
    letter-spacing: 0.2em;
}
.full {
    width: 100%;
}
.r {
    position: relative;
}
.tc {
    text-align: center;
}
.bold {
    font-weight: 700;
}
.flex {
    display: flex;
}

/* kv */
.kv-logo {
    position: absolute;
    z-index: 1;
    transform: translateX(-50%);
    left: 50%;
    top: 5.2vw;
    width: 51.614vw;
}
.kv-slider {
    max-height: 54.114vw;
    visibility: hidden;
}
.kv-slider.slick-initialized {
    visibility: visible;
}
.kv-slider .txt {
    position: absolute;
}
@keyframes text-image-1 {
    to {
        translate: 5px 5px
    }
}
@keyframes text-image-2 {
    to {
        translate: -5px 5px
    }
}
.kv-slider .txt1 img {
/*    animation: text-image-1 1.5s steps(2, start) infinite;*/
}
.kv-slider .txt2 img {
/*    animation: text-image-2 1.5s steps(2, start) infinite;*/
}
.kv-slider .item1 .txt1 {
    width: 5.196%;
    top: 46%;
    left: 13%;
}
.kv-slider .item1 .txt2 {
    width: 11.406%;
    top: 46%;
    left: 73.75%;
}
.kv-slider .item2 .txt1 {
    width: 5.312%;
    top: 46%;
    left: 14%;
}
.kv-slider .item2 .txt2 {
    width: 12.343%;
    top: 40%;
    left: 78%;
}
.kv-slider .item3 .txt1 {
    width: 5.156%;
    top: 46%;
    left: 12.6%;
}
.kv-slider .item3 .txt2 {
    width: 12.031%;
    top: 39.3%;
    left: 75.4%;
}
.kv-slider:after {
    position: absolute;
    content: '';
    background: url(../img/pick/kv-shadow.png);
    width: 100%;
    height: 50%;
    bottom:0.5%;
    left: 0;
    mix-blend-mode: multiply;
    background-size: auto 100%;
}
.kv-btm {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.kv-btm-txt {
    width: 26.666vw;
    margin-bottom: 1.5vw;
}
.kv-scroll {
    width: 3.125vw;
    margin: 0 auto 1.8vw;
    animation: arrow 2s infinite;
}
@keyframes arrow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* intro */
#intro {
    padding: 4vw 8vw;
}
.intro-maintit {
    font-weight: 900;
    font-size: 2.3vw;
    color: #185640;
    width: fit-content;
    margin: 3vw auto 2vw;
}
.intro-maintit .deco {
    background: url(../img/pick/tit-deco-01.png);
    background-position: center;
    background-size: 100% 100%;
    margin: 1vw auto 0;
    aspect-ratio: 693/47;
    width: 36vw;
}
.intro-txt {
    margin-bottom: 8vw;
}
.video_wrap {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	/* padding-top: 25px; */
	height: 0;
    background: #606060;
}
.video_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	max-height: 100%;
	max-width: 100%;
	min-height: 100%;
	min-width: 100%;
	width: 0;
}
/* frame */
#frame {
    padding: 4vw 0;
}
.lp-subtit {
    font-size: 2.3vw;
    width: fit-content;
    margin: 0 auto 1.5vw;
}
.lp-subtit .en {
    font-family: "Hind Guntur", sans-serif;
    font-size: 35%;
    font-weight: 600;
    letter-spacing: 0;
}
.lp-subtit .ch {
    font-weight: 900;
    line-height: 1;
    padding: 0.8vw 1.7vw;
    border: solid currentColor;
    border-width: 0.15vw 0;
    margin-top: .3vw;
}
.frame-box {
    margin: 3vw 0;
}
.frame-banner {
    aspect-ratio: 1920/415;
    background-size: 100% 100%;
    height: 21.6vw;
    display: flex;
    align-items: center;
    color: #fff;
}
.f-box1 .frame-banner {
    background-image: url(../img/pick/banner-01.jpg);
}
.f-box2 .frame-banner {
    background-image: url(../img/pick/banner-02.jpg);
}
.f-box3 .frame-banner {
    background-image: url(../img/pick/banner-03.jpg);
}
.frame-txt {
    padding: 0 0.9vw;
    width: 50%;
}
.frame-box:nth-of-type(odd) .frame-txt {
    margin-left: 50%;
}
.frame-box:nth-of-type(even) .frame-txt {
    margin-right: 50%;
    text-align: right;
}
.frame-dialog {
    background: url(../img/pick/tit-deco-02.png);
    background-size: 100% 100%;
    aspect-ratio: 237/108;
    width: 12.3vw;
    color: #fff;
    font-size: 1.7vw;
    padding-left: 5%;
    padding-top: 0.5%;
    font-weight: 700;
    text-align: center;
}
.frame-box:nth-of-type(odd) .frame-dialog {
    margin-left: -3vw;
}
.frame-box:nth-of-type(even) .frame-dialog {
    margin-left: auto;
    margin-right: -2vw;
    transform: scaleX(-1);
}
.frame-box:nth-of-type(even) .frame-dialog span {
    display: block;
    transform: scaleX(-1);
}
.frame-tit {
    font-size: 3.1vw;
    font-weight: 900;
}
.frame-pro {
    padding: 3.6vw 0;
    display: flex;
    width: 68.3vw;
    margin: auto;
}
.frame-item {
    position: relative;
    flex: 1;
    padding-top: 3vw;
}
.frame-item:first-of-type {
    border-right: 0.1vw solid currentColor;
}
.frame-pick {
    font-size: 0.7vw;
    color: #fff;
    background: #185640;
    aspect-ratio: 139/32;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    width: 7.2vw;
    margin: auto;
    font-weight: 700;
    letter-spacing: 0.1em;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}
.frame-logo {
    width: 21.927vw;
/*    height: 3.802vw;*/
    margin: 0 auto 1.4vw;
}
/*
.frame-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
*/
.frame-pic {
    width: 21.406vw;
    margin: 2vw auto;
}
.btn-move {
    font-family: "Hind Guntur", sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    font-size: 0.8vw;
    color: currentColor;
    position: relative;
    width: 5.833vw;
    padding-bottom: 1.3vw;
    text-align: center;
    line-height: 1;
    display: block;
    margin: auto;
}
.btn-move:hover {
    color: currentColor;
}
.btn-move:after {
    position: absolute;
    content: '';
    background-image: url(../img/pick/link-deco-01.png);
    background-size: 100% 100%;
    aspect-ratio: 112/15;
    width: 100%;
    bottom: 0;
    left: 0;
}
.btn-move2 {
    font-weight: 700;
    letter-spacing: 0;
/*    font-size: 1.7vw;*/
    font-size: 1vw;
    color: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6vw;
    aspect-ratio: 426/77;
    width: 22vw;
    border-radius: 1000px;
    border: 0.15vw solid currentColor;
    margin: auto;
}
.btn-move2 .link-icon {
    background: url(../img/pick/arrow-02.png);
    background-size: 100% 100%;
    aspect-ratio: 38/22;
    width: 1.979vw;
    animation: arrow2 2s infinite;
}
@keyframes arrow2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(25%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.btn-move2:hover {
    color: currentColor;
}
.f-box3 {
    margin-bottom: 0;
}
/* lens */
#lens {
    padding: 4vw 0;
}
.marquee {
    display: flex;
    background: #185640;
    padding: 1.3vw 0;
    margin: 0 0 8vw;
    width: max-content;
    overflow: hidden;
}
.marquee span {  
    width: 118.333vw;
    height: 1.145vw;
    background: url("../img/pick/marquee-01.png") repeat-x;
    background-size: auto 100%;
    animation: loop 70s linear infinite;
}
@keyframes loop {
    from { background-position: 0 0; }
    to   { background-position: -118.333vw 0; }
  }
.lens-box {
    background: #f8f8f8;
    box-shadow: 0.4vw 0.4vw #185640;
    min-height: 26vw;
    width: 59vw;
    margin: 1.6vw auto;
    border-radius: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box2 {
    margin-bottom: 3.6vw;
}
.box-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw;
}
.lens-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3vw;
    width: fit-content;
}
.lens-wrap .item {
    background: url("../img/pick/bg-glasses.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    aspect-ratio: 1;
    width: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 1.7vw;
}
.box-desc {
    font-weight: 900;
    font-size: 2.3vw;
}
.box-label {
    color: #fff;
    aspect-ratio: 395/92;
    width: 20.5vw;
    margin: 0 auto 1vw;
    background: #282828;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-txt {
    line-height: 1.3;
}
.box1 .box-txt {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.box2 .flex {
    margin-top: 2.5vw;
    align-items: flex-end;
}
.box1 .num {
    width: 7.447vw;
    margin-right: 0.4vw;
}
.box2 .num {
    width: 13.489vw;
    position: relative;
    top: 0.7vw;
    margin-right: 0.5vw;
}
.box2 .lens-wrap {
    position: relative;
    padding-right: 2vw;
}
.box2 .lens-wrap:after {
    position: absolute;
    content: 'etc.';
    font-family: "Hind Guntur", sans-serif;
    font-size: 0.8vw;
    font-weight: 600;
    letter-spacing: 0;
    right: 0;
    bottom: 1.5vw;
}
.btn-shop {
    font-family: "Hind Guntur", sans-serif;
    font-weight: 600;
/*    font-size: 2.3vw;*/
    font-size: 1.84vw;
    color: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4vw;
    aspect-ratio: 1130/102;
    width: 58vw;
    border-radius: 1000px;
    margin: auto;
    color: #fff;
    background: #185640;
}
.btn-shop .link-icon {
    background: url(../img/pick/icon-home.png);
    background-size: 100% 100%;
    aspect-ratio: 68/44;
/*    width: 3.541vw;*/
    width: 2.832vw;
}
.btn-shop .link-txt {
    position: relative;
/*    top: 0.7vw;*/
    top: 0.5vw;
}
.btn-shop:hover {
    color: #fff;
}
.shop-wrap {
    padding: 8vw 0 4vw;
}
.shop-wrap .flex {
    font-weight: 700;
    align-items: flex-end;
    justify-content: center;
    font-size: 2.3vw;
    margin-bottom: 1.25vw;
    gap: 0.4vw;
}
.shop-wrap .flex .num {
    position: relative;
    top: -0.3vw;
    width: 4.166vw;
}
.wow {
    visibility: hidden;
}

/* pc & mobile */
.pc {
	display: initial;
}
.mo {
	display: none;
}

@media only screen and (max-width: 769px) {
    main {
       font-size: 2.6vw; 
    }
    .kv-slider {
        max-height: none;
    }
    .slick-slide .people, .slick-slide .txt {
        visibility: hidden;
        opacity: 0;
        z-index: 1;
    }
    .slick-active:not(.slick-cloned) .people {
        visibility: visible;
        animation-duration: 1s;
        animation-delay: 0.5s;
        animation-name: fadeInUp;
        animation-fill-mode: forwards;
    }
    .slick-active:not(.slick-cloned) .txt {
        visibility: visible;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-name: fadeInUp;
        animation-fill-mode: forwards;
    }
    .keep .people, .keep .txt {
        visibility: visible;
        opacity: 1;
        animation: none;
    }
    .kv-logo {
        width: 58vw;
        top: 13.8vw;
    }
    .kv-slider .item1 .txt1 {
        top: 54%;
        left: 21.3%;
    }
    .kv-slider .item1 .txt2 {
        top: 54%;
        left: 73.2%;
    }
    .kv-slider .item2 .txt1 {
        top: 54%;
        left: 21.6%;
    }
    .kv-slider .item2 .txt2 {
        top: 48%;
        left: 76%;
    }
    .kv-slider .item3 .txt1 {
        top: 53%;
        left: 20.4%;
    }
    .kv-slider .item3 .txt2 {
        top: 46%;
        left: 74%;
    }
    .kv-btm-txt {
        width: 53.7vw;
        margin-bottom: 4vw;
    }
    .kv-scroll {
        width: 8vw;
        margin-bottom: 6vw;
    }
    #intro {
        padding: 8vw 4.5vw;
    }
    .intro-maintit {
        font-size: 4.2vw;
        margin-bottom: 6vw;
    }
    .intro-maintit .deco {
        width: 65.3vw;
    }
    .lp-subtit {
        font-size: 4.2vw;
        margin-bottom: 3vw;
    }
    .lp-subtit .ch {
        padding: 2vw 4vw;
    }
    .f-box1 .frame-banner {
        background-image: url(../img/pick/banner-01-m.jpg);
    }
    .f-box2 .frame-banner {
        background-image: url(../img/pick/banner-02-m.jpg);
    }
    .f-box3 .frame-banner {
        background-image: url(../img/pick/banner-03-m.jpg);
    }
    .frame-banner {
        height: 66.8vw;
        aspect-ratio: 750 / 501;
    }
    .frame-dialog {
        width: 21.7vw;
        font-size: 2.7vw;
        padding-left: 9%;
        padding-top: 1%;
    }
    .frame-tit {
        font-size: 6.2vw;
    }
    .frame-txt p {
        font-size: 1.8vw;
    }
    .frame-pro {
        flex-direction: column;
        padding: 8.5vw 0;
    }
    .frame-item {
        padding-top: 8.6vw;
    }
    .frame-item:first-of-type {
        border: none;
    }
    .frame-pick {
        font-size: 1.8vw;
        width: 18.4vw;
    }
    .frame-logo {
        width: 46.9vw;
        margin-bottom: 5vw;
    }
    .frame-pic {
        width: 67vw;
        margin: 6vw auto 2vw;
    }
    .btn-move {
        width: 15vw;
        font-size: 2vw;
        padding-bottom: 3.2vw;
    }
    .btn-move2 {
        width: 40.4vw;
        font-size: 2.6vw;
        gap: 2.6vw;
        aspect-ratio: 303 / 65;
    }
    .btn-move2 .link-icon {
        width: 5.2vw;
    }
    #frame {
        padding: 8vw 0;
    }
    .marquee {
        padding: 3.5vw 0;
    }
    .marquee span {
        width: 151.466vw;
        height: 2.8vw;
    }
    @keyframes loop {
        from {
            background-position: 0 0;
        }
        to {
            background-position: -151.466vw 0;
        }
    }
    .box-flex {
        flex-direction: column;
    }
    .box-desc {
        order: 1;
        font-size: 4.2vw;
    }
    .lens-wrap {
        order: 2;
        gap: 1.3vw;
    }
    .lens-box {
        min-height: 83vw;
        box-shadow: 0.8vw 0.8vw #185640;
        border-radius: 10vw;
        width: 77vw;
        margin: 3.2vw auto;
    }
    .box-label {
        width: 38vw;
        margin: 0 auto 2.4vw;
    }
    .box1 .num {
        width: 13.3vw;
    }
    .lens-wrap .item {
        width: 18.9vw;
        font-size: 4.2vw;
    }
    .box2 {
        margin-bottom: 8vw;
    }
    .box2 .num {
        width: 27vw;
    }
    .box2 .lens-wrap {
        padding-right: 0;
    }
    .box2 .lens-wrap:after {
        font-size: 1.5vw;
        right: 0;
        bottom: 0;
    }
    .shop-wrap .flex {
        font-size: 4.2vw;
    }
    .shop-wrap .flex .num {
        width: 7.3vw;
        top: -0.6vw;
    }
    .btn-shop {
        font-size: 4.3vw;
        width: 76.2vw;
        aspect-ratio: 572 / 108;
    }
    .btn-shop .link-icon {
        width: 7.7vw;
    }
    .btn-shop .link-txt {
        top: 1.2vw;
    }
    .shop-wrap {
        padding: 16vw 0 8vw;
    }
    #lens {
        padding: 8vw 0;
    }
    
    .pc {
    	display: none;
    }
    .mo {
    	display: initial;
    }
}