html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.move{
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;}
/* banner */
#banner{
    display: block;
    width: 100%;
    width:100vw;
    overflow: hidden;
    position: relative;
    background-image:url(../images/bg.jpg);
    background-size: cover;
}
.ch-header {
    z-index: 99;
    position: relative;
    border-top: 3px solid #094;
}
.container {
    width: 1330px;
    margin: auto;
}
.ch-logo {
    margin: 10px;
    display: inline-block;
}
.ch-logo img {
    height: 50px;
}
img.banner_001,img.banner_002,img.banner_003,
img.banner_004,img.banner_005,img.banner_006,
img.banner_007,img.banner_008,img.banner_009,
img.banner_010,img.banner_011,img.banner_012,
img.banner_013,img.banner_014,img.banner_015,
img.banner_016,img.banner_017{ position:absolute;display: block;height:auto}

img.banner_001 {animation: example 10.5s alternate infinite;}
img.banner_002 {animation: example 12s alternate infinite;}
img.banner_003 {animation: example 13s alternate infinite;}
img.banner_004 {animation: example 11s alternate infinite;}


img.banner_005 {animation: example 10.5s alternate infinite;}
img.banner_006 {animation: example 12s alternate infinite;}
img.banner_007 {animation: example 14s alternate infinite;}
img.banner_008 {animation: example 11s alternate infinite;}
img.banner_009 {animation: example 10s alternate infinite;}

@-webkit-keyframes example {
    0%   {filter: blur(10px);opacity:0;}
    10% {filter: blur(5px);opacity:0.5;}
    20% {filter: blur(0px);opacity:1;}
    80% {filter: blur(0px);opacity:1;}
    90% {filter: blur(5px);opacity:0.5;} 
    100%   {filter: blur(10px);opacity:0.1;}
    130%   {filter: blur(10px);opacity:0;}
    }
    
    @keyframes example {
    0%   {filter: blur(10px);opacity:0;}
    10% {filter: blur(5px);opacity:0.5;}
    20% {filter: blur(0px);opacity:1;}
    80% {filter: blur(0px);opacity:1;}
    90% {filter: blur(5px);opacity:0.5;} 
    100%   {filter: blur(10px);opacity:0.1;}
    130%   {filter: blur(10px);opacity:0;}
    }
    img.banner_010{-webkit-animation-delay:0.2s;animation-delay:0.2s;animation-duration: 4s}
    img.banner_011{-webkit-animation-delay:0.4s;animation-delay:0.4s;animation-duration: 3s}
    img.banner_012{-webkit-animation-delay:0.2s;animation-delay:0.2s;animation-duration: 4s}
    img.banner_013{-webkit-animation-delay:0.4s;animation-delay:0.4s;animation-duration: 3s}
    img.banner_014{-webkit-animation-delay:0.5s;animation-delay:0.5s;animation-duration: 4s}
    img.banner_015{-webkit-animation-delay:0.3s;animation-delay:0.3s;animation-duration: 6s}
    img.banner_016{-webkit-animation-delay:0.5s;animation-delay:0.5s;animation-duration: 5s}
    img.banner_017{-webkit-animation-delay:0.3s;animation-delay:0.3s;animation-duration: 6s}


@media (min-width: 971px) {
    #banner{width:100vw;height: 100vh}
    img.banner_001{top: 10%;right: 15%;z-index:10;max-width: 310px;width: 15vw;}
    img.banner_002{bottom: 34%;left: 20%;z-index: 10;max-width: 205px;width: 10vw;}
    img.banner_003{top: 8%;left: 16%;z-index: 48;max-width: 330px;width: 15vw;}
    img.banner_004{top: 16%;left: 44%;z-index: 12;max-width: 150px;width: 6vw;}
    img.banner_005{bottom: 20%;right: 31%;z-index:9;max-width: 190px;width: 10vw;}
    img.banner_006{bottom: 4%;left: 39%;z-index:9;max-width: 279px;width: 14vw;}
    img.banner_007{bottom: 14%;left: 25%;z-index:9;max-width: 104px;width: 6vw;}
    img.banner_008{top: 5%;right: 34%;z-index:9;max-width: 215px;width: 10vw;}
    img.banner_009{bottom: 27%;right: 15%;z-index:9;max-width: 300px;width: 14vw;}
    img.banner_010{bottom: 47%;right: 32%;z-index:9;max-width: 80px;width: 4vw;}
    img.banner_011{top: 5%;left: 41%;z-index:9;max-width: 90px;width: 4vw;}
    img.banner_012{top: 6%;right: 24%;z-index:2;max-width: 130px;width: 8vw;}
    img.banner_013{bottom: 24%;left: 33%;z-index:2;max-width: 130px;width: 7vw;}
    img.banner_014{bottom: 21%;right: 18%;z-index:2;max-width: 130px;width: 8vw;}
    img.banner_015{top: 5%;left: 29%;z-index:2;max-width: 130px;width: 6vw;}
    img.bg2{top: 0%;left: 0%;z-index:3;width: 100%;height: 100vh;display: block;position: absolute;}
    
    img.banner_016{top: 40%;left: calc(50% - 18vw);z-index:9;/*max-width: 600px;*/width: 36vw;}
    img.banner_017{top: 50%;left: calc(50% - 10vw);z-index:9;/*max-width: 500px;*/width: 20vw;}
    }

@media (min-width: 1440px) {
    img.banner_016{max-width: 600px;left: calc(50% - 300px);}
    img.banner_017{max-width: 500px;}
}

@media (min-width: 493px) and (max-width:970px) {

    #banner{width:100vw;height: 100vh}
    img.banner_001{top: 10%;right: -1%;z-index:10;max-width: 310px;width: 24vw;}
    img.banner_002{bottom: 34%;left: 6%;z-index: 10;max-width: 205px;width: 16vw;}
    img.banner_003{top: 3%;left: 9%;z-index: 48;max-width: 330px;width: 25vw;}
    img.banner_004{top: 16%;left: 36%;z-index: 12;max-width: 150px;width: 14vw;}
    img.banner_005{bottom: 20%;right: 31%;z-index:9;max-width: 190px;width: 18vw;}
    img.banner_006{bottom: 4%;left: 31%;z-index:9;max-width: 279px;width: 23vw;}
    img.banner_007{bottom: 14%;left: 7%;z-index:9;max-width: 104px;width: 12vw;}
    img.banner_008{top: 5%;right: 26%;z-index:9;max-width: 215px;width: 18vw;}
    img.banner_009{bottom: 27%;right: 0%;z-index:9;max-width: 300px;width: 29vw;}
    img.banner_010{bottom: 8%;right: 23%;z-index:9;max-width: 80px;width: 9vw;}
    img.banner_011{top: 2%;left: 41%;z-index:9;max-width: 90px;width: 9vw;}
    img.banner_012{top: 6%;right: 24%;z-index:2;max-width: 130px;width: 8vw;}
    img.banner_013{bottom: 24%;left: 33%;z-index:2;max-width: 130px;width: 7vw;}
    img.banner_014{bottom: 21%;right: 18%;z-index:2;max-width: 130px;width: 8vw;}
    img.banner_015{top: 5%;left: 29%;z-index:2;max-width: 130px;width: 6vw;}
    img.bg2{top: 0%;left: 0%;z-index:3;width: 100%;height: 100vh;display: block;position: absolute;}
    
    img.banner_016{top: 31%;left: 18%;z-index:9;max-width: 600px;width: 75vw;}
    img.banner_017{top: 40%;left: 23%;z-index:9;max-width: 500px;width: 45vw;}
    }
    



@media (min-width: 200px) and (max-width:492px) {
    .ch-logo img {
        height: 40px;
    }
    #banner{width:100vw;height:100vh;}
    img.banner_001{top: 10%;right: -7%;z-index:10;max-width: 310px;width: 32vw;}
    img.banner_002{bottom: 34%;left: 3%;z-index: 10;max-width: 205px;width: 21vw;}
    img.banner_003{top: 3%;left: 6%;z-index: 48;max-width: 330px;width: 31vw;}
    img.banner_004{top: 16%;left: 36%;z-index: 12;max-width: 150px;width: 18vw;}
    img.banner_005{bottom: 28%;right: 31%;z-index:9;max-width: 190px;width: 18vw;}
    img.banner_006{bottom: 3%;left: 31%;z-index:9;max-width: 279px;width: 36vw;}
    img.banner_007{bottom: 14%;left: 7%;z-index:9;max-width: 104px;width: 17vw;}
    img.banner_008{top: 5%;right: 26%;z-index:9;max-width: 215px;width: 18vw;}
    img.banner_009{bottom: 27%;right: 0%;z-index:9;max-width: 300px;width: 29vw;}
    img.banner_010{bottom: 46%;right: 8%;z-index:9;max-width: 80px;width: 9vw;}
    img.banner_011{top: 2%;left: 41%;z-index:9;max-width: 90px;width: 9vw;}
    img.banner_012{top: 6%;right: 24%;z-index:2;max-width: 130px;width: 8vw;}
    img.banner_013{bottom: 24%;left: 33%;z-index:2;max-width: 130px;width: 7vw;}
    img.banner_014{bottom: 21%;right: 18%;z-index:2;max-width: 130px;width: 8vw;}
    img.banner_015{top: 5%;left: 29%;z-index:2;max-width: 130px;width: 6vw;}
    img.bg2{top: 0%;left: 0%;z-index:3;width: 100%;height: 100vh;display: block;position: absolute;}
    
    img.banner_016{top: 35%;left: calc(50% - 42vw);z-index:9;max-width: 600px;width: 84vw;}
    img.banner_017{top: 44%;left: calc(50% - 30vw);z-index:9;max-width: 500px;width: 60vw;}


}