#home{margin:0 0 40px 0;}




#home .sect20{margin:70px 0 0 0;}
#home .sect20 .grid{display:grid;grid-template-columns:2fr 2fr 1fr;grid-gap:15px;}
#home .sect20 .grid .s{}
#home .sect20 .grid .s.s1{padding:20px;background:#fff;}
#home .sect20 .grid .s.s1 .box{display:block;padding:15px;margin:0 0 5px 0;background:#f6f2e5;}
#home .sect20 .grid .s.s1 .box.rangewrap{}
#home .sect20 .grid .s.s1 .box.rangewrap .over{display:grid;grid-template-columns:auto auto;grid-gap:10px;align-items:center;}
#home .sect20 .grid .s.s1 .box.rangewrap .over .title{}
#home .sect20 .grid .s.s1 .box.rangewrap .over .value{justify-self:right;
    font-family:'fonttip1_semibold',Arial,sans-serif;
}
#home .sect20 .grid .s.s1 .box.rangewrap .item{}
#home .sect20 .grid .s.s1 .box.rangewrap .item input{display:block;width:100%;box-sizing:border-box;}
#home .sect20 .grid .s.s1 .box.colorwrap{text-align:center;}
#home .sect20 .grid .s.s1 .box.colorwrap .colorstitle{padding:0 0 3px 0;margin:0 0 5px 0;border-bottom:1px solid #d4c9a8;}
#home .sect20 .grid .s.s1 .box.colorwrap .colorgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
#home .sect20 .grid .s.s1 .box.colorwrap .colorgrids{
    display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:2px;
}
#home .sect20 .grid .s.s1 .box.colorwrap .colorgrids .text{}
#home .sect20 .grid .s.s1 .box.colorwrap .colorgrids .item{}
#home .sect20 .grid .s.s1 .box.colorwrap .colorgrids .item input{
    display:block;width:100%;box-sizing:border-box;
}
#home .sect20 .grid .s.s1 .box.insetwrap{}
#home .sect20 .grid .s.s1 .box.insetwrap .xgrid{display:inline-grid;grid-template-columns:auto auto;gap:7px;align-items:center;}

#home .sect20 .grid .s.s2{}
#home .sect20 .grid .s.s2 .wrap{height:100%;display:grid;gap:10px;grid-template-rows:auto 1fr;gap:0px;}
#home .sect20 .grid .s.s2 .wrap .code{padding:20px 5px;background:#0066a1;color:#fff;text-align:center;
    font-size:1.1rem;
}
#home .sect20 .grid .s.s2 .wrap .result{position:relative;z-index:1;}
#home .sect20 .grid .s.s2 .wrap .result .box{
    position:absolute;z-index:1;left:50%;top:50%;width:100px;height:100px;
    transform:translate(-50%,-50%);background:#fff;
}
#home .sect20 .grid .s.s3{align-self:center;font-size:1.1rem;}
#home .sect20 .grid .s.s3 .content{}

@media only screen and (max-width:1000px){
    #home .sect20{margin:25px 0 0 0;}
    #home .sect20 .grid{grid-template-columns:1fr 1fr;gap:20px;}
    #home .sect20 .grid .s.s1{padding:10px;}
    #home .sect20 .grid .s.s1 .box{padding:8px;margin:0 0 4px 0;}
    #home .sect20 .grid .s.s1 .box.rangewrap .over{grid-gap:5px;}
    #home .sect20 .grid .s.s3{grid-column:span 2;}
}

@media only screen and (max-width:700px){
    #home .sect20 .grid{grid-template-columns:1fr;grid-template-areas:"s2" "s1" "s3";gap:10px;}
    #home .sect20 .grid .s{padding:10px;}
    #home .sect20 .grid .s.s1{grid-area:s1;}
    #home .sect20 .grid .s.s2{grid-area:s2;}
    #home .sect20 .grid .s.s2 .wrap{height:auto;display:block;}
    #home .sect20 .grid .s.s2 .wrap .code{font-size:1rem;}
    #home .sect20 .grid .s.s2 .wrap .result{padding:50px 0;}
    #home .sect20 .grid .s.s2 .wrap .result .box{
        position:static;left:auto;top:auto;width:80px;height:80px;margin:0 auto;
        transform:translate(0,0);
    }

    #home .sect20 .grid .s.s3{grid-area:s3;grid-column:span 1;}
}
@media only screen and (max-width:500px){
    #home .sect20 .grid .s.s1 .textbox textarea{height:150px;padding:5px;}
}



#home .sect40{margin:70px 0 0 0;}
#home .sect40 .content hr{border:1px solid #ddd;}
#home .sect40 .content b,
#home .sect40 .content strong{font-weight:normal;font-family:'fonttip1_semibold';}
#home .sect40 .content img{max-width:100%;height:auto!important;
    border-radius:15px;
    box-shadow: 0 0 5px 0px #aaa;
}
#home .sect40 .content p{padding:8px 0;}
#home .sect40 .content p:nth-of-type(1){padding-top:0;}
#home .sect40 .content table{border:none;max-width:100%!important;overflow:auto;}
#home .sect40 .content table tr{}
#home .sect40 .content table tr td{padding:4px 6px;border:1px solid #ddd;}
#home .sect40 .content h1{margin:0 0 8px 0;font-size:2.1rem;font-family:'fonttip2';}
#home .sect40 .content h2{margin:0 0 8px 0;font-size:1.9rem;font-family:'fonttip2';}
#home .sect40 .content h3{margin:0 0 8px 0;font-size:1.7rem;font-family:'fonttip2';}
#home .sect40 .content h4{margin:0 0 8px 0;font-size:1.5rem;font-family:'fonttip2';}
#home .sect40 .content h5{margin:0 0 8px 0;font-size:1.3rem;font-family:'fonttip2';}
#home .sect40 .content h6{margin:0 0 8px 0;font-size:1.1rem;font-family:'fonttip2';}
#home .sect40 .content h1 strong,
#home .sect40 .content h1 b,
#home .sect40 .content h2 strong,
#home .sect40 .content h2 b,
#home .sect40 .content h3 strong,
#home .sect40 .content h3 b,
#home .sect40 .content h4 strong,
#home .sect40 .content h4 b,
#home .sect40 .content h5 strong,
#home .sect40 .content h5 b,
#home .sect40 .content h6 strong,
#home .sect40 .content h6 b{
    font-weight:normal;font-family:'fonttip2';
}
#home .sect40 .content iframe{max-width: 100%;}
#home .sect40 .content:after{content:"";display:block;clear:both;}
@media only screen and (max-width: 900px){
    #home .sect40{margin:25px 0 0 0;}
}