.wow{animation-duration:.7s;animation-name:fadeInUp}
#freebox{position:relative;background-image: url(/images/45/c1_bg.png);background-repeat:no-repeat;background-position: 50% 70%;background-size: 100%;overflow:hidden;padding-top: 130px;padding-bottom: 80px;}
#freebox:after{content:'';display:block;width:100%;height:100%;z-index:1;position:absolute;top:0;left:0;}
#freebox .controller{overflow:hidden;margin-left: 15%;position:relative;z-index:2;max-width: 492px;position: relative;}
#freebox .index-title{margin: 40px 0 0px 0;position: relative;font-size: 32pt;}
#freebox .index-title h2{
  font-size: 30px;
}
#content{
  position:relative;
  z-index:15;
  }
  #product_list{
    position: relative;
    width: 100%;
    margin-left: 0%;
}
#product_list .slick-track .item{
    margin: 0 5px;
    display: flex;
    flex-direction: column;
}
#product_list .slick-track  .info{
    width: 100%;
}
#product_list .slick-track .G-lan{
    display: flex;
    width: 100%;
}
#product_list .slick-track .G-lan article{
    display: none;
}
#product_list .slick-track  .title{letter-spacing: 1px;padding: 0px 20px 10px;text-align: left;font-weight: bold;border-bottom: 1px solid #d8d8d8;display: flex;-ms-flex-align: end;-ms-flex-pack: justify;justify-content: space-between;font-size: 22px;font-weight: 700;color: #2f2f2f;transition: all 0.4s ease;width: 100%;align-items: flex-end;}
#product_list .slick-track  .title .num {font-size: 52px;font-weight: 700;line-height: 100%;color: #d8d8d8;-webkit-transform: translateY(5px);transform: translateY(5px);transition: all 0.4s ease;-webkit-text-stroke: 1px rgb(47 47 47 / 20%);-webkit-text-fill-color: transparent;}
#product_list .slick-track  .title .word{font-size: 29px;}
#product_list .slick-track  .title .word .txt_clamp{
    height: auto;
    font-size: 22px;
}
#product_list .slick-track  .title .word:first-letter { margin-right: 1px;  color: #bc6a68; }


#product .subBoxTitle{
    display: flex;
    margin: 33px 0px;
}
#product .leftT .index-title h2 {
    margin: 0px 0 30px 0;
    position: relative;
    font-size: 26pt;
}
#freebox .index-title::before {
    width: 11vw;
    -webkit-transition: all 1000ms cubic-bezier(0.785,0.135,0.150,0.860);
    transition: all 1000ms cubic-bezier(0.785,0.135,0.150,0.860);
}
#freebox .index-title::before, #product .leftT .index-title h2::before {
    background: #ffe000;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-124%,0%,0) rotate(0deg);
    content: '';
    position: absolute;
    left: 320px;
    top: 102%;
    margin-top: -18.5px;
    z-index: -1;
    width: 260px;
    height: 15px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#freeboxlist{margin-bottom: 70px;}
#freeboxlist .free{overflow:hidden;margin:40px 0}
#freeboxlist .free b {}
#freeboxlist .txt {margin-bottom: 50px;}
#freeboxlist .free b a, .btn.style,#aboutFunc .index-title h3 a{transition: all linear .3s;display: flex;padding: 8px 55px;background-color: #b46963;font-size: 12pt;color: #ffffff;/* border: 1px solid #cfcfcf; */position: relative;border-radius: 55px;z-index: 1;flex-direction: column;justify-content: center;align-items: center;}
#freeboxlist .free b a:before, .index-title h3 a:before, #aboutFunc .index-title h3 a:before, #product .subBoxTitle a:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: #8b3e38;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 55px;
  overflow: hidden;
}

#freeboxlist .free b a:hover {
  color: #fff;
}

#freeboxlist .free b a:hover:before ,#product .subBoxTitle a:hover:before {
  width: 100%;
}

#freeboxlist .free .txt h3{margin-bottom:15px;font-size: 17px;letter-spacing: 0.5px;line-height: 180%;color: rgb(68, 68, 68);}
#freeboxlist .free .txt p{color:#414141;font-size: 17px;font-weight: 500;line-height: 1.8;letter-spacing: 0.5px;}
#product{background-repeat:no-repeat;background-position:0 100%;background-size:cover;padding: 30px 0 80px;position: relative;}
#product .leftT .index-title {
    padding: 0px 0;
    display: flex;
    width: 100%;
    flex-direction: column;

    justify-content: center;
    margin-left: 0%;
}
#product .leftT .index-title .free.wow{overflow: hidden;padding: 10px 0;}
#product .leftT .index-title h3.subBoxTitle{
    margin: 40px 0;
}
#product .leftT .index-title .ic{float:left;position:relative;margin:7px;}
#product .leftT .index-title .txt{float: left;width: calc(100% - 90px);margin: 10px 0  0px 10px;}
#product .leftT .index-title .txt p{
    color: #434343;
    font-size: 13pt;
    font-weight: 600;
}
#product .leftT .index-title .ic:after{content:'';background-image:url(/images/17/linePatten.png);display:block;position:absolute;width:100%;height:100%;opacity:.25;background-size:4px;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;top:7px;left:7px;}
#product .leftT .index-title .ic b{display:block;border: 1px solid #e7e7e6;padding:13px 10px;font-family:'Anton',sans-serif;font-weight:400;font-size:12pt;color: #444444;position:relative;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;}
#product .leftT{overflow: hidden;position: relative;width: 1570px;margin: 0 auto;max-width: 95%;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;}
#product .leftT .abtxt {
    background: linear-gradient(to right, rgb(250, 250, 250) 50%, rgba(248, 248, 248, 0.7) 100%);
    position: relative;
    margin-top: 50px;
    z-index: 1;
    color: #fff;
    width: 50%;
    padding-left: 2.5%;
    padding-right: 2.5%;
}
#product .leftT .column.half {
    width: 45%;
    position: relative;
    z-index: 5;
    display: flex;
    }
#product .rightBox{width:calc(50% - 4px);display:inline-block}
#product .leftT .index-title,#NewsBox .speBox .index-title,#aboutFunc .speBox{animation-name:fadeInLeft}
#product .leftT .index-title p {color: #3333337d;font-size: 13pt;font-weight: 700;letter-spacing: 0.25em;margin-top: 15px;}
#product .leftT .index-title h4 {color: #e61111;font-size: 18pt;font-weight: 700;}
#product #prolay .pro-list >div{width:50%;float:left}
#product #prolay .p-box{position:relative;background:linear-gradient(to right,rgba(255,255,255,1) 2%,rgba(232,232,232,1) 100%);z-index:1}
#product #prolay .p-box a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}
#product #prolay .p-box .p-border{position:relative;overflow:hidden;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out}
#product #prolay .p-box .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#eff4f6;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out}
#product #prolay .p-box .photo img{position:relative}
#product #prolay .p-box .p-info{position:absolute;top:0;padding:25px;font-size:11pt;width:calc(100% - 50px)}
#product #prolay .p-box .p-info h3{margin-bottom:10px;font-size:1.4rem;line-height:110%;color:#16696c}
#product #prolay .p-box .p-info .describe{line-height:130%;color:#777;overflow:hidden;height:28pt;width:60%}
#product #prolay .p-box .p-info .price{overflow:hidden;margin-top:70px}
#product #prolay .p-box .p-info .price span{font-size:1.1rem;color:#de7f2e;display:block}
#product #prolay .p-box .p-info .price span.old{font-size:.7rem;color:#9c9c9c}
#NewsBox{color:#fff;padding: 20px 0;background-repeat:no-repeat;background-position:50% 100%;background-size:cover;position: relative;}
#NewsBox .speBox{width: 1280px;margin:0 auto;overflow:hidden;}
#NewsBox .speBox .index-title{}
#NewsBox .index-title h4{color:#9cc4d7;display: none;}
#NewsBox .speBox .index-title p{color: #bc6a68;line-height: 150%;font-size: 32pt;text-align: center;font-family: sans-serif;}
#NewsBox .speBox .index-title h2{color: #717171;text-align: center;font-size: 17pt;margin: 0px 0 10px 0;}
#NewsBox .speBox .index-title h3.subBoxTitle {text-align: center;}
#NewsBox .speBox .index-title h3 a{color: #4a4a4a;font-size: 11pt;}
#NewsBox #news{}
#NewsBox #news ul li {
    position: relative;
    float: left;
    width: 33%;
    margin: 20px 0;
}
#NewsBox #news .border{overflow:hidden;position:relative;padding: 20px 20px;border-bottom:1px solid rgba(255,255,255,0.1);}
#NewsBox #news a{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;overflow: hidden;background-position: 50%;background-repeat: no-repeat;background-size: cover;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
#NewsBox #news .news-info{overflow:hidden;font-size: 10pt;}
#NewsBox #news .news-info .newstop {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
#NewsBox #news .news-info:after{content:'>';display:block;position:absolute;right: 160px;bottom: calc(50% - -65px);width:30px;height:30px;text-align:center;border-radius:50%;background: rgba(116, 116, 116, 0.1);line-height:30px;font-size:8pt;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;color: #000000;display: none;}
#NewsBox #news .news-info .news-bottom{width: 56%;z-index: 10;margin-top: 10px;font-family: 'Krub', sans-serif;font-weight: bold;color: #010101;display: flex;flex-direction: column;}
#NewsBox #news .news-info .newPhoto {
    margin: 0 auto;
    float: right;
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
a.photo {
    overflow: hidden;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: block;
}
a.photo img {
    width: 100%;
    max-width: inherit;
}
#NewsBox #news .news-info h3,#NewsBox #news .news-info h4{font-size: 17px;color: #616161;font-weight: 400;max-height: initial;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;margin: 5px 0;line-height: 170%;}
#NewsBox #news .news-info p.borrderT{color: #868686;font-size: 15px;margin: 11px 0 0px 0;letter-spacing: .07em;border-bottom: #bcbcbc 1px solid;}
#NewsBox #news .news-info .catalog{line-height:150%;background:rgba(255,255,255,0.2);font-size: 20px;color: #000000;max-height: initial;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;letter-spacing: 0em;margin-top: 0;overflow: hidden;margin: 10px 0;height: 40px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#NewsBox #news .news-info .catalog a{
  font-size:24px;
}
#bookBox{overflow:hidden;background-repeat:no-repeat;background-position:50% 100%;background-size:cover;background-color:#f3f3f3}
#bookBox #bookTitle{width:50%;display:inline-block;margin-right:-4px}
#bookBox #bookTitle .index-title{animation-name:fadeInRight}
#bookBox #book{width:50%;display:inline-block}
#bookBox #book .slick-prev{background:url(/images/17/index-sccrow-p.png);z-index:5;right:40px;bottom:0;top:inherit;width:40px;height:40px;left:inherit;left:initial;transform:none;background-repeat:no-repeat;background-position:50% 50%;background-color:rgba(27,35,53,0.5607843137254902);background-size:25px}
#bookBox #book .slick-next{background:url(/images/17/index-sccrow-n.png);background-color:rgba(27,35,53,0.5607843137254902);z-index:5;background-size:25px;right:0;background-repeat:no-repeat;background-position:50% 50%;bottom:0;top:inherit;top:initial;width:40px;height:40px;transform:none}
#bookBox #book .slick-prev:before,#bookBox #book .slick-next:before{display:none}
#bookBox #book .mofd{position:relative}
#bookBox #book .mofd .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#fcfcfc;background-size:cover}
#bookBox #book .mofd h3{top:calc(50% - 20pt);position:absolute;left:0;width:100%;text-align:center}
#bookBox #book .mofd h3 a{display:block;color:#fff;text-shadow:0 0 5px rgba(46,46,46,0.66);font-size:40pt;line-height:120%}
#bookBox #book .mofd h3 a:first-letter{color:#28bfa6}
#aboutFunc{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;position:relative;background-color: #b06664;margin: 70px 0 0;}

#aboutFunc >div{margin: 0 0% 0 0;width: 23%;display: inline-block;}
#aboutFunc .aboutImg{
    width: 61%;
    margin: 0 -4% 0 -4%;
    }

#aboutFunc .aboutImg:after {
  padding-top: 12vw;
  background-image: url("data:image/svg+xml,%3Csvg data-name='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1919.5 204.8'%3E%3Cpath d='M0 204.3c83.53-58.16 182.92-102.41 315-118 53.37-2.7 105.36-1.92 153.5 8.5 43.17 6.79 89.73 2.89 142-19l128-55c78.64-30.08 157.31-28.2 236 10 104.06 38.73 205.92 66.63 303 71 100.18 7.86 205.56-11 315-51 112.78-20.31 222.42.25 327 87v67z' fill='%23fff'/%3E%3C/svg%3E");
  top: auto;
  bottom: -122px;
  content: "";
  transform: scaleX(1.8);
  /* left: 74%; */
  width: 100%;
  position: absolute;
  }

#aboutFunc .aboutImg2{
    width: 26.3%;
    margin: 0 0% 0 0%;
    box-shadow: 11px 7px 20px 0px rgba(0, 0, 0, 0.19);
    float: right;
    z-index: -1;
    }    
#aboutFunc .aboutImg2 a.photo{background-image: url(/images/45/img002.jpg);}

a.photo, .bgBox {
    overflow: hidden;
    background: no-repeat 50% / cover;
    display: block;
    background-position: 50% 6%;
}
#aboutFunc .speBox{/* float: right; */position:relative;text-align:right;margin: 0 0px 0 0%;padding: 0px;width: 20%;opacity: 1;transform: translateZ(0);}
#aboutFunc .index-title{text-align: center;overflow: hidden;display: flex;flex-direction: column;}
#aboutFunc .speBox::before {
    content: '';
    width: calc(100% + 60px);
    height: calc(100% + 660px);
    background: #bc6a68;
    box-shadow: 7px 0 30px rgb(108 108 108 / 71%);
    position: absolute;
    top: -180px;
    left: -30px;
    -webkit-transform: skewX(-6deg);
    transform: skewX(-6deg);
    z-index: -1;
}
*:before, *:after {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
livedemo00.template-help:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:before, :after {
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;

    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}


#aboutFunc .index-title p{color:#fff;text-align: center;margin: 20px;}
#aboutFunc .index-title h2{color:#fff;font-size:32pt;text-align: center;font-family: sans-serif;}
#aboutFunc .index-title h4{color: rgb(255, 255, 255);text-align: center;font-size: 16px;display: flex;justify-content: center;margin: 20px 0;}
#aboutFunc .index-title h3 a{background-color: #ffffff;color: #b46963;}

#aboutFunc #youtube{position:relative;margin-top:20px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#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%}
#product #prolay .p-box:hover{z-index:2;border-radius:5px}
#product #prolay .p-box .p-border:after{content:'';display:block;width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;z-index:2;top:0;left:0;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;transform-style:preserve-3d;border:rgba(35,135,158,0) 0 solid}
#product #prolay .p-box:hover .p-border:after{border:#23879e 5px solid;border-radius:5px;-webkit-box-shadow:10px 10px 44px 2px rgba(0,0,0,0.09);border-bottom-right-radius:100px}
#product #prolay .p-box .p-border:before{content:'>';display:block;position:absolute;z-index:2;bottom:8px;right:5px;color:#fff;transition:.3s ease-in-out;opacity:0;right:0}
#product #prolay .p-box:hover .p-border:before{right:15px;opacity:1}
#product #prolay .p-box .photo img:before{content:'';display:block;width:100%;height:100%;position:absolute;z-index:1;top:0;left:0;background:#000}
#product #prolay .p-box:hover .p-border{background:#23879e;border-radius:5px}
#product #prolay .p-box:hover .photo{border-bottom-right-radius:100px}

.rightBox.imgSkirt::after{right:0;transform-origin:right top}
#book.imgSkirt::after{left:0}
.open.imgSkirt::after,#book.open.imgSkirt::after{width:0}
#SeoStarRating{
  display:flex;
  justify-content: center;
  margin-top: 20px;
}
.webBox #SeoStarRating font , .webBox #SeoStarRating font *{
    color: white;
}
.webBox #SeoStarRating font:last-child{
  color:aliceblue;
}
@media screen and (min-width: 1025px) {
#freeboxlist .free:hover .ic b{-webkit-transform:translate(-3px,-3px);transform:translate(-3px,-3px)}
#freeboxlist .free:hover .ic:after{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}
#NewsBox #news .border:hover .news-info:after{right:10px;}
#NewsBox #news .news-info:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background: rgba(171, 171, 171, 0.05);transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);border-radius: 10%;display: none;}
#NewsBox #news .news-info:hover:after{transform:scale(1,1);transform-origin:left center 0;z-index: 0;}
#aboutFunc .index-title h3 a:hover,#NewsBox .speBox .index-title h3 a:hover{}
#bookBox #book .slick-prev:hover,#bookBox #book .slick-next:hover{background-color:rgba(27,35,53,0.8)}
}
@media screen and (max-width: 1440px) {
#freebox .controller{width: 32%;margin-right:5%;margin-left: 10%;}
#freebox {background-position: 30% -80%;background-size: 100%;padding-top: 80px;padding-bottom: 30px;}
#product .leftT{width: 94%;}
#product .rightBox{width:calc(60% - 4px)}
#product_list .slick-track .title{
    padding: 5px 5px;
}
}
@media screen and (max-width: 1366px){
  #aboutFunc{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
#aboutFunc .aboutImg {
    width: 63%;
    margin: 0 0% 0 0%;
    margin-left: -11%;
}
#aboutFunc .aboutImg a{}
#aboutFunc .aboutImg a{background-position: 50% 8%;}
#aboutFunc .aboutImg:after{
    left: 0%;
    bottom: -86px;
    transform: scaleX(1.7);
    z-index: 2;
}
#aboutFunc .speBox{width: 30%;padding: 0px 20px;position: absolute;left: 41%;z-index: 3;display: flex;flex-direction: column;justify-content: center;height: 100%;}
#aboutFunc .speBox::before {

}
#aboutFunc .index-title h2{
    font-size: 45px;
    margin-top: 12px;
}
#aboutFunc .index-title p{
    line-height: 120%;
    margin: 0 auto;
}
#aboutFunc .index-title h4{
  margin: 10px auto;
}
#aboutFunc .aboutImg2 {
    width: 27%;
    margin: 0 0% 0 0%;
    float: none;
    z-index: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
}
@media screen and (max-width: 1280px) {
#freebox .controller{
    width: 50%;
}
#freeboxlist{
    width: 90%;
}
#product .leftT{width:100%;padding: 20px 0;}
#product .rightBox{width:100%}
#NewsBox .speBox{width:80%}
#NewsBox .speBox .index-title{/* float:none; *//* margin:0 0 50px; *//* width:300px */}
#NewsBox #news{float:none;width:100%;margin:0}
#product .leftT .column.half {
    width: 20%;
    position: relative;
    z-index: 5;
    display: none;
}
#product{
    padding: 10px 0;
}
#product .leftT .abtxt {

    top: 0px;
    z-index: 1;
    color: #fff;
    width: 100%;
    right: 0;
    margin-top: 0;
}
#product .subBoxTitle{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#product .leftT .index-title h3.subBoxTitle {
    margin: 10px 0;
}
#aboutFunc .aboutImg {
    width: 100%;
    margin: 0 0% 0 0%;
}
#aboutFunc .aboutImg{margin-left: -22%;}
#aboutFunc .speBox::before {
    content: '';
    width: calc(100% + 60px);
    height: calc(100% + 160px);
    box-shadow: 7px 0 30px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: -5px;
    left: -20px;
    -webkit-transform: skewX(-6deg);
    transform: skewX(-6deg);
    z-index: -1;
}
#aboutFunc .index-title{width: 90%;padding: 30px;}
#aboutFunc .aboutImg2 {
    width: 43%;
    padding: 0 0% 0 0%;
    float: none;
}
#NewsBox{
    padding: 150px 0;
}
}
@media screen and (max-width: 1024px) {
#freebox .controller,#comprehensive{width: 83%;margin-right: 0%;margin-left: 8%;}
#freeboxlist .free .txt p{width:100%}
#freeboxlist{margin-bottom: 0px;}
#freeboxlist .txt{
    width: 95%;
    margin: 20px auto;
}
#bookBox{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}
#bookBox #book{width:100%;order:2}
#bookBox #bookTitle{width:100%;margin:0;padding:50px 0;order:1}
#aboutFunc .speBox{width: 41%;}
#product .leftT .column.half,#product .leftT .abtxt{
    width: 100%;
    position: inherit;
}
#product .leftT .index-title {
    padding: 30px 40px;
    display: block;
    width: 90%;
}
#aboutFunc .aboutImg:after{
  display:none;
}
#freebox .controller{width: 85%;margin-right: 0%;margin-left: 0%;max-width: 100%;margin: 0 auto;background-color: #fafafa;padding: 5%;}
#freebox {background-position: 30% 40%;background-size: 120%;padding-top: 20px;padding-bottom: 30px;background-image: unset;}
#freeboxlist .free b{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#freeboxlist .free b a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
}
@media screen and (max-width: 870px) {
  #aboutFunc{
    flex-direction: column;
    align-items: center;
}
  #aboutFunc .speBox{
    width: 100%;
    position: relative;
    left: 0;
    padding: 20px 0;
  }
  #aboutFunc .aboutImg{
    margin-left: 0;
  }
  #aboutFunc .aboutImg2{display:none;}
}
@media screen and (max-width: 768px) {
#product #prolay .pro-list >div{width:100%}
#NewsBox .speBox{width:90%}
#NewsBox #news .news-info h3{width:calc(100% - 60px);margin-top:5px}
#NewsBox{padding: 50px 0 0;}
#NewsBox #news .border{padding: 15px 0 15px 0px;}
#aboutFunc .speBox{width: 100%;}
#aboutFunc .index-title{width: 90%;margin:0;margin-left: 0%;}
#aboutFunc .speBox:after{border-width:100vh 100px 0 0;right:-100px}
#product {
    padding: 0px 0;
}
#aboutFunc {
    margin: 30px 0 0;
}
#aboutFunc .speBox::before,#aboutFunc .aboutImg2 {
    display: none;
}
}
@media screen and (max-width: 640px) {
#aboutFunc .index-title h2{font-size:24pt}
#bookBox #book .mofd h3{top:calc(50% - 11pt)}
#bookBox #book .mofd h3 a{font-size:22pt}
#freeboxlist .free b a, .btn.style, #aboutFunc .index-title h3 a {
    transition: all linear .3s;
    padding: 10px 35px;
    /* background-color: #e1002e; */
    width: 58%;
    margin-top: 10px;
}
}
@media screen and (max-width: 480px) {
#freeboxlist{margin-bottom:50px;}
#freebox .index-title h2{
    font-size: 28px;
    line-height: 150%;
    word-break: keep-all;
    -webkit-word-break: keep-all;
    margin-top: 10px;
    word-wrap: break-word;
    -webkit-word-wrap:break-word;
    width: 100%;
    overflow: hidden;
  }
  #freeboxlist .free b a, .btn.style, #aboutFunc .index-title h3 a{
    margin: 0 auto;
}
  #product .leftT .column.half{
    display: flex;
    flex-direction: column;
    align-items: center;
}
  #NewsBox #news .news-info .newstop{
    display: flex;
    flex-direction: column;
  }
  #NewsBox #news .news-info .news-bottom{
    width: 100%;
}
#freebox .controller,#comprehensive{width: 83%;margin-right: 0%;margin-left: 8%;background-color: unset;position: relative;overflow: hidden;}

#freeboxlist .free .ic{float:none;margin:7px auto;display:block;width:52px}
#freeboxlist .free .txt{float:none;width: 100%;margin: 0px auto 25px;}
#freeboxlist .free .txt h3,#freeboxlist .free .txt p{text-align: justify;}
#freebox .index-title{margin:0 auto;overflow: hidden;}
#aboutFunc .speBox{width:100%;padding: 0px 0;}
#aboutFunc .index-title{width:80%}
#freebox {
    background-position: 92% 112%;
    background-size: 200%;
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 318px;
    background-image: url(/images/45/c1_bg.png);
    position: relative;
}
#product_list .slick-track .G-lan{

    width: 80%;
}

}