section .title_box .tit{position:relative;font-style:normal;font-size: 24px;color: #0f0f0f;letter-spacing:2px;font-family:'Lato',sans-serif;font-weight: 700;text-transform:uppercase;margin-bottom: 10px;} section .title_box .tit:first-letter{color:var(--primary)} section .title_box .page_title{font-weight: 600;font-size: 40px;color: var(--red);position: relative;line-height: 110%;margin-bottom: 30px;} section .title_box p{line-height: 170%;letter-spacing: 0.5px;font-weight: 400;font-size: 18px;color: #262626;position: relative;} #wrap{background-image:url(/images/01/img_p_Bg.jpg);background-size:auto;background-repeat:repeat;overflow:hidden} .section_area { padding: 3vmax 0 2vmax; } .section_area .area_title { position: relative; padding-bottom: .3em; letter-spacing: .1em; text-align: center; } .section_area .area_title:before { position: absolute; width: 3em; height: .1em; background: var(--primary); display: block; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: ""; } .section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); } .section_area .more_btn { padding: 0 .2em; border-bottom: 2px var(--g_800) solid; font-weight: 500; } .section_area .list_box { margin-top: 2vmax; } .section_area .list_box .item_row { margin: 0 1em; } .section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; } /* photo_area */ #photo_area .item_row { padding: 4% 6%; border: 2px var(--g_100) solid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #photo_area .item_row .img_box img { width: 100px; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin-left: 6%; width: 1%; flex: 1 1 auto; } #photo_area .item_row .info_box h3 { margin-bottom: .5em; max-height: 3.2em; height: auto; -webkit-line-clamp: 2; } #photo_area .item_row .info_box font { padding: .5em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; } /* ProgramsArea */ #ProgramsArea{position:relative;padding: 5vw 0 4vw 0;overflow: initial;} #ProgramsArea .paroller{position:absolute;left: -690px;top: -20px;} #ProgramsArea .paroller2{position:absolute;right:-320px;top:130px} #ProgramsArea .ProgramsList .title_box{display:flex;flex-direction:column;align-items:center} #ProgramsArea .title_box .tit,#ProgramsArea .title_box .page_title,#ProgramsArea .title_box p{text-align:center} #ProgramsArea .ProgramsList li:hover .Txt h3{ animation: soJfun2 1s linear infinite; } @keyframes soJfun2 { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #ProgramsArea .title_box p{width:min(86vw,100%);margin:auto} #ProgramsArea .ProgramsList .title_box .left{margin-bottom:40px} #ProgramsArea .ProgramsList li .item{width:100%;height:100%;position:relative} #ProgramsArea .ProgramsList li .item .category_btn{position:absolute;padding:0.6em 3em .6em 1em;background-image:url(/images/01/img_p_T_Bg_01.png);background-repeat:no-repeat;background-position:right;display:inline-block;line-height:1;font-size:.9em;color:white;top:2.6em;left:.7em;z-index:2} #ProgramsArea .ProgramsList li .Txt{width:calc(100% - 100px);bottom:10px;left:50%;transform:translate(-50%,0%);padding:9px 0 0px;background-image:url(/images/01/img_p_T_Bg_02.png);background-size:auto;background-position:top;background-repeat:no-repeat;border-radius:40px 40px 0 0} #ProgramsArea .ProgramsList .blue .Txt,#ProgramsArea .ProgramsList .red .Txt{width:75%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background:none;padding:70px 0 0;display:flex;align-items:flex-start} #ProgramsArea .ProgramsList li .Img{position:relative;overflow:hidden;border-radius:42px;border:10px solid #e6e6e6} #ProgramsArea .ProgramsList li img{aspect-ratio:1 / 1;width:100%} #ProgramsArea .ProgramsList li:hover img{-webkit-transform:scale(1.1);transform:scale(1.1)} #ProgramsArea .ProgramsList li .Txt h3{color:#fff;letter-spacing:0.5px;font-weight:400;text-align:center;} #ProgramsArea .ProgramsList .blue .Txt h3{text-align:justify} #ProgramsArea .ProgramsList .blue{grid-column-start:2;grid-row-start:2;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:70px 0 0 0;background:url(/images/01/img_p_icon.png) var(--red);background-position:3% 100%;background-repeat:no-repeat} #ProgramsArea .ProgramsList .blue:before{content:'';position:absolute;bottom:-30px;right:0px;background-image:url(/images/01/img_p_icon_2.png);background-size:contain;background-repeat:no-repeat;width:216px;height:226px;z-index:10;transform-origin:bottom right;animation:bannerMouse1 8s infinite ease-in-out} @keyframes bannerMouse1{0%{transform:rotate(0deg)} 10%{transform:rotate(0deg)} 20%{transform:rotate(5deg)} 30%{transform:rotate(0deg)} 40%{transform:rotate(5deg)} 50%{transform:rotate(0deg)} 100%{transform:rotate(0deg)} } /* book_area */ #book_area {padding: 3vw 0 5vw 0;overflow: hidden;} #book_area:before{content:'';position: absolute;right: 0;bottom: 0;z-index: 0;width: 93%;height: calc(100% + -11vw);background: url(/images/01/img_ad_BG.png);} #book_area:after{content:'';position: absolute;left: 0;top: 30px;z-index: 0;width: 180px;height: 350px;background: var(--primary);} #book_area .title_box{display:grid;grid-template-columns:.4fr 1fr 350px;gap:0 20px;align-items:center} #book_area .title_box .page_title{margin-bottom:0} #book_area .title_box .noteBox{font-size:18px;width:60%} #book_area .bottombtn{display:grid;grid-template-columns:1fr 220px;gap:20px 20px;align-items:center} #book_area .bottombtn .productbtn{display:flex;justify-content:space-between} #product_prev { -webkit-transform: scaleX(-1); transform: scaleX(-1); position: relative; } #product_prev, #product_next {width: 50px;height: 50px;fill: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: var(--primary);border-radius: 150px;padding: 10px 15px;} #product_next {background-color: var(--secondary);fill: #fff;} #product_prev svg, #product_next svg{transform: rotate(45deg);width: 18px;height: 18px;margin: auto;} #book_area .list_box{margin-top: 150px;margin-left: auto;width: 90%;transform: translate(30px, 10px);} #book_area .list_box ul li{margin:0px 20px;opacity:.4} #book_area .list_box ul li.slick-active{opacity:1} #book_area .list_box ul li .bookItem{width: 100%;position:relative;margin:0 auto} #book_area .list_box ul li:nth-child(2n) .bookItem{display: flex;flex-direction: column-reverse;} #book_area .list_box ul li .img_scale:before{content: '';width: 100%;height:130px;background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #00000080);padding:30px 30px 33px;pointer-events:none;position:absolute;bottom:0;left:0;z-index:1;transition:all 0.8s;opacity: 0;} #book_area .list_box ul li .img_scale{border-radius: 30px;} #book_area .list_box ul li .img_scale img{ aspect-ratio: 4 / 3;} #book_area .list_box ul li .info_box{color:#fff;padding: 20px 10px;pointer-events:none;position: relative;transition:all 0.5s 0s ease-out;z-index:1;display:flex;align-items: center;transition:all 0.8s;justify-content: space-between;} #book_area .list_box ul li .info_box .textBox p{font-family: 'Lato', sans-serif;font-weight: 700;text-transform: uppercase;color: var(--primary);} #book_area .list_box ul li .info_box h3{font-size:22px;font-weight:400} #book_area .list_box ul li .info_box .more_btn{gap: 10px;display: flex;background: none;color: var(--g_charcoal);align-items: center;padding: 0;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;border-radius: 0;letter-spacing: 0px;} #book_area .list_box ul li .info_box .more_btn::after{content:"";position:absolute;right:-50px;bottom:-80px;width:150px;height:150px;opacity:.5;border:solid 1px #fff;border-radius:50%;opacity:.3} #book_area .list_box ul li .info_box .more_btn svg{transform: rotate(45deg);width: 28px;height: 14px;margin: auto;fill: var(--primary);} /* news_area */ #news_area{overflow:hidden;padding: 6vw 0 12vw 0;} #news_area .paroller{position:absolute;left: -210px;top: 40px;} #news_area .paroller2{position:absolute;right: -270px;top: 220px;} #news_area .workframe{width: min(90%, 1300px);display: flex;flex-direction: column;align-items: center;gap: 30px;} #news_area .tit *{text-align:center;} #news_area .tit,#news_area .title_box .page_title{text-align: center;} #news_area #news_box{display: grid;grid-template-columns: 30% 64%;width: 100%;gap: 75px;align-items: center;} #news_area #news_box #news_list li >div .img a{bottom: 15px;right: 15px;background: var(--secondary);color: var(--light);padding: 15px 30px;border-radius: 50px;font-size: 15px;letter-spacing: 1px;} #news_area #news_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; } #news_area #news_box #news_list li >div {padding: 30px 25px;} #news_area #news_box #news_list li >div{background:var(--primary)} #news_area #news_box #news_list li:hover .tt p, #news_area #news_box #news_list li:hover *{} #news_area #news_box #news_list li .tt{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;} #news_area #news_box #news_list li .tt p{margin:0;font-family: "Lato", serif;font-size: 17px;text-transform: uppercase;font-weight: 600;color: #fff;} #news_area #news_box #news_list li .tt font a{color: #fff;);font-size: 12px;border: 1px solid #ffffff;padding: 3px 15px;background: #ffffff00;} #news_area #news_box #news_list li >div img {width: 100%;aspect-ratio: 1 / 1;object-fit: cover;} #news_area #news_box #news_list li >div h3 {height: 60px;font-weight: 600;font-size: 18px;-webkit-line-clamp: 2;margin: 15px 0 0;color: #fff;} #news_area #news_box #news_list li >div p {height: auto;font-weight: 300;font-size: 14px;-webkit-line-clamp: 2;margin: 15px 0 0;color: #ffffff;} /* news_area */ #news_right{padding: 1.5vw 0;} #news_right .tit .title_box {font-size:24px;font-weight: 500;} #news_right ul{ border-top: 1px solid #dddddd;} #news_right ul li{border-bottom: 1px solid #dddddd;margin-bottom: 10px;padding: 30px 0;} #news_right .info_box{display:grid;grid-template-columns: 126px 1fr;gap: 30px;align-items: center;} #news_right .info_box >p{display:flex;flex-direction: column;align-items: center;color: #434343;font-size: 16px;font-family: "Lato", serif;border-right: 1px solid #dddddd;} #news_right .info_box p b{font-family: "Lato", serif;font-size: 50px;color: var(--yellow);line-height: 1;} #news_right .infoo h3{font-size: 20px;height: auto;font-weight: 500;} #news_right .infoo p{height:auto;color: #818181;font-size: 17px;} @media screen and (max-width:1560px){ #ProgramsArea{padding: 10vw 0 5vw 0;} #book_area:after{width: 10%;} #book_area .list_box{margin-top: 100px;} #book_area:before{height: calc(100% + -13vw);} } @media screen and (max-width:1440px){ #ProgramsArea{padding: 7vw 0 7vw 0;} #news_area{padding: 6vw 0 20vw 0;} } @media screen and (max-width:1280px){ section .title_box{margin-bottom:0px} section .title_box .page_title,#book_area .title_box .page_title{font-size: 32px;margin-bottom:20px} section .title_box .tit{font-size: 20px;} #ProgramsArea .ProgramsList .title_box .left{margin-bottom:20px} #book_area:after{display: none;} #book_area .list_box{width: 100%;transform: translate(0, 0);margin: 50px auto 0;padding: 50px 0;background-color: #f9e8e5;} } @media (min-width:1281px){ #ProgramsArea::after{content:"";position:absolute;background-image:url(/images/39/img-ad-01.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;top:-60px;left:30px;width:184px;height:164px;z-index:11;-webkit-animation:birdJitter 3s ease-in both infinite;animation:birdJitter 3s ease-in both infinite} @keyframes birdJitter{0%,60%,to{-webkit-transform:translate(0,0);transform:translate(0,0)} 30%{-webkit-transform:translate(-1px,0) rotate(-6deg);transform:translate(-1px,0) rotate(-6deg)} 80%{-webkit-transform:translate(0,0) rotate(3deg);transform:translate(0,0) rotate(3deg)} } #ProgramsArea::before{content:"";position:absolute;background-image:url(/images/39/img-ad-02.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;top:-60px;right:30px;width:184px;height:164px;z-index:11;-webkit-animation:birdJitter 3s ease-in both infinite;animation:birdJitter 3s ease-in both infinite} #Service_area .aboutArea .aboutRight p{width:80%} #Service_area .aboutArea .aboutRight::after{content:"";display:block;position:absolute;background-image:url(/images/39/icon-service-01.png);background-repeat:no-repeat;background-size:contain;height:184px;width:236px;bottom:-20px;right:-40px;z-index: -1;} #book_area .list_box ul li:hover .img_scale:before{opacity:1;transition:all 0.8s;} #book_area .list_box ul li:hover .img_scale img{ -webkit-transform: scale(1.1); transform: scale(1.1);} #book_area .list_box ul li:hover .info_box .more_btn{} #book_area .title_box{width: 75%;} } @media screen and (max-width:1160px){ #ProgramsArea{padding: 5vw 0 5vw 0;} #ProgramsArea .ProgramsList{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-gap:25px} #ProgramsArea .ProgramsList .Ptitle{grid-column-start:1;grid-column-end:3} #ProgramsArea .ProgramsList .blue{grid-column-start:2;grid-row-start:-1;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius: 130px 0 0 0;} #ProgramsArea .ProgramsList .red{grid-column-start:1;grid-row-start:2;border-radius:130px 0 0 0;overflow:hidden;background-color:var(--secondary);display:flex;align-items:center;justify-content:center} #ProgramsArea{padding: 10vw 0 5vw 0;} #book_area .title_box{grid-template-columns:1fr;gap:20px 0;justify-content:center;justify-items:center;} #book_area .title_box .left{display: flex;flex-direction: column;align-items: center;} #book_area .title_box .page_title{margin-bottom:0;/* text-align:center; */} #book_area .right .noteBox{text-align:center;width: 100%;} #book_area{padding: 5vw 0 5vw 0;} #book_area:before{display: none;} #news_area #news_box{grid-template-columns: 100%;gap: 20px;} } @media screen and (min-width: 1161px){ #photo_area .item_row:hover { border-color: var(--primary); } #ProgramsArea .ProgramsList{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);grid-gap:25px} #ProgramsArea .ProgramsList .Ptitle{grid-column-start: 2;grid-column-end: 4;display: flex;flex-direction: column;align-items: center;justify-content: center;} #ProgramsArea .ProgramsList .ProgramsItem:nth-child(2){grid-column-start: 1;grid-row-start: 1;} #ProgramsArea .ProgramsList .red{grid-column-start:2;grid-row-start:2;border-radius:130px 0 0 0;overflow:hidden;background-color:var(--secondary);display:flex;align-items:center;justify-content:center} } @media screen and (max-width: 768px){ #ProgramsArea .ProgramsList{grid-template-columns: repeat(1,1fr);grid-template-rows: repeat(1,1fr);grid-gap: 30px;} #ProgramsArea .ProgramsList .Ptitle{grid-column-start:1;grid-column-end: 1;} #ProgramsArea .ProgramsList .blue,#ProgramsArea .ProgramsList .red{display: none;} #news_area{padding: 6vw 0 25vw 0;} } @media screen and (max-width: 640px) and (min-width: 551px){ #photo_area .item_row .img_box { width: 100%; } #photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; } } @media screen and (max-width: 550px){ #news_area{padding: 6vw 0 40vw 0;} #product_list { margin: 2vmax auto 0; width: min(100%, 350px); } }