/* common */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, form, table, tr, th, td {margin:0;padding:0;border:0;font-family: "僸儔僊僲妏僑 Pro W3", "Hiragino Kaku Gothic Pro", "儊僀儕僆", Meiryo, Osaka, "俵俽 俹僑僔僢僋", "MS PGothic", sans-serif;}
ul,ol{ list-style:none;}

/* ------------------------------header------------------------------- */
#header{width:100%;background-image:url(../img/bg-header-phone.jpg);background-repeat:repeat-x;background-position:center top;}
#header-bar{width:100%;height:300px;background:rgba(0,0,0,0);}

#header-div{width:100%;margin:0 auto;position:relative;}

#header-top-line{padding:25px 0 2px 0;color:silver;font-size:small;text-align:right;padding-right:10px;}
#header-top-line a,a:link,a:visited{text-decoration:none;color:maroon;font-size:small;}
#header-top-line a:hover{text-decoration:none;color:red;font-size:small;}
.top-login-css{width:100%;border-radius:5px;padding:5px 15px;background-image:url(../img/bg-1.jpg);font-size:small;}
.top-cart-css{border-radius:5px;padding:7px 15px 6px 15px;background-color:red;margin-bottom:2px;}

#header-nav{width:100%;}
#header-nav ul{display:none;position:absolute;top:170px;right:0;width:50%;margin-right:0;z-index:100;}
#header-nav ul li{padding:10px;background-color:#90c6f6;border-bottom:1px dotted gray;text-align:center;opacity:0.9;filter:progid:DXImageTransform.Microsoft.alpha(opacity=90)}
#header-nav ul li:last-of-type{border-bottom:0;}
#header-nav ul li a{display:block;}
#header-nav ul li a,a:link,a:visited{text-decoration:none;color:Black;font-size:large;}
#header-nav ul li a:hover{text-decoration:none;color:white;}
#header-nav button{position:absolute;top:100px;right:20px;background-color:Transparent;border:none;cursor:pointer;border:none;outline:none;}

/**/
#logo-div{}
#logo-title{max-width:100%;position:absolute;top:20px;left:10px;}

/* -----------------------------footer--------------------------------- */
#footer{width:100%;background-color:gray;color:White;line-height:1.5em;font-size:small;}
#footer a,a:link,a:visited{text-decoration:none;color:white;font-size:small;}
#footer a:hover{text-decoration:none;color:yellow;font-size:small;}

#footer-left{padding:0 5%;padding-top:20px;text-align:center;}
#footer-middle{text-align:center;padding-top:20px;}
#footer-right{margin-top:30px;padding:0 5%;text-align:center;padding-bottom:20px;}

/* page gotop */
.page-gotop{text-align:center;padding:50px 0;}

/* ================================main================================ */
.wrap{width:100%;line-height:1.8em;}
.wrap-body{padding:0 5%;} 
.wrap a,a:link,a:visited{text-decoration:none;color:black;font-size:medium;}
.wrap a:hover{text-decoration:none;color:darkseagreen;font-size:medium;}
.wrap img{max-width:100%;}

/* page title */
.page-title{text-align:center;padding:30px 0;}
.sub-title{font-size:x-large;margin-bottom:20px;background-image:url(../img/sub-title-bg.png);background-repeat:no-repeat;padding:5px 0 10px 35px;color:darkseagreen;}

/* aside menu */
#barGenre{display:none;}
.titleGenre{margin-left:10px;color:green;}

/* ----------page top----------*/
.img-phone{height:25vw;}

/* ----------page news---------- */

.news-top{padding:13px;border-bottom:1px dotted white;}
.news-top:first-of-type{border-top:1px dotted white;}
.news-top-time{color:darkseagreen;text-align:center;width:120px;float:left;border-radius:10px 0 10px 0;}
.news-top-title{padding-left:20px;float:left;color:White;}	
.news-top a,a:link,a:visited{text-decoration:none;}
.news-top a:hover{text-decoration:none;color:yellow;}

.news{padding:10px 0;border-bottom:1px dotted gray;}
.news:first-of-type{border-top:1px dotted gray;}
.news-time{color:darkseagreen;text-align:center;width:100px;float:left;border-radius:10px 0 10px 0;}
.news-title{padding-left:10px;}	
.news a,a:link,a:visited{text-decoration:none;color:black;}
.news a:hover{text-decoration:none;color:darkseagreen;}

/* ----------page job---------- */
.job-time{color:darkseagreen;background-color:aliceblue;padding-left:10px;border-top:5px solid darkseagreen;}
.job-title{padding:20px;background-image:url(../img/bg-1.jpg);border-radius:0 0 20px 20px;}	

/* ----------page contact---------- */
.contact{padding:13px;border-bottom:1px dotted #d48029}
.contact:first-of-type{border-top:1px dotted #d48029;}
.contact-title{color:darkseagreen;}
.contact-content{padding-left:1em;padding-bottom:10px;}
.contact-textbox{width:100%}

/* ----------page guide---------- */
.map{width:100%;height:50vw;}

/* ----------page top course shopping---------- */
.top-shopping{float:left;width:50%}
.top-shopping-photo{text-align:center;max-width:100%;position:relative;}
.top-shopping-photo-image{width:96%;padding:0 2%;text-align:center;z-index:1}
.top-shopping-photo-flag{position:absolute;left:2%;top:0;z-index:100;opacity:0.25;}
.top-shopping-name{text-align:center;padding-top:10px;font-size:small;color:White;}
.top-shopping-price{text-align:center;font-size:large;margin-bottom:20px;color:Red;}

/* -----------page shopping----------- */
.shopping-left{}
.shopping-genre{background-color:darkseagreen;padding:5px;text-align:center;color:White;}
.shopping-genre-item{padding-left:5px;}

.shopping-right{}
.item-shopping{float:left;width:50%;position:relative;}
.item-shopping-photo{text-align:center;position:relative;}
.item-shopping-photo-image{width:96%;padding:0 2%;text-align:center;z-index:1}
.item-shopping-photo-flag{position:absolute;left:2%;top:0;z-index:100;opacity:0.25;}
.item-shopping-name{text-align:center;padding-top:5px;font-size:small;color:Black;}
.item-shopping-price{text-align:center;font-size:large;margin-bottom:20px;color:Red;}

/**/
.detail-shopping-left{width:100%;}
.detail-shopping-big-photo{width:100%;cursor:pointer;}
.detail-shopping-small-photo{width:24%;padding-right:1%;padding-bottom:5px;cursor:pointer;}
.detail-shopping-right{width:100%;padding-top:50px;}


/* -----------page purchasing---------- */
.purchasing{width:97.5%;font-size:small;border:1px solid silver;margin:2% 1%;}
.purchasing-table{width:100%;}
.purchasing-table th{text-align:right;background-color:aliceblue;padding:5px;width:80px;}
.purchasing-table table{width:100%;}
.purchasing-table table td{background-color:papayawhip;padding:5px;}
.purchsing-pic{width:33%;}

/* ============================common============================= */
hr{border:0;border-top:1px dotted gray;}
.transparent{opacity:0.9;filter:progid:DXImageTransform.Microsoft.alpha(opacity=90)}
.box-shadow-1{-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px #ccc;}
.justify{text-align:justify;text-justify:inter-ideograph;}

.material-box-pdf{display:block;font-size:15px;height:29px;padding:10px 20px 0 50px;background-image:url(../img/pdf.png);background-repeat:no-repeat;margin:10px 0 15px 0;}
.material-box-ppt{display:block;font-size:15px;height:29px;padding:10px 20px 0 50px;background-image:url(../img/ppt.png);background-repeat:no-repeat;margin:10px 0 15px 0;}
.material-box-excel{display:block;font-size:15px;height:29px;padding:10px 20px 0 50px;background-image:url(../img/excel.png);background-repeat:no-repeat;margin:10px 0 15px 0;}
.material-box-word{display:block;font-size:15px;height:29px;padding:10px 20px 0 50px;background-image:url(../img/word.png);background-repeat:no-repeat;margin:10px 0 15px 0;}
.only-pc{display:none;}

.btnCss{width:100%;border-radius:15px;padding:10px;background-image:url(../img/bg-btn.jpg);font-size:x-large;}
.btnFontSizeMedium{font-size:medium;}

/* ---------- */
.txt-white{color:White;}
.txt-green{color:Green;}
.txt-navy{color:Navy;}
.txt-gray{color:gray;}
.txt-yellow{color:#fc9c06;}
.txt-red{color:Red;}

.bg-line{background-image:url(../img/bg-1.jpg);}
.bg-square{background-image:url(../img/bg-2.jpg);}
.padding-20{padding:20px;}
.padding-40{padding:20px;}
.padding-bottom-20{padding-bottom:20px;}
.content-box{border:1px solid silver;}

.bg-white{background-color:White;}
.bg-gray{background-color:Gray;}

/*===============*/
.pc-only{display:none;}

/* ============================picture pop up============================= */
.pimg{width:49%;padding-right:1%;padding-bottom:1%;float:left;}
.pimg:first-of-type{padding-left:0.5%}
.pimg:last-of-type{padding-right:0.5%}
.pimg:hover{cursor:pointer;}




/***********************供货商***************************/
.supplier-detail-block{padding:20px;border:1px solid silver;background-color:White;}
.supplier-detail-body{}