@charset "utf-8";
/* CSS Document */
/* Art Tangency Creation - 天井創意 CaGe Wei @art-tangency.com */

/* ============= Setting ============= */
@font-face {

/*圓體*/

  font-family: 'cwTeXYen';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}
body {width:100%; padding:0px; background:rgba(246, 147, 173, 0.5); overflow:hidden;}
body.action{overflow-x:hidden; overflow-y:auto;}
h1, h2, h3, h4 {box-sizing:border-box; padding:10px 0px; line-height:140%; font-family: 'cwTeXYen';}
h1 {font-size:1.8em; font-weight:500; letter-spacing:1px;}
h2 {font-size:1.4em; font-weight:400;}
h3 {font-size:1.1em; font-weight:400;}
hr {height:1px; background:#666;}
input, textarea, select, option {outline:none; padding:2px 5px;}
input[type="submit"], input[type="button"] {cursor:pointer;}
.height_F {/*Full Height @ at_cage.js*/}
.height_F2 {/*Full Height - header @ at_cage.js*/}
/* ============= Basic ============= */
.loadPad {width:100%; height:100%; text-align:center; background:#fff; position:fixed; top:0px; z-index:999999;}
.backTop {
	width:50px; height:50px; line-height:50px; position:fixed; right:25px; bottom:55px; opacity:0; background-color:rgba(245, 137, 166, 0.9); z-index:10;
	-webkit-border-radius:26px; -moz-border-radius:26px; -o-border-radius:26px; border-radius:26px;}
.backTop::before {
	content:'\f106'; display:inline-block; font:normal normal normal 1.4em FontAwesome; 
	color:#fff; width:inherit; height:inherit; line-height:inherit; text-align:center; vertical-align:top;}
.backTop:hover {background-color:rgba(158, 0, 79, 0.9);}
.backTop:hover::before {color:#fff;}

input[type='text'], input[type='email'], input[type='password'] {padding:2px 5px; line-height:30px; border:thin solid #acacac;}
input[type='radio'] {width:30px; height:30px; margin:5px;}
input[type='submit'] {padding:5px 20px; background:#333; color:#fefefe; font-size:14px; line-height:160%;}
input[type='submit']:hover {background:#000; color:#fff;}
select {}
::-webkit-input-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
::-moz-placeholder {color:#999;}
:-ms-input-placeholder {color:#999;}

i[class^="icon_"], i[class*="icon_"] {}

/* Model */
#main{margin:0px; width:100vw; background:none; position:relative;}

.CG_yt169 {position:relative; height:0px; overflow:hidden; padding:0px 0px 56.25%;}/*Youtube*/
.CG_yt169 iframe, .CG_yt169 object, .CG_yt169 embed {position:absolute; width:100%; height:100%; top:0px; left:0px;}

.CG_scorll::-webkit-scrollbar {width:5px;}
.CG_scorll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
.CG_scorll::-webkit-scrollbar-thumb {background-color:#85d7d1; outline: 1px solid slategrey;}

.switchImage{} .switchImage img:first-child{display:block;} .switchImage img:last-child{display:none;}/*RWD Image*/
@media only screen and (max-width: 640px) {.switchImage img:first-child{display:none;} .switchImage img:last-child{display:block;}}

.searchPad {width:100%; margin:0px auto; display:table-row;}/*SearchBar*/
.searchPad > ul {border:1px solid #aaa; display:table-row;}
.searchPad > ul > li {box-sizing:border-box; padding:5px; display:table-cell;}
.searchPad > ul > li:last-child {width:50px;}
.searchPad > ul > li input {width:100%; height:40px; line-height:40px; border:none; color:#333;}
.searchPad > ul > li:last-child a {width:100%;color:#85d7d1; display:block;}
.searchPad > ul > li:last-child a:hover {width:100%; color:#FF8789;}
.searchPad > ul > li:last-child a::before {content:'\f002'; font-size:1rem; line-height:inherit;  display:block; font-family:'FontAwesome';}

.dragPad {}/*Drag items*/
.dragPad > ul.items {}
.dragPad > ul.items li {cursor:pointer;}

/* over line */
p.ovLine {width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* parallax _ wagerfield */
ul#scene {width:100%; height:inherit; display:block; overflow:hidden; position:relative;}
ul#scene > li {width:100%; height:inherit;}
ul#scene > li > img {width:auto; height:100%; position:absolute;}

/* ============= Index ============= */
.indexPad{position: absolute;}
.indexPad .inTable{display:table;}
.indexPad .inTable .td{display:table-cell; min-width:calc(100vw/3);}
.indexPad .menuPad{cursor:pointer; z-index: 5;}
.indexPad .menuPad{
	left:0;
	-webkit-transition:left 0.8s ease-out;
	   -moz-transition:left 0.8s ease-out;
	    -ms-transition:left 0.8s ease-out;
	     -o-transition:left 0.8s ease-out;
	        transition:left 0.8s ease-out;
}
.indexPad.action .menuPad:nth-of-type(1){left:110%;}
.indexPad.action .menuPad:nth-of-type(2){left:80%;}
.indexPad.action .menuPad:nth-of-type(3){left:50%;}
.indexPad.action{
	-webkit-animation: sl 1s ease-out;
       -moz-animation: sl 1s ease-out;
        -ms-animation: sl 1s ease-out;
         -o-animation: sl 1s ease-out;
            animation: sl 1s ease-out;
/*	display: none;*/
}
@keyframes sl{
	from{display: block;}
	to{display: none;}
}

.indexPad li{
	height:100vh; box-sizing:border-box; overflow:hidden; background-color:#f693ad;
	-webkit-box-shadow:-3px 0 25px 0 #773b4f; box-shadow:-3px 0 25px 0 #773b4f;}
.indexPad li:hover {background-color:#f5809f;}
.indexPad li span{width:96%; height:30px; position:absolute; margin-top:60vh; display:block;}
.indexPad li .about_icon{background:url(../images/icon_about.svg) no-repeat right;}
.indexPad li .qa_icon{background:url(../images/icon_qa.svg) no-repeat right;}
.indexPad li .shop_icon{background:url(../images/icon_shopping_car.svg) no-repeat right;}

.indexPad li h1{position:absolute; opacity:0;}
.indexPad .introPad .logo{
	width:100%; height:auto; margin:5% auto 0; padding:20% 0; background:url(../images/chimibear_logo_index.png) no-repeat center; background-size:80% auto;}

/* basic */
.conPad{
	width:100vw; position:relative; top:0; padding:70px; text-align:center; z-index:1; opacity:1; display:none;
	background:url(../images/dashline.png) #fff 99% 0px;
	background-repeat:repeat-y;	background-size: 30px auto;
	-webkit-animation: dp 1s ease-out;
       -moz-animation: dp 1s ease-out;
        -ms-animation: dp 1s ease-out;
         -o-animation: dp 1s ease-out;
            animation: dp 1s ease-out;
}
@keyframes dp{
	from{opacity:1;}
	to{opacity:0;}
}

#main.actionA .conPad:nth-of-type(2){
	-webkit-animation: ap 1.5s ease-out;
       -moz-animation: ap 1.5s ease-out;
        -ms-animation: ap 1.5s ease-out;
         -o-animation: ap 1.5s ease-out;
            animation: ap 1.5s ease-out;
	display: block;
}
@keyframes ap{
	from{opacity:0;}
	to{opacity:1;}
}
#main.actionB .conPad:nth-of-type(3){
	-webkit-animation: ap 1.5s ease-out;
       -moz-animation: ap 1.5s ease-out;
        -ms-animation: ap 1.5s ease-out;
         -o-animation: ap 1.5s ease-out;
            animation: ap 1.5s ease-out;
	display: block;
}
@keyframes ap{
	from{opacity:0;}
	to{opacity:1;}
}

.conPad .logo img{width:auto; height:100px;}
.conPad .backBt{width:50px; z-index: 10; position:fixed; top:10%; right:10%;}
.conPad .back{
	background:url(../images/icon_back.svg) no-repeat; background-size:100%; width:50px; height:50px; position:relative; display:block; font-size:4em; color:#f693ad; line-height:50px; cursor:pointer;}
.conPad h2 {padding-top:20px; font-size:2em; font-weight:600; color:#9e004f; letter-spacing:3px;}
.conPad h3{font-size:1.5em; font-weight:600; letter-spacing:0.1em; color:#9D004F;}
.conPad p{
	padding:5px 0 5px 1.3em; color:#555; line-height:2em; font-weight:600; letter-spacing:0.15em; text-indent:-1.3em;}
.conPad p:first-of-type{padding-left:0; text-indent:0;}
.conPad > p:nth-child(5){color:#643C78; font-size:1.2em; font-weight:500;}
.conPad .bgCon{width:50vw; margin:20px auto; text-align:left;}
.conPad .bgCon span{color:#cc7085;}
.conPad .bgCon span span{
	display:inline-block; vertical-align:top; margin-left:0.2em; text-indent:0; margin-top:-0.05em;}
.conPad .dashlineImg{
	width:100%; height:35px; margin-top:10px; display:block; background:url(../images/dashline_h.png) repeat-x; background-size:auto 50%;}

/* origin 關於我 */
.origin i{
	padding-top:15px; padding-bottom:0; display:block; color:#F589A5; font-size:2em; font-weight:500; letter-spacing: 0.1em;}
.origin .bgCon .p_icon{
	width:20px; display:inline-block; background:url(../images/icon_spot.svg) no-repeat; background-size:contain; vertical-align: middle;}
.origin .bgCon p:last-child{padding-top:20px; text-align:center;}

/* order 訂購說明 */
.order h4{
	padding:25px 0 15px 45px; font-size:1.35em; font-weight:600; color:#555; letter-spacing:0.2em; line-height: 1.6em; text-indent:-2.1em;}
.order p{font-style:normal; line-height:1.5em;}
.order p a, .order p a:active{color:#cc7085;}
.order p a:hover{color:#ec2459;}
.order h4 span{font-family:"Raleway","Microsoft JhengHei","LiHei Pro Medium","Apple LiGothic Medium","SimHei";}
.order h4 .hiLight{padding:0 5px; font-size:1.1em; color:#cc7085;}
.order h4 .hiLight:hover{color:#ec2459;}
.order p.hiLight {
	width: auto; margin-bottom: 0.5em; padding: 0.2em 1em; display: inline-block; font-size: 1.2em; color: #9D004F; text-indent: 0; border: solid 1px #9D004F;}
.order .note{line-height:1.7em; padding-left:0; text-indent:0;}
.order p a.hiLight, .order p a.hiLight:active{
	padding: 0.2em 1em; margin-bottom: 0.5em; display: inline-block; font-size: 1.2em; text-indent: 0; border: solid 1px #cc7085;}
/* ============= Inner ============= */


/* ============= Header ============= */
#header {width:100%; height:40px; color:#999; background:#fff;}
.headerConts {max-width:980px; width:100%; line-height:40px; margin:0px auto; text-align:center;}


/* ============= Footer ============= */
#footer {
	width:100%; height:45px; bottom:0; background:rgba(245, 137, 166, 0.8); color:#fff; text-align:center; line-height:45px; z-index:10; position:fixed;
	-webkit-box-shadow:0 1px 5px 0 #773b4f; box-shadow:0 1px 5px 0 #773b4f;
}
.footerCont {max-width:980px; width:100%; line-height:38px; margin:0px auto; text-align:center; font-size:12px; border:none;}
.footerCont a {color:#aaa;} .footerCont a:hover {color:#933;}

.fb-like-box {position:absolute !important; right:0px !important; width:250px !important; top:15px !important; overflow:hidden; opacity:0.7;}
.fb-like-box:hover {opacity:1;}

/* ============= RWD Setting ============= */
@media only screen and (max-width: 1280px) {
	.indexPad .introPad .logo{margin:8% auto 0; background-size:90% auto;}
	
	.conPad .bgCon {width:80vw;}
}
@media only screen and (max-width: 1024px) {
	/*Basic*/
	.indexPad .introPad .logo{margin: 15% auto 0;}
	
	input[type=submit], input[type=button] {
		-webkit-appearance: none; -moz-appearance:none; appearance:none;}
	.conPad {padding:40px;}
}
@media only screen and (max-width: 768px) {
	.indexPad li span {height: 25px;}
	.indexPad .introPad .logo{width:100%; padding:23% 0;}
	.backTop, .backTop:hover{background-color:rgba(245, 137, 166, 0.7);}
	.backTop:hover::before {color:#fff;}
	.conPad h3{font-size:1.3em;}
	.order h4{padding:25px 0 15px 1.5em; font-size:1.2em; letter-spacing:0; text-indent:-1.5em;}
}
@media only screen and (max-width: 600px) {

}
@media only screen and (max-width: 460px) {
	.indexPad .introPad .logo {margin: 20% auto 0;}
	.conPad {padding:20px;}
	.conPad .backBt{top:18%; right:5%;}
	.conPad .back{background-size:85%;}
	.order .note{line-height:1.5em;}
	.order h4{font-size:1.1em;}
	.conPad p {font-size: 0.9em;}
	.conPad > p:nth-child(5) {font-size:1em;}
	#footer{height:auto; padding-bottom:0.5em; font-size:0.7em; line-height:30px;}
	#footer #siteseal img {width:20%;}
}
@media only screen and (max-width: 375px) {
	.indexPad li span{width:90%; height:110px; position:absolute; margin-top:50vh; display:block; cursor: pointer;}
	.indexPad li .about_icon{background:url(../images/icon_about_l.svg) no-repeat top right; background-size:25px auto;}
	.indexPad li .qa_icon{background:url(../images/icon_qa_l.svg) no-repeat top right; background-size:25px auto;}
	.indexPad li .shop_icon{background:url(../images/icon_shopping_car_l.svg) no-repeat top right; background-size:25px auto;}
	.indexPad .introPad .logo {margin: 25% auto 0;}

	.conPad .logo img {width:auto; height:auto;}
}
@media only screen and (max-width: 320px) {
	#footer{line-height:20px;}

}