@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: #1e9fff;
    --coder-color-red: #ff5722;
    --coder-color-green: #16b777;
}

/*web*/
@media (min-width:980px) {
    body { width: 100%; background: var(--coder-color-white); color: var(--coder-color-black); font-family: GothamBook; }
    .container { width: 70%; margin: 0 auto; }
    .mobile { display: none; }

    /*header*/
    .header { width: 94%; height: 26px; margin: 0 auto; padding: 20px 0; display: flex; }
    .header .logo { padding: 3px 0; }
    .header .logo img { height: 20px; }
    .header .menu { margin-left: auto; 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: 30px calc(100vw * 0.03); padding: 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
    .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 p b { font-family: GothamBold; }
    .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 #ccc; }
    .title a { font-family: GothamBold; font-size: 18px; text-transform: uppercase; }

    /*item*/
    .item { padding: 40px 0 50px; display: flex; }
    .item-menu { width: 30%; margin-top: -10px; }
    .item-menu .item-menu-pic img { width: 100%; }
    .item-menu li a { padding: 10px 0; display: block; font-size: 14px; color: #979797; text-transform: uppercase; }
    .item-menu li a.coder-this { font-family: GothamBold; color: var(--coder-color-black); }
    .item-content { margin-left: 5%; width: 65%; line-height: 20px; }
    .item-content b { font-family: GothamBold; }
    .doc { padding: 40px 0 50px; display: flex; }
    .doc-image { width: 30%; }
    .doc-image img { width: 100%; border-radius: 5px; }
    .doc-list { width: 65%; margin-left: 5%; }
    .doc-list li { margin-bottom: 30px; }
    .doc-list li a { display: block; padding-left: 25px; font-size: 16px; text-transform: uppercase; color: #999; position: relative; }
    .doc-list li a:hover { color: var(--coder-color-blue); }
    .doc-list li a:before { content: ""; position: absolute; left: 0px; top: -2px; width: 15px; height: 15px; background: url(../image/icon-pdf.png) no-repeat; background-size: cover; }

    /*shop*/
    .shop { padding: 40px 0 50px; display: flex; }
    .shop-group { width: 25%; margin-top: -10px; }
    .shop-group li a { padding: 10px 0; display: block; font-size: 14px; color: #979797; text-transform: uppercase; }
    .shop-group li a.coder-this { font-family: GothamBold; color: var(--coder-color-black); }
    .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%; display: block; }
    .shop-list .shop-text { padding: 10px 0; display: flex; }
    .shop-list .shop-text p:first-child { width: 100%; font-size: 13px; font-family: GothamBold; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    /*shop-item*/
    .shop-item { padding: 40px 0 50px; }
    .shop-item-top { width: 100%; display: flex; }
    .shop-item-image { width: 30vw; }
    .shop-item-pic { width: 30vw; height: 30vw; line-height: 30vw; border: 1px solid #eee; text-align: center; }
    .shop-item-pic img { width: 100%; }
    .shop-item-pic-arr { margin-top: 10px; width: calc(100% - 10px); overflow-x: scroll; display: flex; align-items: center; border: 1px solid #eee; padding: 5px; }
    .shop-item-pic-arr li { width: calc(16.666% - 4px); cursor: pointer; border: 2px solid var(--coder-color-white); }
    .shop-item-pic-arr li.coder-this { border: 2px solid var(--coder-color-blue); }
    .shop-item-pic-arr li + li { margin-left: 2%; }
    .shop-item-pic-arr li img { width: 100%; }
    .shop-item-text { width: 50%; margin-left: auto; }
    .shop-item-title { font-size: 16px; font-family: GothamBold; line-height: 20px; }
    .shop-item-price { margin-top: 15px; font-size: 24px; font-family: GothamBold; }
    .shop-item-price span { font-size: 16px; }
    .shop-item-tips { font-size: 14px; color: var(--coder-color-blue); padding: 20px 0; }
    .shop-item-buy a img { height: 30px; border-radius: 3px; }
    .shop-item-buy a + a { margin-left: 10px; }
    .shop-item-short { padding: 20px 0; line-height: 20px; }
    .shop-item-short table { width: 100%; margin-top: 20px; border-collapse: collapse; }
    .shop-item-short table th, .shop-item-short table td { line-height: 20px; border: 1px solid #ccc; padding: 5px 10px; }
    .shop-item-content { margin-top: 30px; }
    .shop-item-content img { width: 100%; display: block; }

    /*login*/
    .login { padding: 100px 0; width: 400px; margin: 0 auto; }
    .login .login-title { font-size: 30px; font-family: GothamBold; text-align: center; line-height: 30px; margin-bottom: 30px; }
    .login .layui-input { background: #f3f3f4 !important; border-color: #eee !important; }
    .login .layui-input + .btn-code { position: absolute; width: 100px; top: 4px; right: 4px; font-size: 14px; }
    .login .layui-btn { width: 100%; font-size: 18px; }
    .login .login-text { margin-top: 50px; text-align: center; }
    .login .login-text a { font-family: GothamBold; font-size: 15px; color: var(--coder-color-black); }
    .car-model-list { width: 400px; max-height: 300px; overflow-y: auto; }

    /*user*/
    .user { padding: 40px 0 50px; display: flex; }
    .user-menu { width: 20%; margin-top: -10px; }
    .user-menu-item { padding: 15px 0; }
    .user-menu-item + .user-menu-item { border-top: 1px solid #eee; }
    .user-menu-item li a { display: block; padding: 8px 0; line-height: 20px; color: #979797; font-size: 15px; text-transform: uppercase; }
    .user-menu-item li a:hover, .user-menu-item li a.coder-this { color: var(--coder-color-black); font-family: GothamBold; }
    .user-container { margin-left: 5%; width: 75%; }
    .user-title { padding: 15px 0 25px; font-size: 15px; font-family: GothamBold; text-transform: uppercase; }
    .user-form .layui-input, .user-form .layui-textarea { background: #f3f3f4 !important; border-color: #eee !important; }
    .user-form .user-submit { text-align: right; }
    .car-model-arr { width: 52.6%; max-height: 300px; overflow-y: auto; }

    /*order*/
    .order-search .layui-input { background: #f3f3f4 !important; border-color: #eee !important; }
    .order-search .layui-btn { width: 100%; }
    .order-list .layui-table { margin-top: 30px; }
    .order-list .order-list-title { font-size: 14px; color: #333; font-weight: bold; }
    .order-list .order-list-text { line-height: 30px; }
    .order-repair { padding-bottom: 30px; margin-bottom: 30px; line-height: 30px; border-bottom: 1px solid #eee; }
    .order-repair img { max-width: 100% !important; 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; font-family: GothamBold; }
    .footer .footer-main span { display: block; line-height: 20px; font-size: 12px; }
    .footer .footer-login { width: 400px; }
    .footer .footer-login .layui-input { width: 200px; display: block; float: left; font-size: 12px; margin-top: 25px; border: 1px solid #bfbfbf; }
    .footer .footer-login button { width: 100px; height: 38px; background: #ccc; font-size: 12px; margin-left: -1px; border-radius: 0px; color: #5e5e5e; margin-top: 25px; border: 1px solid #bfbfbf; }
    .footer .footer-contact { width: 210px; margin-left: auto; }
    .footer .footer-contact .footer-share img { width: 20px; margin-top: 40px; padding-right: 10px; }
    .footer .footer-bottom { width: 100%; margin-top: 30px; padding: 20px 0; border-top: 1px solid #bfbfbf; display: flex; }
    .footer .footer-nav { display: flex; }
    .footer .footer-nav li { height: 14px; line-height: 14px; padding: 0 15px; border-left: 1px solid #515151; font-size: 12px; }
    .footer .footer-nav li:first-child { padding-left: 0px; border-left: none; }
    .footer .footer-nav li a { text-transform: uppercase; }
    .footer .footer-nav li a:hover { color: var(--coder-color-blue); }
    .footer .footer-copyright { height: 14px; line-height: 14px; margin-left: auto; font-size: 12px; }
}

/*mobile*/
@media (max-width:979px) {
    body { width: 100%; background: var(--coder-color-white); color: var(--coder-color-black); font-family: GothamBook; }
    .container { width: 94%; margin: 0 auto; }
    .web { display: none; }

    /*header*/
    .header { width: 94%; height: 26px; margin: 0 auto; padding: 20px 0; display: flex; }
    .header .logo { padding: 3px 0; }
    .header .logo img { height: 20px; }
    .header .menu { margin-left: auto; display: flex; }
    .header .menu img { width: 26px; height: 26px; margin-left: 15px; }
    .nav { background: var(--coder-color-white); width: 50vw; 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: 30px calc(100vw * 0.03); padding: 15px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
    .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 p b { font-family: GothamBold; }
    .nav .nav-bottom .copyright { color: var(--coder-color-black); margin-top: 40px; }

    /*banner*/
    .banner li { margin-bottom: 20px; }
    .banner li p { padding: 5px 3%; line-height: 20px; font-size: 14px; font-family: GothamBold; text-align: center; }
    .banner img { width: 100%; display: block; }

    /*title*/
    .title { height: 70px; line-height: 70px; border-bottom: 1px solid #ccc; }
    .title a { font-family: GothamBold; font-size: 18px; text-transform: uppercase; }

    /*item*/
    .item-menu { padding: 15px 0; border-bottom: 1px solid #ccc; }
    .item-menu li a { padding: 10px 0; display: block; font-size: 14px; color: #979797; text-transform: uppercase; }
    .item-menu li a.coder-this { font-family: GothamBold; color: var(--coder-color-black); }
    .item-content { line-height: 20px; margin: 40px 0; }
    .item-content b { font-family: GothamBold; }
    .doc { padding: 40px 0 50px; }
    .doc-list li { margin-bottom: 30px; }
    .doc-list li a { display: block; padding-left: 25px; font-size: 16px; text-transform: uppercase; color: #999; position: relative; }
    .doc-list li a:hover { color: var(--coder-color-blue); }
    .doc-list li a:before { content: ""; position: absolute; left: 0px; top: -2px; width: 15px; height: 15px; background: url(../image/icon-pdf.png) no-repeat; background-size: cover; }

    /*shop*/
    .shop-group { padding: 15px 0; border-bottom: 1px solid #ccc; }
    .shop-group li a { padding: 10px 0; display: block; font-size: 14px; color: #979797; text-transform: uppercase; }
    .shop-group li a.coder-this { font-family: GothamBold; color: var(--coder-color-black); }
    .shop-list { 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; display: flex; }
    .shop-list .shop-text p{ width: 100%; font-size: 13px; font-family: GothamBold; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    /*shop-item*/
    .shop-item { padding: 5px 0 50px; }
    .shop-item-top { width: 100%; }
    .shop-item-image { width: 100%; }
    .shop-item-pic { width: 94vw; height: 94vw; line-height: 94vw; border: 1px solid #eee; text-align: center; }
    .shop-item-pic img { width: 100%; }
    .shop-item-pic-arr { margin-top: 10px; width: clac(100% - 10px); padding: 5px; overflow-x: scroll; display: flex; align-items: center; border: 1px solid #eee; }
    .shop-item-pic-arr li { width: calc(16.666% - 4px); cursor: pointer; border: 2px solid var(--coder-color-white); }
    .shop-item-pic-arr li.coder-this { border: 2px solid var(--coder-color-blue); }
    .shop-item-pic-arr li + li { margin-left: 10px; }
    .shop-item-pic-arr li img { width: 100%; }
    .shop-item-text { width: 100%; margin-top: 20px; }
    .shop-item-title { font-size: 16px; font-family: GothamBold; line-height: 20px; }
    .shop-item-price { margin-top: 15px; font-size: 24px; font-family: GothamBold; }
    .shop-item-price span { font-size: 16px; }
    .shop-item-tips { font-size: 14px; color: var(--coder-color-blue); padding: 20px 0; }
    .shop-item-buy a img { height: 30px; border-radius: 3px; }
    .shop-item-buy a + a { margin-left: 10px; }
    .shop-item-short { padding: 20px 0; line-height: 20px; }
    .shop-item-short table { width: 100%; margin-top: 20px; border-collapse: collapse; }
    .shop-item-short table th, .shop-item-short table td { line-height: 20px; border: 1px solid #ccc; padding: 5px 10px; }
    .shop-item-content { margin-top: 30px; }
    .shop-item-content img { width: 100%; display: block; }

    /*login*/
    .login { padding: 100px 0; width: 90%; margin: 0 auto; }
    .login .login-title { font-size: 30px; font-family: GothamBold; text-align: center; line-height: 30px; margin-bottom: 30px; }
    .login .layui-input { background: #f3f3f4 !important; border-color: #eee !important; }
    .login .layui-input + .btn-code { position: absolute; width: 100px; top: 4px; right: 4px; font-size: 14px; }
    .login .layui-btn { width: 100%; font-size: 18px; }
    .login .login-text { margin-top: 50px; text-align: center; }
    .login .login-text a { font-family: GothamBold; font-size: 15px; color: var(--coder-color-black); }
    .car-model-list { width: 84.5%; max-height: 300px; overflow-y: auto; }

    /*user*/
    .user-menu { padding: 15px 0; border-bottom: 1px solid #ccc; }
    .user-menu-item { padding: 15px 0; }
    .user-menu-item + .user-menu-item { border-top: 1px solid #eee; }
    .user-menu-item li a { display: block; padding: 8px 0; line-height: 20px; color: #979797; font-size: 15px; text-transform: uppercase; }
    .user-menu-item li a:hover, .user-menu-item li a.coder-this { color: var(--coder-color-black); font-family: GothamBold; }
    .user-container { padding: 30px 0; }
    .user-title { padding: 15px 0 25px; font-size: 15px; font-family: GothamBold; text-transform: uppercase; }
    .user-form .layui-input { background: #f3f3f4 !important; border-color: #eee !important; }
    .user-form .user-submit { text-align: center; }
    .car-model-arr { width: 94%; max-height: 300px; overflow-y: auto; }

    /*order*/
    .order-search .layui-input { background: #f3f3f4 !important; border-color: #eee !important; }
    .order-search .layui-btn { width: 100%; }
    .order-list .layui-table { margin-top: 30px; }
    .order-list .order-list-title { font-size: 14px; color: #333; font-weight: bold; }
    .order-list .order-list-text { line-height: 30px; }

    /*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-contact .footer-share img { width: 20px; margin-top: 10px; padding-right: 10px; }
    .footer .footer-bottom .footer-copyright { margin-top: 20px; }
}