@charset "utf-8";
::selection {
    background:#FC0;
    color:#fff;
}
::-moz-selection {
 background:#FC0;
 color:#fff;
}
.cm:after,
.side_list li:after,
footer .wrap:after,
.main_menu ul:after,
.wrap:after,
.forms ul:after,
.function ul:after,
.order_list .summary:after,
.item .action:after,
.service ul:after,
.direct .hint ul:after,
.marks ul:after,
.dir .msgbox .text:after,
.talk:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* btn */
.btn {
    background: #09b9ef;
    text-decoration: none;
    text-align:center;
    color: #fff;
    float: left;
    display:inline;
    padding: 5px 10px;
    border: #069 1px solid;
    border-top-color: #0cf7ff;
    border-left-color: #0cf7ff;
    border-radius:5px;
    font-size:1em;
    line-height:1.2;
    cursor: pointer;
}
.btn:hover{
    background: #3CF;
    color:#fff;
}
.btn.red{
    background: #e00;
    color: #fff;
    border:  #900 1px solid;
    border-top-color: #F99;
    border-left-color: #F99;
}
.btn.red:hover{
    background: #f00;
}
.btn.orange{
    background: #e80;
    color: #fff;
    border: #C60 1px solid;
    border-top-color: #F90;
    border-left-color: #F90;
}
.btn.orange:hover{
    background: #FFD351;
}
.btn.green {
    background: #9C0;
    color: #fff;
    border: #090 1px solid;
    border-top-color: #9F0;
    border-left-color: #9F0;
}
.btn.green:hover{
    background: #B4E800;
}
.btn.gray{
    background: #aaa;
    border: #999 1px solid;
    border-top-color: #eee;
    border-left-color: #eee;
}
.btn.gray:hover{
    background: #ccc;
}
/*----------------------*/
body {
    background:#fff url(../images/bg_index.png) repeat-x 0 0 fixed;
}
/*header*/
header {
    /*background:url(../images/bg_top.gif) repeat-x 0 -5px;*/
    padding-top:1px;
    position: relative;
}
header .logo {
    width:500px;
    height:auto;
    margin:auto;
    clear:both;
}
#index header .logo img{
    width:100%;
}

/*function*/
.function {
    position:absolute;
    top:1em;
    right: 3.5em;
}
.function li {
    list-style:none;
    float:left;
    margin-left:0.7em;
}
.function li a {
    background:url(../images/icon.png) no-repeat;
    width:50px;
    height:50px;
    display:block;
    font-size:13px;
    text-align:center;
}
.function li a b {
    position:relative;
    left:-5px;
    top:47px;
    display:block;
    width:60px;
}
.function .login a {
    background-position: 0px -100px;
}
.function .logout a {
    background-position: 0px -150px;
}
.function .menu a {
    background-position: 0px -200px;
}
.function .login a:hover {
    background-position: -50px -100px;
}
.function .logout a:hover {
    background-position: -50px -150px;
}
.function .menu a:hover {
    background-position: -50px -200px;
}
.function .menu {
    display:none;
}

/*order_list*/
.side_list {
    background:#fff;
    border:#aaa solid 1px;
    border-radius:10px 0px 0px 10px;
    width:220px;
    height:auto !important; height:200px;
    min-height:200px;
    position:fixed;
    top:66px;
    right:-220px;
    padding:0em 0 1em;
    z-index:99999;
}

.side_list h3 {
    background:#09b9ef;
    border:#aaa solid 1px;
    color:#fff;
    width:35px;
    text-align:center;
    line-height:1.2;
    font-size:1em;
    position:absolute;
    left:-37px;
    top:10px;
    cursor:pointer;
}
.side_list h3 .icon {
    background:#000 url(../images/icon.png) no-repeat -130px 0px;
    width:35px;
    height:35px;
    display:block;
    margin:0 0 0em;
}
.side_list h3 ins {
    padding:10px 10px 10px;
    display:block;
}
.side_list ul {
    display:block;
    list-style:none;
    padding:1em 1em;
    border-bottom:1px solid #aaa;
    max-height:400px;
    overflow:auto;
}
.side_list li {
    height:1%;
    padding:0 0 0.5em;
    margin-bottom:0.5em;
    border-bottom:#aaa 1px dotted;
}
.side_list li .dropitem {
    font-size:0.85em;
    float:right;
}
.side_list li .dropitem:hover {
}
.side_list li small{
}
.side_list li small span{
    color:#f00;
}
.side_list .check .btn{
    float: none;
    display: block;
}


/*banner*/
.limit{
    width:100%;
    padding-bottom:2em;
    overflow:hidden;
}
#banner {
    width:860px;
    height:auto;
    margin:0 auto;
    background:#000;
    border:1px solid #aaa;
    box-shadow: 10px 10px 20px #666;
    position:relative;
    margin-top: 48px;
}

#banner .block{
    line-height:0;
    overflow:hidden;
}
#banner .block img{
    width:100%;
    float:left;
}
#banner .photos{
    width:100%;
    height:100%;
}
#banner figure{
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    line-height:0;
    display:none;
}
#banner figure.highlight{
    z-index:10;
    display:block;
}

#banner img{
    width:100%;
    height:auto;
}
/*#banner .select {
    position: absolute;
    left:1em;
    bottom:-10px;
    z-index:11;
}*/
/*#banner .select a{
    background:url(../images/icon.png) no-repeat -115px -220px;
    width:20px;
    height:20px;
    float:left;
    margin:0 0 0 10px;
    text-indent:-1000px;
    overflow:hidden;
}*/
/*#banner .select a.highlight{
    background-position:-135px -220px;
}*/
.select {
    max-width: 860px;
    width: 100%;
    height: 40px;
    /* background-color: #add6eb; */
    margin: auto;
    color: #fff;
    z-index: 11;
    position: relative;
    /* margin-top: 9px; */
    font-size: 0;
    top: -340px;
}
.select a {
    width: 25%;
    max-width: 215px;
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    color: #1f5c7a;	
    font-size: 15px;
    padding: 0 10px;
    line-height: 40px;
    margin-left: -1px;
    background-color: #add6eb;

    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}
.select a:not(:last-child):not(:nth-child(4)) {
    border-right: 1px dotted #ebf5fa;
}
.select a:hover {
    color: #fff;
    background-color: #85c2e0;
}
.select a.highlight{
    color: #fffa66;
    background-color: #39c;
}

.select a:before {
    content: '';
    background: url(../images/icon.png) no-repeat -115px -220px;
    width:20px;
    height:20px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    text-indent:-1000px;
    position: relative;
    bottom: 2px;
    overflow:hidden;
}
.select a.highlight:before {
    content: '';
    background: url(../images/icon.png) no-repeat -135px -220px;
    width:20px;
    height:20px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    text-indent:-1000px;
    position: relative;
    bottom: 2px;
    overflow:hidden;
}

a.adidx.bn5, a.adidx.bn6, a.adidx.bn7, a.adidx.bn8 {
    margin-top: 308px;
}

/*main_menu*/
.main_menu {
    width:700px;
    margin:0em auto 0em;
    position:relative;
    left:0;
    top:-1em;
    clear:both;
}

.main_menu li {
    list-style:none;
    width:80px;
    height:80px;
    float:left;
    display:inline;
    padding:0 10px 2em;
}
.main_menu li a {
    background:url(../images/main_menu.png) no-repeat;
    width:80px;
    height:80px;
    display:block;
    margin:auto;
    text-align:center;
    position:relative;
}
.main_menu .about a {
    background-position:0px 0px;
}
.main_menu .news a {
    background-position:-80px 0px;
}
.main_menu .member a {
    background-position:-160px 0px;
}
.main_menu .order a {
    background-position:-240px 0px;
}
.main_menu .guide a {
    background-position:-320px 0px;
}
.main_menu .links a {
    background-position:-400px 0px;
}
.main_menu .contact a {
    background-position:-480px 0px;
}
.main_menu .about a:hover {
    background-position:0px -80px;
}
.main_menu .news a:hover {
    background-position:-80px -80px;
}
.main_menu .member a:hover {
    background-position:-160px -80px;
}
.main_menu .order a:hover {
    background-position:-240px -80px;
}
.main_menu .guide a:hover {
    background-position:-320px -80px;
}
.main_menu .links a:hover {
    background-position:-400px -80px;
}
.main_menu .contact a:hover {
    background-position:-480px -80px;
}
.main_menu li a .word{
    position: relative;
    top:90%;
    display:block;;
    line-height:1.4;
}
.main_menu li a *{
    display:block;
    text-align:center;
}
.main_menu li a b{
    color:#000;
}
.main_menu li a:hover b {
    color:#999;
}
/*main*/
#index .main{
    margin-bottom:3em;
    }
#index .main .news,
#index .main .med {
    width:100%;
    padding:0em 0 0em;
    border: #ccc 0px solid;
    float:left;
}
.main .news {
    background:#4da4d4;
}
.main .med {
    background:#f9f9f9;
}
#index .main article{
    position:relative;
    height:16em;
    overflow:hidden;
}
#index .main .news article{
    border-left: #39C 1px solid;
    border-bottom: #2483C8 1px solid;
    overflow:hidden;
}
#index .main .med article{
    border-right: #ddd 1px solid;
    border-bottom: #bbb 1px solid;
    overflow:hidden;
}

.main .title {
    border-bottom: solid 1px;
    color:#fff;
    padding: 0.5em 0.5em 0.3em;
}
.main .med .title {
    color:#4da4d4;
}
.main .list {
    list-style:none;
    padding:0.5em 0 0;
}
#index .main .list {
    height:10em;
    overflow:hidden;
}
.main article li .icon {
    background:url(../images/icon.png) no-repeat -100px -30px;
    display:block;
    width:10px;
    height:10px;
    margin:0px 10px 0 0;
    float:left;
}
.main article li.highlight .icon {
    background-position:-110px -30px;
}

.main time {
    color: #F36;
    font-size:0.8em;
    padding-right:1em;
}
.main .list a {
    height:1em;
    overflow:hidden;
    line-height:1;
    display:block;
    padding:0.5em 1em;
    color:#fff;
    font-size:120%
}
.main .list a time{
    float:left;
}
.main .list a .text{
    line-height:1;
    height:1em;
    overflow:hidden;
    display:block;
}
.main .list a:hover,
.main .med .list a:hover {
    background: #6CF;
    color:#fff;
}
#index .news .list time {
    color:#cff;
}
.main .list a:hover time {
    color:#ff0;
}

/* med */
.main .med time {
    color: #09C;
}
.main .med .list a{
    color:#666;
}
.main .more {
    position:absolute;
    right:0;
    bottom:0;
    /*float:right;*/
    padding:0 1em;
    background: #0CC;
    color: #fff;
    font-weight:bold;
}
.main .news .more {
}
.main .med .more {
}
.main .more:hover{
    background: #fe0;
    color: #4da4d4;
}

.l-side {
    width: 55%;
}
.r-side {
    width: 45%;
    display: inline-block;
}
.dm-area {
    padding: 0 0 10px 20px;
}
.custom-area {
    padding: 10px 0 0 20px;
}
.dm-area-body, .custom-area-body {
    width: 100%;
    /*height: auto;
    max-height: 230px;*/
    /*height: 230px;*/
    display: block;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 1px 2px 8px -2px rgba(30,30,30,.6);
}
.dm-area a img,
.custom-area a img {
    border-radius: 15px;
    width: 100%;
}



.cm {
    line-height:0;
    clear:both;
    padding:1em 0em;
    margin:auto;
    text-align:center;
}
.cm figure {
    border: #aaa 0px solid;
    line-height:0;
    margin: 0 0px 0;
    display: inline-block;
    height:80px;
}
.cm img {
    height:100%;
    line-height:0;
}





/*footer*/
footer {
    height:1%;
    padding:3em 0 3em 0em;
    clear:both;
    background:#5da9dd url(../images/bg_top.gif) repeat-x 0 0px;
}
.wrap {
    width:960px;
    margin:0 auto;
}
footer .logo {
    width:10%;
    display:block;
    float:left;
    margin:0 0 0 2%;
}
footer .logo img{
    width:100%;
}
footer .info {
    float:left;
    width:80%;
    color:#fff;
    margin:0 0 0 2%;
}
footer .info h2 {
    color:#000;
    margin:0 0 0.5em;
    line-height:1.3;
}
footer .info small {
    color:#cff;
    display:block;
    font-size:0.5em;
}
footer .info a {
    color:#ff0;
    text-decoration:underline;
}
footer .info a:hover {
    color:#6FF;
}
footer .copyright {
    margin-top:1em;
    padding-top:0.5em;
    font-size:0.8em;
    border-top: 1px #8fc9f1 solid;
    color:#cFF;
}
footer .ie_sug {
    padding-top:0.5em;
    font-size:0.8em;
    color:#cFF;
}
/* show box */
.show_box{
    background: url(../images/bk_85.png);
    width:100%;
    position:absolute;
    left:0;
    z-index:9999;
    color:#eee;
    display:none;
}
*.open{
    display:block;
}
.show_box .wrap{
    width:900px;
    position:relative;
}
.show_box .close{
    width:30px;
    height:30px;
    position:absolute;
    right:1em;
    top:10px;
    z-index:9999;
    display:block;
}
.show_box .close a{
    background: url(../images/icon.png) no-repeat -125px -180px;
    text-indent:-1000px;
    overflow:hidden;
    width:30px;
    height:30px;
    display:block;
}
.show_box .adjust{
    padding:10px 1em 1em;
    display:none;
    height:auto !important; height:200px;
    /*min-height:200px;*/
}
.show_box .adjust.open{
    display:block;
}
.show_box .title{
    /*margin:0 0 0.5em;*/
    margin:0 0 0.2em;
    padding:0 0em 0em;
    border-bottom:1px solid #666;
}
.show_box .exp{
    margin:0 0 1em;
}
.forms{
    /*margin:1em 0;*/
}
.forms label{
    width:20%;
    float:left;
    text-align:right;
    margin:0 1em 0 0;
    font-weight:bold;
}
.forms ul{
    list-style:none;
}
.forms li{
    width:50%;
    float:left;
    /*padding:0.5em 0;*/	
}
.keyin{
    width:60%;
    float:left;
}
.keyin *{
    margin:0.2em 0;
    /*width:100%;*/
    width:95%;
    font-size:1em;
    padding:0.3em 0.5em;
    border-radius:5px;
    vertical-align:middle;
    background:#fafafa;
}

.show_box .login .title {
    color: #fff;
    border-bottom: 1px solid #999;
}

/*會員登入*/
#index .login_alert {
    top:125px;
}
#page .login_alert {
    top:190px;
    z-index:99999;
}
.show_box .login .forms {
    float:left;
    width:50%;
    margin:0 0 0 0;
    border-right: 1px solid #999;
}
.show_box .login .forms li{
    float:none;
    width:auto;
}
.show_box .login .forms .btns{
    margin: 1em 0 0.5em 1em;
    padding: 0 0 0 20%;
}
.show_box .login .forms .btns .forget{
    margin: 0em 0em 0 1.5em;
    padding:0.2em;
    float:left;
    color:#aaa;
    text-decoration:underline;
}
.show_box .login .forms .btns .forget:hover{
    color:#eee;
}
.show_box .login .register {
    float:left;
    width:200px;
    margin-left:2em;
}
.show_box .login .register p{
    color:#Fc0;
    margin-bottom:0.5em;
}

/*訊息提示*/
.show_box .alert .title {
    color: #F66;
    border-bottom: 1px solid #C33;
}

/*安全憑證*/
footer .ssl{
    display:block;
    float:right;
}

footer .ssl .SMALL{
    background:url(../images/SMALL.gif) no-repeat right;
    width:134px;
    height:75px;	
}

footer .ssl #twcad2{
    width:auto;
}

/* 購物車 */
.side_list li .dropitem {
    padding: 5px 5px;
    float:left;
    margin-right:3px
}
.side_list li .cartamount{
    float:right
}




/* top bar */
/*.top-bar {
    width: 100%;
    height: 55px;
    background-color: #add6eb;
    display: block;
    box-sizing: border-box;
    box-shadow: 0 -2px 10px -5px rgba(30,30,30,.6) inset;
}*/
/*.top-bar .top-bar-body {
    max-width: 960px;
    margin: auto;
    text-align: center;
    display: block;
    box-sizing: border-box;
}*/
/*.top-bar .top-bar-body div {
    width: 100%;
    max-width: 33.33333333%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}*/
/*.top-bar .top-bar-body div:last-child a {
    border-right: 1px solid rgba(255,255,255,.8);
}*/
/*.top-bar .top-bar-body div a {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border-left: 1px solid rgba(255,255,255,.8);

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}*/
/*.top-bar .top-bar-body div a:hover {
    background-color: #fff;
}*/
/*.top-bar .top-bar-body div a img {
    width: 100%;
}*/

/* 線上型錄按鈕 */
.dm-btn {
    width: 35px;
    height: auto;
    display: block;
    position: fixed;
    top: 225px;
    right: 0;

    background: #fffa66;
    border: #aaa solid 1px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    font-size: 1em;
    font-weight: bold;
    z-index: 999;
}
.dm-btn span {
    background: #000 url(../images/dm_icon.svg) no-repeat;
    background-size: 35px;
    width: 35px;
    height: 35px;
    display: block;
    margin: 0 0 0em;
}
.dm-btn ins {
    padding: 10px 10px 10px;
    display: block;
}

/*管藥憑證*/
.qr-btn {
    width: 35px;
    height: auto;
    display: none;
    position: fixed;
    top: 379px;
    right: 0;
    background: #ff0080;
    border: #aaa solid 1px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    font-size: 1em;
    font-weight: bold;
    z-index: 999;
}
.qr-btn span {
    background: #000 url(../images/chawha-QRicon.svg) no-repeat;
    background-size: 30px;
    background-position: 50% 50%;
    width: 35px;
    height: 35px;
    display: block;
    margin: 0 0 0em;
}
.qr-btn ins {
    padding: 10px 10px 10px;
    color: #ffffff;
    display: block;
}

@media screen and (max-width: 768px) {
    .qr-btn { display: block; top: 185px; }
    .qr-btn ins { display: none; }
}