#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .emtitle_box {font-style: unset;font-size: 22px;font-family: "Space Grotesk", sans-serif;display: block;font-weight: 700;color: var(--primary);text-transform: capitalize;}
section .title_box {padding-bottom: 1.5vw;font-size: 37px;font-weight: 500;}
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%); }
section .btnBox{position:relative}
section .btnBox .more_btn{display:inline-block;z-index:2;position:relative;text-align:center;width: 230px;padding: 25px 10px;border-radius:39.5px;font-family:"Lato";font-weight:bold;font-size:18px;line-height:1;letter-spacing:0;background-color:var(--complement);color:#fff;overflow:hidden;border:2px solid var(--complement)}
section .btnBox .more_btn span{display:block;width:7px;height:7px;z-index:-1;position:absolute;top:50%;right:13%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
section .btnBox .more_btn span:before,section .btnBox .more_btn span:after{content:"";border-radius:50%;background-color:#fff;position:absolute;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in}
section .btnBox .more_btn span:before{width:29px;height:29px;opacity:0.2}
section .btnBox .more_btn span:after{width:7px;height:7px}
section .btnBox .more_btn.out span:before{-webkit-animation:beforeToSm 0.7s 0.2s forwards;animation:beforeToSm 0.7s 0.2s forwards}
section .btnBox .more_btn.out span:after{-webkit-animation:afterToSm 0.7s forwards;animation:afterToSm 0.7s forwards}
section .btnBox .more_btn.in{color:var(--complement)}
section .btnBox .more_btn.in span:before{-webkit-animation:full 0.8s forwards;animation:full 0.8s forwards}
section .btnBox .more_btn.in span:after{-webkit-animation:full 0.8s 0.2s forwards;animation:full 0.8s 0.2s forwards;}
@keyframes afterToSm{0%{width:550px;height:500px;}100%{width:7px;height:7px;}}
@keyframes full{100%{width:550px;height:500px;}}

/* 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 .workframe{width: min(90%, 1280px);display: grid;grid-template-columns: 38% 57%;justify-content: space-between;align-items: start;z-index: 10;position: relative;}
#about_area {z-index: 5;display: flex;align-items: center;justify-content: center;}
#about_area .pageh1 {font-size: 24px;line-height: 1.4;margin-bottom: 10px;font-weight: 500;}
#about_area article p {margin-bottom: 30px;line-height: 2.2;font-weight: 400;text-align: justify;}
#about_area article .photo{display:flex;flex-wrap: wrap;gap: 20px;}
#about_area article .photo img{width: 80px;}
#about_area .clip {border-radius: 30px;overflow: hidden;}
#about_area #about_img .clip img{aspect-ratio: 3/3.6;}
#about_area .rightboxx{display:flex;flex-direction: column;gap: 40px;margin-top: 50px;}
#about_area .rightboxx #about_img{width:80%}
#about_area .rightboxx #about_img img{aspect-ratio: 5 / 3;}
#about_area .btnBox{position:absolute;left: -44.5%;bottom: -55%;}
#about_area .circleBox{width:720px;height:720px;margin:0 auto;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;position:absolute;z-index:6}
#about_area .circleBox .dots1{width:30px;height:30px;display:block;border-radius:50%;background-color:var(--secondary);z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;opacity:0;-webkit-transform:rotate(0deg) translate(-360px) rotate(0deg);transform:rotate(0deg) translate(-360px) rotate(0deg);-webkit-animation:circleOuter 24s linear infinite;animation:circleOuter 24s linear infinite}
#about_area .circleBox .dots2{width:24px;height:24px;display:block;border-radius:50%;background-color:var(--secondary);z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;opacity:0;-webkit-transform:rotate(0deg) translate(-360px) rotate(0deg);transform:rotate(0deg) translate(-360px) rotate(0deg);-webkit-animation:circleOuter 24s 8s linear infinite;animation:circleOuter 24s 8s linear infinite}
#about_area .circleBox .dots3{width:15px;height:15px;display:block;border-radius:50%;background-color:var(--primary);z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;opacity:0;-webkit-transform:rotate(0deg) translate(-360px) rotate(0deg);transform:rotate(0deg) translate(-360px) rotate(0deg);-webkit-animation:circleOuter 24s 12s linear infinite;animation:circleOuter 24s 12s linear infinite}
#about_area .circleBox .dots4{width:29px;height:29px;display:block;border-radius:50%;background-color:var(--primary);z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;opacity:0;-webkit-transform:rotate(0deg) translate(-400px) rotate(0deg);transform:rotate(0deg) translate(-400px) rotate(0deg);-webkit-animation:circleOuter2 24s 16s linear infinite;animation:circleOuter2 24s 16s linear infinite}
#about_area .circleInnerBox{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;position:relative}
#about_area .circleInnerBox:after,#about_area .circleInnerBox:before{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%;border: 1px solid rgb(237 237 237 / 80%);-webkit-transform-origin:center;transform-origin:center}
#about_area .circleInnerBox:before{width:0;height:0}
.circleInnerBox.scale:before{-webkit-animation:scale_before 2s 0.2s linear forwards;animation:scale_before 2s 0.2s linear forwards}
#about_area .circleInnerBox:after{width:0;height:0}
#about_area .circleInnerBox.scale:after{-webkit-animation:scale_after 2s linear forwards;animation:scale_after 2s linear forwards}
#about_area .circleBox .dots5{width:11px;height:11px;display:block;border-radius:50%;background-color:#006c4f;z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;opacity:0;-webkit-transform:rotate(0deg) translate(-360px) rotate(0deg);transform:rotate(0deg) translate(-360px) rotate(0deg);-webkit-animation:circleInner 22s linear infinite;animation:circleInner 22s linear infinite}
#about_area .circleBox .dots6{width:17px;height:17px;display:block;border-radius:50%;background-color:#006c4f;z-index:1;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;opacity:0;-webkit-transform:rotate(0deg) translate(-360px) rotate(0deg);transform:rotate(0deg) translate(-360px) rotate(0deg);-webkit-animation:circleInner 22s 6s linear infinite;animation:circleInner 22s 6s linear infinite}
@keyframes circleOuter{0%{opacity:1;-webkit-transform:rotate(0deg) translate(-360px) rotate(0deg);transform:rotate(0deg) translate(-360px) rotate(0deg);}100%{opacity:1;-webkit-transform:rotate(360deg) translate(-360px) rotate(-360deg);transform:rotate(360deg) translate(-360px) rotate(-360deg);}}
@keyframes scale_before{0%{width:0;height:0;}100%{width:615px;height:615px;}}
@keyframes scale_after{0%{width:0;height:0;}100%{width:720px;height:720px;}}
@keyframes circlelnner{0%{opacity:1;-webkit-transform:rotate(0deg) translate(-307.5px) rotate(0deg);transform:rotate(0deg) translate(-307.5px) rotate(0deg);}100%{opacity:1;-webkit-transform:rotate(360deg) translate(-307.5px) rotate(-360deg);transform:rotate(360deg) translate(-307.5px) rotate(-360deg);}}
@keyframes circleOuter2{0%{opacity:1;-webkit-transform:rotate(0deg) translate(-400px) rotate(0deg);transform:rotate(0deg) translate(-400px) rotate(0deg);}100%{opacity:1;-webkit-transform:rotate(360deg) translate(-400px) rotate(-360deg);transform:rotate(360deg) translate(-400px) rotate(-360deg);}}

/* news_area */
#news_area{background: #f7f4f1;padding-top: 11vw;}
#news_area:before{content:"";position:absolute;top:-120px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:0;display:block;width:100%;height:279px;background-image:url(/images/44/about_bg_top.png);background-size:cover;background-position:top center;}
#news_area:after{content:"";background-image: url(/images/44/advice_bg.png);background-position: bottom center;overflow-x: clip;position: absolute;width: 100%;height: 40%;bottom: 0;opacity: .5;}
#news_area .workframe{width: min(90%, 1260px);}
#news_area .listbox{margin: 2vw 0 3vw;}
#news_area .btnBox{text-align:center;}
#news_area li{margin: 20px 30px 0;background: white;border-radius: 35px;}
#news_area li:hover{ transform: translateY(-10px);}
#news_area li .img_box {border-radius: 35px 35px 0 0;background-color: #f9f9f9;}
#news_area li .info_box {margin: 25px 35px 45px;}
#news_area li .time {font-weight: 400;font-size: 15px;}
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li .h3 {margin-top: 10px;height: 64px;line-height: 150%;font-size: 22px;-webkit-line-clamp: 2;margin-bottom: 20px;font-weight: 500;}
#news_area li article{font-weight: 400;-webkit-line-clamp: 2;height: auto;}
.arrowBox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:2;position:absolute;left:-10%;top:45%;width:120%;justify-content:space-between}
.arrowBox .arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid #666666;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex !important;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}
.arrowBox .arrow:hover{border-color:var(--primary)}
.arrowBox .arrow:before{content:"";width:1px;aspect-ratio:1/1;position:absolute;background-color:var(--primary);border-radius:50%}
.arrowBox .arrow:hover:after{-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
.arrowBox .arrow:hover:before{width:100%}
.arrowBox .arrow:after{content:"";width:14px;height:12px;background-repeat:no-repeat;background-size:contain;background-image:url(/images/44/arrow.png);position:absolute}
.arrowBox #news_prev:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

/* book_area */
#book_area .booklist{margin-top:20px}
#book_area .fixTxt{right: -3%;top: -10%;width: 270px;aspect-ratio: 1/1;z-index: 4;border-radius: 50%;overflow: hidden;}
#book_area .fixTxt:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: var(--complement);z-index: -1;}
#book_area .fixTxt img{aspect-ratio:1/1;object-fit: cover;opacity: .15;}
#book_area li{margin:0 30px}
#book_area li .img_box{border-radius: 35px;}
#book_area li .h3 {margin-top: 15px;height: auto;font-size: 20px;padding: 0 5%;font-weight: 500;}

/* photo_area */
#photo_area{display:flex;align-items: center;z-index: 4;}
#photo_area .bg{position:absolute;left:0;top:0;z-index:-3;width:45%;height:100%;background-image:url(/images/44/dotBg.png);filter:saturate(0%);opacity:.45}
#photo_area:before,#photo_area:after{content:'';position:absolute;left: -25%;/* top:0; */width:684px;height:100%;/* -webkit-transform:skewX(-13deg); */-ms-transform:skewX(-13deg);/* transform:skewX(-13deg); */width: auto;height: 130%;aspect-ratio: 1 / 1;border-radius: 50%;}
#photo_area:before{z-index:-1;background-image:url(/images/44/scholarshipBg.jpg);background-repeat:no-repeat;background-position: 10% 50%;background-size:cover;opacity:0.1;filter:saturate(0%);}
#photo_area:after{z-index:-2;background-color:#043749}
#photo_area .workframe{display:grid;grid-template-columns: 50% 45%;justify-content: space-between;width: min(90%, 1260px);}
#photo_area .workframe iframe{height:100%}
#photo_area .boxlistt{height: 470px;overflow-y: scroll;}
#photo_area .item{position:relative;margin: 0 0 20px;}
#photo_area .info{display:grid;grid-template-columns: 125px 1fr;align-items: center;gap: 55px;}
#photo_area .info img{border-radius:30px;border: 8px solid #f1f1f1;aspect-ratio: 1/1;object-fit: cover;}
#photo_area .info p{font-size: 22px;font-family: "Arimo", var(--font-family), sans-serif;font-weight: 500;}
#photo_area .info article{color: #727272;font-size: 15px;margin-top: 5px;}
#photo_area .boxlistt::-webkit-scrollbar { width: 4px; }
#photo_area .boxlistt::-webkit-scrollbar-track { background: rgba(var(--gray-rgb), .2); }
#photo_area .boxlistt::-webkit-scrollbar-thumb { background: var(--primary); }

@media screen and (max-width: 1460px) {
    #book_area .fixTxt{width: 190px;}
    #photo_area:before, #photo_area:after{left: -35%;}
    .arrowBox{width: 110%;left: -5%;}
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width: 1280px) {
    #news_area{padding-top: 18vw;}
}
@media screen and (max-width: 1024px) {
    #photo_area:before, #photo_area:after{height: 40%;top: -7%;left: -15%;}
    #photo_area .workframe iframe{height: 480px;}
    #photo_area .workframe{display: block;}
    #photo_area .rightbox {margin-bottom:40px;}
    #about_area .btnBox{left: -59.5%;bottom: -5%;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #photo_area:before, #photo_area:after{height: 25%;}
    .arrowBox{left: unset;width: auto;right: 5%;gap: 10px;top: unset;bottom: 2%;}
    #news_area:before{top: -100px;height: 209px;}
    #about_area .rightboxx #about_img{display:none;}
    section{padding:8vw 0}
    #about_area .clip{width: 90%;margin: 0;}
    #about_area #about_img .clip img{aspect-ratio: 5/3;object-position: 50% 80%;}
    #about_area .workframe{grid-template-columns:1fr}
    #about_area .btnBox{position:relative;left: 0;bottom: 0;margin-top: 50px;}
}
@media screen and (max-width: 760px) {
    #about_area .clip{width: 100%;margin: 0;}
	section .clip img{height: auto;}
    #book_area .fixTxt{right: -12%;width: 130px;top: -6%;}
    section .title_box{padding-bottom: 5vw;}
    #photo_area .workframe iframe{height: 300px;}
    .arrowBox{position:relative;display: flex;justify-content: center;right: 0;margin: 35px 0;}
    #photo_area:before, #photo_area:after{height: 15%;top: -5%;left: -22%;}
    #news_area:before{top: -50px;height: 100px;}
	section { padding: 15vw 0 ; }
	#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) {
	#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_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; }
}