themes/imgthemes1/css/index.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;font-size:14px;}
.clearfix{zoom:1;}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;overflow:hidden;height:0px;}
body{position:relative;font-family: 微軟正黑體;
	word-break: break-all;
	word-wrap: break-word;background-color:#FFF;font-size:14px;line-height:1.428571429;}
ul,li{list-style:none;margin:0;padding:0;}
img,span{display:inline-block;max-width:100%;}
a{color:#464c5c;}

.img-responsive{max-width:100%;display:block;}
.elementBlock{display:block !important;}
.elementNone{display:none !important;}
.elementhidden{visibility:hidden !important;}
.verMiddle{vertical-align:middle !important;}
.vercenter{text-align:center !important;}
.verbold{font-weight:bold !important;}
.opacityshow{opacity:1 !important;}
.qcmargin{margin:0 !important;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:link{text-decoration:none;}

.lampshow{background-color:#222}
.main_style{padding-top:64px;}
.navbar-default {
    background-color:#FFF;
}
.navbar .navbar-brand {
    font-family: Brush Script MT;
    font-weight: normal;
    color:#b1afaf;
    font-size: 21px;
    line-height: 21px;
    padding:0 14px 0 13px;
    height:auto;
    margin-top:10px;
    text-shadow:1px 1px 0 rgb(122 122 122),
        1px 1px 5px rgb(183 183 183 / 80%);
}
.navbar .navbar-brand img{width:30px;display:inline-block;}
/* .navbar{box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .6);} */
.navbar .navbar-toggle{padding:0;border:none;margin-top:10px;}
.navbar .mr_button{border:none;background:none;}
.navbar svg{cursor:pointer;color: #6c6c6c;}
.navbar svg:hover{color:#000;}
.navbar .navbar-toggle:focus,
.navbar .navbar-toggle:hover{background:none;}
.nb_right{padding:10px 2% 0 0;}
.nb_right .iconr2{margin:3px 0 0 10px;}

.im_mainl{margin:0 10px 12px 10px;}
.bor_radius{border-radius:10px;}
.im_img{transform:scale(1);transition:all 0.5s ease;object-fit:cover;display:block;width:100%;height:100%;}
.im_img:hover{transform:scale(1.03);}
.im_item{padding:5px;height:16vw;overflow:hidden;}
.im_item>a{overflow: hidden;display:block;position:relative;width: 100%;height: 100%;}
.im_img_title{background:rgba(7, 7, 7, .3);position:absolute;left:0;right:0;bottom:0;top:0;color:#FFF;border-radius:10px;}
.im_item:hover .im_img{transform:scale(1.03);}
.im_img_title span{position:absolute;bottom:10px;left:10px;margin-right:10px;font-weight:bold;padding:5px;border:solid 2px #FFF;border-radius:10px;}

.web_info{padding:10px 0 42px 0;margin-top:15px;border-top:solid 1px #f5f5f5;}
.web_info p{color:#808080;font-size:13px;margin:5px 0;}
.web_info a{text-decoration: underline;color:#808080;}
.web_info a:hover{color:#000;}

.btrt_side{position:fixed;bottom:46px;right:16px;transition:all 0.5s ease;}
.btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5;}
.btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;}
.scroll_top{display:none;}
.btrt_side_ul li svg{width:18px;cursor:pointer;}

.blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099}
.right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100;}
.right_sidebox>h5{display:flex;padding:15px 0 10px 0;border-bottom:solid 1px #e9e2e2;margin-bottom:20px;}
.right_sidebox>h5 span{font-size:20px;font-weight:bold;flex: 1;}
.right_sidebox .link{text-decoration: underline;color:#457fc1;}
.right_sidebox .sort1{font-size:16px;font-weight:bold;margin-top:10px;}
.right_sidebox p{margin:5px 0;}
.right_sidebox .codeimg{width:48%;}
.sideboxShow{animation:bounceInRight 0.5s ease forwards;}

.page_meta{padding:10px 0 0 0;}
.page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0;}

@media screen and (max-width: 1199px) {
    .im_item {
        height: 23vw;
    }
}

@media screen and (max-width: 991px) {
    .im_item {
        height: 32vw;
    }
}

@media screen and (max-width: 767px) {
    .im_item {
        height: 45vw;
    }
}


@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}