/* CSS Document */

/*
----------------------------------------------------------------------------------------------
Website StyleSheet
Created:  June 2015
---------------------------------------------------------------------------------------------- */

/* Default
/* basic elements */
/*---------------------------------------------------------------------------------------------- */

html {
    min-height: 100%;
    height: 100%;
    width: 100%;
}

body /* Internet Explorer */ {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    color: #333;
    background: #fff;
}


/* Form, Input, Select
 * Layout styles
---------------------------------------------------------------------------------------------- */
form {
    display: inline;
}

/* A, A Img
 * Text styles
---------------------------------------------------------------------------------------------- */
img,
a img {
    border: 0px;
}

a {
    color: #f00;
    border: 0px;
    border-style: none;
    text-decoration: none;
}

    a:hover {
        color: #f00;
        border: 0px;
        border-style: none;
        text-decoration: none;
    }
    /* IE border fix */
    a:hover, a:active, a:focus {
        outline: 0;
    }

/* Spacing
 *Alignment
---------------------------------------------------------------------------------------------- */
.Spacing01 {
}


/* Align */
.Align01 {
    float: left !important;
    text-align: left !important;
}

.Align02 {
    float: right !important;
    text-align: right !important;
}


/* Table
---------------------------------------------------------------------------------------------- */
table {
    margin: 0px;
}


/* General 
---------------------------------------------------------------------------------------------- */
.hidden {
    display: none;
}

.posrelative {
    position: relative !important;
}

.posabsolute {
    position: absolute !important;
}

.flowVisible {
    overflow: visible !important;
}

/* Body
---------------------------------------------------------------------------------------------- */
.bodyContainer {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.contentContainer {
    margin: 0 auto 0 auto;
    position: relative;
    background: #fff;
    width: 300px;
    height: 250px;
}

.frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 298px;
    height: 248px;
    border: 1px solid #000;
    z-index: 111;
}

.btnctaAll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 112;
}

    .btnctaAll img {
        width: 100%;
        height: 100%;
    }
	
.logowf {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 112;
}

.replay {
/*    display: none; */
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 1112;
}
    .replay a img {
		opacity: 0.3;
		filter: alpha(opacity=30);
    }
    .replay a:hover img {
		opacity: 1;
		filter: alpha(opacity=1);
    }


.headline01,
.headline02 {
    position: absolute;
    top: 25px;
    left: 86px;
    z-index: 112;
}

.pic {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1;
}

.pic2 {
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 1;
}


.logoos {
    position: absolute;
    top: 29px;
    left: 183px;
    z-index: 11;
}

.redline {
    position: absolute;
    top: 109px;
    left: 12px;
    z-index: 11;
}

.btncta-s {
    position: absolute;
    top: 38px;
    left: 104px;
    width: 81px;
    z-index: 1111;
}

    .btncta-s a img {
    	margin: 0 auto 0 -39px;
        width: 79px;
    }
    .btncta-s a:hover img {
   		margin: 0 auto 0 -40px;
        width: 81px;
    }

.btncta {
    position: absolute;
    top: 180px;
    left: 50%;
    width: 103px;
    z-index: 1111;
}

    .btncta a img {
    	margin: 0 auto 0 -50px;
        width: 101px;
    }
    .btncta a:hover img {
   		margin: 0 auto 0 -51px;
        width: 103px;
    }

.footer {
    position: absolute;
    top: 227px;
    left: 17px;
    z-index: 11;
}
.close {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 113;
}

    .close a img {
        opacity: 0.6;
        filter: alpha(opacity=60);
    }

    .close a:hover img {
        opacity: 1;
        filter: alpha(opacity=1);
    }

/* video */
.video {
     position: absolute;
    top: 0px;
    z-index: 111;
}
.contentContainer_W300 .vjs-live-controls,.contentContainer_W300 .vjs-volume-control {
    display:none;
}
.btnctaOver {
     position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    z-index: 1;
    display:none;
}
    .btnctaOver img {
        width:100%;
        height:100%;
    }

.vjs-default-skin .vjs-big-play-button {
    top:50%;
    left:50%;
    margin-left:-2em;
    margin-top:-1.3em;
}

.vjs-default-skin .vjs-control-bar { /* control height of control panel */
      height:2.8em;/*3em*/
}

    .vjs-default-skin .vjs-control:before { /*font size of control panel */
        font-size:1.5em;/*1.5em*/
    }


.play {
    position: absolute;
    top: 130px;
    left: 122px;
    z-index: 111;
}
.black {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1;
}
.black img {
	width:300px;
	height:190px;
}

.btnvideo {
    position: absolute;
/*	top: 180px; 
	left: 35%; */
	top:0;
    left: 0;
    width: 101px;
    z-index: 999;
    cursor:pointer;
	padding:180px 100px 48px 100px;
}

    .btnvideo a img {
    	margin: 0 auto 0 -49px;
        width: 99px;
    }
    .btnvideo a:hover img {
   		margin: 0 auto 0 -50px;
        width: 101px;
    }


.videoreplay {
    position: absolute;
    top: 232px;
    left: 9px;
    z-index:111;
}
.videostops {
    position: absolute;
    top: 232px;
    left: 32px;
    z-index:111;
}
.videoplay {
    position: absolute;
    top: 232px;
    left: 52px;
    z-index:111;
}
.videostatus {
    position: absolute;
    top: 232px;
    left: 64px;
    z-index:222;
}
.videostatusbar {
    position: absolute;
    top: 228px;
    left: 68px;
    z-index:111;
}


.videovolumedown {
    position: absolute;
    top: 232px;
    left: 205px;
    z-index:111;
}
.videovolumebar01 {
    position: absolute;
    top: 231px;
    left: 219px;
    z-index:111;
}
.videovolumebar02 {
    position: absolute;
    top: 231px;
    left: 225px;
    z-index:111;
}
.videovolumebar03 {
    position: absolute;
    top: 231px;
    left: 231px;
    z-index:111;
}
.videovolumebar04 {
    position: absolute;
    top: 231px;
    left: 237px;
    z-index:111;
}
.videovolumebar05 {
    position: absolute;
    top: 231px;
    left: 243px;
    z-index:111;
}
.videovolumeup {
    position: absolute;
    top: 232px;
    left: 250px;
    z-index:111;
	cursor:none;
}

.videofullscreen{
    position: absolute;
    top: 232px;
    left: 278px;
    z-index:111;
}

.videostatusbar a,
.videovolumebar01 a,
.videovolumebar02 a,
.videovolumebar03 a,
.videovolumebar04 a,
.videovolumebar05 a {
	cursor:none;
}



/* Animation 
---------------------------------------------------------------------------------------------- */
.moveup1 {
    animation: moveup 1s;
    -moz-animation: moveup 1s; /* Firefox */
    -webkit-animation: moveup 1s; /* Safari 和 Chrome */
    -o-animation: moveup 1s; /* Opera */
}

@keyframes moveup {
    from {
         margin-top: 100px;
    }
}

@-moz-keyframes moveup /* Firefox */ {
    from {
        margin-top: 100px;
    }
}

@-webkit-keyframes moveup /* Safari 和 Chrome */ {
    from {
        margin-top: 100px;
    }
}

@-o-keyframes moveup /* Opera */ {
    from {
        margin-top: 100px;
    }
}


.movedown1 {
    animation: movedown 1s;
    -moz-animation: movedown 1s; /* Firefox */
    -webkit-animation: movedown 1s; /* Safari 和 Chrome */
    -o-animation: movedown 1s; /* Opera */
}

@keyframes movedown {
    from {
         margin-top: -100px;
    }
}

@-moz-keyframes movedown /* Firefox */ {
    from {
        margin-top: -100px;
    }
}

@-webkit-keyframes movedown /* Safari Chrome */ {
    from {
        margin-top: -100px;
    }
}

@-o-keyframes movedown /* Opera */ {
    from {
        margin-top: -100px;
    }
}


.moveleft1 {
    animation: moveleft 1s;
    -moz-animation: moveleft 1s; /* Firefox */
    -webkit-animation: moveleft 1s; /* Safari 和 Chrome */
    -o-animation: moveleft 1s; /* Opera */
}

@keyframes moveleft {
    from {
         margin-left: 30px;
    }
}

@-moz-keyframes moveleft/* Firefox */ {
    from {
        margin-left: 30px;
    }
}

@-webkit-keyframes moveleft/* Safari Chrome */ {
    from {
        margin-left: 30px;
    }
}

@-o-keyframes moveleft/* Opera */ {
    from {
        margin-left: 30px;
    }
}


.moveright1 {
    animation: moveright 1s;
    -moz-animation: moveright 1s; /* Firefox */
    -webkit-animation: moveright 1s; /* Safari 和 Chrome */
    -o-animation: moveright 1s; /* Opera */
}


@keyframes moveright {
    from {
         margin-left: -100px;
    }
}

@-moz-keyframes moveright/* Firefox */ {
    from {
        margin-left: -100px;
    }
}

@-webkit-keyframes moveright/* Safari Chrome */ {
    from {
        margin-left: -100px;
    }
}

@-o-keyframes moveright/* Opera */ {
    from {
        margin-left: -100px;
    }
}