@import "color.min.less";
@import "animate.less";
@import "3rd/animate.css";
/*
chsname=["红","红橙","橙","橙黄","黄","黄草","草绿","草绿-绿","绿","绿-水绿","水绿","水绿-青","青","青蓝","蓝","蓝靛","靛","靛紫","紫","紫粉","粉","粉-洋红","洋红","洋红-红","灰"];
engname=["red","red-orange","orange","orange-yellow","yellow","yellow-chartreuse","chartreuse","chartreuse-green","green","green-aquamarine","aquamarine","aquamarine-cyan","cyan","cyan-blue","blue","blue-indigo","indigo","indigo-purple","purple","purple-pink","pink","pink-violetred","violetred","violetred-red","gray"];
colors=["re","ro","or","oy","ye","yc","ch","cg","gr","ga","aq","ac","cy","cb","bl","bi","in","ip","pu","pp","pi","pv","vi","vr","gy"];
*/
//ani
.ani(@speed:.5s){ transition: all @speed cubic-bezier(0.78, 0.02, 0.2, 1), z-index 0s 0.12s;}
@ease: cubic-bezier(0.25, 0.1, 0.25, 1.0);
@linear: cubic-bezier(0.0, 0.0, 1.0, 1.0);
@ease-in: cubic-bezier(0.42, 0, 1.0, 1.0);
@ease-out: cubic-bezier(0, 0, 0.58, 1.0);
@ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0);
.fixfloat{&:after{content:"."; height:0; display:block; visibility: hidden; clear:both;}}
.fullbox{top:0; right:0; bottom:0; left:0;}
.fae{display: inline-block;font-family: 'Font Awesome 5 Pro';font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.thidden{white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
//border
.bd(@px:1px,@col:#ccc){border:@px solid @col;}
.bdb(@px:1px,@col:#ccc){border-bottom:@px solid @col;}
.bdt(@px:1px,@col:#ccc){border-top:@px solid @col;}
.bdr(@px:4px){border-radius:@px;}
.bxs(@x:0,@y:0,@s:10px,@p:20%){box-shadow:@x @y @s 0 fade(#000,@p);}
.block-group{display:table;
  li{display:table-cell; width: 1%;
    .mui-btn{width: 100%;}
  }
}
.fix-cx{transform: translateX(-50%);}
.fix-cy{transform: translateY(-50%);}
.fix-c{transform: translateX(-50%) translateY(-50%);}
.placeholder(@color:@gy-l3){
    &::-webkit-input-placeholder {color:@color;}
    &:-moz-placeholder { color:@color; opacity:  1; }
    &::-moz-placeholder { color:@color; opacity:  1;}
    &:-ms-input-placeholder {  color:@color;}
}
//transform: translateY(-50%);
//.badge-zz{background-color: #b699ce;}
//.badge-vip{background-color: red;}
//body{background-color: @gy-l1;}
img{.bdr(2px);}
/*header css start*/
.tooltip{
    .tooltip-inner{white-space: nowrap;}
}
.mCustomScrollbar{overflow: visible!important;
    .mCSB_inside{
        >.mCSB_container{margin-right: 0;}
        .mCSB_scrollTools_vertical{width: 5px;}
    }
}



.desktop{
    .center-stage{position: absolute; left:50%; top:50%; margin-left:-500px ; margin-top: -300px;width: 1000px; height:600px;}
    .full-box{width: 2000px; height:1100px; position: fixed; top:50%; left:50%; margin-left:-1000px; margin-top:-550px ;
        .full-bg{width: 100%; height: 100%;}
    }
}

.center-stage{
    .logo-wrapper{margin:0 auto; height:120px; width: 223px; position: relative; 
        .logo{height:100px;}
        //.logo{width: 60px;  display:block; position: absolute; left:0px; top:0;}
        .desc{text-align: right;}
        .chs{color:@wh; font-size: 2rem; font-family: SimHei; font-weight: bold;padding-top: 5px;}
        .site{color:@wh; font-size: 1.35rem; font-family: arial;}
        .donate-us{right:-120px; top:25px; font-size: 1.2rem; .ani; cursor: pointer; position: absolute; z-index: 9; background-color: @re-l6; color:@wh; .bdr(0 100px 100px 0 ); text-align: center; width: 120px; height:50px; line-height: 48px;
            .fa{margin-right: 5px;}
            &:before{content:" "; position: absolute; left:0; top:-25px; height:100px; width: 2px; background: linear-gradient(fade(@bk,0%),fade(@bk,100%),fade(@bk,0%));}
            &:hover{background-color: @re-l5; }
        }
    }
    .copyright{font-size: 1rem; color:fade(@wh,30%); line-height: 2rem; .fr{float: right;}}
}

.aniin {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.desktop{
    .col-mark{.ani;
        &:hover{transform:scale(1.08);}
    }
    .box-mark{background-color: @bl-l5; margin: 15px 0; padding:15px;color:@wh; position: relative; overflow: hidden; .bdr(8px); cursor: pointer;
        p{ 
            &.title{font-size: 1.3rem;white-space: nowrap;font-weight: bold; .ani; position: relative;}
            &.desc{.ani; position: relative;}
        }
        .fa,.fal,.fab{font-size: 3rem; position: absolute; bottom:10px; right:10px; color:fade(@wh,40%);}
        &.box-h1{height:130px;}
        &.box-h2{height:290px;}
        &.box-min{height:50px;}
        &.box-min-1st{margin-bottom: 30px;}
        //@ro-l4
        &.box-n1{background-color: @cg-m4;
            .fa{font-size: 6rem; right:25px; bottom:25px;} 
            .fab{font-size: 2rem; bottom:60px; right:39px;}
            img{opacity: 0; width:127px; height:100%;.bdr(8px); .ani; position: absolute; top:0; right:0;}
            &:hover{img{opacity: 1;}}
        }
        &.box-n2{ background-position: center center;
            background-color: @or-l4;
            .title{text-align: center;}
            .fa{font-size: 4rem; bottom:20px; right:54px;  color:fade(@wh,80%);}
            .fab{font-size: 1.5rem; bottom:43px; right:64px; color:fade(@wh,80%);}
            img{opacity: 0; width: 100%; height:100%;.bdr(8px); .ani; position: absolute; .fullbox;}
            &:hover{img{opacity: 1;}}
        }
        &.box-n3{background-color: @cy-m4;
            .title{font-size: 1.1rem;}
            .fa{font-size: 2rem; bottom:10px; right:10px; }
            &:hover{.fa{.tada; .aniin;}}
        }
        &.box-nx{background-color: @bl-m4;
        .title{font-size: 1.1rem;}
            .fa{font-size: 2rem; bottom:10px; right:10px; }
            &:hover{.fa{.tada; .aniin;}}
        }
        &.box-n4{background-color: @ip-d4; padding-right:150px; 
            .fa{font-size: 5.5rem; right:30px; bottom:30px;}
            &:hover{.fa{.pulse; .aniin;}}
        }
        
        &.box-n5{background-color: @bl-l4; background-color: @cb-l6; position: relative;
            .fal{position: absolute; left:50%; top:25%; font-size: 4rem; color:@wh; .fix-cx; bottom:auto; right:auto; .ani;}
            .titlechs{position: absolute; left:50%; top:48%; font-size: 1.6rem; color:@wh; .fix-cx; white-space: nowrap; text-align: center; .ani;
                .eng{display:block;padding-top: 10px;}
            }
            //.title{position: absolute; bottom:40px; right:20px; text-align: right; .ani;}//text-shadow:0 0 4px @wh;
            .desc{position: absolute; bottom:10px;left:0; right:0; text-align: center; .ani;}
            &:before{content:" ";position: absolute; .fullbox; opacity: 0; .ani;}
            &:hover{&:before{opacity: 1;} .desc{opacity: 0;} .titlechs,.fal{color:@bk;}}
        }
        &.box-n6{background-color: @re-l4; .desc{white-space: nowrap; font-size: .9rem;}
            img{opacity: 0; width: 100%; height:100%;.bdr(8px); .ani; position: absolute; .fullbox;}
            &:hover{img{opacity: 1;}}
        }
        &.box-n7{background-color: @aq-m5; 
            img{opacity: 0; width: 100%; height:100%;.bdr(8px); .ani; position: absolute; .fullbox;}
            &:hover{img{opacity: 1;}}
        }
        
        &.box-n8{background-color: @bl-l7; padding-right:100px;
             .fab{font-size: 5rem; bottom:30px; right:30px; } &:hover{.fa,.fab{.tada; .aniin;}}}//.fab{font-size: 13rem; bottom:-25px; right:-20px; }
        &.box-n9{background-color: @ro-l4; background-position: center center; 
             .fab{font-size: 6rem; bottom:25px; right:30px; } &:hover{.fa,.fab{.tada; .aniin;}}}//.fab{font-size: 13rem; bottom:-25px; right:-20px; }
        &.box-n10{background-color: @bl-l5;
            .mail{opacity: 0;.ani; background-color: @bl-l5; z-index: 10; position: absolute; .fullbox; text-align: center;
                .fa{position: relative; display:block; bottom:auto; right:auto; margin: 10px 0;}
            }
            .fa{bottom:10px; right:10px;} 
            &:hover{
                .mail{opacity: 1;.fa,.fab{.swing; .aniin;}}
            }
        }//.fa{bottom:10px; right:10px;}
        &.box-n11{background-color: @pi-m4;
            .title{font-size: 1.1rem;}
            .fa{font-size: 2rem; bottom:10px; right:10px; }
            &:hover{.fa{.tada; .aniin;}}
        }
        &.box-n12{background-color: @in-m7;
            .title{opacity: 0;}
            img{height: 40px; position: absolute; top:5px; left:40px; }
            &:hover{img{.tada; .aniin;}}
        }
    }
}

.mobile{
    body{background-image: none!important; background-color: @gy-d7;}
    .full-box{
        .full-bg{display: none;}
    }
    .center-stage{padding:20px; max-width: 450px; margin:0 auto;
        .logo-wrapper{margin: 10px 0 0 10px;
            .logo{height:80px; margin: 10px 0 0 20px;}
            .donate-us{right:-100px;}
        }
    }
    .col-mark{padding:10px;}
    .box-mark{background-color: @bl-l5; padding:15px;color:@wh; position: relative; overflow: hidden; .bdr(8px); cursor: pointer;
        p{ 
            &.title{font-size: 1.3rem;white-space: nowrap;font-weight: bold; .ani; position: relative;}
            &.desc{.ani; position: relative;}
        }
        .fa,.fal,.fab{font-size: 3rem; position: absolute; bottom:10px; right:10px; color:fade(@wh,40%);}
        &.box-h1{height:130px;}
        &.box-h2{height:290px;}
        &.box-min{height:50px;}
        &.box-min-1st{margin-bottom: 30px;}
        //@ro-l4
        &.box-n1{ background-position: right center; background-repeat: no-repeat; background-color: #81cb6b;
            .fa{font-size: 5.5rem; right:40px; bottom:27px;  color:fade(@wh,60%);} 
        }
        &.box-n3{background-color: @cy-m4;background-color: @ro-l4;
            .title{font-size: 1.3rem;}
            .fa{bottom:10px; right:10px;} &:hover{.fa,.fab{.swing; .aniin;}}
        }
        
        &.box-n4{background-color: @ip-l3; padding-right:150px; 
            .fa{font-size: 5.5rem; right:30px; bottom:30px;}
            &:hover{.fa{.pulse; .aniin;}}
        }
        
        &.box-n5{background-color: @bl-l4; background-color: @cb-l6; position: relative; background-size:100% auto; background-position: center center;}
        &.box-n6{background-color: @re-l4; .desc{white-space: nowrap; font-size: .9rem;}}
        &.box-n7{background-color: @aq-m5;}
        
        &.box-n10{background-color: @bl-l5;
            .mail{opacity: 0;.ani; background-color: @bl-l5; z-index: 10; position: absolute; .fullbox; text-align: center;
                .fa{position: relative; display:block; bottom:auto; right:auto; margin: 10px 0;}
            }
            .fa{bottom:10px; right:10px;} 
            &:hover{
                .mail{opacity: 1;.fa,.fab{.swing; .aniin;}}
            }
        }//.fa{bottom:10px; right:10px;}
        &.box-n11{background-color: @pi-m4;.fa{bottom:10px; right:10px;} &:hover{.fa,.fab{.swing; .aniin;}}}
        &.box-n12{background-color: @in-m7;
            .title{position: absolute; bottom:10px; left:0; right:0; text-align: center;}
            img{height: 80px; position: absolute; top:5px; left:50%; .fix-cx; }
        }
    }
}

.donate-us{height:auto!important;
    .ui-limit{width: 1000px; margin: 0 auto;}
    .ui-header{padding:0 0 40px 0;
        .logo-wrapper{margin:0 auto; height:120px; width: 223px; position: relative; 
            .logo{height:100px; margin-top: 20px;}
        }
    }
    .ui-content{padding: 40px 0; position: relative; background-color: fade(@bk,50%); 
        .desc-wrapper{
            p{color:@wh; font-size: 1.2rem;margin-bottom: 20px;
                &.title{font-size: 1.8rem; font-weight: bold;}
                &:last-child{margin-bottom: 0;}
                a{font-size: 1.4rem; margin:20px 20px 0 0;}
            }
        }
        .row-table{padding: 20px 0;}
    }
    .ui-block{padding:40px 0;
        .main-title{font-size: 1.4rem; color:@wh; margin-bottom: 40px;}
        .row{
            .col-mark2{
                .box-location{background-color: @wh; padding:15px;color:@bk; position: relative; overflow: hidden; .bdr(8px); cursor: pointer;
                    .title{ font-size: 1.8rem;}
                    .desc{word-break: break-all; margin-right: 100px;}
                    textarea{border: none;resize:none;}
                    .logo{ width: 80px; height:80px; position: absolute; right:15px; top:15px;}
                    .qrc{width:150px; height: 150px; display: block;margin: 60px auto;}
                }
            }
        }
    }
}

.mobile{
    .donate-us{
        .ui-limit{width: 100%; padding:0 20px;}
        .ui-content{
            .row-table{
                .col-md-3{margin-bottom: 40px;}
            }
        }
        .ui-block{
            .row{
                .col-mark2{
                    .box-location{margin-bottom: 20px;}
                }
            }
        }
    }
}

@media (max-width: 1201px){
    .desktop{
        .donate-us{
            .ui-limit{width: 100%; padding:0 20px;}
            .ui-content{
                .row-table{
                    .col-md-3{margin-bottom: 40px;}
                }
            }
            .ui-block{
                .row{
                    .col-mark2{
                        .box-location{margin-bottom: 20px;}
                    }
                }
            }
        }
    }
}
@media (max-width: 321px) {
  .mobile .center-stage .logo-wrapper{
    width: 200px;margin:0;
  } 
  .mobile .center-stage .logo-wrapper .logo {
      height: 70px;
    }
    .mobile .center-stage .logo-wrapper .donate-us{
        right:-80px;width: 100px;
    }
}