/*
	index.css
	authour：stella
	create date：2015.12.18

	1.變數命名皆為小寫英文字母
	例：contentlink

	2.參數的位置順序為：單行順序。
	例：#mainlayer{background:#93ab21;color:white;font-size:18px;text-align:center;width:624px;height:472px;padding:0px;margin:0px;float:left;}
*/
@media (max-width:1023px) and (min-width:0px){
  /*-----banner start-----*/
  #banner{margin-top:40px;position:relative;height:300px;background:url('../../../public_images/index/jpg/m-banner-bg.jpg') no-repeat;background-position:center center;text-align:center;color:white;line-height:1.5;}|
  #banner::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);}
  /*火狐微調*/
  @-moz-document url-prefix(){#banner::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);}}
  #banner .section{padding-top:40px;}
  #banner .section #banner-summary{margin-bottom:20px;}
  #banner .section #banner-summary .banner-summary{display:inline-block;vertical-align:top;font-size:16px;border:1px solid white;}
  #banner .section #banner-summary #banner-summary-1{color:rgba(0,0,0,0.6);background:white;padding:1px 6px;}
  #banner .section #banner-summary #banner-summary-1 b{font-size: 16px;font-weight: bold;color: #ff4b85;}
  #banner .section #banner-summary #banner-summary-2{padding:1px 10px;margin-left:-6px;}
  #banner .section #banner-summary #banner-summary-2 b{font-size: 16px;font-weight: bold;color: #ff4b85;}
  #banner .section #banner-title{font-size:28px;margin-bottom:20px;}
  #banner .section #banner-slogan{font-size:12px;word-spacing:2px;}
  #banner .section #banner-slogan span{color:#ff4b85;font-size:14px;}
  #banner .banner-rabbit{background:url('../../../public_images/index/png/m-banner-rabbit.png') no-repeat;position:absolute;width:35px;height:70px;left:20px;bottom:0;}
  #banner .banner-carrots{background:url('../../../public_images/index/png/m-banner-carrots.png') no-repeat;position:absolute;width:50px;height:45px;right:20px;bottom:0;}
  /*-----banner end-----*/
  /*-----summary start-----*/
  #summary .section{display:none;}
  #summary #m-summary{height:400px;}
  #m-summary-title{margin: 20px 0px 10px 0px;text-align: center;font-size: 24px;font-weight: bold;color:#333333;}
  #m-summary-items{text-align: center;}
  .m-summary-section-item{width: 75%;margin: 10px auto 0px auto;}
  .m-summary-section-item-img{vertical-align: middle;width: 60px;height: 60px;margin-right: 15px;}
  .m-summary-section-item-description{font-size: 20px;}
  .m-summary-section-item-step{font-size: 28px;text-align: center;}
  /*-----summary end-----*/
  /*-----description start-----*/
  #description{height:275px;background:white;text-align:center;}
  #description .section{padding:50px 0;margin:0 20px;}
  #description .section #description-shop{margin-bottom:30px;}
  #description .section p{font-size:16px;line-height:1.5;}
  /*-----description end-----*/
  /*-----introduction start-----*/
  #introduction{background-image:url('../../../public_images/index/jpg/m-introduction-bg.jpg');background-repeat:no-repeat;background-attachment:fixed;}
  #introduction .section{display:none;}
  #introduction .m-section{width:320px;margin:0 auto;padding:50px 0;}
  #introduction .m-section .introduction-content .introduction-img-1{display:inline-block;vertical-align:top;margin-left:22px;}
  #introduction .m-section .introduction-content .introduction-list{display:inline-block;vertical-align:top;margin-left:10px;}
  #introduction .m-section .introduction-content .introduction-list ul{margin-top:22px;padding-left:20px;list-style-image:url(../../../public_images/index/png/m-introduction-img-list.png);font-size:16px;line-height:2;text-align:left;}
  #introduction .m-section .introduction-content .introduction-list ul li{margin-bottom:10px;}
  #introduction .m-section .introduction-content .introduction-list .composition-border-a{border-radius:3px;position:relative;border:1px solid #333333;width:120px;line-height:2;font-size:16px;text-align:center;display:inline-block;vertical-align:top;z-index:1;color:white;}
  #introduction .m-section .introduction-content .introduction-list .composition-border-a .composition-border-a-int{width:0px;height:0px;border-width:5px;border-style:solid;border-color:transparent transparent #333 transparent;position:absolute;top:-11px;left:15px;}
  #introduction .m-section .introduction-content .introduction-list .composition-border-a .composition-border-a-out{width:0px;height:0px;border-width:5px;border-style:solid;border-color:transparent transparent white transparent;position:absolute;top:-10px;left:15px;}
  #introduction .m-section .introduction-content .introduction-list .composition-border-b{border-radius:3px;position:absolute;border:1px solid #25b8f0;background:#25b8f0;width:120px;line-height:2;font-size:16px;text-align:center;display:inline-block;vertical-align:top;top:202px;left:174px;}
  @-moz-document url-prefix(){#introduction .m-section .introduction-content .introduction-list .composition-border-b{margin-top:5px;margin-left:-118px;}}
  #introduction .m-section .introduction-content .introduction-list .composition-border-b .composition-border-b-int{width:0px;height:0px;border-width:5px;border-style:solid;border-color:transparent transparent #25b8f0 transparent;position: absolute;top:-10px;left:15px;}
  #introduction .m-section .introduction-content .introduction-list .composition-border-b span{font-size:0;}
  #introduction .m-section h3{font-size:28px;text-align:center;margin:50px 0;line-height:1.5;}
  #introduction .m-section figure{position:relative;font-size:16px;margin-left:10px;}
  #introduction .m-section figure figcaption{position:absolute;margin-left:80px;line-height:1.2;text-align:left;}
  #introduction .m-section figure .introduction-text-1{top:243px;}
  #introduction .m-section figure .introduction-text-2{top:282px;}
  #introduction .m-section figure .introduction-text-3{top:343px;}
  /*-----introduction end-----*/
  /*-----magic start-----*/
  #magic{height:350px;background:url('../../../public_images/index/gif/magic-bg.gif') no-repeat;text-align:center;background-position:center center;}
  #magic .section{padding-top:30px;padding-bottom:35px;}
  #magic .section #magic-title{font-size:28px;color:white;margin:0 20px 20px;line-height:1.5;text-shadow:0 1px #ff8b23,0 2px #ff881d,0 3px #ff7900,0 4px #fc7800,0 5px #e46d00,3px 0 #ff7900,-3px 0 #ff7900,0 -3px #ff7900,-2.4px -2.4px #ff7900,2.4px 2.4px #ff7900, 2.4px -2.4px #ff7900,-2.4px 2.4px #ff7900,0 6px 1px rgba(0,0,0,0.1),0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.2),0 20px 20px rgba(0,0,0,0.15);}
  #magic .section #rabbit-says{background:url('../../../public_images/index/png/m-magic-text-box.png') no-repeat center;height:38px;line-height:29px;color:white;font-size:16px;margin-bottom:10px;}
  #magic .section #magic-img-1{width:200px;}
  /*-----magic end-----*/
  /*-----section-4全域設定開始-----*/
  .section-4 .section{padding:40px 0;margin:0 20px;}
  .section-4 .section .text-group{margin-bottom:40px;font-size:20px;color:#808080;line-height:1.5;}
  .section-4 .section .text-group .text-group-title{font-size:28px;color:#333333;margin-bottom:20px;}
  .section-4 .section .text-group .text-group-slogan{margin:20px 0px;color:#0066cc;}
  .section-4 .section .img-group{position:relative;text-align:center;font-size:12px;}
  /*-----section-4全域設定結束-----*/
  /*-----store-owners start-----*/
  #store-owners{background-color:#f7f7f7;}
  #store-owners .section .img-group{background:url('../../../public_images/index/png/m-store-owners-img.png') no-repeat;width:204px;height:230px;background-position:center center;margin:0 auto;}
  #store-owners .section .img-group .img-group-text{display:inline-block;position:absolute;top:32px;}
  #store-owners .section .img-group #img-group-photo{left:26px;}
  #store-owners .section .img-group #img-group-3D{left:82px;}
  #store-owners .section .img-group #img-group-video{left:138px;}
  #store-owners .section .img-group .img-group-text img{height:40px;}
  #store-owners .section .img-group .img-group-text .text{margin-top:10px;}
  /*-----store-owners end-----*/
  /*-----designers start-----*/
  #designers{background-color:white;}
  #designers .section .img-group{background:url('../../../public_images/index/png/m-designers-img.png') no-repeat;width:291px;height:230px;background-position:center center;margin:0 auto;}
  #designers .section .img-group .img-group-text{display:inline-block;position:absolute;top:85px;}
  #designers .section .img-group #img-group-slideshow{left:42px;}
  #designers .section .img-group #img-group-photo-album{left:115px;}
  #designers .section .img-group #img-group-photo-album .text{width:45px;}
  #designers .section .img-group #img-group-e-commerce{left:179px;}
  #designers .section .img-group .img-group-text img{height:35px;}
  #designers .section .img-group .img-group-text .text{margin-top:10px;}
  /*-----designers end-----*/
  /*-----business start-----*/
  #business{background-color:#f7f7f7;position:relative;}
  #business #demo-img{background:url('../../../public_images/index/png/m-demo-img.png') no-repeat;position:absolute;width:138px;height:95px;font-size:12px;color:white;left:5%;bottom:-9px;z-index:10;}
  #business #demo-img #demo-text{position:absolute;top:62px;left:92px;}
  #business .section .img-group{background:url('../../../public_images/index/png/m-business-img.png') no-repeat;width:245px;height:230px;background-position:center center;margin:0 auto;}
  #business .section .img-group .img-group-text{display:inline-block;position:absolute;top:60px;}
  #business .section .img-group #img-group-blog{left:22px;}
  #business .section .img-group #img-group-website{left:94px;}
  #business .section .img-group #img-group-online-store{left:160px;}
  #business .section .img-group .img-group-text img{height:55px;}
  #business .section .img-group .img-group-text .text{margin-top:10px;}
  /*-----business end-----*/
  /*-----demo start-----*/
  .demo .section{padding:40px 0;margin:0 20px;}
  .demo .section h3{background:url('../../../public_images/index/png/m-title-bg.png') no-repeat;background-position:center center;font-size:28px;line-height:50px;text-align:center;}
  /*-----demo end-----*/
  /*-----slideshow start-----*/
  #slideshow{position:relative;background:white;height:325px;}
  #slideshow #replace-img{background:url('../../../public_images/index/gif/m-replace-img.gif') no-repeat;position:absolute;width:180px;height:80px;font-size:9px;color:white;bottom:-3px;right:1%;z-index:50;}
  #slideshow #replace-img #replace-text{position:absolute;top:52px;left:59px;-moz-transform-origin:left bottom;-moz-transform:rotate(2deg);-webkit-transform-origin:left bottom;-webkit-transform:rotate(2deg);-o-transform-origin:left bottom;-o-transform:rotate(2deg);-ms-transform-origin:left bottom;-ms-transform:rotate(2deg);transform-origin:left bottom;transform:rotate(2deg);z-index:10;}
  /*-----slideshow end-----*/
  /*-----photo-album start-----*/
  #photo-album{background:url('../../../public_images/index/jpg/m-photo-album-bg.jpg') no-repeat;background-position:center center;}
  #photo-album .section{height:645px;}
  /*-----photo-album end-----*/
  /*-----drag-zoom start-----*/
  #drag-zoom{height:570px;background:#f7f7f7;}
  /*-----drag-zoom end-----*/
  /*-----feature1 start-----*/
  #features1{height:100%;}
  #features1 .features1{height:500px;padding:50px 25px;box-sizing:border-box;color:white;text-align:center;}
  #features1 #features1-left{background:#004e9d;}
  #features1 #features1-right{background:#004182;}
  #features1 .features1 h3{font-size:28px;line-height:1.5;margin-bottom:30px;}
  #features1 .features1 img{width:250px;height:auto;margin-bottom:30px;}
  #features1 .features1 p{width:250px;margin:0 auto;font-size:16px;line-height:1.5;text-align:left;}
  /*-----feature1 end-----*/
  /*-----features2 start-----*/
  #features2{background:white;}
  #features2 .section{padding-top:40px;}
  #features2 .section h3{margin:0 20px 30px;font-size:28px;text-align:center;background:url('../../../public_images/index/png/m-title-bg.png') no-repeat;background-position:center center;}
  #features2 .section ul{margin:0 20px 40px;text-align:center;display: none;}
  #features2 .section ul li{margin-bottom:30px;font-size:16px;color:#004182;text-align:center;}
  #features2 .section ul li .popup{padding:15px;background:#ff7900;color:white;line-height:1.5;border-radius:5px;text-align:left;position:relative;margin-bottom:35px;}
  #features2 .section ul li .popup::after{content:"";border-left:8px solid transparent;border-right:8px solid transparent;border-top:15px solid #ff7900;position:absolute;bottom:-15px;right:48%;}
  #features2 .section ul li img{border:1px solid #cccccc;border-radius:50px;margin-bottom:20px;}
  #features2 .section ul li img:hover{background-color:#0072e5;transition:background ease 0.5s;-webkit-transition:background ease 0.5s;-moz-transition:background ease 0.5s;}
  #features2 .section ul li p{line-height:1.5;}
  #features2 .combine .combine_block{color:white;font-size:16px;line-height:40px;background:#25b8f0;border-bottom:5px solid #0e98cd;text-align:center;cursor:pointer;}
  #features2 .combine .combine_block .fa{border:1px solid white;border-radius:100%;margin-right:5px;width:18px;height:18px;font-size:18px;}
  #features2 .combine #hide{display:none;}
  /*-----features2 end-----*/
  /*-----partners start-----*/
  #partners{display:none;background:linear-gradient(90deg,#4da7e2,#19689b);color:white;font-size:14px;line-height:1.5;}
  #partners::after{content:'';background:radial-gradient(#4da7e2,#19689b);}
  #partners .section #partners-img{background:url('../../../public_images/index/png/m-joinus-img-1.png') no-repeat;background-position:center center;width:300px;height:204px;margin:0 auto 30px;position:relative;}
  #partners .section #partners-img #partners-text{font-size:20px;position:absolute;top:50%;left:62%;letter-spacing:2px;-moz-transform-origin:left bottom;-moz-transform:rotate(-6deg);-webkit-transform-origin:left bottom;-webkit-transform:rotate(-6deg);-o-transform-origin:left bottom;-o-transform:rotate(-6deg);-ms-transform-origin:left bottom;-ms-transform:rotate(-6deg);transform-origin:left bottom;transform: rotate(-6deg);text-shadow:black 0px 2px,black 2px 0px, black -2px 0px,black 0px -2px,black -1.4px -1.4px,black 1.4px 1.4px,black 1.4px -1.4px,black -1.4px 1.4px;}
  #partners .section .partners-form .title{display:block;margin:0 20px 10px;padding:6px 5px;border:3px solid white;text-align:center;font-size:20px;}
  #partners .section .partners-form .text{margin:10px 20px;}
  #partners .section .partners-form form{margin:0 20px;}
  #partners .section .partners-form form .list{margin-bottom:15px;}
  #partners .section .partners-form form .list label{display:block;margin-bottom:5px;}
  #partners .section .partners-form form .list input,select,textarea{line-height:18px;padding:2px 5px;background:rgba(100%,100%,100%,0.5);font-size:12px;color:#333333;border:1px solid white;box-sizing:border-box;width:100%;}
  #partners .section .partners-form form .list input:focus,select:focus,textarea:focus{box-shadow: 0px 0px 15px rgba(100%,100%,100%,0.8);outline:none;transition:box-shadow ease 0.5s;-webkit-transition:box-shadow ease 0.5s;-moz-transition:box-shadow ease 0.5s;}
  #partners .section .partners-form form .btn{text-align:center;margin:20px 0;}
  #partners .section .partners-form form .btn input{height:24px;padding:0 15px;background:#ff7900;font-size:12px;color:white;border:1px solid white;cursor:pointer;}
  #partners .section .partners-form form .btn input:hover{background:#ff9639;transition: background ease 0.5s;-webkit-transition: background ease 0.5s;-moz-transition: background ease 0.5s;}
  /*-----partners end-----*/
  /*-----join us start-----*/
  #joinus{height:280px;background:url('../../../public_images/index/jpg/joinus-bg.jpg') no-repeat;background-position-x:-420px;color:white;font-size:20px;line-height:1.5;}
  #joinus .section #joinus-img{background:url('../../../public_images/index/png/m-joinus-img-1.png') no-repeat;background-position:center center;width:300px;height:204px;margin:0 auto 30px;position:relative;}
  #joinus .section #joinus-img #joinus-text{position:absolute;top:50%;left:62%;letter-spacing:2px;-moz-transform-origin:left bottom;-moz-transform:rotate(-6deg);-webkit-transform-origin:left bottom;-webkit-transform:rotate(-6deg);-o-transform-origin:left bottom;-o-transform:rotate(-6deg);-ms-transform-origin:left bottom;-ms-transform:rotate(-6deg);transform-origin:left bottom;transform: rotate(-6deg);text-shadow:black 0px 2px,black 2px 0px, black -2px 0px,black 0px -2px,black -1.4px -1.4px,black 1.4px 1.4px,black 1.4px -1.4px,black -1.4px 1.4px;}
  #joinus .section .content{text-align:center;}
  #joinus .section .content #joinus-link{display:none;;margin:0 auto;padding:6px 5px;border:3px solid white;width:230px;}
  #joinus .section .content #joinus-link:hover{background:rgba(100%,100%,100%,0.3);transition:background ease 0.5s;-webkit-transition:background ease 0.5s;-moz-transition:background ease 0.5s;}
  /*-----join us end-----*/

/*暫放*/
.mobiletest-div{display:none}
}