/*header begin*/

/*header {width:100%;height:92px;position: fixed;top: 0;left: 0;z-index:99999;transition: all 0.6s ease; border-bottom:2px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.6); }

.boxoi{ width:100%; height:auto; padding:0 160px;}

.logo{ float:left; position:relative; margin-top:16px;}

.logo img{ display:block; margin:0 auto; max-width:100%; float:left; margin-right:20px;}

.logo a{ color:#fff; font-size:30px; letter-spacing:2px;}

.navo{ float:right;}

.navo ul{ float:left; margin-right:183px;}

.navo li{ float:left; margin-right:46px; height:92px; position:relative;transition: all 0.5s ease;}

.navo li a{ display:block; color:#333333; font-size:16px;line-height: 92px;}

.navo li:after{ content:''; position:absolute; left:0; bottom:20px; width:0px; height:2px; background:#fe5700;transition: all 0.5s ease;}

.navo li:hover:after{ width:100%;}

.navo li.lok:after{ width:100%;}

.navo li.qcbj{ margin-right:0px;}

.navo span{ display:block; float:right; padding-top:37px;}

.navo span img{ vertical-align:middle; margin-right:16px;}

.select{width:76px; height:20px;background: transparent; border:none; color:#001f45; font-size:12px;-webkit-appearance: none;-moz-appearance: none;border-bottom: 1px solid #3d6086; background:url(../images/bg.png) no-repeat right center; line-height:12px; }

header.smaller { width:100%;height:92px; background:#fff; z-index:999999999 }


.dnou2{width:200px; height:0px; overflow:visible;position: absolute;left:-67px; opacity:0;visibility:hidden;background:rgba(255,255,255,0.6); z-index:9999;line-height:40px; top:92px;transition: all 0.8s ease; z-index:999999;text-align:center;overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

.navo ul li.le .dnou2 a{ display:block; background:none; color:#001f45; font-size:14px;padding:0px;line-height:40px;text-align:center;}

.navo ul li.le .dnou2 a:hover{ background:none; color:#fe5700; font-weight:normal;}

.navo ul li.le:hover .dnou2 {opacity: 1;visibility:visible;height:auto; width:200px;padding:10px 5px;}


@media(max-width:1680px){

.navo ul{ margin-right:36px;}	

.boxoi{ padding:0 100px;}

}

@media(max-width:1440px){

.navo ul{ margin-right:36px;}	

.boxoi{ padding:0 60px;}

.navo li{ margin-right:30px;}

}

@media(max-width:1366px){

.navo li{ margin-right:30px;}	

}

@media(max-width:1280px){

.navo li{ margin-right:20px;}	

}

@media(max-width:1024px){

.boxoi{ padding:0 30px;}	
.navo{display:none;}

}

@media(max-width:414px){

.boxoi{ padding:0 15px; padding-left:0;}	

}*/
/*header*/
.header{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;
	margin: auto;
	width: 100%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
	padding: 15px 0px;
	background: rgb(255,255,255,0.5);
}
.header.alter, .header.white{
	background: #FFFFFF;
}
.header.alter{
	padding: 0;
}
.header.white{
	box-shadow: 0px 3px 20px 0px rgba(12, 18, 107, 0.05);
}
.header .content{
	padding-left: 8.335%;
	padding-right: 4%;
}
.header .box{
	text-align: center;
	font-size: 0;
}
.header .logo{
	float: left;
}
.header .logo a{
	/*height: 120px;
	line-height: 120px;*/
	height: 65px;
/*	line-height: 90px;*/
margin-top: 20px;
display: block;
    
}
.header .logo a img{
}
.header .logo a img.logo2{
	display: none;
}
.header.alter .logo a img.logo1,
.header.white .logo a img.logo1{
	display: none;
}
.header.alter .logo a img.logo2,
.header.white .logo a img.logo2{
	display: inline-block;
}
.header .nav{
	display: inline-block;
}
.header .nav>ul>li{
	float: left;
	padding: 0px 18px;
	list-style: none;
}
.header .nav>ul>li.other{
	position: relative;
}
.header .nav>ul>li>a{
	color: #000;
	font-size: 20px;
	line-height: 90px;
}
.header.alter .nav>ul>li>a, .header.white .nav>ul>li>a{
	color: #666666;
}
.header .nav>ul>li:hover>a, .header .nav>ul>li.on a:hover{
	position: relative;
	color: #fe5700;
	list-style: none;
}
.header.alter .nav>ul>li:hover>a, 
.header.alter .nav>ul>li.on a:hover,
.header.white .nav>ul>li:hover>a, 
.header.white .nav>ul>li.on a:hover{
	color: #3f509f;
}
.header .nav>ul>li:hover>a::before, .header .nav>ul>li.on a:hover::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(247,247,247,0.9);list-style: none;
}
.header.alter .nav>ul>li:hover>a::before, 
.header.alter .nav>ul>li.on a:hover::before,
.header.white .nav>ul>li:hover>a::before, 
.header.white .nav>ul>li.on a:hover::before{
	display: none;
	list-style: none;
}
/*鏈嶅姟鍐呭涓嬫媺鑿滃崟*/
.navcell{
	position: absolute;
    top: 105px;
    left: 50%;
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
    width: 100%;
	/*height: -moz-calc(100vh - 64px);
	height: -webkit-calc(100vh - 64px);
	height: calc(100vh - 64px);*/
    overflow-x: hidden;
	overflow-y: auto;
    display: none;
    border-top: #eeeeee solid 1px;
}
.header.alter .navcell{
	top: 90px;
}
.navcell .cellbox{
	position: relative;
	padding-left: 8.335%;
	padding-right: 4%;
	overflow: hidden;
	background: rgba(247,247,247,0.9);
}
.navcell .l-box{
	float: left;
	width: 20%;
	padding-right: 4.3%;
	/*border-right: #eeeeee solid 1px;*/
	text-align: right;
	padding-top: 9999px;
	margin-top: -9999px;
	overflow: hidden;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.navcell .l-box .txt{
	display: inline-block;
	max-width: 100%;
	text-align: left;
	padding-top: 45px;
}
.navcell .l-box .txt .t1{
	color: #000000;
	font-size: 16px;
	font-weight: bold;
}
.navcell .l-box .txt .t1 a{
	color: #000000;
}
.navcell .l-box .txt .t1 a img{
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}
.navcell .l-box .txt .t2{
	margin-top: 27px;
	color: #999999;
	font-size: 14px;
}
.navcell .r-box{
	float: left;
	width: 80%;
	padding-left: 3.6%;
	padding-bottom: 20px;
	text-align: left;
	border-left: #eeeeee solid 1px;
	padding-top: 9999px;
	margin-top: -9999px;
	overflow: hidden;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.navcell .r-box .tit{
	padding-left: 18px;
	padding-top: 42px;
	color: #000000;
	font-size: 20px;
	font-weight: bold;
}
.navcell .r-box ul{
	margin-top: 25px;
}
/*20210705*/
.navcell .r-box ul{
	float: left;
	width: 90%;
	padding-right: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.navcell .r-box ul li{
	float: left;
	width: 32.33%;
	margin-left: 1%;
	margin-bottom: 9px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.navcell .r-box ul li a{
	position: relative;
	padding-left: 18px;
	font-size: 16px;
	color: #444444;
	line-height: 1.8;
}
.navcell .r-box ul li a:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 100%;
	background: url(../images/xright1.png) top 9px left no-repeat;
	background-size: 6px 12px;
	opacity: 0;
	transform: translateX(-100%);
	transition: all 0.4s ease;
}
.navcell .r-box ul li a:hover:before{
	opacity: 1;
	transform: translateX(0);
}
.navcell .r-box ul li a:hover{
	color: #3f509f;
}
/**/
.header .drop-down{
	position: absolute;
    top: 90px;
    left: 50%;
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 160px;
   /* overflow: hidden;*/
    background: rgba(247,247,247,0.9);
    display: none;
}
.header .drop-down a{
	position: relative;
	display: block;
	color: #666666;
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	padding: 16px 16px;
	/*overflow: hidden;*/
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.header .drop-down a:hover{
	color: #3d509f;
	/*background: #f3f3f3;*/
}
.header .drop-down a:hover::before{
	content: '';
	position: absolute;
	left: 50%;
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	padding: 0px 5px;
	/*background: #FFFFFF;*/
	background: rgba(247,247,247,0.9);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.header .drop-down a span{
	position: relative;
	display: inline-block;
}
.header .drop-down a span::after{
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 100%;
    background: url(../images/xright1.png) center left no-repeat;
    background-size: 6px 12px;
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: all 0.4s ease;
}
.header .drop-down a:hover span::after{
    opacity: 1;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
}
.header .drop-down a .t1{
	font-size: 16px;
	color: #191E4C;
	line-height: 22px;
	text-align: left;
	padding: 0px 30px;
}
.header .drop-down a .t2{
	margin-top: 12px;
	font-size: 14px;
	color: #687990;
	line-height: 20px;
	text-align: left;
	padding: 0px 30px;
	white-space: nowrap;
}
.head-other{
	float: right;
}
.head-other .call{
	float: left;
	height: 90px;
	line-height: 90px;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: bold;
}
.header.alter .head-other .call, .header.white .head-other .call{
	color: #3f509f;
}
.head-other .call img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}
.head-other .call img.ic2{
	display: none;
}
.header.alter .head-other .call img.ic1, .header.white .head-other .call img.ic1{
	display: none;
}
.header.alter .head-other .call img.ic2, .header.white .head-other .call img.ic2{
	display: inline-block;
}
/*璇█閫夋嫨*/
.head-nation{
	float: left;
	position: relative;
	margin-left: 30px;
}
.head-nation .current{
	height: 90px;
	line-height: 90px;
}
.head-nation .current .name{
    font-size: 18px;
	color: #FFFFFF;
    line-height: 2;
    padding-right: 30px;
    background: url(../images/s-triangle.png) right center no-repeat;
    vertical-align: middle;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.header.alter .head-nation .current .name, 
.header.white .head-nation .current .name{
	color: #191E4C;
	background: url(../images/s-triangle1.png) right center no-repeat;
}
.head-nation ul{
	display: none;
	position: absolute;
	left: 50%;
	top: 80px;
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
    background-color: #FFFFFF;
}
.head-nation ul li a{
	display: block;
    font-size: 16px;
    color: #666666;
    line-height: 2;
    min-width: 90px;
    text-align: center;
    padding: 0px 15px;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.head-nation ul li a:hover{
	color: #2B33AA;
}
/**/
/*.m-header{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background: #FFFFFF;
}
.m-header .logo{
	float: left;
}
.m-header .logo a{
	height: 60px;
	line-height: 60px;
}
.m-header .logo a img{
	max-height: 30px;
}*/
.menubtn{
	display: none;
	float: right;
	width: 50px;
    height: 60px;
    background: url(../images/menu-icon1.png) center right no-repeat;
    -moz-background-size: 30px 30px;
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
    cursor: pointer;
}
.header.white .menubtn, .header.alter .menubtn{
	background: url(../images/menu-icon1.png) center right no-repeat;
    -moz-background-size: 30px 30px;
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
}
.menubtn.on{
    background: url(../images/menu-icon2.png) center right no-repeat;
    -moz-background-size: 30px 30px;
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
}
.header.white .menubtn.on, .header.alter .menubtn.on{
	background: url(../images/menu-icon2.png) center right no-repeat;
    -moz-background-size: 30px 30px;
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
}
.m-nav{
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	height: calc(100% - 60px);
	background: #fff;
	display: none;
	z-index: 99;
	overflow-y: scroll;
}
.m-nav .nav-list{
	padding-top: 30px;
}
.m-nav .nav-list>li{
	padding: 0 5%;
	text-align: left;
}
.m-nav .nav-list>li>a, .m-nav .nav-list .one-level{
	font-size: 18px;
	color: #666666;
	display: block;
	height: 50px;
	line-height: 50px;
}
.m-nav .nav-list>li>a:hover, .m-nav .nav-list .one-level.on, .m-nav .nav-list .one-level:hover{
	color: #3d509f;
}
.m-nav .nav-list li a .tit{
	color: #222222;
}
.m-nav .nav-list li a:hover .tit{
	color: #3d509f;
}
.m-nav .m-subnav{
	display: none;
}
.m-nav .m-subnav ul li>a, .m-nav .m-subnav ul li .two-level{
	display: block;
	font-size: 16px;
	color: #999999;
	padding-left: 15px;
	height: 40px;
	line-height: 40px;
}
.m-nav .m-subnav ul li a:hover{
	color: #3d509f;
}
.m-nav .subnav_2{
	padding-left: 30px;
	display: none;
}
.m-nav .subnav_2 .subnav_2li>a, .m-nav .three{
	display: block;
	font-size: 16px;
	color: #666666;
	height: 40px;
	line-height: 40px;
}
.m-nav .subnav_3 a{
	display: block;
	font-size: 15px;
	line-height: 2;
	color: #999999;
}
.m-nav .subnav_3{
	display: none;
	padding: 0px 15px;
}
@media only screen and (max-width: 1200px){
    
    .menubtn{
		display: block;
	}
	.header{
		padding: 0;
		background: #FFFFFF;
	}
	.header .logo a{
		height: 50px;
		line-height: 50px;
		margin-top: 15px;
	}
	.header .logo a img{
		max-height: 35px;
	}
	.header .logo a img.logo1{
		display: none;
	}
	.header .logo a img.logo2{
		display: inline-block;
	}
	.header .nav, .head-other{
		display: none;
	}
    
}

@media only screen and (max-width: 1680px){
    
    .header .content{
		padding-left: 4%;
	}
	.header .nav>ul>li{
		padding: 0px 12px;
	}
	.header .nav>ul>li>a{
		font-size: 17px;
	}
	.head-other .call{
		font-size: 22px;
	}
	.head-other .call img{
		width: 32px;
	}
	.head-nation .current .name{
		font-size: 17px;
	}
	.head-nation ul li a{
		font-size: 17px;
	}
}

/*header end*/



/*fotter begin*/

.box8{ clear:both; width:100%; height:auto; overflow:hidden; background:#38bbcd; padding:60px 0 0 0 ;}

.fotter_t{ height:auto; overflow:hidden; border-bottom:1px solid #fff; padding-bottom:50px; margin-bottom:20px;}

.fotter_c{ height:auto; overflow:hidden; padding-bottom:20px;}

.fot_cl{ float:left; width:92%; height:auto; padding-top:18px;}

.fot_cl p{ clear:both; line-height:37px; color:#fff;}

.fot_cl p span{ display:block; float:left; width:20%; color:#fff; font-size:18px; }

.fot_cl p i{ display:block; color:#fff; font-size:14px; float:left;}

.fot_cl p i.jib{ width:20%;}

.fot_cl p i.jib1{ width:14%;}

.fot_cl p i.jib2{ width:15%;}

.fot_cl p i.jib3{ width:16%;}

.fot_cl p a{ color:#fff; margin-right:20px;}

.fot_cr{ float:right; width:8%; height:auto;}

.fot_cr p{ text-align:center; line-height:24px; color:#fff; font-size:14px;}

.fot_cr p img{ display:block; max-width:100%; margin:0 auto; margin-bottom:5px;}

@media(max-width:1366px){

.fot_cl p i.jib{ width:36%;}

.fot_cl p i.jib3{ width:16%;}	

}

@media(max-width:1280px){

.fot_cl p i.jib{ width:38%;}

.fot_cl p i.jib3{ width:16%;}	

}

@media(max-width:1024px){

.box8{ padding-top:40px;}

.fotter_t{ padding-bottom:20px;}

.fot_cl{ width:100%;}

.fot_cl p span{ display:block; width:100%;}	

.fot_cl p i.jib{ width:40%;}

.fot_cl p i.jib1{ width:20%;}

.fot_cl p i.jib2{ width:20%;}

.fot_cl p i.jib3{ width:20%;}

.fot_cr{ display:block; width:100%; padding-top:15px;}

}

@media(max-width:768px){

.box8{ padding-top:40px;}

.fotter_t{ padding-bottom:20px;}

.fot_cl{ width:100%;}

.fot_cl p span{ display:block; width:100%;}	

.fot_cl p i.jib{ width:100%;}

.fot_cl p i.jib1{ width:33.33%;}

.fot_cl p i.jib2{ width:33.33%;}

.fot_cl p i.jib3{ width:33.33%;}

.fot_cr{ display:block; width:100%; padding-top:15px;}

}

@media(max-width:414px){

.box8{ padding-top:40px;}

.fotter_t{ padding-bottom:20px;}

.fot_cl{ width:100%;}

.fot_cl p span{ display:block; width:100%;}	

.fot_cl p i.jib{ width:100%;}

.fot_cl p i.jib1{ width:100%;}

.fot_cl p i.jib2{ width:100%;}

.fot_cl p i.jib3{ width:100%;}

.fot_cr{ display:block; width:100%; padding-top:15px;}

}

.box8_1{ clear:both; width:100%; height:auto; line-height:75px; border-top:1px solid #fff;}

.box8_1 span{ display:block; float:left; color:#fff; font-size:14px;}

.box8_1 font{ display:block; float:right; color:#999999; font-size:14px;}

.box8_1 font a{ color:#999999; font-size:14px;}

@media(max-width:768px){

.box8_1{ line-height:35px; padding:10px 0; overflow:hidden;}

.box8_1 span{ display:block; float:left; color:#fff; font-size:14px; width:100%;}

.box8_1 font{ display:block; float:right; color:#999999; font-size:14px; width:100%;}



}

/*fotter end*/



.toxn{ display:block; margin:0 auto; text-align:center;}



.cd-popup1 {

    position: fixed;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;

    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;

    transition: opacity 0.3s 0s, visibility 0s 0.3s;

    z-index:99999999;

}

.cd-popup1.is-visible1 {

    opacity: 1;

    visibility: visible;

    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;

    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;

    transition: opacity 0.3s 0s, visibility 0s 0s;

}

.cd-popup-container1 {

    position: relative;

    width:39vw;;

    margin:7.5vw auto;

    height:auto;

    background: #FFF;

  -webkit-transform: translateY(-60px);

  -moz-transform: translateY(-60px);

  -ms-transform: translateY(-60px);

  -o-transform: translateY(-60px);

  transform: translateY(-60px);

    -webkit-backface-visibility: hidden;

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    transition-property: transform;

    -webkit-transition-duration: 0.3s;

    -moz-transition-duration: 0.3s;

    -ms-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

	padding:3.13vw;

	border-radius:10px;

}

.cd-popup-close1{ position: absolute;right:10px;top:18px; z-index: 10;width:12px;height:10px; background:url(../images/bg6_1.png) no-repeat; display: block;}

.is-visible1 .cd-popup-container1 {

	-webkit-transform: translateY(0);

  -moz-transform: translateY(0);

  -ms-transform: translateY(0);

  -o-transform: translateY(0);

  transform: translateY(0);

  }



.toxn{ height:auto; position:relative; text-align:left;}

.toxn h4{ color:#000000; font-size:0.94vw; line-height:1.23vw; margin-bottom:1.04vw;}

.toxn p{ line-height:1.23vw; color:#000000; font-size:0.73vw;}

@media(max-width:1024px){

.cd-popup-container1{ width:90vw; padding:20px;}	

.toxn h4{ color:#000000; font-size:18px; line-height:24px; margin-bottom:20px;}

.toxn p{ line-height:24px; color:#000000; font-size:14px;}



}

@media(max-width:414px){

.toxn{ height:600px; overflow:hidden; overflow-y:auto; padding-right:20px;}	

}



.cd-top {

  display: inline-block;

  height: 54px;

  width: 54px;

  position: fixed;

  bottom: 120px;

  right: 20px;

  

  /* image replacement properties */

  overflow: hidden;

  text-indent: 100%;

  white-space: nowrap;

  background:url(../tu/top.png) no-repeat center center;

  visibility: hidden;

  opacity: 0;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

  cursor:pointer;

  z-index:9999999;

  font-size:0px

}

.subs{ position: fixed;

  bottom: 120px;

  right: 20px;

  background:url(../tu/tu.png) no-repeat center center; height: 54px;

  width: 54px;}

.cd-top.cd-is-visible {

  /* the button becomes visible */

  visibility: visible;

  opacity: 1;

}

.cd-top.cd-fade-out {

  /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */

  opacity: 1;

}

.no-touch .cd-top:hover {



  opacity: 1;

  

}







/* General styles for the modal */



/* 

Styles for the html/body for special modal where we want 3d effects

Note that we need a container wrapping all content on the page for the 

perspective effects (not including the modals and the overlay).

*/

.md-perspective,

.md-perspective body {

	height: 100%;

	overflow: hidden;

}



.md-perspective body  {

	background: #222;

	-webkit-perspective: 600px;

	-moz-perspective: 600px;

	perspective: 600px;

}



.md-modal {

	position: fixed;

	top: 50%;

	left: 50%;

	width: 50%;

    width: 1440px;

	height: auto;

	z-index: 2000;

	visibility: hidden;

	-webkit-backface-visibility: hidden;

	-moz-backface-visibility: hidden;

	backface-visibility: hidden;

	-webkit-transform: translateX(-50%) translateY(-50%);

	-moz-transform: translateX(-50%) translateY(-50%);

	-ms-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	z-index:999999999

}



@media(max-width:1440px){

.md-modal{ width:100%; padding:0 100px;}	

}

@media(max-width:1024px){

.md-modal{ width:100%; padding:0 30px;}	

}

@media(max-width:414px){

.md-modal{ width:100%; padding:0 15px;}	

}

.md-content button {

	display: block;

	margin: 0 auto;

	font-size: 0.8em;

}





.md-show {

	visibility: visible;

}



.md-overlay {

	position: fixed;

	width: 100%;

	height: 100%;

	visibility: hidden;

	top: 0;

	left: 0;

	z-index: 999000;

	opacity: 0;

	background: rgba(0,0,0,0.8);

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.md-show ~ .md-overlay {

	opacity: 1;

	visibility: visible;

}



/* Content styles */

.md-content {

	color: #fff;



	position: relative;

	

	margin: 0 auto;

	 z-index:999999999999

}

.md-content button {

	display: block;

	margin: 0 auto;

	font-size: 0.8em;

	float:right;

	margin-bottom:40px;

}



@media(max-width:414px){

.md-content button { margin-bottom:10px;}

}

/* Individual modal styles with animations/transitions */





/* Effect 6: side fall */

.md-effect-6.md-modal {

	-webkit-perspective: 1300px;

	-moz-perspective: 1300px;

	perspective: 1300px;

}



.md-effect-6 .md-content {

	-webkit-transform: scale(0.7);

	-moz-transform: scale(0.7);

	-ms-transform: scale(0.7);

	transform: scale(0.7);

	opacity: 0;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.md-show.md-effect-6 .md-content {

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	opacity: 1;

}