* {
    margin: 0;
    padding: 0
}

img {
    border: 0
}

a {
    text-decoration: none;
    color:#333
}
em {font-style: normal}
ul,
ol {
    list-style: none
}

.clr {
    clear: both
}

.none {
    display: none
}

body,
input,
button,
option,
textarea,
label,
select,
legend,
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font: 14px/18px Arial, Helvetica, sans-serif;
    color: #333;
    outline: none
}

p {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    text-rendering: geometricPrecision
}

input[type=text],
input[type=email],
input[type=tel],
textarea, select, button, input[type="submit"]
{
    -webkit-appearance: none
}
select:focus {outline:none}
select{
   background: url(../img/down_arrow.gif) no-repeat right 12px center
}

.clearfix:after, .container:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden;max-height:0}
.clearfix, .container{display:inline-block}
* html .clearfix, * html .container{height:1%}
.clearfix, .container{display:block}
.clearer{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}
.container{max-width:640px;width:100%;margin:0px auto;padding:0;clear:both;position:relative}
/* == START COMMON ECSHOP PLUGIN == */
.center{text-align:center}
.hide, .hidden{display:none !important}
.show{display:block !important}
.fl {float: left !important} .fr {float: right !important}
#loading_box{display:none;position:fixed;right:50%;top:0;z-index:1000;padding:6px 11px 6px 31px;background:#fff1a8 url('../img/lb_loading.gif') no-repeat scroll 10px center;color:#3f0000;font-size:12px;font-weight:bold;border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px}
#loader{background:#dae6ec;border:1px solid #069;position:fixed;color:#069;z-index:1000;left:0;bottom:0;padding:5px 15px;opacity:0.8}
.loader{display:inline-block;height:16px;width:16px;background:url('../img/loader.gif') no-repeat center center;visibility:hidden}

input.captcha{text-transform:uppercase;width:4em}
img.captcha{margin-left:5px;vertical-align: middle}
/* messege box */
.error_box, .notice_box, .success_box{padding:9px;margin-bottom:10px;border:1px solid #ddd;line-height:1.2em;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
.error_box{background:#f2dede;color:#b94a48;border-color:#eed3d7}
.notice_box{background:#fcf8e3;color:#c09853;border-color:#fbeed5}
.success_box{background:#dff0d8;color:#468847;border-color:#d6e9c6}
.info_box{background:#d9edf7;color:#3a87ad;border-color:#bce8f1}
.error_box a{color:#b94a48}
.notice_box a{color:#c09853}
.success_box a{color:#468847}
.info_box a{color:#3a87ad}
/* tipsy */
.button, button{background: #e5101d;color: #fff;display: inline-block;padding: 6px 12px;border: none;font-size: 16px;white-space: nowrap;cursor: pointer}
a.button:hover{color: #fff}
.text_button, .text_button:hover{background: none;color:#555;}
a.text_button:hover{color: #333}
.action .tool_link{margin-left: 10px;color: #333;background: #ececec;padding: 6px 12px;border: none;font-size: 16px;white-space: nowrap;cursor: pointer}

/* tipsy */
.tipsy{padding:8px 5px;font-size:12px;position:absolute;z-index:10001}
.tipsy sup{font-size:14px\9}
.tipsy-inner{padding:5px 8px;max-width:300px;color:#fff;text-align:center;text-shadow:0 1px 0 #000;background-color:#1a1a1a;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.tipsy-arrow{position:absolute;background:url('../img/tipsy.gif') no-repeat top left;width:9px;height:5px}
.tipsy-n .tipsy-arrow{top:3px;left:50%;margin-left:-4px}
.tipsy-nw .tipsy-arrow{top:3px;left:10px}
.tipsy-ne .tipsy-arrow{top:3px;right:10px}
.tipsy-s .tipsy-arrow{bottom:3px;left:50%;margin-left:-4px;background-position:bottom left}
.tipsy-sw .tipsy-arrow{bottom:3px;left:10px;background-position:bottom left}
.tipsy-se .tipsy-arrow{bottom:3px;right:10px;background-position:bottom left}
.tipsy-e .tipsy-arrow{top:50%;margin-top:-4px;right:0;width:5px;height:9px;background-position:top right}
.tipsy-w .tipsy-arrow{top:50%;margin-top:-4px;left:0;width:5px;height:9px}
/* colorbox*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative;overflow:hidden}
#cboxLoadedContent{overflow:auto}
#cboxLoadedContent iframe{display:block;width:100%;height:100%;border:0}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
#cboxOverlay{background: rgba(0,0,0,.8);}
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight, #cboxMiddleLeft, #cboxMiddleRight, #cboxTopCenter, #cboxBottomCenter{display:none}
#cboxContent{}
#cboxLoadedContent{padding:7px;background:#fff;}
#cboxClose:hover, #cboxClose.hover{opacity:1}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}
#cboxTitle{position:absolute;bottom:4px;left:0;text-align:center;width:100%;color:#333}
#cboxCurrent{position:absolute;bottom:4px;left:58px;color:#949494}
#cboxSlideshow{position:absolute;bottom:4px;right:30px;color:#0092ef}
#cboxPrevious{position:absolute;bottom:0;left:0px;background:#666;width:25px;height:25px;text-indent:-9999px}
#cboxPrevious.hover{background-position:-75px -25px}
#cboxNext{position:absolute;bottom:0;left:27px;background:#666;width:25px;height:25px;text-indent:-9999px}
#cboxNext.hover{background-position:-50px -25px}
#cboxLoadingOverlay{}
#cboxLoadingGraphic{background:url('../img/loader.gif') no-repeat center center}
#cboxClose{position:absolute;top:0;right:0;z-index:99999;background-color:rgba(0,0,0,0.1);background-image:url('../img/cross.png');background-repeat:no-repeat;background-position:7px 7px;width:30px;height:30px;text-indent:-9999px;opacity:0.8}
.message_box{position:relative;width:300px;min-height:50px;padding:10px;font-size:14px;line-height:1.3em;overflow:hidden}
.message_box .action{padding-top:25px;text-align:center}
/* End colorbox*/
.breadcrumbs {display: block;clear: both;padding:0 10px;white-space: nowrap;overflow-x: auto}
.breadcrumbs li{display: inline-block}
.breadcrumbs li a{padding: 5px 0;display: inline-block;color: #555;font-size: 12px;}
.breadcrumbs li a:after{content: "›"; margin: 0 5px; }
.breadcrumbs li:last-child a:after{ content: "";margin:0}
.breadcrumbs:hover{opacity:1}


.box {display: block; margin: 5px 0; clear: both;background: #fff;overflow: hidden}
.box>.hd {display: block; clear: both;overflow: hidden }
.box>.hd>.box_title {font-weight:bold;padding: 5px 10px;line-height:30px;display: inline-block;float: left;font-size:16px;color: #333}
.box>.hd>.box_total {font-size: 12px;display: inline-block;float: left;margin-top: 15px;}
.box>.box_title{font-weight:bold;padding: 5px 10px;line-height:30px;display: block;clear: both;overflow: hidden;font-size:16px;color: #333}
.box>.hd>.extra {display: inline-block;float:right;line-height:30px;padding-right: 10px;}
.box>.hd>.extra a{color:#288ad6}
.box>.bd {height:1%;display:block;background:#fff}
.box>.bd:after {clear:both;content:'\0020';display:block;visibility:hidden;height:0}

.lazy, .lazyload {
    opacity: 0;
}
.lazy.lazyOwl {
    opacity: 1;
    transition: all 300ms ease
}

.lazyloading {
    opacity: 1;
    transition: opacity 300ms;
    background: #f7f7f7 url(../img/loader.gif) no-repeat center;
}
.lazyloaded, .lazy.lazyOwl {
    opacity: 1;
    transition: opacity 300ms
}
img.lazyload:not([src]) {
    visibility: hidden;
}

[class^="iconmobile-"],
[class*="iconmobile-"] {
    background-image: url(../img/iconmobile@2x.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-size: 285px 92px
}

section {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 0;
    min-height: 360px;
    overflow: hidden;
}

header {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: auto;
    position: relative;
    top: 0;
    background: #bc000b;
}
.header_bar{
    height: 55px;
    display: block;
    width: 100%;
    position: relative;
    max-width: 640px;
    background: #bc000b;
}
header.fix_header_bar{
    position: fixed;
    z-index: 12;
    box-shadow: 0 5px 5px -5px #ddd;
    top:0;
    left: 50%;
    transform: translateX(-50%);
}
header .logo {
    height: 55px;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: block
}
header.fix_header_bar .logo {display: none}
header .logo img {
    height: 50px;
    margin-top: 3px;
    width: auto;
}


#bannertopheader a{
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
}
#bannertopheader img{display: block;text-align: center;margin: 0 auto;width: 100%;height: auto}

.cart {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 15px
}

.cart em {
    width: 18px;
    height: 18px;
    background: #fff;
    text-align: center;
    font-size: 12px;
    color: #d9232e;
    border-radius: 20px;
    position: absolute;
    top: 6px;
    right: 0
}

.iconmobile-cart {
    background-position: -70px 0;
    width: 26px;
    height: 20px;
    display: block;
    margin: 14px auto
}
.header_search {
    padding: 5px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    position: relative;
}

header.fix_header_bar .header_search {
    position: absolute;
    z-index: 13;
    top: 0;
    width: 82%;
    left: 52px;
    height: 48px;
    max-width: 640px;
    margin: auto;
}

.search {
    border-radius: 3px;
    background: #fff;
    position: relative;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    border:1px;
    height: 32px;
}
header.fix_header_bar .header_search .search{
    height: 38px;
}
.search input {
    display: block;
    padding: 7px 10px;
    background: #fff;
    border: 0;
    font-size: 14px;
    width: 85%;
    border-radius: 3px
}

.search .iconsearch {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 10px;
    background: #fff;
    height: 16px;
    border-radius: 0 3px 3px 0
}

.search .btn-reset {
    display: none;
    position: absolute;
    top: 0;
    right: 40px;
    width: 30px;
    height: 32px;
    border: 0;
    background: #fff
}

.search .btn-submit {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    background: #fbd600;
    border: 1px solid #fbd600;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    height: 32px
}

.search-cart {
    width: 75%
}

.search-cart input {
    width: 85%
}

.iconmobile-search {
    background-position: -35px 0;
    width: 15px;
    height: 15px;
    display: block;
    margin: auto
}

.iconmobile-reset {
    background-position: -55px 0;
    width: 10px;
    height: 10px;
    display: block;
    margin: auto
}


header .menu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 0 4px;
    width: 48px;
    cursor: pointer;
    z-index: 10
}
header .actmenu {
    
    padding: 8px 0
}

header .actmenu .iconmobile-menu {
    background-position: -140px 0;
    width: 24px;
    height: 28px
}
#bannertopheader img{width: 100%;height: auto}
.fixbody {
    position: fixed;
    height: 100vh;
    display: block;
    margin: auto;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1;
}
.subnav {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 48px;
    width: 100%;
    height: 100vh;
    left: 0;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}
.subnav.show{opacity: 1;}
.subnav .viewst {
    float: right;
    padding: 10px;
    font-size: 14px;
    color: #288ad6;
    background: #fff;
    position: relative;
    z-index: 101
}

.navigation {
    display: block;
    overflow: hidden;
    margin: 0 auto 0;
    background: #fff;
    position: relative;
    z-index: 12;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.navigation>li {
    display: block;
    overflow: visible;
    padding: 0;
    position: relative;
    border-bottom: 1px solid #ececec;
}
.navigation>li>span {
    display: block;
    color: #000;
    line-height: 20px;
    padding: 0;

}
.navigation>li.cate_items>span a, .navigation>li.cate_items>span{
    color: #111;
    font-weight: bold;
}
.navigation>li.cate_items>span a,.navigation>li.cate_items>span .toggle_arrow{
    display: inline-block;
    line-height: 40px;
    height: 40px;
}
.navigation>li.cate_items>span a {padding-left: 10px;}
.navigation>li.cate_items>span .toggle_arrow{
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    width: 40px;
    float: right;
    cursor: pointer;
    

}
.navigation>li>span .toggle_arrow:before, .navigation>li>span .toggle_arrow:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid #999;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    right: 15px;
    top: 10px;
}
.navigation>li>span .toggle_arrow:after{
    border-width: 4px;
    border-left-color: #fff;
    margin-right: 1px;
    margin-top: 1px;
}
.navigation>li>span img {width: 20px;vertical-align: middle;margin-right: 10px;float: left;}
.navigation li a {
    display: inline-block;
    font-size: 14px;
    color: #333;
    line-height: 35px;
    padding-left: 10px;
}
.navigation>li:hover>span>a{color: #0066BF}

.navigation>li>.sub_cat {
    box-sizing: border-box;
    padding: 0;
    background: #fafafa;
}
.navigation>li>.sub_cat li:before {
    content:"»";
    float: left;
    display: inline-block;
    padding: 0;
    vertical-align: middle;
    margin-right: 5px;
    line-height: 35px;
}

.navigation>li .sub_cat li{
    display: block;
    width: 100%;
    border-top: 1px solid #fff;
    padding-left: 10px;
}
.navigation>li>.sub_cat li>a {
    display: block;
    color: #444;
    text-transform: capitalize;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 0;
}
.navigation>li .cicon{display: inline-block;width: 30px;text-align: center;height: 20px;}

.navigation>li:last-child{margin-bottom: 70px}

#hide_nav {
    position: absolute;
    top:0;
    right: 0;
    border:1px solid #fff;
    border-radius:3px;
    color:#fff;
    display: block;
    padding: 10px;
    font-size: 18px;
    font-weight: 300;
}

.hideclick {
    display: none
}

.fixed {
    position: fixed;
    width: 100%;
    max-width: 640px;
    display: block;
    margin: auto;
    left: 0;
    right: 0
}

.overflow {
    overflow: hidden
}

.over {
    display: none;
    overflow: hidden;
    z-index: 9;
    background: rgba(0, 0, 0, .75);
    width: 100%;
    max-width: 640px;
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.iconmobile-menu {
    background-position: -100px 0;
    width: 33px;
    height: 30px;
    display: block;
    margin: 2px auto
}

.iconmobile-logo {
    background-position: 0 0;
    width: 32px;
    height: 32px;
    margin-top: 8px;
}
.iconmobile-user-white {
    background-position: -187px 0;
    width: 23px;
    height: 22px;
    margin: 7px 0 0 2px;
}


footer {
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 640px;
    background: #fafafa;
    margin: 20px auto 60px
}

.infoother {
    float: left;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 10px 7px 5px 15px;
}

.infoother span {
    width: 0;
    height: 0;
    border-top: 6px solid #333;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: relative;
    top: -1px;
    margin-left: 5px;
    display: inline-flex
}

.infoother.arrow span {
    border-bottom: 6px solid #a2a2a2;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 0;
    top: -8px
}

.subother {
    display: none;
    clear: both;
    overflow: hidden;
    padding-bottom: 10px
}


.social_links_footer img {
    height: 32px;width: auto
}

.buycall {
    display: block;
    overflow: hidden;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    clear: both
}
.buycall  p{
    line-height: 25px;
    color:#333;
}
.buycall_title {font-weight: 700;margin-bottom: 5px;}
.buycall a {
    font-size: 16px;
    color: #333;
    float: none;
    width: auto;
    height: auto;
    border: 0
}

.buycall span {
    font-size: 14px;
    color: #333;
    text-transform: none
}

.colfoot {
    display: inline-block;
    float: left;
    width: 50%;

}
.colfoot li {
    display: block;
    padding: 5px 10px
}

.colfoot li a {
    overflow: hidden;
    font-size: 12px;
    color: #222
}
.colfoot li a:before {
    content: "●";
    font-size: 12px;
    color: #222;
    margin-right: 5px;
}
.colfoot li a span {
    color: #222;
    padding-left: 5px;
    font-size: 10px;
    display: inline-block;
    vertical-align: bottom
}
.copyright {
    text-align: center;
    background: #ddd;
    color:#111;
    font-size:10px;
    padding: 10px 0
}

.wrap-suggestion {
    display: block;
    border: 1px solid #e2e2e2;
    background: #fff;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 48px;
    z-index: 99;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .15)
}

.wrap-suggestion:after,
.wrap-suggestion:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute
}

.wrap-suggestion:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 8px;
    margin-left: -8px
}

.wrap-suggestion:before {
    border-color: rgba(218, 218, 218, 0);
    border-bottom-color: #dadada;
    border-width: 9px;
    margin-left: -9px
}

.wrap-suggestion li {
    display: block;
    background: #fff;
    overflow: hidden;
    list-style: none;
    border-bottom: 1px dotted #ccc
}

.wrap-suggestion li:last-child {
    border-bottom: 0
}

.wrap-suggestion li a {
    display: block;
    overflow: hidden;
    padding: 6px;
    color: #333;
    font-size: 12px
}

.wrap-suggestion li a img {
    float: left;
    width: 50px;
    height: auto;
    margin: 0 6px 0 0
}

.wrap-suggestion li a h3 {
    display: block;
    color: #333;
    font-size: 14px
}

.wrap-suggestion li a h4 {
    font-size: 12px;
    font-weight: bold
}

.wrap-suggestion li a h6 {
    font-size: 12px;
    color: #e67e22
}

.wrap-suggestion li a span {
    float: left;
    font-size: 13px;
    color: #333
}

.wrap-suggestion li a span.price {
    font-size: 12px;
    color: #c70100;
    float: none
}

.wrap-suggestion li a label {
    display: block;
    font-size: 12px;
    color: #999;
    padding-left: 56px
}

.wrap-suggestion li a label strong {
    font-size: 12px;
    color: #d0021b
}

.wrap-suggestion .nosearch {padding: 10px;font-size: 13px;}
.wrap-suggestion .viewall {padding: 10px;text-align: center}
.wrap-suggestion .viewall a{color: #288ad6}

.breadcrumb {
    display: block;
    overflow: hidden;
    margin: 0;
    background: #fff;
    line-height: 34px
}

.breadcrumb li {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden
}

.breadcrumb li a {
    display: inline-block;
    white-space: nowrap;
    font-size: 12px;
    color: #666;
    padding: 0 10px
}

.breadcrumb span {
    display: inline-block;
    font-size: 16px;
    color: #444;
    line-height: 1
}

.breadcrumb li h2 {
    display: inline-block;
    font-size: 12px;
    color: #333;
    font-weight: normal;
    line-height: 34px
}

.breadcrumb li h2 a {
    color: #333
}

#back-top {
    bottom: 150px;
    position: fixed;
    right: 15px;
    z-index: 100;
    display: none;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 18px;
    -ms-border-radius: 50%;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 29px;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
}
.hotline_support {width: 100%;}
.hotline_support li {
    display: block;
    clear: both;
}
.hotline_support li.cot_title {font-weight: 700;}

#quick_support {
    position:fixed;right:5px;bottom:100px;width:45px;
    z-index:100;transition: 0.5s all;
    text-align:center;
}

/* call button */

.suntory-alo-phone {
  background-color: transparent;
  cursor: pointer;
  height: 120px;
  position: fixed;
  transition: visibility 0.5s ease 0s;
  width: 120px;
  z-index: 2 !important;
  bottom: 40px !important;
}
.suntory-alo-ph-circle {
  animation: 1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;
  background-color: transparent;
  border: 2px solid rgba(30, 30, 30, 0.4);
  border-radius: 100%;
  height: 100px;
  left: 0px;
  opacity: 0.1;
  position: absolute;
  top: 0px;
  transform-origin: 50% 50% 0;
  transition: all 0.5s ease 0s;
  width: 100px;
}
.suntory-alo-ph-circle-fill {
  animation: 2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;
  border: 2px solid transparent;
  border-radius: 100%;
  height: 70px;
  left: 15px;
  position: absolute;
  top: 15px;
  transform-origin: 50% 50% 0;
  transition: all 0.5s ease 0s;
  width: 70px;
}
.suntory-alo-ph-img-circle {
  border: 2px solid transparent;
  border-radius: 100%;
  height: 50px;
  left: 25px;
  opacity: 0.7;
  position: absolute;
  top: 25px;
  transform-origin: 50% 50% 0;
  width: 50px;
  text-align: center;
}
.suntory-alo-phone.suntory-alo-hover, .suntory-alo-phone:hover {
  opacity: 1;
}
.suntory-alo-phone.suntory-alo-active .suntory-alo-ph-circle {
  animation: 1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim !important;
}
.suntory-alo-phone.suntory-alo-static .suntory-alo-ph-circle {
  animation: 2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim !important;
}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle, .suntory-alo-phone:hover .suntory-alo-ph-circle {
  border-color: #00aff2;
  opacity: 0.5;
}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle, .suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle {
  border-color: #EB278D;
  opacity: 1;
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle {
  border-color: #bfebfc;
  opacity: 1;
}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle-fill, .suntory-alo-phone:hover .suntory-alo-ph-circle-fill {
  background-color: rgba(0, 175, 242, 0.9);
}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle-fill, .suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle-fill {
  background-color: #EB278D;
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill {
  background-color: rgba(0, 175, 242, 0.9);
}
.suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-img-circle, .suntory-alo-phone:hover .suntory-alo-ph-img-circle {
  background-color: #00aff2;
}
.suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-img-circle, .suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-img-circle {
  background-color: #EB278D;
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle {
  background-color: #00aff2;
}

@keyframes suntory-alo-circle-anim {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5) skew(1deg);
  }
  30% {
    opacity: 0.5;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
  100% {
    opacity: 0.6;
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}
@keyframes suntory-alo-circle-img-anim {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}
@keyframes suntory-alo-circle-fill-anim {
  0% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
  50% {
    opacity: 0.2;
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
}
.suntory-alo-ph-img-circle i {
  animation: 1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;
  font-size: 30px;
  line-height: 50px;
  color: #fff;
}
@keyframes suntory-alo-ring-ring {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}




.helpbar {
    display: block;
    width: 100%;
    max-width: 640px;
    background: #fff;
    position: fixed;
    height: 60px;
    bottom: 0;
    z-index: 99999;
    border: 1px solid #ececec;
    padding: 5px;
    box-sizing: border-box;
}
.helpbar ul {
    display: block;
    width: 100%;
}
.helpbar li {
    display: inline-block;
    float: left;
    width: 25%;
    text-align: center;
}
.helpbar li a{
    display: block;
    font-size: 13px;
}
.helpbar li a strong{
    display: block;
    margin: 2px auto;
    line-height: 28px;
    overflow: hidden;
    color:#ee3338;
}
.helpbar li i{
    width: 34px;
    height: 30px;
    display: block;
    margin: 1px auto
}
.iconmobile-rcate {
    background-position: -117px -30px;
}
.iconmobile-recnew {
    background-position: -154px -30px;
}
.iconmobile-rvideo {
    background-position: -186px -30px;
}
.iconmobile-rdots {
    background-position: -225px -30px;
}

#mark_adress {
    position: relative;
}

.addmap_list {
    padding: 10px;
    background: #fff;
    position: fixed;
    display: none;
    bottom:60px;
    max-width: 640px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 99999999999999999999999 !important;
    width: 100%;
    box-sizing: border-box;
}
.addmap_list.show {
    display: block !important
}
.addmap_list h4 {
    font-weight: bold;
    line-height: 26px;
    color:#ee3338;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
}
.addmap_list ul {
    display: block;
    margin: 0 auto;
}
.addmap_list li {
    display: block;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #f4f4f4;
    color:#111;
    margin: 2px auto;
}
.addmap_list li a{
    font-size:14px;
    color:#000;
    display: block;
}



#banner_popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  z-index: 999999999;
}

#banner_popup span {
    background: #fafafa;
    color: #111;
    border:1px solid #ddd;
    border-radius: 30px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
}

#banner_popup img {
    width: 98%;
    height: auto;
    max-width: 600px;
    margin: 0 auto;
}

@media screen and (max-width:480px) {
    .wrap-suggestion {
        width: 95%;
    }
    header.fix_header_bar .header_search {width: 77%}
}

@media screen and (max-width:414px) {
    header.fix_header_bar .header_search {width: 74%}
}

@media screen and (max-width:384px) {
    header.fix_header_bar .header_search {width: 72%}
}

@media screen and (max-width:375px) {
    header.fix_header_bar .header_search {width: 70%}
}
@media screen and (max-width:360px) {

}

@media screen and (max-width:320px) {
    header.fix_header_bar .header_search {width: 67%}
}