@charset "utf-8";
/* 這是處理 android 表格的問題 */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {-webkit-text-fill-color: #fff;}
/*select{-webkit-appearance:none;}*/
.fixfont{font-size:100%!important;}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
	-webkit-text-fill-color: #444 !important;
}
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.fullimg{width:100%;}
.bf0f0f0{background:#f0f0f0!important;}
.beeeeee{background:#eeeeee!important;}
/*
##### 色卡##########
------------
底色
------------
#000--黑底
#5dc0bd---蒂芬妮
e0f6f4--淺按鍵
21a0b8---已選按鍵
---------------------
字大小
2.2vw 3.6vw  -h1
1.8vw 3vw    -h2
1.5vw 2.4vw  -h3
1.3vw 1.8vw  -p
1.2vw 1.6vw  -p
1.1vw 1.5vw  -p


-----------
字色
----------
#fff;
#5dc0bd;---蒂芬妮
#818181

.bf0f0f0
/*
#########################################################
#  共 享 設 定
##########################################################
*/
.acc_box{position:relative;z-index:1;}
.bg235d3a{color:#235d3a!important; font-weight:500;text-decoration: underline;}
html, body{background:#fefefe;background-repeat: repeat; background-position:top center;}
.show400{display:none!important;}
.search{display:none;}
.hide400{display:block;}
.hide400line{display:inline;padding-top: 18px;}
.centerwrap{position:relative;width:1098px;padding:0px;margin:0 auto;z-index:1;}/*有需要 relative 要另外加 */
.footerbottom{position: fixed;
    bottom: 0;}
.cutblock{position:relative;z-index:1;}/*共用..基本div 設定 relative;*/
/* padding */
.p1{padding:1vw 0;}
.pu1{padding:1vw 0 0 0;}
.pu2f{padding:2vw 0 0 0!important;}
.p2{padding:2vw 0;}
.pu2{padding:2vw 0 0 0;}
.p3{padding:3vw 0;}
.p32{padding:3vw 0 2vw 0;}
.p5{padding:5vw 0;}
.pb2{padding:2vw;}
/* margin */
.mu1{margin-top:1vw;}
.mu2{margin-top:2vw;}
.mu3{margin-top:3vw;}
.mu0{margin-top:0!important;}
.mv1{margin-top:1vw;margin-bottom:1vw;}
.mv2{margin-top:2vw;margin-bottom:2vw;}
.myerr{font-size:16px;line-height:24px;color:#ff6666;font-weight:bold;}
.b251c17{background:#251c17;}
/*background */
/*  單元 標題 */


/*子單元 標題 */

/*
#########################################################
#  H E A D E R
##########################################################
*/
header{position:fixed;z-index:9;top:0;left:0;width:100%;background:rgba(0,0,0,0.6);height:80px;}
header h1{position:absolute;top:0;left:0;font-size:35px;line-height:60px;display:inline-block;color:#ffffff;margin-left:10px;z-index:2;}
/* menu */
.topmenuwrap{position:relative;padding-top:0;text-align:right;z-index:1;}
.topmenuwrapin{position:relative;height:80px;margin:0 auto;}
.topmenuwrapin .centerwrap{text-align:left;}
.navwrap{display:inline-block;float:right;}
.navitem{position:relative;display:inline-block;height:26px;padding:27px 0;float:left;}
.navitem .navtitle{font-size:20px;line-height:26px;color:#eeeeee;text-align:center;margin:0;padding:0 20px;border-right:1px solid #fff;}
.navitem:hover .subbox{display:block;}
.navitem.on{color:#ffffee;background:#3e362c!important;font-weight:400;}
.navitem .subbox {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 150%;
    background: rgba(0,0,0,0.5);
    padding: 10px 0;
    font-size: 20px;
    line-height: 26px;
    color: #fff;
    text-align: center;
}
.navitem .subbox .item{position:relative;padding:0.3vw;}
.navitem .subbox .item:hover{color:#ffc217;}
.navitem .subbox .item.on{color:#ffc217;font-weight:400;background:rgba(0,0,0,0.2);}

.logoimage{height:80px;}
.logoimage img{position:absolute;top:50%;left:0;transform:translateY(-50%);}

.navitem.on .navtitle{border-bottom:2px solid #000000;color:#eeeeee;}
.navitem:last-child .navtitle{border-right:0;}




/*
#########################################################
麵包屑
*/
.breadcrumb{margin:10px 0;}
.breadcrumb a{font-size:14px;line-height: 30px;color:#000;}
.breadcrumb a i{font-size:20px;line-height: 30px;color:#397d54;margin-right:10px;}

/*
#########################################################
INDEX
*/
.indextoptext{position:relative;}
.indextoptext p{margin:10px 0;font-size:16px;line-height:25px;color:#3b3235;font-weight:normal;}
.indexblock2{background:#371206;background-position: top center;background-size:cover;}
.indexblock2.type2{background:#201914;}
.indexblock2.type2 img.bannerpic{width:100%;}

@keyframes diceme {
  5%{
    transform: rotate(0deg) /*translateY(-50%)*/;
  }
  10%{
    transform: rotate(15deg) /*translateY(-50%)*/;
  }
  15%{
    transform: rotate(-15deg) /*translateY(-50%)*/;
  }
  20%{
    transform: rotate(360deg) /*translateY(-50%)*/;
  }
 55%{
    transform: rotate(360deg) /*translateY(-50%)*/;
  }
  60%{
    transform: rotate(345deg) /*translateY(-50%)*/;
  }
  65%{
    transform: rotate(375deg) /*translateY(-50%)*/;
  }
  70%{
    transform: rotate(0deg) /*translateY(-50%)*/;
  }

}

/*
#########################################################
#  B A N N E R
##########################################################
*/
  .indexapp{padding:20px;background:#371206;text-align: center;}
  .indexappimg{padding:0 2vw;}
a{display:inline-block;}
.indexbanneroutwrap{position:relative;overflow:hidden;z-index:5;}
.indexbanner{position:relative;}
.indexbannerbg{position:relative;z-index:0;opacity:0;}/* indexbannerbg */
.indexbannerbg img{width:100%;}
.indexbannerwrap{z-index:1;position:absolute;top:-3px;left:-3px;width:calc(100% + 6px);height:calc(100% + 6px);padding:0;margin:0;overflow:hidden;}
/*.indexbannerwrap .acc_item{height:100%;}*/
.indexbannerbox{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.indexbannerbox .banneritem{float:left;display:inline-block;height:100%;}
.indexbannerwrap .indexbannerbox .banneritem{position:absolute;display:inline-block;height:calc(100% - 6px);z-index:1;margin:3px;opacity:0;transition: left 0.5s;}
.indexbannerwrap .indexbannerbox .banneritem.on{opacity:1;z-index:2;}
.indexbannerwrap .banneritem:focus{z-index:2;opacity:1;margin:0;}
.indexblocktitle{max-width:100%;padding-bottom:50px;}
.blocktitle{max-width:100%;padding-bottom:20px;}
.indexbanneritem{position:relative;height:100%;}
.banneritem{z-index:1;}
.indexbanneritem img{height:100%;}
.indexbannerdotwrap{padding:0;text-align:center;position:absolute;z-index:2;left:50%;bottom:60px;width:410px;max-width:96%;transform:translateX(-50%);height:auto;}
.bannerdotbg{position:relative;width:100%;z-index:0;}
.indexbannerdotinwrap{position:absolute;z-index:2;top:calc(50% - 13px);left:0;width:100%;height:26px;text-align:center;}
.indexbannerdot{display:inline-block;margin:0 5px;height:26px;width:26px;background:url(../img/bdotbg.png);}
.indexbannerdot.on{background:url(../img/bdotonbg.png);}

.indexbannerdotwrap a.bannerbtn{position:absolute;height:100%;width:13%;top:0;z-index:9;}
.indexbannerdotwrap  a.bannerbtn.bannerleft{left:0;}
.indexbannerdotwrap  a.bannerbtn.bannerright{right:0;}

.indexcountwrap{position:relative;background:url(../img/bkbg.jpg);background-position: center center;height:154px;z-index:1;}
.indexcountwrap .bg{}
.indexcountwrap .counterbg{position:absolute;top:25px;left:50%;transform: translateX(-50%);z-index:1;width:382px;height:110px;}
.indexcountwrap .counterbg img{position:absolute;top:0;left:0;width:100%;z-index:1;}
.indexcountwrap .countertextwrap{position:absolute;top:41px;left:10px;width:362px;display:flex;flex-direction: row;flex-wrap: nowrap;align-items:stretch;z-index:2;}
.indexcountwrap .countertextwrap .text{display:flex;flex: 1;justify-content: center;margin:0;text-align:center;font-size:35px;line-height:71px;color:#222;font-weight:bolder;}

.indexblock2 .bannerselect{display:inline-block;position:absolute;bottom:0px;right:0;height:30px;}
.indexblock2 .bannerselect a{display:inline-block; height:30px;width:30px;text-align:center;font-size:20px;border-radius: 6px;overflow:hidden;background:#397d54;margin-left:20px;}
.indexblock2 .bannerselect a i{font-size:20px;line-height:30px;color:#fff;}
.topbanner{}
.bannermore{text-align:center;margin:30px 0;}
.bannermore.type2{margin:15px 15px;}
/* index video */
.indexvideo{position: relative;height:100vh;overflow:hidden;min-height:600px;background:#000;}
.indexvideo video{position:absolute;z-index:1;top:50%;left:50%;Transform: translate(-50%, -50%);width:100%;min-height:100%;min-width:178vh;}
.videocover{position: relative;height:100%;width:100%;z-index:2;background:rgba(0,0,0,0.4);}
.videocontent{position:absolute;z-index:3;top:10%;left:0;width:100%;height:auto;text-align:center;}
.videocontent .centerwrap{padding-top:80px;}
.videocontent h3{color:#fff;font-size:32px;line-height:50px;text-align:center;padding:6vh 0;}
.gamename{color:rgba(47,9,1,0.7);font-size:48px;line-height:50px;text-align:center;padding:6vh 0;}
.videotopimg{max-width:80%;}
.videotopbtn{max-width:60%;}
.videosideimg{position:fixed;top:140px;right:0;right:50%;margin-right: -650px;z-index:39;-webkit-transform: translate3d(0,0,0);}
.videosideimg.icon2{top:280px;}
.videosideimg.off{display:block;}
/*
#########################################################
#  PAGE 相關
##########################################################
*/
h1.pagetitle{font-size:30px;line-height:60px;display:inline-block;padding-left:40px;color:#3b3235;border-bottom:2px solid #008f45;}
h1.pagetitle.type2{padding-left:0;}
p.pagep{font-size:16px;line-height:30px;color:#3e3a39;margin:15px 0;}
.pageline{margin:15px 0;border-bottom:1px solid #999;}
ol.sitemap{list-style-type: none;}
ol.sitemap li{font-size:20px;line-height:36px;color:#3e3a39;font-weight:bold;margin:20px 0;}
ol.sitemap li a{font-size:20px;line-height:36px;color:#3e3a39;font-weight:bold;}
ol.sitemap li ul{margin:0 0 0 10px;}
ol.sitemap li ul li{font-size:16px;line-height:24px;color:#3e3a39;font-weight:normal;margin:5px 0;}
ol.sitemap li ul li a{font-size:16px;line-height:24px;color:#3e3a39;font-weight:normal;}
ol.sitemap li ul>li:before {  padding: 0 10px 0 0;  content: "-";  font-weight: bold;}
/*
#########################################################
#  article 相關
##########################################################
*/
.artilewrap{margin:20px 0;}
.artilewrap h1.atitle{font-size:26px;line-height:40px;color:#222222;font-weight: bold;}
.artilewrap h3.atitle{font-size:20px;line-height:40px;color:#3b3235;font-weight: normal;}
.artilewrap .atag{display:inline-block;font-size:13px;line-height:24px;color:#222222;background:#f7a92d;padding:0 5px;margin:3px 10px 3px 0;}
.artilewrap .atimer{display:inline-block;font-size:13px;line-height:24px;color:#235d3a;padding:0 5px;margin:3px 10px 3px 0;}
.artilewrap .aname{display:inline-block;font-size:13px;line-height:24px;color:#235d3a;padding:0 5px;margin:3px 10px 3px 0;}
.articlerebox{position:relative;display:inline-block;margin:40px 40px 40px 0;float:left;width:270px;}
.articlerebox:nth-child(4n){margin-right:0;}
.articlerebox .aimgbox{position:relative;width:100%;}
.artilelistwrap{position:relative;margin:80px 0;}
.artilelistbox{position:relative;margin:40px 0;}
.artilelistbox .aimgbox{position:relative;width:450px;margin-right:30px;}
.artilelistbox .atextbox{position:absolute;width:720px;left:480px;top:50%;transform:translateY(-50%);}
.atextbox h3.atitle{font-size:20px;line-height:30px;color:#3b3235;font-weight: bold;}
.atextbox .atimer{display:inline-block;font-size:13px;line-height:24px;color:#235d3a;font-weight: normal;margin:10px 0;}
.atextbox .atag{display:inline-block;font-size:13px;line-height:24px;color:#222222;background:#f7a92d;padding:0 5px;margin:3px 10px 3px 0;}
.atextbox .acontent{font-size:16px;line-height:24px;color:#235d3a;font-weight: normal;}
.aimgbox img{position:relative;width:100%;z-index:1;transition: all 0.5s;}

.aimgbox a{display:inline-block;}
.acover{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);text-align:center;z-index:3;opacity:0;transition: all 0.5s;}
.acover .ibox{position:absolute;top:calc(50% - 30px);left:calc(50% - 30px);width:60px;color:#fff;background:#111111;height:60px;border-radius:30px;text-align:center;}
.acover i{font-size:40px;line-height:60px;color:#fff;}
.sticker{position:absolute;top:8px;right:8px;z-index:2;text-align:center;width:60px;height:60px;overflow:hidden;border-radius: 30px;font-size:13px;line-height:60px;color:#fff;background:#407C32;box-shadow: 1px 1px 1px 3px rgba(0,0,0,0.1);}
.sticker.end{background:#CCCCCC;}
.aimgbox:hover  img{opacity:0.5;}
.aimgbox:hover .acover{opacity:1;}


.aacttopbox .actright{position:relative;}
.aacttopbox .actleft p{font-size:15px;font-weight:500;line-height:20px;color:#ef804f;text-align:center;}
.aacttopbox .actleft img{width:100%;}
.aacttopbox .actleft p.tp{font-size:13px;line-height:20px;color:#3b3235;text-align:center;}
.actleft.inact{position:absolute;left:10px;bottom:10px;float:none;margin-right:0;z-index:2;}
.actleft.inact p{color:#ea5514;}
.aacttopbox .actright h1.atitle{font-size:22px;line-height:30px;color:#3b3235;font-weight: bold;margin-bottom:10px;}
.aacttopbox .actright h3.atitle{font-size:17px;line-height:26px;color:#3b3235;font-weight: normal;}
.aacttopbox .actright p{font-size:16px;line-height:24px;color:#45855f;font-weight: normal;margin-top:10px;}
.aacttopbox .atag{display:inline-block;font-size:15px;font-weight:500;line-height:24px;color:#222222;background:#f7a92d;padding:0 5px;margin:3px 10px 3px 0;}
.aacttopbox .aname{display:inline-block;font-size:15px;font-weight:500;line-height:24px;color:#222222;padding:0 5px;margin:3px 10px 3px 0;}
.aactbottombox{font-size:15px;line-height:25px;color:#60585b;font-weight: normal;margin-top:10px;}
.actbanner{max-width:100%;margin-bottom:50px;}
.aactcontentbox{position:relative;}
.aactcontentbox p.text{font-size:20px;line-height:30px;margin:10px 0;color:#3b3235;}

/*活動內容頁*/
.articleupbtn{display:inline-block;font-size:24px;line-height:65px;width:280px;text-align:center;border-radius:6px;background:#235d3a;color:#fff;font-weight: bold;}
.artactuserwrap{position:relative;}
.artactuserbox{position:relative;width:279px;margin-right:28px;margin-bottom:24px;float:left;border-radius:6px;overflow:hidden;}
.artactuserbox:nth-child(4n){margin-right:0;}
.artactuserbox .part1{padding:0 10px;height:35px;font-size:13px;line-height:35px;color:#3b3235;background:#e2f3e6;}
.artactuserbox .part1 span{float:right;}
.artactuserbox .part2{position:relative;}
.artactuserbox .part2 img{position:relative;width:100%;z-index:1;}
.artactuserbox .part3{height:100px;padding:15px 20px;color:#3b3235;background:#e2f3e6;}
.artactuserbox .part3 .h3{font-size:16px;line-height:24px;}
.artactuserbox .part3 p{font-size:13px;line-height:18px;margin-top:5px;}
.artactuserbox a{display:inline-block;}
.artactuserbox .actleft{border-radius:15px;background:rgba(255,255,255,1);text-align:center;}
.artactuserbox .actleft p{font-size:15px;line-height:16px;margin-top:6px;}
/*搜尋*/
.artileselectwrap{position:relative;margin:20px 0;text-align:center;}
.artileselectwrap input[type=text]{font-size:20px;line-height:41px;width:440px;padding:0 5px;background:#c5e7ce;color:#000;border-radius:6px;border:1px solid #3b3235;margin-right:20px;}
.artileselectwrap select{font-size:20px;line-height:41px;width:200px;height:41px;padding:0 5px;background:#c5e7ce;color:#000;border-radius:6px;border:1px solid #3b3235;margin-right:20px;}
.artileselectwrap input[type=image]{height:41px;float:right;}
.artileselectwrap span{display:inline-block;}


/*
#########################################################
POP
*/
#popu{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;background:rgba(0,0,0,0.7);text-align:center;}
#pop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999998;background:rgba(0,0,0,0.7);}
.popclosebg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
#popuin{position:relative;text-align:left;top:50%;transform:translateY(-50%);z-index:1;padding:2vw;width:40%;background:rgba(255,255,255,0.9);margin:0 auto;max-height:80vh;overflow-x:hidden;overflow-y:auto;}
#popubody{position:relative;padding:1vw 2vw;margin:2vw;font-size:1vw;line-height:1.5vw;color:#595959;border:1px solid #999;text-align:left;}

#popuin.share{position:relative;top:50%;display:inline-block;transform:translateY(-50%);text-align:center;z-index:1;padding:2vw;width:auto;background:none;margin:0 auto;max-height:80vh;overflow-x:hidden;overflow-y:auto;}
#popuin.share #popubody{border:none;text-align:left;margin:0 auto;}
#popuin.share #popubody img{max-width:100%;}
#popin{position:relative;top:50%;transform:translateY(-50%);z-index:1;padding:2vw;width:40%;background:rgba(255,255,255,0.9);margin:0 auto;max-height:80vh;overflow-x:hidden;overflow-y:auto;}
#popbody{position:relative;padding:1vw 2vw;margin:2vw;font-size:1vw;line-height:1.5vw;color:#595959;border:1px solid #999;text-align:left;}
.popclosebtn{position:absolute;top:0;right:0;height:2.5vw;width:2.5vw;background:#666;text-align:center;z-index:99;}
.popclosebtn i{font-size:2vw;line-height:2.5vw;color:#fff;}


/*
  #########################################################
  #  內容框價
  ##########################################################
*/
.maincontentblock2{background:url(../img/cbg.jpg);padding:80px 0;background-position: top center;background-repeat: repeat;}
.maincontentblock2 .ctitle{max-width: 100%;margin:0 auto;}
.indexpiclistbox{position:relative;}
.indextagwrap{padding:15px 0;}
.tagitem{margin-right:20px;float: left;}
.tagitem:nth-child(4){margin-right:0;}
.indexpiclistwrap{position:relative;padding:15px;border-radius: 12px; background:#d3d2c4;text-align: center;transition: left 1s;}
.indexbannerwrap2{position:relative;height:360px;margin:0;}
.indexbannerwrap2 .indexbanneroutbox{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.indexbannerwrap2 .indexbannerbox{position:absolute;top:0;left:0;width:2000%;height:100%;transition: left 1s;}
.indexpiclistwrap.on .indexbannerwrap2{position:relative;height:auto;margin:0;}
.indexpiclistwrap.on .indexbannerwrap2 .indexbannerbox{position:relative;top:0;left:0;width:100%!important;height:auto;}
.indexpiclistwrap.on .indexbannerwrap2 .indexbanneroutbox{position:relative;top:0;left:0;width:100%!important;height:auto;}
.indexbannerwrap2 .indexbannerbox .bannerbox{float:left;display:inline-block;height:360px;}
.indexbannerwrap2 .indexbannerbox .banneritem{float:left;display:inline-block;height:360px;width:258px;margin-right:12px;}
.indexbannerwrap2 .articlereactbox{margin-top:0;margin-bottom:0;margin-right:0;}
.indexpiclistwrap.on .indexbannerwrap2 .indexbannerbox .banneritem:nth-child(4n){margin-right:0!important;}
.indexpicselectwrap{position:relative;margin:10px 0;display:inline-block;}
.indexpicselectwrap a.bannerbtn{position:relative;display:inline-block;width:44px;height:44px;margin:0 30px;background:rgba(255,255,255,1);border-radius:22px;text-align:center;}
.indexpicselectwrap a.bannerbtn i{font-size:30px;line-height:44px;color:#000;}
.indexpicselectwrap a.bannerbtn.bannerleft{}
.indexpicselectwrap a.bannerbtn.bannerright{}
.indexpicselectwrap .indexselectcount{margin:0;}
.indexpicselectwrap .indexselectcount span{font-size:24px;line-height:44px;color:#000;}
.indexpicselectwrap .allbtn{position:absolute;top:0;right:-140px;background:#fff;width:120px;height:40px;border:2px solid #a2a2a2;border-radius:22px;text-align:center;font-size:24px;line-height:40px;color:#000;}
.indexpicselectwrap .foldbtn{position:relative;display:none;background:#fff;width:100px;height:40px;border:2px solid #a2a2a2;border-radius:22px;text-align:center;font-size:24px;line-height:40px;color:#000;}
.indexpiclistwrap.on .foldbtn{display:block;}
.indexpiclistwrap.on .allbtn{display:none;}
.indexpiclistwrap.on a.bannerbtn{display:none;}
.indexpiclistwrap.on .indexselectcount{display:none;}

.indexbannerwrap2 .acc_item{margin-right:40px;float:left;}
.articlereactbox{position:relative;display:inline-block;margin:0 0 0 0;float:left;width:100%;height:360px;}
.articlereactbox .aimgbox{position:relative;width:100%;border-radius:20px;overflow:hidden;}
.aacttopbox{position:relative;margin:15px 0;}
.aacttopbox .actleft{width:70px;float:left;margin-right:15px;}
.articlereactbox h4{padding-top:10px;height:50px;color:#000;font-size:20px;line-height:25px;text-align:center;}
.articlereactbox p{height:20px;color:#000;font-size:16px;line-height:20px;margin-top:5px;text-align:center;}


/* 活動區塊 */
.maincontentblock3{background:url(../img/c2bg.jpg);padding:80px 0 0 0;background-position: top center;background-repeat: repeat;}
.c2img{width: 100%;}
.c2imgstart{display:inline-block;padding:50px 0;max-width:55%;}
.c2imgstart img{max-width:100%;}
/* app區塊 */
.maincontentblock4{background:url(../img/c3bg.png);padding-bottom:0px;background-repeat: repeat;}
.maincontentblock5{background:url(../img/c3bg.png);padding-bottom:80px;background-repeat: repeat;}
.c3text{width:100%;padding-top:80px;}
/* 畫案 */
/*
#########################################################
picplate
*/
.picplate{position:relative;/*background:#371206;*/}
.picselectclick{cursor: pointer;}
.picitemclick{cursor: pointer;}
.picswitchclick{cursor: pointer;}
.piccolorclick{cursor: pointer;}
.picplate{margin-top:15px;}
#piccanvaswrap{position:relative;width:549px;min-height:549px;background:#eee;float:left;}
#piccanvas{position:relative;z-index:1;width:549px;height:549px;}
#picoptionwrap{position:absolute;top:0;left:549px;width:549px;height:100%;min-height:549px;background:#fee4b7;text-align:left;}

#picswitchbox{position:absolute;left:0;bottom:20px;width:100%;height:80px;;z-index:9;}
.picswitch{width:80px;height:80px;float:right;margin-right:10px;text-align:center;opacity:0.6;}
.picswitch.on{opacity:1;}
.picswitch i{font-size:30px;line-height:60px;color:#444444;}
.picdone{margin-top:0;width:80px;height:80px;border-radius:5px;float:left;margin-left:20px;text-align:center;cursor: pointer;}
.picdone.type2{margin:0 auto;float:none;}
.picdone i{font-size:20px;line-height:40px;margin-right:5px;}


#picoptionintrobox{position:relative;padding:50px;text-align:left;}
#picoptionintrobox h2{font-size:36px;line-height:45px;color:#000;}
#picoptionintrobox h3{font-size:18px;line-height:26px;color:#000;}
#picoptionintrobox p{font-size:18px;line-height:26px;color:#000;padding-top:26px;}
#picoptionwrap .btnwrap,#picoptionwrapmeme .btnwrap{position:relative;padding:30px 0;text-align:center;}
#picoptionwrap .btn, #picoptionwrapmeme .btn {    font-size: 22px;    display: inline-block;    line-height: 50px;    height: 50px;    border-radius: 10px;    padding: 0 20px;    margin: 0 10px;    color: #fee4b7;    background: #da0084;}
#picselectwrap{position:relative;height:100px;}
#picselectwraprand{position:relative;height:100%;width:100px;float:left;background:#cccc99;text-align:center;cursor:pointer;}
#picselectwrapbox{position:relative;height:100%;width:calc(100% - 100px);background:#dac093; float:left;overflow-y:hidden;overflow-x:auto;}
.picselectwrapboxin{position:relative;height:74px;padding:5px;}
.picselectoption{position:relative;display:inline-block;height:100%;width:74px;margin-right:10px;float:left;}
.picselectoption .img{position:relative;height:94%;width:94%;margin:3% 3%;z-index:0;border-radius:10px;overflow:hidden;}
.picselectoption  img{position:relative;width:100%;z-index:0;}
.picselectoptionbar{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;display:none;background:url(../img/frame.png);background-size:100% 100%; }
.picselectoption.on .picselectoptionbar{display:block;}
#picitemwrap{position:relative;height:449px;background:#fee4b7;overflow-y: auto;}
#picitemwrapbox{position:relative;text-align:center;height:calc(100% - 16px);padding:8px 20px 8px 8px;}
#piccolorwrapbox{position:relative;text-align:center;height:calc(100% - 16px);padding:8px 20px 8px 8px;}
.picitemwrapbox{position:relative;display:none;}
.picitemwrapbox.on{display:block;}
.piccolorwrapbox{position:relative;display:none;}
.piccolorwrapbox.on{display:block;}
.picitemoption{position:relative;display:inline-block;width:18.4%;margin:5px 0.8%;;float:left;}
.picitemoption .img{position:relative;height:94%;width:94%;margin:3% 3%;z-index:0;border-radius:22px;overflow:hidden;}
.picitemoption img{position:relative;width:100%;z-index:0;}
.picitemoption.on .picselectoptionbar{display:block;}
.piccoloroption{display:inline-block;width:60px;height:60px;border:3px solid rgba(255,255,255,1);margin:6px 10px;border-radius:33px;overflow:hidden;}
.piccoloroption.on{box-shadow: 0px 0px 3px 4px rgba(0,0,0,0.2);}
#picbannerwrap{position:relative;height:200px;text-align:center;padding-bottom:0;margin-bottom:-60px;}
#picbannerwrap3{position:relative;height:80px;text-align:center;}
#picbannerwrap img,#picbannerwrap3 img{margin:0 auto;}
#pic_dice{position:absolute;left:20%;width:60%;top:20%;transform:translateY(0);transform-origin:  50% 50%;;animation: diceme 5s 2s 5;}
#picimgblockout{padding:20px 0;}
#picimgblock{border:1px solid #999;width:100%;max-width:600px;max-height:600px;min-height:200px;margin:0 auto;}
#picimgblock img{width:100%;}
#picbannerwrap2{position:relative;text-align:center;display:flex;}
#picbannerwrap2 img{display:flex;width:400px;margin:0 auto;}
#sharebox{margin:20px;border:1px solid #999;padding:20px;text-align:center;}
#sharebox p{font-size:16px;color:#666;line-height:24px;}
#sharewrap{position:absolute;left:0;bottom:0;width:100%;padding:15px 0;background:rgba(0,0,0,0.7);text-align:center;}
.meme #sharewrap{position:relative;left:auto;bottom:auto;margin-top:-80px;padding:0 0 60px 0;background:none;}
.sharebtn2{display:inline-block;width:50px;height:50px;text-align:center;border-radius:25px;overflow:hidden;padding:0;margin:0 20px;}
.sharebtn2 i{font-size:30px;line-height:50px;color:#fff;}
.sharebtn2 img{width:100%}




.maincontentblock{padding-top:470px;z-index:1;}
.maincontentblock.type2{padding-top:0;z-index:1;}
.maincontentblock.type3{padding-top:60px;z-index:1;background:#251c17;}
.maincontentblock .centerwrap{position:relative;background:none;padding-top:30px;padding-bottom:30px;}
.maincontentblock .centerwrap.type2{background:none;width:1140px;padding:60px;}
.maincontentblock .centerwrap.type3{background:none;width:1200px;padding:0;}
.maincontentblock .centerwrap.type3.ph2{z-index:3;}
.maincontentblock .centerwrap.type3:after{clear:both;}
.maincontentblock.type2 .centerwrap{background:none;padding:0 30px;}
.maincontentextra{padding:50px;z-index:1;}
.maincontentblock.intro{padding-top:60px;z-index:1;background:#251c17;overflow:hidden;text-align:center;}
.maincontentblock.intro img{position:relative;z-index:1;margin-left:50%;transform:translateX(-50%);}
.maincontentblock.intro .introlink{position:absolute;z-index:2;top:2800px;left:50%;height:276px;width:320px;margin-left:-160px;}
/* meme */
#pictexthbox{position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;}
.frameele{position:absolute;z-index:5;border:1px dotted rgba(255,255,255,0); }
.frameele.on{border:1px dotted rgba(255,255,255,0);}

.frameelebg{position:absolute;z-index:4;border:1px solid rgba(255,255,255,0);}
.texteditline{position:relative;padding-top:20px;}
.texteditline input{width:84%;margin:0 5%;padding:10px 3%;background:rgba(255,255,255,1);color:#222;font-size:16px;line-height:24px;border-radius: 5px;}
.textselectbox{text-align:right;margin:10px 5%;}
.textsizeclick{cursor:pointer;}
.textselectbox span{margin-left:8px;}
.textselectbox i{font-size:26px;line-height:26px;color:#fff;}
.textselectbox .fa-stack{text-align:center;}
.textselectbox i.fa-square{color:#494949;}
.textselectbox i.fa-stack-1x{font-size:14px;}
.textselectbox i.fa-stack-2x{}
.maincontentblock.type3.meme{left:0;top:0;width:100%;min-height:calc(100% - 100px);padding-top:60px;padding-bottom:40px;z-index:1;background:#251c17;}
.maincontentblock.type3.meme.in{position:absolute;left:0;top:0;width:100%;min-height:calc(100% - 100px);padding-top:0;padding-bottom:40px;z-index:1;background:#251c17;}

#picbannerwrapmeme{height:auto;padding:0;}
#piccanvaswrapmeme{position:relative;width:549px;height:auto;background:#eee;float:left;margin-right:0px;}
#piccanvaswrapmeme img{width:100%;}
#pictextbg{position:relative;opacity:0;z-index:0;}
#piccanvasmeme{position:relative;z-index:1;}
#picoptionwrapmeme{position:absolute;left:549px;top:0;width:509px;height:calc(100% - 60px);padding:30px 20px;float:left;background:#fee4b7!important;border-radius:0;}
#picoptionwrapmeme.in{background:none;}
.meme #sharewrap{margin-top:0;}
/*
#########################################################
#  F O R M
##########################################################
*/
.formwrap{padding:120px 0;margin:0 auto;width:590px;}
.formwrap.type2{padding:60px 0;margin:0 auto;width:590px;}
.formwrap.type3{padding:120px 0;margin:0 auto;width:950px;}
.formwrapin{padding:30px 90px;background:#f2f2f2;}
.formwrapin.type2{padding:60px 90px;}
.formwrap.type3 .formwrapin{padding:90px 50px;}
.formwrapin .formtitle{font-size:20px;line-height:30px;color:#000;text-align:center;font-weight:bold;}
.formwrapin .formnote{font-size:16px;line-height:24px;color:#235d3a;text-align:center;}
.formbox{position:relative;}
.formbox .formline{position:relative;padding:20px 0;}
.formbox .formbtn {display:inline-block;font-size:16px;line-height:50px;height:50px;background:#235d3a;color:#fff;width:100px;text-align:center;margin:0 10px;border-radius: 3px;}
.formbox .formline input[type='text']{font-size:20px;line-height:50px;padding:0 5%;width:90%;color:#959595;background:#fff;border-radius: 6px;}
.formbox.type2 .formline{padding:30px 0;}
.formbox.type2 .formline input[type='text']{border:1px solid #235d3a;}
.formbox.type2 .formline input[type='file']{position:relative;border:3px solid #235d3a;border-collapse: collapse;opacity:0;padding:0;width:100%;height:50px;z-index:2;}
.formbox.type2 .formline .fileover{position:absolute;top:30px;left:0;width:100%;height:50px;background:#fff;border:1px solid #235d3a;border-radius: 6px;text-align:right;}
.formbox.type2 .formline .fileover span{display:inline-block;height:100%;width:120px;font-size:16px;line-height:50px;text-align:center;margin:0 auto;background:#235d3a;color:#fff;}
.formbox.type2 .formbtn {width:50%;}
.formnotetext{font-size:20px;line-height:32px;}
.formbacktext{font-size:16px;line-height:24px;color:#235d3a;font-weight:bold;}
.formbacktext i{font-size:20px;line-height:24px;margin-right:10px;}
.formbox .formbtn.type2{width:100%;}
.formbox .formbtn.type2 i{margin-right:10px;}
.formsplit2{width:50%;float:left;}
.formsplit2 .formbox{padding-left:30px;}
.formdes{position:absolute;top:0;left:0;font-size:16px;line-height:16px;font-weight:bold;color:#000;}
.formdes span{font-size:12px;line-height:16px;color:#666;}
/*
#########################################################
#  T A B L E
##########################################################
*/
.memberarea{position:relative;text-align:center;}
.memberarea table{position:relative;margin:80px auto;min-width:50%;border:1px solid #397d54;border-collapse: collapse;}
.memberarea table th,.memberarea table td{font-size:16px;line-height:22px;border:1px solid #397d54;border-collapse: collapse;}
.memberarea table th{font-weight:normal;background:#397d54;color:#fff;padding:5px 8px;text-align:center;}
.memberarea table td{color:#397d54;padding:5px 8px;text-align:left;font-weight:normal;}
.memberarea table tr:nth-child(2n){background-color: #e2efd9;}
.memberarea table tr:nth-child(2n+1){background:#fff;}
.pagenumberwrap{position:relative;text-align:center;margin:20px 0;text-align:center;}
.pagenumberwrap a{display:inline-block;font-size:16px;line-height:32px;border-radius:5px;background-color: #397d54;color:#fff;margin:0 10px;min-width:22px;padding:0 5px;}
.pagenumberwrap a i{font-size:20px;line-height:32px;}
.pagenumberwrap a:hover{background-color: #999999;}
/* share */
.sharebtn{display:inline-block;padding:10px 20px;font-size:14px;line-height:20px;color:#fff;}
.sharebtn i{font-size:18px;line-height:20px;}
.sharebtn img{height:18px;float:left;margin:1px 5px 1px 0;}
.sharefacebook{background:#3d5b98;}
.sharetwitter{background:#1fa1f2;}
.shareinstagram{  background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  }
.shareline{background:#00C300;text-align:center;font-size:14px;line-height:50px;color:#fff;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;}

/*上傳照片*/
.photowrap img{width:100%;}
/*
#########################################################
#  selectwrap 會員選單
##########################################################
*/
.selectwrap{position:relative;width:590px;margin:0 auto;padding:40px 0;}
.selectwrap .selectbtn{display:inline-block;float:left;font-size:16px;line-height:50px;height:50px;background:#235d3a;color:#fff;text-align:center;border-radius: 3px;}
.selectwrap.sp3 .selectbtn{width:calc(30% - 2px);margin-right:5%;}
.selectwrap.sp3 .selectbtn:nth-child(3){margin-right:0;}

/*
#########################################################
#  一棒 的 內頁
##########################################################
*/
.stickpagewrap{position:relative;padding-bottom:70px;border-bottom:1px solid #999;}
.stickpagewrap .imgwrap{width:415px;margin-right:50px;float:left;}
.stickpagewrap .imgwrap img{width:100%;}
.stickpagewrap .textwrap{width:675px;float:left;}
.stickpagewrap h2{font-size:22px;line-height:35px;color:#235d3a;font-weight:bold;margin-top:25px;margin-bottom:10px;}
.stickpagewrap h3{font-size:20px;line-height:32px;color:#000;font-weight:normal;margin-bottom:10px;}
.stickpagewrap h3 span{color:#f39800;}
.stickpagewrap p{font-size:20px;line-height:35px;color:#3b3235;font-weight:normal;}
.stickpagewrap p.timex{font-size:13px;line-height:20px;color:#235d3a;font-weight:normal;margin-bottom:15px;}
.stickpagegobtn{display:block;width:280px;background:#eb6100;color:#fff;font-size:24px;line-height:60px;border-radius: 6px;text-align:center;margin:35px auto;}

/*
#########################################################
#  其 她 特 殊
##########################################################
*/
.c3boxes{padding:50px 0;}
.c3wrap{padding:20px 0;}
.c3wrap a{display:inline-block;margin:0;}
.c3img{margin:0 15px;}
/*
#########################################################
#  F O O T E R
##########################################################
*/
footer{position:relative;z-index:3;text-align:left;background:#191e24;padding:40px 0 200px 0;}
footer img{max-width:100%;}
footer .sharewrap a{margin:0 20px;}
footer .footerlogo{margin-top:30px;}
/*
.footericonwrap{position:absolute;top:50%;transform:translateY(-50%);right:0;display:inline-block;}
.footericonwrap a{display:inline-block;line-height:50px;margin:0 7px;}
.footericonwrap a i{font-size:30px;color:#fff;line-height:50px;}
.footerbox{position:relative;width:35%;display:inline-block;vertical-align: top;color:#fff;}
.footerbox h2{font-size:16px;line-height:25px;}
.footerbox p{font-size:16px;line-height:25px;}
*/
/* 1000 以下顯示  平板版本--影片改圖騙    */
@media screen and (max-width: 1200px) {
  .indexapp {    padding: 20px;    background: #371206;}
	.indexapp a {display: contents;}
  .indexappimg {    padding: 0 1vw;    width: 41vw;}
	.ph2{padding:0px 0!important;background:none!important;}
  html, body{width:100%;}
  html, body{}
  .show400{display:block!important;}
  .hide400{display:none!important;}
  .hide400line{display:none;}
  .centerwrap{position:relative;width:92vw;margin:0 auto;padding:0;}
  .p1{padding:3vw 0;}
  .pu1{padding:3vw 0 0 0;}
  .pu2f{padding:6vw 0 0 0!important;}
  .p2{padding:6vw 0;}
  .pu2{padding:6vw 0 0 0;}
  .p3{padding:6vw 0 10vw;}
  .p32{padding:9vw 0 6vw 0;}
  .p5{padding:15vw 0;}
  .pb2{padding:6vw;}
  /* margin */
  .mu1{margin-top:3vw;}
  .mu2{margin-top:6vw;}
  .mu3{margin-top:9vw;}
  .mu0{margin-top:0!important;}
  .mv1{margin-top:3vw;margin-bottom:3vw;}
  .mv2{margin-top:6vw;margin-bottom:6vw;}
  /*
  #########################################################
  #  H E A D E R
  ##########################################################
  */
  .topbg{display:none;}
  header{position:fixed;z-index:9;top:0;left:0;width:100%;height:12vw;background:none;}
  header h1{font-size:5vw;line-height:12vw;margin-left:3vw;}
  .menuicon{position:absolute;top:4vw;left:5vw;z-index:2;height:9vw;color:#fff;z-index:12;transition: all 1s;}
  header .mbg{position:relative;background:#000;opacity:0;height:13vw;}
  /* menu */

  .topmenuwrap{position:fixed;width:100%;top:0;right:100%;opacity:0;text-align:center;z-index:1;background:rgba(0,0,0,0.75);padding:15vw 0;transition: all 1s;    height: calc(100% - 30vw);}
   header.on .topmenuwrap{right:0;opacity:1;}
  .topmenuwrapin{display:block;height:auto;margin:0 auto;padding:0 5vw;}
  .menumlogo{width:45%;margin:0 auto;}
  .navwrap{display:block;float:none;}
  .navitem{position:relative;display:block;height:auto;padding:3vw 0;margin:0;border:none;float:none;}
  .navitem:last-child{border-bottom:none;}
  .navitem .navtitle{font-size:6vw;line-height:8vw;font-weight:bold!important;color:#fff;border:none;padding:0;}
  .navitem.on .navtitle{color:#eeeeee;}
  .headertop {width:12vw;position: fixed;top: 2vw;left:2%;z-index:9;}
  .headertop.in{left:12%;}
  /*.navitem .subbox{    position: relative;    width:60%;margin:5vw auto;top: none;    left: none;      background: none;    padding:2vw 0;font-size:5.5vw;line-height:7vw;}*/
  .navitem .menu2selectbox{position: relative;margin:5vw auto;width:50%;border:1px solid #fff;overflow:hidden;}
  .navitem .menu2selectbox i {    z-index: 2;    position: absolute;    top: 2vw;    right: 1vw;    color: #fff;    font-size: 8vw;    line-height: 9vw;}
  .navitem .menu2select{z-index:1;position: relative;display:inline-block;margin-left:50%;transform: translateX(-50%);width:auto;text-align:left; background: none;    color:#fff;border:none;font-size:5.5vw;line-height:7vw;padding:2vw 6vw;  -webkit-appearance: none;  -moz-appearance: none;  text-indent: 1px;  text-overflow: '';}
  .navitem .menu2select option{font-size:5.5vw;line-height:7vw;text-align:center;text-align: -webkit-center;color: #fff;background: rgba(0, 0, 0, 0.7);}
  .navitem .menu2select::-ms-expand {    display: none;}

  /*
  #########################################################
  #  B A N N E R
  ########################################################## 
  */
  .indexbanneroutwrap{padding-top:0}
  /*
  #########################################################
  #  V I D E O
  ##########################################################
  */
  .videocontent{top:calc(50% - 50vw);}
  .videocontent .centerwrap{padding-top:0;}
  .videocontent h3{color:#fff;font-size:4.5vw;line-height:7vw;font-weight:bold;text-align:center;padding:6vw 10vw;}
  .gamename{color:rgba(47,9,1,0.7);font-size:8vw;line-height:7vw;font-weight:bold;text-align:center;padding:6vw 10vw;}  
  .videosideimg{position:fixed;width:8%;top:3vw;right:4vw;width:12%;z-index:99;margin-right:0;}
  .videosideimg.off{display:none!important;}
  .videosideimg img{width:100%;}
  .videosideimg.icon2{position:fixed;top:23vw;right:4vw;}
  .videotopimg{max-width:74%;}
  .videotopbtn{max-width:55%;}

  /*
  #########################################################
  #  counter
  ##########################################################
  */
  .indexcountwrap {      position: relative;      background: url(../img/bkbg.jpg);      background-position: center center;      height: 30vw;      background-size: cover;  }
  .indexcountwrap .counterbg{position:absolute;top:5vw;left:50%;transform: translateX(-50%);z-index:1;width:70vw;height:auto;}
  .indexcountwrap .counterbg img{position:absolute;top:0;left:0;width:100%;z-index:1;}

  .indexcountwrap .countertextwrap{position:absolute;top:8.7vw;left:3%;width:94%;display:flex;flex-direction: row;flex-wrap: nowrap;align-items:stretch;z-index:2;}
  .indexcountwrap .countertextwrap .text{display:flex;flex: 1;justify-content: center;margin:0;text-align:center;font-size:6.4vw;line-height:11vw;color:#222;font-weight:bolder;}



  /*
    #########################################################
    #  內容框價
    ##########################################################
  */
  .maincontentblock2{padding:20vw 0;}
  .maincontentblock2 .ctitle{max-width: 100%;padding-bottom:10vw;}
  .indextagwrap{padding:3vw 0;}
  .tagitem{width:22%;margin-right:4%;}
  .tagitem:nth-child(4){margin-right:0;}

  .bannermore{text-align:center; margin: 5vw 0 0 0;}
  .bannermore img{ height:8vw;}
  .indexbannerdotwrap{bottom:5vw;}
  .maincontentblock{padding-top:12vw!important;z-index:1;}
  .maincontentblock.fixed{padding-top:0!important;}
  .maincontentblock.type2 {padding-top:0vw!important;z-index:1;}
  .maincontentblock .centerwrap{background:none;width:80%;padding:30px 5%;}
  .maincontentblock .centerwrap.type2{background:none;width:80%;padding:30px 5%;}
  .maincontentblock.type3 .centerwrap{width:100%;background:none;padding:0;}
  .maincontentextra{padding:50px 5%;}
  .maincontentblock.intro img{margin-left:0;transform:translateX(0);width:100%;}
  .maincontentblock.intro .introlink{top:533vw;left:50%;height:60vw;width:60vw;margin-left:-30vw;}

  .indexpiclistwrap{position:relative;padding:3vw;border-radius: 3vw;}
  .indexbannerwrap2{position:relative;height:120vw;margin:0;}
  .indexbannerwrap2 .indexbanneroutbox{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
  .indexbannerwrap2 .indexbannerbox{position:absolute;top:0;left:0;width:500%;height:100%;transition: left 1s;}
  .indexpiclistwrap.on .indexbannerwrap2{position:relative;height:auto;margin:0;}
  .indexpiclistwrap.on .indexbannerwrap2 .indexbannerbox{position:relative;top:0;left:0;width:100%;height:auto;}
  .indexpiclistwrap.on .indexbannerwrap2 .indexbanneroutbox{position:relative;top:0;left:0;width:100%;height:auto;}
  .indexbannerwrap2 .indexbannerbox .bannerbox{float:left;display:inline-block;height:120vw;width:86vw;}
  .indexbannerwrap2 .indexbannerbox .banneritem{float:left;display:inline-block;width:42vw!important;height:59vw;margin-right:2vw;margin-bottom:2vw;}
  .indexbannerwrap2 .articlereactbox{margin-top:0;margin-bottom:0;margin-right:0;}
  .indexpiclistwrap.on .indexbannerwrap2 .indexbannerbox .banneritem:nth-child(2n){margin-right:0!important;}




  .indexbannerwrap2 a.bannerbtn{float: none;z-index: 3;top: auto;bottom: -15vw;border-radius: 0;width: 8vw;height: 8vw;background: none;}
  .indexbannerwrap2 a.bannerbtn img{height:8vw;}
  .indexbannerwrap2 a.bannerbtn.bannerleft{left: 0; }
  .indexbannerwrap2 a.bannerbtn.bannerright{right: 0; }
  .indexbannerwrap2 a.bannerbtn i{font-size:8vw;line-height:8vw;font-weight:bold;}
  #picoptionwrap .btn, #picoptionwrapmeme .btn {      font-size: 4vw;      display: inline-block;      line-height: 10vw;      height: 10vw;      border-radius: 1vw;      padding: 0 3vw;      margin: 0 1.5vw;      color: #fee4b7;      background: #da0084;  }
  .indexpicselectwrap{position:relative;margin:2vw 0;display:inline-block;}
  .indexpicselectwrap a.bannerbtn{position:relative;display:inline-block;width:8vw;height:8vw;margin:0 3vw;background:rgba(255,255,255,1);border-radius:4vw;text-align:center;}
  .indexpicselectwrap a.bannerbtn i{font-size:5vw;line-height:8vw;color:#000;}
  .indexpicselectwrap .indexselectcount span{font-size:4vw;line-height:8vw;color:#000;}
  .indexpicselectwrap .allbtn{position:absolute;top:0;right:-19vw;background:#fff;width:20vw;height:calc(8vw - 2px);border:1px solid #a2a2a2;border-radius:4vw;text-align:center;font-size:4vw;line-height:calc(8vw - 2px);color:#000;}
  .indexpicselectwrap .foldbtn{position:relative;display:none;background:#fff;width:20vw;height:calc(8vw - 2px);border:1px solid #a2a2a2;border-radius:4vw;text-align:center;font-size:4vw;line-height:calc(8vw - 2px);color:#000;}


  /* 活動區塊 */
  .maincontentblock3{padding:10vw 0 0 0;}
  .c2img{width: 100%;}
  .c2imgstart{padding:10vw 0;}



  /* app區塊 */
  .c3boxes{padding:10vw 0 0 0;}
  .c3wrap{display:flex;flex-direction: row;flex-wrap: nowrap;padding:3vw 0;}
  .c3wrap a{display:flex;flex: 1;justify-content: center;}
  .c3wrap a:nth-child(1) {margin-right:5%;}
  .c3wrap a img{max-width:100%;}
  .c3text{width:100%;padding-top:10vw;}
  .c3img{margin:0;width:90%}
  /*
  #########################################################
  #  F O R M
  ##########################################################
  */
  .formwrap{padding:20px 0;margin:0 auto;width:100%;}
  .formwrap.type2{padding:20px 0;margin:0 auto;width:100%;}
  .formwrap.type3{padding:20px 0;margin:0 auto;width:100%;}
  .formwrapin{padding:30px 5%;background:#f2f2f2;}
  .formwrapin.type2{padding:30px 5%;}
  .formwrap.type3 .formwrapin{padding:30px 5%;}
  .formwrapin .formtitle{font-size:20px;line-height:30px;color:#000;text-align:center;font-weight:bold;}
  .formwrapin .formnote{font-size:16px;line-height:24px;color:#235d3a;text-align:center;}
  .formbox{position:relative;}
  .formbox .formline{position:relative;padding:20px 0;}
  .formbox .formbtn {display:inline-block;font-size:16px;line-height:50px;height:50px;background:#235d3a;color:#fff;width:100px;text-align:center;margin:0 10px;border-radius: 3px;}
  .formbox .formline input[type='text']{font-size:20px;line-height:50px;padding:0 5%;width:90%;color:#959595;background:#fff;border-radius: 6px;}
  .formbox.type2 .formline{padding:30px 0;}
  .formbox.type2 .formline input[type='text']{border:1px solid #235d3a;}
  .formbox.type2 .formline input[type='file']{position:relative;border:1px solid #235d3a;opacity:0;padding:0;width:100%;height:50px;z-index:2;}
  .formbox.type2 .formline .fileover{position:absolute;top:30px;left:0;width:100%;height:50px;background:#fff;border:1px solid #235d3a;border-radius: 6px;text-align:right;}
  .formbox.type2 .formline .fileover span{display:inline-block;height:100%;width:120px;font-size:16px;line-height:50px;text-align:center;margin:0 auto;background:#235d3a;color:#fff;}
  .formbox.type2 .formbtn {width:50%;}
  .formnotetext{font-size:20px;line-height:32px;}
  .formbacktext{font-size:16px;line-height:24px;color:#235d3a;font-weight:bold;}
  .formbacktext i{font-size:20px;line-height:24px;margin-right:10px;}
  .formbox .formbtn.type2{width:100%;margin:0;}
  .formbox .formbtn.type2 i{margin-right:10px;}
  .formsplit2{width:100%;float:none;}
  .formsplit2 .formbox{padding:30px;}
  .formdes{position:absolute;top:0;left:0;font-size:16px;line-height:16px;font-weight:bold;color:#000;}
  .formdes span{font-size:12px;line-height:16px;color:#666;}

  /* share */
  .sharebtn{display:block;padding:10px 20px;font-size:14px;line-height:20px;color:#fff;width:60%;margin:10px auto;}
  .sharebtn i{font-size:18px;line-height:20px;}
  .sharebtn img{height:18px;float:left;margin:1px 5px 1px 0;}
  .sharefacebook{background:#3d5b98;}
  .sharetwitter{background:#1fa1f2;}
  .shareline{background:#00C300;}
  .sharebtn2 img{width:100%}
  .sharebtn2{display: inline-block;
    float:left;
    width: 12vw;
    height: 12vw;
    text-align: center;
    border-radius: 6vw;
    overflow: hidden;
    padding: 0;
    margin: 0 3vw;}
  .sharebtn2 i{font-size:8vw;line-height:12vw;color:#fff;}
  .shareline{	line-height:12vw;}
  .articlereactbox h4 {   height:10vw; font-size: 4vw;      line-height: 5vw;      padding-top: 1vw;}
  .articlereactbox p {      height: 4vw;     font-size: 3.2vw;   line-height: 4vw;      margin-top: 1vw;      text-align: center;  }
  #sharebox{margin:20px;border:1px solid #999;width:90%;padding:20px 5%;text-align:center;}
  /*
  /*
  #########################################################
  #  selectwrap 會員選單
  ##########################################################
  */
  .selectwrap{position:relative;width:90%;padding:20px 0;}
  .selectwrap .selectbtn{display:block;float:none;font-size:16px;line-height:50px;height:50px;background:#235d3a;color:#fff;text-align:center;border-radius: 3px;}
  .selectwrap.sp3 .selectbtn{width:90%;margin:10px 5%;}
  .selectwrap.sp3 .selectbtn:nth-child(3){margin-right:5%;}

  /*
  #########################################################
  #  一棒 的 內頁
  ##########################################################
  */
  .stickpagewrap{position:relative;width:100%;margin:0 auto;}
  .stickpagewrap .imgwrap{width:100%;margin-right:0;float:none;}
  .stickpagewrap .imgwrap img{width:100%;}
  .stickpagewrap .textwrap{width:100%;float:none;margin-top:50px;}
  .stickpagewrap h2{font-size:22px;line-height:35px;color:#235d3a;font-weight:bold;margin-top:25px;margin-bottom:10px;}
  .stickpagewrap h3{font-size:20px;line-height:32px;color:#000;font-weight:normal;margin-bottom:10px;}
  .stickpagewrap h3 span{color:#f39800;}
  .stickpagewrap p{font-size:20px;line-height:35px;color:#3b3235;font-weight:normal;margin:10px 0;}
  .stickpagewrap p.timex{font-size:13px;line-height:20px;color:#235d3a;font-weight:normal;margin-bottom:15px;}
  /*
  #########################################################
  #  article 相關
  ##########################################################
  */
  .articlerebox{display:inline-block;margin:40px 6% 0 0;float:left;width:47%;}
  .articlerebox:nth-child(3n){margin-right:6%;}
  .articlerebox:nth-child(2n){margin-right:0;}
  .articlerebox img {width:100%;}
  .artilelistbox .aimgbox{position:relative;width:100%;margin-right:0;float:none;}

  .artilelistbox .atextbox{position:relative;width:100%;top:0;transform:none;left:0;float:none;margin-top:20px;}
  /* 活動 */
  .articlereactbox{position:relative;display:inline-block;margin:40px 10% 0 0;width:45%;height:auto;}
  .articlereactbox:nth-child(2n){margin-right:0;}
  .banneritem .articlereactbox{width:100%;margin:0;}

  .artileselectwrap input[type=text]{width:80%;padding:0 5%;margin-right:0px;margin-bottom:25px;}
  .artileselectwrap select{width:90%;padding:0 5px;margin-right:0px;margin-bottom:25px;}
  .artileselectwrap input[type=image]{height:41px;float:none;}
  .artileselectwrap span{display:inline-block;}
  .indexbannerwrap2 .acc_item:nth-child(2n){margin-right:0;}
  /*內頁*/
  .artactuserbox{position:relative;width:100%;margin-right:0;}
  .artactuserbox .part3{height:auto;}
  .artactuserbox .part3 .h3{font-size:16px;line-height:24px;}
  .artactuserbox .part3 p{font-size:13px;line-height:18px;margin-top:5px;}
  .aactcontentbox p.text {margin:20px 0;}
  .aactcontentbox p.text span{display:block;}
  /*picstant*/
  .picmainblock{height:auto;background:#000;}
  .maincontentblock.type3.fixed .picmainblock{position:absolute;top:0;left:0;width:100%;height:100%;}
  .maincontentblock.type3{padding-top:0;}
  .maincontentblock.type3.in{padding-top:12vw;}
  .maincontentblock.type3.in1{padding-top:0vw!important;}
  .maincontentblock.type3.fixed{position:fixed;top:0;left:0;width:100%;height:100%;}
  .maincontentblock.type2{padding-top:0;}
  .centerwrap.picplate{width:100%!important;margin:0!important;padding:0!important;}
  .maincontentblock.type3.fixed .centerwrap.picplate{height:100%;}
  #piccanvaswrap{position:relative;width:100%;height:auto;min-height:auto;background:#eee;float:none;}
  .piccanvaswrap{position: relative;
    left: 0%!important;
    width: 100%!important;
    min-height: 92vw!important;
    height:auto!important;
    background: #000!important;
    float: none;}
  #piccanvas{position:relative;z-index:1;width:100%;min-height:92vw;height:auto;}
  #piccanvaswrap.fixed{position:relative;left:0;width:100%;min-height:92vw;height:auto;background:#eee;float:none;}
  #piccanvaswrap img{width:100%;}

  #piccanvas.fixed{position:relative;z-index:1;width:100%;height:92vw;}
  #picoptionwrap{position:relative;width:100%!important;height:120vw;min-height:auto;left:auto;float:none;margin-bottom:17vw;}
  #picoptionwrap.fixed{height:120vw;}
  #picselectwrap{position:relative;height:22vw;}
  #picselectwraprand{position:relative;height:100%;width:16vw;float:left;background:#cccc99;text-align:center;}
  #picselectwrapbox{position:relative;height:100%;width:calc(100% - 16vw); float:left;overflow-y:hidden;overflow-x:auto;}
  .picselectwrapboxin{height:15vw}
  .maincontentblock.type3.fixed #picitemwrapbox{padding-bottom:0;}
  .picselectoption{position:relative;display:inline-block;height:100%;width:15vw;margin-right:1vw;border-radius:5px;background:#f0f0f0;float:left;overflow:hidden;}
  #pic_dice{left:10%;width:80%;}
  #picitemwrap{position:relative;height:calc(100% - 39.5vw);}
  #picbannerwrap{height:auto;padding:0;margin-bottom:0;}
  #picbannerwrap img,#picbannerwrap3 img,#picbannerwrapmeme img{width:100%;}
  #picbannerwrap2{display:block;}
  #picbannerwrap2 img{width:100%;margin:5vw 0;}
  #picoptionintrobox{position:relative;padding:8vw;}
  #picoptionintrobox h2{font-size:6vw;line-height:8vw;}
  #picoptionintrobox h3{font-size:3.6vw;line-height:5vw;}
  #picoptionintrobox p{font-size:3.6vw;line-height:5vw;padding-top:3vw;}
  #picswitchbox{bottom:2vw;width:100%;height:12vw;z-index:9;}
  .picswitch{width:12vw;height:12vw;margin-right:2vw;}
  .picswitch img{width:100%;}
  .picswitch i{font-size:6vw;line-height:8vw;color:#444444;}
  .picdone{width:12vw;height:12vw;margin-left:2vw;}
  .picdone img{width:100%;}
   /* meme */
   #picbannerwrapmeme{position:fixed;left:0;bottom:0;width:100%;z-index:19;}
   #piccanvaswrapmeme{width:100%;height:auto;margin:0;}
   #piccanvaswrapmeme img{width:100%;}
   #picoptionwrapmeme{position:relative;top:auto;left:auto;width:100%;padding:0;min-height: 120vw;border-radius:0;margin-top:0;}
   .texteditline{padding-top:10vw;padding-bottom:0;}
   .texteditline input{font-size:4vw;line-height:5vw;border-radius: 1.5vw;}
   .textselectbox{text-align:right;margin:2vw 5% 0 5%;}
   .textsizeclick{cursor:pointer;}
   .textselectbox span{margin-left:3vw;}
   .textselectbox i{font-size:10vw;line-height:10vw;color:#fff;}
   .textselectbox .fa-stack{text-align:center;}
   .textselectbox i.fa-square{color:#494949;}
   .textselectbox i.fa-stack-1x{font-size:6vw}
   .textselectbox i.fa-stack-2x{}
  /*
  #########################################################
  #  F O O T E R
  ##########################################################
  */
  footer{position:relative;z-index:3;text-align:left;background:#191e24;padding:6vw 0 20vw 0;}
  footer .sharewrap a{margin:0 2%;max-width:15%;}
  footer .footerlogo{margin-top:3vw;}
  /*
  footer{position:relative;z-index:3;text-align:left;background:#88ccaa;padding:5vw 0;}
  .footericonwrap{position:absolute;top:0;transform:none;right:0;display:inline-block;}
  .footericonwrap a{font-size:30px;margin:0 10px;line-height:50px;}
  .footericonwrap a i{font-size:30px;color:#fff;line-height:50px;}
  .footerbox{position:relative;width:70%;display:block;margin-bottom:5vw;}
  */
}