.latb4{width:100%;}
@media screen and (max-width: 480px) {.latb4{width:100%;}}
@media screen and (max-width: 768px) {#myframe{background-image:url(none);}}
#Box10{display:none;}
#Box09{display:none;}
#Box08{display:none;}
#Box06 {  width: 100%; }
#Box02{ overflow:hidden;  padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px;-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
@media screen and (max-width: 1024px) {#Box02{padding-right:50px;padding-left:50px;}}
@media screen and (max-width: 768px) {#Box02{padding-top:50px;padding-right:0px;padding-bottom:50px;padding-left:0px;}}
@media screen and (max-width: 480px) {#Box02{padding-top:0px;padding-bottom:0px;}}
body{background-color:transparent;}
#HjLphtml4 a{color:#5D6055;}
#HjLphtml4 h2{color:#5D6055;font-size:15.5pt;}
#Box04>div{margin-top:5px;margin-right:0.5%;margin-bottom:5px;margin-left:0.5%;}
/*翻轉顯示*/
#HjLphtml4 .pic1 img{width:50%;}
#HjLpcss14 .content
{
   -webkit-transition: .3s ease;
   -o-transition: .3s ease;
   transition: .3s ease;
}
#HjLpcss14:hover .content
{
   opacity:0;
}

#HjLpcss14 .title{
    position:static;
    opacity:0;
    -webkit-transition: .3s ease;
    -o-transition: .3s  ease;
    transition: .3s ease;
    transform: rotateY(270deg);
}

#HjLpcss14:hover .title{
   opacity:1;
   transform: rotateY(360deg);
}
/*翻轉顯示 END*/
.sticky-wrapper {
    position: relative;
}
.sticky-wrapper:not(.hey) {
    position: relative;
}
.sticky-wrapper:not(.hey) .latb1{
    background-color:rgba(255,255,255,1);
}
#Box02 {
    padding: 0px;
}
#HjLphtml3 {
    width: 100% !important;
    float: none !important;
    display: block !important;
}
#HjLphtml5 p{
    width:31.3%;
    float:left;
    margin:0px 1%;
}
#HjLphtml6 {
    padding: 80px 0px 0px 0px;
}
.index_video {
    position: relative;
    overflow: hidden;
    margin-bottom: -10px
}
.index_video video {
    width: 100%;
    height: 100%;
}
.index_video .video-js .vjs-tech {
    position:relative;
}
.index_video .video-js {
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.aboutRight {
    display: inline-block;
    width: 42%;
    margin: 20px 4%;
    vertical-align: top;
    line-height: 100%;
}
.aboutRight .aboutTitle{
    color:#fff;
    background:url(../../../web/css/image/aboutRightTitle.png) no-repeat;
    background-size:100% auto;
    padding:15px 30px;
    font-size:26px;
    display:inline-block;
}
.aboutLeft {
    display: inline-block;
    width: 40%;
    margin: 12px 4%;
    vertical-align: top;
}
.aboutLeft p{
    padding:20px 30px 40px 30px;
    background:url(../../../web/css/image/aboutLeftBg.png) no-repeat;
    background-size:100% auto;
    color:#3e6b26;
}
.aboutText {
    clear:both;
}
#learn-button{
    width:24rem;
}
.learn-more{
    width:auto;
}
#learn-button a {
    background: url(../../../web/css/image/aboutRightBtn.png) no-repeat;
    background-size: 100% auto;
    padding:28px 40px 20px 40px;
    display: block;
    font-size: 18px;
    color: #cfa96b;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    transform: scale(1);
}

#learn-button a:hover {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    transform: scale(1.05);  
}
#learn-button .focus_txt12 {
    color: #709172;
    font-size:10pt;
}
#learn-button .button-text {
    font-size: 16pt;
}
@keyframes arrow {
    0% { left:5px;}
   50% { left:10px}
   100% { left:5px; }
}

.learn-more .arrow {
    position:absolute;
    animation-name: arrow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
#playBtn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 20%;
    margin-left:-30px;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: solid 1px #000;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
}
#playBtn:hover {
    background-color: rgba(0,0,0,0.2);
}
#playBtn:before{
    width:40px;
    height:40px;
    content:' ';
    display:block;
    background-image:url(../Userfile/file/play.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:10px;
}
#pauseBtn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 20%;
    width: 40px;
    height: 40px;
    margin-left: -30px;
    border-radius: 40px;
    border: solid 1px #000;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
}
#pauseBtn:hover {
    background-color: rgba(0,0,0,0.2);
}
#pauseBtn:before{
    width:40px;
    height:40px;
    content:' ';
    display:block;
    background-image:url(../Userfile/file/pause.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:10px;
}
#soundBtn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 20px;
    width: 40px;
    height: 40px;
    margin-left: 30px;
    border-radius: 40px;
    border: solid 1px #000;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
}
#soundBtn:hover {
    background-color: rgba(0,0,0,0.2);
}
#soundBtn:before{
    width:40px;
    height:40px;
    content:' ';
    display:block;
    background-image:url(../Userfile/file/sound.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:16px;
}
#nosoundBtn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 20%;
    width: 40px;
    height: 40px;
    margin-left: 30px;
    border-radius: 40px;
    border: solid 1px #000;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
}
#nosoundBtn:hover {
    background-color: rgba(0,0,0,0.2);
}
#nosoundBtn:before{
    width:40px;
    height:40px;
    content:' ';
    display:block;
    background-image:url(../Userfile/file/no-sound.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:16px;
}
.knowBtn {
    position: absolute;
    bottom: 28%;
    left: 50%;
    transform: translate(-50%, 0%);
    text-indent:24px;
}
.knowBtn a{
    display:block;
    padding:4px 4px;
    width:240px;
    line-height:30px;
    text-align:center;
    border:solid 1px #333;
    color:#333;
    font-weight:bold;
    letter-spacing:2px;
    font-size:14pt;
    vertical-align:bottom;
}
.knowBtn a::before{
    content:' ';
    display:inline-block;
    width:24px;
    height:24px;
    background-image:url(../Userfile/file/finger.png);
    background-repeat:no-repeat;
    background-position:center 0px;
    background-size:24px 48px;
    position:absolute;
    left:24px;
    top:6px;
}
.knowBtn a:hover{
    border:solid 1px #fff;
    color:#fff;
    background-color:rgba(0,0,0,0.3);
}
.knowBtn a:hover::before{
    background-position:center -24px;
}
#HjLpx030dtilist1{
    margin:0px auto !important;
}
#HjLpx030dtilist1 .item{
    width:33.3%;
    margin:40px 0% 0px 0%;
   transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
   transform: scale(1);
}
#HjLpx030dtilist1 .item:hover {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    transform: scale(1.05);
}
#HjLpx030dtilist1 .item:hover a{
    color:#e66470;
}
#HjLpx030dtilist1 .word{
    font-size:14pt;
    padding:20px 0px 0px 0px;
}
#imglll li {
    position: relative;
    transform: scale(1);
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#imglll li:hover{
    transform: scale(1.05);
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#imglll li .image{
    opacity:1;
    top:0px;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#imglll li:hover .image{
    opacity:0.8;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#imglll li .image:before{
    content:'\f18b';
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
    color:#fff;
    opacity:0;
    position:absolute;
    top:40%;
    margin-left:-10px;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#imglll li:hover .image:before{
    opacity:1;
    color:#fff;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#imglll li .title{
    padding:6px 0px 0px 0px;
}
#imglll li:hover .title{
    color:#e66470;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
#HjLpx030dtilist1 ul.list > li .image{
    padding-top:60%;
}

#HjLpx030dtilist1 .item .dbottom a{
    background-image:none;
    padding:0;
    text-align:center;
    color:#5e83b0;
}
#HjLpx030dtilist1 .item .dbottom a::before {
    content:'▲';
    display:inline-block;
}
#HjLpx030dtilist1 .item .image{
    padding-top:70%;
    background-size:cover;
}
#HjLpx030dtilist1 .item .image img{
    -webkit-box-shadow: 0 0 5px #999;
	-moz-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999;
    background-size:contain;
}
#imglll {
    width:100%;
}
#imglll li .title {
    padding:0px;
    margin:0px;
}
#imglll li.item {
    width:25% !important;
    margin:20px 4%;
    padding:8px;
    background-color:#fff;
    -webkit-box-shadow: 0 0 5px #999;
	-moz-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999;

}
#imglll li .image {
    background-size:cover;
    width:100%;
    padding-top:70%;
}


.op4-list {
    margin:0px;
    font-family:NotoSansTC-Light;
}
.op4-list .list{
    padding:0px;
    margin:0px;
}
.op4-list .list li{
   width:33.3%;
   margin:0px -2px;
   display:inline-block;
}
.op4-list .list li .op4-group{
   margin:0px 40px;
}
.op4-list .list li .op4-title b{
      display:block;
    line-height:120%;
    padding:6px 0px 0px 0px;
}
.op4-list .list .op4-02 .op4-title b {
    border-bottom:solid 3px #bfded9;  
}
.op4-list .list .op4-04 .op4-title b {
    border-bottom:solid 3px #feede5;  
}
.op4-list .list .op4-13 .op4-title b {
    border-bottom:solid 3px #e8d8e2;  
}
.op4-list .list li .op4-title a{
    text-align:center;
    padding:0px 0px 180px 0px;
    font-weight:bold;
    font-size:15pt;
    display:block;
}
.op4-list .list .op4-02 .op4-title a{
    border:solid 1px #bfded9;
}
.op4-list .list .op4-04 .op4-title a {
    border:solid 1px #feede5;
}
.op4-list .list .op4-13 .op4-title a {
    border:solid 1px #e7d8e2;
}
.op4-list .list li .op4-text{
    text-align:center;
    font-size:13pt;
    line-height:150%;
    padding:10px 10px 10px 10px;
}
.op4-list .list .op4-02 .op4-text{
    background-color:#bfded9;
}
.op4-list .list .op4-04 .op4-text{
    background-color:#feede5;
}
.op4-list .list .op4-13 .op4-text {
    background-color:#e7d8e2;
}
.op4-list .list li .op4-amount {
    text-align:right;
    font-size:11pt;
    line-height:150%;
    padding:10px 0px 10px 0px;
}
.op4-list .list li .op4-amount .amount{
    color:#e66470;
    font-family:NotoSansTC-Medium;
}
.op4-list .list li.op4-02 .op4-title{
    background:url(../../../web/CUS/M15/CSS/op2/02.png) no-repeat center 80%;
    background-size:auto 70%;
}
.op4-list .list li.op4-04 .op4-title{
    background:url(../../../web/CUS/M15/CSS/op2/04.png) no-repeat center 80%;
    background-size:auto 60%;
}
.op4-list .list li.op4-13 .op4-title{
    background:url(../../../web/CUS/M15/CSS/op2/13.png) no-repeat center 70%;
    background-size:auto 50%;
}
.op4-more {
    text-align:center;
    margin:20px 120px;
}
.op4-list .more {
    clear: both;
    font-weight: normal;
    text-align: center;
    margin: 12px 0px 0px 0px;
    overflow: hidden;
    display:inline-block;  
    font-size:12pt;
}
.op4-list .more span{
    padding: 10px;
    display:block;
    color:#000;
    background-color:#fdede4;
}
.op4-list .more:hover span {
    background-color:#e66470;
    color:#fff;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
@keyframes stretch {
    0% {transform:  scale(1);}
    25% {transform:  scale(1);}
    50% { transform:  scale(0.8);}
    75% {transform:  scale(1);}
   100% {transform:  scale(1);}
}
.clickBox {
    position:relative;
    padding:0px 0px 0px 0px;
    overflow:hidden;
}
.clickLeft {
    padding: 0px 30px 30px 60px;
    width: 50%;
    float: left;
}
.clickRight {
    padding: 0px 60px 30px 30px;
    width: 50%;
    float: left;
}
.clickBtn {
    position: absolute;
    width: 200px;
    height: 200px;
    text-align: center;
    z-index: 100;
    bottom: -15%;
    right:5%;
}
.clickBtn img{
    width:200px !important;
    animation-name: stretch;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-delay: 0;
    animation-direction:normal;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

#Box02 {
    background: #f8f2da no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding:0px 0px 100px 0px;
}
#Box02 #HjLphtml3 {
    background: url(../../../web/css/image/indexBg01.png) no-repeat;
    background-size: 100% auto;
    background-position: center top;
    padding: 100px 0px 160px 0px;
}
#Box03 {
    background: url(../../../web/css/image/catBg.png) no-repeat;
    background-size: 100% auto;
    background-position: center top;
    position: relative;
    margin: -260px 0px 0px 0px;
    padding: 8.5% 0px 0px 0px;
}
#Box03 #HjLphtml10{
    padding:0px 40px 0px 40px;
}
.catBox {
    position: relative;
    width: 17%;
    left: 65%;
    padding: 18% 0px 9% 0px;
}
.catBox img{
    width:100%;
}
.ballBox {
    position: absolute;
    width: 5%;
    left: 62.2%;
    top: 74%;
}
.ballBox img{
    width: 100%;
}
.goBnt{
    position:absolute;
    z-index:1;
}
#Box04 {
    background: url(../../../web/css/image/indexBox02.png) #eaf3f7 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    margin:-200px 0px 0px 0px;
}
#Box04  #HjLphtml5{
    padding:220px 40px 380px 40px;
}
#HjLphtml5 .title {
    text-align:center;
}
#HjLphtml5 .index_title {
    background: url(../../../web/css/image/titleBox03.png) no-repeat;
    background-size: 100% auto;
    color: #ee6a00;
    padding:8px 50px;
    display: inline-block;
}
#Box05 {
    background: url(../../../web/css/image/indexBox03.png) #d3e7e8 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    position: relative;
    padding:0px 0px 340px 0px;
}
#Box05 #HjLphtml8{
    position:absolute;
    width:100%;
    top:-100px;
}
#Box05 #HjLpx030dtilist1{
    background: url(../../../web/css/image/indexBg03b.png) no-repeat;
    background-size: 100% auto;
    background-position: center top;
}
#Box05 #HjLpx030dtilist1 .list{
    padding:20px 0px 80px 0px; 
       background: url(../../../web/css/image/indexBg03a.png) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}
#HjLphtml9 {
    position:relative;
}
#HjLphtml9 .moreBox {
    position: absolute;
    left: 60px;
    bottom: 0%;
}
#HjLphtml9 .moreBox a{
    background:url(../../../web/css/image/moreBtn02.png) no-repeat;
    background-size:60px;
    display:inline-block;
    height:60px;
    padding:0px 0px 0px 66px;
    color:#1e4860;
    font-size:20px;
    font-weight:bold;
    line-height:60px;
    vertical-align:middle;
    font-family:initial;
}
#HjLpx030dtilist1 .item  a {
    display: block;
    padding: 30px 12% 10px 12%;
}
#HjLphtml8 .title {
    text-align: center;
}
#HjLphtml8 .index_title {
    background: url(../../../web/css/image/titleBox04.png) no-repeat;
    background-size: 100% auto;
    color: #0c5985;
    padding: 8px 50px;
    display: inline-block;
}
#Box06 {
    background: url(../../../web/css/image/indexBox04.png) #f0f6ea no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding: 0px 0px 100px 0px;
}
#Box06 #HjLphtml7{
    margin:-120px 0px 0px 0px;
    position:absolute;
    width:100%;
    height:300px;
}
#Box06 #HjLphtml6{
    padding:80px 0px 100px 0px;
    position:relative;
    margin:-140px 0px 0px 0px;
}
#Box07 {
    background: #f9efed no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    margin:0px;
}
#Box07 #HjLphtml4{
    background: url(../../../web/css/image/indexBg05.png) no-repeat;
    background-size: 100% auto;
    background-position: center top;
    padding: 0px 0px 200px 0px;
}
#Box03 > div,
#Box04 > div{
    margin: 0px;
}
.latb5 {
    margin:0px;
}
.index_title {
    text-align: center;
    font-size: 20pt;
}
#HjLphtml5 .vGroup:nth-child(1)  {
    background: url(../../../web/css/image/indexPhotoBg01.png) no-repeat;
    background-size: 90% auto;
    background-position: center center;
}
#HjLphtml5 .vGroup:nth-child(2)  {
    background: url(../../../web/css/image/indexPhotoBg02.png) no-repeat;
    background-size: 90% auto;
    background-position: center center;
}
#HjLphtml5 .vGroup:nth-child(3) {
    background: url(../../../web/css/image/indexPhotoBg03.png) no-repeat;
    background-size: 90% auto;
    background-position:center center;
}
#HjLphtml5 {
    position:relative;
}
#HjLphtml5 .moreBox {
    position: absolute;
    right: 120px;
    bottom:30%;
}
#HjLphtml5 .moreBox a{
    background:url(../../../web/css/image/moreBtn01.png) no-repeat;
    background-size:60px;
    display:inline-block;
    height:60px;
    padding:0px 0px 0px 66px;
    color:#57152e;
    font-size:20px;
    font-weight:bold;
    line-height:60px;
    vertical-align:middle;
    font-family:initial;
}
#HjLphtml5 .vGroup {
    width: 33%;
    float: left;
    padding: 0px 0px 20px 0px;
    margin: 0px 0px 20px 0px;
}
#HjLphtml5 .container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25% !important;
}
#HjLphtml5 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 80% !important;
    margin:5%  10% !important;
    height: 90% !important;
}
.owl-carousel {
    list-style:none;
}
.owl-carousel .owl-stage-outer{
    padding:0px 0px 80px 0px;
}
.owl-carousel .owl-item img{
    width:100%;
    margin:0px !important;
}

.owl-carousel.owl-loaded {
    padding:0px;
    margin:0px 0px;
}
#HjLphtml4 .content {
    padding:0px 80px;
}
#HjLphtml4 .content .serverBox {
    overflow: hidden;
    width: 100%;
    float: none;
}
#HjLphtml4 .content .serverLeft {
    width:50%;
    float:left;
}
#HjLphtml4 .content .serverLeft img{
    padding:10px 0px;
    max-width:320px;
}
#HjLphtml4 .content .serverRight {
    width:auto;
    float:right;
}
.vbox-open{
    overflow:visible;
}
.mm-slideout {
    position: fixed;
    left: 0px;
    top: 0px;
    display: none;
}
.vbox-overlay::after {
    content: ' ';
    position: fixed;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
}
.vbox-overlay {
    background-color: transparent !important;
    opacity: 1;
    position: fixed;
    height: 100%;
    width: 100%;
    max-width: 400px;
    margin: 0px auto;
}
.vbox-container {
    overflow-y:hidden !important;
}
.vbox-content{
    margin:0px !important;
    padding:40px 0px 0px 0px;
}
.vbox-close {
    color: #000 !important;
    position: absolute;
    top: 40px;
    width: 20px;
    height: 20px;
    padding: 0px;
}

@media screen and (max-width:1428px) {
    #Box03{
        padding: 9% 0px 0px 0px;
    }
    .catBox {
        left: 65%;
        padding: 18% 0px 9% 0px;
    }
    .ballBox {
        left: 62.2%;
        top:74%;
    }

}
@media screen and (max-width:1024px) {
    #playBtn, #stopBtn, #pauseBtn, #nosoundBtn {
        bottom: 20px;
    }
    .knowBtn {
        bottom: 70px;
    }
    .op4-list .list li .op4-group{
       margin:0px 30px;
    }
    .op4-list .list li .op4-title{
        font-size:14pt;
    }
    .op4-list .list li .op4-text{
        font-size:12pt;
    }
    .op4-list .list li .op4-amount {
        font-size:10pt;
    }
    #HjLphtml5 .vGroup {
        width: 33.3%;
    }
}
@media screen and (max-width: 968px) {
    .sticky-wrapper {
        position: relative;
    }
    .sticky-wrapper:not(.hey) {
        position: relative;
    }
    .sticky-wrapper:not(.hey) .latb1{
        background-color:rgba(255,255,255,1);
    }   
    .op4-list .list li .op4-group{
       margin:0px 20px;
    }
    .op4-list .list li .op4-title{
        font-size:14pt;
    }
    .op4-list .list li .op4-text{
        font-size:12pt;
    }
    .op4-list .list li .op4-amount {
        font-size:10pt;
    }
    #HjLphtml5 .vGroup {
        width: 33.3%;
    }
    #Box02 {
        padding:0px;
    }
    #Box03 {
        background-size: 140% auto;
        margin: -180px 0px 0px 0px;
        padding: 30% 0px 0px 0px;
    }

        #Box03 #HjLphtml10 {
            padding: 0px 30px;
        }

    .catBox {
        width: 23%;
        left: 71%;
        padding: 8% 0px 9% 0px;
        position: relative;
    }

    .ballBox {
        width: 6.3%;
        left: 66%;
        top: 78.5%;
    }
}
@media screen and (max-width: 768px) {
    .sticky-wrapper {
        position: relative;
    }
    .sticky-wrapper:not(.hey) {
        position: relative;
    }
    .sticky-wrapper:not(.hey) .latb1{
        background-color:rgba(255,255,255,1);
    }   
    #HjLpx030dtilist1 .item{
        width:94%;
        padding-top:10px;
        padding-bottom:10px;
        margin-top:10px;
        margin-right:0;
        margin-bottom:0px;
        margin-left:0;
        border-radius: 5px;
    }
    #imglll li.item {
        width:44%  !important;
        margin:20px 3%;
    }
    .op4-list .list li .op4-group{
       margin:0px 10px;
    }
    .op4-list .list li .op4-title{
        font-size:13pt;
    }
    .op4-list .list li .op4-text{
        font-size:11pt;
    }
    .op4-list .list li .op4-amount {
        font-size:9pt;
    }
    #HjLphtml5 .vGroup {
        width: 100%;
    }
    .aboutLeft {
        display: block;
        width: 100%;
        margin: 0px 0px 20px 0px;
        padding:0px 0px 20px 0px;
        overflow: hidden;
    }
    .aboutRight {
        display: block;
        width: 100%;
        margin: 0px;
    }
    #learn-button {
        width: 24rem;
        margin-left:20px;
    }
    #learn-button .button-text{
        font-size:15pt;
    }
    #playBtn,
    #stopBtn,
    #pauseBtn,
    #nosoundBtn {
        bottom: 20px;
    }
    .knowBtn {
        bottom: 70px;
    }
    .clickLeft {
        width: 100%;
        float: none;
        padding: 0px 40px 40px 40px;
    }
    .clickRight {
        width: 100%;
        float: none;
        padding: 0px 40px 40px 40px;
    }
    .clickBtn {
        width: 120px;
        height: 120px;
        bottom: -15%;
    }
    .clickBtn img{
        width:120px !important;
    }
    #HjLphtml6 {
        padding: 80px 20px 0px 20px;
    }
    #HjLphtml5 .vGroup {
        width:100%;
    }
    #Box02{
        padding:0px;
    }
    #Box02 #HjLphtml3 {
        padding: 60px 0px 120px 0px;
    }
    #Box03 {
        background-size: 130% auto;
        margin: -180px 0px 0px 0px;
        padding: 26% 0px 0px 0px;
    }
    #Box03 #HjLphtml10{
        padding:0px 30px;
    }
    .catBox {
        width: 23%;
        left: 70%;
        padding: 8% 0px 9% 0px;
        position: relative;
    }
    .ballBox {
        width: 6%;
        left: 65%;
        top: 78%;
    }
    #Box04{
        margin:-100px 0px 0px 0px;
        padding:100px 0px 0px 0px;
    }
    #Box04 #HjLphtml5 {
        padding: 0px 20px 180px 20px;
    }  
    #HjLphtml5 .moreBox {
        right: 20px;
        bottom:100px;
    }
    #Box05 {
        padding: 0px 0px 100px 0px;
    }
    #Box05  #HjLphtml8{
        top:0px;
    }
    #Box05  #HjLpx030dtilist1 .list{
        padding:80px 0px 0px 0px;
    }
    #Box05  #HjLpx030dtilist1{
        padding:0px 0px 120px 0px;
    }
    #Box05 #HjLpx030dtilist1{
        background-size: 150% auto;
        background-position: right 35%;
    }
    #Box05 #HjLpx030dtilist1 .list{
        background-size: 150% auto;
        background-position: left bottom;
    }
    #HjLpx030dtilist1 .item a {
        padding:0px 30px;
    }
    #Box06 {
        padding: 0px 0px 40px 0px;
    }
    #Box06 #HjLphtml7{
        margin:-120px 0px 0px 0px;
        height:300px;
    }
    #Box06 #HjLphtml6{
        padding:0px 20px 0px 20px;
         margin:0px;
    }
    #Box07 #HjLphtml4{
        padding: 0px 20px 80px 20px;
    }
    #HjLphtml4 .content .serverLeft {
        width: 80%;
        margin: 0px 10%;
        float: none;
    }
    #HjLphtml4 .content .serverRight {
        width: 280px;
        margin:0px auto;
        float: none;
    }
    #HjLphtml4 .pic1 img {
        width: 100%;
    }
    #HjLphtml4 .content {
        padding: 0px 0px;
    }
}
@media screen and (max-width: 468px) {
    .sticky-wrapper {
        position: relative;
    }
    .sticky-wrapper:not(.hey) {
        position: relative;
    }
    .sticky-wrapper:not(.hey) .latb1{
        background-color:rgba(255,255,255,1);
    }
    #HjLpx030dtilist1 .item{
        width:94%;
        padding-top:10px;
        padding-bottom:10px;
        margin-top:10px;
        margin-right:3%;
        margin-bottom:0px;
        margin-left:3%;
        border-radius: 5px;
    }
    #imglll li.item {
        width:80%  !important;
        margin:20px 10%;
    }
    #imglll div.image {
        width: 100% !important;
    }
    .op4-list .list li{
       width:100%;
       margin:0px;
       display:block;
    }
    .op4-list .list li .op4-group{
       margin:0px 20px;
    }
    .op4-list .list li .op4-title{
        font-size:14pt;
    }
    .op4-list .list li .op4-text{
        font-size:12pt;
    }
    .op4-list .list li .op4-amount {
        font-size:11pt;
    }
    .op4-more {
        text-align:center;
        margin:20px 0px;
    }
    .aboutLeft {
        display: block;
        width: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        overflow: hidden;
    }
    .aboutRight {
        display:block;
        width:100%;
        margin:0px;
    }
    #learn-button {
        width: 23rem;
        margin-left: 0px;
        letter-spacing:0px;
    }
    #learn-button .button-text{
        font-size:13pt;
        padding:6px 0px 0px 0px;
    }
    #playBtn,
    #stopBtn,
    #pauseBtn,
    #nosoundBtn {
        bottom: 20px;
    }
    .knowBtn {
        bottom: 70px;
    }
    .index_video video {
        position:relative;
        width: 170%;
        height: 100%;
        left: -35%;
    }
    .clickLeft {
        width: 100%;
        float: none;
        padding: 0px 20px 40px 20px;
    }
    .clickRight {
        width: 100%;
        float: none;
        padding:0px 20px 40px 20px;
    }
    .clickBtn {
        width: 120px;
        height: 120px;
        bottom: -15%;
    }
    .clickBtn img{
        width:120px !important;
    }
    #HjLphtml6 {
        padding: 80px 20px 0px 20px;
    }
    #HjLphtml5 .vGroup {
        width:100%;
    }
    #Box02{
        padding:0px 0px 100px 0px;
    }
    #Box02 #HjLphtml3 {
        padding: 60px 0px 60px 0px;
    }
    #Box03 {
        background-size: 150% auto;
        margin: -180px 0px 0px 0px;
        padding: 34% 0px 0px 0px;
    }
    #Box03 #HjLphtml10{
        padding:0px 20px;
    }
    .catBox {
        width: 24%;
        left: 74%;
        padding: 8% 0px 9% 0px;
        position: relative;
    }
    .ballBox {
        width: 7%;
        left: 67.5%;
        top: 79%;
    }
    #Box04 {
        margin: -60px 0px 0px 0px;
        padding: 100px 0px 0px 0px;
    }
    #Box04 #HjLphtml5 {
        padding: 0px 10px 120px 10px;
    }
    #HjLphtml5 .moreBox {
        right: 20px;
        bottom: 60px;
    }
    #Box05 {
        padding:0px 0px 100px 0px;
    }
    #Box05 #HjLphtml8 {
        top: 0px;
    }
    #Box05  #HjLpx030dtilist1 .list{
        padding:80px 0px 0px 0px;
    }
    #Box05  #HjLpx030dtilist1{
        padding:0px 0px 120px 0px;
    }
    #Box05 #HjLpx030dtilist1{
        background-size: 150% auto;
        background-position: right 35%;
    }
    #Box05 #HjLpx030dtilist1 .list{
        background-size: 150% auto;
        background-position: left bottom;
    }
    #HjLpx030dtilist1 .item a {
        padding:0px 30px;
    }
    #Box06 {
        padding: 0px 0px 40px 0px;
    }
    #Box06 #HjLphtml7{
        margin:-120px 0px 0px 0px;
        height:300px;
    }
    #Box06 #HjLphtml6{
        padding:0px 30px 0px 30px;
        margin:0px;
    }
    #Box07 #HjLphtml4{
        padding: 0px 30px 80px 30px;
    }
    #HjLphtml4 .content .serverLeft{
        width:90%;
        margin:0px 0%;
        float:none;
    }
    #HjLphtml4 .content .serverRight {
        width: 280px;
        margin: 0px auto;
        float: none;
    }
    #HjLphtml4 .pic1 img {
        width: 100%;
    }
    #HjLphtml4 .content {
        padding: 0px 30px;
    }
    .owl-carousel .owl-stage-outer {
        padding: 0px 0px 30px 0px;
    }
}