@charset "utf-8";

.container {padding: 0 6%; margin: 0 auto}

header {z-index: 3;}
header .container {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 155px;}
header h1 {width: 20%;font-size: 0}
header h1 img {max-width:70%}
header nav {width: 78%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center}
header nav>ul {margin-left: auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}
header nav>ul>li {float: left;margin-right: 5%; font-size: 1.125rem; word-break: keep-all;position: relative}
header nav>ul>li a {display: block;}
header nav>ul>li:first-child>a {padding-right: 1em;position: relative}
header nav>ul>li:first-child:hover ul {opacity: 1;overflow: visible;visibility: visible;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;-webkit-transform: translate(0);transform: translate(0)}
header nav>ul>li:first-child:hover>a:after {-webkit-transform: rotate(180deg);transform: rotate(180deg)}
header nav>ul>li:first-child>a:after {content: "";width: 10px;height: 5px;background: url(../images/arr_gnb.png) no-repeat 100% 50%;position: absolute;right: 0;top: 50%;margin-top: -2px}
header nav>ul ul {opacity: 0;padding-top: 5px;overflow: hidden;visibility: hidden;position: absolute;background: #fff;-webkit-transition: all 0.3s ease;transition: all 0.3s ease; -webkit-transform: translate(0, -5px); transform: translate(0, -5px)}
header nav>ul ul li {border-bottom: 1px solid #000;line-height: 1.8}
.search {width: 200px;}
.search .form-control {border-width: 0 0 1px; border-color: #000; font-size: .75rem; padding: 0;}
.search .btn {font-size: 0;padding-top: 0;padding-bottom: 0;-ms-flex-item-align: end;align-self: flex-end}

#toggle-open {font-size: 30px}

footer {padding: 3.125rem 0; font-size: .75rem; color: rgba(0, 0, 0, 0.7);position: relative;background: #fff;z-index: 2;}

#content {min-height: 70vh; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;border-top: 1px solid #bdbdbd}
.year-content {font-size: 0;border-top: 1px solid #000;border-bottom: 1px solid #000;margin-top: -1px;position: relative}
.poster {font-size: 0;border-bottom: 1px solid #000}

.index header nav ul {display: none}
.index #content {padding-top: 60px;border-top: 0;min-height: inherit}
.index section {border-top: 1px solid #000;border-bottom: 1px solid #000;margin-bottom: -80px;position: relative;background: #fff; line-height: 1; font-size: 140px; font-family: 'Helvetica';z-index: 1;-webkit-transition: all 0.3s;transition: all 0.3s;-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}
.index section .container>a {display: block;padding: 0 15px;height: 220px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;z-index: 1;-webkit-transition: all 0.3s;transition: all 0.3s}
.index section .bg {background-x: url(../images/bg_year.png) no-repeat 50% 50% /cover;opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; position: absolute;left: 0;top: 0;width: 100%;height: 280px}
.index section:hover {-webkit-transform: translate(0, -79px);transform: translate(0, -79px); -webkit-transition: all 0.3s; transition: all 0.3s;}
.index section:hover .bg {opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s}
.index section .mobile-go {display: none}
.index footer {border-top: 1px solid #000}

.sub-content {padding: 8% 0}
.sub-content h3 {font-size: 1.125rem;margin-bottom: 1em;}

.goods-list {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-left: -10px;margin-right: -10px;}
.goods-list li {padding: 0 10px;width: 20%;margin-bottom: 40px;cursor: pointer}
.goods-list li .thumb {overflow: hidden;white-space: nowrap;font-size: 0;border-radius: .5rem}
.goods-list li .thumb:hover span:nth-child(1) {-webkit-transform: translate(-100% , 0);transform: translate(-100% , 0);}
.goods-list li .thumb:hover span:nth-child(2) {-webkit-transform: translate(-100% , 0);transform: translate(-100% , 0);}
.goods-list li .thumb span {width: 100%;opacity: 1; padding-top: 100%;position: relative; display: inline-block;-webkit-transition: all 1.3s ease;transition: all 1.3s ease}
.goods-list li .thumb span:nth-child(2) {width:200%;}
.goods-list li .thumb span img {position: absolute;left: 0;top: 0;width: 100%;-o-object-fit: cover;object-fit: cover; height: 100%;}
.goods-list li .info {padding: 1rem .5rem; font-size: .875rem;}
.goods-list li .info strong {display: block;font-weight: normal}
.goods-list li .info .cate {float: right;margin-left: .5em;}
.goods-list li .info .name {color: #999}
.goods-list.thx li {width: 25%; text-align: center;}
.goods-list.thx li .info .cate {float: none; font-weight: normal;color: #999; line-height: 1; padding-right: 1em;margin-right: .5em;position: relative; display: inline-block;vertical-align: middle;}
.goods-list.thx li .info .cate:after {content: "";position: absolute;right: 0;top: 50%;margin-top: -6px;width: 1px;background: #ddd;height: 12px;}
.goods-list.thx li .info strong {display: inline-block;  vertical-align: middle;font-weight: 500;font-size: 1rem;}
.goods-list.thx li .thumb span {width: 100%;}
.goods-list.thx li .thumb:hover span {-webkit-transform: scale(1.1);transform: scale(1.1);}

.display .contact {margin-top: 5%;margin-bottom: 8%; font-size: .875rem;}
.display .contact dl {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-top: 3rem;}
.display .contact dt {width: 18%; font-weight: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: start; align-self: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.display .contact dt img {-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;margin-right: 1em}
.display .contact dd {color: #999;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;width: calc(100% - 18%);margin-bottom: 2em;min-height: 2.5em}


@media all and (min-width: 992px) {
    html {font-size: 16px;}
    .sub-top {display: none}
    #toggle-open {display: none}
    #mgnb {display: none}
}

@media all and (max-width: 991px) {
    .container {padding: 0 15px}
    #wrap {padding-top: 55px;}
    #content {min-height: 75vh}
    header {position: fixed;left: 0;top: 0;width: 100%;border-bottom: 1px solid #bdbdbd;background: #fff}
    header nav ul {display: none}
    header .container {height: 55px}
    header h1 {width: auto}
    header h1 img {max-height: 45px}
    header .search img {max-height: 21px}

    #mgnb {display: block;position: fixed;left: -100vw;top: 0; width: 100vw;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; height: 100%;z-index: 1001;}
    #mgnb.active {left: 0;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
    #mgnb.active #overlay {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7)}
    #mgnb.active .btn {opacity: 1;overflow: visible;visibility: visible;-webkit-transition:all 0.3s;transition:all 0.3s}
    #mgnb .btn {position: absolute;left: 80%;width: 50px;height: 55px; z-index: 1;opacity: 0;padding: 0;color: #fff;font-size: 30px;overflow: hidden;visibility: hidden;-webkit-transition: all 0.3s;transition: all 0.3s}
    #mgnb nav {position: relative;padding-top: 50px;background: #fff; width: 80%; height: 100%;overflow-y: auto;z-index: 2}
    #mgnb nav>ul {border-top: 1px solid #000;}
    #mgnb nav>ul>li {font-size: 1.125rem;}
    #mgnb nav>ul>li>a {padding: 1rem;display: block;font-weight: 500;position: relative;border-bottom: 1px solid #000;}
    #mgnb nav ul ul {font-size: 1rem; padding: 1em 1.5em;border-bottom: 1px solid #000;display: none}
    #mgnb nav ul ul a {line-height: 1.6;display: block;}
    #mgnb nav .active ul {display: block}
    #mgnb nav .has-sub>a {/* pointer-events: none */}
    #mgnb nav .has-sub>a:after {content: "\f110";font-family: 'Lineawesome';font-weight: bold;position: absolute;right: 1rem; top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);opacity: .7;}
    #mgnb nav .active.has-sub>a:after {content: "\f113"}


    .search {width: 85%}
    .search .form-control {max-height: 24px;}
    .index header {border-bottom: 0}
    .index #content {padding-top: 20vh;}
    .index section {font-size: 4rem;margin-bottom: -28px; overflow: hidden}
    .index section .container>a {pointer-events: none;height: 80px}
    .index section .mobile-go {}
    .index section .bg {height: 80px;background-size: 150%;;background-position: 50% 50%}
    .index section:hover {-webkit-transform: none;transform: none}
    .index section:hover .bg {opacity: 0}
    .index section.active .bg {opacity: 1}
    .index section.active {-webkit-transform: translate(0, -27px);transform: translate(0, -27px)}
    .index section.active .mobile-go {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: absolute;left: 0;top: 0;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;;width: 80px;;height: 80px;background: #fff;z-index: 2;border-right: 1px solid #000;font-size: 1.5rem;font-weight: normal;}
    .index section.active .mobile-go i {border-radius: 50%;border: 1px solid #000;width: 40px;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-transform: rotate(-45deg);transform: rotate(-45deg)}
    .index section.active .container>a {padding-left: 80px;}
    .sub-top {border-bottom: 1px solid #bdbdbd;background: #f7f7f7}
    .sub-top .container {display: -webkit-box;display: -ms-flexbox;display: flex;height: 40px;-webkit-box-align: center;-ms-flex-align: center;align-items: center}
    .sub-top .go-back {width: 20%; font-size: 1.5rem}
    .sub-top h1 {text-align: center;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;margin-right: 20%;font-size: 1.125rem}
    .sub-content {padding: 15px 0;}

    .goods-list li .info .cate {float: none;margin: 0}
    .display .contact .map {margin-bottom: 5%}
    .display .contact .map iframe {height: 30vh}
}

@media all and (max-width: 575px) {
    html {font-size: 14px;}

    .goods-list {margin-left: -5px;margin-right: -5px;}
    .goods-list li {width: 50% !important;padding: 0 5px; margin-bottom: 10px;}

    .display .contact dl {margin-top: 0;}
    .display .contact dt {width: 30%}
    .display .contact dd {width: calc(100% - 30%);}
    .display .contact dt img {height: 1.5em;margin-right: .5em;}

	.modal-body iframe {max-height:320px}


}