#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0 2vw; }
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 38px;font-weight: 600;font-family: "Chiron GoRound TC", sans-serif;letter-spacing: .4rem;}
section .entitle_box {font-size: 14px;color: #afb0b3;letter-spacing: 4.5px;}
section .area_title{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;margin-bottom:74px}
section .area_title h2 {line-height: 1;letter-spacing: .4rem;font-weight: 600;font-size: 40px;font-family: "Chiron GoRound TC", sans-serif;color: var(--primary);}
section .area_title h3 {letter-spacing: 0.6rem;position: relative;margin-top: 5.25rem;font-weight: 600;font-family: "Chiron GoRound TC", sans-serif;font-size: 40px;}
section .area_title h3:after{content:"";width:1px;height:50px;margin-right:16px;display:inline-block;vertical-align:middle;background-color:#bbbbbb;margin-top:10px}
section .area_title p{letter-spacing:.2rem;font-weight:300;font-size:18px}
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%); }

/* topicArea */
#topicArea { position: relative; }
#topicArea .bg{background-size: cover;width:100%;height: 740px;top: 0;left: 0;z-index: -2;filter: saturate(50%);background-position: 50% 10%;background-repeat: no-repeat;opacity: .35;}
#topicArea::before {position: absolute;top: 0;left: 0;z-index: -1;content: "";width: 100%;height: 740px;display: block;background: linear-gradient(0deg, rgb(217 214 207 / 80%) 0%, #fefefe 100%);pointer-events: none;}
#topicArea::after {position: absolute;top: 0;right: 0;z-index: -1;content: "";width: calc(100% - 120px);height: 560px;display: block;background: #fff;pointer-events: none;}
#topicAreaBox {w;width: 90%;margin: 0 70px 0 auto;}
#rightinfo,#leftinfo {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
#leftinfo {align-items: flex-start;margin-top: 60px;margin-left: 8%;}
#topicArea .area_title { flex-direction: column; align-items: flex-start; }
#topicAreaBox .area_title .other_txt, #news_area .area_title .text_en {margin-top: 90px;font-size: 14px;color: #afb0b3;letter-spacing: 4.5px;text-transform: uppercase;}
#rightinfo .itemTitleBox {display: flex;justify-content: center;position: relative;width: 20%;margin-top: -10%;}
#rightinfo .itemTitleBox::before { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: calc(100% + 20px); background-color: #e8e8e8; }
#mainImgList { width: 75%; }
#mainImgList {display: grid;align-items: start;justify-content: space-between;grid-template-columns: 35% 60%;}
#mainImgList img {aspect-ratio: 4.5/3;object-fit: cover;width: 100%;}
#mainImgList .info_box {margin-top: 8%;order: -1;}
#mainImgList .info_box h3 { font-size: 24px; padding: 0 0 20px 0; margin-bottom: 20px; border-bottom: 1px solid rgb(196 196 196/50%); letter-spacing: 1.5px; font-weight: 400; }
#mainImgList .info_box .text p {width: 100%;margin-bottom: 20px;letter-spacing: 0.5px;line-height: 2;font-size: 16px;text-align: justify;font-weight: 400;}
#mainImgList .info_box .text .tit { width: 100%; font-size: 15px; line-height: 180%; color: #4e4e4e; }
/* 縮圖區 */
#thumbImgList { width: 55%; }
#thumbImgList .topicitem2 { position: relative; margin: 0 15px 20px 0; cursor: pointer; }
#thumbImgList .img_nav img {width: 280px;aspect-ratio: 4/3;object-fit: cover;position: relative;}
#thumbImgList .slick-current .topicitem2::before { opacity: 0; }
#topicAreaBox .topicitem a,#thumbImgList .topicitem2 a { z-index: 10; }
#leftinfo .infoBox { width: 34%; margin: 0; }
#leftinfo .infoBox em,#product_area .infoBox em {color: var(--primary);font-size: 60px;letter-spacing: 0.5px;}
#leftinfo .infoBox em.txt1,#product_area .infoBox em.txt1 {font-weight: 800;margin-right: 10px;}
#leftinfo .infoBox h1 {margin-top: 70px;line-height: 190%;letter-spacing: 1.5px;font-size: 16px;font-weight: 400;word-spacing: 100vw;}
#topicAreaBox .infoBoxbottom p {width: min(100%, 520px);margin: 60px auto 0;letter-spacing: 1.5px;text-align: center;line-height: 190%;}


/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area {padding-bottom: 0;padding-top: 3vw;filter: contrast(80%) saturate(90%);}
#about_area .info{display:flex;align-items: center;justify-content: center;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));}
#about_area .info >div .txt >* {padding: 10px 15px;font-size: 18px;text-align: center;}
#about_area .info >div .txt{text-align:center;}
#about_area .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 35px;margin-top: 20px;}
#about_area .info >div .txt .entit{display: flex;align-items: center;gap: 40px;justify-content: center;letter-spacing: 2px;font-size: 14px;}
#about_area .info >div .txt .entit:before, #about_area .info >div .txt .entit:after{content:'';display: block;width: 300px;height: 1px;background: white;opacity: .5;}
#about_area .info >div .txt img{height: 80px;padding: 0;margin: 5% auto 0;}

/* custom_area */
#custom_area{padding-top:0}
#custom_area ul li{margin: 20px 30px;box-shadow: 0 0 30px rgb(217 214 207 / 50%);border-radius: 30px;overflow: hidden;}
#custom_area ul li:hover{transform: translateY(-15px);}
#custom_area ul li .clip {aspect-ratio: 4/3;position: relative;}
#custom_area ul li .clip .icon{position:absolute;display: flex;align-items: center;justify-content: center;width: 60px;aspect-ratio: 1/1;background: white;border-radius: 50%;bottom: -30px;left: 40px;}
#custom_area ul li .clip svg{width: 24px;height: 24px;fill: var(--secondary);}
#custom_area ul li .h3 {margin: 30px 50px 5px;font-size: 22px;}
#custom_area ul li article {font-weight: 300;font-size: 16px;overflow: hidden;margin: 10px 50px 40px;height: 54px;text-align: justify;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#custom_area ul li span{margin: 0 50px;color: var(--primary);font-size: 15px;display: block;padding-bottom: 30px;}
#custom_area ul li:hover span{transform: translateX(15px);}

/* news_area */
#news_area{padding:5vw 0 5vw 0}
section  .itemTitleBox{position:relative;padding-top:0px;display:inline-block;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#news_area .itemTitleBox{width:200px;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;display:flex;flex-direction:column;padding-top:40px}
#news_area .area_title{margin-bottom:0;display: flex;flex-direction: column;}
#news_area .area_title h3{margin-top:0;font-size: 35px;}
#news_area .area_title .text_en {margin-top:0}
#news_area .infoBox p{line-height:190%;letter-spacing:5.5px;margin-right:10px;font-size:21px;}
#news_area section{padding:2vmax 0 3vmax;position:relative;display:flex}
#news_area img.dight{position:absolute;left:150px;z-index:11;min-width:100%;margin-top:0;object-fit:cover;display:none}
#news_area{padding:9vmin 0 4vmax;overflow:initial;position:relative;background-image:url(/images/39/img-bg.png);background-size:auto;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}
@-webkit-keyframes iconRotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}
}#news_area #news_txt{top:2vmax;right:5vmax}
#news_area .news_box{position:relative;display:flex;z-index:1;flex-wrap:wrap;justify-content:space-between;width: calc(100% - 230px);margin-right:50px}
#news_area .news_box .leftBox,#news_area .news_box .rightBox{position:relative;-ms-flex-negative:0;flex-shrink:0;width:55%}
#news_area .news_box .leftBox{padding: 0 30px 0 0;width:40%}
section  .title_box,#news_area .tabs_box{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#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;margin-bottom:20px;margin-right:40px;margin-top:10px;padding-right:20px;justify-content:flex-start}
#news_area .tabs_box .tabs_btn li:last-child::after{content:"";position:absolute;left:0px;top:72%;margin-top:-9px;width:1px;height:15px;opacity:0.3;background-color:#383636}
#news_area .tabs_box .tabs_btn li::after{content:"";width:17px;height:15px;display:block;position:absolute;top:50%;right:10px;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%);background:url(/images/39/icon-arrow.png);-webkit-transition:0.6s;transition:0.6s;opacity:0}
#news_area .tabs_box .tabs_body{width:calc(100% - 0px)}
#news_area .tabs_box .tabs_body .news_list{display:flex;flex-wrap:wrap}
section  .title_box h2{background:linear-gradient(to right,var(--info) 100%,var(--info) 65%);-webkit-background-clip:text;background-clip:text}
#news_area .tabs_btn a{padding:0px 20px 0px 0px;font-size:20px;letter-spacing:1px;color:#383838;font-weight:500;display:block}
#news_area .tabs_btn .active a{color:var(--primary)}
#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)}
#news_area .tabs_body .tab_info .items{display:flex;align-items:center;border-bottom:1px solid #ded6d6}
#news_area .tabs_body .tab_info .items .Img{padding-bottom:20px}
#news_area .tabs_body .tab_info .category{padding:0px 10px;background:#e1e1e1;color:var(--info);line-height:1;font-size:18px;line-height:217%;font-weight:500}
#news_area .f_aitems_end{display:flex;align-items:center;margin:10px 0px 0}
#news_area .f_aitems_right{position:relative;width:calc(100% - 0px);padding:14px 0}
#news_area .tabs_body .tab_info .time{font-size:14px;display:flex;flex-direction:row}
#news_area .tabs_body .tab_info .time font.m_txt{color:#19a8de;font-weight:500;font-family:'Tenor Sans';margin-right:10px;line-height:140%;font-size:19px}
#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:22px;line-height:140%;width:calc(100% - 60px);-webkit-line-clamp:1}
#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{position:absolute;right:10px;bottom:30px;width:35px;height:35px;padding:0px 0px;width:35px;height:35px;margin:0;border-radius:50%;display:flex;justify-content:center}
#news_area .tab_info li:hover .btn{scale:1;translate:0 -10px;background-color:#0193de}
#news_area .tab_info li:hover .btn svg{fill:#ffffff}
#news_area .tabs_box .tabs_btn .moreBtn a{font-weight:400;color:#fff;font-size:14px;line-height:50px;padding:0 20px}
#news_area .newsList2 .Img img{width:100%;height:420px;object-fit:cover}
#news_area .moreN2{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%}
#news_area .newsList2 .Img{margin-bottom:20px;position:relative}
#news_area .newsList2 .Img:after{content:"";width:50%;height:40px;background-color:#fff;display:block;position:absolute;bottom:0;right:0;z-index:0}
#news_area .newsList2 .Txt{position:relative;padding:10px 20px;z-index:3;display:flex;align-items:center}
#news_area .newsList2 .Txt .title{margin-bottom:0px;font-size:18px;-webkit-line-clamp:1;height:auto}
#news_area .newsList2 .Txt .text{font-size:15px;margin-top:7px;color:#7f7f7f;-webkit-line-clamp:2;height: 52px;}
#news_area .newsList2 .Txt .top{position:relative;width:80px;padding-right:10px;border-right:1px solid #eaeaea}
#news_area .newsList2 .Txt .top .dateBox{display:flex;-webkit-box-align:end;align-items: center;line-height:1;font-weight:600;color:#fff;flex-direction:column;justify-content:center;position:relative}
#news_area .newsList2 .Txt .top .dateBox .date,#news_area .rightBox .newsList2 .Txt .top .dateBox .date{font-size:54px;line-height:100%;height:60px;}
#news_area .newsList2 .Txt .top .dateBox .year,#news_area .rightBox .newsList2 .Txt .top .dateBox .year{font-size: 17px;font-weight: 300;}
#news_area .newsList2 .Txt .top .classTitle,#news_area .rightBox .newsList2 .Txt .top .classTitle{width:100px;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;font-size:16px;font-weight:700;color:#393939;background-color:#d4d4d4}
#news_area .newsList2 .Txt .introtext{width:calc(100% - 120px);margin-left:30px}
#news_area .leftBox .newsList2 .Txt{border-bottom:1px solid #eaeaea;padding:20px 20px}
#news_area .leftBox .newsList2 .Txt .top .dateBox:after{content:"";width:1px;height:20px;display:inline-block;vertical-align:middle;background-color:#696969;margin-top:10px;position:absolute;right:-11px;top:-10px}

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

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1460px) {
    #topicArea::before, #topicArea .bg{height: 630px;}
	#topicArea::after{width: calc(100% - 70px);height: 490px;}
    #thumbImgList .img_nav img{width: 315px;}
    #mainImgList .info_box{margin:0}
    #mainImgList img{aspect-ratio: 4 / 3;}
    #leftinfo .infoBox em, #product_area .infoBox em{font-size:50px;}
}
@media screen and (max-width: 1400px) {
    #topicArea::before, #topicArea .bg{height: 740px;}
	#topicArea::after{height: 560px;}
    #mainImgList img{aspect-ratio: 1/1;}
}
@media screen and (max-width: 1280px) {
    #topicArea::before, #topicArea .bg{height: 700px;}
    #thumbImgList .img_nav img{width: 275px;}
}
@media screen and (max-width: 1024px) {
    #leftinfo .infoBox h1{text-align:center;margin-top: 30px;}
    #thumbImgList .img_nav img{width: 295px;}
    #leftinfo{width: 100%;margin: 60px auto 0;display: flex;flex-direction: column;}
    #topicAreaBox{margin:0 auto;}
    #mainImgList, #thumbImgList, #leftinfo .infoBox{width:100%}
    #topicArea .area_title{margin-bottom: 30px;}
    section .area_title h3{margin-top:3.25rem}
	section .area_title h2, section .area_title h3, #news_area .area_title h3{font-size:3vmax}
    #topicArea::before, #topicArea .bg, #leftinfo .infoBox em{display:none;}
	#rightinfo{display:flex;flex-direction:column;align-items:center}
	#rightinfo .itemTitleBox::before, #topicArea::before, #news_area .rightBox{display:none}
	#leftinfo #imglist,#rightinfo .itemTitleBox,#imglist,#news_area .news_box .leftBox{width:100%}
    #rightinfo .itemTitleBox{margin:0}
    #news_area .itemTitleBox{height: 50%;}
}
@media screen and (max-width: 980px) {
    #news_area .itemTitleBox{height: 40%;}
    #about_area .parallax_bg {min-height: 550px;}
    #thumbImgList .img_nav img{width: 335px;}
    #mainImgList img{aspect-ratio: 4/3;}
    #mainImgList{display: grid;grid-template-columns: 100%;gap: 25px;}
    #mainImgList .info_box {order: 2;}
	section { padding-top: 10vw; }
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
    #custom_area ul li{margin: 20px;}
}
@media screen and (max-width: 760px) {
	section { padding: 8vw 0 2vw; }
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width: 550px) {
    #about_area .info >div .txt >*{font-size: 13px;}
    #about_area .info >div .txt img{height:35px;}
    #about_area .info >div .txt .h3{font-size:30px;}
    #about_area .info >div .txt .entit{gap:20px;}
    #about_area .info >div .txt .entit:before, #about_area .info >div .txt .entit:after{width:100px;}
    section .title_box{font-size: 30px;}
    #thumbImgList .img_nav img{width: 185px;}
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip { height: 100vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area .news_box{width:calc(100% - 20px);margin-right:0}
	#news_area .itemTitleBox{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:0px;padding-bottom: 0;height: 50%;}
	#news_area section{display:flex;flex-direction:column-reverse;align-items:center}
	#news_area .newsList2 .Txt .title{font-size:16px}
	#news_area .newsList2 .Txt .top{position:relative;width:60px;padding-right:10px}
	#news_area .newsList2 .Txt .introtext{width:calc(100% - 80px);margin-left:20px}
	#news_area .newsList2 .Txt .top .dateBox .date,#news_area .rightBox .newsList2 .Txt .top .dateBox .date{font-size:48px}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}