.rocker-text-box-01{ background: #f9f9f9; } .rocker-text-box-01 .rocker-top{ padding: 40px 0; padding-bottom: 0px; position: relative; z-index: 1 } .rocker-text-box-01 .rocker-title{ text-align: center; font-weight: bold; margin-bottom: 20px; } .rocker-text-box-01 .rocker-list-icon{ padding: 35px 20px; background: #fff; position: relative; margin: auto; margin-top: 30px; } .rocker-text-box-01 .rocker-list-icon .rocker-rows{ position: relative; padding: 10px; padding-left: 50px; width: 33.3%; float: left; } .rocker-text-box-01 .rocker-list-icon .rocker-rows .rocker-icon{ width: 40px; height: 40px; font-size: 40px; position: absolute; left: 0; top:0; bottom: 0; margin: auto; } .rocker-text-box-01 .rocker-list-icon .rocker-rows .lbl{ display: block; } .rocker-text-box-01 .rocker-list-icon .rocker-rows .value{ display: block; } .rocker-text-box-01 .rocker-bottom{ width: 100%; height: auto; position: relative; top: -100px; z-index: 0; margin-bottom: -100px; } .rocker-text-box-01 .rocker-img-full{ position: relative; z-index: 0 } .rocker-text-box-01 .rocker-img-full img{ width: 100%; height: auto; } @media(min-width: 900px){ .rocker-text-box-01 .rocker-list-icon .rocker-rows:nth-child(-1n+3){ border-bottom: 1px solid #f9f9f9 } } @media(max-width: 900px){ .rocker-text-box-01 .rocker-bottom{ top: -40px; margin-bottom: -40px; } .rocker-text-box-01 .rocker-list-icon .rocker-rows{ width: 50%; border-bottom: 1px solid #f9f9f9; padding-left: 38px; } .rocker-text-box-01 .rocker-list-icon .rocker-rows:nth-child(5),.rocker-text-box-01 .rocker-list-icon .rocker-rows:nth-child(6){ border-bottom: none } .rocker-text-box-01 .rocker-list-icon .rocker-rows .rocker-icon{ font-size: 30px; width: 30px; height: 30px; } } @media(max-width: 550px){ .rocker-text-box-01 .rocker-list-icon .rocker-rows{ width: 100%; border-bottom: 1px solid #f9f9f9 !important } }  .rocker-json-box-01{ padding: 100px 0; } @media(min-width: 900px){ .rocker-json-box-01 .pl-wrabauto{ max-width: calc(100% - 100px) } } .rocker-json-box-01 .rocker-left{ float: left; width: 55%; height: auto; position: relative; overflow: hidden; } .rocker-json-box-01 .rocker-left img{ width: 100%; height: auto; position: relative; z-index: 0 } .rocker-json-box-01 .rocker-left .circle{ width: 10px; height: 10px; position: absolute; border-radius: 100%; background: #f90000; z-index: 2; } .rocker-json-box-01 .rocker-left .circle span{ width: 10vw; height: 10vw; position: absolute; border: 1px dashed #ffffffba; border-radius: 100%; left: calc(-5vw + 5px); top: calc(-5vw + 5px); } .rocker-json-box-01 .rocker-left .circle span:nth-child(2){ width: 20vw; height: 20vw; left: calc(-10vw + 5px); top: calc(-10vw + 5px); border-color:#ffffff78; } .rocker-json-box-01 .rocker-left .circle span:nth-child(3){ width: 30vw; height: 30vw; left: calc(-15vw + 5px); top: calc(-15vw + 5px); } @media(min-width: 1600px){ .rocker-json-box-01 .rocker-left .circle span:nth-child(2){ width: 14vw; height: 14vw; left: calc(-7vw + 5px); top: calc(-7vw + 5px); border-color:#ffffff78; } .rocker-json-box-01 .rocker-left .circle span:nth-child(3){ width: 20vw; height: 20vw; left: calc(-10vw + 5px); top: calc(-10vw + 5px); } } .rocker-json-box-01 .rocker-left .circle span:nth-child(1) { -webkit-animation: rotating 22s linear infinite; -moz-animation: rotating 22s linear infinite; -ms-animation: rotating 22s linear infinite; -o-animation: rotating 22s linear infinite; animation: rotating 22s linear infinite; } .rocker-json-box-01 .rocker-left .circle span:nth-child(2) { -webkit-animation: rotating 62s linear infinite; -moz-animation: rotating 62s linear infinite; -ms-animation: rotating 62s linear infinite; -o-animation: rotating 62s linear infinite; animation: rotating 62s linear infinite; } .rocker-json-box-01 .rocker-left .circle span:nth-child(3) { -webkit-animation: rotating 32s linear infinite; -moz-animation: rotating 32s linear infinite; -ms-animation: rotating 32s linear infinite; -o-animation: rotating 32s linear infinite; animation: rotating 32s linear infinite; } .rocker-json-box-01 .rocker-right{ float: right; width: 45%; height: auto; position: relative; overflow: hidden; padding: 60px; background-size: 100% 100%; min-height: 414px; } .rocker-json-box-01 .rocker-title,.rocker-json-box-01 .rocker-des{ width: 100%; display: block; margin-bottom: 10px } .rocker-json-box-01 .rocker-list-json{ } .rocker-json-box-01 .rocker-list-json .rocker-items{ width: 50%; float: left; padding-left: 10px; padding-bottom: 15px; border-left-style: solid; border-left-width: 1px; } .rocker-json-box-01 .rocker-list-json .rocker-items:nth-child(3){ clear: left; } .rocker-json-box-01 .rocker-list-json .rocker-items .rocker-l{ width: 51px; float: left; } .rocker-json-box-01 .rocker-list-json .rocker-items .rocker-r{ width: calc(100% - 51px); float: right; } .rocker-json-box-01 .rocker-list-json .rocker-items .r-number{ font-size: 40px; display: block; font-weight: bold; position: relative; } .rocker-json-box-01 .rocker-list-json .rocker-items .r-number::before{ content:" "; width: 10px; height: 10px; display: block; position: absolute; left: -16px; top: 0; bottom: 0; margin: auto; border-radius: 100%; } .rocker-json-box-01 .rocker-list-json .rocker-items .r-unit{ font-weight: bold; font-size: 15px; letter-spacing: 3px; display: block; } .rocker-json-box-01 .rocker-list-json .rocker-items ul.rocker-r { list-style-type: disc; margin-block-start: 0px; margin-block-end: 5px; margin-inline-start: unset; margin-inline-end: inherit; padding-inline-start: 28px; font-size: calc(100% + -3px); } @media(max-width: 1250px){ .rocker-json-box-01 .rocker-right{ padding: 30px } } @media(max-width: 1050px){ .rocker-json-box-01 .rocker-left,.rocker-json-box-01 .rocker-right{ width: 100%; float: none; } } .rocker-json-box-01 .rocker-list-json .rocker-items ul.rocker-r li{ padding-left: 0px; padding-bottom: 5px; } @media(max-width: 600px){ .rocker-json-box-01{ padding: 50px 0; } .rocker-json-box-01 .rocker-list-json .rocker-items{ width: 100%; float: none; } .rocker-json-box-01 .rocker-right{ background: #fff; background-image: none !important; } .rocker-json-box-01 .rocker-list-json .rocker-items ul.rocker-r{ font-size: 100% } .rocker-json-box-01 .rocker-list-json .rocker-items .r-number{ font-size: 30px } .rocker-json-box-01 .rocker-list-json .rocker-items .r-unit{ font-size: 11px } .rocker-json-box-01 .rocker-list-json .rocker-items .rocker-l { width: 35px; } .rocker-json-box-01 .rocker-list-json .rocker-items ul.rocker-r { padding-inline-start: 7px; } }  .rocker-json-box-04{ position: relative; } .rocker-json-box-04 .pl-wrabauto{ display: flex; position: relative; z-index: 1 } .rocker-json-box-04::before,.rocker-json-box-04::after{ content:" "; display: block; position: absolute; height: 100%; top:0; bottom: 0; z-index: 0 } .rocker-json-box-04::before,.rocker-json-box-04 .rocker-left{ width: 65%; float: left; left: 0; } .rocker-json-box-04::after,.rocker-json-box-04 .rocker-right{ width: 35%; float: left; right: 0; background: #1b3864; } .rocker-json-box-04 .rocker-left{ float: left; } .rocker-json-box-04 .rocker-right{ width: 35%; float: right; display: flex; align-items: center; } .rocker-json-box-04 .rocker-left,.rocker-json-box-04 .rocker-right{ padding: 50px 40px; } .rocker-json-box-04 .rocker-top{ padding-bottom: 20px } .rocker-json-box-04 .rocker-top .rocker-title{ margin-bottom: 10px; } .rocker-json-box-04 .rocker-bottom{ position: relative; margin-top: 30px } .rocker-json-box-04 .rocker-bottom img{ width: 100%; height: auto; } .rocker-json-box-04 .rocker-wrab{ position: relative; display: block; } .rocker-json-box-04 .rocker-wrab img{ width: 100%; height: auto; } .rocker-json-box-04 .rocker-rows{ border-bottom-style: solid; border-bottom-width: 1px; padding: 10px 0px; } .rocker-json-box-04 .rocker-rows::after{ content:" "; display: block; clear: both; } .rocker-json-box-04 .rocker-lbl{ color: #ffffff; font-size: calc(100% + 5px) } .rocker-json-box-04 .rocker-value{ font-size: calc(100% + 7px); float: right; } .rocker-json-box-04 .rocker-rows:nth-child(2),.rocker-json-box-04 .rocker-rows:last-child{ border-bottom: none } @media(max-width: 950px){ .rocker-json-box-04 .pl-wrabauto{ display: block; width: 100%; } .rocker-json-box-04::before,.rocker-json-box-04::after{ display: none; } .rocker-json-box-04 .rocker-left,.rocker-json-box-04 .rocker-right{ padding: 50px 30px; width: 100%; float: none; } .rocker-json-box-04 .rocker-left{ padding-bottom: 5px } } /*bg slider*/ .rocker-json-box-04 .owl-item{ opacity: 0; } .rocker-json-box-04 .owl-item.active{ opacity: 1 } .rocker-json-box-04 .owl-nav{ position: absolute; left: -60px; top: 0; bottom: 0; margin: auto; display: grid; align-items: center; height: calc(40px + 40px); } button.rockerpages-json-box-04-next,button.rockerpages-json-box-04-prev{ width: 40px; height: 40px; margin: 0px; opacity: .8; outline: none; margin: auto; background-color: #fff; border-radius: 100%; position: absolute; box-shadow: 1px 1px 0 2px #00000061; border: none; } button.rockerpages-json-box-04-prev{ top:50px; } button.rockerpages-json-box-04-next{ top:0; } button.rockerpages-json-box-04-next i,button.rockerpages-json-box-04-prev i{ font-size: 20px; line-height: 40px; } /*ed slider*/  .rocker-json-box-05{ padding:100px 0; } .rocker-json-box-05 .rocker-top{ padding-bottom: 20px } .rocker-json-box-05 .rocker-top .rocker-title{ color: #ffffff; float: left; } .rocker-json-box-05 .rocker-top .rocker-mn{ float: right; position: relative; padding-left: 60px; display: none; } .rocker-json-box-05 .rocker-top .rocker-mn::before{ content: ""; width: 50px; height: 2px; position: absolute; background: #ffffff; left: 0; top:0; bottom: 0; margin:auto; } .rocker-json-box-05 .rocker-top .rocker-mn a{ display: inline-block; color: #ffffff; padding: 0 15px } .rocker-json-box-05 .rocker-bottom{ } .rocker-json-box-05 .rocker-items{ position: relative; width: 30%; float: right; margin: 3px 0; } .rocker-json-box-05 .rocker-items:nth-child(1){ width: calc(70% - 6px); float: left; } .rocker-json-box-05 .rocker-items::before{ content: ""; display: block; padding-top: calc(69% - 5px); } .rocker-json-box-05 .rocker-items:nth-child(1)::before{ padding-top:calc(60% - 6px); } @media(max-width: 800px){ .rocker-json-box-05 .rocker-items{ width: calc(50% - 6px); margin: 3px; } .rocker-json-box-05 .rocker-items:nth-child(1){ width: calc(100% - 6px); float: left; margin: 3px } } .rocker-json-box-05 .rocker-items .rocker-wrab { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #333; color: #fff; line-height: 100%; height: 100%; overflow: hidden; cursor: zoom-in; } .rocker-json-box-05 .rocker-items img{ width: 100%; height: auto; min-height: 100% } .rocker-json-box-05 .rocker-items .rocker-text { position: absolute; bottom: 0; padding: 20px; padding-top: 70px; padding-right: 35px; width: 100%; background: rgb(0,0,0); background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.82) 100%); color: #fff; } .rocker-json-box-05 .rocker-items .rocker-text .rs-title{ display: inline; } .rocker-json-box-05 .rocker-items .rocker-text i{ display: inline; float: right; position: absolute; right: 20px; bottom:20px; font-size: 40px }  .rocker-json-box-02{ display: flex; } .rocker-json-box-02 .rocker-left{ width: 34%; padding: 60px 20px; padding-left: 125px; color: #ffffff; float: left; background-size: cover; display: flex; min-height: 100%; align-items: center; position: relative; } @media(max-width: 1100px){ .rocker-json-box-02 .rocker-left{ padding: 20px; padding-left: 30px } } .rocker-json-box-02 .rocker-left .rocker-ctleft{ position: relative; display: block; width: 100%; } .rocker-json-box-02 .rocker-left::before{ content:" "; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: .7; display: block; width: 100%; height: 100%; } .rocker-json-box-02 .rocker-right{ width: 66%; float: right; position: relative; display: inline-table; } @media(max-width: 930px){ .rocker-json-box-02{ display: block; } .rocker-json-box-02 .rocker-left,.rocker-json-box-02 .rocker-right{ width: 100%; float: none; } .rocker-json-box-02 .rockerpages-sizetitle{ text-align: center; } } .rocker-json-box-02 .rocker-right img{ width: 100%; height: auto; } .rocker-json-box-02 .rocker-des{ margin: 10px 0; padding: 10px 0; border-top: 1px solid; border-bottom: 1px solid; text-align: justify; } .rocker-json-box-02 .rocker-json-box .rocker-rows{ margin: 5px 0; cursor: pointer; } .rocker-json-box-02 .rocker-json-box .rocker-rows.active{ text-decoration: underline; font-weight: bold; } .rocker-json-box-02 .rocker-json-box .rocker-rows .r-sq{ padding-right: 5px }  .rocker-json-box-03{ padding-top:50px; background: #ffffff } .rocker-json-box-03 .rocker-top{ text-align: center; position: relative; max-width: 600px; width: 95%; margin: 50px auto } .rocker-json-box-03 .rocker-bottom{ padding-left: 250px; } @media(max-width: 1200px){ .rocker-json-box-03 .rocker-bottom{ padding-left: 50px } } .rocker-json-box-03 .rocker-bottom .rocker-items{ background: #e6e6e6; } .rocker-json-box-03 .rocker-ileft{ height: 100%; align-items: center; width: 30%; float: left; position: relative; } .rocker-json-box-03 .rocker-ileft::before{ content:" "; position: absolute; top:0; left: 0; height: 100%; width: 100%; background: #e6e6e6; } .rocker-json-box-03 .rocker-ileft .rocker-title{ font-weight: bold; } .rocker-json-box-03 .rocker-ileft .rocker-cte{ position: relative; z-index: 1; padding: 30px } .rocker-json-box-03 .rocker-ileft .rocker-cte .rocker-title{ font-size: calc(100% + 15px); display: block; position: relative; margin-bottom: 15px } .rocker-json-box-03 .rocker-ileft .rocker-cte .rocker-title::before{ height: 100%; width: 4px; display: block; content:" "; position: absolute; left: -34px; top:0; } .rocker-json-box-03 .rocker-iright{ width: 70%; float: right; position: relative; display: block; } .rocker-json-box-03 .rocker-iright img{ width: 100%; height: auto; } /*bg slider*/ .json-box-03-rwl .owl-nav{ position: absolute; left: -20px; top: 0; bottom: 0; margin: auto; display: grid; align-items: center; height: calc(40px + 40px); } button.rockerpages-json-box-03-next,button.rockerpages-json-box-03-prev{ width: 40px; height:40px; margin: 0px; opacity: .8; outline: none; margin: auto; background-color: #fff; border-radius: 100%; position: absolute; box-shadow: 1px 1px 0 2px #00000061; border: none; } button.rockerpages-json-box-03-prev{ top:50px; } button.rockerpages-json-box-03-next{ top:0; } button.rockerpages-json-box-03-next i,button.rockerpages-json-box-03-prev i{ font-size: 20px; line-height: 40px; } /*ed slider*/ @media(max-width: 900px){ .rocker-json-box-03 .rocker-bottom{ padding-left: 0px } .rocker-json-box-03 .rocker-iright,.rocker-json-box-03 .rocker-ileft{ width: 100%; float: none; } .json-box-03-rwl .owl-nav{ left: 0; right: 0; margin: auto; width: 100%; display: block; } button.rockerpages-json-box-03-prev,button.rockerpages-json-box-03-next{ top:0; bottom: 0; margin:auto; } button.rockerpages-json-box-03-prev{ left: 10px; } button.rockerpages-json-box-03-next{ right:10px; } }  .rocker-json-box-06{ overflow: hidden; padding:50px 0px; position: relative; } .rocker-json-box-06 .rocker-logo{ width: 250px; float: left; position: relative; } .rocker-json-box-06 .pl-wrabauto{ position: relative; z-index: 2 } .rocker-json-box-06 .rocker-logo img{ max-width: 100%; height: auto; } .rocker-json-box-06 .rocker-listjson{ width: calc(100% - 260px); float: right; } .rocker-json-box-06 .rocker-right-logo{ width: 250px; position: absolute; right: 0; top: 0; height: 100%; text-align: right; } .rocker-json-box-06 .rocker-right-logo img{ width: auto; height: 100%; } .rocker-listjson{ } .rocker-listjson .rocker-items{ width: calc(50% - 10px); margin: 5px; float: left; padding: 10px 40px; } .rocker-listjson .rocker-items:nth-child(3n){ clear: left; } .rocker-listjson .rocker-sq{ font-size: 50px; color:#1b3864; display: block; font-weight: bold; } .rocker-listjson strong{ color:#fac624; font-weight: bold; font-size: calc(100% + 5px); display: block; margin-bottom: 10px } .rocker-listjson .value{ display: block; } @media(max-width: 1400px){ .rocker-json-box-06 .rocker-logo{ width: 180px } .rocker-json-box-06 .rocker-listjson{ width: calc(100% - 190px) } .rocker-listjson .rocker-items{ padding: 10px 10px; } .rocker-listjson .rocker-sq{ font-size: 30px } } @media(max-width: 950px){ .rocker-json-box-06 .rocker-logo{ width: 100%; float: none; margin-bottom: 10px } .rocker-json-box-06 .rocker-listjson{ width: 100%; float: none; } .rocker-listjson .rocker-items{ width: 100%; float: none; padding: 10px 10px; } .rocker-listjson .rocker-sq{ font-size: 50px } .rocker-json-box-06 .rocker-right-logo{ display: none; } }  .rocker-text-box-02{ padding: 150px 0; background: #1b3864	} .rocker-text-box-02 .pri-left{ width: 40%; float: left; position: relative; } .rocker-text-box-02 .pri-left img{ width: 100%; height: auto; } .rocker-text-box-02 .pri-play-btn{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100px; height: 100px; color: #ffff; z-index: 4; margin: auto; font-size: 65px; border-radius: 100%; border: 1px solid; text-align: center; cursor: pointer; } .rocker-text-box-02 .pri-play-btn i{ line-height: 100px } .rocker-text-box-02 .pri-play-btn::after{ width: 100%; height: 100%; position: absolute; border: solid 1px rgba(255,255,255,0.8); content: ""; left: 0; top: 0; border-radius: 100%; opacity: 0; } .rocker-text-box-02 .pri-play-btn::after { animation: anitbtwo_border 1.4s 0.1ms infinite linear; -webkit-animation: anitbtwo_border 1.4s 0.1ms infinite linear; -moz-animation: anitbtwo_border 1.4s 0.1ms infinite linear; -o-animation: anitbtwo_border 1.4s 0.1ms infinite linear; } .rocker-text-box-02 .pri-right{ width: 50%; float: right; } .rocker-text-box-02 .pri-title{ font-size: 150px; color: #ffffff; font-weight: bold; } .rocker-text-box-02 .pri-name{ color: #ffffff; font-size: 70px; letter-spacing: 24px; } @media(max-width: 1450px){ .rocker-text-box-02 .pri-name{ font-size: 50px; letter-spacing: 10px } } .rocker-text-box-02 .pri-btn{ background: #fac624; color: #fff; width: 200px; font-size: 30px; display: block; border-radius: 10px; text-align: center; padding: 10px; font-weight: normal; margin-top: 20px } @media(max-width: 800px){ .rocker-text-box-02 .pri-left,.rocker-text-box-02 .pri-right{ width: 100%; float: none; margin-bottom: 20px; text-align: center; } .rocker-text-box-02 .pri-title{ font-size: 80px; } .rocker-text-box-02 .pri-name{ font-size: 30px; letter-spacing: 0 } .rocker-text-box-02 .pri-btn{ position: relative; margin: auto; } }@keyframes anitbtwo_border { 0% { transform: rotate(0deg) scale(1) skew(1deg); opacity: .2 } 20% { transform: rotate(0deg) scale(1.2) skew(1deg); opacity: .4 } 40% { transform: rotate(0deg) scale(1.3) skew(1deg); opacity: .8 } 60% { transform: rotate(0deg) scale(1.4) skew(1deg); opacity: .6 } 80% { transform: rotate(0deg) scale(1.5) skew(1deg); opacity: .4 } 100% { transform: rotate(0deg) scale(1.6) skew(1deg); opacity: .0 }}