/* sub_top */
.sub_top { position: relative; height: 300px; overflow: hidden; }
.sub_top .bg { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.05); transform-origin: center; }
.sub_top .bg { animation: subtopbg forwards linear 3s; }
@keyframes subtopbg {
    0% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.sub_top.top_shop .bg { background: url(/image/sub/subtop_list.jpg) no-repeat center/cover; }
.sub_top.top_shop2 .bg { background: url(/image/sub/subtop_guide.jpg) no-repeat center/cover; }
.sub_top.top_guide .bg { background: url(/image/sub/subtop_guide2.jpg) no-repeat center/cover; }
.sub_top .contwrap { height: 100%; }
.sub_top .textbox { z-index: 3; position: absolute; top: 0; width: 250px; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
.sub_top .textbox .text1 { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; text-align: center; font-weight: 500; font-size: 50px; color: #fff; }
.sub_top .textbox .text2 { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(100% - 60px); padding: 20px 0; text-align: right; font-size: 18px; color: #fff; border-top: 1px solid rgba(190, 193, 198, 0.3); }
@media (max-width: 1535px) {
    .sub_top { height: 270px; }
    .sub_top .textbox { width: 230px; }
}
@media (max-width: 1279px) {
    .sub_top { height: 250px; }
    .sub_top .textbox { width: 210px; }
}
@media (max-width: 1023px) {
    .sub_top { height: 220px; }
    .sub_top .textbox { width: 190px; }
}
@media (max-width: 767px) {
    .sub_top { height: 190px; }
    .sub_top .textbox { width: 170px; }
}


/* sub_common */
.sub_sect { position: relative; padding: 30px 0; overflow: hidden; }
.sub_sect2 { position: relative; padding: 60px 0; overflow: hidden; }
.sub_sect3 { position: relative; padding: 30px 0 60px; overflow: hidden; }
.sub_sect .sub_tit { padding-bottom: 40px; font-size: 20px; color: #9d9d9d; } 
.sub_sect .sub_tit b { font-weight: normal; color: #000; }
.sub_sect .sub_tit2 { padding-bottom: 40px; text-align: center; font-size: 20px; color: #000; } 

/* sub_about */
.sub_about { position: relative; padding-bottom: 0 !important; }
.sub_about .sub_tit { padding-bottom: 0 !important; }
.sub_about .contents { position: relative; margin-top: 70px; background-color: #ebfce8; }
.sub_about .contents ul { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.sub_about .contents .textbox .text1 { font-weight: 600; font-size: 30px; color: #000; line-height: 1.35; }
.sub_about .contents .textbox .text1 br { display: none; }
.sub_about .contents .textbox .text2 { margin-top: 30px; font-size: 20px; color: #666; line-height: 1.65; }
@media (max-width: 1279px) {
    .sub_about .contents .textbox .text2 .br1 { display: none; }
}
@media (max-width: 1023px) {
    .sub_about .contents { background-image: url(/image/sub/about_img1.png); background-repeat: no-repeat; background-position: bottom center; background-size: contain; }
    .sub_about .contents .frame { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
    .sub_about .contents ul { padding: 40px 0; display: block; }
    .sub_about .contents ul li { text-align: center; width: 100%; }
    .sub_about .contents ul li:last-of-type { display: none; }
    .sub_about .contents .textbox { z-index: 5; position: relative; }
    .sub_about .contents .textbox .text1, .sub_about .contents .textbox .text2 { color: #fff; }
    .sub_about .contents .textbox .text1 br { display: inline-block; }
}

/* sub_guide */
.sub_guide { padding-bottom: 0 !important; }
.sub_guide .contents { position: relative; padding-top: 50px; background-color: #f4f4f4; }
.sub_guide .contents .cont { position: relative; padding: 50px; text-align: center; border: 1px solid #936563; background-color: #fff; }
.sub_guide .contents .cont.ver2 { margin-top: 60px; }
.sub_guide .contents .cont ul { display: flex; flex-wrap: nowrap; justify-content: right; }
.sub_guide .contents .cont ul li { width: 33.3333%; text-align: center; }
.sub_guide .contents .cont ul li img { width: 295px; }
.sub_guide .contents .cont ul li video { max-width: 100%; height: 100%; }
.sub_guide .contents .cont .textbox { z-index: 2; position: absolute; top: 0; left: 0; background-color: #936563; width: 310px; height: 220px; text-align: left; }
.sub_guide .contents .cont .textbox .texts { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-block; }
.sub_guide .contents .cont .textbox .texts .text1 { font-size: 50px; color: #fff; white-space: nowrap; }
.sub_guide .contents .cont .textbox .texts .text2 { margin-top: 5px; font-weight: 700; font-size: 50px; color: #fff; white-space: nowrap; }

.sub_guide .contents .cont .motext { display: none; padding: 10px; text-align: center; font-weight: normal; font-size: 20px; color: #fff; background-color: #936563; }
.sub_guide .contents .cont .motext b { font-weight: 500; }

.sub_guide .imgWrap { margin-top: 40px; text-align: center; }
.sub_guide .descbox { margin-top: 50px; font-size: 19px; color: #6d6d6d; line-height: 1.3; }
.sub_guide .descbox dl { display: flex; flex-wrap: nowrap; font-size: inherit; color: inherit; line-height: inherit; }
.sub_guide .descbox dl:nth-of-type(n + 2) { margin-top: 15px; }
.sub_guide .descbox dl dt, .sub_guide .descbox dl dd { font-size: inherit; color: inherit; line-height: inherit; }
.sub_guide .descbox dl dt { min-width: max-content; margin-right: 13px; font-weight: 700; color: #000; }
.sub_guide .descbox dl dd span { color: #ff5400; }

.sub_guide .contents1 { margin-top: 80px; background-color: #3f3f3f; }
.sub_guide .contents1 ul { display: flex; flex-wrap: nowrap; align-items: center; }
.sub_guide .contents1 ul .left { min-width: max-content; margin-right: 50px; }
.sub_guide .contents1 ul .left img { display: block; width: 300px; }
.sub_guide .contents1 ul .scrbox { font-size: 20px; color: #fff; line-height: 1.75; }
.sub_guide .contents1 ul .scrbox dl { display: flex; flex-wrap: nowrap; font-size: inherit; color: inherit; line-height: inherit; }
.sub_guide .contents1 ul .scrbox dl dt, .sub_guide .contents1 ul .scrbox dl dd { font-size: inherit; color: inherit; line-height: inherit; }

.sub_guide .contents2 { padding: 70px 0; background-color: #1a1a1a; }
.sub_guide .contents2 ul { display: flex; flex-wrap: nowrap; }
.sub_guide .contents2 ul li:first-of-type { min-width: max-content; margin-right: 100px; }
.sub_guide .contents2 ul li:first-of-type p { font-weight: 700; font-size: 50px; color: #fff; }
.sub_guide .contents2 ul li dl { display: flex; flex-wrap: nowrap; }
.sub_guide .contents2 ul li dl:nth-of-type(n + 2) { margin-top: 25px; }
.sub_guide .contents2 ul li dl dt { min-width: max-content;margin-right: 12px; font-weight: 700; font-size: 20px; color: #fff; line-height: 1.4; }
.sub_guide .contents2 ul li dl dd { font-size: 20px; color: #b7b7b7; line-height: 1.4; }

@media (max-width: 1535px) {
    .sub_guide .contents .cont ul li img { width: calc(200px + 6vw); }
    
    .sub_guide .contents .cont .textbox { width: 270px; height: 170px; }

    .sub_guide .contents1 ul .left { margin-right: calc(30px + 1.3vw); }
    .sub_guide .contents1 ul .left img { width: calc(150px + 9.5vw); }

    .sub_guide .contents2 ul li:first-of-type { margin-right: calc(50px + 3vw); }
    .sub_guide .contents2 ul li dl:nth-of-type(n + 2) { margin-top: 20px; }
}
@media (max-width: 1279px) {
    .sub_guide .contents .cont ul li img { width: calc(180px + 5vw); }

    .sub_guide .contents .cont .textbox { width: 240px; height: 140px; }
}
@media (max-width: 1023px) {
    .sub_guide .contents .cont .textbox { width: 220px; height: 120px; }
    .sub_guide .descbox dl:nth-of-type(n + 2) { margin-top: 10px; }

    .sub_guide .contents1 ul .scrbox dd br { display: none; }

    .sub_guide .contents2 ul li dl dd br { display: none; }
}
@media (max-width: 767px) {
    .sub_guide .contents .cont .textbox { display: none; }
    .sub_guide .contents .cont .motext { display: block; }
    .sub_guide .contents .cont ul { display: block; margin-top: 15px; }
    .sub_guide .contents .cont ul li { width: 100%; }
    .sub_guide .contents .cont ul li img { width: 100%; max-width: 200px; }

    .sub_guide .contents1 ul { display: block; padding: 20px 0; }
    .sub_guide .contents1 ul .left { width: 100%; min-width: inherit; margin-right: 0; text-align: center; }
    .sub_guide .contents1 ul .left img { display: inline-block; width: 100%; max-width: 250px; }
    .sub_guide .contents1 ul .scrbox { margin-top: 15px; }
    /* .sub_guide .contents1 ul .scrbox dl { justify-content: center; } */

    .sub_guide .contents2 ul { display: block; }
    .sub_guide .contents2 ul li:first-of-type { min-width: initial; margin-right: 0; margin-bottom: 20px; }
    .sub_guide .contents2 ul li dl:nth-of-type(n + 2) { margin-top: 15px; }
}


/* sub_info */
.sub_info .tabs { margin-bottom: 35px; display: flex; flex-wrap: nowrap; border-top: 1px solid #dadada; border-left: 1px solid #dadada; }
.sub_info .tabs > li { padding: 15px 5px; text-align: center; font-size: 18px; color: #000; width: 14.2857%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; background-color: #fafafa; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.sub_info .tabs > li.active { color: #fff; background-color: #000; }
.sub_info .cont { position: relative; display: none; }
.sub_info .cont.active { display: block; }
.sub_info .cont strong { margin-bottom: 30px; display: block; font-weight: 700; font-size: 25px; color: #000; }
.sub_info .cont .textbox { font-size: 18px; color: #797979; line-height: 1.65; }
.sub_info .cont .textbox * { font-size: inherit; color: inherit; line-height: inherit; }
.sub_info .cont .textbox dl { display: flex; flex-wrap: nowrap; }
.sub_info .cont .textbox dl dt { min-width: max-content; }
/* .sub_info .tabs > li > span { } */
@media (max-width: 1535px) {
    .sub_info .tabs > li { padding: 14px 5px; }
}
@media (max-width: 1279px) {
    .sub_info .tabs > li { padding: 13px 5px; }
}
@media (max-width: 1023px) {
    .sub_info .tabs > li { padding: 12px 5px; }
}
@media (max-width: 767px) {
    .sub_info .tabs { flex-wrap: wrap; }
    .sub_info .tabs > li { padding: 11px; width: 25%; }
}
@media (max-width: 460px) {
    .sub_info .tabs > li { width: 33.3333%; }
}
@media (max-width: 380px) {
    .sub_info .tabs > li { width: 50%; }
}