/* section */
section {padding: 5vw 0;}
section .area_title .other_txt { font-size: 72px; -webkit-transform: rotate(-11deg) translate(60%, .8em); transform: rotate(-11deg) translate(60%, .8em); }
section .area_title h2 {line-height: 1;letter-spacing: .4rem;font-weight: 300;font-family: "Russo One", serif;background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;font-size: max(5 * (1vw + 1vh) / 2, 35px);text-transform: uppercase;text-align: center;}
section .area_title h3 {font-size: 35px;letter-spacing: .4rem;font-weight: 500;}
section .area_title p { letter-spacing: .2rem; font-weight: 300; font-size: 18px; }
section .more_btn {padding: 25px 100px 25px 30px;line-height: 1;border-radius: 100px;background: linear-gradient(145deg, var(--secondary), var(--thirdly));color: #fff;display: inline-flex;align-items: center;position: relative;}
section .more_btn span{display:inline-block;position: absolute;right: 25px;width: 7px;aspect-ratio: 1/1;background: #fff;border-radius: 50px;}
section .more_btn:hover span{width: 56px;right: 7px;}
section .more_btn:hover span:after{content:'';margin: 23px auto 0;width: 15%;aspect-ratio: 1/1;border: var(--thirdly) solid;solid;solid;solid;solid;border-width: 2px 0 0 2px;display:block;transform: rotate(45deg) translate(-1px, -1px);-webkit-transform: rotate(135deg) translate(0, 0);}
section .arrow_btns_box .arrow { width: 40px; height: 40px; border-radius: 50%; }
section .arrow_btns_box .arrow svg { width: 100%; height: 100%; -webkit-transform: scale(.4); transform: scale(.4); }
section .arrow_btns_box .arrow.next { -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* service_area */
#service_area {position: relative;overflow: hidden;}
#service_area:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;z-index: -2;background: linear-gradient(180deg, var(--primary), var(--fifth));}
#service_area .video-bg{position:absolute;top: 0;z-index: -1;opacity: .2;}
#service_area h3{background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;}
#service_area .area_title >p{color: #fff;font-size: 16px;width: 50%;margin: 50px auto 60px;text-align: center;line-height: 2.2;letter-spacing: 0;}

/* fakeNumber */
#fakeNumber{margin-bottom: 5vw;width: 60%;}
#fakeNumber ul{display:grid;grid-template-columns: repeat(4, 1fr);gap: 35px;}
#fakeNumber p{font-weight: 400;text-align: center;color: #fff;font-size: 17px;letter-spacing: 0;margin-top: 10px;}
#fakeNumber h2{display: flex;align-items: flex-start;font-size: 35px;letter-spacing: 0;font-weight: 300;font-family: "Lato", serif;justify-content: center;}
#fakeNumber h2 b{font-size: max(4*(1vw + 1vh) / 2, 45px);font-weight: 500;line-height: 1;font-family: "Lato", serif;margin: 0px 5px 0 0;background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;letter-spacing: 0;}

/* partner_area */
#partner_area{background:#000f36;position: relative;padding: 3vw 0;}
#partner_area:before{content:'';width: 50%;height: 100%;position: absolute;left: 0;background: linear-gradient(90deg, rgb(0 15 54), rgb(0 15 54 / 0%));top: 0;z-index: 1;}
#partner_area:after{content:'';width: 50%;height: 100%;position: absolute;right: 0;background: linear-gradient(-90deg, rgb(0 15 54), rgb(0 15 54 / 0%));top: 0;z-index: 1;}
#partner_area h3{background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;position: relative;z-index: 5;text-align: center;font-size: 35px;letter-spacing: .4rem;font-weight: 500;display: inline-block;margin: 0 0 30px;}
#partner_area .workframe{width:min(90%, 1500px);text-align: center;}
#partner_area li{background: rgb(255 255 255 / 5%);margin: 10px;padding: 30px 20px;border-radius: 50px;display: flex;align-items: center;justify-content: center;box-shadow: 0 0 20px rgb(0 9 45 / 20%);}
#partner_area li img{width:130px;object-fit: contain;height: 35px;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(100%);}

/* custom_area */
#custom_area{    background: linear-gradient(0deg, var(--primary), var(--fifth));}
#custom_area *{color:#fff;}
#custom_area .workframe{width: min(90%, 1300px);}
#custom_area .area_title{width: 30%;}
#custom_area .area_title h3{font-size:24px;letter-spacing: 1px;font-weight: 400;}
#custom_area .area_title p{font-size: 16px;letter-spacing: 0;font-weight: 300;color: #d6d6d6;margin-top: 10px;line-height: 2;}
#custom_tabs{display:grid;align-items: center;justify-content: space-between;grid-template-columns: 65% 25%;}
#custom_tabs .tabs{order:2;display: flex;flex-direction: column;align-items: flex-start;position: relative;}
#custom_tabs .tabs:before {content:url(/images/00/linee.png);position: absolute;left: -140px;}
#custom_tabs .tabs li{margin: 10px 0;display: flex;align-items: center;}
#custom_tabs .tabs li:after{content:'';position: absolute;left: -120px;width: 0;height: 1px;background: #2c476c;}
#custom_tabs .tabs li.active:after, #custom_tabs .tabs li:hover:after{width:65px;}
#custom_tabs .tabs li:nth-child(2):after, #custom_tabs .tabs li:nth-child(4):after{left: -100px;}
#custom_tabs .tabs li:nth-child(3):after{left: -90px;}
#custom_tabs .tabs li:before{content:'';position: absolute;left: -38px;width: 7px;background: #2c476c;aspect-ratio: 1/1;border-radius: 50px;}
#custom_tabs .tabs li.active:before{background: linear-gradient(145deg, var(--secondary), var(--thirdly));box-shadow: 0 0 0 4px #002452, 0 0 0 5px #2c476c;}
#custom_tabs .tabs li:nth-child(2):before, #custom_tabs .tabs li:nth-child(4):before{left: -10px;}
#custom_tabs .tabs li:nth-child(3):before{left: -1px;}
#custom_tabs .tabs li:nth-child(2), #custom_tabs .tabs li:nth-child(4){margin-left: 30px;}
#custom_tabs .tabs li:nth-child(3){margin-left: 50px;}
#custom_tabs .tabs li a{display:flex;align-items: center;font-size: 18px;font-weight: 500;}
#custom_tabs .tabs li.active a{background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;display: inline-block;font-weight: 600;}
#custom_tabs .tabs b{width:55px;aspect-ratio: 1/1;border: 1px solid rgb(255 255 255 / 20%);border-radius: 50px;display: inline-flex;align-items: center;justify-content: center;margin-right: 15px;}
#custom_tabs .tabs li.active b{width:65px;background: linear-gradient(145deg, var(--secondary), var(--thirdly));border: 0;}
#custom_tabs .tabs b img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);width: 30px;aspect-ratio: 1/1;object-fit: contain;}
#tabs_container .tab_content{display:grid;grid-template-columns: 45% 50%;align-items: end;justify-content: space-between;}
#tabs_container .tab_content img{width:100%;aspect-ratio: 1/1;border-radius: 50%;object-fit: cover;}
#tabs_container .tab_content h3{font-size:20px;background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;display: inline-block;}
#tabs_container .tab_content p{color:#d6d6d6;height: auto;-webkit-line-clamp: 2;margin: 30px 0 40px;line-height: 2;}

/* youtube_area */
#youtube_area .workframe{width: min(90%, 1360px);}
#youtube_area li{position:relative;margin: 0 20px;}
#youtube_area li img{aspect-ratio: 5/3;}
#youtube_area li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#youtube_area .slick-prev{width:50px;height: 50px;left: -80px;}
#youtube_area .slick-prev:before{content:url(/images/00/left-arrow.png);}
#youtube_area .slick-next{width:50px;height: 50px;right: -80px;}
#youtube_area .slick-next:before{content:url(/images/00/right-arrow.png)}

/* product_area */
#product_area { padding-bottom: 60px; }
#product_area .top_bg { width: 246px; height: 451px; background: no-repeat 0; top: -7vw; left: 0; -webkit-animation: product_bg 3s linear infinite; animation: product_bg 3s linear infinite; }
#product_area .area_title.left { flex: 1 auto; width: 1%; }
#product_area #product_list .slick-list { overflow: visible; margin-top: 30px; }
#product_area #product_list li { opacity: .5; }
#product_area #product_list li >div { margin: 30px; filter: drop-shadow(-1px 0 10px rgba(0, 0, 0, .2)); }
#product_area #product_list li img { border-radius: 50% 50% 0 0; border: 13px #fff solid; }
#product_area #product_list li .info_box { padding: 0 10px; background: #fff; border: 13px #fff solid; }
#product_area #product_list li .info_box p { font-weight: 300; font-size: 15px; }
#product_area #product_list li .info_box p.old { text-decoration: line-through; }
#product_area #product_list li .info_box h3 { width: 100%; height: 39px; border-bottom: 1px #a5a5a5 solid; font-weight: 500; font-size: 19px; }
#product_area #product_list li .slick-track { padding-top: 30px; }
#product_area #product_list li.slick-active { opacity: 1; }
#product_area #product_list li.slick-current { filter: drop-shadow(-1px 0 20px rgba(0, 0, 0, .2)); -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 1; }
#product_area #product_list .slick-dots { bottom: -20px; }
#product_area #product_list .slick-dots li button { width: 10px; height: 10px; background: var(--info); border-radius: 50%; }
#product_area #product_list .slick-dots li button:before { content: ""; }

/* case_area */
#case_area{background-image:url(/images/00/caseBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding-bottom: 2vw;}
#case_area .workframe{display:grid;justify-content: space-between;width: min(90%, 900px);grid-template-columns: 50% 50%;align-items: end;}
#case_area .photo{margin-top: -170px;}
#case_area .info{margin-bottom: 8vw;}
#case_area .info h3{font-size: 24px;font-weight: 400;letter-spacing: 2px;margin-top: 30px;}
#case_area .info p{margin: 20px 0 85px;}
#case_area .info a{margin-right:20px}

/* book_area */
#book_area {padding-bottom: 8vw;}
#book_area .area_title {margin-bottom:3vw}
#book_area .area_title .other_txt { -webkit-transform: rotate(-11deg) translate(101%, 1.2em); transform: rotate(-11deg) translate(101%, 1.2em); }
#book_area .area_title h2 {border-color: var(--light);word-break: keep-all;}
#book_area .area_title p { margin: 0 40px 80px 0; }
#book_area .area_title .more_btn font { border-right-color: #5b616b; color: #5b616b; }
#book_area .area_title .more_btn svg { stroke: #394250; }
#book_area #book_box { width: 1%; flex: 1 auto; -webkit-transform: translateX(5vw); transform: translateX(5vw); }
#book_area #book_box .top_tit { text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 1px #dbdbdb; text-stroke: 1px #6b6b6b; line-height: 1; letter-spacing: 3rem; font-size: 10vmax; color: transparent; opacity: .5; -webkit-transform: translate(-7vw, -1vmax); transform: translate(-7vw, -1vmax); -webkit-animation: book_element 2.5s linear infinite; animation: book_element 2.5s linear infinite; }
#book_area #book_list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;}
#book_area #book_list li >div img {width: 100%;aspect-ratio: 2.3/3;}
#book_area #book_list li >div h3 {height: auto;word-spacing: 100vw;display: block;text-align: center;font-size: 18px;font-weight: 400;}
#new_tabs ul.tabs_list{display:flex;justify-content: center;margin-bottom: 3vw;align-items: center;position: relative;}
#new_tabs ul.tabs_list:after{content:'';width: 100%;height: 1px;background: linear-gradient(90deg, #000f36, #333f5e, #000f36);position: absolute;z-index: -1;top: 8px;}
#new_tabs .tabs_list li{margin: 0 45px;display: flex;flex-direction: column;align-items: center;}
#new_tabs .tabs_list li.active a, #new_tabs .tabs_list li:hover a{background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;font-weight: 600;}
#new_tabs .tabs_list li:before{content:'';display: inline-block;width: 8px;height: 15px;border-radius: 50px;background: #fff;margin-bottom: 10px;}
#new_tabs .tabs_list li.active:before, #new_tabs .tabs_list li:hover:before{    background: linear-gradient(70deg, var(--secondary), var(--thirdly));}

/* animation */
@-webkit-keyframes product_bg { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10%); } }
@keyframes product_bg { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@-webkit-keyframes book_element { 0% , 100% { -webkit-transform: translate(-7vw, -1vmax); } 50% { -webkit-transform: translate(-6vw, -1vmax); } }
@keyframes book_element { 0% , 100% { transform: translate(-7vw, -1vmax); } 50% { transform: translate(-6vw, -1vmax); } }

@media screen and (min-width: 1501px) {
}
@media screen and (min-width: 1025px) {
	#custom_mo{display:none;}
	#case_area{background-attachment: fixed;}
}
@media screen and (max-width: 1500px){
	#new_tabs ul.tabs_list{margin-bottom: 5vw;}
	#book_area {padding-bottom: 13vw;}
	#youtube_area .workframe{width: min(90%, 1100px);}
	#service_area .workframe { width: 100vw; }
}
@media screen and (max-width: 1280px){
	section{padding: 11vw 0;}
	#custom_area .area_title{position:relative;width: 100%;margin-bottom: 7vw;}
	#tabs_container .tab_content{align-items: center;}
}
@media screen and (max-width: 1160px){
	#service_area .area_title >p, #fakeNumber{width: 90%;}
	#discount_area { padding-bottom: 5vw; }
	#discount_area #discount_list { grid-template-rows: 55% 45%; }
	#discount_area #discount_list .info_box { padding: 20px; }
	#discount_area #slogan_box { padding-bottom: 30px; }
	#discount_area #slogan_box:before { display: none; }
	#discount_area #slogan_box .row { padding-left: 80px; }
}
@media screen and (max-width: 1024px){
	#book_area #book_list{grid-template-columns: repeat(2, 1fr);}
	#youtube_area ul{padding-bottom: 30px;}
	#youtube_area .slick-prev{left: 42%;bottom: -80px;top: unset;}
	#youtube_area .slick-next{right: 42%;bottom: -80px;top: unset;}
	#custom_tabs{display:none;}
	#custom_mo .tab_content {display:grid;grid-template-columns: 40% 50%;justify-content: space-between;align-items: center;}
	#custom_mo .tab_content img{width:100%;aspect-ratio:1/1;object-fit: cover;border-radius: 50%;}
	#custom_mo .tab_content h3{font-size:20px;background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;display: inline-block;}
	#custom_mo .tab_content p{color:#d6d6d6;height: auto;-webkit-line-clamp: 2;margin: 30px 0 40px;line-height: 2;}
}
@media screen and (max-width: 980px){
	#case_area .info a{margin-top: 20px;}
	#service_area .custom_list li img { width: 45vw; height: 45vw; }
	#service_area .arrow_btns_box .arrow { bottom: 20vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 25vw; }
	#service_area .arrow_btns_box .arrow.next { right: 25vw; }
	#discount_area #discount_list { grid-template-columns: 1fr; grid-template-rows: 400px 250px; grid-gap: 30px 50px; align-content: center; }
	#discount_area #picture_box { grid-row-end: inherit; }
	#discount_area #picture_box img { height: 400px; }
	#discount_area #slogan_box , #discount_area .diamond_svg { display: none; }
}
@media screen and (max-width: 768px){
	#book_area { flex-wrap: wrap; }
	#book_area .area_title { width: 100%; }
}
@media screen and (max-width: 640px){
	#youtube_area .slick-prev{left: 30%;bottom: -40px;top: unset;}
	#youtube_area .slick-next{right: 30%;bottom: -40px;top: unset;}
	#youtube_area ul{padding-bottom: 70px;}
	#case_area .info a{margin-right:0}
	#case_area .info p{font-size:15px;margin-bottom: 30px;}
	#case_area .info h3{letter-spacing:0;font-size: 20px;}
	#case_area .info, #case_area .info *{text-align:center;}
	#case_area .photo{margin:0}
	#case_area .workframe{grid-template-columns:1fr;gap: 30px;}
	#new_tabs ul.tabs_list{margin-bottom: 11vw;margin-top: 7vw;}
	#book_area #book_list{grid-template-columns: 1fr;width: 90%;margin: 0 auto;}
	#new_tabs .tabs_list li{margin: 0 15px;}
	#custom_mo .tab_content{grid-template-columns:1fr;gap: 30px;}
	#partner_area{padding:7vw 0;}
	#partner_area li{padding: 10px 10px;margin: 10px 5px;}
	#partner_area li img{height: 25px;}
	section{padding: 15vw 0;}
	#fakeNumber ul{grid-template-columns: repeat(2, 1fr);margin-bottom: 30px;}
	section .area_title h2{letter-spacing: 2px;}
	section .area_title h3 {font-size: 22px;}
	#service_area .custom_list li img { width: 60vw; height: 60vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 15vw; }
	#service_area .arrow_btns_box .arrow.next { right: 15vw; }
	#service_area .arrow_btns_box .arrow { bottom: 30vw; }
}
@media screen and (max-width: 550px){
	section .area_title .more_btn { padding-left: 40px; }
	#service_area .custom_list li img { width: 80vw; height: 80vw; }
	#service_area .custom_list li .info_box h3 { height: 1.5em; font-size: 7vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 5vw; }
	#service_area .arrow_btns_box .arrow.next { right: 5vw; }
	#product_area .workframe { flex-wrap: wrap; }
	#product_area .area_title.left { width: 100%; }
	#product_area .area_title.arrow_btns_box { margin-bottom: 1rem; width: 100%; justify-content: end; }
	#product_area #product_list li >div { margin: 30px 20px; }
	#book_area #book_box #book_list li >div img { width: 65vw; }
}