:root {
    --green-color: #99bb7e;
    --title-color: #9a9899;
    --var-color-title: #494748;
    --light-grey-light: #f0efed;
    --light-grey-slight: #f5f5f3;
    --light-grey-sslight: #b2b2b2;
    --light-grey-line: #82817f;
    --grey-color: #464646;
    --dirty-brown: #776d64;
    --deep-blue: #2C5282;
    --font-JengHei: '微軟正黑體';
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-JengHei) ,sans-serif;
    overflow-x: hidden;
    box-sizing: border-box;
}

.row::before, .row::after {
    display: block;
}

.fs-10 { font-size: 10px !important;}
.fs-12 { font-size: 12px !important;}
.fs-14 { font-size: 14px !important;}
.fs-15 { font-size: 15px !important;}
.fs-16 { font-size: 16px !important;}
.fs-18 { font-size: 18px !important;}
.fs-20 { font-size: 20px !important}
.fs-21 { font-size: 21px !important}
.fs-22 { font-size: 22px !important}
.fs-23 { font-size: 23px !important}
.fs-24 { font-size: 24px !important}
.fs-25 { font-size: 25px !important}
.fs-32 { font-size: 32px !important;}
.fs-35 { font-size: 35px !important;}
.fs-40 { font-size: 40px !important;}
.fs-62 { font-size: 62px !important;}

.text-green { color: var(--green-color);}
.text-grey { color: var(--grey-color);}
.text-light-grey { color: var(--grey-color);}
.text-deep-blue { color: var(--deep-blue);}

.content-text p {margin-bottom: 0.75rem;}

.lh-15 { line-height: 1.5; }
.lh-18 { line-height: 1.8; }
.lsp-1 { letter-spacing: 0.1rem; }
.lsp-2 { letter-spacing: 2px; }
.lsp-3 { letter-spacing: 3px; }
.lsp-4 { letter-spacing: 4px; }

.w-30 { width: 30% !important;}
.w-35 { width: 35% !important;}
.w-40 { width: 40% !important;}
.w-60 { width: 60% !important;}
.w-70 { width: 70% !important;}
.w-80 { width: 80% !important;}

@media (min-width: 1201px) {
    .w-xxl-auto { width: auto !important;}
}

@media (max-width: 1200px) {
    .w-lg-60 { width: 60% !important;}
    .w-lg-80 { width: 80% !important;}
    .w-lg-100 { width: 100% !important;}
    .w-lg-auto { width: auto !important;}
}

@media (max-width: 992px) {
    .w-md-auto { width: auto !important;}
    .w-md-30 { width: 30% !important;}
    .w-md-35 { width: 35% !important;}
    .w-md-40 { width: 40% !important;}
    .w-md-50 { width: 50% !important;}
    .w-md-60 { width: 60% !important;}
    .w-md-70 { width: 70% !important;}
    .w-md-75 { width: 75% !important;}
    .w-md-100 { width: 100% !important;}
}

@media (max-width: 768px) {
    .w-smd-100 { width: 100% !important;}
}

@media (max-width: 576px) {
    .w-sm-auto { width: auto !important;}
    .w-sm-30 { width: 30% !important;}
    .w-sm-35 { width: 35% !important;}
    .w-sm-40 { width: 40% !important;}
    .w-sm-50 { width: 50% !important;}
    .w-sm-60 { width: 60% !important;}
    .w-sm-70 { width: 70% !important;}
    .w-sm-90 { width: 90% !important;}
    .w-sm-100 { width: 100% !important;}


    .fs-sm-40 { font-size: 40px !important;}
}

.main.webedit {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.view {
    position: relative;
    overflow: hidden;
    cursor: default;
    transform: scale(1);
}

.view .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: background-color 250ms ease;
    background-attachment: fixed;
    animation: transform3d 0.6s alternate;
}

.view.zoom {transition: all 250ms ease; transition-delay: 250ms;}
.view.zoom:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1);
}

@keyframes transform3d {
    0% {
        /*transform: translate3d(0px, 100px, 0);*/
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        /*transform: translate3d(0, 0, 0);*/
        transform: scale(1);
        opacity: 1;
    }
}

.view.overlay:hover img + p.mask.rgba-black-strong, .view.overlay:hover img + a.mask.rgba-black-strong {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    justify-content: center;
    color: white;
    line-height: 1.5;
    font-size: 16px;
    letter-spacing: 4px;
    padding: 1rem;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
    cursor: pointer;
}

.border-greenline {
    border: 1px solid var(--green-color);
    width: 25%;
}

.border-brown {
    border: 1px solid var(--dirty-brown);
    width: 25%;
}

p.mask.rgba-black-strong, .img-art + a.mask.rgba-black-strong{
    display: none;
    cursor: pointer;
    transition: all .5s 230ms ease-in;
}

p.mask.rgba-white-strong, .img-art + a.mask.rgba-white-strong{
    display: none;
    cursor: pointer;
    transition: all .5s 230ms ease-in;
}

.view.overlay:hover img + p.mask.rgba-black-strong, .view.overlay:hover img + a.mask.rgba-black-strong {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    justify-content: center;
    color: white;
    line-height: 1.5;
    font-size: 16px;
    letter-spacing: 4px;
    padding: 1rem;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
    cursor: pointer;
}

.view.overlay:hover img + p.mask.rgba-white-strong, .view.overlay:hover img + a.mask.rgba-white-strong {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    justify-content: center;
    color: white;
    line-height: 1.5;
    font-size: 16px;
    letter-spacing: 4px;
    padding: 1rem;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.8);
    cursor: pointer;
}