/*********************************/

.slider_one_big_picture {
    position: absolute;
    width: 59%;
    height: 73%;
    /* margin: 13px auto; */
    margin-left: 22%;
    margin-top: 0%;
    user-select: none;
}

.slider_one_big_picture > * {
    transition: ease all 1s;
}

.slider_one_big_picture .hidden {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slider_one_big_picture .active {
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.slider_one_big_picture .prev1,
.slider_one_big_picture .next1 {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slider_one_big_picture .next1 {
    left: 100%;
}

.slider_one_big_picture .prev2,
.slider_one_big_picture .next2 {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0%;
    width: 0px;
    height: 100%;
    z-index: 0;
}

.slider_one_big_picture .next2 {
    left: 100%;
}

/*********************************/

.slider_one_big_2 {
    position: absolute;
    width: 50%;
    height: 25vw;
    max-width: 640px;
    max-height: 480px;
    margin-top: 9%;
    margin-left: 30%;
    display: block;
    user-select: none;
}

.slider_one_big_2 > * {
    transition: ease all 1s;
}

.slider_one_big_2 .hidden {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -100%;
    width: 100%;
    max-width: 640px;
    height: 100%;
    z-index: 0;
    box-shadow: 1px 1px 4px 2px rgba(0, 255, 255, 0.5);
}

.slider_one_big_2 .active {
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -50%;
    width: 100%;
    max-width: 640px;
    height: 100%;
    z-index: 10;
   
}

.slider_one_big_2 .prev1,
.slider_one_big_2 .next1 {
    opacity: 0.5;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -150%;
    width: 100%;
    max-width: 640px;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}

.slider_one_big_2 .next1 {
    left: 50%;
    margin-left: 50%;
}

.slider_one_big_2 .prev2,
.slider_one_big_2 .next2 {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -250%;
    width: 100%;
    max-width: 640px;
    height: 100%;
    z-index: 1;
}

.slider_one_big_2 .next2 {
    left: 50%;
    margin-left: 150%;
}

.slider_one_big_2 .prev3,
.slider_one_big_2 .next3 {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -50%;
    width: 100%;
    max-width: 640px;
    height: 100%;
    z-index: 0;
}

/*********************************/

/*********************************/

.slider_circle_10 {
    position: absolute;
    width: 100%;
    height: 65vh;
    margin: 0 auto;
    user-select: none;
    margin-top: -1%;
}

.slider_circle_10 > * {
    transition: ease all 1s;
}

.slider_circle_10 > div,
.slider_circle_10 .hidden {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width:50%;
    height: 50%;
    overflow: hidden;
}

.slider_circle_10 .active {
    opacity: 1;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -25%;
    width: 50%;
    height: 50%;
    z-index: 10;
   
}

.slider_circle_10 .prev1,
.slider_circle_10 .next1 {
    opacity: 0.9;
    position: absolute;
    top: 60%;
    left: 50%;
    margin-left: -45%;
    width: 25%;
    height: 25%;
    z-index: 9;
}

.slider_circle_10 .next1 {
    margin-left: 15%;
}

.slider_circle_10 .prev2,
.slider_circle_10 .next2 {
    opacity: 0.7;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50%;
    width: 15%;
    height: 15%;
    z-index: 8;
}

.slider_circle_10 .next2 {
    margin-left: 35%;
}

.slider_circle_10 .prev3,
.slider_circle_10 .next3 {
    opacity: 0.5;
    position: absolute;
    top: 35%;
    left: 50%;
    margin-left: -50%;
    width: 7%;
    height: 7%;
    z-index: 7;
}

.slider_circle_10 .next3 {
    margin-left: 43%;
}

.slider_circle_10 .prev4,
.slider_circle_10 .next4 {
    opacity: 0.3;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -40%;
    width: 3%;
    height: 3%;
    z-index: 6;
}

.slider_circle_10 .next4 {
    margin-left: 37%;
}

.slider_circle_10 .prev5,
.slider_circle_10 .next5 {
    opacity: 0.1;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -15%;
    width: 2%;
    height: 2%;
    z-index: 5;
}

.slider_circle_10 .next5 {
    margin-left: 13%;
}

/*********************************/

.slider_four_in_line {
    width: 100vw;
    height: 19.5vw;
    position: relative;
    margin: 0 auto;
    user-select: none;
}

.slider_four_in_line > * {
    transition: ease all 1s;
    overflow: hidden;
}

.slider_four_in_line .hidden {
    opacity: 0;
    z-index: 0;
    top: 0px;
    left: 50%;
}

.slider_four_in_line .active,
.slider_four_in_line .next1,
.slider_four_in_line .next2,
.slider_four_in_line .next3,
.slider_four_in_line .next4,
.slider_four_in_line .prev1 {
    position: absolute;
    width: 24%;
    height: 100%;
    top: 0px;
    left: 25%;
    z-index: 10;
    margin: 0 0.5%;
}

.slider_four_in_line .next1 {
    left: 50%;
}

.slider_four_in_line .next2 {
    left: 75%;
}

.slider_four_in_line .next3 {
    width: 0%;
    left: 100%;
    z-index: 0;
    opacity: 0;
}

.slider_four_in_line .next4 {
    left: 100%;
    width: 0%;
    z-index: 0;
    opacity: 0;
}

.slider_four_in_line .prev1 {
    position: absolute;
    width: 24%;
    height: 100%;
    top: 0px;
    left: 0%;
    z-index: 10;
    opacity: 1;
}

.slider_four_in_line .prev2,
.slider_four_in_line .prev3,
.slider_four_in_line .prev4 {
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0px;
    left: 0%;
    z-index: 0;
    opacity: 0;
}

/*********************************/

.slider_clock {
    width: 600px;
    height: 600px;
    position: relative;
    margin: 0 auto;
    user-select: none;
}

.slider_clock > * {
    transition: ease all 1s;
}

.slider_clock .active {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -125px;
    width: 400px;
    height: 250px;
    transform: rotate(0deg);
    opacity: 1;
    z-index: 10;
    overflow: hidden;
}

.slider_clock .next1,
.slider_clock .next2,
.slider_clock .next3,
.slider_clock .next4,
.slider_clock .next5,
.slider_clock .next6,
.slider_clock .next7,
.slider_clock .prev1,
.slider_clock .prev2,
.slider_clock .prev3,
.slider_clock .prev4,
.slider_clock .prev5,
.slider_clock .prev6,
.slider_clock .prev7,
.slider_clock .hidden {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96px;
    height: 60px;
    margin-top: 200px;
    margin-left: -48px;
    transform-origin: 48px -200px;
    transform: rotate(0deg);
    opacity: 1;
    overflow: hidden;
}

.slider_clock .next2 {
    transform: rotate(-30deg);
}

.slider_clock .next3 {
    transform: rotate(-60deg);
}

.slider_clock .next4 {
    transform: rotate(-90deg);
}

.slider_clock .next5 {
    transform: rotate(-120deg);
}

.slider_clock .next6 {
    transform: rotate(-150deg);
}

.slider_clock .next7 {
    opacity: 0;
    transform: rotate(-180deg);
}

.slider_clock .prev1 {
    transform: rotate(30deg);
}

.slider_clock .prev2 {
    transform: rotate(60deg);
}

.slider_clock .prev3 {
    transform: rotate(90deg);
}

.slider_clock .prev4 {
    transform: rotate(120deg);
}

.slider_clock .prev5 {
    transform: rotate(150deg);
}

.slider_clock .prev6 {
    transform: rotate(180deg);
}

.slider_clock .prev7 {
    opacity: 0;
    transform: rotate(210deg);
}

.slider_clock .hidden {
    opacity: 0;
    transform: rotate(180deg);
}


/*********************************/

.nav_indicators {
    position: absolute;
    left: 0px;
    width: 100%;
    text-align: center;
    z-index: 50000;
    margin-top: 53%;
}

.nav_indicators ul {
    position: static;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}

.nav_indicators ul li {
    position: static;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    cursor: pointer;
}

.nav_indicators ul li.active {
    position: static;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px;
    padding: 0;
    background: #555;
    color: #555;
    border: 2px solid #aaa;
    border-radius: 50%;
    cursor: pointer;
}

.next_button,
.prev_button {
    position: absolute;
    left: 100% !important;
    top: 50% !important;
    margin: -15px 0 0 -25px !important;
    width: 50px !important;
    height: 50px !important;
    border: 1px solid #808000 !important;
    background: #fff !important;
    opacity: 0.5 !important;
    z-index: 5000 !important;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    
}

.prev_button {
    position: absolute;
    left: 0% !important;
}

.next_button:hover,
.prev_button:hover {
    opacity: 1 !important;
}
.next_button:after,
.prev_button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    margin-top: -10px;
}

.next_button:after {
    border-left: 15px solid  #002569;
    border-right: 15px solid transparent;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    margin-left: -5px;
}

.prev_button:after {
    border-right: 15px solid  #002569;
    border-left: 15px solid transparent;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    margin-left: -25px;
}


div.slider > div:not(.nav_indicators):not(.next_button):not(.prev_button) {
    display: inline-block;
    overflow: hidden;
    /* background: rgba(0, 30, 62, 0.66); */
    box-sizing: border-box;
}
div.slider2 > div:not(.nav_indicators):not(.next_button):not(.prev_button) {
    background: rgba(253, 253, 253, 0.5);
    box-sizing: border-box;}
/******/
.mount{
    position: absolute;
    margin-top: 1%;
    margin-left: 11%;
    width: 100%;
}
.lamJ{
    position: absolute;
    width: 103%;
    margin-left: -2%;
    margin-top: 9%;
}
.nameM{
    position: absolute;
    font-size: 31px;
    font-weight: bold;
    width: 20%;
    color: rgb(16, 38, 103);
    height: 5vh;
    margin-left: 41%;
    margin-top: 7%;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.nameL{ 
    position: absolute;
    font-size: 25px;
    color: white;
    font-weight: bold;
    width: 20%;
    height: 5vh;
    margin-left: 42.5%;
    margin-top: 5%;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.borderM{
    position: absolute;
    width: 19%;
    margin-top: 3.5%;
    margin-left: 38%;
}
.poH{
    position: absolute;
    width: 100%;
    margin-top: 31%;
}
.poL{
    position: absolute;
    width: 100%;
    margin-top: 36%;
}
.LINE{
    position: absolute;
    width: 47%;
}
.LINEJL{
    margin-top: 40%;
    transform: rotate(-5deg);
    margin-left: -9%;
}
.LINEJR{
    margin-top: 40%;
    transform: rotate(5deg);
    margin-left: 57%;
}
.LINEFL{
    margin-top: 42.9%;
    transform: rotate(5deg);
    margin-left: -9%;
}
.LINEFR{
    margin-top: 42.9%;
    transform: rotate(-5deg);
    margin-left: 57%;
}
@media screen and (min-width: 300px) and (max-width:800px) {
    .slider_one_big_2 {width: 69%;height: 56%;margin-top: 47%;margin-left: 17%;}
    .texttr{font-size: 10px;}
    .nameM {font-size: 15px;margin-left: 37%;margin-top: 54%;}
    .hoverM2 {width: 22vh;margin-top: 32%;margin-left: 20%;}
    .hoverM3 {width: 21vh;margin-top: 34%;margin-left: 21%;}
    .borderM {width: 20%;margin-top: 53.5%;margin-left: 38%;}
    .LINEJL {margin-top: 90.5%; margin-left: -9%;}.LINEJR {margin-top: 90.5%;margin-left: 57%;}
    .LINEFR {margin-top: 93.5%; margin-left: 57%;}.LINEFL {margin-top: 93.5%;margin-left: -9%;}
    .nameL {font-size: 14px;margin-left: 41.5%;margin-top: 54%;}
    .slider_one_big_picture {width: 100%;height: 61%;margin-left: 0%;margin-top: 0%;}
   
    .next_button {left: 92% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
    .prev_button {left: 0% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
}
@media screen and (min-width: 500px) and (max-width:750px) {
    .slider_one_big_2 {width: 52%;
        height: 54%;
        margin-top: 8%;
        margin-left: 26%;
    }
    .texttr{font-size: 10px;}
    .nameM {font-size: 15px;margin-left: 43%;margin-top: 54%;}
    .hoverM2 {width: 22vh;margin-top: 32%;margin-left: 20%;}
    .hoverM3 {width: 21vh;margin-top: 34%;margin-left: 21%;}
    .borderM {width: 20%;margin-top: 53.5%;margin-left: 38%;}
    .LINEJL {margin-top: 90.5%; margin-left: -9%;}.LINEJR {margin-top: 90.5%;margin-left: 57%;}
    .LINEFR {margin-top: 93.5%; margin-left: 57%;}.LINEFL {margin-top: 93.5%;margin-left: -9%;}
    .nameL {font-size: 14px;margin-left: 41.5%;margin-top: 54%;}
    .slider_one_big_picture {width: 70%;height: 70%;margin-left: 17%;margin-top: 5%;}
   
    .next_button {left: 92% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
    .prev_button {left: 0% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
}
@media screen and (min-width: 750px) and (max-width:800px) {
    .slider_one_big_2 {width: 69%;height: 81%;margin-top: 13%;margin-left: 17%;}
    .texttr{font-size: 10px;}
    .nameM {font-size: 22px;margin-left: 40%;margin-top: 15%;}
    .hoverM2 {width: 24vh;margin-top: 7%;margin-left: 33%;}
    .hoverM3 {width: 21vh;margin-top: 10%;margin-left: 28%;}
    .borderM {width: 20%;margin-top: 23.5%;margin-left: 38%;}
    .LINEJL {margin-top: 60.5%; margin-left: -9%;}.LINEJR {margin-top: 60.5%;margin-left: 57%;}
    .LINEFR {margin-top: 63.5%; margin-left: 57%;}.LINEFL {margin-top: 63.5%;margin-left: -9%;}
    .nameL {font-size: 18px; margin-left: 43.5%; margin-top: 26%;}
    
   
    .next_button {left: 92% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
    .prev_button {left: 0% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
}
@media screen and (min-width: 1300px) and (max-width:1400px) {
    .slider_one_big_2 {
        
        height: 29vw;
       
    }
    
}
@media screen and (min-width: 1000px) and (max-width:1100px) {
    .slider_one_big_2 {    
        width: 50%;
        height: 62%;
        margin-top: 12%;
        margin-left: 30%;
    }
    
    .texttr{font-size: 10px;}
    .nameM {font-size: 22px;margin-left: 35%;margin-top: 15%;}
    .hoverM2 { width: 22vh;
        margin-top: 6%;
        margin-left: 30%;}
    .hoverM3 {width: 21vh;margin-top: 4%;margin-left: 31%;}
    .borderM {width: 20%;margin-top: 13.5%;margin-left: 38%;}
    .LINEJL {margin-top: 50.5%; margin-left: -9%;}.LINEJR {margin-top: 50.5%;margin-left: 57%;}
    .LINEFR {margin-top: 53.5%; margin-left: 57%;}.LINEFL {margin-top: 53.5%;margin-left: -9%;}
    .nameL {font-size: 18px;margin-left: 43.5%;margin-top: 16%;}
    .slider_one_big_picture {width: 100%;height: 80%;margin-left: 0%;}
   
    .next_button {left: 92% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
    .prev_button {left: 0% !important;top: 50% !important;margin: -14px 0 0 0px !important;width: 7% !important;height: 50px !important;}
}
