@charset "utf-8";
@font-face { font-family: "GothamBold"; src: url("../font/Gotham-Bold.ttf"); }
@font-face { font-family: "GothamBook"; src: url("../font/Gotham-Book.ttf"); }

/*common*/
:root {
    --coder-color-white: #ffffff;
    --coder-color-black: #333333;
    --coder-color-gray: #cccccc;
    --coder-color-blue: #4664d1;
    --coder-color-red: #ff5722;
    --coder-color-green: #16b777;
    --coder-color-line: #f4f4f7;
}
body { width: 100%; background: var(--coder-color-white); color: var(--coder-color-black); font-family: GothamBook, Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif; }
a, a:hover { cursor: pointer; }

/*web*/
@media (min-width:980px) {
    .container { width: 70%; margin: 0 auto; }
    .mobile { display: none; }

    /*header*/
    .header { width: 94%; height: 30px; margin: 0 auto; padding: 20px 0; display: flex; }
    .header .logo img { height: 30px; }
    .header .menu { margin-left: auto; padding: 2px 0; display: flex; }
    .header .menu img { width: 26px; height: 26px; margin-left: 15px; }
    .nav { background: var(--coder-color-white); width: 400px; height: 100vh; }
    .nav .nav-close { text-align: right; padding-top: 20px; padding-right: calc(100vw * 0.03); }
    .nav .nav-close img { width: 26px; height: 26px; }
    .nav .nav-list { margin: 25px calc(100vw * 0.03); padding: 15px 0; border-top: 1px solid var(--coder-color-gray); border-bottom: 1px solid var(--coder-color-gray); }
    .nav .nav-list p a { font-size: 16px; padding: 15px 0; display: block; }
    .nav .nav-list p a:hover { color: var(--coder-color-blue); }
    .nav .nav-bottom { margin: 30px calc(100vw * 0.03); color: #a7a7a7; font-size: 12px; }
    .nav .nav-bottom p { line-height: 18px; }
    .nav .nav-bottom p:first-child { margin-bottom: 5px; }
    .nav .nav-bottom .copyright { color: var(--coder-color-black); margin-top: 40px; }

    /*banner*/
    .swiper img { width: 100%; }

    /*title*/
    .title { height: 70px; line-height: 70px; border-bottom: 1px solid var(--coder-color-line); }
    .title { font-weight: bold; font-size: 16px; color: var(--coder-color-black); }
    .title a { font-weight: normal; color: var(--coder-color-gray); }

    /*main*/
    .main { padding: 40px 0 50px; display: flex; }
    .main .main-group { width: 25%; margin-top: -10px; }
    .main .main-group li a { padding: 10px 0; display: block; font-size: 14px; color: var(--coder-color-gray); text-transform: uppercase; }
    .main .main-group li a.coder-this { font-weight: bold; color: var(--coder-color-black); }
    .main .main-about { width: 100%; }
    .main .main-about img { display: block; max-width: 100%; }
    .main .main-about p { padding: 10px 0; line-height: 35px; font-size: 15px; }
    .main .main-contact { margin-left: 5%; width: 65%; padding-top: 5vw; }
    .main .main-contact p { line-height: 35px; font-size: 15px; }
    .main .main-content { margin-left: 20px; width: calc(75% - 20px); line-height: 35px; }

    /*shop*/
    .shop-list { margin-left: 20px; width: calc(75% - 20px); line-height: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .shop-list li { width: 30%; margin-bottom: 30px; }
    .shop-list .shop-pic img { width: 100%; border-radius: 10px; display: block; }
    .shop-list .shop-text { padding: 10px 0; }
    .shop-list .shop-text p { font-size: 14px; font-weight: bold; text-align: center; }
    .shop-item { padding: 40px 0 50px; }
    .shop-item .shop-item-info { width: 100%; display: flex; }
    .shop-item .shop-item-image { width: 30vw; height: 30vw; line-height: 30vw; border-radius: 10px; }
    .shop-item .shop-item-image img { width: 100%; border-radius: 10px; }
    .shop-item .shop-item-text { width: 50%; margin-left: auto; }
    .shop-item .shop-item-title { font-size: 18px; font-weight: bold; line-height: 40px; }
    .shop-item .shop-item-small { font-size: 16px; font-family: GothamBold; line-height: 40px; }
    .shop-item .shop-item-short { padding: 40px 0; line-height: 35px; }
    .shop-item .shop-item-short p { margin-left: 5em; text-indent: -5em; }
    .shop-item .shop-item-content { margin-top: 30px; }
    .shop-item .shop-item-content img { width: 100%; display: block; }

    /*footer*/
    .footer { background: #f0f0f0; width: 100%; color: #515151; }
    .footer .footer-main { width: 100%; display: flex; }
    .footer .footer-main h3 { padding: 50px 0 30px; font-size: 14px; }
    .footer .footer-main span { display: block; line-height: 20px; font-size: 12px; }
    .footer .footer-contact { width: 400px; }
    .footer .footer-share { margin-top: 20px; }
    .footer .footer-share img { width: 30px; padding-right: 10px; }
    .footer .footer-qrcode { margin-left: auto; }
    .footer .footer-qrcode-item { display: flex; }
    .footer .footer-qrcode-item p { margin-left: 10px; text-align: center; }
    .footer .footer-qrcode-item p:first-child { margin-left: 0; }
    .footer .footer-qrcode-item img { width: 90px; border-radius: 5px; }
    .footer .footer-qrcode-item span { line-height: 30px; }
    .footer .footer-bottom { width: 100%; margin-top: 20px; padding: 20px 0; border-top: 1px solid #e1e1e1; display: flex; }
    .footer .footer-copyright { height: 14px; line-height: 14px; font-size: 12px; }
    .footer .footer-icp { margin-left: auto; height: 14px; line-height: 14px; font-size: 12px; }
}

/*mobile*/
@media (max-width:979px) {
    .container { width: 94%; margin: 0 auto; }
    .web { display: none; }

    /*header*/
    .header { width: 94%; height: 30px; margin: 0 auto; padding: 20px 0; display: flex; }
    .header .logo img { height: 30px; }
    .header .menu { margin-left: auto; padding: 2px 0; display: flex; }
    .header .menu img { width: 26px; height: 26px; margin-left: 15px; }
    .nav { background: var(--coder-color-white); width: 70vw; height: 100vh; }
    .nav .nav-close { text-align: right; padding-top: 22px; padding-right: calc(100vw * 0.03); }
    .nav .nav-close img { width: 26px; height: 26px; }
    .nav .nav-list { margin: 25px calc(100vw * 0.03); padding: 15px; border-top: 1px solid var(--coder-color-gray); border-bottom: 1px solid var(--coder-color-gray); }
    .nav .nav-list p a { font-size: 16px; padding: 15px 0; display: block; }
    .nav .nav-bottom { margin: 30px calc(100vw * 0.03); color: #a7a7a7; font-size: 12px; }
    .nav .nav-bottom p { line-height: 18px; }
    .nav .nav-bottom p:nth-child(1) { margin-bottom: 5px; }
    .nav .nav-bottom .copyright { color: var(--coder-color-black); margin-top: 40px; }

    /*banner*/
    .swiper img { width: 100%; }

    /*title*/
    .title { height: 70px; line-height: 70px; border-bottom: 1px solid var(--coder-color-line); }
    .title { font-weight: bold; font-size: 16px; color: var(--coder-color-black); }
    .title a { font-weight: normal; color: var(--coder-color-gray); }

    /*main*/
    .main .main-group { padding: 15px 0; border-bottom: 1px solid var(--coder-color-line); display: flex; flex-wrap: wrap; }
    .main .main-group li a { padding: 10px 20px 10px 0; display: block; font-size: 14px; color: var(--coder-color-gray); text-transform: uppercase; }
    .main .main-group li a.coder-this { font-weight: bold; color: var(--coder-color-black); }
    .main .main-about { padding: 30px 0; width: 100%; }
    .main .main-about p { padding: 10px 0; line-height: 35px; font-size: 15px; }
    .main .main-contact { padding: 15vh 0; width: 100%; }
    .main .main-contact p { line-height: 35px; font-size: 15px; }
    .main .main-content { padding: 30px 0; line-height: 35px; }

    /*shop*/
    .shop-list { padding-top: 30px; width: 100%; line-height: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .shop-list li { width: 45%; margin-bottom: 30px; }
    .shop-list .shop-pic img { width: 100%; display: block; }
    .shop-list .shop-text { padding: 10px 0; }
    .shop-list .shop-text p { font-size: 14px; font-weight: bold; text-align: center; }
    .shop-item { padding: 5px 0 30px; }
    .shop-item .shop-item-info { width: 100%; }
    .shop-item .shop-item-image { width: 94vw; height: 94vw; line-height: 94vw; border: 1px solid var(--coder-color-line); text-align: center; }
    .shop-item .shop-item-image img { width: 100%; }
    .shop-item .shop-item-text { width: 100%; padding-top: 20px; }
    .shop-item .shop-item-title { font-size: 16px; font-weight: bold; line-height: 25px; }
    .shop-item .shop-item-small { font-size: 14px; font-family: GothamBold; line-height: 25px; }
    .shop-item .shop-item-short { padding: 20px 0; line-height: 25px; }
    .shop-item .shop-item-short p { margin-left: 5em; text-indent: -5em; }
    .shop-item .shop-item-content img { width: 100%; display: block; }

    /*footer*/
    .footer { background: #f0f0f0; width: 100%; padding: 30px 0; color: #515151; }
    .footer .footer-main h3 { font-size: 14px; line-height: 35px; font-family: GothamBold; }
    .footer .footer-main span { display: block; font-size: 12px; line-height: 20px; }
    .footer .footer-share img { width: 30px; margin-top: 10px; padding-right: 10px; }
    .footer .footer-bottom { margin-top: 20px; font-size: 12px; line-height: 20px; }
}