html,body{width:100vw;height:100vh;}
body{
	margin: 0;
	padding: 0;
	font-size: 62.5%;	
	color: #555;
	font-family: Arial, SimHei, sans-serif;
}
*{outline:none;}
:before,:after{font-family: fontAwesome;}

a{text-decoration:none;color:#014099;cursor:pointer;}
img{border:0;}
h1,h2,h3,h4,h5{margin:0;padding:0;}
p{margin:10px auto;}
ul{margin:0;padding:0;list-style:none;}
.clear{clear:both;}
.left{float:left;}
.right{float:right;}

/* GENERAL */
#preview_ribbon{
	width:40px;
	height:40px;
	display:block;
	position:fixed;
	bottom:0;
	right:0;
	background:url('../images/preview_ribbon_mobile.png');
	z-index:1001;
	opacity:.3;
}
#preview_ribbon:hover{opacity:.8}

.overlay{
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	background:#fff;
	display: none;
}
.overlay > table{
	padding:10px 15px;
	background:#fff;
	border-radius:10px;
	box-shadow:0 0 20px rgba(0,0,0,.5);
	position:absolute;
	top:50%;
	left:50%;
	color:#888;
	font-size:1.2em;
}

.fadeOut{
	opacity:0;
    transition:all .3s linear;
}

#loader{display:block;}
#loader .logo{
	width: 230px;
    height: 24px;
	background-image: url('../images/logo.png');
	position: absolute;
    top: 50%;
    left: 50%;
    margin:-12px 0 0 -115px;
}
#loader .logo p{width:100%;text-align:center;color:#999;position:absolute;top:40px;}
#loader .logo:before,
#loader .logo:after{
	content: '';
	display:block;
	width: 0;
    height: 0;
	position:absolute;
}
#loader .logo:before{
    border-top: 11px solid #000;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;	
	left:62px;
	top:-14px;
	animation: fadeInDown 1s infinite linear;
}
@keyframes fadeInDown{ 
	0%{transform:translateY(-10px);opacity:.5;}
	50%{transform:translateY(-3px);opacity:.8;}
	100%{transform:translateY(0);opacity:1;}
}
#loader .logo:after{
	border-bottom: 11px solid #000;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;	
	left:62px;
	bottom:-14px;
	animation: fadeInUp 1s infinite linear;
}
@keyframes fadeInUp{ 
	0%{transform:translateY(10px);opacity:.5;}
	50%{transform:translateY(3px);opacity:.8;}
	100%{transform:translateY(0);opacity:1;}
}

/* LOGIN PANEL */
#login_panel{background:rgba(0,0,0,1);display:block;}
#login_panel .info_holder{
	width:100vw;
	height:100vh;
}
#login_panel .info_holder #login_logo{width:auto !important;}
#login_panel table{
	color:#fff;
	padding:0 20px;
}
#login_panel .info_holder h1{
	font-size:30px;
	font-weight:600;
	letter-spacing:5px;
	text-shadow:-1px -1px 1px rgba(0,0,0,1);
}
.login_body{
	padding:40px 0;
}
#login_panel .info_holder .note{
	font-size:16px;
	letter-spacing:2px;
	color:#ddd;
}
#login_panel .info_holder .note:before{content: "\f10b";font-size:20px;}

/* header */
header{
	width:100vw;
	height:7vh;
	background-color:#fff;
	background-position:center;
	background-size:auto 70%;
	background-repeat:no-repeat;
	position: fixed;
	top: 0;
	z-index:999;
}

/* main_content */
#slider_holder{
	width:100vw;
	height:100vh;
	overflow:hidden;
	position:relative;
}
#slider{height:100vh;}
.slide{
	width:100vw;
	height:100vh;
	float:left;
	font-size:2vh;
	line-height:3.5vh;
	text-align:justify;
	background-position:center;
	background-size:cover;
	position:relative;
}
.slide:before{
	content:'';
	display:block;
	width:100vw;
	height:7vh;
}

.slide .banner_holder{
	width:100vw;
	height:30vh;
	overflow:hidden;
	opacity:0;
	background-position:center;
	background-size:cover;
}
.slide .top_spacer{width:100vw;height:20vh;}

.slide .content_box{
	width:70vw;
	min-height:80vh;
	padding:5vw;
	margin:0 auto;
	background:rgba(255,255,255,.7);
	opacity:0;
	position:relative;
}
.slide .content_box img{width:80%;}
.slide .content_box h1{font-weight:normal;font-size:1.5em;color:#014099;}

.swiper-button-prev,
.swiper-button-next{
	position:absolute;
	top:50%;
	margin-top:-4vw;
}
.swiper-button-prev{
	left:-5px;
	animation: fadeInLeft 1s infinite linear;
}
@keyframes fadeInLeft{ 
	0%{transform:translateX(0);opacity:.5;}
	100%{transform:translateX(-10px);opacity:1;}
}

.swiper-button-next{
	right:-5px;
	animation: fadeInRight 1s infinite linear;
}
@keyframes fadeInRight{ 
	0%{transform:translateX(-10px);opacity:.5;}
	100%{transform:translateX(0);opacity:1;}
}

.swiper-button-prev:before,
.swiper-button-next:before{
	display:block;
	width:8vw;
	height:8vw;
	line-height:8vw;
	text-align:center;
	font-size:10vw;
	color:#fff;
}
.swiper-button-prev:before{content: "\f104";}
.swiper-button-next:before{content: "\f105";}
.swiper-button-disabled{display:none;}

#pos_list_holder{
	width:100%;
	height:45vh;
	padding-right:15px;
	margin:10px auto;
	overflow:hidden;
}
#pos_list{width:100%;}
#pos_list li{
	width:100%;
	display:table;
	font-size:1em;
	line-height:2.5em;	
}
#pos_list li a{
	display:table-cell;
	padding:5px;
	color:#555;
}
#pos_list li .pos_title{
	width:75%;
	float:left;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
#pos_list li .pos_city{
	width:25%;
	float:right;
	text-align:center;
}

#pos_panel{
	width:100vw;
	height:100vh;
	position:fixed;	
	left:0;	
	background-position:center;
	background-size:cover;
	font-size:1.4em;
	line-height:2em;
	
	opacity:0;
	top:0;
	z-index:-1;
	transition: all .3s;
}
#pos_panel.show{
	opacity:1;
	top:0;
	z-index:1000;
	transition: all .5s;
}
#pos_panel .pos_header{
	width:100vw;
	height:7vh;
	background-color:#fff;
	background-position:center;
	background-size:auto 70%;
	background-repeat:no-repeat;
}
#pos_panel .btn_back{
	margin:1vh;
	float:right;
}
#pos_panel .btn_back:before{
	content: "\f112";
	display:block;
	width:5vh;
	height:5vh;
	line-height:5vh;
	text-align:center;
	font-size:1.5em;
	color:#014099;
}

#pos_panel .pos_body{
	width:70vw;
	height:93vh;
	padding:5vw;
	margin:0 auto;
	background:rgba(255,255,255,.7);
}
#pos_panel .pos_body h2,
#pos_panel .pos_body h3{margin-top:10px;}
#pos_panel .title.location,
#pos_panel .title.date{float:left;}
#pos_panel .title.location{margin-right:20px;}
#pos_panel .pos_title{font-size:1.2em;color:#014099;}
#pos_panel .pos_title:before{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;content: "\f2be";margin-right:5px;}
#pos_panel .title{font-size:1.1em;font-weight: normal;color:#000;}
#pos_panel .title:before{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;margin-right:5px;}
#pos_panel .title.location:before{content: "\f041";font-size:1.3em;}
#pos_panel .title.date:before{content: "\f133";}
#pos_panel .title.responsibility:before{content: "\f044";}
#pos_panel .title.requirement:before{content: "\f046";}
#pos_panel .company_info{
	margin-top: 10px;
    padding: 0 15px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,.5);
}

#pos_panel .pos_body:after{
	content:'';
	display:block;
	width:100%;
	height:50px;
}

#icp_info{width:100vw;font-size:.8em;text-align:center;color:#007dc7;position:fixed;left:0;bottom:5px;}

/* animation */
.slide .banner_holder.enterUpBounce{animation: enterUpBounce .5s linear;opacity:1;}
.slide .content_box.fadeInUp{animation: fadeInUp .5s linear;opacity:1;}