.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s} .hidetext{position:absolute;top: 39%;left: -9vw;z-index:2;transform:rotate( -90deg);font-size: 66px;font-weight:bold;color:#f3f3f3} #content{position:relative} .btnBox{padding:9% 0 0 3px;text-align:center} .btnBox a{text-transform:uppercase;display:inline-block;padding:0;text-align:center;-webkit-transition:all 0.5s;transition:all 0.5s;color:#fff;position:relative;letter-spacing:1px;width:238px;height: 63px;line-height:57px;background-color: var(--primary);overflow:hidden;border-radius: 50px;} .btnBox a span{z-index:10;position:relative} .btnBox a:before{content:'';width:7px;height:7px;display:block;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:calc(50% - 4px);left:auto;bottom:auto;right:32px;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:10} .btnBox a:hover{-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.15);box-shadow:0 3px 10px rgba(0,0,0,0.15)} .btnBox .btn1::after{content:'';position:absolute;right:-10%;top:0;z-index:0;width:0;height:100%;-webkit-transform:skew(-30deg);transform:skew(-30deg);background-color: var(--complement););-webkit-transition:all .5s;transition:all .5s} .btn1:hover:after{width:120%;left:-10%;right:auto;-webkit-transition:all .5s;transition:all .5s} .topic{position:relative;/* padding:70px 0; */} .topic .topic-title{display: flex;position:relative;z-index:3;color:#333;flex-direction: column;align-items: flex-start;} .topic .topic-title h2{text-align:center;text-transform: uppercase;color: var(--complement);letter-spacing:0.32px;line-height:1.5;font-weight: 700;font-size: 45px;} .topic .topic-title p{line-height: 130%;margin-top:7px;font-weight:500;font-size: 18px;letter-spacing:1.5px;padding-left: 23px;position: relative;} @-webkit-keyframes beat{from{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(1.3);transform:scale(1.3)} 100%{-webkit-transform:scale(1);transform:scale(1)} } @keyframes beat{from{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(1.3);transform:scale(1.3)} 100%{-webkit-transform:scale(1);transform:scale(1)} } .topic .topic-title p::before{-webkit-animation:beat 1.5s ease-in-out infinite;animation:beat 1.5s ease-in-out infinite;border-radius:999px;border: 1px solid var(--triadic1);content:"";height:14px;left:0;position:absolute;top: 6px;width:14px} .topic .topic-title p::after{-webkit-animation:beat 1.5s ease-in-out infinite;animation:beat 1.5s ease-in-out infinite;background-color: var(--triadic1);border-radius:999px;content:"";height:6px;left:4px;position:absolute;top: 10px;width:6px} .topic b{font-family:'Marck Script',cursive;position:absolute;z-index:2;left:0;width:100%;height:100%;display:block;top:0;font-size:170px;color:#eaeaea;line-height:197px;text-align:center;font-style:italic;transform:rotate(-5deg);font-weight:400} #freebox{padding:0 0 60px;position:relative;overflow:hidden;z-index:3;background: #f7f7f7;} #freebox .topic-title{margin-bottom:50px;align-items:center} #freebox .webframe{width:min(90%,1440px);padding: 70px 0;margin-bottom: 0;} #freeboxlist{position:relative;z-index:2;text-align:center;display:grid;grid-template-columns: repeat(5,1fr);gap: 20px;} #freeboxlist >div{display:inline-block;margin-right:-5px;vertical-align:top;-webkit-transition: all 0.5s;transition: all 0.5s;} #freeboxlist .free{padding:30px;text-align:center;position:relative;overflow:hidden;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);background-color: #ffffff;-webkit-transform: translateY(0px);transform: translateY(0px);-webkit-transition: all .5s;transition: all .5s;border-radius: 70px 0 0 0;} #freeboxlist .free .topBox{-webkit-box-align:center;align-items:center;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin-bottom: 20px;position:relative;z-index:1;flex-direction:row-reverse} #freeboxlist .free .topBox .stepBox{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:"Cardo",serif} #freeboxlist .free .topBox .stepBox .number{display:inline-block;font-size:40px;line-height:0.8;font-family:"Libre Baskerville",serif;opacity:.3} #freeboxlist .free .topBox .stepBox .text{display:inline-block;font-size:16px;line-height:1;letter-spacing:0.75px;margin-left:10px} #freeboxlist .free .topBox .Img{padding: 16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #dcdcdc;background-color:#ffffff;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} #freeboxlist .free .topBox .Img img{width: 35px;aspect-ratio: 1 / 1;object-fit: contain;} #freeboxlist .free .Txt{position:relative;z-index:1} #freeboxlist .free .Txt .title{margin-bottom: 16px;position:relative;border-bottom:1px solid #cbcbcb;padding: 0px 0px 20px 0px;color:#313131;letter-spacing: 1px;line-height: 140%;font-size: 20px;font-weight: 500;} #freeboxlist .free .Txt .title::before{content:"";width:25px;height:1px;background-color:#666;position:absolute;bottom:0;left:0;z-index:1} #freeboxlist .free .Txt .title a{display:block;font-size:18px;font-weight:500;line-height:1.2;letter-spacing:1.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #freeboxlist .free .Txt .text{color: #2f2f2f;line-height:1.65;letter-spacing: 0.4px;"Libre Baskerville",font-family:sans-serif;opacity: .6;font-size: 16px;} #freeboxlist .free::before{content:"";display:block;width:calc(100% - 20px);height: 17px;background-color: #f7f7f7;position:absolute;bottom:0;left:10px} #freeboxlist .free::after {content: '';position: absolute;bottom: -130px;right: -20px;background-image: url(/images/18/img-logo2.png);background-size: contain;background-repeat: no-repeat;width: 130px;height: 130px;opacity: .25;-webkit-transition: all 0.5s;transition: all 0.5s;} #freeboxlist .free:hover::after {bottom: -20px;opacity: .2;-webkit-transition: all 0.5s;transition: all 0.5s;} @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)} } #freeboxlist .free:hover{-webkit-box-shadow: 0px 20px 40px 1.4px rgba(149, 149, 149, 0.35);box-shadow: 0px 20px 40px 1.4px rgba(149, 149, 149, 0.35);-webkit-transform: translateY(-20px);transform: translateY(-20px);-webkit-transition: all 0.5s;transition: all 0.5s;} #freeboxlist .free a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2} #freeboxlist .free img{} #freeboxlist .free .photo{text-align:center;width:70px;margin:0 auto 30px;box-shadow:0 0 10px rgb(0 0 0 / 10%);border-radius:50%;padding:30px;background:#fff} #freeboxlist .free:hover .photo:before{top:0} #freeboxlist .free:nth-child(2){animation-delay: 0.2s;-webkit-animation-delay: 0.2s;} #freeboxlist .free:nth-child(3){animation-delay: 0.3s;-webkit-animation-delay: 0.3s;} #freeboxlist .free:nth-child(4){animation-delay: 0.4s;-webkit-animation-delay: 0.4s;} #freeboxlist .free:nth-child(5){animation-delay: 0.5s;-webkit-animation-delay: 0.5s;} #freeboxlist .free:nth-child(6){animation-delay: 0.6s;-webkit-animation-delay: 0.6s;} #freeboxlist .free:nth-child(7){animation-delay: 0.7s;-webkit-animation-delay: 0.7s;} #freeboxlist .free h4{text-align:center;font-size:22px;line-height:110%;overflow:hidden;margin-bottom: 12px;height: 25px;} #freeboxlist .free p{font-size: 14px;text-transform: capitalize;} .circleStyle{position:absolute;display:block;z-index:1;border-radius:50%} .circleStyle.bobA{width:700px;height:700px;left:-320px;top:-300px} .circleStyle.bobB{width:400px;height:400px;right:-150px;bottom:-200px} #book .border .photo img{width:100%;} #product{overflow:hidden;position:relative} #product .webframe{position:relative;z-index:3} #product:after{width:100%;height:70%;content:'';display:block;position:absolute;top:0;left:0;z-index:1} #product .topic .topic-title{color:#fff} #product .topic b{color:rgba(245,245,245,0.12)} #prolay{position:relative;z-index:3} #prolay .slick-list{padding:15px} #prolay .pro-list .p-border{position:relative;padding:30px;background:#fff;border:1px solid #f5f5f5;transition:all linear .2s} #prolay .pro-list h4{color:#ff9637;font-weight:400;font-size:11pt} #prolay .pro-list .photo{margin:20px 0;background-color:#f9f9f9;background-position:50% 50%;background-repeat:no-repeat;background-size:contain} #prolay .pro-list .photo img{width:100%} #prolay .pro-list a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5} #prolay .pro-list .p-info h3{line-height:130%;font-size:13pt;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} #prolay .pro-list .p-info >span{background:#ff7166;display:block;width:20px;height:1px;margin:20px 0} #prolay .pro-list .p-info .describe{line-height:140%;font-size:11pt;overflow:hidden;height:30pt} #prolay .pro-list .p-info .price{overflow:hidden;margin:10px 0 0;height:22px} #prolay .pro-list .p-info .price span{float:right;font-size:10pt;color:#565656} #prolay .pro-list .p-info .price span.old{float:left;text-decoration:line-through} #prolay .pro-list .p-info h5{margin:0;margin-top:20px} #prolay .pro-list .p-info h5 b{font-size:11pt;display:inline-block;background:#e8e8e8;padding:6px 35px;border-radius:25px;color:#252525} #prolay .slick-prev{width:40px;height:40px;left:-50px} #prolay .slick-next{width:40px;height:40px;right:-50px} #prolay .slick-prev:before,#prolay .slick-next:before{font-size:40px;color:#3a3f4a} .same-btn{text-align:center;margin-top:40px} .same-btn a{display:inline-block;background: #3889bf;color:#fff;font-size: 14px;font-weight: 500;padding:15px 45px;border-radius: 50px;transition:all linear .2s;font-family: 'Roboto', sans-serif;} .same-btn a:hover{opacity:.8} #prolay .same-btn{margin-top:40px} #bookBox{position:relative;overflow:hidden;padding-top:120px;margin:80px 0} #bookBox .webframe{position:relative;z-index:3} #bookBox .topic{position:absolute;right:0;top:0;z-index:2;padding:0;width:50%} #bookBox .topic b{color:#000;font-size:60px;left:-40px;transform:rotate(-30deg);top:-60px;line-height:110%} #book li{float:left;width:calc(50% - 30px);padding:15px} #book li:nth-child(2n){margin-top:100px} #book .border{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;transition:all linear .1s} #book .border a{position:absolute;width:100%;height:100%;display:block;top:0;left:0;z-index:3} #book .border .info{color:#fff;position:absolute;left:0;bottom:0;z-index:2;width:calc(100% - 80px);padding:40px;background:-moz-linear-gradient(bottom,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%)} #book .border .info p{display:inline-block;padding:5px 20px;font-size:11pt;border-radius:25px;margin-bottom:15px;font-weight:700} #book .border .info h3{font-size:24px;line-height:110%} #bookBox .circleStyle{width:100%;height:90%;right:-30%;top:30px;background-image:url(/images/18/dots.png);background-position:50% 50%;z-index:1;border-radius:0} #aboutFunc{position:relative;background-repeat:no-repeat;background-position:100% 100%;background-size:contain} #aboutFunc .webframe{position:relative;z-index:2;overflow:hidden;padding: 100px 0 0;} #aboutFunc:after{content:'';display:block;position:absolute;top:0;right: 0;z-index:1;opacity:.9;width: 70%;height: 100%;background: #eee;} #aboutFunc #about{float:right;width: calc(100% - 700px);position:relative;} #aboutFunc #about .subBoxTitle{font-size: 18px;font-weight: bold;} #aboutFunc #about .speBoxTitle{font-size: 35px;line-height:120%;margin-bottom: 20px;} #aboutFunc #about .arts{font-size: 15px;line-height: 190%;margin:40px 0;} #aboutFunc #about .same-btn{text-align:left} #aboutFunc #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left;width: 600px;} #youtube .UTwo{position:relative;padding-bottom: 82%;padding-top:30px;height:0;overflow:hidden;} #youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0,0,0,0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s} #youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px} #youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%} /* about_area */ #about_area{position:relative;padding: 120px 0;height: 760px;background: repeat-y url(/images/39/line.png) center, linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, #fff 85.64%, #f7f7f7 68.65%, #f7f7f7 100%);overflow:hidden} #about_area .workframe{margin:0;padding-left:10vw;padding-right:20px;width:min(1340px,90%)} #about_area .aboutBox{display:flex} #about_area .abouttxt{font-size:15px;line-height:1.8;width:55vw} #about_area .info_item{font-size:15px;line-height:1.8} #about_area .topic,#about_area .topic .topic-title h2,#about_area .topic .topic-title p{text-align:left} #about_area .topic{padding:0 0 60px 0} #about_area .topic .topic-title{display:flex;flex-direction:column;align-items:flex-start} #about_area .img_item{margin-bottom:30px;height:auto;width:52vw;position:absolute;top:0;right:0} #about_area .img_item:before{position:absolute;width:100%;height:90%;border:1px rgba(var(--info-rgb),.1) solid;display:block;top:130px;right:30px;content:""} #about_area .img_item img{width:100%;aspect-ratio: 19/14.5;border-radius: 0 0 0 200px;} #about_area .img_item a{padding:20px 35px;letter-spacing:5px;text-transform:uppercase;font-size:13px;right:30px;bottom:-30px;z-index:3} #about_area .info_item article{margin-bottom:40px;line-height:210%;letter-spacing:1px;font-weight:400;font-size:18px} #about_area .info_item article .classLink li{font-size:17px;font-weight:600;letter-spacing:0;color:#3f3f3f;line-height:200%} #about_area .info_item article .classLink{animation-name:fadeInUp;-webkit-animation-name:fadeInUp} #about_area .btnBox{padding:0 0 9% 0;text-align:left} /* advantageBox */ .advantageBox{position:absolute;bottom: 0;left:0;right:0;display:flex;-webkit-box-pack:center;justify-content: flex-start;z-index: 20;width: min(100% , 1200px);margin: 0 auto 0 220px;display: none;} .advantageBox li{padding:0} .advantageBox .item:nth-child(2n){background-color: #093f8b;} .advantageBox .contentBox{opacity:1;margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;width:auto} .advantageBox .Img img{display:block;width: 70%;margin: auto;-webkit-backface-visibility:hidden;backface-visibility:hidden} .advantageBox .Img a{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex} .advantageBox p.content{opacity:0;height:50px;position:absolute;bottom:52px;font-size:14px;width:280px;max-width:280px;left:60px;color:#fff} .advantageBox h3{display:block;width:100%;font-weight:400;color:#fff;letter-spacing:1px;line-height:1.1} .advantageBox .adList{flex-direction: row;display: grid;grid-template-columns: repeat(3, 1fr);} .advantageBox .adList ul{display:grid;grid-template-columns: repeat(3, 1fr);margin-bottom: 40px;} .advantageBox .adList li{padding: 20px;position: relative;overflow: hidden;background-color: #062857;height: 160px;width: 400px;display: flex;flex-direction: column;align-items: center;justify-content: center;} .advantageBox .adList h2{display:flex;align-items: baseline;font-weight: 400;font-size: 15px;color: #fff;margin-bottom: 8px;} .advantageBox .adList h2 b{font-size: 60px;line-height: 1.1;margin-right: 7px;"Libre Baskerville",font-family: sans-serif;font-weight: 200;} .advantageBox .adList p{font-size: 20px;color: #fff;letter-spacing: 3px;} /* news_area */ #news_area{background:#f2f2f2;position: relative;padding: 6vw 0;} #news_area:before{content:'';position: absolute;width: 37vw;height: 100%;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;top: 0;left: 0;background-image: url(/images/18/abstract-background.jpg);opacity: .6;} #news_area .bg{position:absolute;right: 0;top: 0;height: 100%;width: 23vw;background-size: cover;background-position: 50% 50%;background-image: url(/images/18/img_n_BG.jpg);} #news_area .workframe{width: min(90%, 1040px);margin-left: 18%;} #news_area .tt_box h2{text-align:left;} #news_area .sub_title{display:flex;flex-direction: row;align-items: center;} #news_area .sub_title:before, #product_area .sub_title:before{box-shadow: 20px 0px var(--secondary);background: var(--primary);margin: 0 35px 0 0;} #news_area .tt_box{position:relative;display: flex;align-items: center;margin-bottom: 70px;} #news_area .tt_box .topic{padding:0} #news_area .topic .topic-title{display:flex;align-items:flex-start} #news_area .tt_box a{position:absolute;right: 0;bottom: 0;} #news_list li {background: #fff;margin: 5px 0;} #news_list li .item_row{padding: 40px 30px;} #news_list .info_box {display: grid;grid-template-columns: 120px 1fr 100px;align-items: center;justify-content: space-between;gap: 30px;} #news_list .info_box a{background: var(--info);display: inline-block;padding: 9px 0;height: auto;font-weight: 500;border-radius: 50px;} #news_list li:hover .info_box a{background:#ececed;color: var(--info);} #news_list .info_box .time {font-size: 14px;color: #a4a4a4;font-family: "Lato", serif;text-align: end;} #news_list .info_box h3 {margin: .2em 0 .5em;font-weight: 500;font-size: 20px;line-height: 180%;} #news_list li:hover .info_box h3{color: var(--complement);} #news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; } /* news_area2 */ #news_area2{padding:5vw 0;background:rgb(243,243,243)} #news_area2 .workframe{width:min(90%,1440px);margin:0 auto} #news_area2 .ttBox{display:flex;align-items:flex-end;position:relative;margin-bottom:3vw} #news_area2 .ttBox h3{padding:0} #news_area2 .ttBox em{margin-bottom:15px;margin-left:25px} #news_area2 .btn{padding:0;position:absolute;right:0;display:flex;align-items:center} #news_area2 .btn a{width:65px;aspect-ratio:1/1;display:inline-flex !important;!i;!;align-items:center;justify-content:center;border:1px solid #3d3a39;border-radius:50px} #news_area2 .btn a.news_prev{margin-right:25px;opacity:.3} #news_area2 .n_list{display:grid;justify-content:space-between;align-items:center} #news_area2 .one li{display:grid;grid-template-columns:50% 50%;background:var(--white);align-items:center;box-shadow:rgba(0,0,0,0.1) -1px -1px 20px;margin:20px;padding:20px;border-radius: 30px;} #news_area2 .one li .img_box{border-radius:30px;} #news_area2 .one li img{aspect-ratio:4 / 3;object-fit:cover} #news_area2 li .info_box {margin: 10px 40px;} #news_area2 li .info_box .cate{color: #818181;} #news_area2 li .time {display: flex;font-weight: 400;font-size: 13px;align-items: center;color: #5a5a5a;font-family: "Lato", serif;} #news_area2 li .time svg{fill:var(--complement);width: 17px;height: 17px;margin-right: 10px;} #news_area2 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_area2 li h3 {margin-top: 3px;height: 60px;line-height: 150%;font-size: 20px;-webkit-line-clamp: 2;font-weight: 500;margin-bottom: 15px;} #news_area2 li article{-webkit-line-clamp: 2;height: auto;color: #656565;margin-bottom: 40px;font-weight: 500;line-height: 170%;} @media screen and (max-width: 1680px) { .advantageBox .item{width:325px;height:200px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} .advantageBox .item .Txt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center} .advantageBox .item .Txt .content{inset:auto;bottom:25px;right:-50px} .advantageBox .item .Txt h3{font-size:20px;margin-top:14px} .advantageBox .item .Txt p{font-size:16px} .advantageBox .item:hover{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} .advantageBox .item:hover .Img{opacity:1} .advantageBox .item:hover .Txt{margin-bottom:25px} .advantageBox .item:hover .Txt p,.advantageBox .item:hover .Txt h3{font-size:18px} .advantageBox .item:hover p.content{bottom:30px;left:24px} .hidetext{bottom:35%;left:-42%} #about_area .img_item{bottom:0} } @media screen and (max-width: 1440px) { .advantageBox{margin:0 auto 0 0px} .advantageBox .item{width:280px;height:200px} .advantageBox .item p.content{max-width:240px;height:45px} .advantageBox .item:hover .Txt{margin-bottom:30px} .advantageBox .item:hover p.content{bottom:40px} #freeboxlist .free .photo:before{left:45px;top:20px} .hidetext{display:none} #news_area .workframe{margin-left:8%} #news_area2 .workframe{width:90%} } @media screen and (max-width: 1400px) { #news_area2 .n_list{} } @media screen and (min-width: 1281px){ #about_area .d_flex { align-items: center; } #about_area:after{content:"";position:absolute;bottom: 0;z-index: -1;width:100%;height: 200px;display:block;background-color: #f7f7f7;background-repeat:no-repeat;background-position:50% 100%;background-size:auto} } @media screen and (max-width: 1280px) { .advantageBox .adList li{width:100%} .advantageBox .adList h2 b{font-size:45px} .advantageBox .adList li:nth-child(n) .item{background-color:#4d70b1} .advantageBox .adList li:nth-child(3n+1) .item{background-color:#005192} .advantageBox .item{width:100%;-ms-flex-negative:0;flex-shrink:0} .advantageBox .item p.content{max-width:240px;left:0;right:0;margin:auto} #about_area .img_item:before , #about_area .img_item img { width: 100%; } #about_area .img_item img {height: 100%;border-radius: 0 0 0 100px;} #freeboxlist{grid-template-columns:repeat(4,1fr)} #freeboxlist .free p,#freeboxlist .free h4{height:auto} .circleStyle.bobA{width:500px;height:500px;left:-250px} .circleStyle.bobB{width:300px;height:300px} #prolay .slick-list{padding:0} #prolay{width:calc(100% - 90px);margin:0 auto} #freeboxlist .free .photo:before{left:85px;top:30px} #news_area2 .workframe{width:95%;} #news_area .tt_box{margin-bottom:20px} #news_area{padding:13vw 0} } @media screen and (max-width: 1140px){ #about_area .abouttxt{width: auto;} .advantageBox{bottom:0} section .title_box .page_title,section .textEditor .page_title{font-size:30px} section .textEditor .page_title span{top:-70px;left:-60px} section .textEditor .text{font-size: 16px;} section .textEditor .titleA{font-size: 14px;width: 100%;} #about_area{padding:80px 0;height:1000px} #about_area .img_item{} #news_area2 .n_list{display:block;} #news_area2 .workframe{width:90%;margin: 0 auto;} #news_area2 li h3 { height: 30px; -webkit-line-clamp: 1; } #news_area2 li .info_box{margin:0px 20px} } @media screen and (min-width: 1025px) { #prolay .pro-list .p-border:hover, #book .border:hover{transform:translate(-15px,-15px)} } @media screen and (max-width: 1024px){ #about_area .img_item { width: 59vw; margin: 0 0 0 auto; order: inherit; } #about_area .info_item {margin-top: 0px;z-index: 4;width: 100%;padding-right: 0;} #about_area .info_item article{width: 100%;} #freeboxlist .free .photo:before{left:65px;top:25px} #aboutFunc #about{width:calc(100% - 450px);margin-bottom:50px} #aboutFunc #youtube{width:400px} #youtube .UTwo{padding-bottom:120%} #news_area .workframe{margin:0 auto;} } @media screen and (max-width: 980px) { #freeboxlist{grid-template-columns:repeat(3,1fr)} .topic b{font-size:120px} #aboutFunc #about{width:90%;margin-bottom:50px;padding:0 5%} #aboutFunc #about .subBoxTitle{left:-5%} #aboutFunc #youtube{width:100%} #aboutFunc .webframe{padding-bottom:50px} } @media screen and (max-width: 768px) { .advantageBox .adList li{width:100%;height: 120px;} .advantageBox .adList li:nth-child(n) .item{background-color:#4d70b1} .advantageBox .adList li:nth-child(2n) .item{background-color:#005192} .advantageBox .item{height:120px} .advantageBox .Img img{width:80%;margin:auto} #about_area .img_item{width:100vw;height: 68vw;position:inherit} #about_area{height:100%;padding: 60px 0;} .topic b{font-size:100px} #book .border .info h3{font-size:20px} #book .border .info{width:calc(100% - 40px);padding:20px} #freeboxlist .free .photo:before{left:35px} #youtube .UTwo{padding-bottom:50%} #aboutFunc:after{width:100%} #news_area .bg{display:none;} #news_list .info_box{grid-template-columns: 90px 1fr;gap: 10px;} #news_list .info_box a{padding: 5px 0;font-size: 14px;} #news_list .info_box h3{order:2;grid-column: 1 / 3;margin: 0;} #news_list li .item_row{padding: 25px 20px;} #news_area:before{width: 20vw;} #news_area .tt_box a{display:none;} #news_area2 li .info_box{margin: 25px 0px;} #news_area2 .one li{grid-template-columns:1fr} #news_area2 .btn{display:none;} #news_area2 .ttBox{width:100%;} #news_area2 li .row { margin: auto; width: 280px; } #about_area .aboutBox{display:flex;flex-direction:column} .advantageBox .adList h2 b{font-size:34px} .advantageBox .adList p{font-size:16px;letter-spacing:2px} } @media screen and (max-width: 640px) { #about_area .img_item {width: 100%;bottom: 70px;} #about_area .img_item:before { background: rgba(var(--secondary-rgb), 0); } #about_area .info_item {margin-top: 0px;} #freeboxlist{grid-template-columns:repeat(2,1fr)} #book li,#book li:nth-child(2n){width:100%;padding:0;margin:0 0 20px} #bookBox .topic{position:relative;width:auto;padding:0 0 70px} #about_area .topic{padding:0 0 20px 0} } @media screen and (max-width: 480px) { #freeboxlist .free{padding:20px;border-radius: 45px 0 0 0;} #freeboxlist .free h4{font-size:18px} .topic .topic-title h2{font-size:35px} .topic b{font-size:70px} #prolay .pro-list .p-border{padding:20px} #aboutFunc #about .speBoxTitle{font-size:23pt} #aboutFunc #about .arts{margin:20px 0 40px} .same-btn a{padding:10px 45px;font-size:10pt} }