*{padding:0;margin:0}
body,html{height:100%}
body{font:16px Kanit,Helvetica, sans-serif;background:#fff ;color:#5c5c5c}/*tahoma,Arial, */
input{font:16px Kanit,Helvetica, sans-serif normal;}
a{color:#003399;text-decoration:none}
a:hover{color:#ff0000;text-decoration:none}

header{height:200px;background:#09247e url(../../images/bg-header-l.png) repeat center center;background-size:100%   auto;color:#fff;position:fixed;left:0;width:100%;z-index:10;text-align:center} /**/
.shadow1{-webkit-box-shadow: -1px 4px 10px -5px #9e9e9e;-moz-box-shadow: -1px 4px 10px -5px #9e9e9e;box-shadow: -1px 4px 10px -5px #9e9e9e;}
header:after{content:'';clear:both}
header.shadow1{height:100px;}
header.shadow1 .hpl-logo{height:50px;}
header.shadow1 .hpl-logo img{height:100%}
header.shadow1 .top-menu  > ul > li{font-size:16px}
#menu_left.fixed{top:100px;height: -moz-calc(100% - 100px);height: -webkit-calc(100% - 100px);height: calc(100% - 100px);}
/*#sec-content.fixed{padding-top:150px}*/
.container{min-height:100%;position:relative;}
.content{position:relative;padding-top:200px;padding-bottom:60px}
.content2{position:relative;padding:0}
.content1{padding-left:250px;}
.wrapper{max-width:1240px;margin:0 auto}
.content1 .wrapper{max-width:100% !important}

.sec-menu{position:fixed;left:0;top:200px;height: -moz-calc(100% - 200px);height: -webkit-calc(100% - 200px);height: calc(100% - 200px);background:#09247e;overflow-y: auto;width:250px;z-index:10;}
.sec-menu.disabled{left:-250px !important;}
.sec-menu.disabled+.content{padding-left:0}
.sec-menu .inner{padding-bottom:75px}
.sec-menu ul{padding:0 0  0}
.sec-menu ul  li{list-style:none;padding:1px 0}

.sec-menu ul li  p{color:#ffff;font-weight:700;border-bottom:solid 1px #fff;padding:10px }
.sec-menu ul li  p.p2{border:none;padding-left:10px}
.sec-menu ul li  p.p3{border:none;padding-left:10px;font-weight:normal;color:#fff;text-decoration: line-through}
.sec-menu ul li a{display:block;padding:10px;display:block;color:#fff;font-size:15px;margin-left:10px;position:relative}

.sec-menu ul li a:hover,.sec-menu ul li a.active{background:#fff;color:#09247e;border-top-left-radius:20px;border-bottom-left-radius:20px}
.sec-menu ul li a.sub{padding-left:30px }
footer{height:50px;background:#0a268c url(../../images/logo-l.png) no-repeat 10px ;background-size:auto 90%;position:absolute;bottom:0;left:0;width:100%;z-index:10;font-size:14px}
footer div{text-align:right;line-height:50px;vertical-align:middle;color:#fff;padding-right:10px}
footer a{color:#fff}
.scrollbar::-webkit-scrollbar {width: 10px;}
.scrollbar::-webkit-scrollbar {width: 10px;}
.scrollbar::-webkit-scrollbar-track {;background:#fff}
.scrollbar::-webkit-scrollbar-thumb {background: #202020;border-radius: 10px;}

h1{color:#383838;padding:10px 0;font-size:36px;font-weight:normal ;}

h2{font-weight:normal;font-size:26px}
h3{font-weight:normal;font-size:24px}
.h-line{display: inline-block;padding-bottom: 3px;position: relative;margin-bottom:10px}
.h-line:before{content: ""; position: absolute;width: 70%;height: 1px;bottom: 0;left: 15%;border-bottom: 4px solid #0a268c;}


.h-icon{background:url(../../images/li.png) no-repeat left 10px;font-size:18px;padding:2px 5px 2px 20px;color:#F7941E}
.h-right{font-size:11px;text-align:right}

.isactive-0:before{content:'✖'}
.isactive-1:before{content:'✔'}
.tr-disabled td{background:#f5f5f5 !important}
.p-warning{color:#a7a7a7;font-size:13px}

.switch  input + .slider + .sw-text:before{content:'ไม่'}
.switch  input:checked + .slider + .sw-text:before{content:'ใช่'}
.badge-red{color:red;font-weight:normal;font-size:13px}
@keyframes blinkingText{
    0%{     color: #fff; background:#ff0000   }
    49%{    color: #fff; background:#ff0000}
    50%{    color: transparent;background: transparent;  }
    99%{    color:#fff; background:#ff0000 }
    100%{   color: #fff; background:#ff0000   }
}
.text_priority{color:#ff0000;animation:blinkingText 2s infinite;font-size:14px;padding:0 5px;margin-left:2px}

/**********************/
a.hpl-manage{font:14px Kanit,Helvetica, sans-serif;line-height:16px}
a.hpl-delete2{background:#cc0000 url(../../images/lib/icon-delete.png) no-repeat 8px 10px;padding:10px 10px 10px 25px;}
.hpl-fa{background:#959595;color:#fff;padding:8px 10px;display:inline-block;font-size:16px}
.hpl-fa:hover{background:#757575;color:#fff}
.tbl_list .hpl-fa{padding:3px 5px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis; }
.hpl-fa-add{background:#009933;-moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px}
.hpl-fa-add:hover{background:#006600}
.hpl-fa-edit{background:#ff9900}
.hpl-fa-edit:hover{background:#ff6600}
.hpl-fa-delete{background:#ff0000}
.hpl-fa-delete:hover{background:#cc0000}
.submit{background:#f25a29 url(../../images/bg_btn.png) repeat-x left top;-moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px}
.submit:hover{opacity: 0.8 ;MozOpacity: 0.8;KhtmlOpacity:0.8;filter: alpha(opacity=80);color:#7e2b11}

.btn{background:#ff812d;color:#fff;cursor:pointer;padding:10px;border:none;min-width:100px}
.btn:hover{background:#000099}
.tbl_list th{background:#e5e5e5;padding:10px 5px;border:solid 1px #ccc }
/*.tbl_list td{background:#fff}*/
.page a,.page span.c,.page span.d{background:#fff;color:#231F20}
.page a:hover,.page span.c{background:#fff;color:#ef4136}
.page .page-data{background:#fff;}
.page .page-row{background:#fff;}
.page input{border:solid 1px #231F20;}
.page .page-row select{border:solid 1px #231F20}


.msg_error_inner{color:#cc0000;background-color:#ffffcc;margin:3px 0}
.msg_error_repeat{background:#ef4136;color:#fff;-webkit-box-shadow: 1px 1px 3px 0px #dddddd;-moz-box-shadow: 1px 1px 3px 0px #dddddd;box-shadow: 1px 1px 3px 0px #dddddd;margin:3px 0}
.msg_success{-webkit-box-shadow: 1px 1px 3px 0px #dddddd;-moz-box-shadow: 1px 1px 3px 0px #dddddd;box-shadow: 1px 1px 3px 0px #dddddd;font-size:16px}
.msg_success{background-position:5px 10px}
.msg_success a{font-size:16px}
.breadcrumb{padding:3px 0;margin:0;font-size:14px;float:none}
.breadcrumb:after{display:block;content:'';clear:both}
#phpbeload{top:auto;bottom:0;width:auto;padding:0 5px 0 30px}
#phpbeload .phpberemove:hover{background-image: url(../../images/lib/msg_move-3.png)}
#phpbeload .phpberemove{background-image:url(../../images/lib/msg_move.png)}



.div_curve{background:#fff;padding:0;margin:0;position:relative}
.div_curve .xclose{text-decoration:none;color:#fff;background:#000;position:absolute;right:0;top:0;padding:1px 3px}
.div_curve .xclose:hover{color:#b71334;text-decoration:none}
.div_curve .thickbox_inner_text{padding:22px 2px 5px 2px}


.no-data{webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
/******************/
.hpl-logo{margin:5px;text-align:center;font-size:30px;display:inline-block}
.hpl-logo img{display:inline-block;height:130px;;vertical-align:middle}
.hpl-logo .logo-text{display:inline-block;vertical-align:middle;font:20px Kanit,Helvetica, sans-serif}
.hpl-logo .logo-text .p1{color:#006595}
.hpl-logo .logo-text .p2{color:#0a268c;font-size:18px;line-height:20px}

.top-menu{}
.top-menu > ul{justify-content: center;display: flex;}
.top-menu > ul > li{display:inline-block;list-style:none;padding:0px 0 0 0;font:24px Kanit,Helvetica, sans-serif}
.top-menu > ul > li > a{padding:10px 10px;display:block;color:#fff;text-decoration:none}
.top-menu > ul > li > a:hover,.top-menu > ul > li.active > a{color:#eefe80}
.top-menu > ul > li ul{position:absolute;z-index:2;visibility:hidden;background:#fff;-webkit-box-shadow: 4px 3px 13px -6px #858585;
-moz-box-shadow: 4px 3px 13px -6px #858585;box-shadow: 4px 3px 13px -6px #858585;border-radius:10px;padding:10px 0}
.top-menu > ul > li ul li{list-style:none}
.top-menu > ul > li ul li a{font-size:15px;padding:13px 15px;text-decoration:none;color:#585858;display:block}
.top-menu > ul > li ul li a:hover{background:#0a268c;color:#fff}
.header-right{float:right;}
.header-right .header-profile{position:absolute;right:40px;top:5px}

.header-right .header-profile div{background:#fff;color:#000;padding:0 5px}
.header-right .header-profile p{white-space: nowrap;  overflow: hidden;text-overflow: ellipsis; width:100%;;font-size:14px}
.header-right .header-profile .p1{font-weight:700;font-size:15px}

.header-other{position:absolute;right:0;top:50px}


.header-other > ul{padding-left:0}
.header-other > ul > li{float:left;list-style:none;list-style:none;text-align:center;font-size:30px;height:45px}

.header-other > ul > li > i{line-height:28px}
.header-other > ul > li > a p{font-size:13px;line-height:12px}
.header-other > ul > li > a{padding:0 10px;display:block;color:#fff;text-decoration:none}
.header-other > ul > li > a:hover,.header-other > ul > li.active > a{color:#ffff66}
.header-other > ul > li ul{position:absolute;z-index:2;visibility:hidden;background:#fff;-webkit-box-shadow: 4px 3px 13px -6px #858585;
-moz-box-shadow: 4px 3px 13px -6px #858585;box-shadow: 4px 3px 13px -6px #858585;border-radius:10px;padding:10px 0}
.header-other > ul > li ul li{text-align:left;list-style:none}
.header-other > ul > li ul li a{font-size:15px;padding:13px 15px;text-decoration:none;color:#585858;display:block}
.header-other > ul > li ul li a:hover{background:#0a268c;color:#fff}


.top-menu2{position:absolute;right:0;top:0}
.top-menu2 > li{float:left;list-style:none;text-align:center;font-size:14px;padding:5px}
.top-menu2 >  li   a{color:#434343;text-decoration:none;display:block;padding:0 15px;background:#fff;-moz-border-radius:13px; -webkit-border-radius:13px;border-radius:13px;}
.top-menu2 > li  i{line-height:28px}
.top-menu2 > li  a p{font-size:13px;line-height:12px}
.top-menu2 > li  a:hover,.top-menu2 > li.active > a{background:#2744dd;display:block;color:#fff}
.top-menu2  ul.ul{position:absolute;visibility:hidden;background:red;z-index:3;font-size:16px;right:0;background:#fff;font-size:16px;padding:0;height:100%;display:block;margin-top:0}
.top-menu2 li ul li a{font-size:15px}

.top-menu3{position:absolute;right:5px;top:5px}
.top-menu3 > li{float:left;list-style:none;text-align:center;font-size:14px;padding:0 5px 0 5px;-moz-border-radius:13px; -webkit-border-radius:13px;border-radius:13px;background:#fff;color:#434343;}
.top-menu3 >  li .p1{max-width:100px;display:inline-block;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;vertical-align:middle;}
.top-menu3 >  li   a{display:inline-block;color:#434343;text-decoration:none;padding:0 5px;vertical-align:middle;}
.top-menu3 > li  i{line-height:28px}
.top-menu3 > li  a:hover,.top-menu2 > li.active > a{color:#ff0000}
.top-menu3 .div-circle{display:inline-block;width:20px;height:20px;vertical-align:middle}
.clear{clear:both}
.hide{display:none}

.div-header-menu{position:fixed;right:-300px;top:0;height:100%;background:#fff;z-index:3;width:300px;-webkit-box-shadow: -8px 3px 95px -23px #7a7a7a;
-moz-box-shadow: -8px 3px 95px -23px #7a7a7a;box-shadow: -8px 3px 95px -23px #7a7a7a;display:none;text-align:left;z-index:20}
.div-header-menu .t{height:75px;background:#0a268c;color:#fff;font-size:20px;line-height:75px;vertical-align:middle;padding:0 20px }
.div-header-menu .t a{float:right;color:#fff;background:#0f3555;font-size:20px;text-decoration:none;width:30px;text-align:center;height:30px;line-height:25px;margin-top:20px;border-radius:50%}
.div-header-menu .d{height: -moz-calc(100% - 75px);height: -webkit-calc(100% - 75px);height: calc(100% - 75px);overflow-y:auto}
.div-header-menu .d a{display:block;padding:10px;text-decoration:none;font-size:16px;color:#555555 !important;}
.div-header-menu .d a:hover,.div-header-menu .d a.active{color:#006699 !important}
.div-header-menu .menu-line{border-bottom:solid 1px #b4b4b4}
.div-header-menu .h{font-weight:700;border-bottom:solid 1px #fff;padding:10px;font-size:16px}
.div-header-menu .d-step p{padding:5px 10px !important;color:#d3d3d3;text-decoration: line-through}
.div-header-menu  p.p2{padding-left:20px}
.div-header-menu a.sub{padding-left:40px !important}
.div-header-menu ul{list-style:none}
#div-header-menu2 .t{background:#cc3300;color:#fff}
#div-header-menu2 .t a{background:#000}
#profile-short{padding:10px;font-size:16px;background:#0a73cc;color:#fff}

.parent-div:after{clear:both;content:'';display:block}
.parent-div .div-60p{float:left;width:60%}
.parent-div .div-40p{float:left;width:40%}

.layer-show{float:left;background:#fff;margin-bottom:10px;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;
-webkit-box-shadow: 3px 2px 11px -6px #858585;-moz-box-shadow: 3px 2px 11px -6px #858585;box-shadow: 3px 2px 11px -6px #858585;border-left:solid 2px #919191;margin:4px;width: -moz-calc(25% - 10px) ;width: -webkit-calc(25% - 10px);width: calc(25% - 10px)}
.layer-show .inner{padding:10px}
.layer-show .inner:after{clear:both;content:'';display:block}
.layer-show .d{float:left;width: -moz-calc(100% - 60px) ;width: -webkit-calc(100% - 60px);width: calc(100% - 60px)}
.layer-show .no{font-size:60px;line-height:60px;color:#000}
.layer-show  .no span{font-size:14px;color:#858585}
.layer-show .icon{float:right;width:60px;font-size:60px;color:#919191}
.layer-show .sub-no{position:absolute;right:10px;top:10px;font-size:14px;color:#ff0000}

.layer-show.c1{border-left:solid 2px #ffcc00}
.layer-show.c1 .icon{color:#ffcc00}
.layer-show.c2{border-left:solid 2px #00cc00}
.layer-show.c2 .icon{color:#00cc00}
.layer-show.c3{border-left:solid 2px #cc66ff}
.layer-show.c3 .icon{color:#cc66ff}
.layer-show.c4{border-left:solid 2px #0066cc}
.layer-show.c4 .icon{color:#0066cc}
.layer-show.c5{border-left:solid 2px #00ffcc}
.layer-show.c5 .icon{color:#00ffcc}
.layer-show.c-1{border-left:solid 2px #ff0000}
.layer-show.c-1 .icon{color:#ff0000}

.layer-show.layer-show-alert{background:#cc0000;color:#fff;border-left:solid 2px #ff0000 }
.layer-show.layer-show-alert .no,.layer-show.layer-show-alert .no span,.layer-show.layer-show-alert .sub-no,.layer-show.layer-show-alert .icon{color:#fff }
.layer-show.layer-show-alert a{background:#fff;padding:0 5px}

.layer-show.layer-show-success{background:#009900;color:#fff;border-left:solid 2px #009900 }
.layer-show.layer-show-success .no,.layer-show.layer-show-success .no span,.layer-show.layer-show-success .sub-no,.layer-show.layer-show-success .icon{color:#fff }
.layer-show.layer-show-success a{background:#fff;padding:0 5px}



.div-status{font-size:14px}
.dpm{font-size:14px}
.dpm p.s{font-size:14px}
.dpmi{font-size:15px;}
.status_date{font-size:14px;}


.bodyfix{overflow:hidden}

.ul-menu .step-manage{padding-left:20px;}
.ul-menu .li-primary a{background:#5454a9}
.ul-menu .li-primary a:hover{background:#313131}
.tbl-form input,.tbl-form button,.tbl-form select{height:35px;vertical-align:middle}
.form-submit{padding:0 10px;background:#ff6600;color:#fff;border:none;cursor:pointer;}
.form-submit:hover{background:#ff0000}
.form-clear{padding:0 10px;background:#aeaeae;color:#fff;border:none;cursor:pointer;}
.form-clear:hover{background:#9f9f9f}
.tbl-form .hpl-fa-add{margin-top:5px}
/***********************/

@keyframes notify{
    0%{     color: #ff0000;    }
    40%{    color: #ff0000;}
    50%{    color: transparent;  }
    100%{   color: #ff0000;  }
}
.notify{color:#ff0000;animation:notify 1.5s infinite;}


.div-fullname{}
.div-fullname .inner{float:left;width:33.333%;height:50px;position:relative}
.div-fullname .inner input{width: -moz-calc(100% - 10px) ;width: -webkit-calc(100% - 10px);width: calc(100% - 10px);height:30px;padding:15px 5px 5px 5px;border:solid 1px #dddddd;}
.div-fullname .inner .input-f{-moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;-moz-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0;}
.div-fullname .inner .input-l{-moz-border-top-left-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0;-moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;}
.div-fullname .inner label{position:absolute;left:0;top:0;font-size:12px;left:5px;white-space:nowrap;vertical-align:baseline;vertical-align:middle;color:#909090}
.div-fullname .inner span{position:absolute;right:2px;top:20px;color:#909090}


.tbl_show{border-collapse:collapse}
.tbl_show td{padding:5px}
.row{padding:10px 20px}
.row-md{max-width:720px;margin:0 auto;}
.row.box{border-radius:5px;-webkit-box-shadow: 3px 2px 11px -6px #858585;-moz-box-shadow: 3px 2px 11px -6px #858585;box-shadow: 3px 2px 11px -6px #858585;padding:10px;background:#fff;margin-bottom:10px;display:block}
.div-half .row{margin:10px}
.parent-half2 div.div-half:nth-child(odd) .row{margin-left:0}
.parent-half2 div.div-half:nth-child(even) .row{margin-right:0}

.input-fullname .input-2.sel-f{border-right:solid 1px #dddddd}

.div-s1-login{max-width:300px;margin:100px auto 0 auto;padding:10px}
.div-s1-login h1{text-align:center}
.div-s1-login .btn-login{float:right;background:#ff6600;display:inline-block;position: relative;font-size:16px}
.div-s1-login .btn-login:hover{background:#ff3333}


.div-s1-login .input-username {display:inline-block;position: relative}
.div-s1-login .input-username input{padding-left:30px !important}
.div-s1-login .input-username:after {font-family: 'FontAwesome';content: '\f007';font-size:20px;position: absolute;top:10px;left: 10px;color:#3f3f3f}

.div-s1-login .input-password {display:inline-block;position: relative;width:100%}
.div-s1-login .input-password #password{padding-left:35px !important;width: -moz-calc(100% - 50px) !important;width: -webkit-calc(100% - 50px) !important;width: calc(100% - 50px) !important}
.div-s1-login .input-password:after {font-family: 'FontAwesome';content: '\f084';font-size:20px;position: absolute;top:10px;left: 10px;color:#3f3f3f}

.div-s1-login .input-email {display:inline-block;position: relative}
.div-s1-login .input-email input{padding-left:40px !important}
.div-s1-login .input-email:after {font-family: 'FontAwesome';content: '\f003';font-size:20px;position: absolute;top:10px;left: 10px;color:#3f3f3f}

.circle-photo{-moz-border-radius:50%; -webkit-border-radius:50%;border-radius:50%;;width:50px;height:50px;overflow:hidden;display:inline-block;vertical-align:middle}
.circle-photo img{height:100%}
.sec-mission{}

.sec-mission .div-mission{margin-bottom:20px;padding:10px;border:solid 1px #d8d8d8;border-radius:5px}
.sec-mission .div-mission:after{content:'';display:block;clear:both}
.sec-mission .div-mission .photo{float:left;overflow:hidden;position: relative;width:25%} 

.sec-mission .div-mission .d{float:right;width:75%}
.sec-mission .div-mission:nth-child(even) .photo{float:right}
.sec-mission .div-mission:nth-child(even) .d{float:left}
.sec-mission .div-mission .d .detail{padding:10px}
.sec-mission .div-mission .d .div-more{text-align:right;padding:10px 0}
.sec-mission .div-mission .d .div-more a{margin:5px 0}
.div-mission .photo img{width:100%;}
.div-mission .padding{padding:0 10px}


/*.div-mission .d h2{font-size:24px;margin:0}
.div-mission .d .detail{font-size:14px;line-height:16px;padding:10px 0}
*/
.hpl{padding:3px 5px;background:#0a268c;color:#fff;display:inline-block}
.hpl:hover{color:#fff;background:#f85337}
.hpl-2{background:#ff33ff;color:#fff}
.hpl-large{padding:10px;font-size:24px}
.hpl-blue{background:#0b72f1}
.hpl-blue:hover{background:#0864d5}
.hpl-green{background:#049c21}
.hpl-green:hover{background:#0dad2b}

.hpl-learning{background:#009900}
.div-mission .d2{}
.div-mission .d2 a{width: -moz-calc(50% - 20px) !important;width: -webkit-calc(50% - 20px) !important;width: calc(50% - 20px) !important}
.div-mission .d2 a:first-child{margin-right:5x;}
.div-mission .d2 a:last-child{margin-left:5x}
.most-hr{padding:30px;display:block}

.div-mission-view .photo{float:left;overflow:hidden;position: relative;width:250px} 
.div-mission-view .photo img{width:250px}
.div-mission-view .d{float:right;width: -moz-calc(100% - 250px) ;width: -webkit-calc(100% - 250px);width: calc(100% - 250px)}
.div-mission-view .padding{padding:0 20px;}
.div-mission-view .p1{padding:10px 0}
.div-mission-view .p1 span{text-decoration:underline;font-weight:700}
.div-mission-view .p1 div{display:inline-block}
.div-mission-view h4{border-bottom:solid 1px #f0f0f0;font-size:18px;font-weight:normal;padding:10px 0}
.div-mission-view h4 i{font-size:16px}
.mission-upload img{padding:10px;border:solid 1px #ccc;background:#fff;margin:5px;height:200px}
.rank-icon-1,.rank-icon-2,.rank-icon-3{width:48px;height:46px;margin:0 auto}
.rank-icon-1{background: url(../../images/rank1.png) no-repeat left top}
.rank-icon-2{background:url(../../images/rank2.png) no-repeat left top}
.rank-icon-3{background:url(../../images/rank3.png) no-repeat left top}
.rank-icon-n{background:url(../../images/rankn.png) no-repeat left top;width:54px;height:41px;display:inline-block;text-align:center;font-size:26px;line-height:36px;color:#50879f}
.rank-icon-0{padding-top:13px;color:#ff0000}

.div-leaderboard,.div-leaderboard-head{max-width:600px;margin:0 auto}
.div-leaderboard-head a{background:#e9e9e9;color:#555555;display:inline-block;padding:5px 15px;line-height:16px;-moz-border-radius:10px; -webkit-border-radius:10px;border-radius:10px;}
.div-leaderboard-head a:hover,.div-leaderboard-head a.active{background:#0a268c;color:#fff}
.div-leaderboard .t{border-bottom:solid 1px #ccc;padding:10px 0}
.div-leaderboard .t:after{content:'';display:block;font-size:0;clear:both}
.div-leaderboard .thead{text-align:center}
.div-leaderboard .t .d{float:left;padding:0 0;margin:0}
.div-leaderboard .t1{background:#fbfa9f}
.div-leaderboard .t2{background:#f5f4f3}
.div-leaderboard .t3{background:#fdd7c7}
.div-leaderboard .t-self{background:#0099ff;color:#fff}

.div-leaderboard .t .d1{width:80px;text-align:center;margin:0 auto;position:relative}
.div-leaderboard .t  .p1{display:block;width:80px;text-align:center;font-size:12px;}
.div-leaderboard .t .d1 .rank-icon-n{margin-top:5px}
.div-leaderboard .t .d2{width: -moz-calc(100% - 160px) ;width: -webkit-calc(100% - 160px);width: calc(100% - 160px)}
.div-leaderboard .t .d2-2{width: -moz-calc(100% - 270px) ;width: -webkit-calc(100% - 270px);width: calc(100% - 270px)}
.div-leaderboard .div-circle{display:inline-block;vertical-align:middle;width:35px;height:35px}

.div-leaderboard .t  .circle-photo{width:30px;height:30px}
.div-leaderboard .t .d3{width:80px;text-align:center;}
.div-leaderboard .t .d3 p{margin:8px 5px 0 5px;padding:5px 0px;background:#ecedec;color:#5f4961}
.div-leaderboard .t .d4{width:110px;text-align:center;}
.div-leaderboard .t .d2-2 p,.div-leaderboard .t .d2 p,
.div-leaderboard .t .d2-2 > div,.div-leaderboard .t .d2 > div
{margin-top:8px}
.div-leaderboard .t-self .d2-2 p,.div-leaderboard .t-self .d2 p,
.div-leaderboard .t-self .d2-2 > div,.div-leaderboard .t-self .d2 > div,
.div-leaderboard .t-self .d3 p
{margin-top:24px}
.div-leaderboard .t-self .d4{margin-top:18px}
.div-leaderboard .no-data{padding:50px 0}

.img-acm{height:40px}
.div-index1{padding:50px 10px;background:#09278e;color:#fff;font-size:24px}
.div-index1:after{content:'';display:block;clear:both}
.div-index1 .wrapper{}
.div-index1 p{padding:0 10px}
.div-index1 .p1{font-size:55px}
.div-index1 .d-1{float:left;width:60%}
.div-index1 .d-2{float:right;width:40%}
.div-index1 .d-2 img{width:100%;height:auto}
.div-index1 .p-hpl{padding-top:20px}
.div-index1 a{background:#fff;display:inline-block;color:#09278e;padding:5px}
.div-index1 a:hover{color:#000}

.div-index2{padding:50px 10px;text-align:center;background:#e6f2ff;}
.div-index2 .wrapper{display:flex;align-items: center;text-align:left;flex-wrap: wrap;}
.div-index2 div img{width:200px;height:auto }
.div-index2 > div { }
.div-index2:after{content:'';display:block;clear:both}
.div-index2 .d-1{flex-basis: 50%;}
.div-index2 .d-2{flex-basis: 50%;text-align:center}
.div-index2  h2 ,.div-index2 .p1{font-weight:700;font-size:34px;margin-bottom:20px}
.div-index2 .d-3{flex-basis: 40%;;text-align:center}
.div-index2 .d-4{flex-basis: 60%;text-align:left}
.div-index2 .d-5{flex-basis: 50%;;text-align:center}
.div-index2  .d-5{font-size:24px;text-align:center;}
.div-index2  .d-5 .p1{color:#ff3300}
.div-index2 .d-6{flex-basis: 50%;text-align:left}


.div-index3{padding:50px 10px;background:#ffecf1;;font-size:16px;text-align:center}
.div-index3 h2{font-size:34px;text-align:center}
.div-index3 .d{display:flex;justify-content: center;}
.div-index3 .d .div1{flex-basis:calc( 20% - 52px);;background:#fff;margin:10px 5px;padding:20px;;border:solid 1px #e8e8e8;background:#fff;border-radius:10px;}
.div-index3 .div1 img{width:80%;max-width:150px}
.div-index3 .div1 p{text-align:left}

.div-index4{padding:50px 10px;;font-size:16px;text-align:left}
.div-index4 h2{font-size:34px;text-align:center}
.div-index4 h3{font-size:26px;margin:20px 0}
.div-index4 p{padding:10px 20px}
.div-index4 p.p2{padding-left:40px}

.div-content{}
.div-content:after{content:'';display:block;clear:both}
.div-content .d{float:left}
.sec-profile:after{content:'';display:block;clear:both}
.sec-profile .d{float:left}
.sec-profile .d1{width:310px;text-align:center;}
.sec-profile .d2{width: -moz-calc(100% - 310px) ;width: -webkit-calc(100% - 310px);width: calc(100% - 310px)}
.div-circle{overflow:hidden;position: relative;width:100px;height:100px;-moz-border-radius:50%; -webkit-border-radius:50%;border-radius:50%;} 
.div-circle:after{content: "";display: block;padding-bottom: 100%; }
.div-circle img{position: absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover;object-position: center;}
.sec-profile .div-circle{margin:0 auto;width:180px;height:180px;-webkit-box-shadow: -1px 4px 10px -5px #9e9e9e;-moz-box-shadow: -1px 4px 10px -5px #9e9e9e;box-shadow: -1px 4px 10px -5px #9e9e9e;}
.sec-profile .d1 .p1{font-size:24px;color:#222222;padding:10px 10px 0 10px}
.sec-profile .d1 .p2{font-size:26px;color:#0a268c;padding:0 10px}
.sec-profile .d2 .padding{padding:0 10px}

.modal_image {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

.modal_image-content {margin: auto;display: block;background-color:#fff}
.modal_image-content {-webkit-animation-name: zoom;-webkit-animation-duration: 0.6s;animation-name: zoom;animation-duration: 0.6s;}
.modal_image-content.out {animation-name: zoom-out;animation-duration: 0.6s;}
.contact-list div{padding:5px 0;font-size:18px}
.contact-list .fa-phone-square{color:#ff3300}
.contact-list .fa-facebook-official{color:#477dfa}
.contact-list .fa-twitter-square{color:#0ed4ff}
.fa-line{background:url(../../images/fa-line.png) no-repeat left top ;background-size:15px;width:15px;height:15px;display:inline-block}

.div-reward{max-width:460px;margin:0 auto;text-align:center;padding:20px 10px;font-size:20px}
.div-reward i{color:#FFD700;font-size:70px}
.div-reward img{width:80%;padding:20px 0}


.tbl_list  td.td-rank1{text-align:center;margin:0 auto}
.tbl_list  td.td-rank1 p,.tbl_list  td.td-rank2 p,.tbl_list  td.td-rank3 p{
	display: flex;  width:30px;height:30px;justify-content: center;align-items: center;border-radius:50%;margin:0 auto
}

.tbl_list .tr-rank1 td{border:solid 1px #ddbb03;background:#FFD700}
.tbl_list .tr-rank2 td{border:solid 1px #a2a0a0;background:#C0C0C0}
.tbl_list .tr-rank3 td{border:solid 1px #e9d6bc;background:#FFEBD1}
.tbl_list  td.td-rank1 p{background:#ddbb03;color:#473c00; }
.tbl_list  td.td-rank2 p{background:#a2a0a0;color:#473c00; }
.tbl_list  td.td-rank3 p{background:#e9d6bc;color:#473c00; }

.div-news{padding:10px;border-bottom:solid 1px #ccc;margin-bottom:10px}
.div-news .s,.news-view .s{color:#b5b5b5;font-size:14px;text-align:right}
.div-news .d{padding:10px}
.div-news .link{text-align:left;padding:10px 0}
.circle-no{background:#3399cc;display:inline-block;width:20px;height:20px;text-align:center;color:#fff;border-radius:10px;font-size:13px}

.ul-manage li{list-style:none;padding:10px}
.ul-manage li a.sub{padding-left:20px}
.ul-manage  .li-text{display:none}

.div-hr{background:#dddddd;height:1px;display:block;margin:5px 0}
.div-manage ul li{float:left;width:33.33%;padding:10px 0}
.div-manage ul li.li-text:before,.div-manage ul li.li-d:before{content:'';display:block;clear:both}
.div-manage ul li.li-text,.div-manage ul li.li-d{float:none}
.div-manage ul:after{content:'';display:block;clear:both}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(1)}
    to {-webkit-transform:scale(2)}
}
@keyframes zoom {
    from {transform:scale(0.4)}
    to {transform:scale(1)}
}
@keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}

.hp-download{font-size:20px;background:#00ca65;color:#fff;padding:10px;margin:20px 0;display:inline-block}
.hp-download:hover{background:#009900;color:#fff}
@media only screen and (max-width: 700px){
    .modal_image-content {width: 100%;}
}

@media(max-width:600px){
	.div-fullname .inner{float:none;width:100%}
	.div-fullname .inner .input-f{-moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;-moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;}
	.div-fullname .inner .input-l{-moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;-moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;}
}
@media(max-width:1920px){

}

@media(max-width:1620px){

}

@media(max-width:1440px){
	header{background-size:auto 100%;background-position:center top}
	.layer-show{width: -moz-calc(50% - 10px) ;width: -webkit-calc(50% - 10px);width: calc(50% - 10px)}
}
@media(max-width:1280px){

	.sec-menu{display:none}
	.content1{padding-left:0}
	.content1 .wrapper{max-width:1240px}
	.col-50 .input-fullname .w-20p,.col-50 .input-fullname .w-40p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}
	
	.div-tbl-m2,.div-tbl-m2:nth-child(even){float:none;width:100%;margin-left:0}
	.sec-mission .div-mission .photo{width:35%} 
	.sec-mission .div-mission .d{width:65%}
}

@media(max-width:1200px){

	.div-index1{font-size:20px}
	.div-index1 .p1{font-size:40px}
}
@media(max-width:1124px){

.div-index3 .d {flex-wrap: wrap;}
	.div-index3 .d .div1{flex-basis:calc( 25% - 52px)}

@media(max-width:960px){

	.hpl-logo img{height:90px}
	.top-menu > ul > li{font-size:16px}
	header{height:150px;position:fixed}
	.sec-menu{top:150px;height: -moz-calc(100% - 150px);height: -webkit-calc(100% - 150px);height: calc(100% - 150px);}
	.content{padding-top:150px}

	#menu-list{display:block}

	.div-mission .d3,.div-mission .d2{float:left;width:100%;display:block}
	.col-30,.col-70,.col-50{width:100%;float:none}
	.cols .col-50:nth-child(even) .row{margin-left:0}
	.col-50 .input-fullname  .input-1{-moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
	-moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;-moz-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
	border-right:none}
	.col-50 .input-fullname  .input-2{-moz-border-radius: 5px; -webkit-left-radius: 5px;border-radius:0}
	.col-50 .input-fullname  .input-3{
	-moz-border-top-left-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0;
	-moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0;
	-moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;-moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;border-left:none}
	.col-right{margin-left:0}
	.col-50 .input-fullname .w-20p{width:20% !important}
	.col-50 .input-fullname .w-40p{width:40% !important}
	


	.parent-half2 .div-half {float:none;width:100% !important;}
	.parent-half2 .div-half:nth-child(even){float:none;width:100% !important;}
	.parent-half2 div.div-half:nth-child(odd) .row{margin:5px 0 10px 0}
	.parent-half2 div.div-half:nth-child(even) .row{margin:5px 0 10px 0}
	.div-index1{padding:20px 10px}
	.div-index1 img{height:100px}
	.div-index2{padding:30px 10px;}
	.div-index2 img{height:150px;width:150px;}
	.sec-profile .d1{width:250px;}
	.sec-profile .d1 .div-circle{width:150px;height:150px}
	.sec-profile .d1 .p1{font-size:20px}
	.sec-profile .d1 .p2{font-size:22px}
	.sec-profile .d2{width: -moz-calc(100% - 310px) ;width: -webkit-calc(100% - 310px);width: calc(100% - 250px)}


	.div-index1{font-size:16px}
	.div-index1 .p1{font-size:30px}
	.div-index3 .d .div1{flex-basis:calc( 33.33% - 52px)}



}
@media(max-width:842px){
	header{display: flex; align-items: center;flex-direction: column;}
	header .hpl-logo{margin-top:30px;height:50%;}
	header .hpl-logo img{height:100%}
	header.shadow1 .hpl-logo{margin-top:15px;height:40%}
	.div-index-1 .d{position:relative;padding:20px 10px 10px 30px}
}
@media(max-width:820px){
	.header-profile{display:none}
	
	#profile-short{display:block}
	.col-50 .input-fullname .w-20p,.col-50 .input-fullname .w-40p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}
	.div-tbl .div-tbl-content{float:none;width:100% !important;padding-bottom:10px}
	.div-tbl .div-tbl-manage{float:none;width:100% !important}
	.div-tbl-manage .div-tbl-m2{width:100% !important;}
	.div-tbl-inner{padding:0}

	.div-content .d{width:100% !important;padding-bottom:10px}
}
@media(max-width:760px){
	.div-mission{float:none;width:100%;}
	.div-mission .d3,.div-mission .d2{float:right;width:65%;}
}
@media(max-width:720px){

	.div-half {float:none;width:100% !important;}
	.parent-half .div-half:nth-child(even){float:none;width:100% !important;}
	.sec-mission .div-mission .photo{float:none !important;width:auto;text-align:center} 
	.sec-mission .div-mission .photo img{max-width:320px}
	.sec-mission .div-mission .d{float:none;width:auto}
	.sec-mission .div-mission .d .div-more{text-align:left}
	.div-mission-button{text-align:center}
	.div-mission-button .div-mission-status{text-align:left}
	.div-mission-button a{font-size:16px;margin:0 auto}
	.div-mission-view .photo{float:none;width:auto;text-align:center} 
	.div-mission-view .photo img{max-width:320px;}
	.div-mission-view .d{float:none;width: auto}
	.div-index2 div img{width:80%;height:auto }
	.div-index2 .d-1{flex-basis: 70%;}
	.div-index2 .d-2{flex-basis: 30%}
	.div-index2  h2 ,.div-index2 .p1{font-size:26px}
	.div-index2 .d-3{flex-basis: 30%;r}
	.div-index2 .d-4{flex-basis: 70%}
	.div-index2 .d-5{flex-basis: 70%;r}
	.div-index2  .d-5{font-size:24px;padding-top:30px}
	.div-index2 .d-6{flex-basis: 30%;}
	.div-index3 .d .div1{flex-basis:calc( 50% - 52px)}
}

@media(max-width:600px){
	header{display:block;background-position:right top;text-align:left}
	footer{background-image:none}
	footer div{text-align:center}
	.hpl-logo{text-align:left}
	/*.hpl-logo img{height:80px}*/
	.top-menu > ul > li{font-size:16px}
	header{height:100px}
	header.shadow1 .hpl-logo{margin-top:30px;height:50%;}
	.hpl-logo {height:80px}
	.sec-menu{top:100px;display:none}
	.content1{padding-left:0}
	.content{padding-top:100px}
	.top-menu{display:none}
	.header-other .li2{display:block;}
	.header-other > ul > li ul{right:0;width:250px;}
	.row{padding:10px}
	.div-s1-login{margin:10px auto}
	.input-fullname .w-50p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}
	.btn-l{padding:10px 30px;font-size:16px}

	.layer-show{font-size:15px;width: -moz-calc(100% - 10px) ;width: -webkit-calc(100% - 10px);width: calc(100% - 10px)}
	.layer-show .d{float:left;width: -moz-calc(100% - 30px) ;width: -webkit-calc(100% - 30px);width: calc(100% - 30px)}
	.layer-show .no{font-size:30px;line-height:30px}
	.layer-show .icon{float:right;width:30px;font-size:35px}

	.input-fullname .w-20p, .input-fullname .w-40p{width:100% !important;border:solid 1px #dddddd;-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;margin-bottom:5px}

	.div-index2 img{height:100%;width:100%;}
	.sec-profile .d{float:none;width:auto}
	.sec-profile .d1 .div-circle{width:150px;height:150px}
	.sec-profile .d1 .p1{font-size:20px}
	.sec-profile .d1 .p2{font-size:22px}
	.sec-profile .d2{width:auto}


	.div-index1 .d-1,.div-index1 .d-2{float:none;width:auto}
	.div-index1{text-align:center}
	.div-index1 .d-1{margin-bottom:20px}
	.div-index1 .d-2 img{width:80%;margin:0 auto}
}
@media(max-width:460px){
	.div-mission .d2 a{display:block;width:auto !important;margin-bottom:5px}
}