#wrap { z-index: 5; }
#wrap .workframe{width:min(90%, 1300px)}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {font-weight: 400;font-size: 26px;line-height: 1.5;margin-bottom: 30px;}
section .emtitle_box {padding-bottom: 1vw;font-style: normal;font-size: 35px;text-transform: uppercase;font-family: "Cormorant", serif;display: inline-flex;flex-direction: column;gap: 8px;letter-spacing: 3px;color: var(--triadic2);}
section .emtitle_box:before{content:'◆';font-size: 15px;display: inline-block;line-height: 1;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* service_area */
#service_area{background-image: url(/images/44/Bg.jpg);background-repeat: repeat;background-position: 50% 50%;background-size: contain;padding-bottom: 0;}
#service_area:before{content:'';width: 60%;height: 641px;position: absolute;bottom: 0;left: 0;background: var(--primary);}
#service_area .workframe{display:grid;justify-content: space-between;grid-template-columns: 70% 25%;align-items: end;}
#product_tabs{display:grid;grid-template-columns: 35% 60%;justify-content:space-between;align-items: start;}
#product_tabs .tabs{display:flex;flex-direction:column;align-items:flex-start;margin-top: 5vw;position: relative;z-index: 2;}
#product_tabs .tabs li{width:100%;padding: 15px 90px 15px 20px;}
#product_tabs .tabs li.active{background: var(--secondary);}
#product_tabs .tabs li.active *{color:white}
#product_tabs .tabs li a{display:grid;grid-template-columns:45px 1fr 20px;color: var(--info);font-size:17px;letter-spacing:2px;font-weight:500;align-items:center;justify-content:space-between}
#product_tabs .tabs li b{font-family:"Lato",serif;color: var(--info);font-size:17px;position:relative;display:flex;align-items:center}
#product_tabs .tabs li b:after{content:'';position:absolute;width:1px;height:15px;background: #c5b8b2;right:13px}
#product_tabs .tabs li svg{fill:#898989;width:13px;height:13px;transform:rotate(45deg)}
#product_tabs .tabs li:hover svg{transform:rotate(0deg)}
#tabs_container{background:white;position: relative;z-index: 1;box-shadow: 15px 15px 30px rgb(0 0 0 / 10%);}
#tabs_container img{aspect-ratio:4/3;object-fit: cover;}
#tabs_container .infoo{padding: 35px 50px;}
#tabs_container .infoo article{height: 81px;-webkit-line-clamp: 3;margin-bottom: 20px;}

/* product_list */
#product_list{margin-bottom: 2vw;}
#product_list li{display: grid;grid-template-columns: 80px 1fr;gap: 30px;align-items: center;margin: 30px 0;}
#product_list li .clip{border: 1px solid #ddd;}
#product_list li .clip img {aspect-ratio: 7.8 / 11.5;}
#product_list li .info_box >div {height: auto;-webkit-line-clamp: 3;}
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p {font-weight: 400;color: var(--info);}

/* conn_box */
#conn_box{background-image: url(/images/44/Bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#conn_box .info{width: min(85%, var(--width-lg));margin: 0 auto;display: grid;grid-template-columns: 1fr 25%;justify-content: space-between;align-items: center;}
#conn_box .info .h3tit{font-size: 22px;font-weight: 400;line-height: 160%;}
#conn_box .info .ab_intro{}
#conn_box .info p a{font-size: 16px;text-align: justify;line-height: 200%;background-color: var(--secondary);color: #fff;display: flex;justify-content: center;align-items: center;padding: 10px;margin-bottom: 10px;}

/* about_area */
#about_area {position: relative;background-image: url(/images/44/aboutBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_area:after{content:'';position: absolute;width: 100%;height: 100%;background: var(--secondary);z-index: 0;bottom: 0;opacity: .9;}
#about_area *{color:var(--white)}
#about_area .emtitle_box{color: var(--triadic2);}
#about_area .more_btn{background: var(--triadic2);}
#about_area .workframe {display: grid;grid-template-columns: 40% 55%;z-index: 2;align-items: end;justify-content: space-between;}
#about_area article p {margin-bottom: 30px;line-height: 210%;text-align: justify;font-weight: 300;letter-spacing: .5px;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_area .about_sub_1 {top: -2vw;left: 24vw;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#about_area .about_sub_1 .clip { -webkit-clip-path: url(#clip_about_sub_1); clip-path: url(#clip_about_sub_1); }
#about_area .about_sub_2 {left: 30vw;z-index: 2;bottom: 0;}
#about_area .about_sub_2 .clip { -webkit-clip-path: url(#clip_about_sub_2); clip-path: url(#clip_about_sub_2); }
#about_area .about_sub_3 {top: 80px;right: 0;z-index: -1;animation-name: drinkbox;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 4s;}
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
@keyframes drinkbox{0%{top:70px}100%{top:140px}}
#about_area #fakeNumber *{color: var(--triadic2);}
#about_area #fakeNumber ul{display:grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
#about_area #fakeNumber li{display: flex;align-items: center;justify-content: center;aspect-ratio: 1/1;padding: 20px;background: var(--white);border-radius: 500px;}
#about_area #fakeNumber li .eva{display:flex;flex-direction: column;align-items: center;}
#about_area #fakeNumber li article{color: #2b2a2a;display: flex;flex-direction: column;align-items: center;font-size: 17px;font-weight: 400;}
#about_area #fakeNumber li article b{font-size: max(4*(1vw + 1vh) / 2, 40px);font-weight: 600;line-height: 1;display: block;margin: 10px 0;font-family: "Lato", sans-serif;}
#about_area #fakeNumber li p{font-size:17px;color: var(--info);}

/* faq_list */
#faq_list {margin: 50px 0;width: 60%;}
#faq_list li {border-bottom: 1px rgb(255 255 255 / 30%) solid;position: relative;}
#faq_list li:after{content:'';position:absolute;height: 2px;bottom: 0;left: 0;width: 30px;background: white;}
#faq_list li:hover:after{width:100%;}
#faq_list li .title {padding: 20px 0;}
#faq_list li .title font { vertical-align: top; }
#faq_list li .title .txt {width: calc(100% - 50px);font-size: 15px;margin-right: 10px;}
#faq_list li .title .icon { width: 40px; height: 34px; }
#faq_list li .title .icon:before, #faq_list li .title .icon:after {position: absolute;margin: auto;width: 10px;height: 1px;background: var(--white);display: block;top: calc((100% - 2px) / 2);left: calc((100% - 14px) / 2);content: "";}
#faq_list li .title .icon:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
#faq_list li .info {padding: 0 0 20px;font-size: 16px;font-weight: 200;}
#faq_list li.current .title .icon:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); }


/* news_area */
#news_area .itemTitleBox { position: relative; padding-top: 0px; display: inline-block; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; width: 100%; }
#news_area section { padding: 2vmax 0 2vmax; position: relative; }
#news_area .deck01 { position: absolute; bottom: 210px; left: 100px; z-index: -1; }
#news_area img.dight { position: absolute; left: 150px; z-index: 11; min-width: 100%; margin-top: 0; object-fit: cover; display: none; }
#news_area {overflow: initial;position: relative;background-image: url(/images/44/Bg.jpg);background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}
#news_area:before { content: ""; position: absolute; left: 0; right: 0; top: 40px; width: 100px; height: 100px; margin: auto; background-image: url(/images/39/menu_logo.png); background-repeat: no-repeat; background-position: center top; background-size: contain; display: none; }
#news_area #news_txt { top: 2vmax; right: 5vmax; }
#news_area .news_box { margin: 0 auto 0; position: relative; display: flex; z-index: 1; flex-wrap: wrap; justify-content: space-between; }
#news_area .news_box .leftBox, #news_area .news_box .rightBox {position: relative;width: 65%;}
#news_area .news_box .leftBox { width: 25%; display: flex; flex-direction: column; justify-content: space-between; }
#news_area .news_box .leftBox .topnote {margin-top:3vw}
#news_area .NbtnBox { display: flex; align-items: center; justify-content: space-between; margin-top: 110px; }
#news_area .arrow {display: flex;gap: 10px;}
#news_area .arrow a {width: 60px;aspect-ratio: 1/1;display: flex !important;justify-content: center;align-items: center;background: white;border-radius: 50px;}
#news_area .arrow a svg{width: 13px;height: 13px;fill: var(--info);}
#news_area .arrow a.next svg{transform:scaleY(-1);}
#news_area .tabs_box { margin-top: 0px; }
#news_area .tabs_box .tabs_btn .newsList {display: flex;flex-direction: row;align-items: flex-start;position: relative;padding-bottom: 20px;justify-content: flex-start;border-bottom: 1px solid #ded6d6;margin: 0 0 20px 0;}
#news_area .tabs_box .tabs_body { width: calc(100% - 0px); }
#news_area .tabs_box .tabs_body .news_list { display: flex; flex-wrap: wrap; }
#news_area .tabs_btn a {padding: 0px 20px 0px 0px;font-size: 17px;letter-spacing: 1px;color: #383838;font-weight: 500;display: block;}
#news_area .tabs_btn .active a {color: #797979;}
#news_area .tabs_body .tab_info { width: 100%; top: 0; left: 0; opacity: 0; pointer-events: none; }
#news_area .tabs_body .tab_info.showBox { opacity: 1; pointer-events: auto; }
#news_area .tabs_body .tab_info li { width: calc((100% / 1) - 0px); position: relative; }
#news_area .tabs_body .tab_info li:before {content: "";height: 60px;position: absolute;bottom: 20px;right: 100px;border-right: 1px solid #ded6d6;}
#news_area .tabs_body .tab_info .items {border-bottom: 1px solid #ded6d6;padding: 35px 0 20px;}
#news_area .tabs_body .tab_info .items .Img { padding-bottom: 20px; }
#news_area .tabs_body .tab_info .category {padding: 8px 15px;background: #4e4e4f;color: var(--white);line-height: 1;font-size: 15px;font-weight: 300;display: inline-block;}
#news_area .f_aitems_end {align-items: center;margin: 10px 0px 0;justify-content: space-between;display: grid;grid-template-columns: 1fr 60px;gap: 40px;}
#news_area .f_aitems_right {position: relative;}
#news_area .tabs_body .tab_info .time {font-size: 14px;display: flex;flex-direction: row;align-items: center;gap: 10px;}
#news_area .tabs_body .tab_info .time font.m_txt {color: #313233;font-weight: 500;line-height: 1;font-size: 15px;font-family: "Lato", sans-serif;}
#news_area .tabs_body .tab_info .time font.d_txt { width: 20px; grid-area: time_d; color: var(--dark); }
#news_area .tabs_body .tab_info h3 {height: auto;font-weight: 500;font-size: 20px;line-height: 150%;-webkit-line-clamp: 2;}
#news_area .tabs_body .tab_info article { height: 50px; font-weight: 300; font-size: 14px; color: #818181; -webkit-line-clamp: 2; margin: 6.5px 0; }
#news_area .btn {padding: 0px 0px;width: 60px;aspect-ratio: 1/1;margin: 0;display: flex;justify-content: center;background: var(--triadic2);align-items: center;border-radius: 0;}
#news_area li:hover .btn{background:var(--info)}
#news_area .tabs_box .tabs_btn .moreBtn a { font-weight: 400; color: #fff; font-size: 14px; line-height: 50px; padding: 0 20px; }
#news_area::after {content: "";width: 36%;height: 310px;position: absolute;bottom: -80px;left: 0;background: var(--primary);display: block;}
#news_area .btn svg {margin: 0;width: 22px;height: 22px;fill: white;}


/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area .workframe{text-align:center;width: min(90%, 1440px);}
#photo_area .item {margin: 30px 20px;box-shadow: 10px 10px 20px rgb(0 0 0 / 10%);padding: 20px 40px;border-radius: 20px;}
#photo_area .item img {object-fit: contain;aspect-ratio: 2/1;width: 100%;}

@media screen and (max-width: 1460px) {
    #service_area:before{height: 633px;}
    #news_area::after{width: 31%;}
}
@media screen and (max-width: 1400px) {
    #service_area:before{height: 613px;}
}
@media screen and (min-width: 1025px) {
    #about_area{background-attachment: fixed;}
}
@media screen and (max-width: 1280px) {
    #news_area .NbtnBox{display: flex;flex-direction: column-reverse;align-items: flex-start;gap: 20px;}
    #service_area:before{height: 588px;}
}
@media screen and (max-width: 1024px) {
    #fakeNumber{margin-top:70px;}
    #service_area:before{width:100%;height: 45%;}
    #tabs_container img{aspect-ratio:2/1}
    #service_area .workframe{grid-template-columns:1fr;gap: 30px;}
    #product_list ul{display:grid;grid-template-columns: repeat(2, 1fr);}
    #about_area .workframe, #news_area .news_box{display:block;}
    #news_area::after{display:none;}
    #news_area .news_box .leftBox, #news_area .news_box .rightBox{width:100%}
    #news_area .NbtnBox{margin: 10px 0 60px;display: flex;flex-direction: row;}
}
@media screen and (max-width: 980px) {
    #conn_box .info{grid-template-columns:1fr;gap: 20px;}
    #conn_box .info .h3tit{text-align:center;}
}
@media screen and (max-width: 760px) {
    section .clip img{height:auto;}
    #service_area{padding-bottom: 5px;}
    #product_tabs .tabs{width:100%;}
	section { padding: 14vw 0 ; }
    #service_area .workframe{display:block;}
    #product_tabs{display:flex;flex-direction: column;gap: 20px;}
    #tabs_container .infoo{padding:20px 30px;}
    #product_tabs .tabs li{padding: 10px 15px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
    #product_tabs .tabs li a, #product_tabs .tabs li b{font-size: 16px;letter-spacing: 0;}
    #product_list ul{grid-template-columns:1fr}
    #service_area:before{display:none;}
    #product_area{margin-top: 50px;}
    #product_list li{margin: 15px 0;}
    #conn_box .info .h3tit{font-size:18px;}
    #conn_box{padding-top:20px;}
    #faq_list{width:80%;}
    #about_area #fakeNumber li{padding:5px;border-radius: 20px;}
    #about_area #fakeNumber ul{grid-template-columns: repeat(2, 1fr);gap: 20px;}
    #fakeNumber{margin-top: 40px;}
    #about_area #fakeNumber li article{font-size:15px;}
    #news_area .tabs_btn a{padding-right: 10px;letter-spacing: .5px;font-size: 16px;}
}
@media screen and (max-width: 550px) {
}