* { margin: 0; padding: 0; }
*:before , *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { margin: 0; color: #49668E; background-image: url(../images/main/img-bodyBg.jpg); background-position: no-repeat; background-size: cover; font-size: 14px; }

div, h1, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, img, span, ul, li { text-align: left; vertical-align: middle; margin: 0; padding: 0; word-wrap: normal; word-break: normal; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; }

al { width: 100%; }

hr { margin: 0 0 10px 0; border-top: 1px #000 solid; }

th { font-weight: normal; }

ul , ol { list-style: none; }

p.lineHeight { line-height: 170%; }
p.marginTop { margin: 10px 0; }
p.marginLeft { margin: 0 10px; }

input , button , select , textarea { outline: none; }

/* anchor */
a:link , a:visited { color: #191919; font-weight: normal; text-decoration: none; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
a:hover { color: #900; text-decoration: none; }

span.alert { margin: 0 5px; display: inline-block; color: #F0090D; }

/* clear,clearfix */
.clear { clear: both; }
.clearfix { display: inline-block; }
.clearfix:after { display: block; visibility: hidden; clear: both; height: 0; font-size: 0; content: "."; }

/* hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* end hide from IE-mac */

/* wrapper */
#wrapper { overflow: hidden; position: relative; width: 100%; }

#wrapper .wrap { min-height: 815px; background: #f5f5f5; background: -webkit-linear-gradient(45deg, #f5f5f5 30px, #f5f5f5 30px), -webkit-linear-gradient(135deg, rgb(245, 245, 245) 30px, #f5f5f5 30px), -webkit-linear-gradient(225deg, #f5f5f5 30px, #f5f5f5 30px), -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 30px, rgb(245, 245, 245) 30px); background-position: bottom left, bottom right, top right, top left; background-size: 52%; background-repeat: no-repeat; }
#wrapper .wrap:before { position: absolute; border-width: 0 42px 42px 0; border-style: solid; border-color: #ffffff rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); content: ""; top: 0; left: 0; }
#wrapper .wrap .topBar { overflow: hidden; padding: 0; border-bottom: 1px solid #ddd; }
#wrapper .wrap .topBar h3 , #wrapper .wrap .topBar p { margin: 0 0 0 60px; padding: 20px 0 10px; float: left; width: 20%; font-size: 16px; font-weight: normal; text-transform: uppercase; }
#wrapper .wrap .topBar h3 i , #wrapper .wrap .topBar p i { margin: 0 5px; width: 16px; height: 16px; background: url(../images/main/icon-subTit.png) no-repeat 0 0; display: inline-block; }
#wrapper .wrap .topBar p { margin: 0 0 0 20px; padding-left: 5px; width: 70%; border-left: 1px dashed #ccc; font-size: 14px; }
#wrapper .wrap .topBar p i { width: 14px; height: 14px; background: url(../images/main/icon-alert.png) no-repeat 0 0; }
#wrapper .wrap .topBar p a { padding: 5px; border-radius: 4px; background: #428bca; color: #fff; opacity: 1; }
#wrapper .wrap .topBar p a:last-child { background: #d88713; }
#wrapper .wrap .topBar p a:hover { opacity: .8; }
#wrapper .wrap .topBar p i.add { background: url(../images/main/icon-add.png) no-repeat 0 0; }
#wrapper .wrap .topBar p i.back { background: url(../images/main/icon-back.png) no-repeat 0 0; }
#wrapper .wrap .container { overflow: hidden; padding: 0 30px; max-width: 100% !important; }
#wrapper .wrap .container .tit { margin-top: 20px; padding: 10px 20px; background: #fff; border-bottom: 1px rgb(221, 221, 221) dotted; }
#wrapper .wrap .container .tit h3 { padding: 0px 5px 2px;  font-size: 14px; font-weight: normal; left: 15px; text-transform: uppercase; top: 6px;}
#wrapper .wrap .container .content-wrap { overflow: hidden; padding: 20px; background: #fff; }
#wrapper .wrap .container .content-wrap p ,
#wrapper .wrap .container .content-wrap .ckeList ,
#wrapper .wrap .container .content-wrap .ckeList .ckeDes .fck { margin: 10px 0; }
#wrapper .wrap .container .content-wrap p label , #wrapper .wrap .container .content-wrap .ckeList label , .logonBox form p label { margin: 0 10px 0 0; width: 120px; display: inline-block; font-size: 15px; text-align: right; }
#wrapper .wrap .container .content-wrap .ckeList label { float: left; line-height: 34px; }
#wrapper .wrap .container .content-wrap .addList ul ,
#wrapper .wrap .container .content-wrap .ckeList .ckeDes ,
#wrapper .wrap .container .content-wrap .ckeList .MenuDes ,
#wrapper .wrap .container .content-wrap .ckeList .MenuDes ul ,
#wrapper #topWrap #topBar ul { overflow: hidden; }
#wrapper .wrap .container .content-wrap form p input ,
#wrapper .wrap .container .content-wrap form p select ,
#wrapper .wrap .topBar p input ,
#wrapper .wrap .topBar p select ,
#wrapper .wrap .container .content-wrap table tr td input ,
#wrapper .wrap .container .content-wrap .addList ul li select ,
#wrapper .wrap .container .content-wrap form p textarea ,
#wrapper .wrap .container .content-wrap form p.photo a ,
#wrapper .wrap .container .content-wrap .addList ul#img-table li p a ,
.logonBox form p input ,
#wrapper .wrap .container .content-wrap form .ckeList input { width: 300px; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
#wrapper .wrap .container .content-wrap form .ckeList input[type="checkbox"] { width: auto; border: 0; }
#wrapper .wrap .topBar p input ,
#wrapper .wrap .topBar p select ,
#wrapper .wrap .container .content-wrap table tr td input { padding: 5px; }
#wrapper .wrap .container .content-wrap table tr td input ,
#wrapper .wrap .topBar p select ,
#wrapper .wrap .container .content-wrap form p.photo a { width: auto; }
#wrapper .wrap .container .content-wrap form p input.click { border: 1px #35BDAF solid; }
#wrapper .wrap .container .content-wrap form p b { color: #F10E12; }
#wrapper .wrap .container .content-wrap form p.send input ,
#wrapper .wrap .topBar p input#btnOK ,
#wrapper .wrap .container .content-wrap form p.photo a ,
#wrapper .wrap .container .content-wrap .addList ul#img-table li p a { width: auto; color: #fff; background-color: #60B8D1; border-color: #60B8D1; opacity: .8; }
#wrapper .wrap .container .content-wrap form p.send input:hover ,
#wrapper .wrap .topBar p input#btnOK:hover ,
#wrapper .wrap .container .content-wrap form p.photo a:hover ,
#wrapper .wrap .container .content-wrap .addList ul#img-table li p a:hover { opacity: 1; }
#wrapper .wrap .container .content-wrap form p.send input:nth-child(2) { background-color: #E86161; border-color: #E86161; }
#wrapper .wrap .container .content-wrap form p.photo a ,
#wrapper .wrap .container .content-wrap .addList ul#img-table li p a { background-color: #45B6B0; border-color: #45B6B0; }
#wrapper .wrap .container .content-wrap p.photo a:last-child ,
#wrapper .wrap .container .content-wrap .addList ul#img-table li p a:last-child { background-color: #D88713; border-color: #D88713; }
#wrapper .wrap .container .content-wrap table { width: 100%; }
#wrapper .wrap .container .content-wrap table tr td { padding: 5px 10px; height: 30px; border: 1px #ddd solid; border-top: 0; border-right: 0; text-align: center; }
#wrapper .wrap .container .content-wrap table tr td a { color: #49668E; }
#wrapper .wrap .container .content-wrap table tr td ul li { text-align: center; }
#wrapper .wrap .container .content-wrap table tr:first-child td { border-top: 1px #ddd solid; border-bottom: 2px #ddd solid; color: #191919; }
#wrapper .wrap .container .content-wrap table tr:first-child td a { color: #191919; }
#wrapper .wrap .container .content-wrap table tr td:last-child { border-right: 1px #ddd solid; }
#wrapper .wrap .container .content-wrap table tr:nth-child(even) td { background: #f9f9f9; }
#wrapper .wrap .container .content-wrap table tr td.action a ,
#wrapper .wrap .container .content-wrap table tr td input[type="button"] ,
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"] ,
.logonBox form p a { background: #1abc9c; border-radius: 2px; color: #f5f5f5; font-weight: bold; padding: 4px; opacity: 1; }
#wrapper .wrap .container .content-wrap table tr td input[type="button"] ,
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"] { border: 0; }
#wrapper .wrap .container .content-wrap table tr td.action a:nth-child(2) ,
#wrapper .wrap .container .content-wrap table tr td input[type="button"]:nth-child(2) ,
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"]:nth-child(2) { background: #D88713; }
#wrapper .wrap .container .content-wrap table tr td.action a:nth-child(3) ,
#wrapper .wrap .container .content-wrap table tr td input[type="button"]:nth-child(3) ,
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"]:nth-child(3) { background: #2D91AF; }
#wrapper .wrap .container .content-wrap table tr td.action a:last-child ,
#wrapper .wrap .container .content-wrap table tr td input[type="button"]:last-child ,
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"]:last-child { background: #D22D2D; }
#wrapper .wrap .container .content-wrap table tr td.action a:hover ,
#wrapper .wrap .container .content-wrap table tr td input[type="button"]:hover ,
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"]:hover { opacity: .8; }
#wrapper .wrap .container .content-wrap form p input[type="checkbox"] ,
#wrapper .wrap .container .content-wrap form p input[type="radio"] { margin-right: 10px; width: auto; -webkit-box-shadow: 0; box-shadow: 0; }
#wrapper .wrap .container .content-wrap form p input[type="radio"] { margin-left: 15px; }
#wrapper .wrap .container .content-wrap .addList { margin: 0 auto; width: 83%; }
#wrapper .wrap .container .content-wrap .addList ul li ,
#wrapper .wrap .container .content-wrap .ckeList .MenuDes ul li { margin: 5px; padding: 10px; float: left; width: 95%; border-radius: 4px; background: rgba(251, 180, 76, 0.1); border: 1px #faebcc solid; }
#wrapper .wrap .container .content-wrap .ckeList .MenuDes ul li { background: rgba(101, 195, 223, 0.1); border: 1px #bce8f1 solid; }
#wrapper .wrap .container .content-wrap .ckeList .MenuDes ul li ul.submenu li { width: initial; background: none; border: 0; }
#wrapper .wrap .container .content-wrap .addList ul li input[type="button"] { margin: 0 0 0 10px; padding: 6px 12px; width: auto; }
#wrapper .wrap .container .content-wrap .addList ul#attr-table li ,
#wrapper .wrap .container .content-wrap .addList ul#img-table li { width: 45%; }
.listWrap ,
#wrapper .wrap .container .content-wrap .ckeList { margin: 10px 0; padding-bottom: 10px; border-bottom: 1px #ccc dashed; }
#wrapper .wrap .container .content-wrap .listWrap p label { width: 200px; }

/* topWrap */
#wrapper #topWrap { margin: 20px; }
#wrapper #topWrap #cis { overflow: hidden; float: left; width: 12%; }
#wrapper #topWrap #cis b ,
.logonBox #cis b { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); border-radius: 3px; font-size: 11px; margin-left: 0; padding: 5px 10px; position: relative; top: 2px; left: 5px; color: #fff; }
#wrapper #topWrap #localtime { float: left; padding: 10px 45px; width: 20%; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 30px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); }
#wrapper #topWrap #localtime .date ,
#wrapper #topWrap #localtime .clock { padding-right: 15px; display: inline-block; border-right: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); }
#wrapper #topWrap #localtime .clock { padding-left: 15px; }
#wrapper #topWrap #localtime .date i ,
#wrapper #topWrap #localtime .clock i ,
#wrapper #topWrap #topBar ul li a i { margin: 0 10px 0 0; width: 14px; height: 14px; line-height: 14px; display: inline-block; background: url(../images/main/icondate.png) no-repeat 0 center; font-family: "Open Sans", Arial, sans-serif; }
#wrapper #topWrap #localtime .clock i { background: url(../images/main/icon-clock.png) no-repeat 0 top; }
#wrapper #topWrap #topBar { margin: 10px; float: right; }
#wrapper #topWrap #topBar ul li { float: left; margin-right: 20px; }
#wrapper #topWrap #topBar ul li a { color: #fff; }
#wrapper #topWrap #topBar ul li a i { background: url(../images/main/icon-home.png) no-repeat 0 bottom; }
#wrapper #topWrap #topBar ul li:nth-child(2) a i { background: url(../images/main/icon-refresh.png) no-repeat 0 center; }
#wrapper #topWrap #topBar ul li:nth-child(3) a i { background: url(../images/main/icon-password.png) no-repeat 0 bottom; }
#wrapper #topWrap #topBar ul li:nth-child(4) a i { background: url(../images/main/icon-out.png) no-repeat 0 bottom; }

/* logonBox */
.logonBox { margin: 10% auto 0; padding: 40px 20px 20px; width: 20%; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); border: rgba(0, 0, 0, 0.5); }
.logonBox form { margin: 10px 0; }
.logonBox form p { margin: 20px 0; color: #fff; }
.logonBox form p label { width: 40px; }
.logonBox form p.loging { text-align: right; }
.logonBox form p.loging a { padding: 6px 12px; opacity: 1; }
.logonBox form p.loging a:hover { opacity: .8; }

/* menu */
#wrapper #menu , #wrapper #menu .menuList ul { margin: 10px; overflow: hidden; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); border-radius: 3px; font-size: 14px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
#wrapper #menu .menuList { font-size: 14px; list-style: none outside none; margin: 0; text-align: left; border-bottom: 1px rgba(0,0,0,0.1) solid; }
#wrapper #menu .menuList .menuTit , #wrapper #menu .menuList ul li a { display: block; font-size: 16px; color: #fff; line-height: 150%; list-style: none outside none; padding: 10px 10px 10px 30px; text-decoration: none; text-transform: capitalize; }
#wrapper #menu .menuList ul li a { font-size: 14px; }
#wrapper #menu .menuList .menuTit:hover ,
#wrapper #menu .menuList ul li a:hover { background-color:rgba(0, 0, 0, 0.3); text-shadow: none; border-left: 2px solid #fff; padding-left: 28px; position: relative; }
#wrapper #menu .menuList .menuTit:hover:after ,
#wrapper #menu .menuList ul li a:hover:after { border-bottom:6px solid #fff; border-left:8px solid transparent; border-right:8px solid transparent; width:0; height:0; position: absolute; top:19px; left: -6px; content:""; display:block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); tranform: rotate(90deg); }
#wrapper #menu .menuList ul { margin: 0; }

/* templatelist */
#wrapper #templatelist img { object-fit: cover; object-position: 50% 0; border: 1px #ccc solid; }