/*tQtitle_area*/ #tQtitle_area{width:min(980px,90%);margin: 10px auto 40px;display:flex;align-items:center;position:relative;z-index:1;gap: 25px;} #tQtitle_area .mootbox{position:relative;font-size: max(5*(1vw + 1vh) / 2,33px);line-height:120%;font-weight:700;text-transform: uppercase;color: #444444;} #tQtitle_area .mootbox .motext{position:absolute;bottom: 7px;right: 0;font-weight:400;font-size:max(1.4 * (1vw + 1vh) / 2,18px)} #tQtitle_area .mootbox.aos-animate .motext{ -webkit-animation: clipPathAni 0.8s ease-in-out 0.8s both; animation: clipPathAni 0.8s ease-in-out 0.8s both; } .tminfo{margin-left:35px} .mabouttitle{margin-bottom:30px} .mabouttitle p{font-size:max(1.5*(1vw + 1vh) / 2,20px)} .mabouttitle .bigJ{font-size: max(2.5*(1vw + 1vh) / 2,27px);font-weight:600} .mabouttitle .bigJ.aos-animate{ -webkit-animation: clipPathAni 0.8s ease-in-out 1s both; animation: clipPathAni 0.8s ease-in-out 1s both; } #about_area{padding: 0px 0 60px;display: flex;flex-direction: column;z-index: 20;overflow-y: visible;align-items: center;background-image: url(/images/40/out_bg.jpg);padding: 140px 0 10px;background: #ffffff;} #about_area .JJtitle{margin-bottom: 0;} #about_area .workframe{display:grid;grid-template-columns: 60% 37%;gap: 2%;margin: 0;margin-top: 0;align-items: center;z-index: 2;overflow-y: visible;} #about_area .maJimg{position:relative;display:flex;margin-bottom:15px;flex-direction: column;align-items: center;margin-left: 0;overflow: visible;} #about_area .maJimg a{object-fit:cover;display:flex;width:100%;position:relative;transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;} #about_area .maJimg img{border-radius: 0;z-index: 2;position: relative;margin: 0;width: 100%;object-fit: cover;width: 100%;animation: float 5s linear infinite;} #about_area .maJimg:before{content:"";position: absolute;width: 16vw;background: url(/images/22/animal.png);aspect-ratio: 443/385;top: -127px;z-index: 0;left: -65px;background-size: contain;background-repeat: no-repeat;transform-origin: right bottom;animation: sway2 5s linear infinite;} #about_area .maJimg:after{content:"";position:absolute;width:5vw;background:url(/images/22/flyiom.png);right:0;top:15%;aspect-ratio:19/16;background-size:contain;background-repeat:no-repeat} #about_area:before{content:"";background-image: url(/images/22/index_new_bg.png);position: absolute;width: 100%;height: 140px;background-size: cover;background-repeat: no-repeat;bottom: -139px;} @keyframes float{0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} } #about_area .maJinfoo{position:relative;display:flex;justify-content: flex-start;padding-left: 0;margin-bottom: 0vw;margin-top: 0px;margin-bottom: 135px;} #about_area .maJinfoo:before{content:"";background: url(/images/22/shake.png);aspect-ratio:125/81;width:9vw;position:absolute;right: 0vw;top: -7vw;background-position:50%;background-repeat:no-repeat;background-size:contain;animation: sway 4s linear infinite;} #about_area .maJinfoo .tctextbox{width: min(650px , 90%);margin-left: 0;display: flex;flex-direction: column;} #about_area .maJinfoo .tctextbox .row{width: 100%;margin-right: 0;margin-left: 0;} #about_area .maJinfoo .tctextbox .row .col-md-12{padding-right: 0;padding-left: 0;} #about_area .maJinfoo .tctextbox .JJtitle{display:flex;align-items:flex-start;margin-left: 76px;} #about_area .boomJJ{position:relative;display:flex;align-items:flex-end;margin-bottom: 3vw;} #about_area .topmvan .h3{font-weight:500;font-size:max(1.6*(1vw + 1vh) / 2,21px);text-transform:uppercase;color:#363636;line-height:140%} #about_area .VCRtop p{overflow:hidden;height: 65px;width: 90%;text-align:left;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;font-size: 16px;font-weight: 400;color:#1e1e1e;margin: 2vw 0 3vw;} #benefit_area{box-shadow:0 -9px 12px rgb(110 110 110 / 15%)} #benefit_area .footenbox{position:relative;padding:46px 105px 240px;border-radius:0 0 110px 0;background:#efefef;margin-left:13vw} #benefit_area .footenbox:before{content:"";position:absolute;width:26vw;height:100%;background:var(--secondary);left:-26vw;top:0} #benefit_area .footenbox:after{content:"";position:absolute;width:75vw;height:100%;top:0;left:0;z-index:-1;border-radius:0 0 110px 0;background:#efefef} #about_area .bigtitle{display:flex;gap:10px;padding:25px 0} #about_area .bigtitle *{font-size: max(3.4 * (1vw + 1vh) / 2,27px);} #flypaper03{bottom: 10%;right: -2%;} #flypaper03 *{transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;} #flypaper03 img{width: 7.5vw;} @keyframes sway { 0% {transform: rotate(4deg);} 50% {transform: rotate(-5deg);} 100% {transform: rotate(4deg);} } @keyframes sway2 { 0% {transform:translateY(0px) rotate(2deg);} 50% {transform:translateY(10px) rotate(-2deg);} 100% {transform:translateY(0px) rotate(2deg);} } #aboutFunc{padding: 150px 0 200px;background-image: url(/images/22/index_about_bg.jpg);background-repeat: no-repeat;background-position: 0;background-size: cover;background-attachment: fixed;} #aboutFunc:before{content:"";/* background-image: url(/images/22/index_new_bg.png); */position: absolute;width: 100%;background-size: cover;background-repeat: no-repeat;top: 0;height: 100%;background: linear-gradient(to bottom, #ffffff, #ffffff00);} #aboutFunc:after{content:"";background-image: url(/images/22/index_new_bg-2.png);position: absolute;width: 100%;aspect-ratio: 190/13;background-size: cover;background-repeat: no-repeat;bottom: 0;} #aboutFunc .speBox{overflow:hidden;position:relative;} #aboutFunc .youtubebox{width: calc(40% - 90px);padding: 40px 120px 0px 0;left: 0px;top:0;float: right;} #aboutFunc #youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;animation-name:fadeInLeft} #youtube .UTwo{position:relative;padding-bottom:56.25%;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%} #aboutFunc #NewsBox{float: left;width: 69%;} #aboutFunc #about .speBoxTitle{text-align:center;line-height:120%;font-size:40px} #aboutFunc #about .subBoxTitle{text-align:center;color:#5d5d5d;font-weight:400;font-size:20px;line-height:120%;margin:10px 0 50px} #aboutFunc #about .arts{text-align:center;color:#444;font-size:16px;line-height:180%;padding-bottom:40px} #aboutFunc #about .more{position:absolute;bottom:0;border-bottom:1px solid #7b7b7b;right:0;width:35%;padding-bottom:10px} #aboutFunc #about .more a{font-family:'Oswald',sans-serif;font-weight:400;color:#585858;font-size:20px;line-height:110%;display:inline-block;transition:all linear .2s} #product{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;padding: 210px 0 100px;} #product .speBox{position:relative} #prolay .p-box{margin:20px;position:relative} #prolay .p-box a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4} #prolay .p-box .p-border{position:relative;overflow:hidden} #prolay .p-box .p-border p{margin: 0px 0;} #prolay .p-box .p-border:after{content:'';display:block;width:80%;height:100%;position:absolute;left:50%;top:0;opacity:0;background:rgba(255,255,255,0.3);z-index:2;transition:all cubic-bezier(0.49,0.01,0,1) .7s} #prolay .p-box .p-border .photo{position:relative;z-index:2;background-repeat:no-repeat;background-position:50% 50%;background-size: cover;background-color: #fff;} #prolay .p-box .p-border .photo img{width:100%} #prolay .p-box .p-border .p-info{position:absolute;bottom: 0;left:15%;z-index:3;color: #ffffff;transition:all linear .4s;opacity:0;width: 100%;display: flex;width: 100%;flex-direction: column;align-items: center;} #prolay .p-box .p-border .p-info:after{height:100%;content:'';background-position:50%;background-size:auto;opacity:.9;position:absolute;left:-100%;top:0;width:100%;display:block;z-index:-1;transition:all linear .4s;background-color: rgba(0, 0, 0, 0.7);} #prolay .p-box .p-border .p-info .h3{font-size: 14px;line-height: 1;font-weight:400;background-color: rgb(28 75 34 / 71%);padding: 10px;text-align: center;display: flex;width: 100%;flex-direction: column;align-items: center;} #prolay .p-box .p-border .p-info .describe{font-size:15px;line-height:150%;color:#d4a66b;} #prolay .p-box .p-border .p-info .price{color:#d4a66b} #prolay .p-box .p-border .p-info .price span{font-size:13px;margin-right:15px} #prolay .p-box .p-border .p-info .price span.now{font-size:17px;color:#fff} .controller{position:relative;overflow:hidden} #prolay .p-box .h2{ margin: 15px 0 7px; font-size: 18px; letter-spacing: 1px; color: #424141; line-height: 1.5em; text-align: center; font-weight: 500; } #prolay .p-box p{ margin: 3px 0; font-size: 12px; letter-spacing: 1px; color: #6f6f6f; line-height: 1em; text-align: center; } .speBox .index-title{animation-name:fadeInLeft} .speBox .index-title{margin-bottom: 19px;line-height: 200%;display: flex;align-items: center;} .speBox .index-title p{color:#fff;float: left;} .speBox .index-title .h2{color: #444444;float: left;margin: 0 15px;text-transform: uppercase;font-size: 30px;} .speBox .index-title .h3 a{color: #868686;/* font-family: 'cwTeXKai', serif; */font-size: 20px;} #NewsBox{color:#fff;padding: 60px 0px;background-repeat:no-repeat;background-position:50% 100%;background-size:cover;} #NewsBox .speBox{width: 85%;margin: 0 auto;overflow: hidden;} #NewsBox .index-title .h4{color:#9cc4d7;} #NewsBox #news{width: 100%;transition: all linear .4s;display: flex;flex-direction: column;} #NewsBox #news .borderJ{overflow:hidden;position:relative;padding: 30px 0 30px 20px;border-bottom: 1px solid rgba(156, 156, 156, 0.1);} #NewsBox #news a{display:block;position:absolute;width:100%;height:100%;left:0;top:0;z-index:2;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out} #NewsBox #news .news-info{overflow:hidden;font-size:11pt} #NewsBox #news .news-info:after{content: "";position:absolute;background-image: url(/images/22/arrowJ.png);background-size: 30px;background-position: 50%;background-repeat: no-repeat;right:20px;bottom:calc(50% - 15px);width: 50px;height: 50px;text-align:center;border-radius:50%;background-color: rgba(66, 66, 66, 0.37);transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;color: #ffffff;display: flex;flex-direction: column;align-items: center;justify-content: center;} #NewsBox #news .news-info .news-bottom{float:left;overflow:hidden;width: 200px;} #NewsBox #news .news-info .h3{float:left;font-weight:400;font-size:1rem;width: calc(100% - 280px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color: #232323;letter-spacing: 1px;} #NewsBox #news .news-info p{float:left;color: #696969;} #NewsBox #news .news-info .catalog{line-height:150%;float:left;background: rgba(35, 35, 35, 0.48);padding:0 8px;border-radius: 35px;width: 40px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 20px;color: #ffffff;display: none;} .controller #bookBox,#bookBoxbg{width:50%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:absolute;right:0;top:203px;background-color:#000;height:calc(100% - 203px)} #bookBoxbg{background-image:url(/images/22/bookBoxbg.jpg)} #bookBox .speBox{position:absolute;top:-120px;left:calc(280px + 10%);z-index:3} #bookBox .speBox p a{color:#9a9a9a} #book{padding:80px} #book .bList{position:relative} #book .bList >div{z-index:3} #book .bList:before{content:'';display:block;background-image:url(/images/22/index_more_leave.png);background-repeat:no-repeat;background-position:100% 100%;width:360px;height:290px;position:absolute;right:0;bottom:100%;z-index:2;max-width:50%;background-size:contain} #book .bList:after{content:'';display:block;background-image:url(/images/22/index_more_icon.png);background-repeat:no-repeat;background-position:50%;width:240px;height:200px;position:absolute;left:0;bottom:0;z-index:2} #book .mofd .photo{background-size:cover} #book .mofd .h3{padding:50px 0;text-align:right} #book .mofd .h3 a{display:inline-block;color:#fff;font-weight:400;font-size:18px;line-height:110%;border-bottom:1px solid rgba(255,255,255,0.27);padding:10px;padding-right:170px} #freebox #freeboxlist{overflow:hidden} #freebox #freeboxlist >div{display:inline-block;width:calc(100% / 3);margin-right:-4px} #freebox #freeboxlist .free{padding:70px} #freebox #freeboxlist .free .h3{text-align:center;font-size:30px;line-height:120%;color:#2b2929;margin-bottom:20px} #freebox #freeboxlist .free p{text-align:center;color:#545454;font-size:16px;line-height:160%} #product .speBox{margin: 0 auto;overflow: hidden;} #product a.fmlink{ margin-top: 0; } #product .speBox .index-title{line-height: 200%;margin-bottom: 0;} #product .index-title .h4{color:#9cc4d7;} #product .speBox .index-title p{color:#fff;float: left;background: #faf6f3;} #product .speBox .index-title .h2{} #product .speBox .index-title .h3 a{color: #868686;/* font-family: 'cwTeXKai', serif; */font-size: 20px;background: #faf6f3;padding: 0 15px 0 5px;} #product .speBox .index-title::after { content: ''; width: 100%; height: 10px; /* border-bottom: 1px dashed #e5e5e5; */ position: absolute; top: 10px; left: 0; z-index: -1; background: url(/images/22/separate_line.png) top repeat-x; } #product .flytxt{} #product .titleSet{} #product .titleSet .speBoxTitle{letter-spacing:12px;margin-top:-8px;text-align:center;-moz-transform:rotate(-90deg);} #product .titleSet .subBoxTitle{font-size:30px;line-height:110%;letter-spacing:.6em;vertical-align:top;text-align:center;} #prolay{/* width:calc(100% - 248px); */margin: auto;} #aboutFunc #about .more a:hover,#bookBox .speBox p a:hover{letter-spacing:.2em} #NewsBox #news .borderJ:hover .news-info:after{right:10px} #NewsBox #news .borderJ:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background: rgb(255 255 255 / 15%);transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);} #NewsBox #news .borderJ:hover:after{transform:scale(1,1);transform-origin:left center 0} #NewsBox .speBox .index-title .h3 a:hover{border:1px solid rgba(242,183,68,0)} #Courses_area{position: relative;padding: 100px 0 100px;background: #ffffff;margin: 100px 0 200px;} #Courses_area:before{content:"";background-image: url(/images/22/index_new_bg.png);position: absolute;width: 100%;height: 130px;background-size: cover;background-repeat: no-repeat;bottom: -129px;} #Courses_area:after{content:"";background-image: url(/images/22/index_new_bg-2.png);position: absolute;width: 100%;height: 120px;background-size: cover;background-repeat: no-repeat;top: -120px;} #Courses_area .cours_box{display:grid;grid-template-columns: repeat(3,1fr);gap: 30px;margin: 30px 0;} #Courses_area .center_box{display:flex;flex-direction: column;align-items: center;} #Courses_area .courinfo .courtitle{display:flex;padding: 10px;border: #b1b1b1 2px solid;border-radius: 10px;} #Courses_area .cours_box .coitem{display:flex;flex-direction: column;align-items: center;background: #ffffff;padding: 20px;gap: 20px;} #Courses_area .cours_box .coitem:hover .courtitle{border: #247831 2px solid;background: #247831;color: white;} @media screen and (min-width: 1025px) { #aboutFunc .youtubebox{ width: 30%; padding: 52px 0px 0px 0; } #prolay .p-box:hover .p-border:after{width:45%;left:0;opacity:1} #prolay .p-box:hover .p-border .p-info:after{left:0} #prolay .p-box .p-border .p-info{left:0;opacity:1;width: 100%;} } @media screen and (max-width: 1470px) { #prolay .p-box .p-border .p-info {} #about_area .maJimg:before{width: 15vw;top: -4vw;} #about_area{padding: 130px 0 100px;} #about_area:before{bottom: -90px;} #about_area .workframe{grid-template-columns: 48% 55%;margin-top: 0vw;display:grid; } #about_area:after{width:32vw;bottom:-22vw} #about_area .maJinfoo .tctextbox .tminfo p{font-size:16px} #about_area #VCRabout .VCRbottom p.matitle{margin:0; font-size:16px} #about_area .maJinfoo .tctextbox{width: min(540px,100%);} #about_area .maJinfoo{padding-right: 0;margin-bottom:1vw} #about_area .topmvan .h3{font-size:max(1*(1vw + 1vh) / 2,17px)} #about_area .maJimg:after{right:1vw} #flypaper03{bottom: -12%;right: -2%;} #product{padding: 160px 0 95px;} #Courses_area{padding: 60px 0 30px;margin: 80px 0 160px;} } @media screen and (max-width: 1280px) { #book{padding:80px 0 80px 80px} #NewsBox .speBox{width:80%} .speBox .index-title{float:none;margin:0 0 50px;width:300px;} #Courses_area .center_box .index-title{ width: 100%; } #NewsBox #news{float:none;width:100%;margin:0} #prolay .p-box .p-border .p-info{} #about_area:after{display:none;} } @media screen and (max-width: 1199px) { .controller #bookBox{width:100%;position:initial;height:auto} #bookBoxbg{display:none} #book .bList:before{width:200px;height:160px} #bookBox .speBox{position:initial;display:block;padding-top:60px} #bookBox .speBox .h2{color:#fff} #bookBox .speBox p{text-align:center} #book{padding:40px 20px} #book .bList:after{background-size:contain;width:150px;background-position:50% 100%} } @media screen and (max-width: 1024px) { #tQtitle_area{display: flex;flex-direction: column;} #tQtitle_area .mootbox{margin-bottom: 0;} #tQtitle_area .mootbox .motext{position: relative;left: auto;bottom: auto;} #flypaper03{bottom: 0;right: 4%;} #aboutFunc{padding:10px 0} #aboutFunc .speBox{min-height:initial} #aboutFunc .youtubebox{width:calc(100% - 160px);padding:50px;margin:30px;position:initial} #aboutFunc #about{width:calc(100% - 60px);padding:50px 30px} #aboutFunc #about .speBoxTitle,#product .titleSet .speBoxTitle{font-size:32px} #aboutFunc #about .subBoxTitle,#product .titleSet .subBoxTitle a{font-size:16px;margin:0 0 30px} #product .flytxt{text-align:center;font-size:17px;line-height:120%;color:#2d2c2c} #prolay{margin-top: 50px;width: 85%;} #product .titleSet .speBoxTitle{text-align:center} #product .titleSet .subBoxTitle{text-align:center;margin-top:10px} #product .titleSet .subBoxTitle a{color:#696969;font-weight:400;display:block;margin-bottom:20px} #prolay .p-box .p-border:after{width:45%;left:0;opacity:1} #prolay .p-box .p-border .p-info:after{left:0} #prolay .p-box .p-border .p-info{left:0;opacity:1;} #freebox #freeboxlist >div{width:100%;margin-right:0} #aboutFunc #NewsBox {width: 100%;} #about_area .maJimg:before{width: 26vw;height:300px;left: 17vw;top: -9vw;} #about_area .maJinfoo:before{width: 12vw;right: 85vw;top: 0vw;} #about_area .workframe{display:flex;flex-direction:column;width: 90%;margin: 0 auto;align-items: center;} #about_area .maJimg , #about_area .maJimg a{width:100%;display: flex!important;flex-direction:column;align-items:center;box-shadow: none;transform: skewX(0deg);right: auto;margin: 0 auto;} #about_area .maJinfoo{width:100%;margin-top:50px;display: flex;justify-content: center;margin-bottom: 20px;padding-right: 0;} #about_area{padding:60px 0 49px;gap: 50px;} #about_area:before{content:"";height: 81%;background-size: cover;} #about_area .maJimg img{width:min(485px,100%);object-fit: cover;height: auto;} #about_area .maJinfoo .tctextbox{display: flex;flex-direction: column;align-items: center;width: min(600px, 100%);} #about_area .maJinfoo .tctextbox .JJtitle , .tminfo{margin-left: 0;display: flex;flex-direction: column;align-items: center;} #about_area .maJinfoo .tctextbox .tminfo p{width: 100%;} } @media screen and (max-width: 980px) { #Courses_area .cours_box{grid-template-columns: repeat(2, 1fr);gap: 10px;} #Courses_area .cours_box .coitem{padding: 10px;} #prolay .p-box .p-border .photo img{ aspect-ratio: 1/1; object-fit: cover; } } @media screen and (max-width: 768px) { #prolay .p-box .p-border .p-info .h3{font-size: 15px;} #prolay .p-box .p-border .p-info{} #prolay .p-box .p-border:after{width: 0%;} #prolay .p-box .p-border .p-info .describe{height:46px;overflow:hidden} #prolay .p-box .p-border .p-info .price span{display:block} #freebox #freeboxlist .free{padding:70px 50px} #NewsBox .speBox{width:90%} #NewsBox #news .news-info .news-bottom{width:100%} #NewsBox #news .news-info .h3{width:calc(100% - 60px);margin-top:5px} #NewsBox{padding: 70px 0 10px;} #NewsBox #news .borderJ{padding:15px 0 15px 20px} #Courses_area:before , #Courses_area:after{display: none;} #Courses_area{margin:0;} #Courses_area .cours_box{display:flex;flex-direction: column;} } @media screen and (max-width: 640px) { #aboutFunc .youtubebox{width: 100%;padding:20px;margin: 46px 0;} #aboutFunc #about .more{width:50%} #aboutFunc #about .more a{font-size:17px} #prolay .p-box .p-border .p-info{} #book .mofd .h3{padding:30px 0 50px} #prolay .p-box .p-border .p-info{} #prolay .p-box .p-border:after{display:none} #prolay .p-box{margin:10px} #product {padding-bottom: 0px;padding-top: 50px;} #about_area .maJimg{position:relative;top:0;margin: 0 auto;width: 100%;margin-bottom:0} #about_area .maJimg a{margin: 0;} #about_area .maJimg a::-webkit-scrollbar{width:5px} #about_area .maJimg a::-webkit-scrollbar-track{background:#116537} #about_area .maJimg a::-webkit-scrollbar-thumb{background:#003c1e} #about_area .maJimg img{max-width:300%;margin: 0 auto;} #about_area .maJinfoo{width: 100%;margin-top:20px;padding-right: 0;padding-left: 0;} #about_area .maJinfoo .tctextbox{width:100%;margin: 15px auto 2vw;display: flex;} #about_area{display:flex;flex-direction:column;height:auto;padding: 0px 0 30px;gap: 55px;} #about_area:after,#book_area:after{display:none} } @media screen and (max-width: 550px){ #about_area .boomJJ{display: flex;align-items: flex-start;} #flypaper03 img{width: 31vw;} #flypaper03{bottom: -119px;} } @media screen and (max-width: 480px) { #book .bList:after{background-size:100%;width:80px;background-position:100% 100%} #book .mofd .h3 a{padding-right:100px} #book .mofd .h3{padding:20px 0 30px} #prolay .p-box{margin:15px} #prolay .p-box .p-border .p-info .h3{font-size: 14px;} #prolay .p-box .p-border .p-info .describe{margin:10px 0} #freebox #freeboxlist .free{padding:50px 30px} #freebox #freeboxlist .free .h3{font-size:24px} #prolay .p-box .p-border .p-info {width: 100%;top: auto;bottom: 0;} #about_area .maJinfoo:before{top: -127vw;right: 2vw;width: 27vw;} #about_area .maJinfoo .tctextbox .tminfo p{height:auto;-webkit-line-clamp: 3;margin: 6px 0 0px;font-size:16px;width:100%;font-weight: 400;} #about_area .boomJJ{display:flex;justify-content:flex-start;margin-top: 10px;} #NewsBox #news .news-info:after{width:30px;height:30px;background-size: 13px;} #NewsBox #news .borderJ:hover .news-info:after{right:0;} #NewsBox #news .borderJ{padding: 18px 0;} .boomJJ{display:flex;flex-direction: column;align-items: center;} #aboutFunc{background-attachment:unset;} .speBox .index-title{margin-bottom:20px;} }