/* reset */

*{margin:0;padding:0;}

a {text-decoration: none;outline: 0;}

img{border: none;}

ul,li{list-style-type: none;}





/* common */

@font-face {font-family: "iconfonts"; font-style: normal; font-weight: normal; src: url("../../fonts/iconfonts.eot") format("embedded-opentype"), url("../../fonts/iconfonts.woff") format("woff"), url("../../fonts/iconfonts.ttf") format("truetype"), url("../../fonts/iconfonts.svg") format("svg"); }

.icon{font-family: iconfonts; }

.mt5{margin-top: 5px;}

.mt10{margin-top: 10px;}

.mt15{margin-top: 15px;}

.mt20{margin-top: 20px;}

.mt30{margin-top: 30px;}

.mr10{margin-right: 10px;}

.mr50{margin-right: 50px;}

.ml10{margin-left: 10px; }

.ml15{margin-left: 15px; }

.mb5{margin-bottom: 5px;}

.mb10{margin-bottom: 10px; }

.mb20{margin-bottom: 20px; }

.p5{padding: 5px;}

.pl5{padding-left: 5px;}

.pr5{padding-right: 5px;}

.pt5{padding-top: 5px;}

.pb5{padding-bottom: 5px;}

.p10{padding: 10px;}

.pl10{padding-left: 10px;}

.pr10{padding-right: 10px;}

.pt10{padding-top: 10px;}

.pb10{padding-bottom: 10px;}

.pl15{padding-left: 15px;}

.pr15{padding-right: 15px;}

.mauto{margin:0 auto;}

.cf{color: #fff;}

.c18{color: #181818;}

.c17{color:#ff1717;}

.c3{color: #333;}

.c6{color: #666;}

.c9{color: #999;}

.cc5{color: #c5c5c5;}

.c4c{color: #4c4c4c;}

.cred{color:#ff0c0c;}

.cori{color: #ec782a;}

.fl{float: left;}

.fr{float: right;}

.clear_:after{content: "";display: table; line-height: 0;clear: both;}

.disb{display: block;}

.disi{display:inline;}

.disib{display: inline-block;}

.verm{vertical-align: middle;}

.alignr{text-align: right;}

.alignc{text-align: center;}

.nowrap{white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}

.all{text-align: left;}

.fs24{font-size: 24px;}

.fs21{font-size: 21px;}

.fs20{font-size: 20px;}

.fs18{font-size: 18px;}

.fs16{font-size: 16px;}

.fs15{font-size: 15px;}

.fs13{font-size: 13px;}

.fs12{font-size: 12px;}

.fs11{font-size: 11px;}

.fwb{font-weight: bold;}

.letspc1{letter-spacing: 1px;}

.w_all{width: 100%;}

.h_all{height: 100%;}

.hide{display: none;}

.bc{border: 1px solid #ccc;}





/* hover */

.hvr-forward {box-shadow: 0 0 1px transparent; display: inline-block; transform: perspective(1px) translateZ(0px); transition-duration: 0.3s; transition-property: transform; vertical-align: middle; }

.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {transform: translateX(8px);}

.hvr-backward {box-shadow: 0 0 1px transparent; display: inline-block; transform: perspective(1px) translateZ(0px); transition-duration: 0.3s; transition-property: transform; vertical-align: middle; } 

.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active {transform: translateX(-8px); }

.hvr-float {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }

.hvr-float:hover, .hvr-float:focus, .hvr-float:active {-webkit-transform: translateY(-8px); transform: translateY(-8px); }

.hvr-shadow {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } 

.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); }

.video-play-button {
    position: absolute;
    width: 50px;
    height: 50px;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    background: url('../images/main-circles.png') 0 -55px no-repeat;
    cursor: pointer;
    z-index: 999;
}

.video-play-button:hover {
    background: url('../images/main-circles.png') -55px -55px no-repeat;
}

.video-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: none;
}

.video-box .icon-box {
    position: absolute;
    right: 5px;
    top: 15px;
    cursor: pointer;
    z-index: 9999;
}

.video-box .icon-box  .close-video-icon {
    background-color: #ccc;
    width: 18px;
    height: 2px;
    transform: rotate(45deg);
}

.video-box .icon-box  .close-video-icon:after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #ccc;
    transform: rotate(-90deg);
}