a{color: #000;transition: all ease .3s}
a:hover,a:focus{text-decoration:none;color:#c60b1e}
body{color: #000;background:#d4d4d4;line-height:1.5;font-family: 'Roboto', sans-serif;font-size:14px;padding: 90px 0 60px 0}
strong{font-weight: 700}.pn-wrapper img{max-width:100%}
.pn-wrapper ul,.pn-wrapper ol{list-style-position: inside}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{line-height:1.3}
label{font-weight:500}
header,footer{top: 0;position: fixed;width: 100%;padding: 7px 0;z-index: 100;background-color: #fff;box-shadow: 0 0 10px rgb(0 0 0 / 30%);-moz-box-shadow: 0 0 10px rgb(0 0 0 / 30%);-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%)}
header .pn-title{font-size: 24px;line-height: 34px;margin: 0;color: #666;font-weight: normal;float: left}
header .pn-wrapper{width: 100%}
header ul{margin: 15px 0 0 0;padding-left: 0;list-style: none;display: flex}
header ul li{margin-right: 15px;float: left}
header ul li svg{width: 18px;height: 18px;fill: #fff;float: left;margin-right: 5px}
header .pn-button{float: right}
footer{top: inherit;bottom: 0;}
footer .pn-title{font-weight: normal;color: #000;margin: 0}
footer .pn-title strong{display: inline-block;font-size: 25px;color: #c60b1e;}
.pn-regulation{background-color: #fff;text-align: center;padding: 60px;border-radius: 10px}
.pn-regulation .pn-title{font-size: 40px;line-height: 50px;font-weight: bold;color: #3740FF;margin: 0 0 20px 0}
.pn-regulation .pn-title + .pn-title{font-size: 24px;line-height: 34px;color: #000;margin-bottom: 10px}
.pn-regulation ul{margin-bottom: 0;list-style: none;padding-left: 0;display: inline-block;vertical-align: top}
.pn-regulation ul li{margin-bottom: 10px;font-size: 22px;line-height: 32px}
.pn-regulation ul li:before{content: "";display: inline-block;width: 13px;height: 13px;border-radius: 100px;background-color: #45C0C8;margin: 0 10px 1px 0}
.pn-regulation .pn-button{font-size: 30px;line-height: 30px;background-color: #45C0C8;padding: 15px 80px;border-radius: 100px;margin-top: 30px}
.modal-dialog .modal-content:before{content: "";display: inline-block;width: 80px;height: 80px;border: 3px solid #f8bb86;border-radius: 100%;margin-bottom: 10px}
.modal-dialog .modal-content:after{content: "!"; font-size: 50px; position: absolute; top: 53px; left: 50%;color: #f8bb86;transform: translateX(-50%);-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%)}
.pn-button{display: inline-block;background-color: #c60b1e;border-radius: 4px;color: #fff;text-align: center;font-size: 14px;line-height: 19px;padding: 8px 40px 7px 40px;font-weight: bold;letter-spacing: 1px;cursor: pointer;transition: all ease .5s;border: none}
.pn-button:hover,.pn-button:focus{opacity: 0.6;color: #fff}
.pn-wrapper img{max-width: 100%;height: auto !important}
.playAudio{display:block;padding: 15px;}.playAudio>audio{border-radius:27px;border:2px solid #eee;background: #f3f3f3;}	
.playAudio>audio{width: 100%;} 
/* exam */
#countclock{float: right;font-size: 34px;line-height: 34px;margin-right: 20px}
.pn-content-left{background-color: #fff;padding: 60px 30px;margin-bottom: 30px}
.pn-content-left .pn-name{font-weight: bold;color: #000}
.pn-content-left .pn-part .pn-name{font-size: 18px;line-height: 23px;color: #525252;margin-bottom: 15px;display: block}
.pn-content-left .pn-part .pn-wrapper{margin-bottom: 30px}
.pn-content-left .pn-button{background-color: #45c0c8;padding: 10px 50px}
.pn-content-left .pn-item{margin-bottom: 30px}
.pn-content-left .pn-item ul{margin:10px 0 30px 0;padding-left: 0;list-style: none}
.pn-content-left .pn-item .pn-number-answer{display: block;margin: 30px 0 15px 0;font-weight: bold}
.pn-content-left .pn-item ul li{font-size: 14px;line-height: 19px}
.pn-content-left .pn-item ul li:not(:last-child){margin-bottom: 10px}
.pn-content-left .pn-item ul li span:before{content: "";float: left;margin: 0 10px 0 0;width: 16px;height: 16px;border: 2px solid #d4d4d4;border-radius: 100px}
.pn-content-left .pn-item ul li.pn-answer-true span:after{content: ""; float: right; width: 15px; height: 7px; border-style: solid; border-width: 0 0 3px 3px; border-color: #66cd42;margin: 3px 0 0 10px;transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg)}
.pn-content-left .pn-item ul li.pn-answer-false span:after{content: "+";float: right;margin: 0 0 0 10px;transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);font-size: 25px;color: #c60b1e}
.pn-content-left .pn-item ul li input:checked + span{font-weight: bold}
.pn-content-left .pn-item ul li input:checked + span:before{background-color: #45c0c8;border-color: #45c0c8}
.pn-content-left .pn-item ul li label{cursor: pointer}
.pn-content-left .pn-item ul li input{display: none}
.pn-content-left .pn-item .pn-button{margin-top: 30px;background-color: #45c0c8}
.pn-list-question .pn-title{background-color: #45C0C8;color: #fff;font-weight: bold;font-size: 18px;line-height: 25px;padding: 11px 15px 9px 15px;margin: 0}
.pn-list-question .pn-group{background-color: #fff;padding: 30px 20px;margin-bottom: 1px}
.pn-list-question .pn-group.active{position: relative;background-color: #eee;box-shadow: 0 5px 20px #45c0c8;-moz-box-shadow: 0 5px 20px #45c0c8;-webkit-box-shadow: 0 5px 20px #45c0c8}
.pn-list-question .pn-group .pn-name{display: block;margin-bottom: 5px;font-size: 18px;line-height: 21px}
.pn-list-question .pn-group .pn-link-description{display: inline-block;margin-bottom: 10px;color: #428bca}
.pn-list-question .pn-group ul{margin-bottom: 0;list-style: none;background-color: #eee;padding: 10px;display: flex;flex-wrap: wrap}
.pn-list-question .pn-group ul li{width: calc(100% / 6);padding: 0 2px;margin-bottom: 4px}
.pn-list-question .pn-group ul li.active span{background-color: #45c0c8;border-color: #45c0c8;color: #fff}
.pn-list-question .pn-group ul li span{border: 1px solid #ddd;display: block;background-color: #fff;text-align: center;font-size: 15px;line-height: 20px;padding: 12px 0}
.pn-result table{margin-bottom: 30px}
.pn-result table tr td{padding: 15px}
.pn-result table tr td a{color: #428bca}
.pn-result table tr td:first-child{background-color: #eee}
.pn-result table tr td:not(:nth-child(2)){width: 15%;text-align: center}
.pn-title-result{margin: 0 0 10px 0;font-size: 30px;line-height: 35px}
.pn-title-result + .pn-wrapper{margin-bottom: 30px}
.pn-title-table{margin-bottom: 15px}
.pn-title-table strong{display: inline-block;color: #c60b1e}
.pn-title-table strong + strong{float: right}
/*  */
.modal-content{padding: 50px;text-align: center}
.modal-footer{padding: 0;margin-top: 30px;text-align: center;border-top: 0}
.modal-footer .btn{padding: 10px 30px}
.pn-wrapper-login,.pn-wrapper-timeout{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.6);transition: all ease 1s;opacity: 0;visibility: hidden}
.pn-wrapper-login.active,.pn-wrapper-timeout.active{z-index: 1000;opacity: 1;visibility: visible}
.pn-wrapper-login .pn-form-login,.pn-wrapper-timeout .pn-timeout{width: 500px;position: absolute;left: 50%;top: -100%;padding: 30px 50px;border-radius: 20px;box-shadow: 0 0 5px rgba(0,0,0,.2);background-color: #fff;transform: translate(-50%,-50%);text-align: center;transform-origin: top;transition: all ease 1s;transition-delay: .1s}
.pn-wrapper-login.active .pn-form-login,.pn-wrapper-timeout.active .pn-timeout{top: 50%}
.pn-wrapper-login .pn-form-login .pn-title,.pn-wrapper-timeout.active .pn-timeout .pn-wrapper{margin: 0 0 20px 0;font-size: 20px;line-height: 25px;text-transform: uppercase}
.pn-wrapper-login .pn-form-login .form-control{margin-bottom: 15px;border-radius: 0;box-shadow: none;height: 40px}
.pn-wrapper-login .pn-form-login .row{margin: 0 -5px}
.pn-wrapper-login .pn-form-login .row [class*='col-']{padding: 0 5px}
.pn-wrapper-login .pn-form-login button{background-color: #c60b1e;border: none;color: #fff;padding: 10px 30px;border-radius: 4px;transition: all ease .3s;font-weight: bold;letter-spacing: 1px}
.pn-wrapper-login .pn-form-login button:hover{box-shadow: 5px 5px 2px rgba(0,0,0,.2)}
.captcha-field {position: relative}
.captcha-field .form-control {padding-right: 115px}
.captcha-field span {position: absolute;right: 6px;top: 8px}
.pn-wrapper-timeout .pn-button{background-color: #c60b1e}
.pn-wrapper-timeout .pn-button:hover,.pn-wrapper-timeout .pn-button:focus{color: #fff}
.member-report.rp_fail{margin-bottom: 20px;color: #f00}.member-report.rp_success{margin-bottom: 20px;color: #87b87f}
.pn-result .content{width: 500px;margin: 30px auto;text-align: center}

@media only screen and (max-width: 991px){
    footer #countclock{justify-content: left}
    body{padding-top: 70px}
    .container{width: 100%}
    .pn-content-left{padding: 30px}
    .pn-list-question{display: flex;flex-wrap: wrap;margin-bottom: 30px}
    .pn-list-question .pn-title{width: 100%}
    .pn-list-question .pn-group{width: 50%}
    .pn-list-question .pn-group ul li{width: calc(100% / 8)}
}
@media only screen and (max-width: 767px){
    .pn-list-question{display: block}
    .pn-list-question .pn-group{width: 100%}
    #countclock{font-size: 25px}
}
@media only screen and (max-width: 570px){
    .pn-regulation{padding: 60px 15px}
    .pn-regulation .pn-title{font-size: 30px;line-height: 40px}
    .pn-regulation .pn-title + .pn-title{font-size: 20px;line-height: 25px}
    .pn-regulation ul li{font-size: 18px;line-height: 25px}
    .pn-regulation .pn-button{font-size: 25px}
    header .pn-title{font-size: 20px}
    #countclock{font-size: 20px;font-weight: bold}
    header .pn-button{padding-left: 15px;padding-right: 15px}
    .pn-title-result{font-size: 20px;line-height: 25px}
    .pn-wrapper-login .pn-form-login{width: 90%;padding: 20px;}
    .pn-wrapper-login .pn-form-login button{width: 100%;}
}
@media only screen and (max-width: 480px){
    body{padding-bottom: 60px}
    header .pn-title{font-size: 20px}
    .pn-regulation .pn-title{font-size: 25px;line-height: 30px}
    header .pn-exit{padding-left: 15px;padding-right: 15px}
    .pn-list-question .pn-group ul li{width: calc(100% / 6)}
    #countclock{position: fixed;bottom: 0;background-color: #c60b1e;width: 100%;left: 0;z-index: 100;padding: 10px;text-align: center;font-size: 24px;line-height: 30px}
    #countclock span{display: inline-block;padding: 5px 40px;background-color: #fff;color: #c60b1e;border-radius: 100px;box-shadow: inset 5px 0 10px rgba(0,0,0,.4);}
    .pn-result table tr td{width: 100% !important;display: block;border-width: 0 0 1px 0;text-align: center}
    .pn-result table tr:last-child td:last-child{border-width: 0;}
}
@media only screen and (max-width: 370px){
    body{background-color: #fff}
    .pn-content-left{padding: 0}
    .pn-list-question{padding-top: 30px;border-top: 1px solid #ddd;}
    .pn-list-question .pn-group{border: 1px solid #ddd;margin-bottom: 15px}
    .pn-list-question .pn-group ul li span{padding: 7px 0}
    header .pn-title{font-size: 15px;font-weight: bold;}
    .pn-list-question .pn-group .pn-name{font-size: 16px}
}