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

/*** 共通 start ***/
body {
    font-size: 14px;
    line-height: 1.6em;
    font-family: "微軟正黑體", "Microsoft JhengHei", MingLiU, arial, verdana, helvetica, tahoma, sans-serif;
    margin: 0;
    padding: 0;
    background: #eef0f3;
    color: #555;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    letter-spacing: 1px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*反白顏色*/
::selection {
	background: #7d8085;
	color: #fff;
}
::-moz-selection {
	background: #7d8085;
	color: #fff;
}


/*按鈕*/
a {
    color: inherit;
    text-decoration: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
input{
    line-height: 34px;
    height: 34px;
}
button:focus,
input:focus,
textarea:focus {
    outline: none;
}

/* 隱藏scroll top 按鈕 */
.btn.gotop {
    display: none;
}

/*icon*/
@font-face {
    font-family: 'iicon';
    src: url('../../public/css/iicon/fonts/iicon.eot?qap20h');
    src: url('../../public/css/iicon/fonts/iicon.eot?qap20h#iefix') format('embedded-opentype'),
        url('../../public/css/iicon/fonts/iicon.ttf?qap20h') format('truetype'),
        url('../../public/css/iicon/fonts/iicon.woff?qap20h') format('woff'),
        url('../../public/css/iicon/fonts/iicon.svg?qap20h#iicon') format('svg');
    font-weight: normal;
    font-style: normal;
}


[class^="ii-"],
[class*=" ii-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'iicon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ii-low-inventory:before {
    content: "\e97a";
    color: #2c82be;
  }

.ii-cancelorder:before {
    content: "\e979";
  }

.ii-star-regular:before {
    content: "\e977";
}
.ii-star-solid:before {
    content: "\e978";
}
.ii-power1:before {
    content: "\e93f";
}
.ii-pin1:before {
    content: "\e971";
    transform: rotate(-40deg);
    display: inline-block;
}
.ii-web1:before {
  content: "\e941";
}
.ii-web2:before {
  content: "\e942";
}
.ii-car1:before {
  content: "\e928";
}
.ii-control1:before {
  content: "\e92b";
}
.ii-home1:before {
  content: "\e939";
}
.ii-hint1:before {
  content: "\e907";
}
.ii-search1:before {
  content: "\e918";
}
.ii-edit1:before {
  content: "\e930";
}
.ii-file5:before {
  content: "\e936";
}
.ii-more1:before {
  content: "\e93d";
}
.ii-drag1:before {
  content: "\e92f";
}
.ii-arrow1:before {
  content: "\e900";
}
.ii-arrow3:before {
  content: "\e924";
}
.ii-arrow4:before {
  content: "\e925";
}
.ii-arrow_b3:before {
  content: "\e94d";
}
.ii-link1:before {
  content: "\e93a";
  /* font-size: 19px; */
}
.ii-delete1:before {
  content: "\e92d";
}
.ii-list1:before {
  content: "\e93b";
}
.ii-list2:before {
  content: "\e93c";
}
.ii-plus1:before {
  content: "\e915";
}
.ii-less1:before {
  content: "\e909";
}
.ii-down1:before {
  content: "\e946";
}
.ii-crop1:before {
  content: "\e948";
}
.ii-pic1:before {
  content: "\e947";
}
.ii-cloud1:before {
  content: "\e94a";
}
.ii-close1:before {
  content: "\e902";
}
.ii-arrow4:before {
    content: "\e925";
}
.ii-confirm1:before {
    content: "\e92a";
}
.ii-file3:before {
    content: "\e934";
}
.ii-file6:before {
    content: "\e937";
}
.ii-file8:before {
    content: "\e949";
}
.ii-dollar1:before {
    content: "\e973";
}
.ii-password1:before {
    content: "\e94c";
    font-size: 18px;
    vertical-align: middle;
    color: #f57c7c;
}
.ii-crop1{
    font-size: 21px;
    position: relative;
}
.fast{
    font-size: 17px;
    vertical-align: middle;
}
.ii-eye1:before {
  content: "\e931";
}
.ii-checkbox_outline:before {
    content: "\e976";
}
.ii-help1:before {
    content: "\e94b";
}
.ii-question-chat:before {
    content: "\e938";
}
.ii-fb1-line:before{content:"\e94f"}.ii-fb3:before{content:"\e950"}.ii-google1-line:before{content:"\e951"}.ii-gstore1:before{content:"\e952"}.ii-ig2:before{content:"\e953"}.ii-ig2-line:before{content:"\e954"}.ii-line1-line:before{content:"\e955"}.ii-mail3:before{content:"\e956"}.ii-mail3-line:before{content:"\e957"}.ii-messenger1:before{content:"\e958"}.ii-messenger1-line:before{content:"\e959"}.ii-pchome1:before{content:"\e95a"}.ii-people2:before{content:"\e95b"}.ii-pixnet3:before{content:"\e95c"}.ii-pixnet3-line:before{content:"\e95d"}.ii-plurk2:before{content:"\e95e"}.ii-plurk2-line:before{content:"\e95f"}.ii-qq2:before{content:"\e960"}.ii-qq2-line:before{content:"\e961"}.ii-rakuten1:before{content:"\e962"}.ii-ruten1:before{content:"\e963"}.ii-shopee1:before{content:"\e964"}.ii-skype1-line:before{content:"\e965"}.ii-snapchat1:before{content:"\e966"}.ii-snapchat1-line:before{content:"\e967"}.ii-twitter1-line:before{content:"\e968"}.ii-wechat1-line:before{content:"\e969"}.ii-weibo1-line:before{content:"\e96a"}.ii-whatsapp1:before{content:"\e91f"}.ii-whatsapp2:before{content:"\e96b"}.ii-whatsapp2-line:before{content:"\e96c"}.ii-yahoo1:before{content:"\e96d"}.ii-yahoo2:before{content:"\e96e"}.ii-youtube1-line:before{content:"\e96f"}.ii-fb1:before{content:"\e903"}.ii-google1:before{content:"\e905"}.ii-line1:before{content:"\e90a"}.ii-line2:before{content:"\e90b"}.ii-line3:before{content:"\e90c"}.ii-skype1:before{content:"\e91a"}.ii-twitter1:before{content:"\e91c"}.ii-wechat1:before{content:"\e91d"}.ii-weibo1:before{content:"\e91e"}.ii-youtube1:before{content:"\e921"}.ii-youtube2:before{content:"\e922"}.ii-ig1:before {content: "\e908";}
/*icon*/


/*動畫*/
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
/*首頁模組進場動畫*/
@keyframes fadeInUp{
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInUp{
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
}
.fadeInRight {
    animation-name: fadeInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}
  @keyframes swing {
    20% {
      -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    40% {
      -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    60% {
      -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      transform: rotate(5deg);
    }

    80% {
      -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }

    100% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }

  .swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
@keyframes zoomIn {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
}
.zoomIn {
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}
  @keyframes flipInX2 {
    from {
      -webkit-transform: perspective(800px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(800px) rotate3d(1, 0, 0, 90deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(800px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(800px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    60% {
      -webkit-transform: perspective(800px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(800px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }

    80% {
      -webkit-transform: perspective(800px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(800px) rotate3d(1, 0, 0, -5deg);
    }

    to {
      -webkit-transform: perspective(800px);
      transform: perspective(800px);
    }
  }
  .flipInX2 {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX2;
    animation-name: flipInX2;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  @keyframes lightSpeedIn2 {
    from {
      -webkit-transform: translateX(100%) skewX(-30deg);
      transform: translateX(100%) skewX(-30deg);
      opacity: 0;
    }

    60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;
    }

    80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
    }

    to {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .lightSpeedIn2 {
    -webkit-animation-name: lightSpeedIn2;
    animation-name: lightSpeedIn2;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  #index_set .fadeInUp,
  #index_set .fadeInRight,
  #index_set .swing,
  #index_set .zoomIn,
  #index_set .flipInX2,
  #index_set .lightSpeedIn2{
      position: absolute;
      font-size: 20px;
  }
/*首頁模組進場動畫*/





.no-r input,
.no-r textarea{
    border-radius: 0;
}
.btn{
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    padding: 4px 16px;
    color: #666;
    line-height: 20px;
    margin: 0 5px;
    position: relative;
    border-radius: 4px;
}
.btn.new{
    background: #7d8085;
    color: #fff;
    padding: 8px 15px;
    letter-spacing: 2px;
    max-width: 140px;
    width: 100%;
}
.btn.new:hover{
    background-color: #2c82be;
}
.btn.weight-btn{
    background: #7d8085;
    color: #fff;
    padding: 8px 15px;
    letter-spacing: 2px;
    width: 100%;
}
.btn.weight-btn:hover{
    background-color: #2c82be;
}
.btn.new-br{/*原.btn.new2*/
    border: 1px solid #888;
    padding: 7px 14px;
    letter-spacing: 2px;
    max-width: 140px;
    width: 100%;
}
.btn.new-br:hover{
    background-color: #2c82be;
    color: #fff;
}
.btn.send{
    background: #2c82be;
    color: #fff;
    padding: 8px 15px;
    letter-spacing: 2px;
    max-width: 140px;
    width: 100%;
    overflow: hidden;
    z-index: 0;
}
.btn.send:hover{
    background: transparent;
}
.btn.send:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2c82be;
    z-index: -2;
    pointer-events: none;
}
.btn.send:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(64, 158, 255, 1);
    border-radius: 50%;
    width: 140px;
    height: 140px;
    opacity: 0;
    margin: auto;
    z-index: -1;
    pointer-events: none;
}
.btn.send:hover:before {
    animation: pulse 1.5s infinite linear;
}
.btn.disabled{
    opacity: 0.5;
    pointer-events: none;
}
@keyframes pulse {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    50% {
      transform: scale(3);
      opacity: 0;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }

.btn.add{
    background: #edf6fc;
    color: #2c82be;
    line-height: 28px;
    border: 1px solid #e1edf8;
}
.btn.add:before{
    content: "\e915";
    font-family: 'iicon' !important;
    color: #fff;
    font-size: 12px;
    background: #92bce0;
    width: 15px;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-right: 8px;
    line-height: 100%;
    display: inline-block;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
}
.btn.load,
.btn.upload{
    margin-bottom: 8px;
    max-width: 85px;
    line-height: 32px;
    width: 100%;
    padding: 4px 10px;
}
.btn.load{
    background: rgba(255,255,255,.5);
    border: 1px solid #ddd;
    margin-right: 0;
}
.btn.upload{
    background: #edf6fc;
    border: 1px solid #e1edf8;
}
.fast-btn .btn {
    border-radius: 0;
}
.fast-btn .btn:first-child {
    border-radius: 4px 0 0 4px;
}
.fast-btn .btn:last-child {
    border-radius: 0 4px 4px 0;
}
.fast-btn .btn.new{
    max-width: 108px;
    padding-right: 15px;
    width: calc(100% - 36px);
    float: right;
    margin: 0;
}
.fast-btn .btn.fast{
    height: 36px;
    background: #7d8085;
    padding-left: 10px;
    padding-right: 8px;
    float: left;
    border-right: 1px solid #ccc;
    margin: 0;
}
.fast-btn .btn.fast .ii-pin1:after{
    position: absolute;
    transform: rotate(-40deg);
    content: "\e971";
    left: 50%;
    margin-left: -8px;
    opacity: 1;
    color: #666;
}
.fast-btn .btn.fast:hover .ii-pin1:after,
.fast-btn .btn.fast.active .ii-pin1:after{
    transform: scaleX(2.5) scaleY(2.5) rotate(-40deg);
    opacity: 0;
    color: #ffc000;
    transition: all .3s;
    animation:comeFromBottom 1s ease-out .8s;
}
/*按鈕*/
/*表單*/
.el-input__inner{
    line-height: 34px;
}
.el-input__inner,
.el-radio__inner,
.el-textarea__inner{
    border-color: #c7cad2;
    color: #212121;
}
.el-date-editor .el-range-input:-ms-input-placeholder{color:#999;}
.el-date-editor .el-range-input::-ms-input-placeholder{color:#999;}
.el-date-editor .el-range-input::placeholder{color:#999;}
.el-range-editor.is-disabled input::-webkit-input-placeholder{color:#999;}
.el-range-editor.is-disabled input:-ms-input-placeholder{color:#999;}
.el-range-editor.is-disabled input::-ms-input-placeholder{color:#999;}
.el-range-editor.is-disabled input::placeholder{color:#999;}
.el-textarea__inner::-webkit-input-placeholder{color:#999;}
.el-range-input:-ms-input-placeholder{color:#999;}
.el-range-input::placeholder{color:#999;}
.el-range-editor.is-disabled input:-ms-input-placeholder{color:#999;}
.el-range-editor.is-disabled input::placeholder{color:#999;}
.el-textarea__inner:-ms-input-placeholder{color:#999;}
.el-textarea__inner::placeholder{color:#999;}
.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#999;}
.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#999;}
.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#999;}
.el-input__inner:-ms-input-placeholder{color:#999;}
.el-input__inner::-ms-input-placeholder{color:#999;}
.el-input__inner::placeholder{color:#999;}
/* .el-input__inner:hover{color:#999;}
.el-select:hover .el-input__inner{color:#999;} */
.el-input,
.form-group.link{
    margin-bottom: 5px;
}
.el-switch,
.el-switch__label{
    height: auto;
}
.col-style .el-switch{
    min-width: 130px;
}
.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
    width: auto;
    min-width: 250px;
}
.el-date-editor .el-input__suffix{
    display:none;
}
.el-radio__inner:hover{
    border-color: #abadb3;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
    border-color: #409EFF;
}
.el-input-number .el-input{
    margin-bottom:0;
}
.el-input-number.is-controls-right .el-input-number__decrease,
.el-input-number.is-controls-right .el-input-number__increase{
    padding:1px 0;
}
.el-form-item__label{
    font-size: 15px;
    line-height: 20px;
}
.label-right .el-form-item__label{
    text-align: right;
}
.el-select .el-input .el-input__icon{
    line-height: initial;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
    content: '';
    color: #F56C6C;
    display: none;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:after,
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after{
    content: '*';
    color: #F56C6C;
    margin-left: 8px;
}
.picradio .el-radio{
    float: left;
    margin-bottom: 20px;
}
.picradio .el-radio__input{
    display: none;
}
.picradio .el-radio__label{
    padding-left: 0;
}
.picradio .el-radio__label .pic{
    position: relative;
    margin-bottom: 5px;
}
/* .picradio .el-radio.disabled{
    pointer-events: none;
} */
.picradio .el-radio.disabled .pic img{
    opacity: 0.4;
}
.picradio .el-radio.disabled .pic:before{
    content: "\e972";
    font-family: "iicon" !important;
    position: absolute;
    font-size: 40px;
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    color: #ff6a6a;
    font-weight: bold;
    z-index: 1;
}
.picradio .el-radio__label .pic .info-hover{
    position: absolute;
    right: 2px;
    top: inherit;
    bottom: 2px;
    margin-bottom: 0;
    background-color: rgba(200,200,200,.8);
    padding: 5px;
    color: #fff;
    font-size: 14px;
}
.picradio .el-radio__label .pic > img{
    border: 2px solid #e3e3e3;
    transition: all .15s ease-in-out;
}
.picradio .is-checked .el-radio__label .pic > img{
    border-color: #409EFF;
}



.picradio .el-checkbox__input{
    display: none;
}
.picradio .el-checkbox__label > img{
    opacity: .3;
    transition: all .15s ease-in-out;
}
.picradio .is-checked .el-checkbox__label > img{
    opacity: 1;
}


.slider-box{
    padding: 20px 30px;
    position: relative;
    background: rgb(247, 248, 249);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.slider-box:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f8f9+0,ffffff+100 */
background: #f7f8f9; /* Old browsers */
background: -moz-linear-gradient(left,  #f7f8f9 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f7f8f9 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f7f8f9 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

/*包另開視窗的欄位*/
.form-group.link {
    display: flex;
    border: 1px solid #c7cad2;
    border-radius: 4px;
    background: #fff;
}
.form-group.link .el-checkbox{
    background: #eee;
    height: 32px;
    vertical-align: top;
    margin-left: 0;
    margin-right: 0;
    order: 2;
}
.form-group.link .el-checkbox.is-checked{
    background: #72a6d9;
}
.form-group.link .el-checkbox__label{
    line-height: 32px;
    padding: 0 12px 0 11px;
    font-size: 13px;
}
.form-group.link .el-checkbox.is-checked .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #fff;
    font-weight: bold;
}
.form-group.link .el-checkbox__label:before{
    content: "\e976";
    font-family: 'iicon' !important;
    font-size: 12px;
    margin-right: 8px;
}
.form-group.link .is-checked .el-checkbox__label:before{
    content: "\e92a";
}
.form-group.link .el-checkbox__input{
    display: none;
}
.form-group.link .el-input__inner {
    border: none;
    height: 32px;
}
.form-group.link .el-input{
    flex: 1 1 auto;
    margin-bottom: 0;
}

/*詳細設定縮放*/
.style-hide,
.style-show{
  align-items:flex-start;
}
.style-show > .col,
.style-hide > .col{
    transition: width .6s ease-in-out;
}
.col-style{
    margin-left:auto;
}
.col-style .el-input{
    width: auto;
}
.style-show > .col-style .form-box{
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: .6s;
    animation-delay: .2s;
    animation-fill-mode: both;
}
/*區塊*/
.sticky-top{
    position: sticky;
    top: 0px;
    z-index: 10;
    align-self: flex-start;
}
.txt-left{
    text-align: left;
}
.txt-right{
    text-align: right;
}
.txt-center{
    text-align: center;
}
.align-top {
    vertical-align: top;
}
.align-middle {
    vertical-align: middle;
}
.wrapper {
    width: 100%;
    height: 100vh;
}
.container {
    position: relative;
    margin: 0 auto;
}

.clearfix:after,
.row:after,
.row-2:after,
.container:after,
.list-h:after,
.site-page:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
}
.list-inline,
.list-inline ul,
.list-h,
.list-h ul,
.list-v,
.list-v ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list-inline>li,
.list-inline .item {
    display: inline-block;
    vertical-align: top;
}
.list-inline>li a,
.list-inline .item a,
.list-inline>li button,
.list-inline .item button {
    display: inline-block;
    position: relative;
}
.list-h>li,
.list-h .item {
    float: left;
}
.list-v .item a,
.list-v li a
.list-v .item button,
.list-v li button{
    display: block;
    position: relative;
}
.pic {
    text-align: center;
    margin: 0;
    padding: 0;
}
.pic.full img {
    width: 100%;
}
.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    word-break: break-all;
}
.table > .tr {
    display: table-row;
}
.table .td {
    display: table-cell;
}


/*假下拉*/
.dropdown ul{
    display: none;
}
.dropdown .btn,
.dropdown .btn-r,
.dropdown .btn-br,
.dropdown .btn-br-r{
    position: relative;
    padding-right: 35px;
}
.dropdown .btn:after,
.dropdown .btn-r:after,
.dropdown .btn-br:after,
.dropdown .btn-br-r:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -2px;
}
/*假下拉*/


/*卷軸*/
.el-scrollbar__wrap{
    scroll-behavior: smooth;
}
.el-scrollbar__bar{
    bottom: 35px;
}
.el-scrollbar__bar.is-vertical{
    width: 5px;
}
#scroll-main .el-scrollbar__wrap{
    padding-right: 25px;
}
#scroll-model .el-scrollbar__bar.is-horizontal{
    display: none;
}
/*卷軸*/


/*假燈箱*/
.fixed-bg{
    background-color: rgba(3,0,0,0);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    visibility: hidden;
    transition: all .5s ease-in-out;
}
.fixed-bg.active{
    background-color: rgba(3,0,0,.6);
    visibility: visible;
}
/*假燈箱*/

/*圖片裁切*/
.crop_dialog_title{
    font-size: 24px;
    font-weight: bolder;
    line-height:1.2;
}
.crop_dialog_subtitle{
    font-size: 16px;
    color: #444;
}
.crop_dialog .el-dialog__body{
    padding-bottom: 8px;
}
.crop_dialog .cropper-view-box{
    outline: 3px solid #39f!important;
}


.el-message-box{
    max-width: 100%;
}
/*** 共通 end ***/


/*** site-header ***/
#login_div iframe {
    border:none;
}
.site-header{
    position: fixed;
    top: 0;
    right: 0;
    left: 240px;
    /* z-index: 1; */
}
.site-header:hover{
    z-index: 2;
}
.site-header .fastlink,
.site-header .preview_btn,
.site-header .backup_btn{
    display: inline-block;
    vertical-align: middle;
}
.site-header .col-right > *{
    vertical-align: middle;
    float: right;
    letter-spacing: 1px;
    height: 52px;
    line-height: 50px;
    padding: 0 10px 0 14px;
}
.site-header .name{
    font-size: 15px;
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    background: #dde8ef;
    padding-right: 15px;
    padding-left: 0;
    vertical-align: top;
}
.site-header .preview_btn:hover{
    color: #0080da;
    transition: all .15s linear;
}
.site-header .preview_btn:before{
    content: '';
    width: 50px;
    height: 100%;
    position: absolute;
    display: block;
    left: -50px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dde8ef+0,dde8ef+100&0+0,1+100 */
    background: -moz-linear-gradient(left,  rgba(221,232,239,0) 0%, rgba(221,232,239,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(221,232,239,0) 0%,rgba(221,232,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(221,232,239,0) 0%,rgba(221,232,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dde8ef', endColorstr='#dde8ef',GradientType=1 ); /* IE6-9 */
}
.site-header .login_info{
    position: relative;
    text-align: center;
    background: #fbfbfc;
    color: #2c82be;
}
.site-header .login_info .timeout,
.timeout_msg .timeout{
    font-size: 21px;
    font-family: sans-serif;
    letter-spacing: 0;
    font-weight: bold;
}
.site-header .login_info.active{
    background-color: #F56C6C;
    color: #fff;
}
.ckeditor-dialog.el-dialog__wrapper:after{/*遇到 dialog+ckeditor 需加上 .ckeditor-dialog*/
    content:'';
    background: rgb(0, 0, 0);
    opacity: 0.5;
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.el-dialog__title{
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
}
.el-dialog__body{
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    padding-top: 8px;
}
.el-dialog__footer{
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 2;
}
.timeout_msg small{
    font-size: 14px;
}
.timeout_msg .timeout{
    color: #f57c7c;
    font-size: 26px;
    letter-spacing: -1;
    margin: 0 5px;
}
.site-header .logout_btn{
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    background: #2c82be;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
    transition: all .15s linear;
    overflow: hidden;
}
.site-header .login_info:hover .logout_btn{
    right: 0;
}
.site-header .preview_btn{
    padding: 0 15px;
    background: #dde8ef;
    color: #333;
    margin: 0;
}
.site-header .preview_btn,
.site-header .preview_btn i{
    line-height: 50px;
}
.site-header .admin{
    background: #dde8ef;
    padding: 0;
}
.site-header .admin .btn{
    /* font-size: 24px; */
    height: 52px;
    padding-left: 12px;
    padding-right: 0;
    padding-top: 14px;
    font-size: 14px;
}
.admin.dropdown:after{
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0px;
    border-color: #0080da transparent transparent;
    display: inline-block;
    margin-left: 5px;
    margin-right: 10px;
}
.site-header .admin:hover .btn{
    color: #0080da;
}
.site-header .admin .btn span{
    vertical-align: middle;
    margin-left: 4px;
    max-width: 85px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.site-header .admin .btn i{
    font-size: 18px;
    vertical-align: middle;
}
.admin.dropdown .btn:after{
    display: none;
}
.site-header .admin ul{
    position: absolute;
    right: 0;
    top: 65px;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    /* z-index: 2; */
    opacity: 0;
    visibility: hidden;
    display: block;
    line-height: normal;
    padding-top: 10px;
    z-index: 0;
}
.site-header .admin:hover ul{
    top: 42px;
    opacity: 1;
    visibility: visible;
    transition: all .15s ease-in-out;
}
.site-header .admin li{
    border-bottom: 1px solid #aaa;
}
.site-header .admin ul a{
    display: block;
    font-size: 15px;
    padding: 15px 20px;
    /* background: #dde8ef; */
    background: #7d8085;
    width: 150px;
    color: #fff;
}
.site-header .admin ul a:hover{
    background: #2c82be;
    color: #fff;
    transition: all .15s ease-in-out;
}
.site-header .fastlink{
    margin-top: 15px;
    overflow: hidden;
    max-height: 32px;
    background: #eef0f3;
    position: relative;
    padding-top: 2px;
    padding-left: 30px;
    padding-right: 40px;
    padding-bottom: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.site-header .fastlink.active{
    max-height: 100vh;
    transition: all .5s ease-in-out;
}
.site-header .fastlink .title{
    color: #2c82be;
    margin-right: 8px;
    position: absolute;
    top: 3px;
    left: 0;
}
.site-header .fastlink .ii-more1{
    font-size: 19px;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    color: #888;
    position: absolute;
    right: 0;
}
.site-header .fastlink .ii{
    font-size: 20px;
    vertical-align: middle;
    position: relative;
}
.site-header .fastlink .ii,
.fast.active,
.fast:hover{
    color: #ffc000 !important;
}
.site-header .fastlink ul{
    display: inline-block;
    vertical-align: middle;
}
.site-header .fastlink ul li{
    margin-right: 10px;
}
.site-header .fastlink li a{
    padding: 4px 16px;
    line-height: 20px;
    vertical-align: middle;
    background: rgba(255,255,255,.7);
    margin-bottom: 10px;
    transition: all .15s ease-in-out;
    border-radius: 3px;
}
.site-header .fastlink li a i:before{
    content: '';
    width: 1px;
    height: 16px;
    background: #aaa;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}
.site-header .fastlink li a i{
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    color: #2c82be;
    font-style: inherit;
}
.marquee{
    background: #eef0f3;
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    transition: all .5s ease-in-out;
}
.marquee.show{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.marquee .btn-close{
    padding-right: 10px;
    padding-left: 0;
}
.marquee a{
    color: #f57c7c;
    font-weight: bold;
    font-size: 15px;
    padding: 5px 0;
    max-width: calc(100% - 50px);
    overflow: hidden;
    max-height: 100%;
    background: linear-gradient(270deg,#d81159,#e53a40,#ff7c39,#e53a40,#d81159) center/cover;
    color: transparent;
    -webkit-background-clip: text;
    background-size: 800% 800%;
    animation: flowlight 6s ease infinite;
}
@keyframes flowlight{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

.site-nav .menu .menu-a{
    transition: all .1s ease-in-out;
    cursor: pointer;
}
.site-nav .menu ul ul{
    display: none;
}
.site-nav .menu ul > li.active > ul{
    display: block;
    background: #e5f1f9;
}
.site-nav .menu > ul > li > ul > li.active > .menu-a,
.site-nav .menu > ul > li > ul > li > .menu-a.router-link-exact-active{
    color: #fff;
    background: #1e5799;
    background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 59%, #7db9e8 100%);
    background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 59%,#7db9e8 100%);
    background: linear-gradient(45deg, #1e5799 0%,#2989d8 59%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
}
.site-nav .menu > ul > li > ul > li.menuhidden:not(.active):not(:hover) > .menu-a{
    opacity: 0.7;
    background-color: rgb(248 252 255);
}
.site-nav .menu > ul > li > ul > li.active > ul{
    background: #fff;
    display: block;
}
.site-nav .menu > ul > li > ul > li > ul > li.active > .menu-a{
    font-weight: bold;
    color: #111;
}
/*優惠及折扣特例*/
.site-nav .menu > ul > li > ul > li.promotions-menu {
    border-bottom: 2px solid #eef0f3;
}
.site-nav .menu > ul > li > ul > li.promotions-menu > ul {
    background: #fff;
}

/*** site-nav ***/
.site-nav {
    background: rgba(255,255,255,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    border-right: 1px solid #e7eef7;
    transition: all .15s ease-in-out;
}
.site-nav:hover{
    background-color: rgba(255,255,255,1);
}
.site-nav .logo {
    display: block;
    text-align: center;
    padding: 0 0 10px;
    margin: 0 auto;
    min-height: 30px;
}
.site-nav .logo img{
    max-height: 80px;
    max-width: 100%;
}
.site-nav .language{
    padding: 0 30px;
    text-align: center;
}
.site-nav .language .el-select .el-input__inner{
    border-radius: 0;
    border-width: 0 0 1px 0;
    padding-left: 0;
    text-align: center;
    background: transparent;
}
.site-nav .language .el-input{
    font-size: 15px;
}
.site-nav .menu{
    margin-top: 30px;
    padding-bottom: 50px;
}
.site-nav .menu li{
    position: relative;
}
.site-nav .menu > ul > li > ul > li{
    border-bottom: 2px solid #fff;
}
.site-nav .menu .menu-a{
    display: block;
    padding: 6px 8% 6px 16%;
}
.site-nav .menu > ul > li.active.has-child > ul{
    margin-bottom: 20px;
}
.site-nav .menu > ul > li.active > ul{
    border-top: 2px solid #2c82be;
}
.site-nav .menu > ul > li > .menu-a{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}
.site-nav .menu > ul > li > .menu-a:hover{
    color: #2c82be;
}
.site-nav .menu > ul > li.active > .menu-a{
    font-weight: bold;
    color: #2c82be;
}
.site-nav .menu > ul > li > .menu-a{
    vertical-align: middle;
}
.site-nav .menu > ul > li > .menu-a .ii{
    margin-right: 15px;
    font-size: 20px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
/*設定頁改至名稱右側需隱藏 ↓*/
/* .site-nav .menu .fast{
    position: absolute;
    left: 15%;
    top: 8px;
    color: #ddd;
}
.site-nav .menu ul ul li .menu-a{
    padding-left: 29%;
} */
/*設定頁改至名稱右側需隱藏 ↑*/

/*設定頁改至名稱右側*/
.site-nav .menu .set{
    position: absolute;
    right: 0;
    top: 0;
    width: 46px;
    background: #aaa;
    color: #888;
    font-size: 17px;
    background: transparent;
    transition: all .2s ease-in-out;
    padding: 9px 0;
    text-align: center;
}
.site-nav .menu > ul li .set{
    color: #a7aab1;
    background: transparent;
}
.site-nav .menu > ul li .set.userwebtech{
    background-color: rgb(255, 244, 225);
}
.site-nav .menu > ul ul li.active > .set-out .set,
.site-nav .menu > ul ul li:hover > .set-out .set{
    color:#d4dfe7;
    background: transparent;
}
.site-nav .menu > ul li:hover > .set:hover{
    color:rgba(64, 158, 255, 1);
    background: transparent;
}
.site-nav .menu > ul li li:hover > .set-out .set,
.site-nav .menu > ul li li.active > .set-out .set{
    color:#fff;
}
.site-nav .menu > ul li li > .set .ii{
    z-index: 1;
    position: relative;
}
.site-nav .menu ul ul li .menu-a{
    padding-right: 46px;
}
/*設定頁改至名稱右側 end*/


/*** search-box ***/
.site-search .search-box{
    position: relative;
    display: inline-block;
    margin-right: 10px;
    max-width: 360px;
    /* width: calc(100% - 210px); */
}
.site-search .control-box {
    width: 100%;
    padding: 0;
    border-color: #a7aab1;
    overflow: hidden;
    height: 32px;
    transition: all .15s ease-in-out;
}
.site-search .arrow{
    display: block;
    width: 30px;
    height: 100%;
    position: absolute;
    right: 69px;
    top: 0;
}
.site-search .arrow:before{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #7d8085 transparent transparent transparent;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    left: 10px;
}
.site-search .search-box ul{
    position: absolute;
    top: 100%;
    left: 15px;
    margin: 0;
    list-style: none;
    padding: 0;
    background: #fff;
    width: calc(100% - 90px);
    z-index: 1;
    border: 1px solid #e7eef7;
    box-shadow: 0 0 2px rgba(20%, 20%, 40%, 0);
    max-height: 0;
    overflow: hidden;
    transition: all .15s ease-in-out;
}
.site-search .search-box ul.active{
    box-shadow: 0 0 2px rgba(20%, 20%, 40%, 0.2);
    max-height: 32px;
}
.site-search .search-box ul li button{
    padding: 8px 30px;
    width: 100%;
    text-align: left;
}
.site-search .search-box ul li:hover button{
    background: #e5f1f9;
}




.site-search .el-input .el-input__inner{
    border: none;
    background: none;
    padding-left: 38px;
    padding-right: 98px;
    line-height: 30px;
    height: 30px;
    width: 100%;
    transition: all .15s ease-in-out;
    font-size: 15px;
}
.site-search .search-box .el-input__inner:focus { background-color: #fff;}
.site-search .control-box .ii{
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -6px;
    z-index: 1;
    pointer-events: none;
}
.site-search .search_btn{
    border-left: 1px solid #bbb;
    background: #edeeef;
    /* font-size: 13px; */
    height: 30px;
    position: absolute;
    right: 0;
    margin: 0;
    letter-spacing: 1px;
    padding-left: 20px;
    padding-right: 20px;
    transition: all .15s ease-in-out;
}
.site-search .other_btn{
    border-color: #bbb;
    color: #888;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all .15s ease-in-out;
}
.site-search .search-box .search_btn{
    background: #a7aab1;
    color: #fff;
}
.site-search .search-box:hover .search_btn,
.site-search .other_btn.active{
    background: #2c82be;
    color: #fff;
    border-color: #2c82be;
}
.site-search .btn-br-r{
    height: 32px;
}
/*詳細搜尋*/
.search-det{
    margin-top: 30px;
    padding: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.main-header .search-det{
    background: #fff;
    margin-top: -15px;
    padding: 0 30px;
    border: 1px solid #e7eef7;
    box-shadow: 0 0 5px rgba(20%, 20%, 40%, 0.2);
}
.search-det.active{
    padding: 0;
    opacity: 1;
    /* max-height: 115px; */
    max-height: 100%;
    padding: 20px 30px 0;
}
.main-in .search-det.active{
    background: #f5f5f5;
    border: 1px solid #e4e7ed;
}
.search-det > div,
.search-det > button{
    opacity: 0;
}
.search-det.active > div,
.search-det.active> button{
    animation-name: fadeIn;
    animation-duration:.3s;
    animation-delay: .3s;
    animation-fill-mode: both;
}
.search-det .form-group{
    margin-right: 26px;
    vertical-align: middle;
    float: left;
}
.search-det .form-group-outer{
    max-width: calc(100% - 150px);
    display: inline-block;
    vertical-align: top;
}
.search-det .el-checkbox__label{
    white-space: pre-wrap;
}
.search-det .control-label{
    width: auto;
    vertical-align: middle;
}
.search-det .control-box{
    width: auto;
    display: block;
}
.search-det .btn-box{
    display: inline-block;
    vertical-align: top;
    margin: 25px 0;
}
.search-det .search_btn{
    width: 30px;
    height: 30px;
    background: #a7aab1;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    /* margin-bottom: 28px; */
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
}
.search-det .search_btn .ii{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -7px;
    margin-top: -7px;
    color: #fff;
}
.site-search .search_de{
    font-size: 15px;
    cursor: pointer;
}
.site-search .search_de:after{
    content: "\e902";
    font-family: 'iicon' !important;
    margin-left: 15px;
}


/*** site-main ***/
.site-main{
    position: fixed;
    top: 54px;
    right: 15px;
    left: 240px;
    bottom: 0;
}
.main-title{
    font-size: 24px;
    margin-right: 20px;
    margin-top: 60px;
    font-weight: 600;
    letter-spacing: 3px;
}
.main-title,
.breadcrumb{
    display: inline-block;
}
.breadcrumb{
    font-size: 13px;
}
.breadcrumb li{
    color: #888;
}
.breadcrumb li:first-child a{
    font-size: 15px;
    margin-top: 5px;
}
.breadcrumb li:first-child:before{
    display: none;
}
.breadcrumb li:before{
    content: '/';
    margin: 0 5px;
}
.breadcrumb li:last-child a{
    color: #555;
}
.main-header .ctrl-box{
    margin-top: 20px;
    margin-bottom: 30px;
}
.main-title .histroyBack{
    padding: 4px;
    color: #a7aab1;
    background: transparent;
    border-radius: 50%;
    transition: all .2s linear;
}
.main-title .histroyBack:hover{
    color: #000;
    background: #fff;
}
.main-title .fast{
    font-size: 22px;
    color:#a7aab1;
}


.main-in{
    background: #fff;
    min-height: calc(100% - 220px);
    margin-top: 20px;
    padding: 35px 30px;
    border: 1px solid #fff;
    box-shadow: 0 0 5px rgba(50%, 50%, 50%, 0.5);
    border-radius: 8px;
    overflow: hidden;
    /* animation-name: fadeIn;
    animation-duration: .2s;
    animation-delay: .1s;
    animation-fill-mode: both; */
    overflow: visible;
}
.main-in,
.panel-main{
    opacity: 0;
    animation-name: fadeInUp;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-delay: .4s;
    -webkit-animation-delay: .4s;
}
.list-data{
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: .5s;
    animation-fill-mode: both;
}
.main-in.el-tabs{
    padding: 0;
}
.main-in.el-tabs > .el-tabs__content{
    min-height: calc(100% - 160px - 50px);
    padding: 50px 30px;
    overflow: visible;
}
.main-in.el-tabs > .el-tabs__header{
    background: #f5f5f5;
}
.main-in.el-tabs.iscate > .el-tabs__header{
    background: #edf6fc;
}
.main-in.el-tabs > .el-tabs__header .el-tabs__item{
    height: 50px;
    line-height: 50px;
    letter-spacing: 2px;
    color: #888;
    overflow: hidden;
}
.main-in.el-tabs > .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
.main-in.el-tabs > .el-tabs__header .el-tabs__item.is-active{
    color: #0080da;
}
.main-in.el-tabs > .el-tabs__header .el-tabs__item .nu{
    background: #888;
    color: #fff;
    padding: 1px 10px;
    letter-spacing: 0;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
}
.main-in.el-tabs > .el-tabs__header .el-tabs__item .nu.bg1{
    background: #f57c7c;
    color: #fff;
}
.main-in.el-tabs > .el-tabs__header .el-tabs__item:not(.is-disabled):hover .nu,
.main-in.el-tabs > .el-tabs__header .el-tabs__item.is-active .nu{
    background-color: #0080da;
}
.col-title{
    line-height: 21px;
    margin-bottom: 30px;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 19px;
    color: #666;
}
.sub-title{
    font-size: 15px;
    line-height: 20px;
    color: #606266;
}
.col-style{
    border: solid #b4d1ee;
    border-width: 0 1px 1px;
    padding: 0 36px;
    height: auto;
}
.col-style .col-title{
    background: #edf6fc;
    color: #555;
    padding: 4px 50px 9px 15px;
    margin: 0 -36px;
    margin-bottom: 0;
    border: solid #b4d1ee;
    border-width: 1px 0 0;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0;
    position: relative;
}
.col-style .col-title:before{
    content: "\e924";
    font-family: 'iicon' !important;
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    top: 5px;
    margin-right: 10px;
    transition: transform .3s ease-in-out;
    transform:rotate(180deg);
}
.col-style .col-title.active{
    border-bottom: 1px solid #b4d1ee;
}
.col-style .col-title.active:before{
    transform:rotate(90deg);
}
.col-style .form-box{
    margin: 30px 0;
    padding: 0;
}

.webtecheditor_area{
    margin-bottom: 10px;
}

/*圖片上傳*/
.pic-upload{
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
}
.full .pic-upload{
    background: #fff;
    padding: 15px;
}
.pic-upload-left{
    flex: 0 0 auto;
    width: 180px;
    margin-right: 15px;
}
.pic-upload-right{
    min-width: 175px;
    width: calc(100% - 195px);
}
.pic-upload-left .delete{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    font-size: 20px;
    visibility: hidden;
    background: rgba(255,255,255,.8);
    transition: all .15s ease-in-out;
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.pic-upload-left .delete i{
    align-self: center;
}
.pic-upload-left:hover .delete{
    opacity: 1;
    visibility: visible;
}
.pic-upload-figure{
    position: relative;
    width: 100%;
    max-height: 180px;
    margin: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    background-color: #f5f8f8;
    border-radius: 4px;
}
.pic-upload-figure::before{
    content: "";
    display: block;
    padding-top: 100%;
}
.pic-upload .ex{
    color: #43a3e6;
}
.pic-upload .ex .br{
    display: inline-block;
}
.pic-upload .ex + .info{
    margin-top: 12px;
}
.pic-upload .ex + .info b{
    margin-bottom: 5px;
    display: inline-block;
    color: #000;
    word-break: break-all;
}
.el-form-item__content .pic-upload{
    line-height: 1.8em;
}
.pic-upload.no-info .pic-upload-left{
    width: 100%;
}
.pic-upload.no-info .pic-upload-figure{
    max-height: none;
}
.pic-upload.no-info .cover{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all .25s ease-in-out;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    font-size: 24px;
    text-align: center;
}
.pic-upload.no-info .pic-upload-left:hover .cover{
    opacity: 1;
    background: rgba(100,100,100,.9);
  }
.pic-upload.no-info .pic-upload-left .load{
    background:#fff;
}
.pic-upload.no-info .pic-upload-left .load,
.pic-upload.no-info .pic-upload-left .upload{
    font-size: 16px;
    margin: 5px 0;
}
.upload-ctrl{
    text-align: center;
    margin-top: 2%;
}
.upload-ctrl .btn-box{
    margin-top: 15px;
    position: relative;
}
.upload-ctrl .clear{
    position: absolute;
    bottom: 0;
    right: 0;
    letter-spacing: 1px;
}
.pic-upload-alt .el-input .el-input__inner{
    padding: 0 8px;
}
.pic-upload-right .btn-box{
    display: flex;
}

.pic-upload-right .btn{
    margin: 0;
    flex: 0 1 auto;
}

.pic-upload-right .btn.load{
    margin-right: 10px;
}



/*表單收合*/
.rowopen{
    opacity: 1;
    max-height: 540px; /*視實際需要可以加高*/
    transition: all .2s ease-in-out, max-height .3s ease-in-out;
}
.rowclose{
    opacity: 0;
    max-height: 0;
    transition: all .2s ease-in-out, max-height .3s ease-in-out;
}


/*表單*/
.is-error input,
.is-error textarea {
    background-color: rgba(245, 124, 124, .1) !important;
}
.form-group,
.form-group .form-group{
    margin-bottom: 25px;
}
.form-group.full .el-input__inner{
    border: none;
    margin-bottom: 0;
}
.form-group.full.inline .control-box{
    width: calc(100% - 80px);
}
.form-group.full .form-input{
    display: inline-block;
    border-radius: 4px;
    border:2px solid #bbbbbb;
}
.form-group.full .el-select{
    border-radius: 4px;
    border:1px solid #bbbbbb;
}
.form-group.inline{
    display: inline-block;
}
.tabctrl .el-tabs__item{
    padding: 8px 20px 8px 20px;
    height: auto;
}
.el-form-item__content{
    line-height: initial;
}
.tabctrl .form-input{
    border: none;
    background: transparent;
    padding: 5px 8px;
    max-width: 100px;
    transition: all .15s ease-in-out;
}
.tabctrl .form-input:hover{
    background: #f3f3f3;
}
.control-label{
    /* width: 130px; */
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 15px;
    vertical-align: top;
    font-size: 15px;
}
.control-label.ex{
    width: 100%;
}
.control-box{
    /* width: calc(100% - 185px);
    display: inline-block; */
    position: relative;
}
.inline .control-label,
.inline .control-box{
    width: auto;
}
.inline .control-label{
    margin-bottom: 30px;
}
.el-radio-group{
    margin-bottom: 10px;
}
.el-input .el-input__inner{
    height: 34px;
    outline: 0;
    padding-left: 15px;
}
.el-date-editor.el-input__inner{
    height: 34px;
    line-height: 34px;
}
.el-date-editor .el-range-separator{
    width: 25px;
}
.el-input--prefix .el-input__inner{
    padding-left: 35px;
    padding-right: 15px;
}
.el-input__icon{
    line-height: inherit;
}
.el-select-dropdown__item,
.el-radio,
.el-switch__label,
.el-checkbox{
    color: #888;
}
.el-radio__label{
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    line-height: 25px;
}
.el-radio__label img{
    vertical-align: top;
}
.el-radio__inner{
    width: 18px;
    height: 18px;
}
.el-radio__inner::after{
    width: 8px;
    height: 8px;
}
.el-radio__input.is-checked .el-radio__inner,
.el-switch.is-checked .el-switch__core{
    border-color: #72a6d9;
    background: #72a6d9;
}
.col-title.userwebtech,
.sub-title.userwebtech,
.userwebtech.el-form-item > .el-form-item__label{
    position: relative;
}
.col-title.userwebtech:before,
.sub-title.userwebtech:before,
.userwebtech.el-form-item > .el-form-item__label:before{
    content: 'w';
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    text-align: center;
    border: 1px solid #e6a23c;
    border-radius: 100%;
    color: rgb(255, 192, 0);
    font-weight: bold;
    line-height: 16px;
    font-size: 13px;
    letter-spacing: 0;
    font-style: inherit;
}
.col-title.userwebtech,
.sub-title.userwebtech,
.userwebtech.el-form-item > .el-form-item__label{
    padding-left: 30px;
}
i.userwebtech{
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 10px;
    margin-top: -10px;
    text-align: center;
    border: 1px solid #e6a23c;
    border-radius: 100%;
    color: rgb(255, 192, 0);
    font-weight: bold;
    line-height: 16px;
    font-size: 13px;
    letter-spacing: 0;
    font-style: inherit;
}
i.userwebtech:before{
    content: 'w';
}
.userwebtech_area{
    position: relative;
    background-color: rgba(255, 192, 0, 0.035);
}
.userwebtech_area::before{
    content: '';
    position: absolute;
    border: rgb(255, 192, 0) 1px solid;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;
    z-index: -1;
}
.el-checkbox__inner{
    width: 18px;
    height: 18px;
}
.el-checkbox__inner::after{
    border-width: 0 2px 2px 0;
    height: 9px;
    left: 5px;
    top: 1px;
    width: 5px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner{
    border-color: #72a6d9;
    background: #72a6d9;
}
.form-group .required:after {
    content: '*';
    display: inline-block;
    vertical-align: middle;
    color: #f57c7c;
    margin: 0 0 3px 8px;
    font-size: 17px;
}
/*表單*/


/*列表控制項*/
.other-ctrl{
    display: inline-block;
}
.other-ctrl.active,
.other-ctrl:hover{
    padding-right: 15px;
}
.other-ctrl .form-select{
    margin: 0 5px;
}
.other-ctrl .el-input{
    margin-bottom: 0;
}
.other-ctrl.active .form-select{
    animation-name: shadow;
    animation-fill-mode: both;
}
.other-ctrl .form-select .el-input__inner{
    display: none;
}
.other-ctrl.active .form-select .el-input__inner{
    display: block;
    border-width: 2px;
    animation-name: shadow;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
@keyframes shadow{
    0%{
        border-color: rgba(64, 158, 255, .3);
    }
    50%{
        border-color: rgba(64, 158, 255, 1);
    }
    100%{
        border-color: rgba(64, 158, 255, .3);
    }
}



.fixed-bottom .other-ctrl.active,
.fixed-bottom .other-ctrl:hover{
    background: #eef0f3;
    border-color: transparent;
}
.fixed-bottom .page-info{
    position: absolute;
    right: 60px;
    color: transparent;
    bottom: 12px;
}
.other-ctrl .el-input__inner{
    margin-bottom: 0;
}
.other-ctrl .btn-box{
    height: 30px;
    max-width: 0;
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    transition: all .6s ease-in-out;
}
.other-ctrl.active .btn-box,
.other-ctrl:hover .btn-box{
    height: 30px;
    opacity: 1;
    max-width: 800px;
    max-width: calc(100% - 120px);
}
.other-ctrl.new.active .btn-box,
.other-ctrl.new:hover .btn-box{
    /*因表單隱藏存為範本與範本維護兩顆按鈕會導致前面按鈕顯示不完全，暫時以此修改，事後修改html部分請以"other-ctrl new"查找*/
    max-width: 800px;
}

.other-ctrl .form-select{
    max-width: 140px;
    vertical-align: middle;
}
.other-ctrl .el-input .el-input__inner,
.other-ctrl .el-input__icon{
    line-height: 30px;
    height: 30px;
}
.other-ctrl .el-input .el-input__inner{
    height: 30px;
}
.other-ctrl .other-btn{
    height: 38px;
    border: 1px solid #ccc;
    transition: all .2s ease-in-out;
    padding-left: 36px;
}
.other-ctrl.active .other-btn,
.other-ctrl:hover .other-btn{
    border: 1px solid transparent;
    color: inherit;
    padding-left: 16px;
    padding-right: 36px;
}
.other-ctrl .other-btn:before{
    content: "\e900";
    font-family: 'iicon' !important;
    margin-left: 8px;
    font-size: 12px;
    position: absolute;
    left: 8px;
    transition: all .2s ease-in-out;
}
.other-ctrl.active .other-btn:before,
.other-ctrl:hover .other-btn:before{
    left: calc(100% - 30px);
}
.other-ctrl .el-input__inner{
    border-color: #888;
}



.style-ctrl li{
    vertical-align: middle;
    margin-left: 15px;
}
.style-ctrl li .fast{
    height: 28px;
    vertical-align: middle;
    padding: 0 0 0 10px;
    color: #bbb;
    background: rgba(255,255,255,.7);
}
.style-ctrl li .btn{
    background: rgba(255,255,255,.7);
    margin: 0;
    margin-left: 10px;
    transition: all .15s ease-in-out;
}
.style-ctrl li.active .btn,
.style-ctrl li.active .fast{
    color: #fff;
    background: #2c82be;
}
.style-ctrl li .btn:hover{
    color: #fff;
    background-color: #2c82be;
}
.style-ctrl button:after{
    color: #7d8085;
    font-size: 20px;
    font-family: 'iicon' !important;
    transition: all .15s ease-in-out;
}
.style-ctrl .active button:after{
    color: #a7aab1;
}
.style-ctrl button:hover:after{
    color: #2c82be;
}
.list1 button:after{
    content: "\e93c";
}
.list2 button:after{
    content: "\e93b";
}
/*列表控制項*/


/*列表內控制*/
.drag-box{
    position: relative;
    display: inline-flex;
    border:1px solid #edeeef;
    max-width: 90px;
    margin: 0 auto;
    text-align: left;
    transition: all .15s ease-in-out;
}
.drag:hover .drag-box{
    border-color: #72a6d9;
    box-shadow: 1px 1px 3px rgba(20%,20%,40%,0.2);
}
.drag input{
    width: calc(100% - 30px);
    border: none;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
}
.drag .drag-btn{
    width: 30px;
    height: 30px;
    background: #edeeef;
    color: #aaa;
    font-size: 18px;
    text-align: center;
    transition: all .15s ease-in-out;
}
.drag .drag-btn:hover{
    background: #72a6d9;
    color: #eef0f3;
}
.list-data .item-in .ctrl .other{
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -25px;
    overflow: hidden;
    height: 47px;
    width: 100%;
    background: transparent;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    transition: all .5s ease-out;
}
.list-data .item-in .ctrl .other.active{
    width: 310px;
    box-shadow: 1px 1px 3px rgba(20%,20%,40%,0.2);
    background: rgba(255,255,255,1);
    transition: all .2s ease-in;
}
.list-data .item-in .ctrl .other .other-btn{
    display: block !important;
}
.list-data .item-in .ctrl .other-btn:hover{
    display: none;
    color: rgba(64, 158, 255, 1);
}
.list-data .item-in .ctrl .other-btn:hover:before{
    display: none;
}
.list-data .active .item-in .ctrl .other.active{
    background: #fff;
    transition: all .15s ease-in-out;
}
.list-data .item-in .ctrl button,
.list-data .item-in .ctrl a{
    float: right;
    vertical-align: middle;
    height: 47px;
    position: relative;
    color: #888;
}
.list-data .item-in .ctrl button i,
.list-data .item-in .ctrl a i{
    position: relative;
    z-index: 1;
    line-height: 47px;
}
.list-data .item-in .ctrl button .ii-link1,
.list-data .item-in .ctrl a .ii-link1{
    font-size: 19px;
}
.list-data .item-in .ctrl button:before,
.list-data .item-in .ctrl a:before{
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
    display: block;
    z-index: 0;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    background: rgba(255,255,255,0);
    box-shadow: 1px 1px 3px rgba(20%,20%,40%,0);
}
/*列表內控制*/



.list-data,
.list-img{
    margin-bottom: 25px;
    margin-top: 25px;
}
.list-img.active{
    animation-name: fadeIn;
    animation-duration:.3s;
    animation-delay: .1s;
    animation-fill-mode: both;
}
.list-img.active > .el-checkbox{
    display: none;
}
.list-data .list-con,
.list-img .list-con{
    font-size: 13px;
}
.list-img .list-con{
    transition: all .15s ease-in-out;
}
.list-data .list-con .quty.re:after,
.list-img .list-con .quty.re:after{
    content: '';
    width: 5px;
    height: 5px;
    background: #f57c7c;
    display: inline-block;
    vertical-align: top;
    margin-left: 3px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
}
.list-img .list-con .quty.re:after{
    margin-left: 2px;
    margin-top: 4px;
}


/*資料列表*/
.list-data .list-title{
    position: sticky;
    top: 0;
    z-index: 2;
}
.readflag:after{
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #f89595;
    border-radius: 30px;
}
.list-data ul{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.list-data.txt-left ul{
    text-align: left;
}
.list-title > li,
.list-con > li .item-in{
    width: 100%;
    min-height: 40px;
    transition: all .1s ease-in-out;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}
.list-data .list-title > li {
    background: #edeeef;
    border-bottom: 2px solid #fff;
}
.list-data.iscate .list-title > li {
    background: #f0f8fd;
}
.list-data .list-con{
    border-bottom: 1px solid #edeeef;
}
.list-data .list-con > li{
    background: #fff;
    border-bottom: 1px solid #fff;
}
.list-data .list-con > li:nth-child(even){
    /* background: #f9f9f9; */
    background: #fbfbfc;
}
.list-title > li > div,
.list-con .item-in > div{
    padding: 20px 15px;
    width: 0; /*避免flex內容將欄位撐寬*/
    flex: 1 1 100px; /*給一個基本空間，避免跑版*/
}
.list-title > li > div{
    padding: 0 15px; /*標題y内距0*/
}
/*常用欄位尺寸*/
.list-data div.ch {
    flex: 0 0 50px;
}
.list-data div.locked{
    flex: 0 0 52px;
}
.list-data div.id,
.list-data div.quty {
    flex: 0 0 60px;
}
.list-data div.pic {
    flex: 0 0 110px;
}
.list-data div.drag,
.list-data div.date,
.list-data div.status {
    flex: 0 0 120px;
}
.list-data div.title {
    flex: 2 1 200px;
    min-width: 100px; /*會員清單*/
}
.list-data div.cate {
    flex: 1 0 100px;
}
.list-data div.ctrl {
    position: relative;
    flex: 0 0 185px;
}
.list-data div.ctrl-1btn{
    flex: 0 0 calc(60px + 15px + 15px);
}
.list-data div.ctrl-2btns{
    flex: 0 0 calc(60px * 2 + 15px + 15px);
}
.list-data div.ctrl-3btns{
    flex: 0 0 calc(60px * 3 + 15px + 15px);
}
.list-data div.ctrl-4btns{
    flex: 0 0 calc(60px * 4 + 15px + 15px);
}
.list-data .list-con .ctrl button,
.list-data .list-con .ctrl a{
    float: right;
    font-size: 22px;
    width: 60px;
    text-align: center;
}
.list-data .list-con .ctrl button.disabled{
    pointer-events: none;
    opacity: 0.4;
}
.list-data .list-con > li .item-in > div.status{
    padding-top: 10px;
    padding-bottom:  10px;
}
.list-data .title,
.list-data .list-con .ctrl{
    text-align: left;
}

/*以下為要指定表格寬度的class，為了蓋掉上面的預設權重，需要寫比較多*/
.list-data div.flex-30{
    flex: 0 0 30px;
}
.list-data div.flex-40{
    flex: 0 0 40px;
}
.list-data div.flex-50{
    flex: 0 0 50px;
}
.list-data div.flex-60 {
    flex: 0 0 60px;
}
.list-data div.flex-80 {
    flex: 0 0 80px;
}
.list-data div.flex-90 {
    flex: 0 0 90px;
}
.list-data div.flex-100 {
    flex: 0 0 100px;
}
.list-data div.flex-110{
    flex: 0 0 110px;
}
.list-data div.flex-120 {
    flex: 0 0 120px;
}
.list-data div.flex-130 {
    flex: 0 0 130px;
}
.list-data div.flex-140 {
    flex: 0 0 140px;
}
.list-data div.flex-150 {
    flex: 0 0 150px;
}
.list-data div.flex-160 {
    flex: 0 0 160px;
}
.list-data div.flex-180 {
    flex: 0 0 180px;
}
.list-data div.flex-200 {
    flex: 0 0 200px;
}
/*以下的auto可以棄用，因為預設已經是 flex: 1 1 auto,*/
.list-data div.flex-auto,
.list-data div.flex-auto-x2 {
    flex: 2 1 200px;
    min-width: 100px; /*會員清單*/
}

/*當寬度較小列表需使用卷軸時某些欄位至左的樣式 (ex產品規格組合清單)*/
.list-data .sticky-data{
    position: sticky;
    left:0;
    z-index:2;
  }
.list-data.list-sticky .list-title li{
    align-items: stretch;
    min-height:inherit;
}
.list-data.list-sticky .list-title > li > div{
    padding: 10px 15px;
}
.list-data.list-sticky .list-title .sticky-data{
    background:#edeeef;
}
.list-data.list-sticky .list-con .sticky-data{
    background:#fff;
}
.list-data.list-sticky .list-con > li:nth-child(even) .sticky-data{
    background: #fbfbfc;
}

/*拖曳樣式*/
.list-data .list-con > .fallback{
    background: transparent !important;
    border-color: transparent;
    opacity: 1 !important;
}
.list-data .list-con .fallback .item-in > div{
    opacity: 0;
}
.list-data .list-con .fallback .item-in > .drag{
    opacity: 1;
}
.list-data .list-con .fallback .item-in > .drag .drag-btn{
    background: #0080da;
    color: #fff;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
}
.list-data .list-con .fallback .item-in > .drag .drag-btn:after{
    content: '拖曳修改排序';
    font-size: 14px;
    margin-left: 5px;
    vertical-align: middle;
}
.list-data .list-con .fallback .item-in > .drag .drag-btn i{
    vertical-align: middle;
}
/*拖曳樣式*/
.ch .el-checkbox-group{
    padding-top: 5px;
}
.ch .el-checkbox__label{
    display: none;
}
.ch .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
    height: 3px;
    top: 7px;
}
.list-data .status div i{
    width: 1px;
    height: 8px;
    display: block;
    margin: 2px auto;
    background: #999;
}
.list-data .status.t-c1 div i{
    background: #f89595;
}
.list-data .list-con .title{
    font-size: 15px;
}
.list-con .cate .el-tooltip{
    padding: 0;
    border: none;
    background: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-img .list-con .cate .el-tooltip{
    max-width: calc(100% - 80px);
}
.list-data .list-con .cate .el-tooltip{
    width: 100%;
}
.list-con .cate .el-tooltip:focus,
.list-con .cate .el-tooltip:hover {
    color: inherit;
}
.list-data .list-con .title a{
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
    position: relative;
    text-decoration: underline;
}
.list-data .list-con .icon-box .ii{
    position: relative;
    top: -2px;
    margin-right: 10px;
}
.list-data .title a:before{
    font-family: 'iicon' !important;
    /* margin-left: 15px; */
    margin-right: 15px;
    font-size: 18px;
    vertical-align: middle;
    top: -2px;
    position: relative;
    display: inline-block;
}
.list-data .list-con .quty.re{
    position: relative;
}
.list-data .li-folder .title a:before{
    content: "\e934";
    color: #999;
}
.list-data .li-sort .title a:before{
    content: '\e937';
}
.list-data .sortable{
    cursor: pointer;
}
.list-data .sortable.isup,
.list-data .sortable.isdown{
    color: #2c82be;
}
.list-data .sortable:after{
    margin-left: 10px;
    content: '';
    display: inline-block;
    vertical-align: middle;
}
.list-data .sortable.isleaf:after{
    width: 10px;
    height: 2px;
    background: #aaa;
}
.list-data .sortable.isup:after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #2c82be transparent;
}
.list-data .sortable.isdown:after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #2c82be transparent transparent transparent;
}
.list-data .list-con .pic{
    position: relative;
}
.list-data .pic .editpic_btn{
    vertical-align: middle;
    position: relative;
    color: #666;
    font-size: 15px;
    border:1px solid #888;
    padding:8px 10px;
    border-radius: 3px;
    letter-spacing: 1px;
}
.list-data .pic .cover .editpic_btn{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top:-17px;
    margin-left: -43px;
    color: #fff;
    border:1px solid #fff;
}
.list-data .pic .editpic_btn > *{
    vertical-align:middle;
}
.list-data .pic .editpic_btn .ii{
    font-size:18px;
}
/*資料列表*/


/*圖片列表*/
.list-img .item-in > div{
    width: auto;
    padding: 0;
}
.list-img li{
    width: calc(100% / 6);
    margin-bottom: 20px;
    position: relative;
}
.list-img .list-title{
    display: none;
}
.list-img .list-con{
    list-style: none;
    padding: 0;
    margin: 0 -1%;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.list-img .list-con:after{
    content: '';
    display: block;
    clear: both;
}
.list-img .list-con .id{
    display: none;
}
.list-img .date:before,
.list-img .quty:before,
.list-img .status:before,
.list-img .cate:before{
    content: attr(data-title);
    display: inline-block;
}
.list-img .pic{
    width: 100%;
    max-width: 200px;
    margin: 0 auto 10px;
    position: relative;
    background: #edeeef;
}
.list-img .pic a{
    width: 100%;
    height: 100%;
    display: block;
}
.list-con .pic img{
    max-width: 100%;
}
.list-con .pic .cover{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    color: #fff;
    transition: all .25s ease-in-out;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}
.list-con .pic:hover .cover{
    opacity: 1;
    background: rgba(100,100,100,.9);
}
.list-img .pic .icon-box{
    position: absolute;
    bottom: 0;
    right: 0;
    background: #f5f8f8;
    border-radius: 5px 0 0 0;
}
.list-img .pic .icon-box .ii{
    margin-left: 10px;
    padding-top: 8px;
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
}
.list-img .title a{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*指定行數...取代*/
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
    font-size: 15px;
    position: relative;
    height: 44px;
}
.list-con .status{
    /* white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; */
}
/* .list-con .status span, */
.list-con .status.t-c1 div{
    color: #f57c7c;
}
.list-con .status div{
    /* letter-spacing: 0;
    display: inline; */
}
.list-img .status i:before{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent #666;
    display: inline-block;
    margin: 0 4px 0 7px;
    position: relative;
    top: -1px;
}
.list-img .form-box{
    margin-bottom: 10px;
}
.list-img .form-group{
    margin-bottom: 5px;
}
.list-img .list-con > li{
    padding: 0 1%;
}
.list-img .list-con > li .item-in{
    display: block;
    max-width: 235px;
    margin: 0 auto;
    padding: 28px 20px 20px 15px;
    position: relative;
    transition: all .1s ease-in-out;
}
.list-img li.active .pic .icon-box{
    background-color: #EDF6FC;
}
.list-img .li-folder .item-in{
    background: url(../img/list_right.png) top right no-repeat,url(../img/list_bottom.png) bottom left no-repeat,url(../img/list_top_sort.png) top left no-repeat,url(../img/list_top.png) top repeat-x,#F5F8F8;
}
.list-img .li-sort .item-in{
    background: url(../img/list_right.png) top right no-repeat,url(../img/list_bottom.png) bottom left no-repeat,url(../img/list_top.png) top left no-repeat,#F5F8F8;
}
.list-img .li-data .item-in{
    background: url(../img/list_top.png) top no-repeat,#F5F8F8;
    padding-left: 17px;
    padding-right: 18px;
}
.list-img .li-folder.active .item-in{
    background: url(../img/list_right_.png) top right no-repeat,url(../img/list_bottom_.png) bottom left no-repeat,url(../img/list_top_sort_.png) top left no-repeat,url(../img/list_top_.png) top repeat-x,#EDF6FC;
}
.list-img .li-sort.active .item-in{
    background: url(../img/list_right_.png) top right no-repeat,url(../img/list_bottom_.png) bottom left no-repeat,url(../img/list_top_.png) top left no-repeat,#EDF6FC;
}
.list-img .li-data.active .item-in{
    background: url(../img/list_top_.png) top no-repeat,#EDF6FC;
}
.list-img .ch{
    position: absolute;
    top: 38px;
    left: 25px;
    z-index: 1;
}
.list-img .ch .el-checkbox{
    opacity: .8;
}
.list-img .ch .is-checked{
    opacity: 1;
}
.list-img .ctrl{
    margin-top: 10px;
    position: relative;
    min-height: 32px;
}
.list-img .ctrl button{
    color: #7E8084;
}
.list-img .ctrl:after{
    content: '';
    display: block;
    clear: both;
}
.list-img .ctrl .other{
    position: absolute;
    left: 0;
    top: 0;
    max-width: 110px;
    z-index: 3;
    background: transparent;
}
.list-img .ctrl .other.active{
    background: #fff;
    padding-right: 5px;
    max-width: 200px;
    box-shadow: 1px 1px 3px rgba(20%,20%,40%,0.2);
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
}
.list-img .ctrl .other > button,
.list-img .ctrl .other > a{
    font-size: 20px;
    width: 35px;
    vertical-align: middle;
    height: 32px;
    float: right;
    text-align: center;
}
.list-img .ctrl .other > button.disabled{
    pointer-events: none;
    opacity: 0.4;
}
.list-img .ctrl .other > button i,
.list-img .ctrl .other > a i{
    line-height: 32px;
}
.list-img .ctrl .drag{
    float: right;
}
.list-img .drag-box{
    max-width: 80px;
}
.list-img .drag input{
    padding: 0 6px;
    font-size: 12px;
}


.list-img .btn-new{
    text-align: center;
    color: #C9CBCF;
    display: block;
    background:rgba(235, 244, 251,0);
    transition: all .15s ease-in-out;
    /* position: absolute;
    top: 11px;
    right: 0;
    bottom: 0;
    left: 0; */
    max-width: 235px;
    min-height: 250px;
    width: 100%;;
    margin: 0 auto;
    /* padding-top: 60%; */
    height: 100%;
    border: 1px dashed #ccced2;
}
.list-img .btn-new .ii{
    font-size: 16px;
    font-family: '微軟正黑體' !important;
}
.list-img .btn-new .ii::before{
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    font-family: 'iicon' !important;
}
/*圖片列表*/


.info-hover{
    color: #F56C6C;
    position: relative;
    /* top: 5px; */
    margin-left: 8px;
    /* margin-bottom: 5px; */
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}
.info-hover span{
    font-size: 12px;
    position: relative;
    top: -3px;
    margin-left: 8px;
}
.info-hover .ii-hint1:before{
    font-size: 18px;
}
.el-tooltip__popper{
    font-size: 14px;
    line-height: 1.5;
}
.el-tooltip__popper.is-dark{
    border-radius: 3px;
}
.el-tooltip__popper.is-dark a{
    text-decoration: underline;
    color: #ff9191;
}

.fixed-bottom-enter-active {
    transition: all .5s ease;
    transition-delay: .5s;
    -webkit-transition-delay: .5s;
}
.fixed-bottom-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fixed-bottom-enter, .fixed-bottom-leave-to {
    transform: translateY(20px);
    opacity: 0;
}
.fixed-bottom{
    position: fixed;
    bottom: 0;
    right: 30px;
    left: 235px;
    height: 58px;
    padding-top: 10px;
    background: #eef0f3;
    z-index: 1;
}
.fixed-bottom.scend{
    background: transparent;
    transition: bottom .15s ease-in-out;
}
.fixed-bottom .btn.new{
    max-width: 100px;
    margin-right: 10px;
}
.fixed-bottom .pages{
    margin-top: 5px;
    margin-bottom: 13px;
    height: 30px;
}
.fixed-bottom.scend .pages{
    transition: all .15s ease-in-out;
}
.fixed-bottom .other-ctrl{
    position: absolute;
    padding: 0 10px 0 0;
    margin-top: 10px;
    z-index: 1;
}
.fixed-bottom.scend .other-ctrl{
    transition: all .15s ease-in-out;
}
.fixed-bottom .info{
    margin: 0 10px;
}

/*** footer ***/
.site-footer{
    text-align: right;
    font-size: 12px;
    line-height: 20px;
    padding-right: 65px;
    margin-top: 15px;
    padding-bottom: 25px;
}
.gotop{
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    font-size: 26px;
    padding: 0;
    transform: rotate(-90deg);
    position: absolute;
    right: 0;
    top: -6px;
    box-shadow: 0 0 3px rgba(20%,20%,40%,0.2);
    transition: all .15s ease-in-out;
}
.gotop:hover{
    background: #2c82be;
    color: #fff;
}
/*** page ***/
.pages{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.pages button{
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #888;
}
.pages .active button{
    color: #409eff;
}
.pages .nu{
    font-weight: bold;
    font-family: sans-serif;
    font-size: 15px;
}
.pages .arrow{
    border: 1px solid #888;
    font-size: 24px;
    border-radius: 100%;
    margin: 0 5px;
}
.pages .prev{
    filter: FlipH;
    -ms-filter: "FlipH";
    -webkit-transform: scaleX(-1);
       -moz-transform: scaleX(-1);
         -o-transform: scaleX(-1);
            transform: scaleX(-1);
}
.pages input{
    line-height: 25px;
    height: 25px;
    margin: 0 10px;
    border-width: 0 0 1px 0;
    border-color: #888;
    background: none;
    width: 50px;
    padding: 0 8px;
    text-align: center;
}

/*** 表單預覽設置 ***/
.viewset .link{
    display: block;
    text-align: center;
}
.viewset .link:hover{
    background: #edf6fc;
    color: #2c82be;
}
.viewset .viewin{
    background: #f9f9f9;
    margin-bottom: 10px;
    padding: 10px 30px;
}
.viewset .form-box{
    padding: 30px 0 0;
    max-width: 1000px;
}
.viewset .form-box .btn-new{
    display: block;
    text-align: center;
    width: 100%;
    border: 1px dashed #419eff;
    padding: 12px 10px;
    color: #419eff;
    background: rgba(235, 244, 251,0);
    transition: all .15s ease-in-out;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 3px;
}
.viewset .form-box .btn-new:hover{
    background: #7d8085;
    color: #fff;
    border-color: transparent;
}
.viewset .form-group .group-in{
    position: relative;
    padding: 0 15px;
}
.viewset .form-group .group-in:before{
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    background: rgba(216, 232, 239,0);
    z-index: 5;
    width: 100%;
    border: 1px solid rgba(155, 190, 224, 0);
    transition: all .1s ease-in-out;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.viewset.isNew{
    position: relative;
    pointer-events: none;
}
.viewset.isNew::before{
    position: absolute;
    content: "請先儲存後再編輯";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2c82be;
    z-index: 2;
}
.viewset .form-group .group-in:hover:before{
    background: rgba(216, 232, 239,.5);
    border: 1px solid rgba(155, 190, 224, 1);
}
.viewset .form-group .group-in:after{
    content: '';
    display: block;
    clear: both;
}
.viewset .form-group .form-ctrl{
    opacity: 0;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    background: rgba(216, 232, 239,0);
    z-index: 6;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(155, 190, 224, 0);
    transition: all .1s ease-in-out;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.viewset .form-group .group-in:hover .form-ctrl{
    opacity: 1;
}
.viewset .form-group .edit_mask,
.viewset .form-group .drag,
.viewset .form-group .del{
    font-weight: bold;
    font-size: 15px;
    line-height: 32px;
    width: auto;
    height: 32px;
    background: #fff;
    box-shadow: 0px 0px 3px rgba(20%,20%,40%,0.4);
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    transition: all .3s ease-in-out;
}
.viewset .form-group .el-select{
    width: 100%;
}
.viewset .control-label{
    /* width: 90px; */
    display: block;
}
.viewset .control-box {
    /* width: calc(100% - 115px); */
    /* display: inline-block; */
    width: 100%;
    /* display: block; */
    position: relative;
}
.viewset .row-2:nth-child(1){
    margin-right: 0;
}
.viewset .row-2:nth-child(2){
    margin-left: 0;
}
.viewset .row-2{
    width: calc(50%);
    float: left;
}
/* .viewset .city .el-select{
    width: calc(50% - 5px);
    float: left;
}
.viewset .city .el-select + .el-select{
    margin-left: 10px;
} */
.viewset .form-group .control-box.verifycode .el-input{
    width: calc(100% - 90px);
    max-width: 150px;
    vertical-align: top;
}
.viewset .form-group .form-scroll{
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #c7cad2;
    border-radius: 5px;
    padding: 15px 15px 15px 20px;
    background: #fff;
}
.viewset .form-group:before{
    content: '';
    display: block;
    clear: both;
}
.viewset .ex{
    color: #999;
}
.viewset.row-2 > .col{
    width: 243px;
    vertical-align: top;
    margin-right: 0;
    margin-left: 0;
}
.viewset.row-2 > .col+.col{
    width: calc(100% - 263px);
}
.viewset.row-2 > .col-left {
    margin-right: 20px;
}



/*上傳區塊*/
.upload-fixed .el-dialog{
    border-radius: 4px;
}

.upload-fixed,
.hasfile .upload-in .ii-cloud1{
    font-size: 15px;
}
/* .upload-fixed{
    position: fixed;
    top: 8vh;
    right: 10vw;
    bottom: 8vh;
    left: 10vw;
    z-index: 4;
    background: #fff;
}
.upload-box{
    padding: 20px;
} */
.fixed-box,
.eformsmodel-fixed{
    /* position: fixed;
    top: 8vh;
    right: 10vw;
    left: 10vw;
    z-index: 4; */
    background: #fff;
    border-radius: 5px;
}
.fixed-box .fixed-in
/*,.eformsmodel-fixed .fixed-in*/
{
    padding: 50px 30px;
    max-height: 85vh;
    overflow-y: auto;
}
.upload-box .upload-in{
    border: 2px dashed #bababa;
    /* position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px; */
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 5vh;
}
.upload-box .top{
    width: 100%;
    text-align: center;
}
.fixed-box .btn-close .ii,
.eformsmodel-fixed .btn-close .ii,
.upload-box .btn-close .ii,
.icon-fixed .btn-close .ii{
    display: block;
}
.upload-box .ii-cloud1{
    font-family: '微軟正黑體' !important;
    font-size: 18px;
    display: block;
    color: #317BB1;
    margin-bottom: 32px;
    letter-spacing: 2px;
}
.upload-box .ii-cloud1:before {
    font-size: 120px;
    display: block;
    font-family: 'iicon' !important;
}
.upload-box .ex{
    max-width: 620px;
    margin: 0 auto;
    margin-top: 60px;
    font-size: 14px;
}
.upload-box .upload-in .btn{
    display: block;
    margin: 30px auto 0;
    padding: 8px 30px;
    max-width: 126px;
}
.fixed-box .btn-close,
.eformsmodel-fixed .btn-close,
.upload-box .btn-close,
.icon-fixed .btn-close{
    position: absolute;
    right: -50px;
    top: 0;
    color: #fff;
    letter-spacing: 3px;
    padding-top: 40px;
}
.fixed-box .btn-close:before,
.fixed-box .btn-close:after,
.eformsmodel-fixed .btn-close:after,
.eformsmodel-fixed .btn-close:before,
.upload-box .btn-close:after,
.upload-box .btn-close:before,
.icon-fixed .btn-close:after,
.icon-fixed .btn-close:before {
    content: "";
    width: 40px;
    height: 4px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
    transition: all .4s cubic-bezier(.25,.6,.36,1);
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}
.fixed-box .btn-close:before,
.upload-box .btn-close:before,
.eformsmodel-fixed .btn-close:before,
.icon-fixed .btn-close:before {
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transition-delay: 65ms;
}
.fixed-box .btn-close:hover:before,
.upload-box .btn-close:hover:before,
.eformsmodel-fixed .btn-close:hover:before,
.icon-fixed .btn-close:hover:before {
    -webkit-transform: translate3d(-50%,-50%,0) rotate(135deg);
    transform: translate3d(-50%,-50%,0) rotate(135deg);
}
.fixed-box .btn-close:hover:after,
.upload-box .btn-close:hover:after,
.eformsmodel-fixed .btn-close:hover:after,
.icon-fixed .btn-close:hover:after {
    -webkit-transform: translate3d(-50%,-50%,0) rotate(225deg);
    transform: translate3d(-50%,-50%,0) rotate(225deg);
}


.upload-box.hasfile .upload-in{
    position: static;
    padding: 3vh 30px;
}
.hasfile .ii-cloud1,
.hasfile .ii-cloud1:before,
.hasfile .upload-in .ii-cloud1,
.hasfile .upload-in .btn{
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}
.hasfile .upload-in .ii-cloud1{
    margin-right: 5%;
}
.hasfile .upload-in .ii-cloud1:before {
    font-size: 65px;
    margin-right: 20px;
}
.hasfile .upload-in .btn{
    margin-left: 5%;
}



.upload-fixed .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.upload-fixed .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
    right: 0;
}
.upload-file .el-checkbox{
     white-space: inherit;
     width: 100%;
}
.upload-file .el-checkbox__input{
    position: absolute;
    top: 10px;
    left: 10px;
}
.upload-file .delete{
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    color: #ddd;
    background: rgba(0,0,0,.5);
    width: 33px;
    height: 35px;
    opacity: 0;
    visibility: hidden;
    transition: all .15s ease-in-out;
    z-index: 3;
}
.upload-file > li:hover .delete{
    opacity: 1;
    visibility: visible;
}
.upload-file .el-checkbox__label{
    padding-left: 0;
    display: block;
}
.upload-file .pic{
    max-width: 200px;
    height:200px;
    display:black;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.upload-file .pic .ext{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    color: #fff;
    font-size: 20px;
    padding-top: 10px;
}
.upload-file .li-data .item-in{
    background: none;
}
.upload-file .li-data .item-in,
.upload-file.list-con > li .item-in{
    padding: 0;
    max-width: 200px;
    margin: 0 auto;
}
.upload-file .error{
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    left: 10px;
    background: rgba(245, 124, 124, .5);
    z-index: 2;
    color: #fff;
    text-align: center;
    padding-top: 43%;
    font-size: 15px;
}
.upload-file .error .ii{
    font-size: 25px;
    margin-bottom: 8px;
    display: inline-block;
}
.upload-file.list-con{
    margin: 0;
}
.upload-file.list-con > li{
    padding: 10px;
}
/* .upload-box .list-img{
    height: calc(96% - 264px);
} */


/*表單範本維護*/
.eformsmodel-fixed ul li .item-in{
    position: relative;
    border-left: 3px solid #c7cad2;
}
.eformsmodel-fixed ul li .item-in:hover,
.eformsmodel-fixed ul li.active .item-in{
    border-color: rgba(64, 158, 255, 1);
}
.eformsmodel-fixed .list-h .btn{
    height: 34px;
    margin: 0;
    width: 46px;
    font-size: 18px;
    transition: all .1s ease-in-out;
}
.eformsmodel-fixed .list-h .btn:hover{
    color: rgba(64, 158, 255, 1);
}
.eformsmodel-fixed ul li .btn.del{
    opacity: 0;
}
.eformsmodel-fixed ul li .item-in:hover .btn.del,
.eformsmodel-fixed ul li.active .item-in .btn.del{
    opacity: 1;
}
.eformsmodel-fixed .item-in .form-group{
    background: #f3f3f3;
    border-radius: 3px;
    padding: 2px 0;
}
.eformsmodel-fixed .item-in:hover .form-group,
.eformsmodel-fixed .active .item-in .form-group{
    background: #e5f1f9;
}
.eformsmodel-fixed .item-in .el-input__inner{
    border-color: transparent;
    background: none;
    font-size: 15px;
    transition: all 0s ease-in-out;
    padding-left: 10px;
    padding-right: 10px;
}
.eformsmodel-fixed .item-in:hover .form-group .el-input__inner{
    background: #fff;
    font-size: 15px;
    border-color: #c7cad2;
    transition: all 0s ease-in-out;
}
.eformsmodel-fixed .item-in .item-bottom{
    border-top:1px solid #ddd;
    background:rgba(190,190,190,0.1);
}
.eformsmodel-fixed .item-in .item-bottom .btn{
    font-size:13px;
    color:#aaa;
    width: auto;
}
.eformsmodel-fixed .item-in .item-bottom .btn:hover{
    color:#0080da;
}
.eformsmodel-fixed .item-in .el-input{
    width:calc(100% - 102px);
    margin-top: 10px;
    margin-bottom: 10px;
}


/*預覽*/
.viewbox{
    max-width: 500px;
    margin: 0 auto 30px;
}
.viewbox .viewin{
    border-radius: 6px;
}
.viewbox .view-title{
    margin-bottom: 15px;
    font-size: 15px;
}
.viewbox.fb .viewin{
    overflow: hidden;
    background: #f2f3f5;
}
.viewbox.fb .pic{
    background-color: #ddd;
    border: 1px solid #f2f3f5;
    max-height: 270px;
    overflow: hidden;
}
.viewbox.fb .pic img{
    max-width: 100%;
    max-height: 100%;
    background-color: #f5f8f8;
}
.viewbox.fb .info{
    padding: 10px 15px;
}
.viewbox.fb .title{
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 3px;
}
.viewbox.fb .des{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.viewbox.fb .horizontal .pic{
    width: 150px;
    height: 235px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.viewbox.fb .horizontal .info{
    width: calc(100% - 150px);
    max-height: 235px;
}
.viewbox.fb .horizontal .title,
.viewbox.fb .horizontal .des{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.viewbox.fb .horizontal .title{
    -webkit-line-clamp: 3;
}
.viewbox.fb .horizontal .des{
    -webkit-line-clamp: 4;
    white-space: pre-line;
}


.viewbox.line .viewin{
    background: #bff18e;
    padding: 0;
    position: relative;
    max-width:245px;
    border-radius: 25px;
}
/* .viewbox.line .viewin:after{
    content: '';
    width: 14px;
    height: 12px;
    background: url('../img/line_after.png');
    position: absolute;
    right: -12px;
    top: 15px;
    display: block;
} */
.viewbox.line .web{
    color: #047bfe;
    font-size: 14px;
    text-decoration: underline;
}
.viewbox.line .info{
    /* padding-right: 80px; */
    /* padding-left: 10px; */
    padding:0;
    /* border-left: 1px solid #00b900; */
    min-height: 60px;
    position: relative;
}
.viewbox.line .textbox{
    padding:12px 15px;
}
.viewbox.line .title{
    font-weight: bolder;
    /* margin-top: 15px; */
    color: #0c151a;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing:normal;
    overflow: hidden;
    line-height:1.2;
    font-size:16px;

}
.viewbox.line .des{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*指定行數...取代*/
    -webkit-box-orient: vertical;
    max-height: 34px;
    color:#186e15;
    font-size:14px;
    line-height:1.2;
}
.viewbox.line .pic{
    /* position: absolute; */
    /* width: 60px;
    height: 60px; */
    width:100%;
    height:135px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f5f8f8;
    border-radius: 25px 25px 0 0 ;
    /* right: 0;
    top: 3px; */
}

/*版面設定*/
.view {
  display: block;
}
.view1 {
  width: 230px;
  padding: 10px;
}
.view2 {
  max-width: 426px;
}
.view img {
  width: 100%;
}
.view .view-top,
.view .view-in,
.view .view-cont,
.view .view-bottom{
    cursor: pointer;
}
.view .view-top {
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  display: block;
}
.view .view-body {
  display: table;
  width: 100%;
}
.view1 .view-body {
  height: 168px;
}
.view .view-side {
  display: table-cell;
  float: none;
  position: relative;
}
.view1 .view-side {
  width: 60px;
}
.view2 .view-side {
  width: 70px;
}
.view .view-side .view-in {
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  left: 0;
  right: 10px;
  bottom: 0;
  top: 10px;
}
.view .view-side .view-in.right {
  left: 10px;
  right: 0;
}
.view .view-right {
  display: table-cell;
  float: none;
}
.view .view-cont {
  width: 100%;
  margin-top: 10px;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  display: block;
}
.view1 .view-cont {
  height: calc(100% - 60px);
}
.view2 .view-cont {
  height: calc(100% - 70px);
}
.view .view-bottom {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  display: block;
}
.view2 .txt-cont {
  font-size: 14px;
  text-align: left;
  margin-bottom: 8px;
  max-height: 150px;
  overflow: hidden;
}
.view .view-top,
.view .view-in,
.view1 .view-cont,
.view .view-bottom {
  background: rgb(240, 242, 245);
  color: rgb(45, 130, 190);
}
.view a.active,
.view a:hover {
  background: rgb(45, 130, 190);
  color: #fff;
}

/*頁籤*/
.sub_tabs{
  margin-top: 25px;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0), 0 0 6px 0 rgba(0,0,0,0);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0), 0 0 6px 0 rgba(0,0,0,0);
}
.el-tabs__header{
  margin-bottom: 0;
}
.sub_tabs>.el-tabs__header button{
  vertical-align: middle;
  margin-left: 8px;
  position: relative;
  top: -2px;
}
.sub_tabs .el-tabs__nav-prev,
.sub_tabs .el-tabs__nav-next{
  height: 100%;
  text-align: center;
}
.sub_tabs .el-tabs__nav-prev i{
  line-height: 60px;
  padding-left: 5px;
}
.sub_tabs .el-tabs__nav-next i{
  line-height: 60px;
  padding-right: 5px;
}
.main-in.el-tabs > .el-tabs__header .el-tabs__item:not(.is-disabled):hover .userwebtech, .main-in.el-tabs > .el-tabs__header .el-tabs__item.is-active .userwebtech{
    color: rgb(230, 162, 60);
}
.el-tabs__nav-prev, .el-tabs__nav-next{
    display: flex;
    font-size: 18px;
    height: 100%;
    align-items: center;
}

.site-nav .menu li.userwebtech{
    background-color: rgb(255, 244, 225);
    /* border-bottom-color: rgb(255, 192, 0); */
}
.el-tabs__nav .userwebtech:after{
    content: '';
    background-color:rgb(255, 192, 0);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
}
.sub_tabs>.el-tabs__header .form-input{
  border: none;
  padding: 0 10px;
  max-width: 120px;
  margin-right: 5px;
  border-radius: 4px;
}
.sub_tabs>.el-tabs__header .is-active .form-input{
  background: #F5F7FA;
}
.sub_tabs > .el-tabs__content{
  padding: 45px 30px 30px;
}

/*頁籤閃爍提示*/
.point_tab{
    animation: point 2s infinite linear;
}
@keyframes point {
  0% {
    color:#888;
  }
  15% {
    color:#409EFF;
  }
  45% {
    color:#409EFF;
  }
  100% {
    color:#888;
  }
}
.point_tab:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #d9ebf7;
  border-radius: 50%;
  width: 112px;
  height: 112px;
  opacity: 0;
  margin: auto;
  z-index: -1;
  pointer-events: none;
}
.point_tab:after {
    animation: pulse 2s infinite linear;
}
/*頁籤閃爍提示*/

/*分類選擇元件*/
.cate-select-el-dialog .list-data .list-title > li > div,
.cate-select-el-dialog .list-data .list-con > li .item-in > div{
    padding: 8px 15px;
}
.cate-select-el-dialog .list-data .list-con {
    border-bottom: 0px;
}
.cate-select-el-dialog .item-in{
    border: 1px solid #edeeef;
    border-width: 0 1px 1px 1px;
}
.cate-select-el-dialog .list-data .name{
    width: 100%;
    text-align: left;
}
.cate-select-el-dialog .list-data .info{
    max-width: 150px;
    min-width: 100px;
    width: 100%;
    text-align: right;
}
.cate-select-el-dialog .list-data .add{
    max-width: 80px;
    min-width: 80px;
    width: 100%;
}

/*各單元裡面 > FB元件*/
.fb-box {
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.fb-box .fb-col {
  border: 1px solid rgb(228, 231, 237);
  border-radius: 5px;
  margin: 0 15px 30px;
  overflow: hidden;
  max-width: calc((100% / 3) - 30px);
  min-width: 280px;
}
.fb-box .fb-title {
  padding: 10px 40px 10px 50px;
  background: #f5f5f5;
  position: relative;
  height: 40px;
}
.fb-box .box{
    padding: 20px;
}
.fb-box .pic {
  text-align: left;
  max-width: 230px;
}
.fb-box .pic img {
  width: 100%;
}
.fb-box .icon {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 11px 10px 20px;
  color: rgb(45, 130, 190);
  height: 42px;
  font-size: 18px;
  font-family: "微軟正黑體";
  font-weight: bold;
}

/*各單元設定頁*/
#topmenu .menuname,
#topmenu .subname{
    max-width: 600px;
}
#topmenu .subname{
    width: calc(100% - 220px);
}

/*錯誤訊息*/
.el-notification{
    border-width: 2px;
    border-radius: 6px;
}
.el-notification__content{
    text-align: inherit;
}
.info_msg{
    background-color:#edf2fc;
    border-color:#ebeef5;
}
.success_msg{
    background-color:#f0f9eb;
    border-color:#e1f3d8;
}
.warning_msg{
    background-color: #fdf6ec;
    border-color: #faecd8;
}
.error_msg{
    background-color: #fef0f0;
    border-color: #ffcdcd;
}
/*沒有資料時的暫時資訊*/
/* .nofile{
    text-align: center;
    padding-top: 120px;
} */
.not_msg{
    text-align: center;
    min-height: calc(100% - 290px);
    padding: 8vh 0;
    opacity: 0;
    animation-name: loding;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-delay:.3s;
}
.not_msg img{
    width: 100%;
}
@keyframes loding{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.not_msg .pic{
    margin-bottom: 5vh;
    display: inline-block;
    position: relative;
}
.not_msg .pic span{
    position: absolute;
    top: 0;
    left: 0;
    animation: freebg .8s infinite ease-in-out;
}
@keyframes freebg{0%{opacity:0}30%{opacity:1}60%{opacity:1}100%{opacity:0}}

.not_msg .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.8;
}
.not_msg .btn-box{
    margin-top: 50px;
}


/*表單focus文字*/
.form-group .control-box {
    position: relative;
}
.form-group .control-box label.control-label{
    position: absolute;
    bottom: -27px;
    left: 0;
    font-size: var(--font-size-small);
    opacity: 1; transform: translateY(0);
    transition: all 0.2s ease-out;
    width: 100%;
}
.form-group .control-box input:placeholder-shown + label.control-label,
.form-group .control-box textarea:placeholder-shown + label.control-label{
    opacity: 0;
    transform: translateY(1rem);
}
input.form-control,
textarea.form-control{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 10px 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    outline: 0;
    border-color: #c7cad2;
}
input.form-control{
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}
textarea.form-control{
    min-height: 75px;
    max-width: 100%;
    line-height: 22px;
}
input.form-control:focus,
textarea.form-control:focus {
    outline: 0;
    border-color: #409EFF;
}
.active_up{
    opacity: 0;
    height: 0;
    transition: all .15s ease-in-out;
    display: inline-block;
    padding-top: 4px;
}
.active_up.active{
    opacity: 1;
    height: initial;
}



/*不要箭頭*/
.clear_appearance input::-webkit-outer-spin-button,
.clear_appearance input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.clear_appearance input[type=number]{
    -moz-appearance: textfield;
}




.cursor-pointer{
    cursor: pointer;
}
.cursor-move{
    cursor: move;
}

/*顏色、線條、圓角、字型大小樣式*/

.t-c1{
    color: #F56C6C;
}
.t-c2{
    color: #43a3e6;
}
.t-c3{
    color: #67C23A;
}
.t-c4{
    color: #fff;
}
.t-c5,
.t-c5 .el-checkbox__label{
    color: #555;
}
.t-c6{
    color: #999;
}
.t-c7{
    color:black;
}
.bg1{
    background-color: #F56C6C;
}
.bg-red-light, .bg1-30{
    background-color: #fcd3d3;
}
.bg2{
    background-color: #fff;
}
.bg4{
    background-color: #7d8085;
}
.bg5{
    background-color: rgb(45, 130, 190);
}
.bg-gray, .bg6{
    background-color: #edeeef;
}
.bg7{
    background-color: #84c165;
}



/*字體類 t-size t-weight未來會捨棄，請改用fs-*/
.fs-12{
    font-size: 12px;
}
.fs-13,
.t-size13, .t-size13 .el-checkbox__label{
    font-size: 13px;
}
.fs-14,
.t-size14, .t-size14 .el-checkbox__label{
    font-size: 14px;
}
.fs-15, .fs-15 .el-checkbox__label,
.t-size15, .t-size15 .el-checkbox__label{
    font-size: 15px;
}
.fs-16, .fs-16 .el-checkbox__label,
.t-size16, .t-size16 .el-checkbox__label{
    font-size: 16px;
}
.fs-18{
    font-size: 18px;
}
.fs-20{
    font-size: 20px;
}
.fs-30{
    font-size: 30px;
}
.fw-bold, .fw-bold .el-checkbox__label,
.t-weight, .t-weight .el-checkbox__label{
    font-weight: bold;
}

.t-link1{
    color: #43a3e6;
    text-decoration: underline;
    cursor: pointer;
}
.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
}
.spacing-0 {
    letter-spacing: 0;
}
.whitespace-pre-line {
    white-space: pre-line;
}


/*表單*/
/*區塊*/
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
    position: relative;
    width: 100%;
    min-height: 1px;
}
.col {/*等分剩餘空間*/
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto {/*隨內容寬度*/
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
.col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}

/*flex*/
.d-flex{
    display: flex;
}
.d-inline-flex{
    display: inline-flex;
}
.d-inline-block{
    display: inline-block;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-fill{
    flex: 1 1 auto;
}
.flex-none {
    flex: none;
}
.flex-shrink-0{
    flex-shrink: 0;
}
.flex-shrink-1{
    flex-shrink: 1;
}
.flex-grow-0{
    flex-grow: 0;
}
.flex-grow-1{
    flex-grow: 1;
}
.align-items-center{
    align-items: center;
}
.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align-self-start {
    align-self: flex-start;
}
.align-self-center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align-self-bottom {
    -ms-flex-item-align: flex-end;
    align-self: flex-end;
}
.justify-content-between{
    justify-content: space-between;
}
.justify-content-end{
    justify-content: flex-end;
}
.justify-content-center{
    justify-content:center;
}
.order-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
}
.order-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
}
.order-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
}
.order-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
.order-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}
.order-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}
.order-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
}
.order-5 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
}
.order-6 {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
}
.order-7 {
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
}
.order-8 {
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
}
.order-9 {
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
}
.order-10 {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
}
.order-11 {
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
}
.order-12 {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
}

.p-0 {
    padding: 0;
}
.pt-0{
    padding-top: 0;
}
.pr-0{
    padding-right: 0;
}
.pb-0{
    padding-bottom: 0;
}
.pl-0{
    padding-left: 0;
}

.p-3 {
    padding: 3px;
}
.pt-3{
    padding-top: 3px;
}
.pr-3{
    padding-right: 3px;
}
.pb-3{
    padding-bottom: 3px;
}
.pl-3{
    padding-left: 3px;
}

.p-5 {
    padding: 5px;
}
.pt-5{
    padding-top: 5px;
}
.pr-5{
    padding-right: 5px;
}
.pb-5{
    padding-bottom: 5px;
}
.pl-5{
    padding-left: 5px;
}

.p-10 {
    padding: 10px;
}
.pt-10{
    padding-top: 10px;
}
.pr-10{
    padding-right: 10px;
}
.pb-10{
    padding-bottom: 10px;
}
.pl-10{
    padding-left: 10px;
}

.p-15 {
    padding: 15px;
}
.pt-15{
    padding-top: 15px;
}
.pr-15{
    padding-right: 15px;
}
.pb-15{
    padding-bottom: 15px;
}
.pl-15{
    padding-left: 15px;
}

.p-20 {
    padding: 20px;
}
.pt-20{
    padding-top: 20px;
}
.pr-20{
    padding-right: 20px;
}
.pb-20{
    padding-bottom: 20px;
}
.pl-20{
    padding-left: 20px;
}

.p-25 {
    padding: 25px;
}
.pt-25{
    padding-top: 25px;
}
.pr-25{
    padding-right: 25px;
}
.pb-25{
    padding-bottom: 25px;
}
.pl-25{
    padding-left: 25px;
}

.p-30 {
    padding: 30px;
}
.pt-30{
    padding-top: 30px;
}
.pr-30{
    padding-right: 30px;
}
.pb-30{
    padding-bottom: 30px;
}
.pl-30{
    padding-left: 30px;
}

.p-50 {
    padding: 50px;
}
.pt-50{
    padding-top: 50px;
}
.pr-50{
    padding-right: 50px;
}
.pb-50{
    padding-bottom: 50px;
}
.pl-50{
    padding-left: 50px;
}
.pl-60{
    padding-left: 60px;
}
.pl-130{
    padding-left: 130px;
}

.m-auto {
    margin: auto ;
}
.mt-auto{
    margin-top: auto ;
}
.mr-auto{
    margin-right: auto ;
}
.mb-auto{
    margin-bottom: auto ;
}
.ml-auto{
    margin-left: auto ;
}

.m-0{
    margin: 0 ;
}
.mt-0{
    margin-top: 0 ;
}
.mr-0{
    margin-right: 0 ;
}
.mb-0{
    margin-bottom: 0 ;
}
.ml-0{
    margin-left: 0 ;
}

.mt--15{
    margin-top: -15px;
}
.mr--15{
    margin-right: -15px;
}
.ml--15{
    margin-left: -15px;
}

.m-5{
    margin: 5px;
}
.mt-5{
    margin-top: 5px;
}
.mr-5{
    margin-right: 5px;
}
.mb-5{
    margin-bottom: 5px ;
}
.ml-5{
    margin-left: 5px;
}

.m-10{
    margin: 10px;
}
.mt-10{
    margin-top: 10px;
}
.mr-10{
    margin-right: 10px;
}
.mb-10{
    margin-bottom: 10px;
}
.ml-10{
    margin-left: 10px;
}

.m-15{
    margin: 15px;
}
.mt-15{
    margin-top: 15px;
}
.mr-15{
    margin-right: 15px;
}
.mb-15{
    margin-bottom: 15px;
}
.ml-15{
    margin-left: 15px;
}

.m-20{
    margin: 20px;
}
.mt-20{
    margin-top: 20px;
}
.mr-20{
    margin-right: 20px;
}
.mb-20{
    margin-bottom: 20px;
}
.ml-20{
    margin-left: 20px;
}

.m-25{
    margin: 25px;
}
.mt-25{
    margin-top: 25px;
}
.mr-25{
    margin-right: 25px;
}
.mb-25{
    margin-bottom: 25px;
}
.ml-25{
    margin-left: 25px;
}

.m-30{
    margin: 30px;
}
.mt-30{
    margin-top: 30px;
}
.mr-30{
    margin-right: 30px;
}
.mb-30{
    margin-bottom: 30px;
}
.ml-30{
    margin-left: 30px;
}

.m-40{
    margin: 40px;
}
.mt-40{
    margin-top: 40px;
}
.mr-40{
    margin-right: 40px;
}
.mb-40{
    margin-bottom: 40px;
}
.ml-40{
    margin-left: 40px;
}

.m-80{
    margin: 80px;
}
.mt-80{
    margin-top: 80px;
}
.mr-80{
    margin-right: 80px;
}
.mb-80{
    margin-bottom: 80px;
}
.ml-80{
    margin-left: 80px;
}

.m-100{
    margin: 100px;
}
.mt-100{
    margin-top: 100px;
}
.mr-100{
    margin-right: 100px;
}
.mb-100{
    margin-bottom: 100px;
}
.ml-100{
    margin-left: 100px;
}


.bor-0 {
    border: 0 ;
}
.bor-t-0 {
    border-top: 0 ;
}
.bor-r-0 {
    border-right: 0 ;
}
.bor-b-0 {
    border-bottom: 0 ;
}
.bor-l-0 {
    border-left: 0 ;
}
.bor {
    border: 1px solid #888;
}
.bor-t {
    border-top: 1px solid #888;
}
.bor-r {
    border-right: 1px solid #888;
}
.bor-b {
    border-bottom: 1px solid #888;
}
.bor-l {
    border-left: 1px solid #888;
}


/*圓角*/
.rad-0 {
    border-radius: 0 ;
}
.rad-4 {
    border-radius: 4px;
}
.rad-t-4 {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.rad-r-4 {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.rad-b-4 {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.rad-l-4 {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.rad-5 {
    border-radius: 5px;
}
.rad-10 {
    border-radius: 10px;
}
.rad-30 {
    border-radius: 30px;
}
.rad-t-30 {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.rad-r-30 {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.rad-b-30 {
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}
.rad-l-30 {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}


.bor-top{
    border-top: 1px solid #ddd;
}
.bor-right{
    border-right: 1px solid #ddd;
}
.bor-bottom{
    border-bottom: 1px solid #ddd;
}
.bor-left{
    border-left: 1px solid #ddd;
}

.delay-400ms{
    animation-delay:.4s;
    -webkit-animation-delay:.4s;
}
.delay-600ms{
    animation-delay:.6s;
    -webkit-animation-delay:.6s;
}
.delay-800ms{
    animation-delay:.8s;
    -webkit-animation-delay:.8s;
}
.delay-1000ms{
    animation-delay:1s;
    -webkit-animation-delay:1s;
}


.line-clamp-1{
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.line-clamp-2{
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}




@media (min-width: 1024px){
/*滑過*/
    /*TOP滑過*/
    .site-header .fastlink li a:hover{
        background-color: rgba(255,255,255,1);
        box-shadow: 0 0 2px rgba(51, 79, 102, 0.2);
    }
    .site-header .fastlink li a:hover i{
        color: rgba(64, 158, 255, 1);
    }
    /*搜尋滑過*/
    .site-search .search-box:hover .el-input__inner{
        background-color: #fff;
    }
    .site-search .search-box:hover .control-box{
        border-color: #2c82be;
    }
    .site-search .search_btn:hover,
    .site-search .other_btn:hover{
        background: #2c82be;
        color: #fff;
        border-color: #2c82be;
    }
    .site-search .search-box input.form-control:hover {
        background-color: rgba(255,255,255,1);
    }
    /*選單滑過*/
    .site-nav .menu > ul > li > ul > li:hover > .menu-a{
        /* background: #2c82be; */
        color: #fff;
        background: #1e5799;
        background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 59%, #7db9e8 100%);
        background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 59%,#7db9e8 100%);
        background: linear-gradient(45deg, #1e5799 0%,#2989d8 59%,#7db9e8 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
    }
    .site-nav .menu > ul > li > ul > li > ul > li.active > .menu-a,
    .site-nav .menu > ul > li > ul > li > ul > li:hover > .menu-a,
    .site-nav .menu > ul > li > ul > li.active > ul > li .menu-a.router-link-exact-active{
        font-weight: bold;
        color: #43a3e6;
    }
    /*列表滑過*/
    .list-data .list-con > li:hover{
        background: #f0f8fd;
        transition: all .1s ease-in-out;
    }
    .list-data .list-con > li.active{
        background: #ddeefb;
    }
    /*當寬度較小列表需使用卷軸時某些欄位至左的樣式 (ex產品規格組合清單)*/
    .list-data.list-sticky .list-con > li:hover .sticky-data{
        background: #f0f8fd;
        transition: all .1s ease-in-out;
    }
    .list-data.list-sticky .list-con > li.active .sticky-data{
        background: #ddeefb;
    }

    .list-img .list-con .title a:hover,
    .list-data .list-con .title a:hover,
    .item-in .ctrl button:hover,
    .item-in .ctrl a:hover{
        color: #2c82be;
        background-color: transparent;
        transition: all .2s ease-in-out;
    }
    .list-data .list-con .quty.re a:hover,
    .list-img .list-con .quty.re a:hover{
        color: #f57c7c;
    }
    .list-data .item-in .ctrl .active button:hover:before,
    .list-data .item-in .ctrl .active a:hover:before{
        box-shadow: 1px 1px 3px rgba(20%,20%,40%,0);
    }
    .list-data .item-in .ctrl button:hover:before,
    .list-data .item-in .ctrl a:hover:before{
        box-shadow: 1px 1px 3px rgba(20%,20%,40%,0.2);
        background: rgba(255,255,255,1);
        transition: all .2s ease-in-out;
    }
    .list-img .list-con .title a:hover .quty{
        background: #2c82be;
    }
    .list-img li:hover .pic .icon-box{
        background-color: #EDF6FC;
    }
    .list-img .li-folder:hover .item-in{
        background: url(../img/list_right_.png) top right no-repeat,url(../img/list_bottom_.png) bottom left no-repeat,url(../img/list_top_sort_.png) top left no-repeat,url(../img/list_top_.png) top repeat-x,#EDF6FC;
    }
    .list-img .li-sort:hover .item-in{
        background: url(../img/list_right_.png) top right no-repeat,url(../img/list_bottom_.png) bottom left no-repeat,url(../img/list_top_.png) top left no-repeat,#EDF6FC;
    }
    .list-img .li-data:hover .item-in{
        background: url(../img/list_top_.png) top no-repeat,#EDF6FC;
    }
    .form-group.additem:hover{
        border-color: #7d8085;
    }
    .form-group.addmodel:hover{
        border-color: #70a6da;
    }
    .list-img .btn-new:hover{
        color: #888;
        background:rgba(245, 248, 248,1);
        border-color: transparent;
    }
    .upload-file .li-data:hover .item-in {
        background: none;
    }
    .pages button:hover{
        color: #fff;
        background: #2c82be;
        border-color: #2c82be;
    }
    .viewset .form-group .edit_mask:hover,
    .viewset .form-group .drag:hover,
    .viewset .form-group .del:hover{
        background: #f5f5f5;
    }
/*滑過*/
}
@media (max-width: 1760px){
    .fixed-bottom.show_ctrl{
        background: #eef0f3;
    }
    .fixed-bottom .pages {
        animation-name: ease_in;
        animation-duration: .8s;
        animation-fill-mode: both;
    }
    @keyframes ease_in{
        0%{
            opacity: 0;
            padding-right: -60px;
        }
        50%{
            opacity: 0;
            padding-right: -60px;
        }
        100%{
            opacity: 1;
            padding-right: 0;
        }
    }
    .fixed-bottom.show_ctrl .pages {
        /* justify-content: flex-end; */
        animation-name: ease_out;
        animation-duration: .5s;
        animation-fill-mode: both;
    }
    @keyframes ease_out{
        0%{
            opacity: 0;
            padding-right: 0;
        }
        100%{
            opacity: 1;
            padding-right: 60px;
        }
    }
}
@media (max-width: 1550px){
    .list-img li{
        width: calc(100% / 5);
    }
}
@media (max-width: 1440px){
    .site-nav {
        width: 180px;
    }
    .site-header,
    .site-main,
    .fixed-bottom{
        left: 220px;
    }
    .list-data .quty,
    .drag input {
        display: none;
    }
    .list-data div.drag{
        flex: 0 0 60px; /*因為少了.drag input */
    }
    .list-data .title .mo-quty { display: inline; }
    .list-img li{
        width: calc(100% / 4);
    }
    .row-2 > .col,
    .row-3 > .col{
        width: 100% !important;
        float: none;
        min-width: auto !important;
        max-width: 100% !important;
    }
    .row-2 > .col:nth-child(1),
    .row-2 > .col:nth-child(2),
    .row-3 > .col{
        margin-left: 0;
        margin-right: 0;
    }
    .main-title{
        font-size: 21px;
    }
}
@media (max-width: 1200px){
    .view1{
        width: auto;
        padding: 10px 0;
        margin-top: -10px;
        margin-bottom: 35px;
        background: #fff;
        text-align: right;
    }
    .view1 .view-top,
    .view1 .view-side,
    .view1 .view-right,
    .view1 .view-body,
    .view1 .view-cont,
    .view1 .view-bottom,
    .view1 .view-side .view-in{
        display: block;
        width: initial;
        height: auto;
        position: static;
        margin: 0 0 5px;
    }
}
@media (max-width: 1100px){
    .list-img li{
        width: calc(100% / 3);
    }
    .eformsmodel-fixed .btn-close,
    .upload-fixed .btn-close{
        right: inherit;
        left: 50%;
        top: -25px;
        padding: 0;
        color: transparent;
        margin-left: -19px;
    }
}
@media (max-width: 1024px){
    /* .site-nav {
        width: 170px;
    }
    .site-header,
    .site-main,
    .fixed-bottom{
        left: 200px;
    } */
    .control-label,
    .control-box{
        width: 100%;
    }
    .site-search .other_btn .mo-hid{
        display: none;
    }
}

/* 列印 */
.print-show{
    display:none;
}
@page { size: A4 portrait; margin: 10mm;}/*列印預設指定*/
@media print{
    .print-hide{/*列印時不顯示*/
        display:none;
    }
    .print-show{/*列印時才出現*/
        display:block;
    }
    * {
        -webkit-print-color-adjust: exact !important;
    }
    .site-header,
    .site-nav,
    .main-header,
    .fixed-bottom{
        display: none;
    }
    .site-main {
        position: static;
        top: inherit;
        right: inherit;
        left: inherit;
        bottom: inherit;
        width: 210mm;
    }
    .el-scrollbar__bar{
        opacity:0 !important;
    }
    .main-in .el-tabs__header{
        display: none;
    }
    .main-in{
        margin-top:0;
        padding: 0;
        background:none;
        border:none;
        box-shadow: 0 0 0 rgb(128 128 128 / 0);
    }
    .main-in.el-tabs > .el-tabs__content {
        padding: 0;
    }
}