@charset "utf-8";
/* @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); */
/* @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); */

/* @import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500&display=swap); */



/*
    Button CSS ----------------------------------------------- 2013-11-06
    日期：
    修改：2018-05-31
*/
.btn-close {
  margin-top: -5px;
}
.btn-disable {
  background: #666;
  border: 1px solid #666;
  color: #fff;
}
.btn-disable:hover {
  color: #fff;
  background: #333;
}
.btn-visit {
  background-color: #f60;
  border: 1px solid #f60;
  color: #fff;
}
.btn-visit:hover {
  color: #fff;
  background: #f30;
}
.btn-dark {
  background: #000;
  border: 1px solid #000;
  color: #fff;
}
.btn-dark:hover {
  color: #fff;
  background: #333;
  border: 1px solid #333;
}
.btn-purple {
  background: #724985;
  border: 1px solid #724985;
  color: #fff;
}
.btn-purple:hover {
  color: #fff;
  background: #69437a;
  border: 1px solid #69437a;
}
.btn-blue {
  color: #fff;
  background: #0a9cb0;
  border: 1px solid #0a9cb0;
}
.btn-blue:hover {
  color: #fff;
  background: #0baac0;
  border: 1px solid #0baac0;
}
/*DWL 2017 --------------------------------------*/
.btn-fix {
  background: #ff3300;
  color: #fff;
  border: 1px solid #ff3300;
}
.btn-fix:hover {
  color: #fff;
  background: #e62e00;
  border: 1px solid #e62e00;
}
.btn-green {
  background: #080;
  color: #fff;
  border: 1px solid #080;
}
.btn-green:hover {
  color: #fff;
  background: #006f00;
  border: 1px solid #006f00;
}
/*button --------------------------------------- 2018-10-29*/
button {
  border: none;
  background: none;
}
/*
    bg CSS ----------------------------------------------- 2018-05-31
    日期：
    修改：2018-05-31
*/
.bgColor {
  background: #055688;
}
.bgColor-light {
  background: #0775b9;
}
.bg-visit {
  background: #f60;
  color: #fff;
}
.bg-purple {
  background: #724985;
  color: #fff;
}
.bg-dark {
  background: #000;
  color: #000;
}
.bg-fix {
  background: #ff3300;
  color: #fff;
}
.bg-green {
  background: #080;
  color: #fff;
}
/* -------------------------------------------------------------------
    說明：fbox
    日期：
    修改：2018-05-31
*/
.fbox {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-body {
  margin: 0 auto;
  width: 100%;
}
.fbox-body-quick {
  margin: 0 auto;
  width: 80%;
}
.fbox-menu {
  overflow: hidden;
  border-bottom: 1px solid #d9d9d9;
  background: #f2f2f2;
}
.fbox-menu-nav {
  padding: 8px 8px 0 8px;
  margin-left: 5px;
  margin-bottom: -5px;
  font-size: 18px;
}
.fbox-body-content {
  padding: 5px 0;
  background: rgba(255, 255, 255, 0.1);
}
.fbox-body-inner {
  padding: 5px 0;
}
.fbox-body-left {
  background: #fff;
}
.fbox-body-right {
  padding: 10px 10px;
}
.fbox-version {
  text-align: center;
  color: #666;
}
.fbox_Manual {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-img-mask {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-float {
  position: absolute;
  top: 0px;
  left: 0px;
}
.fbox-shadow {
  box-shadow: 2px 2px 10px #000;
}

.fbox-shadow-2 {
  /* box-shadow: 0px 2px 10px #000; */
  box-shadow: rgba(0, 0, 0, 0.35) 5px 5px 10px;
}

.fbox-shadow-light {
  box-shadow: 2px 2px 10px #ccc;
}
/*
	tip box ------------------------------
*/
.tipbox {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  padding: 10px;
  color: #fff;
}
.tipbox-alert {
  background: #f30;
  color: #fff;
}
/*
	smallFBox ----------------------------------
*/
.smallfbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: auto;
}
/*
	webMask ----------------------------------
*/
.webMask {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
}

/*
    font CSS ----------------------------------------------- 2013-11-06
    日期：
    修改：
        2022-04-01
        2018-05-31
*/
body {
  /* font-family: "Noto Sans TC", "sans-serif", "Helvetica Neue", "黑體", "微軟正黑體",  "Helvetica", "Arial"; */
  font-display: fallback;
  font-family:  "黑體", "微軟正黑體",  "Helvetica", "Arial", "sans-serif";
  /* font-family:  Helvetica, Arial, sans-serif; */
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1800 - 320)));
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;  
  padding-top: constant(safe-area-inset-top); /* iOS 11.0-iOS 11.1 */
  padding-top: env(safe-area-inset-top); /*iOS 11.2 */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-iOS 11.1 */
  padding-bottom: env(safe-area-inset-bottom); /*iOS 11.2 */  
}


h1.font-Title {
  font-size: calc(21px + (40 - 21) * ((100vw - 320px) / (1800 - 320)));
  /* font-size:14px; */
  /* font-family: 'Noto Sans TC', sans-serif; */
  font-weight: 700;  
}

/* h4,h3,h2 {
  /* font-family: "Noto Sans TC", "Helvetica Neue", "黑體", "微軟正黑體",  Helvetica, Arial, sans-serif; */
  /* font-weight: 700;
} */

.font-xs {
  font-size: 10px;
}
.font-sm {
  font-size: 12px;
}
.font-mini {
  font-size: 13px;
}
.font-normal {
  font-size: 14px;
}
.font {
  font-size: 16px;
}
.font-sd {
  font-size: 18px;
}
.font-md {
  font-size: 20px;
}
.font-big {
  font-size: 24px;
}
.font-lg {
  font-size: 26px;
}
.font-hg {
  font-size: 30px;
}
.font-xl {
  font-size: 32px;
}
.font-xxl {
  font-size: 42px;
}
/*Bold -----------------------------------*/
.font-bold {
  font-weight: bold;
}
.foint-thin {
  font-weight: lighter;
}
/*Position -------------------------------*/
.font-center {
  text-align: center;
}
.font-left {
  text-align: left;
}
.font-right {
  text-align: right;
}
.font-tip {
  background: #000;
  padding: 10px 10px;
  color: #fff;
}
/*font-Extra -----------------------------*/
.font-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.font-underline {
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
}
/*
    text CSS ----------------------------------------------- 2018-05-31
    日期：
    修改：2018-05-31
*/
.text-white {
  color: #fff;
}
.text-green {
  color: #78bd78;
}
.text-gray {
  color: #d3d3d3;
}
/*
	text-shadow
*/
.text-shadow-dark {
  text-shadow: 0 1px 0 #666;
}
.text-shadow-dark2 {
  text-shadow: 0 2px 0 #333;
}
.text-shadow-dark3 {
  text-shadow: 0 1px 0 #111;
}

.text-shadow-light {
  text-shadow: 0 2px 0 #ddd;
}
.text-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
/* -------------------------------------------------------------------
    說明：margin and pad
    日期：
    修改：2018-05-31
*/
.h {
  margin: 8px 0;
}
.mr {
  margin: 10px 0;
}
.mr-10 {
  margin: 10px 0;
}
.mr-t {
  margin-top: 5px;
}
.mr-t-10 {
  margin-top: 10px;
}
.mr-t-15 {
  margin-top: 15px;
}
.mr-b {
  margin-bottom: 5px;
}
.mr-b-10 {
  margin-bottom: 10px;
}
.mr-b-15 {
  margin-bottom: 15px;
}
.mr-all {
  margin: 5px;
}
.mr-all-10 {
  margin: 10px;
}
/* 
	Pad ----------------------------------	
*/
.pad {
  padding: 5px 0;
}
.pad-10 {
  padding: 10px 0;
}
.pad-top {
  padding-top: 5px;
}
.pad-top-10 {
  padding-top: 10px;
}
.pad-bot {
  padding-bottom: 5px;
}
.pad-bot-10 {
  padding-bottom: 10px;
}
/*Print*/
.Print {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.Print-border {
  border: 1px solid black;
}
.Print-border-gray {
  border: 0px solid #ccc;
}
.Print tr {
  border: 1px solid black;
}
.Print th {
  text-decoration: none;
  padding: 2px;
  border: 1px solid black;
}
.Print td {
  padding: 2px;
  border: 1px solid black;
}
.Print-pages {
  page-break-after: always;
}
.Print-gray {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.Print-gray th {
  border-top-style: none;
  border-bottom-style: double;
  border: 1px solid #ddd;
  padding: 1px;
}
.Print-gray tr {
  border: 0px solid #ccc;
}
.Print-gray td {
  padding: 1px;
  border: 0px solid #ccc;
}
.Print-none-border {
  width: 100%;
  height: auto;
  border-collapse: collapse;
}
.Print-none-border th {
  border: 1px solid #ddd;
  padding: 1px;
}
.Print-none-border tr {
  border: 0px;
}
.Print-none-border td {
  padding: 1px;
  border: 1px solid #ddd;
}
.Print-none-border tfoot {
  padding: 1px;
}
/*
    custom CSS ----------------------------------------------- 2018-05-31
    日期：
    修改：2018-10-19
*/


html {
  letter-spacing: 1px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;

}


p {
  margin: 2px auto 25px auto;
}
.debug {
  word-break: break-all;
  padding: 5px;
  border: 1px solid #ddd;
  background-color: #eee;
  border-radius: 5px;
}
.debug::before {
  content: "Debug";
  display: block;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 5px;
  color: #f30;
}
/*
	HR -----------------------------------
	修改：2018-05-31
*/
.hr {
  margin: 1px auto 5px auto;
}
.hr-red {
  border-top: 1px solid #f30;
  color: #f30;
}
.hr-year {
  border-top: 1px solid #055688;
}
/*
	alert box ------------------------------
*/
.alert-msg {
  text-align: center;
  font-size: 38px;
  font-weight: bold;
}
.ajaxProcessBox {
  font-size: 16px;
  position: absolute;
  top: 0px;
  padding: 8px 15px;
}
.zipCode-num {
  width: 70px;
  text-align: center;
  margin: 0 0 0 2px;
  border-radius: 6px;
  border: 1px solid #808080;
}
/*HTML Animation --------------------------------- 2014-06-22*/
.blink {
  /*for FireFox*/
  animation-duration: 1.2s;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: steps(2, start);
  /*for Safari*/
  animation: blink 0.6s infinite linear alternate;
  -webkit-font-smoothing: antialiased;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.01% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.circle-orange {
  width: 68px;
  height: 68px;
  border-radius: 99em;
  border: 5px solid #ffa600;
}
/*
	head -----------------------------------------------
*/
.head {
  width: 100%;
  z-index: 5;
  background: #0775b9;
  padding: 5px 5px;
}
.headBG {
  background-size: cover;
}
.floatNav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 5;
  padding: 15px auto;
  -webkit-box-shadow: 0px 0px 8px #333;
  box-shadow: 0px 0px 8px #333;
  cursor: pointer;
}
.NavBuffer {
  margin-top: 48px;
}
.corner {
  padding: 5px 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-radius: 5px;
}
/*
	opacity ----------------------------------------------- 
*/
.op {
  opacity: 0.5;
}
.op-1 {
  opacity: 0.1;
}
.op-3 {
  opacity: 0.3;
}
.op-6 {
  opacity: 0.6;
}
.op-9 {
  opacity: 0.9;
}
.break {
  word-break: break-all;
  word-wrap: break-word;
  text-align: justify;
  text-justify: inter-ideograph;
}
.hand {
  cursor: pointer;
}
.hand:hover {
  color: #055688;
}
/*
	box -----------------------------------------------  2018-10-27
*/
.box {
  position: relative;
  word-break: break-all;
}
.box-float {
  position: absolute;
  word-break: break-all;
}
.box-flex {
  all: reset;
  display: flex;
  flex-direction: row;
}
.box-flex-center {
  align-items: center;
}
.box-flex-bottom {
  align-items: baseline;
}
.box-flex-content-center {
  text-align: center;
  justify-content: center;
}
.box-flex-content-right {
  text-align: right;
}
.box-flex-content-left {
  text-align: left;
}
.box-flex-1 {
  flex: 1;
}
.box-flex-2 {
  flex: 2;
}
.box-flex-3 {
  flex: 3;
}
.box-flex-4 {
  flex: 4;
}
.box-flex-5 {
  flex: 5;
}
.box-flex-6 {
  flex: 6;
}
.box-flex-7 {
  flex: 7;
}
.box-flex-8 {
  flex: 8;
}
.box-flex-9 {
  flex: 9;
}
.box-circle {
  border-radius: 999em;
  all: reset;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 16px;
}
.box-circle-center {
  align-items: center;
}
.box-circle-bottom {
  align-items: baseline;
}
.box-circle-content-center {
  text-align: center;
  justify-content: center;
}
.box-circle-content-right {
  text-align: right;
}
.box-circle-content-left {
  text-align: left;
}
.box-circle-important {
  background: #f30;
  color: #fff;
}
.box-circle-important:hover {
  background: #9b0606;
  cursor: pointer;
}
.box-circle-blue {
  background: #08c;
  color: #fff;
}
.box-circle-green {
  background: #78bd78;
  color: #fff;
}
.box-circle-green:hover {
  background: #437743;
  cursor: pointer;
}
/*
	關於 list 區，當被 hover 時候的設定 ------------------ 2018-10-31
*/
.menuToolsBar {
  margin: 10px -5px -5px -5px;
  background: rgba(211, 211, 211, 0.8);
  padding: 8px 0px;
}
.thumbBox {
  border-top: 4px solid #eee;
  border-bottom: 4px solid #ddd;
  margin-bottom: 10px;
}
.thumbBox:hover {
  border-top-color: #08c;
  opacity: 1;
}
.thumbBox .menuToolsBar {
  margin: 10px -5px -5px -5px;
  background: rgba(211, 211, 211, 0.2);
  padding: 5px 0px;
}
.thumbBox .menuToolsBar:hover {
  background: rgba(211, 211, 211, 0.3);
}
.thumbBox-focused {
  border-top-color: #900;
  opacity: 0.3;
}
.thumbBox-focused:hover {
  border-top-color: #900;
}
.hoverTable {
  border-left: 4px solid #fff;
}
.hoverTable:hover {
  border-left-color: #08c;
  background: rgba(211, 211, 211, 0.2);
}
.hoverTable-focused {
  border-left: 4px solid #080;
}
.hoverTable-focused--danger {
  border-left: 4px solid #f30;
}
.hoverTable-focused--disabled {
  border-left: 4px solid #900;
  opacity: 0.7;
}
.del {
  color: #999;
}

/*
	goTop ------------------------------------------------
*/
#goTopBtn {
  position: fixed;
  right: 10px;
  bottom: 15px;
  z-index: 5;
  cursor: pointer;
  color: #FFE20A;
}
#goTopBtn:hover {
  color: #a39000;
}

.toolbar-DT{
  float: left;
}

/*
  custome -----------------------------------------------
*/
/* blockquote {
  font-style: italic;
  font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1800 - 320)));
  font-weight: bold;
  color:rgba(77,20,15,1);
} */

.nav-sub-font {
  font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1800 - 320)));
}

.nav-bg-transparent {
  background: rgba(255,255,255,0);
}

.nav-bg-transparent:hover {
  background: rgba(255,255,255,0.5);
}

.nav-bg-white {
  background: rgba(255,255,255,1);
}

.btn-pufa {
  background: rgba(77,20,15,1);
  color: #fff;
}

.btn-pufa-light {
  background: rgba(133,36,30,1);
  color: #fff;
}

.bg-pufa{
  background: rgba(77,20,15,1);
}

.border-pufa{
  border: 1px solid rgba(77,20,15,1);
}

.bg-pufa-lighter{
  background: rgba(133,36,30,1);
}

.border-pufa-lighter{
  border: 1px solid rgba(133,36,30,1);
}

.bg-pufa-dark{
  background: rgba(49,13,10,1);
}

.bg-pufa-dark-op8{
  background: rgba(49,13,10,0.8);
}

.bg-karasumi {
  background: rgba(219,214,203,1);
}

.bg-karasumi-red {
  background: rgba(206,56,39,1);
}

.bg-visit {
  background: rgb(206, 92, 39);
}




.font-overflow{
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;    
}

.text-pufa {
  color:rgba(77,20,15,1);
}

.text-pufa-dark {
  color: rgba(49,13,10,1);
}

.text-pufa-light {
  color: rgba(133,36,30,1);
}

/* show-content-box ------------------------------------ Start */
.card-img-top-box {
  height:550px;
}

.article-title {
  /* font-family: "Helvetica Neue", "黑體-繁", "微軟正黑體",  "Helvetica", "Arial", "sans-serif"; */
  font-size: calc(24px + (38 - 24) * ((100vw - 320px) / (1800 - 320)));
  color:#333; 
  font-weight: 500; 
  /* letter-spacing: 3px; */
  word-break: break-all;
  text-align: justify  
}

.show-content-box h1,h2,h3,h4,h5,h6 {
  /* font-weight: bold; */
  /*color: rgba(49,13,10,1);*/
  color: #333;
  padding-bottom:15px;
  font-family: "Noto Sans TC", "Helvetica Neue", "黑體", "微軟正黑體",  Helvetica, Arial, sans-serif;
  font-weight: 700;   
  font-display: fallback;
  line-height: 1.3; 
}

.show-content-box h1 {
  /* font-size: 32px;  */
  font-size: calc(26px + (32 - 26) * ((100vw - 320px) / (1800 - 320)));  
}

.show-content-box h2 {
  /* font-size: 28px; */
  font-size: calc(22px + (28 - 22) * ((100vw - 320px) / (1800 - 320)));   
}

.show-content-box h3 {
  /* font-size: 24px; */
  font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1800 - 320)));
}

.show-content-box h4 {
  /* font-size: 24px; */
  font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1800 - 320)));
}

.show-content-box {
  word-break: break-all;
  text-align: justify;
  line-height: 1.6; 
  font-size: calc(16px + (18 - 16) * ((100vw  - 320px) / (1800 - 320)));
  /* font-size: 16px; */
  font-family: "Noto Sans TC", "Helvetica Neue", "黑體", "微軟正黑體",  Helvetica, Arial, sans-serif;
  font-display: fallback;
  font-weight: 300;
}

.show-content-box table {
  border:none;
  border-collapse: collapse;
  border-spacing: 0px;
}

.show-content-box div {
  display: block;
}


.show-content-box p {
  margin-bottom:14px;
}

.show-content-box li {
  padding-top:5px;
  margin:0px 0px;
  /* font-size: calc(18px + (20 - 18) * ((100vw  - 320px) / (1800 - 320))); */
}

.show-content-box ol,ul {
  margin-bottom:25px;
}

/* show-content-box ------------------------------------ End */


.FAQ-content-box li {
  margin-bottom:15px;
}

.bottom-box li {
  list-style: none;
}


.bottom-nav div{
  margin-bottom:5px;
}

a.skip-main {
  left:-999px;
  position:absolute;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:-99999;
}
a.skip-main:focus, a.skip-main:active {
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow:auto;
  display: block;
  z-index:99999;
}

/* 內文區 mobile & web 轉換用 ---------------------- 2020-08-31*/
.content-photo-right {
  float: right;
  margin:2px 0px 2px 5px;
  width:auto;
  height:200px;
}

.img-right {
  float: right;
  padding-left:20px;
  padding-right:0px;
  margin-bottom:20px;
  display: block;
}

.img-left {
  float: left;
  padding-right:20px;
  padding-left:0px;
  margin-bottom:20px;
  display: block;
}

/* table 文字 */
table {
  font-size: calc(13px + (18 - 13) * ((100vw - 320px) / (1800 - 320)));
}

.money {
  background: rgb(11, 88, 107);
  color: #fff;
  padding:1px;
  border-radius: 5px;
  text-align:center;
}

/* CSP 不允許 inlinestyle, 2022-09-11 */
.bottomCopryrightBG_mobile {
  width:100%;
  /* height:75px; */
  height:auto;
  padding-top:0px;
  background-image: linear-gradient(180deg, #bbb 0%, #333 46%, #000 100%);
}

.bottomCopryrightBG_desktop {
  width:100%;
  height:100%;
  padding:5px;

  background-color: #111;
}

.round-10 {
  border-radius:10px 10px;
}

.round-top-10 {
  border-radius:10px 10px 0 0;
}

.round-end-10 {
  border-radius:0 0 10px 10px;
}

.bg-111 {
  background-color:#111;
}

.page-buffer {
  height:60px;
}

.bread-nav-overflow-width {
  width:250px;height:22px;
}

/* [CSP] modal ------------------------------ 2022-09-13 Start */
.modal-content-bg {
  background-color: rgba(34,104,75, 0.9);
}

.modal-content-bg-dark {
  background-color: rgba(51,51,51, 0.9);
  /* background-color: #222; */
}

.modal-content-header-border {
  border-bottom:1px solid rgba(255,255,255, 0.2);
}

.modal-close-btn {
  margin-top: 5px;
  /* margin-right:8px; */
}

.modal-logo {
  width:auto;
  height:32px;
  /* margin-right:0px;
  margin-top:0px; */
}
/* [CSP] modal ------------------------------ 2022-09-13 End */

#bodyFrame {
  padding:0px;margin:0px;
}

.navBox {
  height:60px;
  /* overflow:hidden; */
  /* background-color:rgba(11, 12, 11, 0.5); */
  background-color:rgba(255, 255, 255, 0.9);
}

.topManuBox {
  top:0px;right:0px;width:100%
}

.logo-mobile-box {
  width:100%;
}

.logo-mobile {
  width:auto;height:60px;
  /* margin-top:5px; */
}

.logo-normal {
  width:auto;height:50px;
  /* margin-top:5px; */
  /* margin-right:10px; */
}

#HBMenu {
  margin-right:0px;margin-top:6px;
  /* padding-top:5px; */
}

.detail_first_photo {
  background-image: url('/files/dist/bg/bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius:10px 10px 0 0; 
}



/*API, 2022-09-11 ============================*/
.public_list_photo {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:450px  
}

.public_list_Title {
  margin-top:auto;
  height:auto;
  overflow:auto
}

.public_list_FID {
  width:100%;
  padding-bottom:5px;
  padding-left:15px;
  padding-right:5px;
}


/* [API] photo_rand_list */
.photo_rand_list_top {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:140px    
}

.photo_rand_list_Title {
  height:42px;
  overflow:auto
}

/* [API] article_list */

.article_list_photo {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:115px  
}

.article_list_Title {
  margin-top:-5px;
  height:42px;
  overflow:auto
}

.article_list_FID {
  width:100%;
  padding-bottom:5px;
  padding-left:15px;
  padding-right:5px;
}

/* [API] photo_list */

.article-photo-list {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:110px  
}

/* [API] article_next_prev */

.article_next_prev__pointer {
  padding-left:5px;padding-right:5px;
}

.article_next_prev__pointer_mobile {
  margin-left:-30px;
}


.h-70px {
  height:70px;
}

.h-10px {
  height:10px;
}

.card-body {
  padding-left:10px;
  padding-right:10px;
}

/* Rotate -------------------------------- 2023-04-10 */
.rotate-30 {
  transform: rotate(30deg);
}

/* SVG icon ------------------------------ 2023-04-11  */
.icon-brush {
  display:inline-block;
  /* text-indent: -9999px;
  text-align: center; */
  margin-bottom: -3px;
  mask-image: url("/static/asset/svg/icon_brush.svg");
  -webkit-mask-image: url("/static/asset/svg/icon_brush.svg");
  background-color: #fff;
}

.icon-brush-red {
  
  display:inline-block;
  margin-bottom: -3px;
  mask-image: url("/static/asset/svg/icon_brush.svg");
  -webkit-mask-image: url("/static/asset/svg/icon_brush.svg");  
  background-color: #f00;
}
/* .subMenu
{
  visibility: hidden;
  z-index: 200;	
  background-color: rgba(255,255,255,0.8);
  position:absolute;top:22px;left:0px;width:auto;	
}

.subMenu div
{
  padding:5px 5px;			
}

.subMenu div:hover
{
  background-color: rgba(0,0,0,0.4);
  -webkit-border-radius:6px;
  border-radius:6px;	
  font-size: 13px;
	
}

.subMenu a
{
  text-decoration: none;
  color:rgba(0, 0, 0, 0.8);
}

.mainMenu li:hover .subMenu
{
  visibility: visible;
  height:auto;
  width:auto;		
} */