html {font-family:'Montserrat', Arial, sans-serif; /* 1 */-ms-text-size-adjust:none; /* 2 */-webkit-text-size-adjust:none; /* 2 */font-size:14px; line-height:140%; -webkit-font-smoothing: antialiased;  color:#4e4e4e;margin:0 auto; }
div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
article,aside,details,time,caption,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; /* 1 */vertical-align: baseline; /* 2 */}
audio:not([controls]) {display: none;height: 0;}
[hidden],template {display: none;}
abbr[title] {border-bottom: 1px dotted;}
b,strong {font-weight: bold;}
dfn {font-style: italic;}
mark {background: #ff0;color: #111;}
small {font-size: 80%;}
sub,sup {font-size:60%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;left:1px;}
sub {bottom: -0.25em;}
img {border: 0; display:block;}
/*svg:not(:root) {overflow: hidden;}*/
figure {margin:0;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
pre {overflow: auto;}
code,kbd,pre,samp {font-size: 1em;}
button,input,optgroup,select,textarea {color: inherit; /* 1 */font: inherit; /* 2 */margin: 0; /* 3 */}
button {overflow: visible;}
button,select {text-transform: none;}
button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {-webkit-appearance: button; /* 2 */cursor: pointer; /* 3 */}
button[disabled],html input[disabled] {cursor: not-allowed;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
input {line-height: normal;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */ }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0; /* 1 */padding: 0; /* 2 */}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse;border-spacing: 0;}
td,th {padding: 0;}
::placeholder { color: #a7a8ba;}
/*base*/
.videoframe{position:relative;padding-bottom:56.25%;padding-top:25px;height:0; margin:0;}.videoframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.fade{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
@-webkit-keyframes come { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes come { from { opacity:0; } to { opacity:1; } }
@keyframes come { from { opacity:0; } to { opacity:1; } }
.fadeIn {	opacity:0;	-webkit-animation:come ease-in 1;	-moz-animation:come ease-in 1;	animation:come ease-in 1;	-webkit-animation-fill-mode:forwards;	-moz-animation-fill-mode:forwards;	animation-fill-mode:forwards;-webkit-animation-duration:0.3s;	-moz-animation-duration:0.3s;	animation-duration:0.3s;}
a {color: #000;text-decoration: none;}
a:hover, a:focus {color:rgba(0,0,0,0.5);}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
a.wlight{color:#fff !important;}
a.wlight:hover{color:#606060 !important;}
.mapframe{position:relative;padding-bottom:56.25%;height:0; margin:0;}.mapframe iframe{position:absolute;top:0;left:0;width:100%;height:50%;}

.padding-no {padding:0 !important;}.padding-xs{padding:5px 15px;}.padding-sm{padding:10px 30px;}.padding-top-no {padding-top:0 !important;}.padding-top-ss {padding-top:5px !important;}.padding-top-xs {padding-top:10px !important;}.padding-top-sm {padding-top:15px !important;}.padding-top-lg {padding-top:45px !important;}.padding-top{padding-top:30px !important;}.padding-bottom-no {padding-bottom:0 !important;}.padding-bottom-ss {padding-bottom:5px !important;}.padding-bottom-xs {padding-bottom:10px !important;}.padding-bottom-sm {padding-bottom: 15px !important;}.padding-bottom-lg {padding-bottom:45px !important;}.padding-bottom {padding-bottom:30px !important;}.padding-left-no {padding-left:0 !important;}.padding-left-ss {padding-left:5px !important;}.padding-left-xs{padding-left:10px !important;}.padding-left-sm {padding-left:15px !important;}.padding-left-lg {padding-left:45px !important;}.padding-left {padding-left:30px !important;}.padding-right-no {padding-right: 0 !important;}.padding-right-ss {padding-right:5px !important;}.padding-right-xs {padding-right:10px !important;}.padding-right-sm {padding-right:15px !important;}.padding-right-lg {padding-right:45px !important;}.padding-right {padding-right:30px !important;}
.margin-no {margin:0 !important;}.margin-xs{margin:5px 15px;}.margin-sm{margin:10px 30px;}.margin-top-no {margin-top:0 !important;}.margin-top-ss {margin-top:5px !important;}.margin-top-xs {margin-top:10px !important;}.margin-top-sm {margin-top:15px !important;}.margin-top-lg {margin-top:45px !important;}.margin-top {margin-top:30px !important;}.margin-bottom-no {margin-bottom:0 !important;}.margin-bottom-ss {margin-bottom:5px !important;}.margin-bottom-xs {margin-bottom:10px !important;}.margin-bottom-sm {margin-bottom:15px !important;}.margin-bottom-lg {margin-bottom:45px !important;}.margin-bottom {margin-bottom:30px !important;}.margin-left-no {margin-left:0 !important;}.margin-left-ss {margin-left:5px !important;}.margin-left-xs {margin-left:10px !important;}.margin-left-sm {margin-left:15px !important;}.margin-left-lg {margin-left:45px !important;}.margin-left {margin-left:30px !important;}.margin-right-no {margin-right:0 !important;}.margin-right-ss {margin-right:5px !important;}.margin-right-xs {margin-right:10px !important;}.margin-right-sm {margin-right:15px !important;}.margin-right-lg {margin-right:45px !important;}.margin-right {margin-right:30px !important;}.bg-twitter{background:#77cbef !important;}.bg-facebook{background:#537abd !important;}.bg-google{background:#ea5d4b !important;}.bg-linkedin{background:#1384c8 !important;}.bg-daily{background:#0064dc !important;}.bg-youtube{background:#c8302a !important;}.bg-instagram{background:#444 !important;}.bg-whatsapp{background:#2ab200 !important;}.bg-line{background:#4ecd00 !important;}.bg-tumblr{background:#395976 !important;}.cl-twitter{color:#77cbef !important;}.cl-facebook{color:#537abd !important;}.cl-google{color:#ea5d4b !important;}.cl-linkedin{color:#1384c8 !important;}.cl-daily{color:#0064dc !important;}.cl-youtube{color:#c8302a !important;}.cl-instagram{color:#444 !important;}.cl-whatsapp{color:#2ab200 !important;}.bg-line{color:#4ecd00 !important;}.cl-tumblr{color:#395976 !important;}
*, *::after, *::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.t-center{text-align:center !important;}.t-right{text-align:right !important;}.t-left{text-align:left !important;}
.hidden{opacity: 0;}.visible{opacity: 1;}.left{float:left !important;}.right{float:right !important;}
/*color*/
.cl-white{color:#fff !important;}
.cl-blue{color:#00bfd7 !important;}
.cl-blue2{color:#31a0df !important;}
.cl-blue3{color:#27aae1 !important;}
.cl-bluelight{color:#b0ebf3 !important;}
.cl-green{color:#68c900 !important;}
.cl-red{color:#fd0505 !important;}
.cl-black{color:#0f0f0f !important;}
.cl-yellow{color:#f8dc00 !important;}
.cl-orange{color:#ff9b51 !important;}
.cl-grey{color:#979797 !important;}
/*bg*/
.bg-white{background:#fff !important;}
.bg-blue{background:#00bfd7 !important;}
.bg-blue2{background:#31a0df !important;}
.bg-bluelight{background:#b0ebf3 !important;}
.bg-green{background:#68c900 !important;}
.bg-red{background:#fd0505 !important;}
.bg-black{background:#0f0f0f !important;}
.bg-yellow{background:#f8dc00 !important;}
.bg-orange{background:#ff9b51 !important;}
/*body*/
body{margin:0 auto; padding:0; display:block; background:#fff ;min-height: 100vh;}

p{margin:15px 0;}
.overflow-hidden {overflow: hidden;}
.container{margin:0 auto; max-width:1200px; padding:0 15px; display:block; min-height:20px;}
.container.full{max-width:100%;}
.container.small{max-width:1020px;}
.container.smaller{max-width:800px;}
.container-col{margin-left:-15px; margin-right:-15px;}
.box20{width:20%; padding:0 15px; float:left;}
.box25{width:25%; padding:0 15px; float:left;}
.box30{width:30%; padding:0 15px; float:left;}
.box40{width:40%; padding:0 15px; float:left;}
.box50{width:50%; padding:0 15px; float:left;}
.box60{width:60%; padding:0 15px; float:left;}
.box70{width:70%; padding:0 15px; float:left;}
.box75{width:75%; padding:0 15px; float:left;}
.box80{width:70%; padding:0 15px; float:left;}
.box33{width:33.333%; padding:0 15px; float:left;}
.box66{width:66.666%; padding:0 15px; float:left;}
.box100{width:100%; padding:0 15px;}
/*scroll up*/
.scrollup { position: fixed; width:40px; height:40px; z-index:5; bottom:10px; right:10px; cursor: pointer; color:#fff; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2);}
.scrollup:hover{ background:rgba(0,0,0,0.9);}
/*cmd*/
.hide_desktop{display:none; visibility:hidden;}
.nopad{padding:0;}
.dblock{display:block;}
.centering{display: flex !important;align-items: center !important;justify-content: center !important;}
.centering.column{flex-direction:column;}
.centering.row{flex-direction:row;}
.clear{clear:both;}
.overflow{overflow:hidden;}
.banner{display: flex; align-items:center; justify-content: center;}
.w100{width:100%;}
/*header*/
header {height:70px; position:fixed; top:0; z-index:10;width:100%; margin:0 auto;transition: top 0.2s ease-in-out; background:#ffffff;}
header .header-inside{padding:0 15px; width:100%; max-width:1300px; margin:0 auto; height:70px;}
h1.logo{padding:10px 0;width:auto;display:block;height:70px; float:left;}
h1.logo img{width:auto; height:50px;}
.header-right{float:right; height:70px;}
/*nav menu*/

nav.menu {margin:0; padding:0; height:70px;width:auto; float:left; font-size:14px; font-weight:400;}
nav.menu ul li > a:after { content:  ' \f107'; font-family: 'FontAwesome'; font-size:12px; margin-left:10px; top:0; position:relative;}
nav.menu ul li > a:only-child:after { content: ''; margin:0;}
nav.menu ul ul {display: none;}
nav.menu ul li:hover > ul {display: block;}
nav.menu ul {list-style:none; list-style-position:inside; margin:0 auto; padding:0; height:70px; max-width:1200px;position: relative;display: inline-table;}
nav.menu ul:after {content: ""; clear: both; display: block;}
nav.menu ul li {float: left;}
nav.menu ul li:hover {background: #0094bc;}
nav.menu ul li:hover a {color:#fff !important;background: #0094bc;}
nav.menu ul li a {color:#27aae1;font-weight:500;position:relative;padding:0 10px; height:70px;display:flex; align-items:center; justify-content:center;}
nav.menu ul li a.selected, nav.menu ul ul li a.selected{color:#27aae1; font-weight: 800;}
nav.menu ul ul {background: #0094bc; border-radius: 0px; padding: 0;position: absolute; top: 100%;}
nav.menu ul ul li {float: none;}
nav.menu ul ul li a {padding: 15px 30px;color: #fff;background:#0094bc;justify-content:flex-start;height:auto;}	
nav.menu ul ul li a:hover {background:rgba(0,0,0,0.1);}
nav.menu ul ul ul {position: absolute; left: 100%; top:0;}
nav.menu ul li.bag{position:relative;}
nav.menu ul li.bag .dotted{position:absolute; top:20px; right:5px; width:6px; height:6px; border-radius:3px; background:#49b8e6; z-index:2;}
/*search*/
.box-search{float:left; height:70px; margin-left:15px;}
.box-search input.search{height:30px; margin:20px 0; background:#56505024; border:none; padding:5px; float:left; font-size:14px; font-weight:400;}
.box-search button.search{height:30px; margin:20px 0; color:#fff; background:#2babe1; padding:5px 10px; border:none; font-size:12px; opacity:1;transition: all .3s ease-in-out;font-weight: 600;}
.box-search button.search:hover{opacity:0.8;transition: all .3s ease-in-out;}
.box-search a.search{height:30px; margin:20px 0; color:#fff; background:#2babe1; padding:5px 10px; border:none; font-size:12px; opacity:1;transition: all .3s ease-in-out;font-weight: 600;}
.box-search a.search:hover{opacity:0.8;transition: all .3s ease-in-out;}
ul.top-sosmed{padding:20px 0; height:70px;margin:0 auto; list-style:none; list-style-position:inside; text-align:center; overflow:hidden;}
ul.top-sosmed li{ display:inline-block; margin:0 0 0 5px;}
ul.top-sosmed li a{width:30px; height:30px;color:#fff;text-align:center;display:flex; align-items:center; justify-content:center; color:#fff;transition: all .3s ease-in-out; font-size:18px;}
ul.top-sosmed li a:hover{opacity:0.8;transition: all .3s ease-in-out;}
.top-board{width:100%; height:auto; overflow:hidden; position:relative;margin:0 auto;}
.top-board img{width:100%; height:auto;}
.top-board .top-board-in{position:absolute; top:0; width:100%;left:0; right:0; margin:0 auto;max-width:1200px; height:100%; padding:0 15px; z-index:2;}
.top-board .top-board-in .left-board{position:absolute; bottom:15px; left:15px; width:510px; height:320px;}
.left-board .logow{width:auto; height:70px; margin:0 0 15px 0;}
.left-board .logow img{width:auto; height:70px;}
.left-board h2.title{font-size:36px; line-height:40px; font-weight:700;}
.left-board h3.title{font-size:28px; line-height:32px; font-weight:700;}
.left-board p.title{font-size:16px; line-height:20px; position:relative;}
.left-board p.title:before{content:''; position:absolute; top:-8px; width:290px; height:1px; background:#fff;}
.left-board a.line-btn{border:1px solid #fff; background:transparent; padding:10px; font-size:14px; display:inline-flex; color:#fff;opacity:1;  transition: all .3s ease-in-out;}
.left-board a.line-btn:hover{opacity:0.6;  transition: all .3s ease-in-out;}
.top-board .top-board-in .right-board{position:absolute; bottom:30px;border:1px solid #f5f5f5; right:15px; width:250px; height:auto; overflow:hidden;}
.right-board .head{padding:15px; background:#f5f5f5; text-align:center; font-weight:700; color:#333333; overflow:hidden;}
.right-board .formbox{padding:15px; background:#fff; overflow:hidden;}

/*training*/
.box-training{min-height:540px; width:100%; overflow:hidden; padding-bottom:150px; position:relative;}
.box-training:before{content:'';width:300px; height:2px; left:0; right:0; bottom:120px; margin:0 auto; background:#ff9b51; position:absolute; z-index:1;}
.box-training h1.titlebox{color:#000;font-weight:900; margin:0 auto 30px auto; text-align:center; font-size:30px; line-height:34px;}
.box-training h2.titlebox{color:#000;font-weight:900; margin:0 auto 30px auto; text-align:center; font-size:30px; line-height:34px;}
.card-training{border:1px solid #ccc; padding:0; overflow:hidden; margin-bottom:20px;}
.card-training .cover-img{width:100%; height:auto; margin:0 auto;}
.card-training .cover-img img{width:100%; height:auto; margin:0 auto;transition: all .3s ease-in-out;transform:scale(1);}
.card-training .card-text{padding:10px; overflow:hidden; position:relative; width:100%; margin-top:10px;}
.card-training .card-text h3.title{font-size:14px; line-height:18px; font-weight:600; margin:0 0 5px 0;white-space: nowrap;width: 100%; overflow: hidden;text-overflow: ellipsis;}
.card-training .card-text h4.title{font-size:12px; line-height:16px; font-weight:500; margin:0 0 5px 0; padding-right:90px;}
.card-training .card-text h2.title{font-size:18px; line-height:22px; font-weight:700; margin:5px 0 0 0; padding-right:90px;}
.card-training .card-text a.launch{width:80px; height:30px; position:absolute; right:10px; bottom:10px; z-index:2; padding:5px; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; background:#27aae1; color:#fff; transition: all .3s ease-in-out;}
.card-training .card-text a.launch:hover{background:#ccc; transition: all .3s ease-in-out;}
.card-training:hover .cover-img img{transition: all .3s ease-in-out;transform:scale(1.1);}
/*fasilitator*/
.box-fasilitator{background:#27aae1; overflow:hidden; width:100%; min-height:100px; padding-bottom:30px;}
.box-fasilitator h2.titlebox{color:#fff;font-weight:900; margin:30px auto 30px auto; text-align:center; font-size:30px; line-height:34px;}
/*partner*/
.box-partner{padding:15px;height:90px; border-bottom:1px solid #b2b2b2;}
.box-partner h2.titlebox{float:left; font-size:30px; line-height:30px; height:60px; font-weight:700; position:relative; margin-right:18px;}
.box-partner h2.titlebox:after{width:3px; height:60px; content:''; top:0; right:-18px; z-index:2; position:absolute; background:#b2b2b2;}
.card-partner{width:100%; height:60px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.card-partner img{width:auto; max-width:100%; height:auto; max-height:60px;}
/*recommended*/
.box-recommended{width:100%; margin:0 auto; padding:60px 0; overflow:hidden;}
.card-recommended{overflow:hidden; margin:0 auto;}
.card-recommended .deicons{width:50px; height:50px; border-radius:25px; border:2px solid #10779d; display:flex; align-items:center; justify-content:center; margin:0 auto 15px auto; color:#10779d;transition: all .3s ease-in-out;}
.card-recommended h2.title{font-weight:700; font-size:20px; line-height:22px; margin:0 auto 15px auto; text-align:center;}
.card-recommended p.desc{font-size:14px; line-height:16px; margin:0 auto; text-align:center; color:#86878b;}
.card-recommended:hover .deicons{transition: all .3s ease-in-out; border-color:#f8dc00; color:#f8dc00;}
/*project*/
.box-project{padding:60px 0; overflow:hidden; background:#f5f5f5;}
.box-project h2.titlebox{font-size:50px; line-height:52px; font-weight:800; position:relative; margin:0 auto 40px auto; text-align:center; padding:0;}
.box-project p.desc{margin:0 auto 60px auto; text-align:center; font-size:14px; font-weight:400; line-height:16px; max-width:600px;}
.box-project h2.titlebox:after{width:80px; height:1px; content:''; bottom:-20px; right:0; left:0; z-index:2; position:absolute; background:#10779d; margin:0 auto; text-align:center;}
.box-project .left-project{width:40%; float:left; padding:0 15px;}
.box-project .center-project{width:30%; float:left; padding:0 15px;}
.box-project .right-project{width:30%; float:left; padding:0 15px;}
.box-project h3.title{font-family:Georgia, serif; font-size:24px; line-height:26px; margin:0 0 30px 0; font-weight:400;}
.box-project h1.title{font-family:Georgia, serif; font-size:72px; line-height:74px; margin:0; font-weight:400;}
.card-project{overflow:hidden; margin:40px auto 0 auto;}
.card-project .img-project{width:100%; height:auto; overflow:hidden; margin:0 0 30px 0;}
.card-project .img-project img{width:100%; height:auto; transition: all .3s ease-in-out;transform:scale(1);}
.card-project h3.title{font-family:Georgia, serif; font-size:24px; line-height:26px; margin:30px 0; font-weight:400; text-align:center;}
.card-project p.desc{font-family:Georgia, serif; font-size:18px; line-height:20px; margin:0; font-weight:400; text-align:center;}
.card-project:hover .img-project img{transition: all .3s ease-in-out; transform:scale(1.1);}
/*customer*/
.box-testi{padding:60px 0; overflow:hidden; background:#fff;}
.box-testi h2.titlebox{font-size:30px; line-height:32px; font-weight:400; position:relative; margin:0 auto 40px auto; text-align:center; padding:0;}
.box-testi p.desc{margin:0 auto 60px auto; text-align:center; font-size:14px; font-weight:400; line-height:16px; max-width:600px;}
.box-testi h2.titlebox:after{width:80px; height:1px; content:''; bottom:-20px; right:0; left:0; z-index:2; position:absolute; background:#10779d; margin:0 auto; text-align:center;}
.card-testi{margin:0 auto; min-height:200px; max-width:400px;}
.card-testi .profil-testi{position:relative; overflow:hidden; min-height:70px;}
.card-testi .profil-testi .foto-testi{width:70px; height:70px; overflow:hidden; float:left; border-radius:50%;}
.card-testi .profil-testi .foto-testi img{width:auto; height:70px;}
.card-testi .profil-testi h3.name{padding-left:85px; margin-top:15px;font-size:18px; line-height:20px; font-weight:600;}
.card-testi .profil-testi p.jobs{padding-left:85px;font-size:14px; line-height:18px; margin:5px 0 0 0;}
.card-testi .detesti{border-radius:6px; color:#000; background:#ccc; padding:15px; margin-bottom:30px; position:relative; font-size:14px; line-height:18px;}
.card-testi .detesti:before{content:''; bottom:-20px; left:20px; width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #ccc transparent transparent transparent; position:absolute; z-index:2;}
.card-testi .detesti.hijau{background:#68c800;}
.card-testi .detesti.hijau:before{border-color: #68c800 transparent transparent transparent;}
.card-testi .detesti.biru{background:#10779d; color:#fff;}
.card-testi .detesti.biru:before{border-color: #10779d transparent transparent transparent;}
.card-testi .detesti.kuning{background:#f6d704;}
.card-testi .detesti.kuning:before{border-color: #f6d704 transparent transparent transparent;}
/*daftar*/
.box-daftar{padding:60px 0; overflow:hidden; background-image:linear-gradient( rgba(88, 85, 85, 0.45), rgba(0, 0, 0, 0.45) ), url(../images/background-awan.jpg); margin:0 auto; text-align:center;background-position: top center; background-repeat: no-repeat; background-size: cover;}
.box-daftar h2.titlebox{font-size:30px; line-height:32px; font-weight:800; position:relative; margin:0 auto 40px auto; text-align:center; padding:0; letter-spacing:5px;}
.box-daftar p.desc{margin:0 auto 15px auto; text-align:center; font-size:14px; font-weight:400; line-height:16px; max-width:60vw;}
.box-daftar h2.titlebox:after{width:80px; height:1px; content:''; bottom:-20px; right:0; left:0; z-index:2; position:absolute; background:#fff; margin:0 auto; text-align:center;}
a.big-daftar{padding:20px 15px; border:5px solid #fff; color:#fff; background:transparent; text-align:center; display:inline-flex; margin:0 auto; font-size:24px; line-height:26px; font-weight:800;}
a.big-daftar:hover{box-shadow:1px 1px 12px rgba(8,210,243,1.00); text-shadow:1px 1px 12px rgba(8,210,243,1.00);}
/*contact*/
.box-contact{padding:60px 0; overflow:hidden; background:#fff;}
.box-contact h2.titlebox{font-size:30px; line-height:32px; font-weight:400; position:relative; margin:0 auto 40px auto; text-align:center; padding:0;}
.box-contact p.desc{margin:0 auto 60px auto; text-align:center; font-size:14px; font-weight:400; line-height:16px; max-width:600px;}
.box-contact h2.titlebox:after{width:80px; height:1px; content:''; bottom:-20px; right:0; left:0; z-index:2; position:absolute; background:#10779d; margin:0 auto; text-align:center;}
.box-contact .left-contact{width:50%; float:left; padding:0 15px;}
.box-contact .right-contact{width:50%; float:left; padding:0 15px;}
.cd-main-content {
    min-height: 100%;
    position: relative;
    z-index: 2;
	padding-top:70px;
 -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
	background:transparent;
}
/*box*/
.debox{padding:60px 0; display:block;}
.debox h1.title{font-size:40px; line-height:42px; font-weight:500; position:relative; margin:0 0 30px 0; padding:0;}
.debox h1.titlecenter {font-size: 30px;line-height: 32px;font-weight:500;position: relative; margin: 0 auto 40px auto;text-align: center;padding: 0;}
.debox h1.titlecenter:after {width: 80px;height: 1px;content: '';bottom: -20px;right: 0;left: 0;z-index: 2;position: absolute;    background: #10779d;margin: 0 auto;text-align: center;}
.debox h1.titlecenter.left{margin:0 0 40px 0; text-align:left; width:100%;}
.debox h1.titlecenter.left:after{text-align:center; margin:0;}
.debox h3.titlecenter {font-size: 30px;line-height: 32px;font-weight:500;position: relative; margin: 0 auto 40px auto;text-align: center;padding: 0;}
.debox h3.titlecenter:after {width: 80px;height: 1px;content: '';bottom: -20px;right: 0;left: 0;z-index: 2;position: absolute;    background: #10779d;margin: 0 auto;text-align: center;}
.debox h3.titlecenter.left{margin:0 0 40px 0; text-align:left; width:100%;}
.debox h3.titlecenter.left:after{text-align:center; margin:0;}
img.full{width:100%; height:auto; display:block;}
/*element*/
.lines{height:30px; padding:0 5px; border:1px solid #fff; border-bottom-color:#ccc; margin:0 0 10px 0; width:100%; background:#fff; font-size:14px;}
.lines.dark{border:1px solid transparent; background:transparent;border-bottom-color:#e2e4fc; min-height:40px; padding:0;}
.element-box{margin:0; position:relative; height:auto;}
.element-box .icons{width:40px; height:40px; position:absolute; left:0; top:0; z-index: 2;border-right: 1px solid #e2e4fc; display: flex; align-items:center; justify-content: center;}
.element-box .icons.small{width:30px; height:30px;}
.element-box input.element-input{width:100%; height:40px; padding:10px 5px 10px 50px; background:#fff; border:1px solid #e2e4fc;font-size:14px;}
.element-box input.element-input.mapsearch{width:600px; height:60px;font-size:18px; padding:10px 70px 10px 10px; font-weight:600;}
.element-box input.element-input.right-icons{padding:10px 50px 10px 5px;}
.element-box .icons.icons-right{left:inherit; right:0; border:0; border-left:1px solid #e2e4fc; background:transparent;}
.element-box textarea.element-area{width:100%; min-height:120px; padding:10px 5px 10px 50px; background:#fff; border:1px solid #e2e4fc;font-size:14px;}
.element-box .button-map{position:absolute; top:0; right:0; width:60px; height:60px; background:#31a0df; border:none; display:flex; align-items:center; justify-content:center; color:#fff;}
.element-box.overinput input.element-input{padding-right:40px;}
button.a-btn{width:100%; height:50px;background:#31a0df; color:#fff;transition: all 0.3s ease-in-out;opacity:1; margin-top:15px;border:none;}
.radius6{border-radius:6px !important;}
.element-box.overinput .sign-btn{position:absolute; right:0; top:0; width:30px; z-index:1;margin-top:0;}
button.a-btn.minimalis{width:auto; padding:0 30px;}
button.a-btn.medium{height:40px;}
button.a-btn.small{height:30px;}
button.a-btn.line{background:#fff; border:1px solid #31a0df;}
button.a-btn:hover{transition: all 0.3s ease-in-out; opacity:0.9; background:#31a0df;}
a.a-btn{width:100%; height:50px; background:#31a0df; color:#fff;transition: all 0.3s ease-in-out;opacity:1; margin-top:15px; display:flex; align-items:center; justify-content: center; border:1px solid #31a0df;}
a.a-btn.noborder,button.a-btn.noborder{border:none;}
a.a-btn.minimalis{width:auto; padding:0 30px; display: inline-flex; margin:0 auto;}
a.a-btn.medium{height:40px; font-size:14px; font-weight: 600;}
a.a-btn.line{background:#fff; border:1px solid #31a0df;}
a.a-btn:hover{transition: all 0.3s ease-in-out; opacity:0.6;}
.element-box .element-select{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;}
.element-box select.element-select {
	width:100%; height:40px; padding:5px 5px 5px 50px; background:#fff; border:1px solid #e2e4fc;font-size:16px;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #a7a8ba 50%),
    linear-gradient(135deg, #a7a8ba 50%, transparent 50%),
    linear-gradient(to right, #e2e4fc , #e2e4fc );
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}
.element-box select.element-select.noicons, .element-box input.element-input.noicons, .element-box textarea.element-area.noicons{padding-left:5px !important; min-width:10px;}
.element-box input.element-input.small{height:30px; font-size:12px; padding-left:40px;}
.element-box textarea.element-area.small{font-size:12px; padding-left:40px;}
.element-box select.element-select.minimalis{min-width:120px; width:auto;  padding-right: 35px;}
.element-box input.element-input.minimalis{min-width:146px; width:auto;}
.element-box select.element-select.small{height:30px; font-size:12px;  background-position:
    calc(100% - 15px) calc(1em + -1px),
    calc(100% - 10px) calc(1em + -1px),
    calc(100% - 2.5em) 0.3em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em; padding-left:40px;
  background-repeat: no-repeat;}
.element-radio {position:relative;display:block;cursor:pointer;}
.element-radio input[type="radio"]{opacity:1;border:2px solid #e2e4fc;background:#fff;height:20px;width:20px;position:relative;top:0;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:10px;display:inline-flex; margin-right:5px;}
.element-radio input:checked{opacity:1; background:#fff; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid #00bfd7 ;}
.element-radio input:checked:before{position:absolute; width:12px; height:12px;top:2px; left:2px;background:#00bfd7 ; border-radius:8px; content:''; z-index:2;}
.element-radio input:disabled{opacity:1; background:#fff; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid #d91c40; cursor: not-allowed;}
.element-radio input:disabled:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00d'; color:#d91c40; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;margin:0 auto;}
label.element-radio { display: inline-flex;}
label.element-radio.dblock { display:block;}
.element-check {position:relative;display:block;cursor:pointer;}
.element-check input[type="checkbox"]{opacity:1;border:2px solid #e2e4fc;background:#fff;height:20px;width:20px;position:relative;top:0;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:4px;display:inline-flex; margin-right:5px;}
.element-check input:checked{opacity:1; background:#fff; border:2px solid #00bfd7 ;-webkit-appearance:none;-moz-appearance: none;appearance: none;}
.element-check input:checked:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00c'; color:#00bfd7 ; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check input:disabled{opacity:1; background:#fff; border:2px solid #d91c40;-webkit-appearance:none;-moz-appearance: none;appearance: none;cursor: not-allowed;}
.element-check input:disabled:before{font-family:'FontAwesome'; content:'\f00d'; position:absolute;  width:16px; height:16px;top:0px; left:0; color:#d91c40; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2;}
label.element-check { display: inline-flex;}
.element-box .input-field{margin:0;}
.element-box .file-field{position:relative;}
.element-box .file-field .btn.upload{background:#e2e4fc;border-radius:6px 0px 0 6px !important;cursor: pointer;display: inline-flex;align-items:center;justify-content:center;height:40px;width:40px; float:none; padding:0; position:absolute; top:0; left:0; z-index:2;}
.element-box .file-field .btn.upload i{font-size:16px;color:#4e4e4e; line-height:normal;}
.element-box .file-field input[type=file]{position: absolute;top: 0;right: 0;left: 0;bottom: 0;width: 100%;margin: 0;    padding: 0;font-size: 20px;cursor: pointer;opacity:0;filter: alpha(opacity=0); z-index:3;}
.element-box .file-field .file-path-wrapper{text-align:left;background: #fff;padding:0;width: 100%;position: relative;border:1px solid #e2e4fc;height:40px; overflow:hidden; border-radius:6px;}
.element-box .file-field input.file-path {width: 100%;height: 40px;border: none;padding-left: 50px;}

/*breadcrumbs*/
.breadcrumbs{margin:0 auto; display:block; padding:0 0 0 0; overflow:hidden;}
ul.sitemap{list-style:none; list-style-position:inside; margin:0; padding:0; display:flex; align-items:center; }
ul.sitemap li{float:left; padding-right:20px; position:relative; font-size:12px; font-weight:500; text-transform:uppercase; color:#00bfd7;}
ul.sitemap li:before{position:absolute;font-family: 'FontAwesome';content: '\f054'; top:0; right:5px; font-size:8px; color:#00bfd7;}
ul.sitemap li a{color:#00bfd7;} ul.sitemap li a:hover{color:#408a63}
ul.sitemap li:last-child{padding-right:0;}
ul.sitemap li:last-child:before{display:none;}

ul.pagging{list-style:none; list-style-position:inside; margin:15px 0; padding:0; display:flex; align-items:center; justify-content:flex-start; flex-flow:row wrap;min-height:30px;}
ul.pagging li{min-width:30px; height:30px; text-align:center; margin:3px;}
ul.pagging li a{height:30px; display:block; font-size:14px; font-weight: 600; padding:5px; border:1px solid #00bfd7;  color:#00bfd7; background:#fff; border-radius:4px;transition: all 0.3s ease-in-out;opacity:1;}
ul.pagging li a:hover{background:#fff; color:#ccc;border-color:#ccc;transition: all 0.3s ease-in-out;opacity:0.8;}
ul.pagging li.selected a{background:#00bfd7; color:#fff;border-color:#00bfd7;}

ul.row-list{list-style: none; list-style-position: inside; margin:0 -15px; padding:0; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap; overflow:hidden;}
ul.row-list li{width:100%; padding:0 15px; overflow:hidden;}
ul.row-list.row2 li{width:50%; padding:0 15px;}
ul.row-list.row3 li{width:33.333%; padding:0 15px;}
ul.row-list.row4 li{width:25%; padding:0 15px;}
ul.row-list.row5 li{width:20%; padding:0 15px;}
ul.row-list.row6 li{width:16.666%; padding:0 15px;}
ul.row-list.row4.pad5, ul.row-list.row3.pad5, ul.row-list.row2.pad5, ul.row-list.row5.pad5,  ul.row-list.row6.pad5{margin:0 -5px;}
ul.row-list.row4.pad5 li, ul.row-list.row3.pad5 li, ul.row-list.row2.pad5 li, ul.row-list.row5.pad5 li, ul.row-list.row6.pad5 li{padding:0 5px;}
ul.row-list.row4.pad10, ul.row-list.row3.pad10, ul.row-list.row2.pad10, ul.row-list.row5.pad10,  ul.row-list.row6.pad10{margin:0 -10px;}
ul.row-list.row4.pad10 li, ul.row-list.row3.pad10 li, ul.row-list.row2.pad10 li, ul.row-list.row5.pad10 li, ul.row-list.row6.pad10 li{padding:0 10px;}
ul.row-list.list-partner-logo li{margin:15px 0;}
ul.row-list.list-store li{margin-bottom:20px;}
/*card news*/
.card-box{height:auto; overflow:hidden;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box .deicons{width:60px; height:60px; border-radius:30px; border:3px solid #31a0df; display:flex; align-items:center; justify-content:center; margin:0 auto 15px auto; color:#31a0df;transition: all .3s ease-in-out; overflow:hidden;}
.card-box .deicons img{width:60px; height:60px;}
.card-box .deicons i{font-size:30px;}
.card-box .card-logo{width: 100%;height:60px;display: flex;align-items: center;justify-content: center;overflow: hidden;  margin-bottom:30px; }
.card-box .card-logo img{width: auto;max-width: 100%; height: auto;max-height: 60px;}
.card-box .img-card{position:relative;width:200px;float:left;overflow:hidden;height:auto;margin:0 auto; padding:0; display:flex; align-items:center; justify-content:center; text-align:center; }
.card-box .img-card img{width:100%; height:auto; display:block;}
.card-box .text-card{height:auto; width:auto; overflow:hidden; padding:0 0 0 15px; position:relative;}
.card-box .text-card h3.title{transition: all .3s ease-in-out;font-size:20px;line-height:24px;margin: 0 auto;font-weight:600;color:#333;}

.card-box .text-card h4.date{color:#00bfd7 ; font-size: 14px;line-height: 18px; font-weight:500; margin:10px 0 0 0 ;word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; height:18px;transition: all .3s ease-in-out;}
.card-box .text-card p{margin:15px 0 0 0; letter-spacing: normal; font-size:14px; line-height:18px;color:#333;}
.card-box.overtext{width:50%;}
.card-box.overtext .text-card{position:absolute; left:0; right:0; bottom:0; padding:10px !important;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.49) 49%, rgba(0,0,0,1) 100%);}
.card-box .text-card h4.title{font-size:16px; line-height:20px; font-weight:600;}
.card-box .text-card h5.title{font-size:14px; line-height:18px; font-weight:600;}
.card-box.overtext .img-card {width:100%; opacity:1;transition: all .3s ease-in-out; float:none;}
.card-box.overtext .img-card.small{height:134.66px;}
.card-box.overtext .img-card.small img{width:100%; height:auto;}
.card-box.overtext:hover .img-card{opacity:1;transition: all .3s ease-in-out;}
.card-box.overtext a{color:#fff;}
.card-box.overtext a:hover{color:#ccc;}
.card-box.big{width:100%;}
.card-box.big .img-card{width:100%; float:none;height: auto;}
.card-box.big .img-card img{width:100%; height: auto;}
.card-box.big .text-card {width:100%; padding:10px 0 0 0;}
.card-box.big .text-card h2.title{font-size:30px; line-height: 34px; font-weight: 700;}
.card-box .animhover{ transform:scale(1) rotate(0);transition: all .3s ease-in-out;}
.card-box:hover .animhover{ transform:scale(1.1) rotate(-2deg);transition: all .3s ease-in-out;}
.card-box.small{width:100%;}
.card-box.small .img-card{width:100%; float:none;height: auto;}
.card-box.small .img-card img{width:100%; height: auto;}
.card-box.small .text-card {width:100%; padding:5px 0 10px 0;}
.card-box.small .text-card h3.title{font-size:14px; line-height:18px; font-weight:600;}
.card-box.medium .img-card{width:45%; height: auto;}
.card-box.medium .img-card img{width:100%; height: auto;}
.card-box .img-card .icons{position:absolute; bottom:0; right:0; width:30px; height:30px; font-size:14px; background:#fff; border-radius:6px 0 0 0; display:flex; align-items:center; justify-content:center; z-index:2; color:#ccc;transition: all .3s ease-in-out;}
.card-box:hover .img-card .icons{color:#333;transition: all .3s ease-in-out;}
.card-box.bignews .img-card{width:67%; float:left;height: auto; padding-right:15px;}
.card-box.bignews .img-card img{width:100%; height: auto;}
.card-box.bignews .text-card {width:33%; padding:0; padding-left:15px;}
.card-box.bignews .text-card h2.title{font-size:30px; line-height: 34px; font-weight:500;}
.col-penulis{overflow:hidden; display:block; margin:15px 0;}
.col-penulis .img-penulis{width:40px; height:40px; overflow:hidden; border-radius:20px; float:left;}
.col-penulis .img-penulis img{width:auto; height:40px;}
.col-penulis .title-penulis{min-height:40px; padding-left:10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.col-penulis .title-penulis h4.name{font-size:12px; line-height:16px;margin:0; font-weight:600;}
.col-penulis .title-penulis p.title{font-size:12px; line-height:16px; margin:0; color:#999; max-width:280px;}
.card-box .text-card h4.title{transition: all .3s ease-in-out;font-size:16px;line-height:18px;margin: 0 auto;font-weight:600; }
.card-box .text-card h4.title.break2{word-wrap: break-word;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 36px;}
.card-box.wborder{border:1px solid #e2e4fc;}
.card-box.wborder .text-card{padding:10px;}
.card-box .img-profile{width:120px; height:120px; border-radius:60px; overflow:hidden; margin:0 auto;}
.card-box .img-profile img{width:100%; height:auto;}
/*table box*/
.table-box {margin:0px;padding:0px;width:100%;border:0px solid #fff;}
.table-box .t-left{text-align:left;}
.table-box .t-right{text-align:right;}
.table-box table{width:100%;height:100%;margin:0px;padding:0px;}
.table-box tr:nth-child(odd){ background-color:#edfff5 ; }
.table-box tr:nth-child(even){ background-color:#fff; }
.table-box td{vertical-align:baseline;border:1px solid #ddd;border-width:0px;text-align:center;padding:8px;font-size:14px;color:#333;font-weight:400;line-height:20px;}
.table-box tr:first-child td{border-bottom:1px solid #00bfd7; background:#408a63; font-weight:700; color:#fff;}
.table-box tr:first-child td a{color:#999;}
.table-box tr:last-child td{border-bottom:1px solid #00bfd7;}
.table-box tr {border-top:1px solid #00bfd7;}
.table-box tr td:last-child{padding-right:16px;}
.table-box tr td:first-child{padding-left:16px;}
.table-box tr.selected{background:#00bfd7;}
.table-box tr.selected td{font-weight:700;}
/*spinner*/
.spinner {margin:30px auto;width:100px;text-align: center;}
.spinner > div {width:10px;height:10px;background-color: #408a63;border-radius:5px; display: inline-block;-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;animation: sk-bouncedelay 1.2s infinite ease-in-out both;}
.spinner .bounce3{background-color: #408a63;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;background-color: #408a63;}
@-webkit-keyframes sk-bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0) }40% { -webkit-transform: scale(1.0) }}
@keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale(0);transform: scale(0);} 40% {-webkit-transform: scale(1.0);transform: scale(1.0);}}

.square {position: relative;width:100%;}
.square:after {content: "";display: block;padding-bottom: 100%;}
.square-img {position: absolute;width: 100%;height: 100%; overflow: hidden;display: flex;align-items: center;justify-content: center;}
.square-img a{display:flex; align-items:center; justify-content: center; height:100%; width:100%;}
.square-img img{width:auto; height:100% !important; margin:0 auto;}
.square.inline{background:#fff; border-radius:4px; border:1px solid #e2e4fc;}
.square.inline .square-img{padding:10px;}
/*detail*/
.detail-artikel{width:100%;margin-bottom: 15px;background: #fff;overflow: hidden;min-height: 10px; padding:0 15px;}
.detail-artikel .detail-in{padding:0;}
.detail-artikel p{font-size:16px; line-height:22px; margin:0 0 30px 0; font-weight:500;}
.detail-artikel p a{font-weight:700; color:#00bfd7;}
.detail-artikel p a:hover{color:#00bfd7; border-bottom:1px solid #00bfd7;}
.detail-artikel .box-detail-foto{margin:0 0 15px 0; overflow:hidden;}
.detail-artikel .detail-foto{width:100%; height:auto;overflow:hiden; margin:0 auto;}
.detail-artikel .detail-foto img{width:100%; height:auto; }
.detail-artikel .caption{font-size:11px; line-height:14px; padding:10px 0; color:#999; border-bottom:1px solid #f6f6f6;}

.detail-artikel h2.detail{font-size:36px; line-height:36px; margin:0 0 15px 0; }
.box-detail-title{padding:15px 0; overflow: hidden;}
.box-detail-title h1.title{margin:0 0 15px 0; font-size:36px; line-height:40px; font-weight:600;}
.box-detail-title h2.title{margin:0 0 10px 0; font-size:30px; line-height:34px; font-weight:600;}
.box-detail-title h3.title{font-size:16px; line-height:18px;  margin:0 0 10px 0; font-weight:400;}
.box-detail-title h4.date{font-size:12px; line-height:14px;  margin:0 0 10px 0; font-weight:400; text-transform:uppercase;}
.box-sumber .icons{width:46px; height:46px; border-radius:50%; float:left; overflow:hidden;display:flex; justify-content: center;}
.box-sumber .icons img{width:46px; height:46px;}
.box-sumber .sumber-name{padding-left:10px; min-height: 40px;display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.box-sumber .sumber-name p{font-size:14px; margin:0; padding:0; font-weight:300;}

/*share*/
ul.share{padding:15px; margin:0 auto; list-style:none; list-style-position:inside; text-align:center; overflow:hidden; display:flex; align-items:center; justify-content:center;}
ul.share li{display:block; margin:0 1px; width:50px; height:50px;}
ul.share li a{width:50px; height:50px; border-radius:4px; color:#fff; text-align:center; font-size:16px;  display:flex; align-items:center; justify-content:center;}
ul.share li a:hover{color:rgba(255,255,255,0.5); border-color:rgba(255,255,255,0.5);}
ul.share.small li{width:30px; height:30px;}
ul.share.small li a{width:30px; height:30px;}
ul.share.circle li {width:40px; height:40px; margin:0 3px;}
ul.share.circle li a{width:40px; height:40px; border-radius:20px; border:2px solid #fff; color:#fff;}
ul.share.circle li a:hover{border-color:#00bfd7; color:#00bfd7;}
/*tag detail*/
ul.tags{list-style:none; list-style-position:inside; margin:0; padding:15px; display:flex; align-items:center; justify-content:flex-start; flex-direction:row; flex-wrap:wrap;}
ul.tags li{border-radius:4px;background:#00bfd7; margin:0 5px 5px 0;padding:5px 15px; border:1px solid #00bfd7; font-weight:600; font-size:14px;}
ul.tags li a{color:#fff;}
ul.tags li a:hover{color:#408a63;}
/*accordion*/
ul.accordion {list-style: none;padding: 0;}
.inner {padding:15px;overflow: hidden;display: none;background:#fff;border-top:1px solid #e2e4fc;}
ul.accordion li {margin: .5em 0; border-radius:6px; overflow:hidden;box-shadow: 1px 1px 6px rgba(0,0,0,0.1);}
ul.accordion li  a.toggle {width: 100%;display: block;color: #333;padding:15px;background:#fff;transition: background .3s ease;font-weight:600;}
/*list-check*/
p.check{position:relative; padding-left:20px; width:100%;}
p.check:before{content:'\f00c'; position:absolute; left:0; top:0; z-index:2;color:#00bfd7;font-family: 'FontAwesome';}
/*box login*/
.out-apply-now{width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:60px 15px; margin:0 auto;}
.out-login{width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:60px 15px; margin:0 auto;}
.box-login{width:100%; max-width:415px; margin:0 auto; background:#fff; border:1px solid #e7e7e9; overflow:hidden; padding:15px; min-height:100px; border-radius:8px; box-shadow:1px 1px 12px rgba(0,0,0,0.1);}
.box-login .logo{height:60px; margin:0 auto; display:flex; align-items:center; justify-content:center;}
.box-login .logo img{height:60px; width:auto;}
/*search-map*/
.box-maparea{width:100%; height:300px; background:#101010 url('../images/bg-map.jpg') center center no-repeat; margin:0 auto 30px auto; display:flex; align-items:center; justify-content:center;}
/*tab menu*/
.icon-mid{width:40px; height:auto; clear:both;}
#tab-container {position:relative; width:100%; display:block; border:1px solid #e2e4fc; overflow:hidden;}
ul.tabs-menu {width:100%;height:40px;clear: both;list-style:none;list-style-position:inside;padding:0;margin:0 auto;border-bottom:1px solid #ddd; text-align:center;}
.tab-block{display:block;}
.tabs-menu li {padding:0px;color:#999;font-size:14px; display:inline-block; border-left:1px solid transparent; border-right:1px solid transparent; border-bottom:1px solid transparent; }
.tabs-menu li.current {position: relative;background-color: #fff;z-index: 5;color:rgba(0,174,256,1); border-left:1px solid #e2e4fc; border-right:1px solid #e2e4fc; border-bottom:1px solid #fff;}
.tabs-menu li a {padding:5px 10px;color: #999;text-decoration: none;display:flex;align-items:center; justify-content:center;height:40px; min-width:60px; font-weight:600; font-size:14px;}
.tabs-menu .current a {color:#00bfd7;}
.tab {background-color: #fff;float:left;margin-bottom:0;width:100%;}
.tab-content {width:auto;padding:0 15px;display: none; overflow:hidden;}
#tab-satu {display: block;}
.tab-result{overflow:hidden; display:block; margin:15px 0;}
.tab-result .icon-result{width:40px; height:40px; overflow:hidden; border-radius:20px; float:left; display:flex; align-items:center; justify-content:center; border:1px solid #00bfd7; color:#00bfd7;} 
.tab-result .title-tab-result{min-height:40px; padding-left:10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.tab-result .title-tab-result h4.name{font-size:14px; line-height:16px;margin:0; font-weight:600;}
.tab-result .title-tab-result p.title{font-size:12px; line-height:16px; margin:0; color:#999; max-width:280px;}
/*footer*/
.footer{width:100%; background:#27aae1; padding:15px 0;}
ul.sosmed{padding:0; margin:0 auto; list-style:none; list-style-position:inside; text-align:center; overflow:hidden;}
ul.sosmed li{ display:inline-block; margin:0 3px;}
ul.sosmed li a{width:40px; height:40px; color:#cccccc;text-align:center; font-size:14px;display:flex; align-items:center; justify-content:center;}
ul.sosmed li a:hover{color:#fff;}
p.copy{font-size:11px; margin:15px 0 0 0; color:#ccc;}
.detail-store{padding:10px 0; border-top:1px solid #f6f6f6;}
.detail-store p.small{font-size:10px; line-height:11px; margin:0 0 5px 0; color:#ff9b51; text-transform:uppercase;}
.detail-store p{font-size:14px; line-height:16px; margin:0;}
.detail-store p.big{font-size:18px; line-height:20px; margin:0; font-weight:600;}
/*detail chapter*/
.head-chapter{width:100%; height:300px; background:url('../images/bg-chapter.jpg') center center no-repeat; margin:0 auto;position:relative;}
.head-chapter .bg-chapter{background:rgba(0,0,0,0.6); position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:300px; padding:60px 0; display:flex; align-items:center; justify-content:center;}
.head-chapter .bg-chapter h1.title{color:#fff; font-size:40px; line-height:44px;}
.head-chapter .bg-chapter h3.title{color:#fff; font-size:18px; line-height:22px;}
/*tambahan menu*/
nav.menu ul li.user .avatar-user{width:40px; height:40px; overflow:hidden; border-radius:20px; display:flex; align-items:center; justify-content:center;}
nav.menu ul li.user .avatar-user img{height:40px; width:auto;}
nav.menu ul li.user > a:after {display:none;}

/*profile mobile*/
.profile-mobile{margin:15px; padding:0; overflow:hidden;}
.profile-mobile .avatar-mobile{width:60px; height:60px; border-radius:30px; float:left; overflow:hidden;}
.profile-mobile .avatar-mobile img{height:60px; width:auto;}
.profile-mobile .avatar-text{min-height:60px; padding-left:10px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.profile-mobile .avatar-text h4.title{font-size:16px; line-height:18px; font-weight:600;}
/*page profile*/
.left-profile{width:70%; padding:0 15px; float:left;}
.right-profile{width:30%; padding:0 15px; float:left;}
.table-div{border-top:1px solid #e2e4fc; padding:8px 0; margin:0; font-size:14px; line-height:18px; overflow: hidden;}
.table-div.border-no{border:none;}
.table-div .left-div{width:30%; float:left; padding:0 15px 0 0;}
.table-div .right-div{width:70%; float:left; padding:0 0 0 15px;}
.table-div .full-div{width:100%; float:none; padding:0;}
.table-div .left-div.full{width:100%; float:none; padding:0;}
.big-avatar{overflow:hidden; position: relative;}
.big-avatar.radius50{border-radius:50%;}
.big-avatar .foto-btn{position:absolute; bottom:5px; right:5px; width:40px; height:40px; border-radius:25px; background:rgba(48,51,130,0.5); color:#fff; display: flex; align-items:center; justify-content: center; z-index: 2; border:none;}
ul.row-list.row3.menu-profile li:nth-child(2){border-left:1px solid #fff; border-right:1px solid #fff;}
/*shopping cart*/
.box-row-cart{margin:0;width:100%; padding:0; }
ul.item-cart{display:block; width:100%; overflow:hidden; list-style:none; list-style-position:inside; padding:0; margin:0;}
ul.item-cart li{display:block; padding:0 0 15px 0; background:#fff;overflow:hidden; margin:0 0 15px 0; position:relative; border-bottom:1px solid rgba(0,0,0,0.1);}
ul.item-cart li .produk{width:15%; float:left; margin:0 auto;overflow:hidden; border-radius:6px;}
ul.item-cart li .produk img{width:auto; height:150px; margin:0 auto; display:block;}
ul.item-cart li .deskripsi{min-height:118px;  float:left; padding:0 15px;  width:40%;display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
ul.item-cart li .deskripsi h2{margin:0 0 10px 0; font-weight:500;}
ul.item-cart li p{margin:0 0 5px 0;}
ul.item-cart li .qty{min-height:118px; margin:0 auto; padding:0 15px; width:20%; float:left; display:flex; align-items:center; justify-content:center; flex-direction:column;}
ul.item-cart li h3.ttl-qty{font-size:40px; line-height:44px;}
ul.item-cart li .price{min-height:118px; margin:0 auto; padding:0 15px;  width:25%; float:left; display:flex; align-items:center; justify-content:center; flex-direction:column;}
ul.item-cart li .command{min-height:118px; margin:0 auto; padding:0 15px;  width:15%; float:left; display:flex; align-items:center; justify-content:center; flex-direction:column;}
input.edit-cart{font-size:14px; width:30px; height:30px; text-align:center; margin-bottom:5px; box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2); background:#f8f8f8; border:1px solid #ccc; border-radius:6px; color:#303030;}
ul.cmd {display:block; list-style:none; list-style-position:inside; margin:0; padding:0;}
ul.cmd li{display:inline-block; box-shadow:none; background:transparent; border:none; padding:0; margin:0 auto; font-size:14px; margin-right:10px;}
ul.item-cart li .price h2.new{font-size:20px; margin:0;}
ul.item-cart li span.old{color:#999; margin:0 10px 0 0; text-decoration:line-through;}
/*total cart*/
.block-total-cart{display:block;overflow:hidden;}
.block-total-cart .left{width:50%; float:left; min-height:10px; padding-right:15px;}
.block-total-cart .center{width:24%; float:left; min-height:10px; padding:0 30px;}
.block-total-cart .right{width:50%; float:left; text-transform:uppercase; font-size:16px; min-height:10px; padding-left:15px;}
.block-total-cart p.left{width:50%; padding:5px 5px 5px 0; float:left; margin:5px 0;  text-align:left;}
.block-total-cart p.right{width:50%; padding:5px 0 5px 5px; float:left; margin:5px 0; text-align:right;}
.block-total-cart p.info{margin:5px 0; font-size:14px; border:1px solid #e2e4fc; background:#fff; padding:10px;}
ul.pay-list{ list-style:none; list-style-position:inside; margin:0; padding:0; display:block; overflow:hidden; margin:5px 0 15px 0;}
ul.pay-list li:first-child{width:100%;font-size:12px; height:auto; cursor:default; font-weight:700; letter-spacing:3px;}
ul.pay-list li{width:25%; padding:5px; float:left; text-align:center; font-size:11px; height:auto; overflow:hidden; cursor:pointer;}
.formcart{padding:5px; width:100%; margin:0 0 5px 0; border:1px solid #ddd;box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1); color:#333;}
.formcart:focus{box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2); background:#f9f9f9}

ul.arsip-list{padding:0; overflow:hidden; margin:0; list-style:none; list-style-position:inside;}
ul.arsip-list li{margin:0 0 15px 0; border:1px solid #e2e4fc; overflow:hidden; padding:10px 0;}
ul.arsip-list li h2.warning{font-size:16px; font-weight:400; text-align:center; display:block;}
ul.arsip-list li h2.title{font-weight:500;display:block; margin:0; font-size:12px;}
ul.arsip-list li .arsip-product{width:100%; padding:0; margin-bottom:15px; overflow:hidden;}
ul.arsip-list li .arsip-product .img-product{width:25%; float:left;}
ul.arsip-list li .arsip-product .info-product{width:75%; float:left; padding:0 0 0 10px;}
ul.arsip-list li .arsip-product .info-product p{margin:5px 0; font-size:12px;}
ul.arsip-list li .arsip-middle{width:50%; float:left; padding:0 10px;}
ul.arsip-list li .arsip-left{width:20%; float:left;}
ul.arsip-list li .arsip-center{width:35%; float:left;}
ul.arsip-list li .arsip-right{width:50%; float:right; padding:0 10px;}
ul.arsip-list li p.arsip{font-weight:500; padding:0 0 10px 0; margin:0 0 10px 0; border-bottom:1px solid #e2e4fc; font-size:12px;}
ul.arsip-list li p.item-info{font-weight:500; margin:5px 0;}
ul.arsip-list li p.arsip:last-child{padding-bottom:0; margin-bottom:0; border-bottom:none;}
ul.arsip-list li .square {position: relative;width:100%;}
ul.arsip-list li .square:after {content: "";display: block;padding-bottom: 100%;}
ul.arsip-list li .square-img {position: absolute;width: 100%;height: 100%; overflow: hidden; display:flex; align-items:center; justify-content: center;}
ul.arsip-list li .square-img a{display:flex; align-items:center; justify-content: center; height:100%; width:100%;}
ul.arsip-list li .square-img img{width:auto; height:100% !important; margin:0 auto;}
ul.arsip-list li span.old {color: #999;margin: 0 10px 0 0;text-decoration: line-through;}

.brg-product{width:100%; padding:10px 0;margin:0; overflow:hidden; border-top:1px solid #e2e4fc;}
.brg-product h2.title{font-weight:500;display:block; margin:0; font-size:14px;}
.brg-product .img-product{width:90px; float:left;}
.brg-product .info-product{width:auto; padding:0 0 0 100px ;}
.brg-product .info-product p{margin:5px 0; font-size:12px;}
.brg-product p.arsip{font-weight:500; padding:0 0 10px 0; margin:0 0 10px 0; border-bottom:1px solid #e2e4fc; font-size:12px;}
.brg-product p.item-info{font-weight:500; margin:5px 0;}
.brg-product span.old {color: #999;margin: 0 10px 0 0;text-decoration: line-through;}