/*===============================================================================================================	
CSS Decorated By    : Web Architect (webarq.com)
Author              : DebfryAp              
================================================================================================================= */
 @media screen and (max-width:1024px) {
/* Tablet styles */
.quick_link {display: none;}
header .logo img {width: 100px;}
header .wrapper {
	width: auto;
	margin: 0 25px;
}
.wrapper {width: 710px; margin: 0 auto;}
header nav {
	display: none;
}
.wrapper.network aside {display: block;}
.wrapper.network .main-content {margin-left: 300px;} 
.camera_wrap .camera_pag .camera_pag_ul {left: 20px;}
.main-content h1 {font-size: 36px;}
.main-content .headContent {padding: 14px 22px; margin-bottom: 40px;}
.main-content .headContent h1 {font-size: 24px;}
body.red .main-content h2, body.orange .main-content h2, body.green .main-content h2 {font-size: 24px; line-height: 28px;}
body.red .main-content article h5, body.orange .main-content article h5, body.green .main-content article h5 {font-size: 16px;}
.main-content h2 {font-size: 30px; line-height: 34px; margin: 10px 0 40px;}
.main-content .topnav {display: none;}

.main-content p > img {margin: 0 0 15px;}
.main-content article {padding-left: 0;}
.main-content article .label {display: none;}
.main-content article ul.nilai {padding: 0 0 0 16px; font-size: 18px;}
.main-content article p.visi {font-size: 21px !important;}
.main-content article p.visi span {font-size: 24px !important; display: inline-block; margin-bottom: 10px;}

.main-content article .list_bod .items {padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid #eaeaea;}
.main-content article .list_bod .items:last-child {padding-bottom: 0; border: none;}

.main-content .thumb-content .items {width: 47%;}
.main-content .thumb-content .items .image {min-height: 160px;}

.main-content .list-news .items {width: 340px;}
.main-content .list-news .items .image img {width: 100%;}
.main-content .list-news .items:nth-child(2n) {margin-right: 0 !important;}
.main-content .list-news .items:nth-child(3n+3) {margin-right: 30px;}

.askjoni form .selector_form {width: 170px !important;}
.askjoni form .selector_form select {width: 170px;}
.askjoni .number {margin: 0 18px;}
.askjoni .number a {font-size: 16px; margin-top: 4px;}
#nav_mobile {
	display: block;
	margin-top: -4px;
}
#tracking form.trace {
	float: none;
	width: auto;
	padding: 34px 0;
}
#tracking:before {
	height: 128px;
	bottom: inherit;
	width: 100%;
}
#tracking .trace h3 {display: inline-block; vertical-align:top; margin: 5px 20px 0 0;}
#tracking .trace .row {display: inline-block; vertical-align: bottom;}
#tracking form.trace input, #tracking form.trace textarea {width: 330px; max-width: 576px;}
#tracking form.check input[type=text] {width: 118px;}
#tracking form.check label {margin-right: 0;}
#tracking form.network .row .btn {padding: 12px 18px;}

#promo {padding: 50px 0 10px 0 !important;}
.list-promo {
	margin: 0 -15px;
}
.list-promo .items {
	padding: 0 15px;
	width: 33.33%;
	box-sizing: border-box;
	margin-right: 0px;
}
.list-promo.promotion .items {width: 50%;}
#tracking form.check {
	box-sizing: border-box;
	width: 65%;
	padding: 30px 0;
}
#tracking form.network {
	box-sizing: border-box;
	width: 35%;
	padding: 30px 0 30px 20px;
}
#tracking form {
	max-height: none;
}
#widget .wrapper {
	max-width: 720px;
	margin: 0 auto;
}
#widget .cols {
	width: 50%;
	margin-right: 0px;
	padding: 0 15px;
	box-sizing: border-box;
}
.formCustomer .field textarea {width: 684px;}

.main-content article.label_contact .label {display: block; width: 41px; padding: 12px 10px;}
.main-content article.label_contact .list-address {padding-left: 80px;}
.number .box-icon {padding: 12px 19px; background: #31b184;}
.number .social .box-icon {padding: 12px 14px; background: #999999;}
.number .customer, .number .social {width: 38%; padding-left: 80px;}


#timeline .bx-wrapper {float: none; margin: 0 auto 60px;}
#timeline .content {margin-left: 0; min-height: auto;}
#timeline .slider8 {height: 70px;}
#timeline .slider8 .slide {width: 48px !important;}
#timeline .bx-wrapper .bx-controls-direction a.bx-next {top: 24px; left: 476px; background-position: right;}
#timeline .bx-wrapper .bx-controls-direction a.bx-prev {top: 24px; left: -30px; background-position: left;}
#timeline .bx-wrapper .bx-controls-direction a {
    top: inherit;
    background-image: url(../images/material/nav-bx_2.png);
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
    left: 20px;
    margin-top: 0px;
}
#timeline .content h2 {font-size: 24px;}
#timeline .content h3 {font-size: 21px; margin: 6px 0 30px;}

.form_career .row .form input[type=text] {width: 335px;}
.btn.red.down, .btn.red.ups {margin: 0 3px 40px;}

.formCustomer .field.tmbh > div {width: 300px;}
.main-content.chat .contact_form textarea {width: 50%;}


footer .top {padding: 0;}
body.home footer .top .right {padding: 0;}
footer .top .right nav {
	display: none;
}
footer .top .right p.sos_mobile {display: block; text-align: right; padding: 21px 0; margin-bottom: 0;}
aside{ display:none; }
.main-content{ margin-left:0px; }

footer .top .left .logo {display: none;}
footer .top .wrapper {padding: 20px 0;}
footer .top .wrapper .right {width: 50%;}
footer .top .wrapper .left {display: none;}
footer .top .wrapper .left.mobile {width: 50%; display: block;}
footer .top .wrapper .left.mobile p {margin-bottom: 0;}
footer .bottom .phone {
	width: auto;
	margin-right: -5px;
	padding: 20px 0 20px 20px;
}
footer .bottom .phone a strong {
	font-size: 15px;
}
footer .bottom .phone a i {
	display: none;
}
footer .bottom .phone a:first-child {
	width: auto;
}
footer .bottom:after {background: #f23f0d;}

}

@media screen and (min-width:769px) and (max-width:1024px) {
.list-promo .items {
	padding: 0 15px;
	width: 33.33%;
	box-sizing: border-box;
	margin-right: 0px;
}
}


/*====== SCREEN WIDTH > 480px =======*/





@media screen and (max-width:767px) {

.wrapper {width: 420px; margin: 0 auto;}
.wrapper.network aside {display: block; float: none; width: 100%;}
.wrapper.network aside .network .row {margin-bottom: 40px;}
.wrapper.network aside .network input[type=text] {width: 347px; height: 19px;}
.wrapper.network .main-content {margin-left: 0px;} 

.breadcumb {float: none;}
.share {float: none; margin: 10px 0 0; display: block;}

#tracking:before {/*height: 292px;*/ min-height: 200px; height: auto;}
#tracking h3, #tracking .trace h3 {margin: 0 0 10px;}
#tracking form.trace {padding: 28px 0 27px;}
#tracking form.trace button {margin-top: 24px;}
#tracking form.trace p {
    color: #ffa8ab;
    position: absolute;
    top: 40px;
}
#tracking form.trace input, #tracking form.trace textarea {width: 398px;}
#tracking form.check {width: 100%; border-bottom: 1px solid #eaeaea; padding-bottom: 40px; }
/*#tracking form.network {width: 100%; float: none; display: block;}
#tracking form {width: 100% !important; border-bottom: 1px solid #eaeaea;}*/
#tracking form.check label:nth-child(1), #tracking form.check label:nth-child(2) {width: 100%; margin-bottom: 30px;}
#tracking form.check input[type=text] {width: 398px; height: 19px;}

#tracking form.network {width: 100%; padding: 30px 0 40px; background: none;}
#tracking form.network input {width: 350px; height: 19px;}
#tracking form.network .row .btn {padding: 13px 18px;}
.list-promo .items {width: 100%;}
.list-promo .items img {width: 100%;}
.list-promo.promotion .items {width: 100%;}

#widget .cols {width: 100%;}
#widget .cols img {width: 100%;}
#widget .cols form label .selector_form, #widget .cols form label .selector_form select {width: 288px !important; margin-top: 10px;}

.main-content h1 {font-size: 30px;}
.main-content h2 {font-size: 24px;}
.main-content ul {padding: 0 0 0 30px;}
.main-content article p.visi {font-size: 18px !important;}
.main-content .thumb-content .items {width: 100%; margin: 0 0 40px;}

.main-content .headContent {padding: 10px 0px; margin-bottom: 40px; text-align: center; height: auto;}
.main-content .headContent h1 {font-size: 24px; display: block; width: 100%; margin: 0 0 10px; float: none;}
.main-content .headContent .img {float: none; height: 86px; margin: 0; display: block;}
.main-content .headContent .img img {margin: 0;}

.main-content .list-news .items {width: 420px; margin: 15px 0 40px;}
.formCustomer .field textarea, .formCustomer .field input[type="text"] {width: 394px;}
.formCustomer .field .fSelect .selector_form {width: 420px !important;}

.contact_form input[type=text], .contact_form textarea {width: 396px;}
.contact_form .selector_form, .contact_form .selector_form select { width: 418px !important;}

.form_career .row {margin: 10px 0;}
.form_career .row .form {width: 100%;}
.form_career .row .form > label {display: inline-block; }
.form_career .row .label {display: block; width: 100%; margin-bottom: 10px;}
.form_career .row .form input[type=text] {width: 398px;}
.form_career .row .form .year {width: 143px !important;}
.form_career .row .form label:last-child .year {margin-right: 0;}
.form_career .row .form textarea {width: 401px;}



#timeline .bx-wrapper {margin: 0 auto 30px;}
#timeline .content h3 {font-size: 18px;}
#timeline .bx-wrapper .bx-controls-direction a.bx-next {left: 376px;}

.askjoni .number {display: none;}
.askjoni div {margin: 0 35px 0 20px;}
.askjoni form {padding: 10px 0;}
.askjoni .selector_form {margin: 0 6px 0 0;}
.link-socmed a {margin: 0 20px 20px 0;}

.filter input, .filter select {padding: 7px 15px; }
.filter {padding: 15px; height: auto;}
.filter .left {float: none; display: block;}
.filter .left input {width: 322px;}
.filter .left button {padding: 7px 10px;}
.filter .right {float: none; display: block; margin: 15px 0 0;}
.filter .right .selector_form {height: 30px; margin-left: 10px;}
.filter .right .selector_form,
.filter .right .selector_form select {width: 315px !important;}
.filter .right .selector_form span {border: none; padding: 7px 10px;}
.filter.paging .left {float: left; display: inline;}
.filter.paging .right {float: right; display: inline; margin-top: 0;}

.img-desc .left {float: none;}
.img-desc > div {margin: 20px 0 0;}

.main-content article.label_contact .label {display: none;}
.main-content article.label_contact .list-address {padding-left: 0;}
.number .customer, .number .social {display: none;}
.list-address address {font-style: normal; display: block; width: 100%;}
body.kontak .main-content .complain {display: none;}

.main-content article .list_bod .items {padding-bottom: 30px;}
.list_bod .items .images {float: none; text-align: center;}
.list_bod .items .text {margin-left: 0; text-align: center;}
.list_bod .items .text h6 {font-weight: bold; margin: 25px 0; }


/* ===== style table job ===== */
.table_style.jobs {border: none;}
.table_style.jobs thead {display: none;}
.table_style.jobs td {border: none;}

.table_style.jobs tbody td:first-child {display: inline-block; width: auto; font-weight: bold; font-size: 16px;}
.table_style.jobs tbody td {display: block;}
.table_style.jobs tbody td:nth-child(2) {padding-left: 142px; margin-top: -38px; position: relative; text-decoration: underline; color: #223377;}
.table_style.jobs tbody td:nth-child(4), .table_style.jobs tbody td:nth-child(3) {text-align: left; padding-left: 142px; position: relative;}
.table_style.jobs tbody td:nth-child(2):before {
	content: "Position";
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	color: #666;
	position: absolute;
	left: 40px;
}
.table_style.jobs tbody td:nth-child(3):before {content: "Division";}
.table_style.jobs tbody td:nth-child(4):before {content: "Deadline";}
.table_style.jobs tbody td:nth-child(3):before,
.table_style.jobs tbody td:nth-child(4):before {
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	position: absolute;
	left: 40px;
	top: 8px;
}

.table_style.jobs tbody td:nth-child(2):after,
.table_style.jobs tbody td:nth-child(3):after,
.table_style.jobs tbody td:nth-child(4):after { 
	content: ":";
	position: absolute;
	left: 134px;
	font-size: 16px;
	font-weight: bold;
	color: #666;
	top: 8px;
}

.table_style.recog {width: 420px;}
.main-content .tracking_table {overflow: auto; margin-bottom: 30px;}

.formCustomer .field.tmbh > div {width: 100%; margin-right: 0;}
.main-content.chat .contact_form textarea { width: 398px;}

#liveChat .box_popup {width: auto; margin: 0 20px;}
.content.chat .text_chat textarea {width: 70%;}
.content.chat .text_chat input[type="submit"] {width: 23%;}

/* ===  footer === */

footer .top .wrapper .left.mobile, 
footer .top .wrapper .right {width: 100%; text-align: center;}
footer .top .right p.sos_mobile {text-align: center; padding-bottom: 0;}

footer .bottom {padding: 20px 0;}
footer .bottom p.left {
	float: none;
	display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 20px;
    width: 280px;
}
body.home footer .bottom p.left {padding: 0;}
footer .bottom:after {background: none;}
footer .bottom .phone {display: none;}
footer .bottom p {font-size: 14px;}
footer .bottom p a {text-align: center;}

footer .phone.mobile {
	display: block;
	background: #f23f0d;
	padding: 20px 0;
}
footer .phone.mobile a i {display: none;}
footer .phone.mobile a {
	font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
}
footer .phone.mobile a strong {font-size: 15px; display: block;}
footer .phone.mobile a:first-child {float: left}
footer .phone.mobile a:last-child {float: right;}
.wrap_popup .box_popup {
 width: auto;
 margin: 15% 20px;
 padding: 30px 20px;
}
#banner-content {height: auto; overflow: hidden;}
#banner-content img {height: auto; max-width: 100%;}
/*.camera_wrap {height: auto !important; min-height: auto !important;}*/
.camera_wrap img {margin: auto !important; max-width: 100% !important; height: auto !important;}
}