@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;400;600;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&display=swap);

*,
body {
    padding: 0
}

body,
p {
    font-weight: 400
}

.quote p,
a,
p {
    color: #1c1c1c
}

.download a,
.image-box p,
.quote p {
    text-align: justify
}

.cd-image-label.is-hidden,
.hidden,
.sidenav {
    visibility: hidden
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0
}

html {
    font-size: 16px
}

body {
    margin: 0 auto;
    font-size: 100%;
    font-family: "Noto Serif TC", serif;
    line-height: 1.7;
    letter-spacing: 1px
}

.card-box .img-p,
.img-card p,
h1,
p {
    font-family: "Noto Serif TC"
}

p {
    font-size: 1.125rem
}

.columnTitle,
.img-card p,
.sidenav div:hover,
h1 {
    font-weight: 700
}

p span {
    display: inline-block;
    vertical-align: middle
}

@media (max-width:37.5rem) {
    p {
        font-size: 1rem
    }
}

@media (max-width:20rem) {
    p {
        font-size: .875rem
    }
}

a {
    text-decoration: none
}

a:hover {
    opacity: .9;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

img {
    max-width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.more-wrapper,
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    clear: both
}

@media (max-width:75rem) {
    .more-wrapper {
        width: 90%
    }
}

@media (max-width:64rem) {
    .wrapper {
        width: 95%
    }

    .more-wrapper {
        width: 90%
    }
}

h1 {
    font-size: 100px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
    color: #555656
}

.head-banner-h1 {
    letter-spacing: 20px
}

.keyvisual-door-god {
    background: url(../img/door-god/door-god-header-l.svg) center/cover no-repeat, url(../img/PC-BG-light.jpg) center/cover no-repeat;
    height: 1080px
}

.keyvisual-door-god-02 {
    position: relative;
    background: url(../img/door-god/door-god-l.jpg) center/cover no-repeat;
    height: 1080px
}

.keyvisual-head-banner {
    background: url(../img/head-banner/header-visual-l.jpg) center/cover no-repeat;
    height: 1080px
}

.keyvisual-head-banner-02 {
    position: relative;
    background: url(../img/head-banner/l-flag.jpg) center/cover no-repeat;
    height: 1080px
}

.keyvisual-porcelain {
    background: url(../img/porcelain/porcelain-visual-l.jpg) center/cover no-repeat;
    height: 1080px
}

.keyvisual-porcelain-02 {
    position: relative;
    background: url(../img/porcelain/porcelain-l.png) center/cover no-repeat;
    height: 1080px
}

.circle-1,
.circle-2,
.line-v::after {
    position: absolute
}

.quote {
    max-width: 800px;
    margin: 0 auto;
    opacity: .8
}

.quote p {
    background: #fff;
    padding: 20px 30px;
    font-size: 22px
}

.quoteinner {
    display: flex;
    height: 1250px;
    align-items: center
}

.circle-1,
.circle-2 {
    width: 115px;
    height: 115px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    text-align: center
}

.circle-1 {
    top: 250px;
    left: 50%
}

.circle-2 {
    bottom: 200px;
    left: 60%
}

.card-box,
.content-01,
.content-02,
.content-03,
.content-04 {
    position: relative
}

@media (max-width:768px) {
    .keyvisual-door-god {
        background: url(../img/door-god/door-god-header-m.svg) center/cover no-repeat, url(../img/PC-BG-light.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-door-god-02 {
        position: relative;
        background: url(../img/door-god/door-god-m.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-head-banner {
        background: url(../img/head-banner/header-visual-m.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-head-banner-02 {
        position: relative;
        background: url(../img/head-banner/m-flag.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-porcelain {
        background: url(../img/porcelain/porcelain-visual-m.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-porcelain-02 {
        position: relative;
        background: url(../img/porcelain/porcelain-m.png) center/cover no-repeat;
        height: 1080px
    }

    h1 {
        font-size: 64px
    }

    .quote {
        max-width: 416px
    }

    .quote p {
        background: #fff;
        padding: 20px 30px;
        color: #1c1c1c;
        text-align: justify;
        font-size: 18px
    }

    .circle-1 {
        top: auto;
        left: 10%;
        bottom: 30px
    }

    .circle-2 {
        bottom: 260px;
        left: 58%
    }
}

@media (max-width:576px) {
    .wrapper {
        width: 85%;
        margin: 0 auto
    }

    .quote {
        width: 85%
    }

    .quote p {
        background: #fff;
        padding: 16px 24px;
        letter-spacing: 0
    }

    .quoteinner {
        display: flex;
        height: 850px;
        align-items: center
    }

    .keyvisual-door-god {
        background: url(../img/door-god/door-god-header-s.svg) center/cover no-repeat, url(../img/PC-BG-light.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-door-god-02 {
        position: relative;
        background: url(../img/door-god/door-god-s.jpg) center/cover no-repeat;
        height: 736px
    }

    .keyvisual-head-banner {
        background: url(../img/head-banner/header-visual-s.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-head-banner-02 {
        position: relative;
        background: url(../img/head-banner/s-flag.jpg) center/cover no-repeat;
        height: 736px
    }

    .keyvisual-porcelain {
        background: url(../img/porcelain/porcelain-visual-s.jpg) center/cover no-repeat;
        height: 1080px
    }

    .keyvisual-porcelain-02 {
        position: relative;
        background: url(../img/porcelain/porcelain-s.png) center/cover no-repeat;
        height: 736px
    }

    .circle-1,
    .circle-2 {
        width: 82px;
        height: 82px;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        text-align: center
    }

    .circle-1 {
        top: auto;
        left: 20%;
        bottom: 20px
    }

    .circle-2 {
        bottom: 5px;
        left: 65%
    }
}

@media (max-width:376px) {
    .keyvisual-head-banner-02 {
        position: relative;
        background: url(../img/head-banner/s-flag.jpg) center/cover no-repeat;
        height: 812px
    }
}

.content-01 {
    background: url(../img/PC-BG-light-2.jpg) center/cover no-repeat
}

.pic01-before img,
.pic02-before img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    object-fit: cover;
    min-height: 800px
}

.content-02 {
    background: url(../img/door-god/door-god-after-bg.jpg) center/cover no-repeat;
    height: 2160px
}

.content-03 {
    background: url(../img/head-banner/banner-after-bg.jpg) center/cover no-repeat;
    height: 2400px
}

.pic01-after-img {
    background: url(../img/door-god/pic01-after-l.svg) center/cover no-repeat;
    height: 1080px
}

.pic02-after-img {
    background: url(../img/head-banner/pic02-after-l.svg) center/cover no-repeat;
    height: 1080px
}

.content-01 .small_mark {
    position: absolute;
    top: 50px;
    z-index: 8;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -10%);
    width: 160px
}

.content-02 .small_mark,
.content-03 .small_mark {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    z-index: 8;
    text-align: center;
    padding-top: 60px
}

.content-04 {
    background: url(../img/PC-BG-light.jpg) center/cover no-repeat
}

.pic01-after img,
.pic02-after img {
    display: block;
    max-width: 95%;
    margin: 0 auto;
    object-fit: cover;
    padding-top: 60px
}

@media screen and (min-width:1921px) {
    .content-02 {
        height: 2440px
    }
}

@media screen and (max-width:992px) {

    .content-01 .small_mark,
    .content-02 .small_mark,
    .content-03 .small_mark {
        width: 180px
    }

    .pic01-after img,
    .pic01-before img,
    .pic02-after img,
    .pic02-before img {
        display: none
    }

    .pic01-before-img {
        background: url(../img/door-god/pic01-before-m.svg) center/cover no-repeat;
        height: 1024px
    }

    .pic01-after-img {
        background: url(../img/door-god/pic01-after-m.svg) center/cover no-repeat;
        height: 1024px
    }

    .pic02-before-img {
        background: url(../img/head-banner/pic02-before-m.svg) center/cover no-repeat;
        height: 1024px
    }

    .pic02-after-img {
        background: url(../img/head-banner/pic02-after-m.svg) center/cover no-repeat;
        height: 1024px
    }
}

@media screen and (max-width:576px) {

    .content-01 .small_mark,
    .content-02 .small_mark,
    .content-03 .small_mark {
        width: 150px
    }

    .pic01-before-img {
        background: url(../img/door-god/pic01-before-s.svg) top/cover no-repeat;
        min-height: 800px
    }

    .pic01-after-img {
        background: url(../img/door-god/pic01-after-s.svg) top/cover no-repeat;
        min-height: 800px
    }

    .pic02-before-img {
        background: url(../img/head-banner/pic02-before-s.svg) top/cover no-repeat;
        min-height: 800px
    }

    .pic02-after-img {
        background: url(../img/head-banner/pic02-after-s.svg) top/cover no-repeat;
        min-height: 800px
    }

    .content-01 img,
    .motion-title img {
        width: 142px
    }

    .content-03 {
        height: 1500px
    }
}

@media screen and (max-width:415px) {

    .pic01-after-img,
    .pic01-before-img,
    .pic02-after-img,
    .pic02-before-img {
        background-size: auto;
        height: 0;
        background-position-y: bottom
    }

    .content-02 {
        height: 1650px
    }
}

.image-container {
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    height: 280px
}

.img-row {
    margin-top: -30px;
    margin-bottom: -60px
}

.card-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1
}

.card-box img {
    width: 100%;
    height: auto;
    max-width: 230px;
    display: block
}

.line-v::after {
    content: "";
    top: 110%;
    width: 2px;
    height: 210px;
    background: rgba(85, 86, 86, .8)
}

.img-card {
    display: flex;
    padding: 10px 60px;
    justify-content: center;
    align-items: center;
    background: #a38166
}

.img-card p {
    color: #fff;
    font-size: 22px
}

.card-box .img-p {
    color: #1c1c1c;
    font-size: 20px;
    line-height: 1.3
}

.image-container .card-box:last-child {
    justify-content: left
}

@media (max-width:768px) {
    .image-container {
        width: 90%;
        height: 230px
    }

    .card-box img {
        max-width: 185px
    }

    .card-box .img-p {
        font-size: 18px
    }

    .line-v::after {
        height: 160px
    }

    .img-card {
        padding: 6px 25px
    }

    .img-row {
        margin-bottom: 50px
    }
}

@media (max-width:576px) {
    .image-container {
        flex-direction: column;
        height: 180px;
        max-width: 85%
    }

    .card-box img {
        display: none
    }

    .card-box .img-p {
        justify-content: center;
        text-align: center
    }

    .line-v::after {
        height: 60px;
        top: 199%;
        width: 1.5px
    }

    .img-row {
        margin-bottom: 0
    }

    .img-card p {
        font-size: 18px
    }

    .img-top {
        margin-top: -10px
    }
}

.cd-image-container {
    position: relative;
    max-width: 323px;
    margin: 0 auto
}

.head-banner .cd-image-container {
    position: relative;
    max-width: 560px;
    margin: -60px auto 0
}

.cd-image-container img,
.end {
    display: block
}

.cd-image-label {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    padding: 1em;
    opacity: 0;
    transform: translateY(20px)
}

.is-visible .cd-image-label {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
    font-size: 22px;
    background: #555656;
    padding: 4px 8px 6px
}

.cd-resize-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../img/door-god/modified-01.jpg") left top/auto 100% no-repeat;
    transform: translateZ(0);
    backface-visibility: hidden
}

.cd-resize-img .cd-image-label {
    right: auto;
    left: 0
}

.is-visible .cd-resize-img {
    width: 50%
}

.columnTitle:after,
.columnTitle:before {
    content: "";
    display: block;
    height: 1px;
    background-color: #555656;
    width: 42%;
    top: 80%;
    position: absolute
}

.cd-handle {
    position: absolute;
    height: 44px;
    width: 44px;
    left: 50%;
    top: 50%;
    margin-left: -22px;
    margin-top: -22px;
    border-radius: 50%;
    background: url("../img/door-god/arrows.svg") center center no-repeat #a38166;
    cursor: move;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, .2), 0 0 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
    opacity: 0
}

.columnTitle,
.columnTitle>div,
.image-box,
.sidenav>div {
    position: relative
}

.is-visible .cd-handle {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1)
}

.columnTitle {
    color: #555656;
    font-size: 32px;
    padding-top: 60px;
    margin-bottom: 30px;
    text-align: center
}

.columnTitle>div {
    background-color: transparent;
    display: inline-block;
    z-index: 2
}

.columnTitle:after {
    left: 0
}

.columnTitle:before {
    right: 0
}

.extend-conten {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 110px
}

.image-box {
    flex: 1
}

.image-box p {
    font-size: 18px;
    color: #fff
}

.image-box img {
    width: 100%;
    height: 326px;
    overflow: hidden;
    object-fit: cover
}

.image-box .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #5e5751;
    padding: 5px 15px;
    min-height: 72px
}

@media (max-width:992px) {

    .columnTitle:after,
    .columnTitle:before {
        width: 40%
    }
}

@media (max-width:768px) {

    .cd-image-container,
    .head-banner .cd-image-container {
        margin-top: -100px
    }

    .columnTitle {
        font-size: 28px
    }

    .extend-conten {
        flex-direction: column;
        gap: 15px
    }

    .columnTitle:after,
    .columnTitle:before {
        width: 38%
    }
}

.download {
    display: flex;
    padding: 6px 20px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px
}

.download a {
    color: #fff;
    font-family: "Noto Sans TC";
    font-size: 20px
}

.end p,
.end-mb p,
.mousey_p {
    color: #1c1c1c;
    font-family: "Noto Sans TC", sans-serif
}

.download button {
    cursor: pointer;
    border-radius: 10px;
    background: #5e5751;
    padding: 6px 20px 8px;
    border: none
}

.download button:hover {
    opacity: .9;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    background: #a38166
}

.sidenav div.active::before,
.sidenav div::before {
    content: "";
    width: 20px;
    background-color: #3c3c3c;
    left: 0;
    top: 18px
}

.end-mb {
    display: none
}

.end,
.end-mb {
    padding-bottom: 80px;
    width: 85%;
    margin: 0 auto
}

.end p,
.end-mb p {
    text-align: center;
    font-size: 16px;
    font-weight: lighter
}

.link {
    background: #a38166;
    display: flex;
    height: 57px;
    padding: 15px 40px;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.link a {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: "Noto Sans TC"
}

.link svg {
    margin: 0 5px
}

.sidenav {
    display: block;
    position: sticky;
    top: 40%;
    left: 0;
    background: 0 0;
    height: 0;
    transition: visibility .3s, height .3s;
    z-index: 10;
    width: 100px
}

.sidenav.sticky {
    visibility: visible;
    height: 0
}

.sidenav>div {
    cursor: pointer;
    font-size: 22px;
    color: #414042;
    padding: 0 0 30px 30px
}

.sidenav div:hover {
    color: #414042
}

.sidenav div.active {
    color: #414042;
    font-weight: 700
}

.sidenav div::before {
    display: block;
    position: absolute;
    height: 1.5px
}

.sidenav div.active::before {
    display: block;
    position: absolute;
    height: 2.5px
}

.hidden {
    opacity: 0
}

@keyframes zoomInEffect {
    0% {
        transform: scale(0);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.zoomIn {
    animation: .6s ease-in-out forwards zoomInEffect
}

.scroll-downs-pc {
    display: flex;
    ustify-content: center;
    flex-direction: column;
    position: absolute;
    margin: 40px auto 20px;
    left: 50%;
    transform: translateX(-50%)
}

.mousey {
    position: relative;
    width: 3px;
    padding: 5px 11px;
    height: 30px;
    border: 2px solid #1c1c1c;
    border-radius: 25px;
    opacity: .75;
    box-sizing: content-box
}

.mousey_p {
    position: absolute;
    right: -23px;
    font-size: 12px;
    bottom: -25px;
    width: 60px
}

.scroller {
    width: 2px;
    height: 10px;
    border-radius: 40%;
    background-color: #1c1c1c;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite
}

@keyframes scroll {
    0% {
        opacity: 0
    }

    10% {
        transform: translateY(0);
        opacity: 1
    }

    100% {
        transform: translateY(15px);
        opacity: 0
    }
}

.scroll-down-animation {
    padding-top: 20px
}

.scroll-down-animation h4 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    color: #fff
}

.scroll-down4 {
    width: 1px;
    height: 125px;
    background: #fff;
    animation: 2s infinite scrollDown;
    margin: 0 auto
}

@keyframes scrollDown {
    0% {
        transform-origin: top;
        transform: scaleY(0)
    }

    45% {
        transform-origin: top;
        transform: scaleY(1)
    }

    55% {
        transform-origin: bottom;
        transform: scaleY(1)
    }

    100% {
        transform-origin: bottom;
        transform: scaleY(0)
    }
}

@media screen and (max-width:768px) {
    .sidenav {
        display: none
    }

    .scroll-down4 {
        height: 127px
    }

    .scroll-down-animation h4 {
        font-size: 14px
    }
}

@media screen and (max-width:576px) {
    .is-visible .cd-image-label {
        font-size: 20px
    }

    .cd-image-container {
        max-width: 70%;
        margin-top: -40px
    }

    .head-banner .cd-image-container {
        max-width: 80%;
        margin-top: -40px
    }

    .columnTitle {
        font-size: 24px
    }

    .columnTitle:after,
    .columnTitle:before {
        width: 31%
    }

    .image-box {
        margin-bottom: 23px
    }

    .end {
        display: none
    }

    .end-mb {
        display: block
    }

    .end-mb p {
        font-size: 14px;
        width: 90%;
        margin: 0 auto
    }

    .scroll-down4 {
        height: 68px
    }
}