<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">html {font-family: 'Roboto', Arial, sans-serif; /* 1 */-ms-text-size-adjust:none; /* 2 */-webkit-text-size-adjust:none; /* 2 */font-size:16px; -webkit-font-smoothing: antialiased; font-weight:400; color:#444; background:#f7f8f9;  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: #000;}
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;}
sub.price{font-weight:300;bottom:0;font-size:16px; line-height:18px !important;right:-5px;display: inline-block;text-align: left;}
sup.rp{font-weight:300;font-size:20px; line-height:20px !important; left:-5px;display: inline-block;text-align: left; top:-25px;}
img {border: 0; margin:auto; display:block;}
.coret{text-decoration:line-through;}
.coret-miring{position:relative; height:20px; width:auto; font-weight:700; overflow:hidden;}
.coret-miring:before{content:''; position:absolute; height:1px; width:100%; background:#d71920; z-index:2;transform: rotate(-7deg); top:8px;}
/*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: default;}
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;}
/*base*/
.videoframe{position:relative;padding-bottom:56.25%;padding-top:25px;height: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: #444;text-decoration: none;}
a:hover, a:focus {color: #bbb;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
/*
body::-webkit-scrollbar {width:6px; background:rgba(255,255,255,0.1);}
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
body::-webkit-scrollbar-thumb {background-color:#666666;}
body::-webkit-scrollbar:horizontal {height:9px;}
*/
.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 auto !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;}
*, *::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;}
.glower {-webkit-animation: glow .5s infinite alternate;}
@-webkit-keyframes glow {to {text-shadow: 1px 1px 20px rgba(0,255,255,0.5);}}
/*body*/
.f12{font-size:12px !important;}
.f24{font-size:24px !important;}
.hide_desktop{display:none; visibility:hidden;}
body{margin:0 auto; padding:0; display:block;}
.bg-login{background:#fff url(../images/bg-black.jpg) top center no-repeat;background-attachment:fixed; background-size:cover;}
.container{margin:0 auto; max-width:1200px; padding:0 15px; display:block; overflow:hidden;min-height:100px;}
.container.full{max-width:100%;}
.nopad{padding:0;}
.container.small{max-width:1000px;}
.container-col, .contaner-col{margin-left:-15px; margin-right:-15px;}
.mainbody{position:relative; width:100%; padding:0; margin:0 auto;}
.mainbody.loginpage{display:flex; align-items:center; justify-content:center; padding:15px; min-height:100vh;}
.mainbody .mainbody-left{position:fixed; width:220px; top:0; left:0; height:100vh; background:#fff; z-index:100;overflow-y:auto; border-right:1px solid #ddd;}
.mainbody-left::-webkit-scrollbar {width:6px; background:rgba(255,255,255,0.1);}
.mainbody-left::-webkit-scrollbar-track {}
.mainbody-left::-webkit-scrollbar-thumb {background-color:#aaa; border: 1px solid #fff;}
.mainbody-left::-webkit-scrollbar:horizontal {height:9px;}
.mainbody .mainbody-right{position:relative; width:100%; padding:0; padding-left:220px; margin:0;}
.box-100{width:100%; padding:0 15px; margin:0; min-height:10px; dispay:block; clear:both;}
.box-55{width:55%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-50{width:50%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-75{width:75%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-25{width:25%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-60{width:60%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-35{width:35%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-33{width:33.333333%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-80{width:80%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-45{width:45%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-40{width:40%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-30{width:30%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-20{width:20%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-15{width:15%; float:left; padding:0 15px; margin:0; min-height:10px;}
.box-10{width:10%; float:left; padding:0 15px; margin:0; min-height:10px;}
.cd-main-content{padding-top:0; min-height:100vh;}
/*color*/
.white{color:#fff !important;}
.black{color:#444 !important;}
.red{color:#d71920 !important;}
.bg-white{background:#fff !important;}
.bg-black{background:#444 !important;}
.bg-teal{background:#8ed2ca !important;}
.bg-blue{background:#2a47c5 !important;}
.bg-green{background:#44a323!important;}
.bg-red, .bg-basic{background:#d71920!important;}
.bg-silver{background:#ccc!important;}
.bg-gold{background:#f98b18!important;}
.bg-platinum{background:#262523!important;}
.cl-green{color:#44a323!important;}
.cl-blue{color:#2a47c5 !important;}
.cl-red, .cl-basic{color:#d71920!important;}
.cl-gray{color:#aaa!important;}
.dblock{display:block !important;}
.cl-silver{color:#ccc!important;}
.cl-gold{color:#f98b18!important;}
.cl-platinum{color:#262523!important;}
.centering{display:flex; align-items: center; justify-content: center;}
.centering.column{flex-direction:column;}
.centering.row{flex-direction:row;}
.clear{clear:both;}
.overflow{overflow:hidden;}
/*header*/
.header{background:#fff; width:100%; height:50px; margin:0 auto; padding:0;border-bottom:1px solid #ddd;}
.header-in{padding:0 15px;  margin:0 auto; max-width:1000px;}
.header-in h1.logo{float:left; margin:0; padding:10px 15px;}
.header-in h1.logo img{height:30px; width:auto; display:block;}
.header-in h1.logo .title{font-size:40px; line-height:40px; margin:0; float:left;font-family: 'Myriad Pro Bold', Arial;}
a.menu{padding:15px; height:70px; width:70px; float:left; display:flex; align-items:center; justify-content:center; color:#444;}
a.menu:hover{background:#659ecb;}
ul.right-menu{list-style:none; list-style-position:inside; margin:0; padding:0; float:right;}
ul.right-menu li{float:left; border-left:1px solid #ddd;}
ul.right-menu li a{display:block;padding:10px 20px;  min-width:50px; height:50px;display:flex; align-items:center; justify-content:center; color:#444;}
ul.right-menu li a:hover{color:#999;background:#ddd;}
ul.right-menu li:last-child{border-right:1px solid #ddd;}
/*main menu*/
ul.main-menu{list-style:none; list-style-position:inside; margin:0; padding:15px 0;}
ul.main-menu li{font-size:14px; line-height:14px; font-weight:600;}
ul.main-menu li i{font-size:12px; color:#bbb; font-weight:normal; width:16px;}
ul.main-menu li a{padding:6px 20px; display:block; color:#444; position:relative;border-top:1px solid #fff; border-bottom:1px solid #fff;}
/*ul.main-menu li a:hover:before{position:absolute; content:''; left:0; top:0; bottom:0; width:6px; height:100%; background:#ccc;}*/
ul.main-menu li a:hover:after, ul.main-menu li a.selected:after{position:absolute; content:''; right:0; top:0; bottom:0; width:5px; height:100%; background:#659ecb;}
ul.main-menu li a:hover, ul.main-menu li  a:hover i, ul.main-menu li a.selected, ul.main-menu li  a.selected i{color:#659ecb;}
ul.main-menu li a:hover, ul.main-menu li a.selected{border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
/*scroll up*/
.scrollup {display:none; position: fixed; width:40px; height:40px; z-index:5; bottom:20px; right:10px; cursor: pointer;opacity:0.3;filter: alpha(opacity=30);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; cursor:pointer; background:#000; color:#fff; display:flex; align-items:center; justify-content:center; border-radius:20px;}
.scrollup:hover{opacity:0.9;filter: alpha(opacity=90);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; background:#000; color:#fff;}
/*searchbox*/
.box-search{position:relative; width:100%;}
.box-search.smaller{position:relative;align-self: flex-start;margin-left: 50px;}
.box-search .form-icon{position:absolute; width:40px; height:50px; top:0; left:0; z-index:2;color:#ccc;}
.box-search .form-cek{position:absolute; width:80px; height:50px; top:0; right:0; z-index:2;color:#fff; border:none; background:#444; border-radius:0 4px 4px 0;}
.box-search .form-icon-rd{position:absolute; width:30px; height:30px; top:10px; left:0; z-index:2;color:#fff; border:1px solid #fff; border-radius:15px;}
.box-search .form-in{position:relative; border:1px solid #ddd; background:#fff; border-radius:4px; padding:10px 10px 10px 40px; width:100%; height:50px;}
.box-search .form-trans{position:relative; border:none;border-bottom:1px solid #fff; background:transparent; padding:10px 10px 10px 40px; width:100%; height:50px; color:#fff;}
.box-search .form-trans.black, .box-search .form-icon-rd.black{color:#444; border-color:#444;}

/*list 4*/
ul.list-4 {list-style:none; list-style-position:inside; margin:0; padding:15px;}
ul.list-4 li{width:25%; padding:0 3px; float:left;}
ul.list-4 li:first-child{padding-left:0;}
ul.list-4 li:last-child{padding-right:0;}
/*list 3*/
ul.list-3 {list-style:none; list-style-position:inside; margin:0; padding:15px;}
ul.list-3 li{width:33.333333%; padding:0 5px; float:left;}
ul.list-3 li:first-child{padding-left:0;}
ul.list-3 li:last-child{padding-right:0;}
h1.title-langganan{font-size:30px; line-height:34px; margin:45px 0;}
.foto-icons{width:24px; height:24px; border-radius:12px; float:left; overflow:hidden;}
.foto-icons img{width:24px; height:24px; display:block; margin:0 auto;}
/*card-item*/
.card-item{display:block; position:relative; overflow:hidden; background:#fff;border:1px solid #eee; height:740px; border-radius:4px; box-shadow:1px 1px 11px rgba(0,0,0,0.1);}
/*.card-item:before{content:''; width:600px; height:600px; border-radius:300px; position:absolute; top:-520px; left:-9999px; right:-9999px; background:#ccc; z-index:1; margin:0 auto;}*/
.card-item.basic:before{background:#d71920;}
.card-item.silver:before{background:#bbb;}
.card-item.gold:before{background:#f98b18;}
.card-item.platinum:before{background:#262523;}
.card-item.blank:before{display:none; z-index:-1;}
.card-item .card-item-head{padding:10px; text-align:center; position:relative; font-size:30px; line-height:50px; font-weight:700; background:#f6f6f6; z-index:4; text-transform:uppercase; letter-spacing:-1px;}
.card-item .prices{position:absolute; width:100%; bottom:0; left:0; right:0;  background:#fff; display:flex; align-items:center; justify-content:center;}
.card-item .card-item-head.basic{color:#d71920;}
.card-item .card-item-head.basic:before{background:#d71920}
.card-item .card-item-head.silver{color:#bbb;}
.card-item .card-item-head.silver:before{background:#bbb;}
.card-item .card-item-head.gold{color:#f98b18;}
.card-item .card-item-head.gold:before{background:#f98b18;}
.card-item .card-item-head.platinum{color:#262523;}
.card-item .card-item-head.platinum:before{background:#262523;}
.card-item .card-item-box{padding:30px 0; min-height:600px;position:relative; z-index:3;}
.card-item h2.price{font-size:60px; line-height:62px; font-weight:700; padding:0 15px 30px 15px;}
.card-item p{padding:8px 15px; border-top:1px solid #ddd; color:#666; font-size:14px;}
.card-item:hover{box-shadow:1px 1px 5px rgba(0,0,0,0.1);}
.card-item a.btn-select{padding:15px 50px; height:50px;text-align:center; margin:0; font-size:18px;display:block; line-height:20px;background:rgba(255,255,255,0.5); color:#fff; font-weight:700; border-radius:25px; margin:15px;}
.card-item a.btn-select:hover{opacity:0.8;}
.items{position:relative; min-height:22px; padding:10px; font-size:16px; line-height:22px; color:#444; border-top:1px solid #eee;}
.items.last{border-bottom:1px solid #ddd;}
.cover, .cover img{width:auto; height:150px; margin:0 auto 20px auto; display:block;}

.card-item .labeling{position:absolute; top:0; left:0; background:#d71920; width:80px; height:auto;z-index:2; font-size:11px;color:#fff; display:flex; align-items:center; justify-content:center; padding:5px; text-align:center; font-weight:500; height:70px;}
.card-item .labeling:before{content:'';position:absolute; bottom:-30px; left:0;width: 0;height: 0;border-style: solid;border-width: 30px 40px 0 0;border-color: #d71920 transparent transparent transparent;}
.card-item .labeling:after{content:'';position:absolute; bottom:-30px; right:0;width: 0;height: 0;border-style: solid;border-width: 0 40px 30px 0;border-color: transparent #d71920 transparent transparent;}
.card-item .card-item-head{position:static !important;}

/*card cetak*/
.card-single{overflow:hidden; position:relative; background:#fff;border:1px solid #eee; border-radius:4px; box-shadow:1px 1px 11px rgba(0,0,0,0.1);}
.card-single .left-single{width:40%; float:left; min-height:400px; overflow:hidden;padding:15px;}
.card-single .right-single{width:60%; padding:15px 30px; float:left;min-height:400px; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.btn-big, a.btn-big{padding:15px 40px; height:50px;text-align:center; margin:0; font-size:18px;display:block; line-height:20px;background:#7fafde; color:#fff; font-weight:700; border-radius:4px; border:none;}
.btn-big:hover, a.btn-big:hover{opacity:0.8;}
.btn-trans, a.btn-trans{padding:15px 40px; height:50px;text-align:center; margin:0; font-size:18px;display:block; line-height:20px;background:rgba(255,255,255,0.5); color:#fff; font-weight:700; border-radius:25px; border:none;}
.btn-trans:hover, a.btn-trans:hover{opacity:0.8;}
a.btn-trans.line{background:rgba(255,255,255,0.1); border:1px solid #fff;}
/*card newsletter*/
.card-newsletter{overflow:hidden; position:relative; background:#fff; padding:15px;border:1px solid #eee; border-radius:4px; box-shadow:1px 1px 11px rgba(0,0,0,0.1);}
.box-newsletter {position:relative;}
.box-newsletter .newsletter-icon{position:absolute; width:40px; height:50px; top:0; left:0; z-index:2;color:#ccc;}
.box-newsletter .newsletter-in{position:relative; border:1px solid #ddd; background:#fff; border-radius:4px; padding:10px 10px 10px 40px; width:100%; height:50px;box-shadow: inset 1px 1px 8px rgba(0,0,0,0.1);}
.box-newsletter a.btn-newsletter{padding:15px 50px; height:50px;text-align:center; margin:0; font-size:18px;display:block; line-height:20px;background:#7fafde; color:#fff; font-weight:700; border-radius:0 4px 4px 0; position:absolute; top:0; right:0; z-index:2;}
.box-newsletter a.btn-newsletter:hover{opacity:0.8;}
/*table box*/
.table-item {margin:0px;padding:0px;width:100%;border:0px; }
.table-item .t-left{text-align:left;}
.table-item .t-right{text-align:right;}
.table-item table{width:100%;height:100%;margin:0px;padding:0px;}
.table-item tr:nth-child(odd){ background-color: rgba(255,255,255,0.1); }
.table-item tr:nth-child(even){ background-color: rgba(255,255,255,0.1); }
.table-item td{vertical-align:baseline;border-width:0px;text-align:center;padding:10px;color:#fff;font-weight:400; line-height:20px; font-size:16px; border-top:1px solid #444;}
.table-item td:last-child{border-bottom:1px solid #444;}
.table-item tr td:last-child{padding-right:16px;}
.table-item tr td:first-child{padding-left:16px;}
/*card*/
.card-news{position:relative; overflow:hidden; margin-bottom:30px;}
.card-news .cover-news{width:32%; float:left; padding:0;}
.card-news .cover-news img{width:100%; height:auto; display:block;}
.card-news .text-news{width:68%; float:left;padding-left:30px; min-height:187.3px; position:relative;display: flex;justify-content: center;flex-direction: column;}
.text-news:before{content:''; height:2px; background:#ddd;position:absolute; bottom:0; width:100%; left:30px; z-index:2;}
.card-news .text-news h2.title{font-size:24px; line-height:28px; margin:0 0 5px 0;font-family:'Myriad Pro Bold', Arial; text-transform:none !important;}
.card-news .text-news h5.canal{font-size:12px; line-height:20px; font-weight:600; text-transform:uppercase; margin:0 0 5px 0; display:inline-table; letter-spacing:2px;}
.card-news .text-news h5.date{font-size:12px; line-height:20px; font-weight:600; text-transform:uppercase; margin:0;}
.card-news .text-news h5 a:hover{opacity:0.5;}
.card-news .text-news p{margin:10px 0 15px 0;}
/*list harga*/
ul.list-price{margin:0; padding:5px 0; list-style:none; list-style-position:inside; width:100%;}
ul.list-price li{ padding:15px; width:100%; overflow:hidden; font-size:18px; line-height:22px; font-weight:700; background:#fff; border:1px solid #eee; border-radius:4px; margin-bottom: 15px;box-shadow: 1px 1px 11px rgba(0,0,0,0.1);}
/*radiopay*/
.radiopay {position:relative; display:block;cursor:pointer;}
.radiopay input[type="radio"]{opacity:1;height:26px; width:26px; position:relative; top:-3px; cursor:pointer !important;-webkit-appearance:none;-moz-appearance: none;appearance: none; border-radius:11px;  margin:0 auto; display:inline-block;}
.radiopay input[type="radio"]:before{font-family:'FontAwesome'; content:'\f058'; font-size:26px; line-height:26px; color:#ddd; position:relative;top:3px; left:4px;}
.radiopay input:checked{opacity:1;height:26px; width:26px; position:relative; top:-3px; cursor:pointer !important;-webkit-appearance:none;-moz-appearance: none;appearance: none; border-radius:11px;  margin:0 auto; display:inline-block;}
.radiopay input:checked:before{font-family:'FontAwesome'; content:'\f058'; font-size:26px; line-height:26px; color:#44a323; position:relative; top:3px; z-index:2; left:4px;}
.radiopay input:disabled{opacity:1; background:transparent !important; border:none; cursor:crosshair;}
.radiopay input:disabled:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00d'; color:#c00; font-size:18px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;margin:0 auto; cursor:no-drop !important;}
/*checkbox*/
.check-color {height:24px; width:24px;background:transparent; position:relative; top:-5px;cursor:pointer !important; }
.check-color label{font-size:16px; line-height:19px;}
.check-color input[type="checkbox"]{opacity:1;height:24px; width:24px; position:relative; cursor:pointer !important; background:transparent;margin:0 auto; display:inline-block; top:6px; border:none;-webkit-appearance:none;-moz-appearance: none;appearance:}
.check-color input[type="checkbox"]:before{font-family:'FontAwesome'; position:absolute; width:24px; height:24px;background:transparent; content:'\f00c'; color:#ddd; background:#fff; font-size:16px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2; z-index:2;}
.check-color input:checked{opacity:1; background:transparent; border:none;-webkit-appearance:none;-moz-appearance: none;appearance: none;margin:0 auto; display:inline-block; border:none;}
.check-color input:checked:before{font-family:'FontAwesome'; position:absolute; width:24px; height:24px;background:transparent; content:'\f00c'; color:#44a323; background:#fff; font-size:16px; font-weight:normal; display:flex; align-items:center; justify-content:center; border:none; z-index:2;}
/*checkbox*/
.inter-check {height:110px; width:100%; background:transparent; position:absolute; cursor:pointer !important; z-index:3; overflow:hidden; border-radius:0;}
.inter-check label{font-size:16px; line-height:19px;}
.inter-check input[type="checkbox"]{opacity:1; height:110px; width:100%; position:relative; cursor:pointer !important; background:rgba(0,0,0,0.1);margin:0 auto; border:none;-webkit-appearance:none;-moz-appearance: none; border-radius:4px 4px 0 4px; overflow:hidden;}
.inter-check input[type="checkbox"]:before{font-family:'FontAwesome'; position:absolute; width:24px; height:24px;background:transparent; content:'\f00c'; color:#ddd; background:#fff; font-size:16px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2; bottom:0; right:0; border-radius:4px 0 0 0; display:none;}
.inter-check input:checked{opacity:1; background:transparent; border:none;-webkit-appearance:none;-moz-appearance: none;appearance: none;margin:0 auto; display:inline-block; border:none;background:rgba(215,25,32,0.5);}
.inter-check input:checked:before{font-family:'FontAwesome'; position:absolute; width:24px; height:24px;background:transparent; content:'\f00c'; color:#44a323; background:#fff; font-size:16px; font-weight:normal; display:flex; align-items:center; justify-content:center; border:none; z-index:2;border-radius:4px 0 0 0;bottom:0; right:0; display:none;}
/*list interest*/
ul.interest{list-style:none; list-style-position:inside; margin:0; padding:0; overflow:hidden;}
ul.interest li{width:23%; margin:1%; float:left; position:relative;}
ul.interest li .box-interest{width:100%; height:110px; border-radius:4px ; overflow:hidden; position:relative; margin:0 auto; text-align:center; background:#000;}
ul.interest li .box-interest p.title{position:absolute; top:auto; left:auto; right:auto; bottom:auto; text-align:center; color:#fff; width:100%; text-shadow:1px 1px 1px rgba(0,0,0,0.8);z-index:2;}
ul.interest li .box-interest img{height:auto; width:100%; display:block; opacity:0.5;}
/*pay list*/
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{width:33.333333%; padding:5px 5px 20px 5px;text-align:center; font-size:11px; height:auto; overflow:hidden; cursor:pointer; position:relative; float:left;}
ul.pay-list li img{height:40px;}
ul.pay-list li:nth-child(3n+1){clear:both;}
.radiocard {position:relative; display:block;cursor:pointer;}
.radiocard input[type="radio"]{opacity:1;height:40px; width:38px; cursor:pointer !important;-webkit-appearance:none;-moz-appearance: none;appearance: none; margin:0 auto; background:#ddd; float:left; display:flex; align-items:center; justify-content:center;}
.radiocard input[type="radio"]:before{font-family:'FontAwesome'; content:'\f00c'; font-size:18px; line-height:20px; color:#ccc;}
.radiocard input:checked{opacity:1;height:40px; width:38px; cursor:pointer !important;-webkit-appearance:none;-moz-appearance: none;appearance: none; margin:0 auto; background:#444; float:left; display:flex; align-items:center; justify-content:center;}
.radiocard input:checked:before{font-family:'FontAwesome'; content:'\f00c'; font-size:18px; line-height:20px; color:#fff;z-index:2;}
.radiocard input:disabled{opacity:1;height:40px; width:38px; cursor:pointer !important;-webkit-appearance:none;-moz-appearance: none;appearance: none; margin:0 auto; background:#f00; float:left; display:flex; align-items:center; justify-content:center;}
.radiocard input:disabled:before{font-family:'FontAwesome'; content:'\f00d'; font-size:18px; line-height:20px; color:#fff;z-index:2; cursor:no-drop !important;}
/*register*/
.box-register{position:relative; overflow:hidden;}
.box-register .left-register{width:50%; padding:15px; padding-right:50px; float:left; height:400px; display:flex; align-items:center; justify-content:center; position:relative;}
.box-register .left-register:before{content:'';position:absolute; right:0; top:0; bottom:0; height:100%; width:1px; background:#ddd; z-index:2;}
.box-register .left-register:after{content:'atau';position:absolute; right:-25px; top:auto; bottom:auto; height:50px; width:50px; border-radius:25px; background:#ddd; z-index:2; text-align:center; color:#262523; line-height:50px; font-size:14px;}
.box-register .right-register{width:50%; padding:15px; float:left; height:400px; display:flex; align-items:center; justify-content:center; padding-left:50px;}
input::placeholder {color:#aaa;}
.box-register .left-register.login,.box-register .right-register.login{ height:100vh; padding:15px;}
.box-register .left-register.login:before, .box-register .left-register.login:after{display:none;}
.box-register .left-register.data,.box-register .right-register.data{ height:auto;}
.box-register .left-register.data:before, .box-register .left-register.data:after{display:none;}
.w270{width:290px !important;}
.w100{width:100% !important;}
.box-info{position:relative; width:100%; overflow:hidden; display:block;}
.box-info .info-in {position: relative;border: 1px solid #ddd;background: #fff;border-radius: 4px;padding: 10px 10px 10px 40px;width: 100%;min-height:50px; line-height:28px;}
.box-info .info-icon {position: absolute;width: 40px;height: 50px;top: 0;left: 0;z-index: 2;color:#ccc;}
.box-register .left-register.data{width:50%; padding-right:10%;}
.box-register .right-register.data{padding-left:10%;}
/*footer*/
.footer-in{background:#101010; padding:30px 15px; min-height:200px;  width:100%;}
.footer-in .foot-logo{margin:0 auto 10px auto; text-align:center; overflow:hidden;}
.footer-in .foot-logo img{width:auto; height:30px; display:block;}
ul.foot-link{padding:10px 0; margin:0 auto; list-style:none; list-style-position:inside; text-align:center;}
ul.foot-link li{margin:0 5px; text-align:center; display:inline-block; font-size:11px;}
ul.foot-link li a{color:#fff;} ul.foot-link li a:hover{color:#aaa; text-decoration:underline;}
ul.sosmed{padding:10px 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; border:2px solid #fff; color:#fff; border-radius:20px; text-align:center; line-height:34px; font-size:16px; display:inline-block;}
ul.sosmed li a:hover{color:#aaa; border-color:#aaa; font-size:14px; line-height:36px;}
p.copy{font-size:12px; margin-top:30px;}
/*checkout*/
.out-checkout{ margin: 45px auto; padding:0 15px; min-height:300px;}
.header-checkout{background:#fff;  height:70px; border-radius:4px 4px 0 0;border:1px solid #ddd; position:relative; overflow:hidden;}
.header-checkout .left-head{height:70px; color:#fff; width:35%; padding:15px; display:flex; align-items:center; justify-content:flex-start; float:left;}
.header-checkout .right-head{height:70px; color:#444; width:65%; padding:15px; font-size:14px; font-weight:600; text-align:right; line-height:40px;float:left;}
.header-checkout p.date{font-size:12px; text-transform:uppercase; line-height:14px;}
.header-checkout p.orderid{font-size:20px; text-transform:uppercase; line-height:24px; font-weight:700;}
.header-checkout p.title{font-size:18px; line-height:26px; font-weight:700;}
.box-checkout p.total{font-size:30px; line-height:34px; font-weight:700;}
.box-checkout{border:1px solid #ddd; border-radius:0 0 4px 4px; overflow:hidden; height:100%; border-top:none; position:relative;}
.box-checkout .left-box-checkout{width:35%; padding:30px 15px;background:#f9f9f9; float:left;position:relative; bottom:0; top:0;border-right:1px solid #ddd; min-height:600px;}
.box-checkout .right-box-checkout{padding:30px 15px; overflow:hidden; float:left; width:65%;  min-height:600px;}
/*checkout*/
.out-profil{ margin: 45px auto; padding:0 15px; min-height:300px;}
.header-checkout .right-head{height:70px; color:#444; width:65%; padding:15px; font-size:14px; font-weight:600; text-align:right; line-height:40px;float:left;}
.header-checkout p.date{font-size:12px; text-transform:uppercase; line-height:14px;}
.header-checkout p.orderid{font-size:20px; text-transform:uppercase; line-height:24px; font-weight:700;}
.header-checkout p.title{font-size:18px; line-height:26px; font-weight:700;}
/*box profil*/
.box-profil p.total{font-size:30px; line-height:34px; font-weight:700;}
.box-profil{border:1px solid #ddd; border-radius:4px; overflow:hidden; height:100%; position:relative;}
.box-profil:before{content:''; position:absolute; left:35%; top:0; bottom:0; height:100%; width:1px; background:#ddd; z-index:2;}
.box-profil .left-profil{width:35%; padding:0;background:#fff; float:left;position:relative; bottom:0; top:0; min-height:600px;}
.box-profil .right-profil{padding:0; overflow:hidden; float:left; width:65%;  min-height:600px;}
.box-foto-profil{display:block; padding:15px; overflow:hidden; background:#fff; border-bottom:3px solid #d71920;}
.box-foto-profil .box-username{overflow:hidden; margin:0 auto; text-align:center;}
.box-foto-profil .box-username p.emailname, p.emailname{white-space: nowrap;text-overflow: ellipsis;overflow: hidden; color:#444; margin-top:15px;-webkit-line-clamp:1;-webkit-box-orient: vertical;}
.box-foto-profil .box-username p.link{white-space: nowrap;text-overflow: ellipsis;overflow: hidden; color:#444; margin-top:5px;-webkit-line-clamp:1;-webkit-box-orient: vertical; font-size:11px;}
.box-foto-profil .main-profil{position:relative; width:120px; height:120px; margin:0 auto;}
.box-foto-profil .main-profil .foto-up {width:36px; height:36px; position:absolute; bottom:0px; right:-8px; z-index:2;cursor:pointer !important}
.box-foto-profil .main-profil .foto-up input[type="file"]{opacity:0; height:36px !important; width:36px!important;-webkit-appearance:none;-moz-appearance: none;appearance: none; margin:0; position:relative; background:transparent; overflow:hidden;}
.main-profil .foto-up:before{opacity:1;font-family:'FontAwesome'; content:'\f030'; font-size:16px; color:#fff; position:absolute;background:#0C3;display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:24px;cursor:pointer !important; padding:0; margin:0;}
.foto-profil{width:120px; height:120px; border-radius:60px; background:#f9f9f9; overflow:hidden; border:3px solid #ddd;}
.foto-profil img{height:120px; width:auto; margin:auto; display:block;}
/*bookmark*/
.box-title-bookmarik{    display: block;    padding: 15px;    overflow: hidden;    background: #fff;    border-bottom: 3px solid #444; font-size:18px; line-height:22px; font-weight:700;}
ul.bookmark-list{list-style:none; list-style-position:inside; padding:0; margin:0;}
ul.bookmark-list li{padding:15px; border-bottom:1px solid #ddd; overflow:hidden; margin:0 auto;}
ul.bookmark-list li .cover-book{width:80px; height:80px; overflow:hidden; display:flex; align-items:center; justify-content:center; float:left;}
ul.bookmark-list li .cover-book img{width:auto; height:80px; margin:0; display:block;}
ul.bookmark-list li .box-title{min-height:80px; padding:0px 45px 0 15px; display:flex; align-items:flex-start; justify-content:center; position:relative; flex-direction:column;}
ul.bookmark-list li .box-title .box-del{height:80px; width:30px; position:absolute; z-index:2; right:0; top:0;}
ul.bookmark-list li .box-title .box-del a{width:30px; height:30px; background:#eee; text-align:center; color:#aaa; border-radius:15px; font-weight:normal; font-size:16px;}
ul.bookmark-list li .box-title .box-del a:hover{background:#d71920;color:#fff;}
ul.bookmark-list li .box-title h3.title{font-size:16px; line-height:18px; margin:5px 0 0 0; font-weight:600;}
ul.bookmark-list li .box-title h4.source{font-size:12px; line-height:14px; font-weight:400; color:#999;}
/*loading*/
.spinner {  margin:30px auto;width:140px;text-align: center;}
.spinner &gt; div {  width: 12px;  height: 12px;  background-color: #444;  border-radius: 100%;  display: inline-block;  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;  animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 {  -webkit-animation-delay: -0.32s;  animation-delay: -0.32s;}
.spinner .bounce2 {  -webkit-animation-delay: -0.16s;  animation-delay: -0.16s;}
ul.accordion {list-style: none;padding: 0; margin:0;}  
.inner {padding:15px 25px;overflow: hidden;display: none; border-top:1px solid #ddd;}
.inner .show {/*display: block;*/}
ul.accordion li {margin:0;border-bottom:1px solid #ddd;position:relative;}
ul.accordion li a.toggle {width: 100%;display: block;background:#f9f9f9;color:#444;padding:15px;transition: background .3s ease; height:50px;}
ul.accordion li a.toggle:hover {background:#eee; color:#bbb;}
ul.accordion li a.icon-edit {position:absolute; top:10px; right:15px; width:30px; height:30px; z-index:2; background:#eee; display:flex; align-items:center; justify-content:center; color:#aaa; border-radius:15px; cursor:pointer;}
ul.accordion li a.icon-edit:hover{background:#d71920; color:#fff;}
ul.accordion.pay{background:#fff; border-radius:4px; border:none; box-shadow: 1px 1px 11px rgba(0,0,0,0.1); overflow:hidden;}
ul.accordion.pay li a.toggle {background:#fff; padding:0; height:50px; width:100%; clear:both;}
ul.accordion.pay li .inner {padding:15px;overflow: hidden;display: none; background:#f6f7f8;}
ul.accordion.pay li .icon-bank{width:50px; height:20px; z-index:2;float:left; margin:15px 0 15px 15px;}
ul.accordion.pay li a.toggle h5{margin:10px 0 10px 10px; height:30px; float:left; font-size:16px; line-height:30px;}
/*upload foto*/
.profile-pic {
    max-width :100%;
    max-height:180px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.file-upload {
    display: none;
}
.circle {
    border-radius: 1000px !important;
    overflow: hidden;
    width:180px;
    height:180px;
    border: 8px solid #aaa;
    position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
.profile-pic img {
    max-width :100%;
    max-height:180px;
	display:block;
}
.p-image {
  position: absolute;
  top: 167px;
  right: 30px;
  color: #666666;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-image:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.upload-button {}
@-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);
  }
}

.infobox{overflow:hidden; border-radius:4px; border:1px solid #eee; background:#fff; width:100%; min-height:100px;box-shadow:1px 1px 11px rgba(0,0,0,0.1); margin:34px 0 30px 0;}
.infobox .headbox{position:relative; padding:15px 40px; border-bottom:1px solid #eee; font-size:16px; line-height:20px; font-weight:600;}
.infobox .headbox .headicon{position:absolute; left:15px; top:15px;}
.infobox .headbox.subhead{border-top:1px solid #eee;}
.infobox .infobox-in{padding:15px;}
.thanksbox{padding:30px; overflow:hidden; max-width:500px;}
.gift{margin:0 auto 30px auto; width:160px;border:6px solid #F17A7A; height:160px; border-radius:80px; overflow:hidden; background:#fff;}
h1.thanks{font-weight:100; font-size:50px; line-height:54px; color:#fff; text-align:center;}

/*update cover*/
.cover-up{position:relative; width:100%; height:400px;}
.cover-up .cover-majalah{position:absolute; right:50px; top:100px; width:45%; z-index:3;}
.cover-up .cover-koran{position:absolute; left:50px; top:70px; width:45%; z-index:2;}
.cover-up .cover-tebi{position:absolute;width:45%; z-index:1; left:0; right:0; top:10px; margin:0 auto;}
.cover-up img{width:100%; height:auto; display:block;}
/*cover digital koran*/
.cover-dig{height:150px; width:auto; margin:0 auto; position:relative;}
.cover-dig .frame{position:absolute; height:150px; width:auto; z-index:2; left:0; right:0;}
.cover-dig .korans{position:absolute; height:150px; margin:auto; left:0; right:0; top:14px;}
.cover-dig .korans img{height:125px; width:auto; display:block;}
/*cover digital koran majalah*/
.cover-dig2{height:150px; width:210px; margin:0 auto; position:relative;}
.cover-dig2 .frame{position:absolute; height:150px; width:auto; z-index:2; left:0; right:0;}
.cover-dig2 .maja{position:absolute; height:150px; margin:auto; left:12px; top:14px;}
.cover-dig2 .maja img{height:125px; width:auto; display:block;}
.cover-dig2 .korans{position:absolute; height:100px; margin:auto; right:12px; top:46px; z-index:1; overflow:hidden;}
.cover-dig2 .korans img{height:auto; width:130px; display:block;}
/*cover digital koran majalah tebi*/
.cover-dig3{height:150px; width:260px; margin:0 auto; position:relative;}
.cover-dig3 .frame{position:absolute; height:150px; width:auto; z-index:2; left:0; right:0;}
.cover-dig3 .korans{position:absolute; height:150px; margin:auto; left:63px; top:14px;}
.cover-dig3 .korans img{height:125px; width:auto; display:block;}
.cover-dig3 .maja{position:absolute; height:100px; margin:auto; right:12px; top:46px; z-index:1; overflow:hidden;}
.cover-dig3 .maja img{height:auto; width:130px; display:block;}
.cover-dig3 .tebi{position:absolute; height:100px; margin:auto; left:2px; top:52px; z-index:1; overflow:hidden;}
.cover-dig3 .tebi img{height:auto; width:60px; display:block;}

/* Specific to example one */
#bank-lain {margin: 0 0 20px 0;font-size:14px;}

#bank-lain .nav { overflow: hidden; margin:0; list-style:none; list-style-position:inside; padding:0; height:50px; width:100%; display:block; background:#ddd; border:1px solid #ddd; border-bottom:none; }
#bank-lain .nav li { width:33.333333%; margin: 0 auto; float:left;border:none; padding:0;}
#bank-lain .nav li a { display: block; padding:10px 5px; background:transparent; color:#999; text-align: center; border: 0;  height:50px; font-weight:bold; line-height:30px;}
#bank-lain .nav li a:hover { background-color: #ccc; }
#bank-lain ul li a.current { background-color: #fff; color: #444; }

#bank-lain ul { list-style: none; list-style-position:inside; padding:0;}
#bank-lain ul li { display: block;  padding:0; border-bottom:1px solid #ddd; overflow:hidden;}
#bank-lain ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
#bank-lain ul li .kiri{padding:10px; width:28%; float:left; text-align:center;}
#bank-lain ul li .kanan{padding:10px 10px 10px 0; width:65%; float:left;}
#bank-lain ul li a:hover { background: #fff; color: #444; }
#bank-lain ul li:last-child { border-bottom: none; }
.wrap-in{background:#fff; border:1px solid #ddd; border-top:none; padding:0; overflow:hidden;}

/* Specific to example one */
#bank-bni {margin: 0 0 20px 0;font-size:14px;}

#bank-bni .nav { overflow: hidden; margin:0; list-style:none; list-style-position:inside; padding:0; height:50px; width:100%; display:block; background:#ddd; border:1px solid #ddd; border-bottom:none; }
#bank-bni .nav li { width:33.333333%; margin: 0 auto; float:left;border:none; padding:0;}
#bank-bni .nav li a { display: block; padding:10px 5px; background:transparent; color:#999; text-align: center; border: 0;  height:50px; font-weight:bold; line-height:30px;}
#bank-bni .nav li a:hover { background-color: #ccc; }
#bank-bni ul li a.current { background-color: #fff; color: #444; }
#bank-bni ul { list-style: none; list-style-position:inside; padding:0;}
#bank-bni ul li { display: block;  padding:0; border-bottom:1px solid #ddd; overflow:hidden;}
#bank-bni ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
#bank-bni ul li .kiri{padding:10px; width:28%; float:left; text-align:center;}
#bank-bni ul li .kanan{padding:10px 10px 10px 0; width:65%; float:left;}
#bank-bni ul li .kirikanan{padding:10px; width:93%; float:left;}
#bank-bni ul li a:hover { background: #fff; color: #444; }
#bank-bni ul li:last-child { border-bottom: none;}

/* Specific to example one */
#bank-bri {margin: 0 0 20px 0;font-size:14px;}

#bank-bri .nav { overflow: hidden; margin:0; list-style:none; list-style-position:inside; padding:0; height:50px; width:100%; display:block; background:#ddd; border:1px solid #ddd; border-bottom:none; }
#bank-bri .nav li { width:33.333333%; margin: 0 auto; float:left;border:none; padding:0;}
#bank-bri .nav li a { display: block; padding:10px 5px; background:transparent; color:#999; text-align: center; border: 0;  height:50px; font-weight:bold; line-height:30px;}
#bank-bri .nav li a:hover { background-color: #ccc; }
#bank-bri ul li a.current { background-color: #fff; color: #444; }
#bank-bri ul { list-style: none; list-style-position:inside; padding:0;}
#bank-bri ul li { display: block;  padding:0; border-bottom:1px solid #ddd; overflow:hidden;}
#bank-bri ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
#bank-bri ul li .kiri{padding:10px; width:28%; float:left; text-align:center;}
#bank-bri ul li .kanan{padding:10px 10px 10px 0; width:65%; float:left;}
#bank-bri ul li .kirikanan{padding:10px; width:93%; float:left;}
#bank-bri ul li a:hover { background: #fff; color: #444; }
#bank-bri ul li:last-child { border-bottom: none;}

/* Specific to example one */
#bank-bca {margin: 0 0 20px 0;font-size:14px;}

#bank-bca .nav { overflow: hidden; margin:0; list-style:none; list-style-position:inside; padding:0; height:50px; width:100%; display:block; background:#ddd; border:1px solid #ddd; border-bottom:none; }
#bank-bca .nav li { width:33.333333%; margin: 0 auto; float:left;border:none; padding:0;}
#bank-bca .nav li a { display: block; padding:10px 5px; background:transparent; color:#999; text-align: center; border: 0;  height:50px; font-weight:bold; line-height:30px;}
#bank-bca .nav li a:hover { background-color: #ccc; }
#bank-bca ul li a.current { background-color: #fff; color: #444; }
#bank-bca ul { list-style: none; list-style-position:inside; padding:0;}
#bank-bca ul li { display: block;  padding:0; border-bottom:1px solid #ddd; overflow:hidden;}
#bank-bca ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
#bank-bca ul li .kiri{padding:10px; width:28%; float:left; text-align:center;}
#bank-bca ul li .kanan{padding:10px 10px 10px 0; width:65%; float:left;}
#bank-bca ul li .kirikanan{padding:10px; width:93%; float:left;}
#bank-bca ul li a:hover { background: #fff; color: #444; }
#bank-bca ul li:last-child { border-bottom: none;}

/* Specific to example one */
ul.gopay-list{margin: 0 0 20px 0;font-size:14px; padding:0; list-style:none; list-style-position:inherit;}
ul.gopay-list li { width:100%; margin: 0 auto; border:none; padding:0;}
ul.gopay-list li { display: block;  padding:0; border-bottom:1px solid #ddd; overflow:hidden;}
ul.gopay-list li .no{padding:10px 0 10px 10px; width:7%; float:left;}
ul.gopay-list li .kiri{padding:10px; width:28%; float:left; text-align:center;}
ul.gopay-list li .kanan{padding:10px 10px 10px 0; width:65%; float:left;}
ul.gopay-list li .kirikanan{padding:10px; width:93%; float:left;}
ul.gopay-list li a:hover { background: #fff; color: #444; }
ul.gopay-list li:last-child { border-bottom: none;}
img.screen{width:100%; display:block; padding:10px; margin:0 auto;}
.qrcode-box{padding:15px; overflow:hidden; margin:0 auto;}

/* Specific to example one */
#atm-mandiri {margin: 0 0 20px 0;font-size:14px;}

#atm-mandiri .nav { overflow: hidden; margin:0; list-style:none; list-style-position:inside; padding:0; height:50px; width:100%; display:block; background:#ddd; border:1px solid #ddd; border-bottom:none; }
#atm-mandiri .nav li { width:33.333333%; margin: 0 auto; float:left;border:none; padding:0;}
#atm-mandiri .nav li a { display: block; padding:10px 5px; background:transparent; color:#999; text-align: center; border: 0;  height:50px; font-weight:bold; line-height:30px;}
#atm-mandiri .nav li a:hover { background-color: #ccc; }
#atm-mandiri ul li a.current { background-color: #fff; color: #444; }
#atm-mandiri ul { list-style: none; list-style-position:inside; padding:0;}
#atm-mandiri ul li { display: block;  padding:0; border-bottom:1px solid #ddd; overflow:hidden;}
#atm-mandiri ul li .no{padding:10px 0 10px 10px; width:7%; float:left;}
#atm-mandiri ul li .kiri{padding:10px; width:28%; float:left; text-align:center;}
#atm-mandiri ul li .kanan{padding:10px 10px 10px 0; width:65%; float:left;}
#atm-mandiri ul li .kirikanan{padding:10px; width:93%; float:left;}
#atm-mandiri ul li a:hover { background: #fff; color: #444; }
#atm-mandiri ul li:last-child { border-bottom: none;}

/*tab*/
ul.tab_list,
ul.tab_list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
 .tab_wrapper {
  margin: 10px 0 50px;
  display: inline-block;
  width: 100%;
  position: relative;
}
.tab_wrapper * {
  box-sizing: border-box;
}
.tab_wrapper &gt; ul {
  clear: both;
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.tab_wrapper &gt; ul li {
  float: left;
  cursor: pointer;
  font-weight: bold;
  padding:10px 20px;
  text-transform: uppercase;
  border: 1px solid #ccc;
  font-size: 1.05em;
  border-bottom: 0;
  position: relative;
  border-top: 3px solid #ccc;
  color: #ccc;
  margin: 0 2px 0 0;
  border-radius:4px 4px 0 0;
}
.tab_wrapper &gt; ul li.active {
  border-color: #ccc;
  color: #d71920;
  border-top-color: #d71920;
}
.tab_wrapper &gt; ul li.active:after {
  content: "";
  position: absolute;
  bottom: -1px;
  height: 1px;
  left: 0;
  background: #f9f9f9;
  width: 100%;
}
.tab_wrapper .controller {
  display: block;
  overflow: hidden;
  clear: both;
  position: absolute;
  top: 0;
  right: 0;
}
.tab_wrapper .controller span {
  padding: 8px 22px;
  background: #ccc;
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
}
.tab_wrapper .controller span.next {
  float: right;
  margin-left: 10px;
}
.tab_wrapper .content_wrapper {
  float: left;
  width: 100%;
  border: 1px solid #ccc;
  border-top: 0;
  box-sizing: border-box;
	position: relative;
    top: -5px;
	border-radius:0 0 4px 4px;
}
.tab_wrapper .content_wrapper .tab_content {
  display: none;
  padding: 15px;
  
}
.tab_wrapper .content_wrapper .tab_content.active {
  /* display: block; */
}
.tab_wrapper .content_wrapper .tab_content .error {
  color: red;
}
.tab_wrapper .content_wrapper .accordian_header {
  display: none;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: bold;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  position: relative;
  cursor: pointer;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
 .tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px 5px 5px;
  position: absolute;
  z-index: 99;
  top: 150%;
  left: 20%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltipreg {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
 .tooltipreg .tooltiptextreg {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px 5px 5px;
  position: absolute;
  z-index: 99;
  top: 150%;
  left: 20%;
  margin-left: -160px;
}

.tooltipreg .tooltiptextreg::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipreg:hover .tooltiptextreg {
  visibility: visible;
}</pre></body></html>