.wrapper .video-bg{top:0;left: 0;width: 100%;height: 100%;z-index: -1;opacity: .5;}
.wrapper .video-bg video{}
#wrap {z-index: 5;}

/* section */
section {padding: 5vw 0;}
section .bg_box {z-index:-1;background-size: cover;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;}
section .title_box em{padding-bottom: .5vw;display: block;font-family: 'Arimo';font-style: unset;font-size: 60px;line-height: 1.2;color: var(--complement);font-weight: 600;letter-spacing: 2px;text-transform: uppercase;}
section .title_box .h2title { position: relative; display: inline-block; color: transparent; --target-text-color: #333; font-weight: 500; letter-spacing: 1.5px; font-size: 24px; }
section .title_box .h2title::before { content: ''; position: absolute; inset: 0; background: var(--complement); transform: scaleX(0); transform-origin: left; z-index: 10; pointer-events: none; }
section .title_box.aos-animate .h2title { animation: title_text_reveal_color 0.1s 0.6s forwards; }
section .title_box.aos-animate .h2title::before { animation: title_block_reveal 1.2s cubic-bezier(0.77,0,0.175,1) forwards; }
section .title_box .desc  {font-size: 16px;line-height: 2;letter-spacing: .25px;padding: 0 5% 3vw;}
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%); }
@keyframes title_block_reveal{0%{transform:scaleX(0);transform-origin:left;}45%{transform:scaleX(1);transform-origin:left;}55%{transform:scaleX(1);transform-origin:right;}100%{transform:scaleX(0);transform-origin:right;}}
@keyframes title_text_reveal_color{to{color:var(--target-text-color);}}

/* holland_area */
#holland_area{overflow:hidden;p}
#holland_area:after, #admission_area:after{content:'';position: absolute;bottom: 0;width: 100%;height: 100%;background-image: url(/images/44/PBG.png);background-position: bottom;background-repeat: no-repeat;z-index: -1;}
#holland_area .holland_sub {width: 250px;left: 9%;top: -50px;transform-origin: 50% 0%; animation: swing 2.8s ease-in-out infinite;will-change: transform;}
#holland_area .bg_box {background-size:cover}
@keyframes swing{0%{transform:rotate(-6deg);}50%{transform:rotate( 6deg);}100%{transform:rotate(-6deg);}}
@media (prefers-reduced-motion:reduce){#holland_area .holland_sub{animation:none !important;}}
#holland_area .title_box, #video_area .title_box, #admission_area .title_box, #about_area .title_box{display:flex;flex-direction: column;align-items: center;}
#video_area .title_box p, #admission_area .title_box p{margin-top: 25px;}
#holland_area .title_box p a{vertical-align: baseline;margin:0 2.5px;color: #73a1c3;}
#holland_area .title_box p strong{vertical-align: baseline;}
#holland_area .title_box .desc b{display: block;text-align: center;margin-top: 10px;font-weight: 400;}

/* six_area */
#six_area .selectBox { text-align: center; }
#six_area .selectBox select { width: 15%; margin: 0 auto 40px; -webkit-appearance: none; background: url(/images/40/arrow.png) no-repeat scroll 98% center #fff; background-repeat: no-repeat; background-position: 98% 50%; }
#six_area .item_cols {display: grid;grid-template-columns: repeat(3, 1fr);gap: 60px;}
#six_area .item_col {padding: 4.5rem 4.5rem 3rem;background: white;border-radius: 50px;}
#six_area .style_container {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;/* -webkit-perspective: 1000px; *//* perspective: 630px; */}
#six_area .front, #six_area .back { background-size: cover; background-position: center; -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; height: auto; color: #fff; }
#six_area .back {background: #fff;}
#six_area .item_col[data-type="2"] .front, #six_area .item_col[data-type="2"] .back { -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); }
#six_area .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#six_area .back .inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
#six_area .inner { left: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 1px solid transparent; -webkit-perspective: inherit; perspective: inherit; z-index: 2; text-align: center; }
#six_area .item_col .inner .photo:after{content:'R';position: absolute;font-family: 'Arimo';font-weight: 800;font-size: 15em;color: var(--complement);right: 0%;top: 6%;z-index: -1;font-style: italic;opacity: .5;}
#six_area .item_col:nth-child(2) .inner .photo:after{content:'I'}
#six_area .item_col:nth-child(3) .inner .photo:after{content:'A'}
#six_area .item_col:nth-child(4) .inner .photo:after{content:'S'}
#six_area .item_col:nth-child(5) .inner .photo:after{content:'E'}
#six_area .item_col:nth-child(6) .inner .photo:after{content:'C'}
#six_area .inner .info {}
#six_area .inner .photo img {width: 100%;height: 100%;object-fit: cover;object-position: 20% 0;position: relative;z-index: 2;}
#six_area .inner .tt h3 { font-size: 18px; margin-bottom: 10px; }
#six_area .inner .tt p {font-size: 15px;line-height: 170%;font-weight: 500;margin-bottom: 20px;color: #666;text-align: center;letter-spacing: 1px;}
#six_area .style_container .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
#six_area .style_container .back .backbg { position: absolute; width: 100%; height: 100%; }
#six_area .style_container .back .backbg img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
#six_area .style_container .front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
#six_area .item_col[data-type="2"] .back {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;height: 100%;}
#six_area .item_col[data-type="2"] .front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
#six_area .front .inner .h3 {font-weight: 400;font-size: 23px;line-height: 170%;padding: 0 30px;text-align: center;margin-top: 20px;color: #222;letter-spacing: 2px;}
#six_area .front .inner p {font-weight: 400;font-size: 13px;line-height: 170%;padding: 8px 45px;margin-bottom: 50px;border-radius: 50px;text-align: center;color: white;background: #0c3672;font-family: 'Arimo';margin-top: 5px;display: inline-block;letter-spacing: 1px;}
#six_area .front .inner article {font-weight: 400;font-size: 15px;line-height: 170%;text-align: center;color: #444;letter-spacing: .5px;height: 102px;}
#six_area .more {display: flex;align-items: center;justify-content: center;width: 100%;color: var(--complement);text-decoration: underline;margin-top: 50px;cursor: pointer;}
#six_area .back .more{position:absolute;bottom: 0;}
#six_area .more span { display: flex; margin-left: 10px; -webkit-transition-duration: .2s; transition-duration: .2s; align-items: center; justify-content: center; }
#six_area .more span svg {width: 14px;height: 14px;fill: var(--complement);}
#six_area .more:hover span { right: 15px; }

/* groups_area */
#groups_area{padding-top: 0;}
#groups_area .title_box{width: min(100%, 750px);padding: 0;}
#groups_area .title_box em{color: #0055A4;}
#groups_area .title_box .desc{padding-left:0;padding-right: 0;}
#imglist{overflow:hidden;display: grid;justify-content: space-between;align-items: center;grid-template-columns: 78% 15%;}
#imglist .img_box{order: 2;padding-left: 40px;position: relative;}
#imglist .img_box:before { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 100%; background-color: #1989dd; opacity: .3; }
#imglist .innfo {display: grid;grid-template-columns: 45% 48%;justify-content: space-between;align-items: center;}
#imglist .innfo >a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#imglist .innfo p{position: relative;z-index: 10;}
#imglist .innfo .clip{order: 2;aspect-ratio: 1/1;border-radius: 50%;}
#imglist .innfo .clip img{filter: url(#pixelate);transition: all linear 1s;aspect-ratio: 1/1;}
#imglist .innfo .clip svg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#imglist .innfo.slick-current .clip img{filter: unset;}
#imglist .innfo .h3{font-size: 27px;margin-bottom: 55px;line-height: 150%;color: #0055A4;font-weight: 500;padding-bottom: 20px;position: relative;}
#imglist .innfo .h3:after{content:'';position: absolute;bottom: 0;background: rgb(25 137 221 / 30%);width: 130%;height: 1px;left: 0;}
#imglist .img_box .h3{font-size: 18px;font-weight: 500;position: relative;cursor: pointer;color: #1989dd;border: 0;margin: 12px 0;}
#imglist .img_box .h3:after{content:'';width: 1px;height: 0;position: absolute;left: -35px;background: #1989dd;top: 0;}
#imglist .img_box .h3.current:after{height:100%;}
#imglist .img_box .h3 b{font-family: 'Arimo';color: #1989dd;font-size: 14px;margin-right: 15px;}
#imglist .img_box .h3:before{content:'';position: absolute;left: 26px;top: 50%;margin-top: -3px;width: 0px;height: 0px;opacity: 0;background-color: transparent !important;border-style: solid;border-width: 4px 0px 4px 6px;border-color: transparent transparent transparent var(--primary);transition: 0.4s ease-in-out;}
#imglist .img_box .h3.current:before{content:'';position: absolute;left: -7px;top: 50%;margin-top: -3px;width: 0px;height: 0px;opacity: 0;background-color: transparent !important;border-style: solid;border-width: 4px 0px 4px 6px;border-color: transparent transparent transparent var(--primary);transition: 0.4s ease-in-out;-webkit-transform: translateX(10px);transform: translateX(10px);opacity: 1;}
#imglist .img_box .h3 span, #imglist .innfo .h3 span {position: absolute;width: 80px;height: 1px;background: #000;display: block;right: -40px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;display: none;}
#imglist .img_box .h3 span:before , #imglist .innfo .h3 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: ""; }
#imglist .img_box .h3.current span{display:block;}
#imglist .img_box .h3.current b{ opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px);}

/* video_area */
#video_area:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;opacity: .45;z-index: -2;background-image: url(/userfiles/images/20260316091654623.jpg);}
#video_area:before{content:'';position: absolute;bottom: 0;width: 100%;height: 100%;background-image: url(/images/44/PBG.png);background-position: bottom;background-repeat: no-repeat;z-index: -1;transform: scaleY(-1);}
#video_area h1{font-size: 24px;font-weight: 500;letter-spacing: 1.5px;}
#video_area .arrowBox {left: -5%;z-index: 10;bottom: 0;display: flex;flex-direction: row;gap: 15px;width: 110%;justify-content: space-between;position: relative;}
#video_area .arrowBox a{background: #ffffff;width: 55px;aspect-ratio: 1/1;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;box-shadow: 0 0 20px rgb(5 17 43 / 50%);position: absolute;top: -195px;}
#video_area .arrowBox a:hover{background: none;box-shadow: 0 0;}
#video_area .arrowBox a:hover img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#video_area .arrowBox a#video_next{right:0}
#video_area .arrowBox a#video_prev img{transform:scaleX(-1);}
#video_area .title_box p, #admission_area .title_box p{width: min(100%, 800px);}
#video_area .item{margin: 0 20px;}
#video_area .h3{font-size:18px;letter-spacing: 1px;text-align: center;margin-top: 35px;}
#video_area iframe{aspect-ratio: 16 / 9;height: auto;border-radius: 30px;box-shadow: 0 15px var(--gray);}
#video_area .item:hover iframe{box-shadow: 20px 20px var(--complement);}

/* share_area */
#share_area .bg_box{opacity:.45}
#share_area:before{content:'';position: absolute;bottom: 0;width: 100%;height: 100%;background-image: url(/images/44/PBG.png);background-position: bottom;background-repeat: no-repeat;z-index: -1;}
#share_area .title_box{display:flex;flex-direction: column;align-items: flex-start;width: min(90%, 1100px);margin: 0 auto;position: relative;}
#share_area .title_box .desc{padding:0}
#share_area .arrowBox {right: 10%;z-index: 10;bottom: 50px;display: flex;flex-direction: row;gap: 15px;justify-content: space-between;position: absolute;}
#share_area .arrowBox a{background: var(--primary);width: 55px;aspect-ratio: 1/1;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;}
#share_area .arrowBox a:hover{background: #2b83e8;}
#share_area .arrowBox a img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#share_area .arrowBox a#share_next{right:0}
#share_area .arrowBox a#share_prev img{transform:scaleX(-1);}
#share_area li{margin: 20px 25px;background: white;padding: 40px;border-radius: 30px;box-shadow: 0 0 30px rgb(0 0 0 / 5%);display: flex;flex-direction: column;align-items: center;gap: 2px;}
#share_area li img{width: 100px;aspect-ratio: 1/1;border-radius: 50%;}
#share_area li .h3{font-size:18px;font-weight: 500;margin: 10px 0 5px;}
#share_area li p{font-size: 15px;text-align: center;letter-spacing: 0.5px;color: #666;}
#share_area li p.time{color:var(--primary)}
#share_area li  article{margin-top:15px;-webkit-line-clamp: 5;height: 127px;font-size: 15px;text-align: justify;letter-spacing: 1px;}

/* admission_area */
#admission_area:before{content:'';position: absolute;bottom: 0;width: 100%;height: 100%;background-image: url(/images/44/PBG.png);background-position: bottom;background-repeat: no-repeat;z-index: -1;transform: scaleY(-1);opacity: .5;}
#admission_area .bg_box{width: 100%;height: 100%;top: 0;background: #021f5f;background-image: url(/userfiles/images/20260316091654623.jpg);z-index: -2;}
#admission_area .about_sub_1 {width: 180px;top: -10vw;left: 7vw;animation: aboutImgAnimation 10s ease-in-out infinite;}
#admission_area .about_sub_2 {width: 160px;top: 7vw;right: 5vw;animation: aboutImgAnimation 10s ease-in-out infinite;}
#admission_area .about_sub_3 {width: 170px;bottom: -11vw;left: 9vw;animation: aboutImgAnimation 10s ease-in-out infinite;}
#about_area #about_img{ right: -110px; }
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(20px);transform:translateY(20px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}

/* about_area */
#about_area {padding-top: 2vw;}
#about_area .title_box p{padding:0}
#about_area .title_box em{font-size: 40px;color: #0055A4;}
#about_area .features {display:grid;width: min(100%, 1000px);margin: 0 auto;grid-template-columns: repeat(3, 1fr);gap: 40px;}
#about_area .features .item{background: rgba(255,255,255,0.15);border-radius: 30px;padding: 50px;box-shadow: 0 0 20px rgb(255 255 255 / 5%);display: flex;flex-direction: column;align-items: center;gap: 10px;}
#about_area .features .item .img{width: 60%;}
#about_area .features .item .h3{margin-top:15px;font-size: 18px;font-weight: 500;letter-spacing: 1px;color: #0055A4;}
#about_area .features .item p{text-align:center;letter-spacing: 1px;font-size: 15px;}
#about_area .features .item { position: relative; overflow: hidden; transform: translateZ(0); transition: transform .35s ease,box-shadow .35s ease,background-color .35s ease,border-color .35s ease; backdrop-filter: blur(8px); }
#about_area .features .item::before { content: ""; position: absolute; inset: -40%; transform: translateX(-60%) rotate(25deg); background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 35%,rgba(255,255,255,0) 70%); opacity: 0; transition: opacity .35s ease,transform .8s ease; pointer-events: none; }
#about_area .features .item::after { content: ""; position: absolute; inset: -2px; border-radius: 32px; background: radial-gradient(circle at 30% 10%,rgb(255 255 255/25%),rgba(0,85,164,0) 55%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
#about_area .features .item .img img { width: 100%; display: block; transform: scale(1); filter: drop-shadow(0 10px 20px rgba(0,0,0,.12)); transition: transform .45s ease,filter .45s ease; }
#about_area .features .item .h3,#about_area .features .item p { transition: transform .35s ease,opacity .35s ease; }
#about_area .features .item:hover,#about_area .features .item:focus-within { transform: translateY(-10px); background: rgba(255,255,255,0.22); box-shadow: 0 18px 40px rgba(0,0,0,.12),0 0 30px rgba(255,255,255,.10); }
#about_area .features .item:hover::before,#about_area .features .item:focus-within::before { opacity: 1; transform: translateX(60%) rotate(25deg); }
#about_area .features .item:hover::after,#about_area .features .item:focus-within::after { opacity: 1; }
#about_area .features .item:hover .img img,#about_area .features .item:focus-within .img img { transform: scale(1.06); filter: drop-shadow(0 16px 30px rgba(0,0,0,.18)); }
#about_area .features .item:hover .h3,#about_area .features .item:focus-within .h3 { transform: translateY(-2px); }
#about_area .features .item:hover p,#about_area .features .item:focus-within p { transform: translateY(-2px); opacity: .95; }
#about_area .features .item { will-change: transform; }

@media (prefers-reduced-motion:reduce){#about_area .features .item,#about_area .features .item::before,#about_area .features .item::after,#about_area .features .item .img img,#about_area .features .item .h3,#about_area .features .item p{transition:none !important;animation:none !important;}}

@media screen and (max-width: 1460px) {
    #admission_area .about_sub_2{right: 0vw;top: 3vw;}
    #admission_area .about_sub_3{bottom: -13vw;left: -1vw;}
    #holland_area .holland_sub{left: 2%;width: 220px;}
    #six_area .item_col{padding: 3.5rem 2.5rem 3rem;}
}
@media screen and (max-width: 1280px) {
    #admission_area .about_sub_3{width: 140px;}
    #admission_area .about_sub_2{width: 130px;}
    #admission_area .about_sub_1{width: 150px;left: 2vw;}
    #six_area .item_cols{gap: 35px;}
    #imglist{grid-template-columns: 75% 20%;}
}
@media screen and (max-width: 1024px) {
    #about_area .title_box em{font-size: 35px;}
    #video_area .title_box p, #admission_area .title_box p{width: min(100%, 600px);}
    #imglist .img_box .h3{font-size:17px;margin: 4px 0;}
    #imglist{display:block;}
    #imglist .img_box{padding:0;display: grid;grid-template-columns: repeat(5, 1fr);margin-bottom: 30px;}
    #imglist .img_box:before, #imglist .img_box .h3:after{display:none;}
    #six_area .item_cols{grid-template-columns: repeat(2, 1fr);}
    #holland_area .holland_sub{width: 160px;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #admission_area .about_sub_2{right: -6vw;top: -17vw;}
    #video_area .arrowBox a{top: 0;position: relative;}
    #video_area .arrowBox{width: 100%;left: 0;position: relative;display: flex;align-items: center;justify-content: center;margin-top: 30px;gap: 20px;}
    #imglist .innfo{display:flex;flex-direction: column-reverse;align-items: flex-start;}
    #imglist .innfo .info{width:100%}
    #imglist .innfo .clip{width: 60%;margin-bottom: 20px;}
	#imglist .img_box{grid-template-columns: repeat(3, 1fr);}
    section { padding: 12vw 0 ; }
    #six_area .item_cols{grid-template-columns: 1fr;}
    section .title_box em{font-size: 40px;}
    #about_area .features .item{padding:20px;}
    #about_area .features{gap:20px;}
}
@media screen and (max-width: 760px) {
	#six_area .workframe { opacity: 1 !important; transform: none !important; transition: none !important; }
	section .clip img{height: auto;}
    #about_area .features .item .img{width: 40%;}
    #admission_area .about_sub_2{right: -6vw;top: -37vw;width: 90px;#admission_area .about_sub_2{right: -6vw;top: -17vw;};}
    #admission_area .title_box .h2title{word-break: keep-all;}
    #admission_area .about_sub_3{display:none;}
    #share_area .arrowBox{position:relative;bottom: 0;right: 10%;margin-top: 30px;display: flex;justify-content: flex-end;width: 100%;}
    #imglist .innfo .clip{width: 80%;}
	#imglist .img_box{grid-template-columns: repeat(2, 1fr);}
    section .title_box .h2title{font-size:22px}
    section .title_box .desc{font-size:15px;}
	#about_area .features {grid-template-columns: 1fr;gap: 18px;}
	#about_area .features .item { padding: 28px; border-radius: 22px; }
}
@media screen and (max-width: 550px) {
	#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 li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}