@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');/*******共通CSS******/
#mtkContainer,#mtkContainer *{box-sizing:border-box;}
#mtkContainer{overflow:hidden;}

h2 { margin: 15px 0; font:bold 24px/1.6 "微軟正黑體"; color: #4faeff; text-align: center;}
.inforBase {position:relative;margin:0 auto;width:90%;max-width:900px;height:auto;overflow:hidden;}
.inforBase-list { padding: 10px;  }
.inforBase-list li { margin-bottom: 20px; font:18px/1.6 "微軟正黑體"; color: black; list-style:decimal;list-style-position:inside; letter-spacing: 2px; }
.spmpleUp {padding:5px 0;width:100%;text-align:center;color:white;border-radius:10px;background:#4faeff;;}
.sampleDown {padding:5px ;width:100%;text-align:center;color:white;border-radius:10px;background:#f15b95;; }



.photoBase{position:relative;margin:0 auto;width:90%;max-width:900px;height:auto;overflow:hidden;border:1px solid rgba(0,0,0,0.1)}
.photoBase-dec{position:absolute;top:0;left:0;z-index:10;height:auto;pointer-events:none;}
.photoBase-img{position:relative;display:flex;justify-content:center;align-items:center;}
.photoBase-img img{opacity:;;}
.photoBase-dec img{height:100%;}
.photoBase-custom{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;height:auto;background:rgba(255,0,0,0.0);}
.photoBase-custom .custom{position:absolute;}
.photoBase-custom img{width:auto;}
.buttonBase{display:flex;margin:0 auto;width:90%;max-width:900px;}
.buttonBase-up{position:relative;display:inline-block;margin-right:5px;padding:10px 0;width:calc(50% - 5px);}
.buttonBase-up-style{display:block;padding:10px 0;width:100%;font:20px/1 " Noto Sans TC";text-align:center;color:white;letter-spacing:2px;border-radius:10px;background:#4faeff;box-shadow:0 5px 0 #3e88c9;}
.buttonBase-up #user-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.buttonBase-up-style.aniOn::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,0,0.2);pointer-events:none;animation:ani1 2s infinite /*alternate*/
 forwards;}
@keyframes ani1{0%{opacity:1;transform:scale(1);}
100%{opacity:0;transform:scale(1.5);}
}
.buttonBase{display:flex;margin:0 auto;width:90%;max-width:900px;}
.buttonBase-down{position:relative;display:inline-block;margin-left:5px;padding:10px 0;width:calc(50% - 5px);}
.buttonBase-down-style{position:relative;display:block;padding:10px 0;width:100%;font:20px/1 " Noto Sans TC";text-align:center;color:white;letter-spacing:2px;border-radius:10px;background:#b3b3b3;box-shadow:0 5px 0 #46464600;pointer-events:none;}
.buttonBase-down-style.on{pointer-events:auto;background:#f15b95;box-shadow:0 5px 0 #ad426b;}
#saveArea{padding:20px;margin:0 auto;width:90%;max-width:900px;}
#saveArea img{width:100%;}
.saveText{padding:20px 20px 5px 20px;display:none;;margin:0 auto;width:90%;max-width:900px;font:20px/1.5 "Noto Sans TC"}
.saveText .ios{display:none;}
.saveText .default{display:none;}
.saveText .ios.on,.saveText .default.on{display:inline-block;font-weight:700;}
.selectBoard{margin:5px auto;padding:10px;width:90%;max-width:900px;overflow-x:scroll;border-radius:20px;background:#4faeff}
.selectBoard ul{display:flex;}
.selectBoard ul li{display:inline-block;margin-right:10px;width:70px;flex-shrink:0;flex-grow:0; background: white; border-radius: 10px;}
.selectBoard img{width:100%;border-radius:10px;}
.selectBoardText{margin-top:15px;font:16px/1.5 "Noto Sans TC";color:#4faeff;text-align:center;letter-spacing:2px;}
.selectCustom{margin:5px auto;padding:10px;width:90%;max-width:900px;overflow-x:scroll;border-radius:20px;background:#4faeff}
.selectCustom ul{display:flex;}
.selectCustom ul li{display:inline-block;margin-right:10px;width:70px;flex-shrink:0;flex-grow:0;}
.selectCustom img{width:100%;border-radius:10px;}
.selectCustomText{margin-top:15px;font:16px/1.5 "Noto Sans TC";color:#4faeff;text-align:center;letter-spacing:2px;}
.line{margin:30px auto;width:50%;border-top:1px dotted rgba(0,0,0,0.2)}
.final{position:absolute;top:0px;left:0;z-index:-1000;}
.final .photoBase{width:900px;max-width:100%;opacity:;}
@media screen and (max-width:1180px){}



/* for plugin */

.ui-resizable{border:1px dotted #333;}
.final .ui-resizable{border:none;}
.ui-icon-gripsmall-diagonal-se { width: 30px; height: 30px; background: url(../images/resize-arrow.png) top center no-repeat; background-size: 100% 100%;}
.closeBtn { position: absolute; top: -50%; left: -50%; width: 30px; height: 30px; background: url(../images/times-solid.png) top center no-repeat; background-size: 100% 100%;}
.final .ui-icon-gripsmall-diagonal-se,
.final .closeBtn { display: none; background: none;}