@charset "UTF-8";
/* CSS Document */

.modal-body {
    padding: 30px;
    position: relative;
}

.modal.fade .modal-trueid{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}
.modal.in .modal-trueid{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
.modal-trueid{position:relative;width:auto;margin:10px}
.modal-trueid {
  width: 600px;
  margin: 30px auto;
}

 ul {padding: 0; margin:0; list-style:none;}
.mrg15 {margin-bottom:15px;}
.mrg20 {margin-bottom:20px;}
.modal-title {
    margin: 0;
    text-align: center;
    color: #545454;
    line-height: 1.428571429;
    font-family: 'true_boldregular';
}
.font-itm {font-family: Thonburi, Tahoma, Geneva, sans-serif;}
.modal-header {background-color:#fff;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-family: true_mediumregular !important;}
.modal-footer {text-align:center !important; margin-top:0px;}



.box-social {float:left; width:225px; padding:92px 0 0 0;}
.box-line {float:left; padding:0; margin:0 25px; width:22px; text-align:center;}
.box-id {float:left; width:240px; padding:10px 0 0 0;}
.btn-social {width: 153px;
  height: 35px;
  width:auto;
  line-height: 30px ;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:#fff;
}

.btn-greenitm {
    background-color: #95c126;
    border-color: -moz-use-text-color -moz-use-text-color #79ab18;
    border-bottom: solid 2px #79ab18;
	border-width: 0 0 2px;

    color: #ffffff;
}
.btn-greenitm:hover{
	background-color:#47a447;
	border-color: -moz-use-text-color -moz-use-text-color #398439; 
	border-bottom: solid 2px #398439;
    border-width: 0 0 2px;
	color:#fff;
}


.btn-social a{color:#fff; text-decoration:none;}
.btn-social :hover {text-decoration:underline; color:#fff !important;}

.bg-blue {background-color:#3b5999; border:1px solid #3b5999;}
.bg-orange {background-color:#dd4b39; border:1px solid #dd4b39;}

.btn-social .ficon {
    background-image: url("../images/icon-facebook.png");
	  background-size:12px 20px;
    background-position: 11px 7px;
    background-repeat: no-repeat;
    border-right: 1px solid #fff;
    float: left;
    height: 35px;
    width: 35px;
}
.btn-social .gicon {
  width: 35px;
  height: 35px;
  background-position: 7px 7px;
  border-right: #FFF 1px solid;
  float: left;
  background-image: url("../images/icon-google.png");
  background-repeat: no-repeat;
}
.freespace {padding-right:15px; box-sizing:border-box;} 
.freespace2 {padding-left:15px; box-sizing:border-box;} 
.box-logincenter {width:260px; margin:0 auto;}
.connected {height:50px; width:100%; border:1px #e9e9e9 solid; box-sizing:border-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; background:#fcfcfc;}
.box-cn1 {float:left; margin:7px 0 0 7px;}
.box-cn2 {float:left; margin:7px; box-sizing:border-box; }
.box-cn3 {float:right; margin:7px; box-sizing:border-box;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width:35px; height:35px;}

.ortext {display:none;}
.col-left {width:50%; padding-right:10px; float:left;}
.col-right {width:50%; padding-left:10px; float:left;}



@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	.btn-social .ficon {
  	background-image: url(../images/icon-facebook@2x.png);
	background-position: 7px 7px;
    background-size: 20px 20px;
}
.btn-social .gicon {
  	background-image: url(../images/icon-google@2x.png);
	background-position: 7px 7px;
    background-size: 20px 20p;
}
}

.btn-social .widget_text {
  text-align: center;
  line-height: 30px;
  padding:3px 0 0 0;
}
.social1 {margin:0 0 10px 0;}
.social2 {margin:0 0 10px 0;}
.btn {box-shadow:none;}
.txt-loginby {color:#545454; font-weight:bold;}
.input_help .icon_viewpass2 {
    background-image: url("../images/icn_viewpass.png");
    cursor: pointer;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 7px;
    width: 20px;
}
.handtrueid {text-align:center; margin:30px 0 0 0;}
.bg-card {position:relative; width:327px; height:212px; margin:0 auto; text-align:center; font-size:24px; line-height:34px; padding:60px 0; box-sizing:border-box; background:url(../images/redcard-modal.png) no-repeat; color:#fff; font-family: true_mediumregular;}

.modal-header {
    min-height: 16.428571429px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #F1F1F1;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 56px;
}
.close {font-size:40px; font-weight:normal;}

/* for desktop */	
@media (min-width: 980px) {

}


/* for tablet */
@media (max-width: 979px) {
.handtrueid {margin:0;}
.freespace {padding-right:0px;} 
.freespace2 {padding-left:0px;} 



}

/*mobile ธรรมดา*/
@media (max-width: 600px) {
.modal-trueid {
  width: 100%;
  margin:0px;
}
.col-left {width:100%; padding-right:0px; padding-bottom:10px; float:none;}
.col-right {width:100%; padding-left:0px; float:none;}
	
}

/*mobile ธรรมดา*/
@media (min-width: 598px) and (max-width: 767px) {
	
.box-id {float:left; width:45%; padding:10px 0 0 0;}	
.box-line {float:left; padding:0; margin:0 ; width:10%; text-align:center !important; box-sizing:border-box;}
.box-social {float:left; width:45%; padding:92px 0 0 0;}

.btn-social {width:100%;
  height: 35px;
  line-height: 30px ;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:#fff;
}
/*.box-social {float:none; width:100%; padding:0px;}
.box-line {float:none; width:100%; margin:20px 0;}
.box-id {float:none; width:100%; padding:0px;}*/
.social1 {float:none; margin:0 0 10px 0;}
.social2 {float:none; margin:0 0 10px 0;}
.modal-body {
  padding: 20px;
}

}
	
	
/* for mobile */
@media (max-width: 597px) {
.bg-card { width:260px; height:169px; font-size:18px; line-height:28px; padding:50px 0;background:url(../images/redcard-modalw260.png) no-repeat; }
.btn-social { width:100%;}
.btn{display:block;width:100%;padding-left:0;padding-right:0}
.box-logincenter {width:auto; margin:0 auto;}

.box-social {float:none; width:100%; padding:0px;}
.box-line {float:none; width:100%; margin:20px 0;}
.box-id {float:none; width:100%; padding:0px;}
.ortext {display:block;}
.orimage {display:none !important;}

}

.ajax-spinner {
 position: absolute;
 opacity: 1;
 left: 50%;
 top: 50%;
 width: 30px;
 height: 30px;
 background: url(../images/icons/spinner.GIF) no-repeat 0 0;
 margin-left: -15px;
 margin-top: -15px;
 z-index: 10;
 visibility: visible;
 
 -moz-transition: opacity .4s ease, visibility .4s ease;
 -webkit-transition: opacity .4s ease, visibility .4s ease;
 transition: opacity .4s ease, visibility .4s ease;
}

.modal-ajax {
 opacity: 0;
 visibility: hidden;
 
 -moz-transition: opacity .4s ease;
 -webkit-transition: opacity .4s ease;
 transition: opacity .4s ease;
}

.show-content .modal-ajax {
 opacity: 1;
 visibility: visible;
}

.show-content .ajax-spinner {
 opacity: 0;
 visibility: hidden;
}

/*.ie8 .modal-ajax {
 visibility: hidden;
}

.ie8 .show-content .modal-ajax {
 visibility: visible;
}*/

.ie8 .show-content .ajax-spinner {
 visibility: hidden;
}

.md-overlay, .md-overlay-white {
 position: fixed;
 opacity: 0;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1000;
 visibility: hidden;
 
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 
 -moz-transition: all .2s ease;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;
}

.md-overlay {
 background: #000;
 background: rgba(0,0,0,0.8);
}

.md-overlay-white {
 background: #FFF;
 background: rgba(255,255,255,0.75);
}

.ie8 .md-overlay, .ie8 .md-overlay-white {
 display: none;
}

.md-box {
 position: fixed;
 left: 50%;
 top: 50%;
 height: auto;
 z-index: 2000;
 visibility: hidden;
 margin-left: -290px;
 
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 
 -ms-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 
    /*-ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);*/
}

.ie8 .md-box {
 display: none; 
}

.md-show {
 visibility: visible;
}

.ie8 .md-show {
 display: block;
 visibility: visible;
}

.show-overlay {
 opacity: 1;
 visibility: visible;
}

.ie8 .show-overlay {
 display: block;
 visibility: visible;
}

.ie8 .show-overlay {
 filter: alpha(opacity=80);
}

.ie8 .md-overlay-white.show-overlay {
 filter: alpha(opacity=75);
}

.md-effect-1 .md-content {
 opacity: 0;
 background-color: #FFF;
 -moz-transform: translateY(-125%);
 -webkit-transform: translateY(-125%);
 transform: translateY(-125%);
}

.md-show.md-effect-1 .md-content {
 opacity: 1;
 -moz-transform: translateY(0);
 -webkit-transform: translateY(0);
 transform: translateY(0);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

#modal-auto.md-show.md-effect-1 .md-content {
 -moz-transition: opacity .4s ease .3s, -moz-transform .4s ease .3s;
 -webkit-transition: opacity .4s ease .3s, -webkit-transform .4s ease .3s;
 transition: opacity .4s ease .3s, transform .4s ease .3s;
}

.md-show.md-effect-2 .md-content {
 opacity: 0;
 -moz-transform: translateY(-100%);
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}


.md-effect-3 .md-content {
 opacity: 0;
 -moz-transform: translateX(100%);
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

.md-show.md-effect-3 .md-content {
 opacity: 1;
 -moz-transform: translateX(0);
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

.md-effect-4 .md-content {
 opacity: 0;
 -moz-transform: translateX(-100%) scale(0.5);
 -webkit-transform: translateX(-100%) scale(0.5);
 transform: translateX(-100%) scale(0.5);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

.md-effect-5 .md-content {
 opacity: 0;
 -moz-transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

.md-show.md-effect-5 .md-content {
 opacity: 1;
 -moz-transform: translateX(0);
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

.md-effect-6 .md-content {
 opacity: 0;
 -moz-transform: translateX(100%) scale(0.5);
 -webkit-transform: translateX(100%) scale(0.5);
 transform: translateX(100%) scale(0.5);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

.md-show.md-effect-7 .md-content {
 opacity: 0;
 -moz-transform: scale(2);
 -webkit-transform: scale(2);
 transform: scale(2);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

.md-effect-8 .md-content {
 opacity: 0;
 -moz-transform: scale(0.5);
 -webkit-transform: scale(0.5);
 transform: scale(0.5);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

.md-show.md-effect-8 .md-content {
 opacity: 1;
 -moz-transform: scale(1);
 -webkit-transform: scale(1);
 transform: scale(1);
 
 -moz-transition: opacity .4s ease, -moz-transform .4s ease;
 -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
 transition: opacity .4s ease, transform .4s ease;
}

#modal-auto .md-content {
 background-color: transparent;
}

.fall-rotate {
 -moz-transform-origin: 0 0;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 
 -moz-animation: fall-rotate 0.6s ease-in forwards;
 -webkit-animation: fall-rotate 0.6s ease-in forwards;
 animation: fall-rotate 0.6s ease-in forwards;
}

@-moz-keyframes fall-rotate { 
 0% { -moz-transform: translateY(0%) rotate(0deg); -moz-animation-timing-function: ease-in; }
 40% { -moz-transform: translateY(0%) rotate(20deg); -moz-animation-timing-function: ease-out; }
 60% { -moz-transform: translateY(0%) rotate(15deg); }
 100% { -moz-transform: translateY(150%) rotate(17deg); opacity: 0; }
}

@-webkit-keyframes fall-rotate { 
 0% { -webkit-transform: translateY(0%) rotate(0deg); -webkit-animation-timing-function: ease-in; }
 40% { -webkit-transform: translateY(0%) rotate(20deg); -webkit-animation-timing-function: ease-out; }
 60% { -webkit-transform: translateY(0%) rotate(15deg); }
 100% { -webkit-transform: translateY(150%) rotate(17deg); opacity: 0; }
}

@keyframes fall-rotate { 
 0% { transform: translateY(0%) rotate(0deg); animation-timing-function: ease-in; }
 40% { transform: translateY(0%) rotate(20deg); animation-timing-function: ease-out; }
 60% { transform: translateY(0%) rotate(15deg); }
 100% { transform: translateY(150%) rotate(17deg); opacity: 0; }
}

.modal-header {
 position: relative;
}

.md-content-box {
 position: relative;
}

.md-content-box .content-list {
 width: 320px;
 text-align: left;
 margin: 0 auto;
}

.md-content-box .content-list > li {
 margin-top: 20px;
}

.md-content-box h1 {
 position: relative;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 2em;
 color: #462176;
 letter-spacing: -1px;
 padding-bottom: 20px;
 margin-bottom: 30px;
}

.md-content-box h1 em {
 font-style: italic;
}

.md-content-box h2 {
 font-size: 0.875em;
 margin-bottom: 10px;
}

.md-content-box h3 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1.25em;
 font-weight: normal;
 line-height: normal;
 letter-spacing: -1px;
 color: #222;
 margin-bottom: 15px;
}

.md-content-box h3 em {
 display: block;
 font-size: 1.5em;
 line-height: normal;
 color: #462176;
 margin-top: -6px;
}

.md-content-box .line-btm:after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 0;
 width: 370px;
 height: 1px;
 background: url(../images/vectors/line-btm.png) no-repeat 0 0;
 margin-left: -185px;
}

/*.md-cmn-size .md-content-box {
 min-height: 304px;
 padding-top: 23px;
}

.md-cmn-size2 .md-content-box {
 min-height: 340px;
 padding-top: 23px;
}

.md-cmn-size3 .md-content-box {
 width: 818px;
}

.md-msg-box .md-content-box {
 min-height: 124px;
 padding-top: 23px;
 padding-bottom: 23px;
}
*/
.mdc-position {
 right: 17px;
 top: 17px;
}

.vis-btn {
 position: absolute;
 display: block;
 cursor: pointer;
 left: 50%;
 bottom: 43px;
 width: 160px;
 height: 50px;
 background-color: transparent;
 background-color: rgba(255,255,255,0);
    margin-left: -80px;
 z-index: 10;
}

.md-content .remark-text {
 display: block;
 font-size: 1.5em;
 font-weight: bold;
 margin-top: 1.25em;
}

.md-ovf-scroll {
 max-height: 36.25em;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}

.call-modal {
 cursor: pointer; 
}


/* --- LOADER --- */
.spinner {
 position:fixed;
 top:50%;
 left:50%;
 
    -ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 
 visibility: hidden;
 z-index: 3000;
}

.ie8 .spinner {
 margin: -29px 0 0 -29px;
}

.spinner-overlay {
 width: 100%;
 padding: 10px;
 
    -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 
 -ms-border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
}

.show-spinner {
 visibility: visible;
}

.spinner-effect-1 .spinner-overlay {
 opacity:0;
 
 -ms-transform: scale(0);
 -moz-transform: scale(0);
 -webkit-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 
 -ms-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;
}

.show-spinner.spinner-effect-1 .spinner-overlay {
 opacity: 1;
 -ms-transform: scale(1);
 -moz-transform: scale(1);
 -webkit-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}

.spinner-overlay .spinner-text {
 display: block;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}

/*.loading {
  margin: 0 auto;
 border-bottom: 4px solid #fff;
 border-left: 4px solid #fff;
 border-right: 4px solid #0C4DA1;
 border-top: 4px solid #0C4DA1;
 border-radius: 100%;
 height: 30px;
 width: 30px;
 
 -webkit-animation: spin .6s infinite linear;
 -moz-animation: spin .6s infinite linear;
 -ms-animation: spin .6s infinite linear;
 -o-animation: spin .6s infinite linear;
 animation: spin .6s infinite linear;
}

.ie8 .loading, .ie9 .loading {
 display: none;
}*/

@-moz-keyframes spin {
 from {
  -moz-transform: rotate(0deg);
 } to {
  -moz-transform: rotate(359deg);
 }
}

@-webkit-keyframes spin {
 from {
  -webkit-transform: rotate(0deg);
 }
 to {
  -webkit-transform: rotate(359deg);
 }
}

@keyframes spin {
 from {
  transform: rotate(0deg);
 } to {
  transform: rotate(359deg);
 }
}

@media only screen and (min-width : 300px) {
 .md-close-btn {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,0.5);
  z-index: 2000;
  -webkit-transform: translateZ(0);
 }
 
 .md-close-btn .white-x-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -6px;
 }

 .fixed-body .wrapper-outter, .fixed-body .wrapper {
  height: 100%;
  overflow: hidden; 
 }
 
 .md-box {
  width: 100%;
  min-height: 0;
  height: 100%;
  margin-top: 0px;
  margin-left: 0px;
  
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
 }
 
 .modal-ajax, .md-content, .lightbox-mobile {
  height: 100%;
 }
}

@media only screen and (min-width : 480px) {
 .md-box {
  height: auto; 
 }
 
 .md-fixed-height {
  height: 100%; 
 }
 
 .md-close-btn {
  right: 0;
  top: 0;
  width: 36px;
  height: 36px;
 }
}

@media only screen and (min-width : 768px) {
 .fixed-body .wrapper-outter, .fixed-body .wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
 }
 
 .md-box {
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  margin-left: -290px;

  -moz-transform: none;
  -webkit-transform: none;
  transform: none;
 }
 
 .md-fixed-height {
  height: auto; 
 }
 
 .md-cmn-size {
  min-height: 410px;
  margin-top: -205px;
 }
 
 .md-cmn-size2 {
  min-height: 648px;
  margin-top: -324px;
 }
 
 .md-cmn-size3 {
  width: 818px;
  height: 680px;
  margin-left: -409px;
  margin-top: -340px;
 }
 
 .md-cmn-size4 {
  max-width: 682px;
  min-height: 640px;
  margin: -195px 0 0 -341px;
 }
 
 .md-cmn-size5 {
  max-width: 881px;
  min-height: 735px;
  margin: -367px 0 0 -440px;
 }
 
 .md-msg-box {
  min-height: 252px;
  margin-top: -126px;
 }
 
 .md-medium-size {
  max-width: 500px;
 }
 
 .md-large-size {
  max-width: 800px;
  margin-left: -400px;
 }
 
 .md-vdo-box {
  max-width: 700px;
  min-height: 460px;
  margin-left: -350px;
  margin-top: -246px;
 }
 
 .md-vdo-content {
  min-height: 417px;
  padding-top: 60px;
  padding-bottom: 15px; 
 }
 
 .md-vdo-content2 {
  padding-bottom: 15px;
  padding: 10px 10px 8px 10px;
 }
 
 .md-vdo-content .md-close-btn {
  right: 20px;
 }
}