@charset "utf-8";

body {
    font-family: 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
}

.gltf {
    height: 100vh;
}

.gltf model-viewer {
    width: 100%;
    height: 100%;
    background-color: #eee;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.headwidth {
    max-width: 1600px;
    margin: 0 auto;
}

ul:after,
section:after,
div:after,
li:after {
    content: '';
    display: block;
    clear: both;
}

.text-231815 {
    color: #231815;
}
.text-595757 {
    color: #595757;
}
.bg-595757 {
    background-color: #595757;
}

.text-DCDDDD {
    color: #dcdddd;
}

.bg-DCDDDD {
    background-color: #dcdddd;
}

.text-007643 {
    color: #007643;
}

.bg-007643 {
    background-color: #007643;
}

.text-3E3A39 {
    color: #3e3a39;
}
.bg-3E3A39 {
    background-color: #3e3a39;
}
:hover.hover-a {
    color: #007643;
}

/*template*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.37);
    justify-content: center;
    padding: 20px;
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    padding: 30px;
    border-radius: 4px;
    margin: 0 auto;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1 rem;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    margin-left: 5px;
    margin-right: 5px;
}

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;

    margin-left: 5px;
    margin-right: 5px;
}

/*header*/
.headerbox {
    height: 79px;
    top: 0px;
    right: 0px;
    width: 100%;
    position: fixed;
    z-index: 999;
}

.headerbox.index {
    background-color: #ffffff9a;
}
.headerbox.index.headroom--top {
    background-color: #ffffff9a;
}

.headerbox.headroom--top {
    background-color: transparent;
}

.headroom--unpinned {
    background-color: #ffffff9a;
}
.headroom--pinned {
    transition: all 0.33333s ease-in-out;
    background-color: #ffffff9a;
}

.headerbox.index.headroom--top .logochange,
.headerbox.index.headroom--top .fbchange,
.headerbox.index.headroom--top .youtubechange,
.headerbox.index.headroom--top .memberchange,
.headerbox.headroom--top .logochange2,
.headerbox.headroom--top .fbchange2,
.headerbox.headroom--top .youtubechange2,
.headerbox.headroom--top .memberchange2 {
    display: block;
}

.headerbox.index .logochange2,
.headerbox.index .fbchange2,
.headerbox.index .youtubechange2,
.headerbox.index .memberchange2,
.headerbox.headroom--top .logochange,
.headerbox.headroom--top .fbchange,
.headerbox.headroom--top .youtubechange,
.headerbox.headroom--top .memberchange {
    display: none;
}

.headroom--unpinned .logochange2,
.headroom--unpinned .fbchange2,
.headroom--unpinned .youtubechange2,
.headroom--unpinned .memberchange2 {
    display: none;
}
.headroom--unpinned .logochange,
.headroom--unpinned .fbchange,
.headroom--unpinned .youtubechange,
.headroom--unpinned .memberchange {
    display: block;
}

.headroom--pinned .logochange2,
.headroom--pinned .fbchange2,
.headroom--pinned .youtubechange2,
.headroom--pinned .memberchange2 {
    display: none;
}

.headroom--pinned .logochange,
.headroom--pinned .fbchange,
.headroom--pinned .youtubechange,
.headroom--pinned .memberchange {
    display: block;
}

.sidebtn {
    position: fixed;
    z-index: 2;
    top: 20%;
    right: 2%;
}
.headbtn {
    font-size: 30px;
    color: #007643;
    padding-top: 31px;
    padding-left: 11px;
}
.open {
    background-color: white;
    align-items: center;
    height: 95px;
    width: 50px;
    margin-top: -20px;
}
.close {
    background-color: white;
    align-items: center;
    height: 95px;
    width: 50px;
    margin-top: -20px;
}
.closebtn {
    font-size: 30px;
    color: #007643;
    padding-top: 31px;
    padding-left: 11px;
}
.menu {
    display: none;
}
.rwdmenu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000e8;
    z-index: 999;
    transform: translate(-100%, 0);
}
.rwdmenu.active {
    transform: translate(0, 0);
}

.menubtn button {
    outline: none;
}

.rwdmenulist {
    display: block;
    padding: 17px;
}

.rwdmenulist a {
    position: relative;
}
.rwdmenulist a:before {
    content: '';
    position: absolute;
    top: 46px;
    left: 49%;
    background-color: #007643;
    width: 0%;
    height: 2px;
    border-radius: 15px;
    transform: translate3d(-50%, 0, 0);
    transition: all 0.5s ease;
}
.rwdmenulist a:hover::before,
.rwdmenulist a.active::before {
    width: 60%;
}

.mail:hover,
.phone:hover,
.member:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 1.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 0px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, 0px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 0px) rotate(0deg);
    }
    40% {
        transform: translate(1px, 0px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 0px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 0px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 0px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, 0px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 0px) rotate(0deg);
    }
    100% {
        transform: translate(1px, 0px) rotate(-1deg);
    }
}
/*banner*/
.some-class {
    min-height: 50vh;
    background: transparent;
}
.parallax-mirror img {
    object-fit: contain;
    width: 100% !important;
}

.bannersplide .splide__pagination {
    position: absolute;
    bottom: 30%;
    left: 0;
    transform: translate3d(27%, 0, 0);
}

.bannersplide .splide__track {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
}
.bannersplide .splide__pagination .splide__pagination__page {
    background-color: #ffffffab;
    width: 100px;
    height: 8px;
}
.bannersplide .splide__pagination li {
    padding: 20px 5px 10px 5px;
    outline: none;
}
.bannersplide .splide__pagination button {
    outline: none;
}

/*news*/
.deadline a {
    border-bottom: 1px solid #000;
    display: block;
}
.deadline a:last-child {
    border-bottom: 0;
}
.newsbg,
.newsbgadd {
    height: 493px;
    width: 255px;
    position: relative;
}
.newsbgadd:before {
    content: '';
    position: absolute;
    top: -21%;
    width: 100%;
    height: 108px;
    background-color: #007643;
}

.newstop {
    position: relative;
}

.newsmore:hover {
    color: #007643;
}
.morebg:hover {
    box-shadow: 3px 6px 11px rgb(0 0 0 / 38%);
}

.dot {
    background-color: #007643;
    width: 8px;
    height: 8px;
}
.dot:hover,
.dot.active {
    width: 14px;
    height: 14px;
}

/*newslist*/
.lastbtn {
    color: #007643;
    font-size: 35px;
}

/*project*/
.goarrow {
    color: white;
}
.goarrow:hover {
    background-color: #029153;
}
.pagelist li {
    width: 271px !important;
}

.pagetop,
.picscale {
    position: relative;
    overflow: hidden;
}
a:hover .pagetop img {
    transform: scale(1.1);
}

.picscale {
    position: relative;
    overflow: hidden;
}
li:hover .picscale img {
    transform: scale(1.1);
}

.pagemovesplide .splide__arrow--prev {
    left: 0%;
    transform: translate3d(-63%, 417%, 0px);
    z-index: 10;
    position: absolute;
}

.pagemovesplide .splide__arrow--next {
    right: -13%;
    transform: translate3d(178%, 417%, 0px);
    z-index: 300;
    position: absolute;
}
.pagemovesplide.splide--slide {
    width: calc(100% - 220.3px);
}
.newsbg2 {
    position: relative;
    z-index: 200;
}

.projectlist li {
    width: calc(100% / 4 - 30px);
    margin: 15px;
}

/*projectlist*/
.checkbtn:hover {
    background-color: #029153;
    box-shadow: 2px 3px 8px rgb(0 0 0 / 30%);
}

/*projectview*/
.sideline1 {
    height: auto;
}

.aboutwrd {
    transform: translate(288px, 0px);
}

.aboutbox {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translate3d(47px, -313px, 0);
}
.wrdwidth {
    width: 59%;
}
.aboutmovesplide.splide {
    position: absolute;
    top: 32%;
    left: 0;
    width: 100%;
}
.aboutmovesplide .splide__slide > div {
    padding-left: 165px;
}
.aboutmovesplide .splide__arrow--prev {
    top: 33%;
    left: -3.3%;
    position: absolute;
    z-index: 10;
}

.aboutmovesplide .splide__arrow--next {
    top: 33%;
    right: -3%;
    position: absolute;
    z-index: 10;
}

.logobg {
    background-color: white;
    width: 234px;
    height: 173px;
}

.side-left {
    width: 79%;
    height: 100%;
    float: left;
    margin-top: -57px;
    position: relative;
}
.side-splide {
    width: 76%;
    height: 100%;
    float: left;
    margin-top: -57px;
    position: relative;
}

.side-top {
    width: 100%;
    height: 100%;
    float: left;
    margin-top: -57px;
    position: relative;
}

.sideline {
    height: auto;
}
.sidewrd:hover,
.sidewrd.active {
    color: #007643;
}
/*contact*/
.contactline {
    width: 35rem;
}
/*footer*/
.footerlist li {
    width: calc(100% / 2 - 280px);
    margin: 40px;
}
.gotop button {
    outline: none;
}
.gotop {
    position: fixed;
    right: calc((100% - 1200px - 150px) / 2);
    bottom: 300px;
}
.gotop {
    display: none;
    position: fixed;
}
.gotop.active {
    display: block;
    z-index: 50;
}
.flip,
.flip1,
.flip2,
.flip3,
.flip4,
.flip5,
.flip6,
.flip7 {
    cursor: pointer;
}
.panel,
.panel1,
.panel2,
.panel3,
.panel4,
.panel5,
.panel6,
.panel7 {
    display: none;
}

/*classic*/
.classicpic {
    top: 4rem;
    z-index: 1;
    left: 0;
}
.classicpic2 {
    top: 4rem;
    right: 0;
    z-index: 1;
}
.picscale img {
    float: right;
}
li:nth-child(even) .classicpic,
li:nth-child(even) .cartpic {
    right: 0;
    left: unset;
}
li:nth-child(even) .picscale img {
    float: left;
}

/*cart*/
.orderbtn {
    background: linear-gradient(
        to bottom,
        #616161 0%,
        #616161 26%,
        #262626 100%
    );
}
:hover.orderbtn {
    background: #262626;
}

.cartpic {
    top: 2.5rem;
    z-index: 1;
    left: 0;
}
.cartpic2 {
    top: 2.5rem;
    right: 0;
    z-index: 1;
}

/*progressdetail*/
.progresspic {
    height: 50vh;
}

/*cartdetail*/
.bottomline {
    border-bottom: 1px dashed #727171;
    height: 50px;
    width: 100%;
}
.bottomline2 {
    border-bottom: 1px dashed #727171;
    height: 50px;
    width: 50%;
}
.buybtn {
    background: linear-gradient(to bottom, #007643 0%, #003616 100%);
}
:hover.buybtn {
    background: #007643;
}

.splide .splide__arrow--prev {
    position: absolute;
    top: 50%;
    left: -4%;
    z-index: 1;
}
.splide .splide__arrow--next {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -4%;
}

.progressbar {
    width: 100%;
    height: 0%;
}
.progressbar .bar {
    width: 100px;
    display: block;
    background-color: #007643;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: calc((100% - 100px) / 2);
    text-align: center;
}
.progressbar .item {
    height: 50px;
}
.progressbar .right {
    border-left: 1px solid #7db99f;
}
.progressbar .right .item {
    border-bottom: 1px dotted #ccc;
}
.progressbar .right .item.last {
    border-bottom: 3px solid #007643;
}
.progressbar .right .item.last:before {
    content: '';
    position: absolute;
    width: 40px;
    left: -40px;
    bottom: 0;
    border-bottom: 3px solid #007643;
    /* border-bottom: 2px solid #007643; */
}

.cartdetaillist li {
    border-bottom: 1px solid #ccc;
}
.cartdetaillist li:last-child {
    border-bottom: 0;
}
.cartdetaillist li a {
    color: #ccc;
}
.cartdetaillist li a.active {
    color: #000;
}

/*cartform*/
.place2 {
    width: 28rem;
}

/*login*/
:hover.forget {
    text-decoration: underline;
    color: rgba(59, 130, 246);
}
/*signup*/
.place3 {
    width: 23.3rem;
}

/*member*/
.membercode {
    padding-left: 6.8rem;
}
.wrapper {
    width: auto;
    height: 100%;
    position: relative;
}
.popup:focus {
    outline: none;
}
.box {
    display: none;
    position: absolute;
    border: #c7c7c7 solid 1px;
    border-radius: 10px;
    z-index: 200;
    background-color: #ffffff;
    transform: translate3d(-142%, -194%, 0);
    /* width: auto; */
    width: 100%;
    padding: 30px;
}
.closebtn2 {
    position: absolute;
    top: 6px;
    right: 10px;
    cursor: pointer;
}

/*order*/
.panel {
    max-height: 0;
    overflow: hidden;
    transition: all 0.33333s ease-in-out;
}
.active + .panel {
    max-height: 1000px;
    display: block;
}
.order li .active .orderarrow {
    transform: rotate(90deg);
}
.thumbnails {
    display: flex;
    margin: 1rem auto 0;
    padding: 0;
    justify-content: left;
    width: 600px;
}

.thumbnail {
    width: 100px;
    height: 100px;
    overflow: hidden;
    list-style: none;
    margin: 0 0.2rem;
    cursor: pointer;
}

.thumbnail img {
    width: 100%;
    height: auto;
}

.main-slider li img {
    width: 600px;
}

.splide .splide__arrow--prev {
    position: absolute;
    top: 50%;
    left: 6%;
    z-index: 1;
}

.splide .splide__arrow--next {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 6%;
}

/*cartdetail*/
.side-left {
    width: 70%;
    height: 100%;
    float: left;
    margin-top: -57px;
    position: relative;
}

@media screen and (max-width: 2560px) {
    .bannersplide .splide__pagination {
        position: absolute;
        bottom: 51%;
        left: 0;
        transform: translate3d(27%, 0, 0);
    }
    .bannersplide .splide__pagination {
        top: 88%;
    }

    .pagemovesplide.splide--slide {
        width: calc(100% - 234.3px);
    }
    .pagelist li {
        width: 204px !important;
    }

    .pagemovesplide .splide__arrow--prev {
        transform: translate3d(-10%, 417%, 0px);
    }
    .pagemovesplide .splide__arrow--next {
        transform: translate3d(209%, 417%, 0px);
    }

    /*about*/
    .wrdwidth {
        width: 42%;
    }
    .aboutmovesplide .splide__arrow--prev {
        left: -1.3%;
    }
    .aboutmovesplide .splide__arrow--next {
        right: -1%;
    }

    /*footer*/
    .gotop {
        right: 1%;
    }

    /*member*/
    .box {
        transform: translate3d(-138%, -275%, 0);
    }
}

@media screen and (max-width: 1920px) {
    /*member*/
    .box {
        transform: translate3d(-105%, -275%, 0);
    }
}

@media screen and (max-width: 1440px) {
    .bannersplide .splide__pagination {
        top: 83%;
    }
    /*member*/
    .box {
        transform: translate3d(-79%, -275%, 0);
    }
}
@media screen and (max-width: 1366px) {
    /*member*/
    .box {
        transform: translate3d(-75%, -85%, 0);
    }
}

@media screen and (max-width: 1024px) {
    /*cartdetail*/
    .splide .splide__arrow--prev {
        left: -1%;
    }
    .splide .splide__arrow--next {
        right: -1%;
    }

    /*signup*/
    .place3 {
        width: 18.6rem;
    }

    /*member*/
    .membercode {
        padding-left: 4.8rem;
    }
    .box {
        transform: translate3d(-53%, -246%, 0);
    }

    .side-splide {
        width: 72%;
    }
}

@media screen and (max-width: 820px) {
    .headerbg {
        background-color: #007643;
        height: 82px;
    }
    .main {
        padding-top: 78px;
    }
    /*banner*/
    .rwdbannersplide .splide__list li {
        height: 100% !important;
    }
    .rwdbannersplide .splide__pagination {
        position: absolute;
        top: 88%;
        right: 0%;
    }
    .rwdbannersplide .splide__pagination .splide__pagination__page {
        background-color: #ffffffab;
        width: 100px;
        height: 8px;
    }
    .rwdbannersplide .splide__pagination li {
        padding: 20px 5px 10px 5px;
        outline: none;
    }

    /*news*/
    .newsbg,
    .newsbgadd {
        height: 203px;
        width: 100%;
        position: relative;
    }

    /*project*/
    .rwdpagemovesplide .splide__arrow--prev {
        left: 0%;
        transform: translate3d(13%, 588%, 0px);
        z-index: 10;
        position: absolute;
    }
    .rwdpagemovesplide .splide__arrow--next {
        right: 0%;
        transform: translate3d(-4%, 588%, 0px);
        z-index: 10;
        position: absolute;
    }

    /*about*/
    .rwdaboutmovesplide .splide__arrow--prev {
        left: 0%;
        transform: translate3d(13%, 417%, 0px);
        z-index: 10;
        position: absolute;
    }
    .rwdaboutmovesplide .splide__arrow--next {
        right: 0%;
        transform: translate3d(-4%, 417%, 0px);
        z-index: 10;
        position: absolute;
    }
    .side-left {
        width: 100%;
        height: 100%;
        float: left;
        margin-top: -57px;
        position: relative;
    }

    .side-splide {
        width: 100%;
    }

    /*classic*/
    .classicpic,
    .classicpic2 {
        top: 2rem;
    }

    /*cart*/
    .cartpic,
    .cartpic2 {
        top: 1.5rem;
    }

    /*cartform*/
    .place2 {
        width: 100%;
    }

    /*signup*/
    .place3 {
        width: 100%;
    }

    /*member*/
    .membercode {
        padding-left: 0.6rem;
    }
    .box {
        transform: translate3d(-52%, -62%, 0);
    }

    /*cartdetail*/
    .side-left {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    /*banner*/
    .headerbg {
        background-color: #007643;
        height: 82px;
    }
    .logobg {
        background-color: white;
        width: 40%;
        height: 30%;
    }

    .rwdbannersplide .splide__track {
        position: relative;
        z-index: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    .rwdbannersplide .splide__list li {
        height: 100% !important;
    }

    .rwdbannersplide .splide__pagination .splide__pagination__page {
        background-color: #ffffffab;
        width: 100px;
        height: 8px;
    }
    .rwdbannersplide .splide__pagination li {
        padding: 20px 5px 10px 5px;
        outline: none;
    }
    .rwdbannersplide .splide__pagination button {
        outline: none;
    }
    .rwdbannersplide .splide__pagination {
        position: absolute;
        top: 88%;
        right: 0%;
    }

    /*news*/
    .newsbg {
        height: 219px;
        width: 100%;
    }
    .sharebg {
        margin-top: -11px;
    }
    .newsbgadd:before {
        content: '';
        position: absolute;
        top: -15%;
        width: 100%;
        height: 108px;
        background-color: #007643;
    }

    /*rwdproject*/

    .pagelist li {
        width: 271px !important;
    }
    .rwdpagemovesplide .splide__arrow--prev {
        left: 0%;
        transform: translate3d(13%, 588%, 0px);
        z-index: 10;
        position: absolute;
    }

    .rwdpagemovesplide .splide__arrow--next {
        right: 0%;
        transform: translate3d(-4%, 588%, 0px);
        z-index: 10;
        position: absolute;
    }

    /*about*/
    .aboutbox {
        position: unset;
        top: 0%;
        right: 0%;
        transform: translate3d(0px, 0px, 0);
    }
    .rwdaboutmovesplide .splide__arrow--prev {
        left: 0%;
        transform: translate3d(13%, 417%, 0px);
        z-index: 10;
        position: absolute;
    }

    .rwdaboutmovesplide .splide__arrow--next {
        right: 0%;
        transform: translate3d(-4%, 417%, 0px);
        z-index: 10;
        position: absolute;
    }

    .side-left {
        width: 100%;
        height: 100%;
        float: left;
        margin-top: -57px;
        position: relative;
    }

    /*project*/
    .projectlist li {
        width: calc(100% / 2 - 97px);
        margin: 48px;
    }

    /*member*/
    .box {
        transform: translate3d(-52%, -193%, 0);
    }
}

@media screen and (max-width: 425px) {
    /*banner*/

    .rwdbannersplide .splide__pagination .splide__pagination__page {
        width: 63px;
    }
    .rwdbannersplide .splide__pagination {
        top: 86%;
        right: 3%;
    }
    .newsbgadd:before {
        content: '';
        position: absolute;
        top: -37%;
        width: 100%;
        height: 0px;
        background-color: #007643;
    }

    /*news*/
    .newsbg {
        height: 162px;
    }

    /*project*/

    .aboutwrd {
        transform: translate(391px, 0px);
    }
    .wrdwidth {
        width: 27%;
    }

    /*news*/
    .newstop {
        margin-top: -44px;
    }

    /*project*/
    .projectlist li {
        width: calc(100% / 2 - 7px);
        margin: 3px;
    }
    .rwdpagemovesplide .splide__arrow--prev {
        width: 46px;
    }
    .rwdpagemovesplide .splide__arrow--next {
        width: 46px;
    }

    /*contact*/
    .contactline {
        width: 20rem;
    }
    /*about*/
    .rwdaboutmovesplide .splide__arrow--prev {
        left: 0%;
        transform: translate3d(-10%, 647%, 0px);
        z-index: 10;
        position: absolute;
        width: 53px;
    }
    .rwdaboutmovesplide .splide__arrow--next {
        right: 0%;
        transform: translate3d(20%, 647%, 0px);
        z-index: 10;
        position: absolute;
        width: 53px;
    }

    /*classic*/
    .classicpic,
    .classicpic2 {
        position: unset;
    }
    /*cart*/
    .cartpic,
    .cartpic2 {
        position: unset;
    }
    /*member*/
    .box {
        transform: translate3d(-53%, -23%, 0);
    }

    .gotop {
        bottom: 20px;
    }
    /*order*/
    .thumbnails {
        width: 100%;
    }
    .splide .splide__arrow--prev {
        left: -5%;
    }

    .splide .splide__arrow--next {
        right: -5%;
    }
}

@media screen and (max-width: 414px) {
    /*member*/
    .box {
        transform: translate3d(-54%, -25%, 0) !important;
    }
}

@media screen and (max-width: 375px) {
    /*rwdbanner*/

    .rwdbannersplide .splide__pagination {
        top: 79%;
        right: 3%;
    }
    /*about*/
    .aboutpic {
        padding-left: 0;
    }
    .wrdwidth {
        width: 23%;
        padding-top: 0;
    }

    .projectlist {
        display: block;
    }
    .projectlist li {
        width: calc(100% - 71px);
        margin: 40px;
    }

    /*contact*/
    .contactline {
        width: 17rem;
    }
    /*cartform*/
    .place {
        padding-left: 25px;
        padding-right: 25px;
    }
    /*member*/
    .box {
        transform: translate3d(-55%, -25%, 0);
    }
}

@media screen and (max-width: 320px) {
    /*header*/
    .logobg {
        width: 19%;
    }

    .wrdwidth p {
        font-size: 19px;
    }
    .wrdwidth {
        width: 20%;
    }
    /*contact*/
    .contactline {
        width: 14rem;
    }
    /*cartform*/
    .place {
        padding-left: 15px;
        padding-right: 15px;
    }
}