﻿ /* Global Element
body{font-family:prompt; font-size:13.5px; line-height:1.428571429; color:#333; margin:0; padding:0; }
*/
/*** J-BICS ***/
@media (min-width: 992px) { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; }}
@media (min-width: 768px) { 
    .jbics101 { float: left; }
    .jbics102.collapse {
      display: block !important;
      height: auto !important;
      padding-bottom: 0;
      overflow: visible !important;
    }
    .navbar-collapse {
      width: auto;
      border-top: 0;
      box-shadow: none;
    }
}
.jarBackGround {
    background: none repeat scroll 0 0 #FFFFFF;
    position: fixed;
    height: 200%;
    width: 200%;
    left: -50%;
 }
.jarBackGround img {
    display: block;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.jbics-body {
  padding-top: 42px;
  padding-bottom: 12px;
  background-color: transparent;
  color: black;
  /*
  padding-top: 44px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  */
}
.jbics100 li a:link, a:visited, a:active { color: white; text-decoration: none; }
.jbics100 li a:hover { color: lightpink; text-decoration: none;	}
.jbics100 .navbar-nav > li > a:hover,
.jbics100 {
  background-color: Darkred; /* #a90000สีแดง */
  background-image: linear-gradient(to top, Red, Darkred ); /* Menu Bar (MOD) */
  border-bottom: 0px solid #ccc;
  margin-bottom: 1px !important;
}
.jbics-container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
/*
  max-width: 1170px; ///////
  padding-left: 15px;
  padding-right: 15px;
*/
}
.jbics102 {
  max-height: 340px; /* no action */
  padding-left: 15px;
  padding-right: 0px;
  overflow-x: visible;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}
/**/
    .jssV1Image { padding-bottom:0.1em; width:100%; }
    .jssV2Image { padding-bottom:0.1em; width:100%; }
    .jssV3Image { padding-bottom:0.1em; width:100%; }
    .jssVimDivision { position:relative; float:left; padding-right:0.2em; }
    .jssVimTopLeft { position:absolute; left:3px; top:1px; cursor:pointer; }
    .jssVimBotLeft { position:absolute; left:3px; bottom:40px; cursor:pointer; }
    .jssVimBotRight { position:absolute; right:20px; bottom:20px; cursor:pointer; }
    .jssTextBottom { position:absolute; left:0; right:0; text-align:center; width:100%; }
    .jssDivCenter { text-align:center; margin-top:3px; }
    .jssLabelHidden { overflow:hidden; white-space:nowrap; }
    .jssLabelOverflow { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .jssEntry { border-radius: 5px; }
    .showTooltip {
        background-color: black;
        color: white;
        padding:5px;
        margin-top: 1.3em;
        position: absolute;
        max-width: 200px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        word-wrap:break-word;
    }
    .sliImages:hover { opacity: 0.5; }
    .sliImages {
        float:left;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
/**/
    .jBackRed { background-color: red; }
    .jBackPurple { background-color: purple; }
    .jBackBlue { background-color: blue; }
    .jBackGreen { background-color: darkgreen; }
    .jBackBlack { background-color: black; }
    .jBackDark { background-color: #4d4d4d; }
    .jBackGray { background-color: dimgray; }
    .jBackYellow { background-color: lightyellow; }
    .jssColorPurple { color: purple; }
    .jssColorBlue { color: blue; }
    .jssColorBlues { color: darkblue; }
    .jssColorGreen { color: darkgreen; }
    .jssColorDark { color: #4d4d4d; }
    .jssColorYellow { color: yellow; }
    .jssAlignCenter { text-align: center; }
    .jssAlignRight { text-align: right; }
    .jssMiddle { display:flex; align-items:center }
    .jssDefault { cursor: default; }
    .jssPointer { cursor: pointer; }
    .jssPadding { padding-left: 5px; padding-right: 5px; }
    .jssMiddle { position:absolute; top:50%; transform:translateY(-50%); }
    .jssImage { width:16px; height:16px; cursor:pointer; }
    .jssImage5 { width:16px; height:16px; cursor:pointer; margin-left:5px; }
    .jssImage20 { width:20px; height:20px; cursor:pointer; }
    .jssImage24 { width:24px; height:24px; cursor:pointer; }
    .jssImage28 { width:28px; height:28px; cursor:pointer; }
    .jssImage32 { width:32px; height:32px; cursor:pointer; }
    .jssImage48 { width:48px; height:48px; cursor:pointer; }
    .jssImg20 { width:20px; height:20px; }
    .jssImg24 { width:24px; height:24px; }
    .jssImgCircle { border-radius:50%; object-fit:cover; border:1px dotted black; }
    .jssLinkPointer { text-decoration:underline; cursor:pointer; }
    .jssLink12 { text-decoration:underline; cursor:pointer; font-size:12px; }
    .jssReverse { color: whitesmoke; padding: 3px 5px 0px 5px; } /* T,R,B,L */
    .jssOverflows { display:inline-block; word-wrap:break-word; }
    .jssOverflow { display:inline-block; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
    .jssHidden { display:inline-block; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; overflow-wrap: break-word; }
    .jssSize14 { font-size: 14px; font-weight: normal; }
    .jssSize15 { font-size:15px; font-weight:normal;}
    .jssSize16 { font-size:16px; font-weight:normal; }
    .jssSize18 { font-size:18px; font-weight:normal; }
    .jssSize20 { font-size:20px; font-weight:normal; }
    .jssSize22 { font-size:22px; font-weight:normal; }
    .jssSize24 { font-size:24px; font-weight:normal; }
    .jssRight10 { float:left; padding:10px 5px 0 0; text-align:right;} /* TRBL */
    .jssRight12 { float:left; padding:10px 5px 0 0; text-align:right; width:12%}
    .jssRight16 { float:left; padding:10px 5px 0 0; text-align:right; width:16%; }
/**/
    .jacket-left { padding-left: 5px; float:left; }
    .jacket-right { padding-right: 5px; text-align:right; }
    .jacket-right-3 { width: 3%; padding-right: 3px; text-align: right; } /* 1=8.33 */ 
    .jacket-right-5 { width: 5%; padding-right: 5px; text-align: right; } /* 1=8.33 */ 
    .jacket-right-10 { width: 10%; padding-right: 5px; text-align: right; } /* 1=8.33 */ 
    .jacket-right-12 { width: 12%; padding-right: 5px; text-align: right; } /* 1=8.33 */ 
    .jacket-right-14 { width: 14%; padding-right: 5px; text-align: right; } /* 2=16.66 */
    .jacket-right-15 { width: 15%; padding-right: 5px; text-align: right; } /* 2=16.66 */
    .jacket-right-16 { width: 16%; padding-right: 5px; text-align: right; } /* 2=16.66 */
    .jacket-right-17 { width: 17.5%; padding-right: 5px; text-align: right; }
    .jacket-right-20 { width: 20%; padding-right: 5px; text-align: right; }
    .jacket-right-21 { width: 21%; padding-right: 5px; text-align: right; }
    .jacket-right-22 { width: 22%; padding-right: 5px; text-align: right; }
    .jacket-right-24 { width: 24%; padding-right: 5px; text-align: right; }
    .jacket-right-25 { width: 25%; padding-right: 5px; text-align: right; } /* 3=25 */
    .jacket-right-27 { width: 27%; padding-right: 5px; text-align: right; } /* 3=25 */
    .jacket-right-28 { width: 28%; padding-right: 5px; text-align: right; } /* 3=25 */
    .jacket-right-30 { width: 30%; padding-right: 5px; text-align: right; }
    .jacket-right-35 { width: 35%; padding-right: 5px; text-align: right; }
    .jacket-right-40 { width: 40%; padding-right: 5px; text-align: right; }
    .jacket-right-45 { width: 45%; padding-right: 5px; text-align: right; }
    .jacket-right-48 { width: 48%; padding-right: 5px; text-align: right; }
    .jacket-right-50 { width: 50%; padding-right: 5px; text-align: right; }
    .jacket-right-55 { width: 55%; padding-right: 5px; text-align: right; }
    .jacket-right-60 { width: 60%; padding-right: 5px; text-align: right; }
    .jacket-right-100 { width: 100%; padding-right: 5px; text-align: right; }
    .jacket-width-1 { width: 1%;  }
    .jacket-width-2 { width: 2%; float: left; }
    .jacket-width-3 { width: 3%; float: left; }
    .jacket-width-4 { width: 4%; float: left; }
    .jacket-width-5 { width: 5%; float: left; }
    .jacket-width-8 { width: 8%; float: left; }
    .jacket-width-9 { width: 8%; float: left; }
    .jacket-width-10 { width: 10%; float: left; }
    .jacket-width-12 { width: 12%; float: left; }
    .jacket-width-14 { width: 14%; float: left; }
    .jacket-width-15 { width: 15%; float: left; }
    .jacket-width-16 { width: 16%; float: left; }
    .jacket-width-17 { width: 17.5%; float: left; }
    .jacket-width-19 { width: 19%; float: left; }
    .jacket-width-20 { width: 20%; float: left; }
    .jacket-width-21 { width: 21%; float: left; }
    .jacket-width-22 { width: 22%; float: left; }
    .jacket-width-24 { width: 24%; float: left; }
    .jacket-width-25 { width: 25%; float: left; }
    .jacket-width-27 { width: 27%; float: left; }
    .jacket-width-28 { width: 28%; float: left; }
    .jacket-width-30 { width: 30%; float: left; }
    .jacket-width-35 { width: 35%; float: left; }
    .jacket-width-40 { width: 40%; float: left; }
    .jacket-width-45 { width: 45%; float: left; }
    .jacket-width-49 { width: 49%; float: left; }
    .jacket-width-50 { width: 50%; float: left; }
    .jacket-width-55 { width: 55%; float: left; }
    .jacket-width-60 { width: 60%; float: left; }
    .jacket-width-65 { width: 65%; float: left; }
    .jacket-width-70 { width: 70%; float: left; }
    .jacket-width-75 { width: 75%; float: left; }
    .jacket-width-80 { width: 80%; float: left; }
    .jacket-width-85 { width: 85%; float: left; }
    .jacket-width-90 { width: 90%; float: left; }
    .jacket-width-95 { width: 95%; float: left; }
    .jacket-width-96 { width: 96%; float: left; }
    .jacket-width-97 { width: 97%; float: left; }
    .jacket-width-98 { width: 98%; float: left; }
    .jacket-width-99 { width: 99%; float: left; }
    .jacket-width-995 { width: 99.5%; float: left; }
    .jacket-width-100 { width: 100%; float: left; }
    .jacket-width-640 { width: 640px; float: left; }
    .jacket-width-CRUD {
        line-height: 20px;
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
    }
    .jacket-width-CRUD label { font-weight: normal; }
/*-------------------------------------------------*/
.swiper-button-next {
    background-image: none;
    right: 10px;
    left: auto;
    color: white;
    font-size: 20px;
}
.swiper-button-prev {
    background-image: none;
    left: 10px;
    right: auto;
    color: white;
    font-size: 20px;
}