section{padding: 5vw 0;position: relative;}
section .titBox {text-align:center;font-family: 'Playfair Display';text-transform: uppercase;font-size: 45px;font-weight: 600;margin-bottom: 3vw;}
section .more_btn {padding: 10px 15px 10px 30px;border-radius: 50px;display: inline-flex;gap: 20px;align-items: center;font-size: 15px;background: var(--primary);color: white;letter-spacing: 1px;font-weight: 700;overflow: hidden;position: relative;font-family: "Inter", sans-serif;}
section .more_btn:hover b{background: var(--secondary);}
section .more_btn b{display: inline-flex;width: 35px;aspect-ratio: 1/1;background: var(--white);border-radius: 50%;align-items: center;justify-content: center;}
section .more_btn svg{width: 13px;height: 13px;fill: var(--primary);}
section .more_btn:hover svg{fill:white;}
section .more_btn:after{content:'';position: absolute;right: 0;width: 0;height: 100%;border-radius: 80px;background: var(--secondary);transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;z-index: -1;}
section .more_btn:hover:after{width:100%;height:100%}

.wraprow { position: relative; padding: 5vw 0; }
.wraprow .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; opacity: .3; top: 0; left: 0; z-index: 1; }
.wraprow .titBox { padding: 20px 0; color: #181627; }
.wraprow .titBox:before { position: relative; margin-right: 10px; width: 80px; border-bottom: 1px solid; display: inline-block; vertical-align: baseline; top: -9px; content: ""; }
.wraprow .titBox font { font-weight: 500; font-size: 35px; vertical-align: baseline; }
.wraprow .titBox font:last-child { margin-left: 10px; font-weight: 400; font-size: 20px; }
.wraprow .more { position: relative; margin: 0 50px 0 auto; width: 300px; }
.wraprow .more a { padding: 20px 0; width: 250px; border: 1px #d20320 solid; display: block; text-align: center; }
.wraprow .more a font { position: relative; font-size: 18px; color: #0c0b19; z-index: 2; -webkit-transition-duration: .3s; transition-duration: .3s; }
.wraprow .more a span { position: absolute; width: 80px; height: 1px; background: #000; display: block; right: 0; top: calc((100% - 1px) / 2); z-index: 3; -webkit-transition-duration: .2s; transition-duration: .2s; }
.wraprow .more a span:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 16px 7px 0; border-color: transparent transparent #0c0b19 transparent; right: -1px; bottom: 50%; content: ""; }
.wraprow .more a:after { position: absolute; width: 0; height: 100%; background: #d20320; display: block; top: 0; left: 0; content: ""; z-index: 1; -webkit-transition-duration: .2s; transition-duration: .2s; }

/* news_area */
#news_area .workframe{margin:0;width: 85%;}
#newslist .info{position:relative;display: grid;grid-template-columns: 60% 33%;align-items: center;justify-content: space-between;}
#newslist .info img{aspect-ratio:3/2;object-fit: cover;}
#newslist .info >a{position:absolute;width: 100%;height: 100%;z-index: 1;}
#newslist .info .text{display:grid;gap: 10px;justify-items: start;position: relative;z-index: 2;}
#newslist .info .text:before{content:'“';position: absolute;font-size: 180px;left: -60px;color: #e7e7e7;font-family: "Unbounded", sans-serif;top: -110px;animation: aboutImgAnimation 10s ease-in-out infinite;line-height: 1;}
#newslist .info .text .h3tit{position:relative;z-index:6;display: block;}
#newslist .info .text .h3tit span{-webkit-line-clamp: 2;color: var(--info);font-weight: 500;background-image: linear-gradient(currentColor 1px, transparent 1px);background-repeat: no-repeat;background-size: 0% 1px;background-position: 0 100%;transition: background-size .3s cubic-bezier(.32,.72,0,1);font-size: 30px;line-height: 1.4;font-family: "Lora", serif;}
#newslist .info .text article{font-size: 18px;color: #555;margin-bottom: 50px;-webkit-line-clamp: 4;letter-spacing: .15px;height: auto;margin-top: 20px;}
#newslist .more_btn{position:relative;z-index:2}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}

/* NewsBox */
#NewsBox .listbox { position: relative; z-index: 2; }
#NewsBox li {position: relative;border: 0;margin: 30px 25px 0;background: white;}
#NewsBox li >a {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
#NewsBox li .img_box img{aspect-ratio: 3/2;object-fit: cover;}
#NewsBox li .time{position:absolute;display: flex;flex-direction: column;align-items: center;right: 20px;top: -20px;background: linear-gradient(135deg, var(--primary), var(--triadic2) 120%);color: white;line-height: 1;aspect-ratio: 1/1;font-size: 14px;gap: 3px;width: 80px;justify-content: center;}
#NewsBox li .time *{color:white;line-height: 1;font-size: 36px;}
#NewsBox li .text{padding:40px;display: grid;justify-items: start;gap: 20px;}
#NewsBox li .text .more_btn{position:relative;z-index:5}
#NewsBox li .text .h3tit{position:relative;z-index:6;display: block;height: 85px;overflow: hidden;}
#NewsBox li .text .h3tit span{-webkit-line-clamp: 3;color: var(--info);font-weight: 500;background-image: linear-gradient(currentColor 1px, transparent 1px);background-repeat: no-repeat;background-size: 0% 1px;background-position: 0 100%;transition: background-size .3s cubic-bezier(.32,.72,0,1);font-size: 20px;line-height: 1.4;font-family: "Lora", serif;}
#NewsBox li .text article{height: 95px;color: #555;margin-bottom: 50px;-webkit-line-clamp: 4;letter-spacing: .15px;font-size: 14px;}
#NewsBox .btn{position:absolute;padding: 0;width: 120%;left: -10%;bottom: 50%;display: flex;align-items: center;justify-content: space-between;}
#NewsBox .btn a{width:50px;aspect-ratio: 1/1;display: flex !important;align-items: center;justify-content: center;border-radius: 50px;position: absolute;border: 2px solid var(--gray);}
#NewsBox .btn a:hover{background:var(--primary);border-color:var(--primary)}
#NewsBox .btn a:hover svg{fill:white}
#NewsBox .btn a#news_next{right:0}
#NewsBox .btn a svg{width: 15px;height: 15px;fill: #757575;}
#NewsBox .btn a#news_prev svg{transform:scaleX(-1);}

/* stats_area */
#stats_area {padding: 120px 0;background-image: url(/images/35/starbg.jpg);overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}
#stats_area:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(0deg, rgb(255 255 255 / 0%), rgb(250 250 250));}
#stats_area .fixTxt{position:absolute;top: 0;z-index: 2;left: -50px;}
#stats_area .stats-inner {width: min(90%, 1200px);margin: 0 auto;padding: 0 5%;position: relative;z-index: 2;}
#stats_area .stats-desc-box { min-height: 200px; margin-bottom: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#stats_area .stats-desc-text {font-size: 26px;color: var(--info);font-weight: 500;margin-bottom: 10px;max-width: 850px;line-height: 1.5;}
#stats_area .stats-desc-text *{vertical-align:baseline}
#statHtmlContainer *{font-size:26px}
#stats_area .stats-main-val {font-size: 90px;font-weight: 900;color: var(--info);line-height: 1;font-family: 'Inter';}
#stats_area .stats-main-val.text-large {font-size: 1.85rem;max-width: 950px;line-height: 1.4;text-align: center;}
#stats_area .stats-timeline-wrapper { position: relative; padding: 40px 0 80px; }
#stats_area .stats-track-container { display: flex; align-items: center; width: 100%; position: relative; }
#stats_area .stats-segment { flex: 1; height: 4px; background: #e5e7eb; position: relative; overflow: hidden; margin: 0 2px; border-radius: 2px; }
#stats_area .stats-segment-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--info); width: 0%; transition: width 0.1s linear; }
#stats_area .stats-segment.past .stats-segment-fill { width: 100%; transition: none; }
#stats_area .stats-nodes { position: absolute; top: 0px; left: 0; width: 100%; display: flex; justify-content: space-between; pointer-events: none; }
#stats_area .stats-node { width: 5px; height: 15px; background: #e5e7e9; z-index: 5; transition: background 0.3s; transform: translateY(-5px); }
#stats_area .stats-node.active, #stats_area .stats-node.past { background: var(--info); }
#stats_area .stats-labels { display: grid; justify-content: space-between; margin-top: 20px; grid-template-columns: repeat(4, 1fr); width: 105%; margin-left: -2.5%; gap: 230px; }
#stats_area .stats-label-item {font-size: 1.5rem;font-weight: 900;color: var(--info);cursor: pointer;width: 150px;opacity: 0.15;transition: opacity 0.3s, transform 0.3s;font-family: "Inter", sans-serif;}
#stats_area .stats-label-item:nth-child(3){text-align:center;}
#stats_area .stats-label-item.active, #stats_area .stats-label-item.past { opacity: 1; }
#stats_area .stats-label-item.active { transform: scale(1.1); }

/* people_area */
#people_area { padding: 120px 0; background: #fff; overflow: hidden; }

#people_area .people_container { display: flex; align-items: center; position: relative; padding: 0 5%; min-height: 480px; }
#people_area .more_btn{z-index:5}
#people_area .people_text_col {position: absolute;left: 5%;width: 28%;transition: opacity 0.4s ease, transform 0.4s ease;z-index: 10;opacity: 0;}
#people_area .people_text_col.active{opacity:1}
#people_area .titBox{text-align:left;margin-bottom: 1vw;}
#people_area .people_title { font-family: var(--body-font); font-size: 3.5rem; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; line-height: 1.1; letter-spacing: -1px; }
#people_area .people_subtitle {font-size: 18px;color: #333;margin-bottom: 70px;line-height: 1.5;font-family: 'Inter';font-weight: 600;}
#people_area .people_main_btn { background: #1a1a1a; color: #fff; padding: 14px 28px; border-radius: 40px; font-family: var(--body-font); font-size: 0.9rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: background 0.3s; }
#people_area .people_main_btn:hover { background: var(--primary-color); }

#people_area .people_slider_col { width: 65%; margin-left: auto; position: relative; z-index: 5; }
#people_area .slick-list { overflow: visible !important; }
#people_area .people_item {margin: 0 20px;outline: none;position: relative;}
#people_area .people_item >a.people_card{position:absolute;width: 100%;height: 100%;top: 0;z-index: 1;}
#people_slick_list .time{position:absolute;display: flex;flex-direction: column;align-items: center;right: 20px;top: -20px;background: linear-gradient(135deg, var(--primary), var(--triadic2) 120%);color: white;line-height: 1;aspect-ratio: 1/1;font-size: 14px;gap: 3px;width: 80px;justify-content: center;}
#people_slick_list .time *{color:white;line-height: 1;font-size: 36px;}
#people_slick_list .people_item .h3tit{position:relative;z-index:6;display: block;}
#people_slick_list .people_item .h3tit span{-webkit-line-clamp: 2;color: var(--info);font-weight: 500;background-image: linear-gradient(currentColor 1px, transparent 1px);background-repeat: no-repeat;background-size: 0% 1px;background-position: 0 100%;transition: background-size .3s cubic-bezier(.32,.72,0,1);font-size: 20px;line-height: 1.8;font-family: "Lora", serif;}
#people_slick_list .people_item article{height:auto;color: #555;margin-top: 7px;-webkit-line-clamp: 1;letter-spacing: .15px;font-size: 14px;}
#people_slick_list .people_img{margin-bottom:15px;}
#people_slick_list .people_item img{aspect-ratio:4/3;object-fit: cover;width: 100%;}
#people_area .people_scroller_wrap {margin-top: 80px;padding: 0 5%;position: relative;display: flex;flex-direction: column;gap: 20px;width: 100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#people_area .people_scroller_track { height: 1px; background: #ddd; width: 100%; position: relative; cursor: pointer; }
#people_area .people_scroller_handle {position: absolute;top: 50%;left: 0;transform: translate(0, -50%);width: 70px;height: 70px;background: #fff;box-shadow: 0 0 20px rgb(0 0 0 / 10%);border-radius: 50%;display: flex;align-items: center;justify-content: center;gap: 10px;cursor: grab;z-index: 10;transition: transform 0.1s linear;}
#people_area .people_scroller_handle.is-dragging { cursor: grabbing; transition: none; }
#people_area .people_scroller_handle i {font-size: 12px;color: #1a1a1a;}
#people_area .people_progress_track { height: 2px; background: #f0f0f0; width: 100%; position: relative; margin-top: -21px; }
#people_area .people_progress_fill {position: absolute;top: 0;left: 0;height: 100%;background: var(--primary);width: 0%;transition: width 0.1s linear;}



@media not (pointer:coarse){
	#newslist .info .text .h3tit:hover span, #NewsBox li .text .h3tit:hover span, #people_slick_list .people_item .h3tit:hover span{background-size: 100% 1px;}
}
@media screen and (max-width: 1680px){
	#productBox .workframe { width: 90%; }
	#customBox .btn a { width: 45px; }
	#customBox ul li .info { width: calc(90% - 90px); }
}
@media screen and (max-width: 1440px){
    #NewsBox .workframe{width: min(90%, 1100px);}
    #newslist .info{grid-template-columns: 55% 38%;}
	#news_area .workframe{width: 95%;}
    #newslist .info .text .h3tit span{font-size: 28px;}
    #newslist .info .text article{font-size:16px;}
}
@media screen and (max-width: 1400px){
    #people_area .people_subtitle{font-size: 17px;margin-bottom: 50px;}
    #people_area .titBox{line-height:1.3}
    #NewsBox .btn{left: -8%;width: 116%;}
}
@media screen and (min-width: 1281px){
	.wraprow .more:hover a font { color: #fff; }
	.wraprow .more:hover a span { right: 30px; }
	.wraprow .more:hover a:after { width: 252px; }
	#productBox .bg { width: 700px; height: 585px; top: calc(5vw + 30px); left: auto; right: 0; opacity: 1; }
	#productBox ul li:hover .img { -webkit-transform: scale(.95); transform: scale(.95); }
	#customBox .btn a#prevBtn:hover { left: 10px; }
	#customBox .btn a#nextBtn:hover { right: 10px; }
	#bookBox ul li:hover a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
}
@media screen and (max-width: 1280px){
     #people_area .people_subtitle{font-size: 14px;}
    #NewsBox li .text .h3tit{height:97px;overflow: hidden;}
    #NewsBox .workframe{width: 80%;}
    section{padding: 8vw 0;}
	#newslist .info .text .h3tit{height: 147px;overflow: hidden;}
    #stats_area .stats-labels{width: 80%;gap: 200px;}
    #stats_area .stats-label-item:nth-child(2){text-align:center;}
}
@media screen and (max-width: 1024px){
    #stats_area .stats-inner{width: 80%;}
    #stats_area{padding-bottom:0;background-size: 200%;background-position: 100% 30%;}
    #stats_area .fixTxt{width: 450px;}
    #stats_area .stats-labels{gap: 90px;}
    #newslist .info .text{margin: 0 5%;}
    #news_area .workframe{margin:0 auto;width: 90%;}
    #newslist .info{display:flex;flex-wrap: wrap;gap: 30px;}
    #people_area.is-scrolled .people_text_col { opacity: 1; transform: none; pointer-events: auto; }
}
@media screen and (max-width: 980px){
     #people_area .people_subtitle{font-size: 18px;}
    #stats_area{background-size: 270%;}
    #people_area{padding:10vw 0}
    #people_area .people_text_col{position:relative;width: 100%;opacity: 1 !important;left: 0;}
    #people_area .people_container{display:flex;flex-direction: column;gap: 50px;}
    #people_area .people_slider_col{width:100%}
    #stats_area .stats-labels{gap: 0;width: 90%;}
	#customBox:before , #customBox:after { opacity: 0; }
	#customBox ul li .info { width: 80vw; height: 80vw; }
	#customBox ul li .info article { width: 100%; }
	#youtubeBox .bg { width: 60vw; height: 100%; }
	#youtubeBox iframe { width: 90vw; height: 55vw; }
}
@media screen and (max-width: 640px){
    #people_area{padding: 10vw 0 22vw;}
    #people_area .people_subtitle{font-size: 18px;width: 100%;margin-top: 15px;}
    #stats_area .stats-desc-text{font-size:18px;text-align:center;}
    #stats_area .stats-main-val{font-size: 33px;}
    #stats_area .stats-main-val.text-large{font-size: 19px;}
    #stats_area .stats-label-item{font-size: 15px;width: 80px;}
    #stats_area .fixTxt{width: 300px;}
    #NewsBox .btn{position:relative;left: 0;width: 100%;display: flex;justify-content: center;gap: 20px;margin-top: 40px;}
    #NewsBox .btn a{position:relative;}
    #NewsBox li{margin: 30px 10px 0;}
    #NewsBox .workframe{width: 90%;}
    section .titBox{font-size: 35px;}
    #newslist .info .text article{font-size: 14px;}
	#newslist .info .text .h3tit{height: auto;overflow: unset;}
    #newslist .info .text .h3tit span{font-size: 20px;}
    #newslist .info .text:before{font-size: 110px;left: -20px;}
}