/* 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 }
html{height: 100%;}
ul,ol{ list-style:none;}
/* font-family: "僸儔僊僲妏僑 Pro W3", "Hiragino Kaku Gothic Pro", "儊僀儕僆", Meiryo, Osaka, "俵俽 俹僑僔僢僋", "MS PGothic", sans-serif */
/* ------------------------------header------------------------------- */
#header{width:100%;}

#menubar{background-color:White;border-bottom:1px solid silver;background-image:url(../img/bg-nav.png);background-repeat:repeat-x;}
#header-nav{width:1000px;margin:0 auto;height:40px;padding:10px 0;}
#header-nav ul{padding-top:10px;padding-right:0px;margin-left:30px;list-style-image: url(../img/diamond.png);}
#header-nav ul li{float:left;margin-right:27px;margin-left:13px;text-indent:-8px;}
#header-nav button{position:absolute;display:none;}


/* -----------------------------footer--------------------------------- */
#footer{height:200px;width:100%;line-height:1.5em;font-size:small;background-image:url(../img/bg-foot.jpg);}
#footer-content{max-width:1000px;margin:auto;}

#footer a,a:link,a:visited{text-decoration:none;color:black;}
#footer a:hover{text-decoration:none;color:yellow;}

#footer-left{margin-top:20px;padding:0 2%;float:left;}
#footer-middle-1{margin-top:20px;padding:0 5%;float:left;}
#footer-middle-1 ul{list-style-image: url(../img/diamond.png);}
#footer-middle-2{margin-top:20px;padding:0 5%;float:left;}
#footer-middle-2 ul{list-style-image: url(../img/diamond.png);}
#footer-right{margin-top:20px;padding:0 2%;float:left;}


/* ================================main================================ */
.wrap{width:100%;}
.wrap-body{width:960px;margin:20px auto;border:1px solid white;padding:20px;border-radius:10px;background-image:url(../img/bg-0.png);} 
.wrap a,a:link,a:visited{text-decoration:none;color:black;}
.wrap a:hover{text-decoration:none;color:darkseagreen;}

/* page title */
.page-title{text-align:center;padding:30px 0;}
.sub-title{font-size:large;font-weight:bold;border-left:5px solid fuchsia;padding-left:10px;}

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

/* -------------------------------page--------------------------------- */
.tbl{border:1px solid silver;width:100%;border-collapse: collapse}
.tbl th,td{border:1px solid silver;padding:5px;}
.tbl th{background-color:rgba(5,83,113,0.1);text-align:center;}
/* ----------page news---------- */
.news{padding:13px;border-bottom:1px dotted gray;}
.news:first-of-type{border-top:1px dotted gray;}
.news-time{color:maroon;text-align:center;width:120px;float:left;border-radius:10px 0 10px 0;}
.news-title{padding-left:20px;float:left;}	
.news-body{padding:20px;}

.top-news-header{background-image:url(../img/bg-0.png);padding:10px;border-radius:10px;border:1px solid white;}
.top-news-time{}
.top-news-title{}
.top-news-text{padding:20px;}
/* ----------page privacypolicy---------- */
.privacypolicy-body{padding:0 100px;}

/* ----------page contact---------- */
.contact{padding:13px;border-bottom:1px dotted #d48029}
.contact:first-of-type{border-top:1px dotted #d48029;}
.contact-title{background-color:#c7ddc7;width:160px;float:left;}
.contact-content{padding-left:20px;float:left;}
.contact-textbox{width:720px;background-color:aliceblue;border:1px solid darkseagreen;height:20px;}

/* ----------page guide---------- */
.map{width:100%;height:500px;}

/* ----------page register result---------- */
.login-info-title{width:200px;text-align:right;}

/* -----------page top shopping----------- */
.top-course{float:left;width:250px;}
.top-course-photo{text-align:center;}
.top-course-img{width:200px;}
.top-course-name{text-align:center;padding-top:10px;font-size:small;margin-bottom:20px;}

.top-shopping{float:left;width:250px;}
.top-shopping-photo{text-align:center;}
.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{float:left;width:260px;}
.shopping-genre{background-color:pink;padding:5px;margin-bottom:7px;text-align:center;color:White;}
.shopping-genre-item{padding-left:5px;}

.shopping-right{float:left;width:720px;margin-left:20px;}
.item-shopping{float:left;width:240px;}
.item-shopping-photo{text-align:center;}
.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:380px;padding-right:20px;float:left;}
.detail-shopping-big-photo{width:380px;cursor:pointer;}
.detail-shopping-small-photo{width:90px;height:120px;padding-right:5px;padding-bottom:5px;cursor:pointer;}

.detail-shopping-right{width:600px;float:left;}

/**/
.cart-left{float:left;width:230px;}
.cart-right{float:right;width:750px;}





/* ============================common============================= */
hr{border:0;border-top:1px dotted gray;}
.br-phone-only{display:none;}
.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;}

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

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

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

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

.float-left{float:left;}
.only-phone{display:none;}

/* ============================picture pop up============================= */
.pimg{width:24%;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;}