@import url('font/if/iconfont.css');
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.3);-webkit-border-radius:10px;border-radius:10px}
::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:10px;background-color:#EFF1F3;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.5)}
::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,0,0,.3)}
*{word-wrap:break-word;outline:none;}
html,body,div,span,h1,h2,h3,h4,p,a,
dl,dt,dd,ol,ul,li,fieldset,legend,label,form,input,select,option,textarea,button,
table,tr,th,td{margin:0;padding:0;vertical-align:baseline;color:#111;font-weight:400;font-size:15px;line-height:185%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}
@media screen and (max-width:640px) {
html,body,div,span,h1,h2,h3,h4,p,a,
dl,dt,dd,ol,ul,li,fieldset,legend,label,form,input,select,option,textarea,button,
table,tr,th,td{font-size:17px;}
}
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-x:hidden;}
img{border:0;vertical-align:middle;max-width:100%}
p{margin:12px 0;}
h1, h2, h3, h4{font-size:30px;line-height:normal;margin:0 0 16px 0;font-weight:700;}
h2{font-size:26px} h3{font-size:22px;} h4{font-size:17px;}
ul,li{list-style:none;}
a{color:#333;text-decoration:none;outline:none;}
a:hover{color:#76a830;text-decoration:underline}
.clear{clear:both;width:100%;height:0;overflow:hidden;}
.hide{display:none;}
.center{text-align:center;} .right{text-align:right;}
.fleft{float:left;} .fright{float:right;}
.remark{color:#999;font-size:11px;} .red{color:#F00;} .blue{color:#06F;} .yellow{color:#FF0;} .checked, .green{color:#13C4A5;}
del{color:#999;font-size:11px;}
.pd20{padding:20px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mt30{margin-top:30px;}
.fs16{font-size:16px;}.fs18{font-size:18px;}.fs24{font-size:24px;}

.if{display:inline-block;}
.if-spin {-webkit-animation:if-spin 1s infinite linear;animation:if-spin 1s infinite linear;}
.if-pulse {-webkit-animation:if-spin 1s infinite steps(8);animation:if-spin 1s infinite steps(8);}
@-webkit-keyframes if-spin {0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}100% {-webkit-transform:rotate(359deg);transform:rotate(359deg);}}
@keyframes if-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg);}}

/*------------------------ badge ------------------------*/
.row1, .row2{overflow:auto;}
.row1 li, .row2 li{list-style:none;overflow:hidden;white-space:nowrap;cursor:pointer;margin:2px 0;}
.row1 li{display:inline-block;padding:2px 5px;margin-right:5px;}
.row1 li.checked{background-color:#13C4A5;color:#fff;}

.badge, .badge-green, .badge-gray, .badge-cyan, .badge-red{display:inline-block;height:16px;line-height:16px;padding:0 5px;color:#FFF;font-size:10px;background-color:#FF5722;white-space:nowrap;font-weight:400 !important;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.badge-green{background-color:#13C4A5;}
.badge-cyan{background-color:#2F4056 !important;}
.badge-gray{background-color:#EEE;color:#666 !important;}
.badge-red{background-color:#ED5565;}
.badge-radius{display:inline-block;height:22px;line-height:22px;border:1px solid #EEE;padding:0 10px;
font-weight:300;font-size:14px;color:#999;
border-radius:11px;-webkit-border-radius:11px;-moz-border-radius:11px;}

.label-discount{display:inline-block;background-color:#e12c43;padding:5px;font-size:0;}
.label-discount, .label-discount span{line-height:100%;}
.label-discount span{display:inline-block;border:1px solid #FFF;border-left:none;border-right: none;font-size:10px;color:#FFF;padding:2px 0;}

.status-best, .status-new, .status-rec, .status-hot, .status-discount
{display:inline-block;font-size:12px;padding:5px 8px;color:#FFF;line-height:100%;white-space:nowrap;
border-radius:3px;-webkit-border-radius:3px;}
.status-best{background-color:#1C84C6;}
.status-new{background-color:#ED5565;}
.status-rec{background-color:#fe7100;}
.status-top{background-color:#9c27b0;}
.status-hot{background-color:#0096e6;}
.status-discount{background-color:#9c27b0;font-size:10px;padding:2px 4px;}

/*------------------------ btn ------------------------*/
input,select,option{vertical-align:middle;}
select{-webkit-appearance:none;background:url("../images/arrow-down.png") #FFF right center no-repeat;background-size:10px auto;
background-position-x: -moz-calc(100% - 10px);background-position-x: -webkit-calc(100% - 10px);background-position-x: calc(100% - 10px);}
.txt, .txt-sort, .txt-price,
.input-group, .input-wrapper .inp
{position:relative;background-color:#FFF;border:1px solid #DFDFDF;border-radius:3px;-webkit-border-radius:3px;color:#039;}
.txt, .txt-price{padding:0 8px;height:42px;line-height:42px;}
textarea.txt{line-height:145%;}
.txt-s, .txt-sort, .txt-price{height:23px;line-height:23px;}
.txt:hover, .txt-sort:hover, .txt-price:hover
{border:1px solid #999;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);box-shadow:1px 1px 2px rgba(0,0,0,0.24);}
.txt:focus, .txt-sort:focus, .txt-price:focus,
.input-group:hover, .input-wrapper .inp:hover
{border-width:1px;border-style:solid;border-color:rgba(0,0,0,.35);outline:0;
transition:border linear .2s,box-shadow linear .5s;-moz-transition:border linear .2s,-moz-box-shadow linear .5s;-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;box-shadow:0 0 8px rgba(0,0,0,.35);-moz-box-shadow:0 0 8px rgba(0,0,0,.35);-webkit-box-shadow:0 0 8px rgba(0,0,0,.35)}

.input-wrapper{margin-bottom:26px;}
.input-wrapper .inp input, .input-wrapper select, .input-wrapper textarea,
.input-wrapper .inp .i-txt, .input-wrapper .inp .i-arrow,
.input-group .i-label, .input-group .i-label-gray, .input-group input
{color:#039;border:none;background-color:transparent;height:48px;line-height:48px;}
.input-wrapper select{width:100%;padding-left:8px;}
.input-wrapper .inp input, .input-wrapper textarea,
.input-group input {padding:0 8px;width: -moz-calc(100% - 16px);width: -webkit-calc(100% - 16px);width: calc(100% - 16px);}
.input-wrapper textarea{padding:8px;min-height:120px;line-height:165%;}
.input-wrapper .label{margin-bottom:12px;}
.input-wrapper p{color:#999;}
.input-wrapper .inp .i-txt{padding:0 8px;}
.input-wrapper .inp .i-arrow{position:absolute;right:10px;top:0;z-index:1;color:#333;}
.input-wrapper .inp-category-tree{display:none;position:absolute;width:100%;top:40px;left:0;z-index:9999;}
.input-wrapper .inp-category-tree .category-tree{width:100%;}
.input-wrapper-two .md{float:left;width:50%;}
.input-wrapper-two .md .b{margin-right:30px;}

.input-group{display:-webkit-box;display:-webkit-flex;display:flex;}
.input-group .i-label{padding:0 8px;white-space:nowrap;background-color:#F1F1F1;color:#333;min-width:24px;text-align:center;}
.input-group .i-label-gray{color:#999;padding-left:8px;white-space:nowrap;}
.input-group .i-inp{flex:1;position:relative;}

.input-submit{padding:20px 0;}
.input-submit .btn-submit{padding:0;width:100%;}

.btn-submit, .btn-submit-s, .btn-gray, .btn-gray-s, .btn-warm, .btn-alert, .btn-out
{display:inline-block;border:none;padding:14px 30px;cursor:pointer;background-color:#76a830;color:#FFF;}
.btn-submit, .btn-out{padding:0 30px;height:52px;line-height:52px;}
.btn-submit:hover, .btn-submit-s:hover{background-color:#ae1c16;text-decoration:none;color:#FFF;}
.btn-submit-s, .btn-gray-s{padding:8px 22px;}
.btn-out{background-color:#979797;padding:0;width:100%;cursor:not-allowed;}
.btn-gray, .btn-gray-s{background-color:#CCC;color:#FFF;}
.btn-gray:hover, .btn-gray-s:hover{background-color:#999;color:#FFF;text-decoration:none;}
.btn, .list-more button{display:inline-block;background-color:#F1F1F1;border:1px solid #DDD;padding:8px 20px;text-align:center;color:#333;cursor:pointer;}
.btn:hover, .list-more button:hover{background-color:#FAFAFA;border:1px solid #666;color:#333;text-decoration:none;}
.btn-alert, .btn-warm{padding:5px 10px;}
.btn-alert {background-color:#FF5722;}
.btn-alert:hover, .btn-warm:hover{background-color:#DB4B1F;color:#FFF;text-decoration:none;}
.btn-warm {background-color:#FFB800;color:#FFF !important;}
.btn-warm:hover{background-color:#D69A0A;}
.btn-radius, .btn-radius-fill{display:inline-block;border:1px solid #777;color:#333 !important;height:50px;line-height:50px;padding:0 50px;background-color:#FFF;cursor:pointer;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;}
.btn-radius:hover{background-color:#76a830;border-color:#76a830;color:#FFF !important;text-decoration:none;}
.btn-radius-fill{background-color:#76a830;border-color:#76a830;color:#FFF !important;}
.btn-radius-fill:hover{background-color:#FFF;border-color:#777;color:#333 !important;text-decoration:none;}

/* btn common */
.btn, .btn-s, .btn-submit, .btn-icon, .btn-alert, .btn-warm, .btn-copy,  .btn-gray,
.dialog-confirm .i-btn-ok, .dialog-confirm .i-btn-cancel,
.dialog-bottom-btn .i-btn-ok, .dialog-bottom-btn .i-btn-cancel
{display:inline-block;cursor:pointer;text-decoration:none;vertical-align:middle;overflow:hidden;
border:none;font-style:normal !important;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;
transition:all 0.5s ease 0s; -webkit-transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;}
.dialog-bottom-btn .i-btn-ok, .dialog-bottom-btn .i-btn-cancel{
border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;
}
/*------------------------ toastr ------------------------*/
.toast-title{font-weight:600}
.toast-message{-ms-word-wrap:break-word;word-wrap:break-word;color:#FFF}
.toast-message a,.toast-message label{color:#FFF}
.toast-message a:hover{color:#CCC;text-decoration:none}
.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:12px;font-weight:300;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}
.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}
.rtl .toast-close-button{left:-.3em;float:left;right:.3em}
button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}
.toast-top-center{top:0;right:0;width:100%}
.toast-bottom-center{bottom:0;right:0;width:100%}
.toast-top-full-width{top:0;right:0;width:100%}
.toast-bottom-full-width{bottom:0;right:0;width:100%}
.toast-top-left{top:12px;left:12px}
.toast-top-right{top:12px;right:12px}
.toast-bottom-right{right:12px;bottom:12px}
.toast-bottom-left{bottom:12px;left:12px}
#toast-container{position:fixed;z-index:9999999999;pointer-events:none}
#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 10px #999;-webkit-box-shadow:0 0 10px #999;box-shadow:0 0 10px #999;color:#FFF;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}
#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}
#toast-container>div:hover{-moz-box-shadow:0 0 12px #555;-webkit-box-shadow:0 0 12px #555;box-shadow:0 0 12px #555;opacity:9;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);cursor:pointer}
#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}
#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}
.toast-info:before, .toast-error:before, .toast-success:before, .toast-warning:before{position:absolute;font-family:"if" !important;top: 13px;left: 13px;font-size:23px;}
.toast-error:before{content:"\e672";}
.toast-info:before{content:"\e618";}
.toast-warning:before{content:"\e682";}
.toast-success:before{content:"\e6d9";}
.toast{background-color:#030303}
.toast-success{background-color:#51A351}
.toast-error{background-color:#BD362F}
.toast-info{background-color:#2F96B4}
.toast-warning{background-color:#F89406}
.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}
@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}
#toast-container>div.rtl{padding:8px 50px 8px 8px}
#toast-container .toast-close-button{right:-.2em;top:-.2em}
#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}
}
@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}
#toast-container>div.rtl{padding:8px 50px 8px 8px}
#toast-container .toast-close-button{right:-.2em;top:-.2em}
#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}
}
@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}
#toast-container>div.rtl{padding:15px 50px 15px 15px}
}

/*------------------------ dialog ------------------------*/
.dialog-overlay .i-loading{position: absolute;width:100%;top:49%;left:0;width:100%;text-align:center;font-size:48px;color:#FFF;}
.dialog-overlay .i-loading .if{font-size:48px;}
.dialog-close{position: absolute;z-index:10;right:25px;top:14px;cursor:pointer;}
.dialog-close img{width:18px;height:18px;}
.dialog-title{padding:15px 25px;border-bottom:1px solid #DDD;}
.dialog-title h1{margin:0;font-size:18px;font-weight:400;}
.dialog-content{padding:25px;}

.dialog, .dialog-confirm{
  position:relative;background-color:#FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
  -moz-box-shadow: 0 1px 50px rgba(0,0,0,0.6);-webkit-box-shadow: 0 1px 50px rgba(0,0,0,0.6);box-shadow: 0 1px 50px rgba(0,0,0,0.6);
}

/* dialog-img */
.dialog-img .dialog-close{position:fixed;right:20px;top:20px;}
.dialog-img .dialog-close img{width:40px;height:40px;filter: invert(100%);}
.dialog-img .dialog-content{padding:0;}

/* dialog-confirm **/
.dialog-confirm .dialog-content{font-size:18px;line-height:165%;}
.dialog-confirm .i-btn-ok, .dialog-confirm .i-btn-cancel,
.dialog-bottom-btn .i-btn-ok, .dialog-bottom-btn .i-btn-cancel{
  height:34px;line-height:34px;padding:0 16px;border:1px solid #DDD;background-color:#F2F2F2;color:#333;
}
.dialog-confirm .i-btn-ok{background-color:#e13719;border-color:#e13719;margin-left:5px;color:#FFF;}
.dialog-confirm .i-btn-ok:hover{background-color:#b02b13;border-color:#b02b13;}
.dialog-confirm .i-btn-cancel:hover, .dialog-bottom-btn .i-btn-cancel:hover{background-color:#DDD;}
.dialog-confirm .i-btn-box{margin-top:20px;text-align:right;}
.dialog-confirm .if-check{font-size:20px;color:#1c9b1c;font-weight:600;margin-right:8px;}

/* dialog bottom */
.dialog-bottom-space{height:65px;}
.dialog-bottom-btn{position:absolute;left:0;bottom:0;z-index:2;width:100%;background-color:#FFF;overflow: hidden;
  -moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
.dialog-bottom-btn .i-b{padding:15px 25px;border-top:1px solid #DDD;text-align:right;}
.dialog-bottom-btn .i-btn-ok{background-color:#76a830;border-color:#76a830;margin-left:8px;color:#FFF;}
.dialog-bottom-btn .i-btn-ok:hover{background-color:#81ac09;border-color:#81ac09;}
.dialog-bottom-btn .i-btn-ok, .dialog-bottom-btn .i-btn-cancel{height:40px;line-height:40px;}

/*---------------------------------------------------------*/
/*------------------------ layout ------------------------*/
.wrap{margin:0 auto;width:1100px;}

/* top */
#top{width:100%;}

#logo{float:left;overflow:hidden;}
#logo img{margin-top:20px;height:68px;}
.top-right{float:right;width:78%;}

/* search */
#nav-search{float:right;margin:20px 0 0 0;}
#nav-search form, #nav-language{background-color:#F2F2F2;
border-radius:17px;-webkit-border-radius:17px;}
#nav-search form{overflow:hidden;}
#nav-search input, #nav-search button{display:inline-block;border:none;background-color:transparent;
height:34px;line-height:34px;font-size:13px;}
#nav-search button{width:50px;text-align:center;cursor:pointer;}
#nav-search button .if{font-size:16px;}
#nav-search input{width:140px;padding:0 21px;}

/* language */
#nav-language{float:right;position:relative;height:34px;margin:20px 0 0 20px;}
#nav-language .i-title{padding:0 15px;line-height:34px;font-size:13px;color:#666;}
#nav-language img{height:11px;vertical-align:middle;}
#nav-language .if{vertical-align:middle;font-size:12px;}
#nav-language .i-menu{padding:5px 0;}

/* contact */
#top-contact{float:right;margin:24px 0 0 0;}
#top-contact span{display:inline-block;margin-right:22px;color:#777;font-size:12px;}
#top-contact .if{width:22px;height:22px;line-height:22px;text-align:center;background-color:#76a830;color:#FFF;margin-right:6px;
border-radius:100%;-webkit-border-radius:100%;}

/* nav */
#nav{float:right;margin-top:10px;}
#nav li.n{float:left;position:relative;margin-left:10px;}
#nav a.p{display:block;position:relative;height:40px;line-height:40px;padding:0 15px;
text-align:center;font-size:16px;text-transform:uppercase;color:#545557;
border-radius:20px;-webkit-border-radius:20px;}
#nav a.p:hover, #nav li.on a.p{text-decoration:none;background-color:#76a830;color:#FFF;}
#nav .i-tag{position:absolute;top:-13px;left:60%;z-index:2;font-size:9px;font-style:normal;background-color:#e62e05;color:#FFF;padding:0 4px;line-height:15px;transform:translateX(-50%);}
#nav .i-tag:after{position:absolute;content:'';width:0;height:0;display:inline-block;top:100%;left:10px;border-right:4px solid transparent;border-top:4px solid #e62e05;}
#nav .i-tag-hot{background-color:#1ad441 !important;}
#nav .i-tag-hot:after{border-top:4px solid #1ad441 !important;}
.nav-sub, #nav-language .i-menu{position:absolute;top:52px;left:0;z-index:999;background-color:#FFF;height:0;overflow:hidden;
opacity:0;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);}
#nav li.n:hover .nav-sub, #nav-language:hover .i-menu
{display:block;top:40px;height:auto;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);}
#nav-language .i-menu{top:40px;left:auto;right:0;}
#nav-language:hover .i-menu{top:34px;}
.nav-sub a, #nav-language a{white-space:nowrap;font-size:15px;color:#7d7b7b;}
.nav-sub a:hover, #nav-language a:hover{color:#76a830;text-decoration:none;}
.nav-sub .i-menu{padding:6px 0;min-width:120px;}
.nav-sub .i-menu a, #nav-language a{display:block;padding:6px 15px;}
.nav-sub .category-tree{min-width:150px;}
#nav li.n-c:hover .nav-sub{overflow:visible;}
.nav-custom{width:660px;padding:30px;}
.nav-custom .i-col{float:left;width:33.33%;}
.nav-custom .i-ch{height:35px;position:relative;margin:0 20px 12px 0;}
.nav-custom .i-ch:after{position:absolute;content:'';z-index:1;left:0;bottom:0;height:1px;width:80px;background-color:#fd7e14;}
.nav-custom .i-ch a{font-size:17px;color:#111;text-transform:uppercase;}
.nav-custom .i-bn{margin-top:25px;}
.nav-custom .i-child{margin-right:20px;}
.nav-custom .i-child li{margin-bottom:5px;}
.nav-custom .i-child li a{display:inline-block;position:relative;}
.nav-custom .i-child li .i-tag{left:100% !important;}
#nav-toggle{display:none;}

/* main */
#pos{position:relative;width:100%;height:360px;clear:both;overflow:hidden;margin:10px 0;}
#pos .wrap{position:relative;height:360px;}
#pos .wrap:before, #pos .wrap:after{position:absolute;z-index:1;content:'';top:0;height:100%;width:100%;}
#pos .wrap:before{left:-100%;background-color:#76a830;}
#pos .wrap:after{position:absolute;content:'';left:0;width:150%;background-image:linear-gradient(to left, rgba(118, 168, 48, 0), rgba(118, 168, 48, 1));}
#pos .i-text-container{position:relative;z-index:2;display:-webkit-flex;display:flex;-webkit-align-items: center;align-items: center;width:50%;height:360px;}
#pos h1{margin:0;font-size:36px;font-weight:500;color:#FFF;}
#pos p{font-size:17px;margin:20px 0 0 0;padding:0;color:#FFF;}
#pos .i-nav{position:absolute;z-index:2;bottom:8px;right:0;}
#pos .i-nav a{font-size:14px;color:#FFF;}
#pos .i-nav .if{color:#FFF;padding:0 6px;vertical-align:middle;}

#main{padding:90px 0;}

/* footer */
#footer{background-color:#58971e;padding-top:80px;}
#footer .h-title h4{font-size:20px;font-weight:500;color:#d1f4b1;}
#footer-nav{float:left;width:30%;}
#footer-nav li{margin-bottom:5px;list-style:disc;margin-left:12px;color:#d1f4b1;}
#footer-nav a{color:#d1f4b1;}
#footer-follow{float:left;width:45%;}
#footer-follow .i-contact .if{display:block;float:left;width:35px;color:#d1f4b1;}
#footer-follow .i-contact a{display:block;float:left;width: -moz-calc(100% - 35px);width: -webkit-calc(100% - 35px);width: calc(100% - 35px);color:#d1f4b1;}
#footer-follow .i-contact li{margin-bottom:8px;}
.footer-icon{float:right;width:130px;}
.footer-bottom{padding:40px 0;text-align:center;color:#adca92;}
.footer-bottom a{color:#adca92;text-decoration:underline;}
.footer-bottom a:hover{text-decoration:none;}

#footer-newsletter{background-color:#76a830;padding:60px 0;overflow:hidden;}
#footer-newsletter .i-title{float:left;width:38%;}
#footer-newsletter .i-form{float:right;}
#footer-newsletter h3{font-size:30px;font-weight:600;text-transform:uppercase;color:#FFF;margin:0 0 10px 0;}
#footer-newsletter .i-title p{color:#f3f4ed;}
#footer-newsletter form{overflow:hidden;height:52px;background-color:#FFF;margin:18px 0 0 0;
border-radius:26px;-webkit-border-radius:26px;-moz-border-radius:26px;}
#footer-newsletter input, #footer-newsletter button{border:none;height:52px;line-height:52px;}
#footer-newsletter input{float:left;padding:0 22px;width:360px;}
#footer-newsletter button{float:right;width:110px;text-align:center;background-color:#606060;color:#FFF;cursor:pointer;}
#footer-newsletter button:hover{background-color:#000;}

.sns-urls .if{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;border:1px solid #666;margin-right:8px;}
.sns-urls a:hover .if{color:#FFF;}
.sns-urls a:hover .if-facebook{border-color:#3b5998;background-color:#3b5998;}
.sns-urls a:hover .if-youtube{border-color:#ff3132;background-color:#ff3132;}
.sns-urls a:hover .if-google{border-color:#00b85a;background-color:#00b85a;}
.sns-urls a:hover .if-instagram{border-color:#517fa4;background-color:#517fa4;}
.sns-urls a:hover .if-twitter{border-color:#2daae1;background-color:#2daae1;}
.sns-urls a:hover .if-blog{border-color:#f2861d;background-color:#f2861d;}
.sns-urls a:hover .if-pinterest{border-color:#cb2027;background-color:#cb2027;}
.sns-urls a:hover .if-linkedin{border-color:#0073b2;background-color:#0073b2;}

/*------------------------ totop ------------------------*/
#totop{display:none;position:fixed;width:46px;height:46px;background-color:#000;opacity:0.6;cursor:pointer;bottom:60px;right:30px;text-align:center;z-index:99;}
#totop .if{line-height:46px;font-size:22px;color:#FFF;}
#totop:hover{opacity:1;}

/** ---------------- desc ---------------- **/
.content-desc{line-height:185%;font-size:18px;}
.content-desc p{margin:25px auto;}
.content-desc a{color:#069;text-decoration:underline;}
.content-desc a:hover{text-decoration:none;}
.content-desc h1 {margin:20px 0;}
.content-desc h2 {margin:15px 0;}
.content-desc h3 {margin:10px 0;}
.content-desc ul{padding:0 25px;list-style:disc;}
.content-desc ul li{list-style:disc;}
.content-desc ol{padding:0 25px;list-style:decimal;}
.content-desc ol li{list-style:decimal;}
.content-desc li{margin-bottom:15px;}
.content-desc table{margin-bottom:20px;border-collapse:collapse;display:table;}
.content-desc td,.content-desc th{padding: 5px 10px;}
.content-desc th{border-top:1px solid #BBB;background-color:#F7F7F7;}
.content-desc td p, .content-desc li p{margin:0;padding:0;}
.content-desc span, .content-desc td, .content-desc p{font-family:inherit;font-size:inherit;color:inherit;line-height:185%;font-size:18px;}
.content-desc .lazy{min-height:50px;}
.content-desc a.btn-submit{color:#FFF;text-decoration:none;}

/** ---------------- product ---------------- **/
.category-tree{position:relative;display:inline-block;}
.category-tree, .category-tree ul, .category-tree li{overflow:visible;background-color:#FFF;}
.category-tree .sub{position:absolute;display:none;z-index:999;}
.category-tree a{display:block;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:50px;height:50px;padding:0 15px;color:#333;}
.category-tree a .if{float:right;line-height:50px;color:#999;margin-left:12px;font-style:normal;}
.category-tree a:hover{background-color:#F2F2F2;text-decoration:none;}
.category-tree a.on{background-color:#76a830;color:#FFF;}
.category-tree a .q{color:#777;font-size:10px;}
.category-tree a.on .if, .category-tree  a.on .q{color:#DDD;}
.category-tree .sub a{padding-right:30px;}
.category-tree .sub a i{position:absolute;float:inherit;margin:0;right:12px;top:0;}

/** editor **/
.selectTdClass{background-color:#edf5fa !important}
table.noBorderTable td, table.noBorderTable th, table.noBorderTable caption{border:1px dashed #ddd !important}
caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}
table tr.firstRow th{border-top-width:2px;}
.ue-table-interlace-color-single{ background-color: #fcfcfc; }
.ue-table-interlace-color-double{ background-color: #f7faff; }
.list-paddingleft-1{padding-left:0}
.list-paddingleft-2{padding-left:30px}
.list-paddingleft-3{padding-left:60px}

/* box */
.box-col{margin-bottom:45px;}
.box-col .h{position:relative;margin-bottom:30px;padding:2px 0;border-left:3px solid #76a830;}
.box-col .h:after{position:absolute;content:'';width:100%;top:50%;left:0;border-bottom:1px solid #e6e6e6;}
.box-col .h h2{position:relative;z-index:1;display:inline-block;font-size:20px;font-weight:500;margin:0;background-color:#FFF;padding:0 15px;}
.box-col .h .if{display:none;}

/* page */
.page{text-align:center;padding:35px 0;}
.page span, .page a{display:inline-block;width:38px;height:38px;line-height:38px;border:1px solid #DDD;margin:0 4px;
border-radius:100%;-webkit-border-radius:100%;}
.page .off{color:#999;cursor:not-allowed;}
.page .on{color:#FFF;background-color:#76a830;border-color:#76a830;}
.page a:hover{background-color:#EEE;text-decoration:none;}
.page1 span{color:#777;}
.page1 a, .page1 span.off{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;background-color:#EEE;color:#111;}
.page1 a:hover{text-decoration:none;background-color:#DDD;}
.page1 span.off{color:#AAA;}
.page1 span.record{margin-right:10px;font-size:13px;}

/* tabs */
.tabs{overflow:visible;margin-bottom:20px;height:40px;border-bottom:1px solid #76a830;}
.tabs li{float:left;border:1px solid #eaeaea;border-bottom:none;margin-right:15px;line-height:39px;padding:0 16px;cursor:pointer;
border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;overflow:hidden;}
.tabs li:hover{background-color:#F2F2F2;}
.tabs li.on{background-color:#76a830;color:#FFF;border-color:#76a830;}

/*------------------------ step ------------------------*/
.step{margin:0 auto;padding-bottom:30px;}
.step ul{height:100px;}
.step-2 li{width:50%;}
.step-3 li{width:33.33%;}
.step li{float:left;overflow:visible;text-align:center;height:22px;border-bottom:4px solid #CCC;color:#999}
.step em{display:block;margin:0 auto 10px auto;width:42px;height:42px;line-height:42px;overflow:hidden;
font-style:normal;font-size:18px;border:3px solid #CCC;background-color:#FFF;color:#999;
border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;}
.step li.on, .step li.on em{border-color:#e62e05;color:#e62e05;}
.step li.done, .step li.done em{border-color:#ec9a88;color:#ec9a88;}

/*------------------------ common ------------------------*/
/* transition */
a{-webkit-transition:color 0.2s ease-out;-webkit-transition-delay:0.1s;-moz-transition:color 0.2s ease-out 0.1s;-o-transition:color 0.2s ease-out 0.1s;transition:color 0.2s ease-out 0.1s;}
#footer-newsletter button, .page a, .tabs li{
transition:background-color 0.5s ease 0s; -webkit-transition:background-color 0.5s ease 0s;-moz-transition:background-color 0.5s ease 0s;-o-transition:background-color 0.5s ease 0s;}
.nav-sub, #nav-language .i-menu, .sns-urls .if,
#nav a.p,
.btn-radius, .btn-radius-fill {
transition:all 0.5s ease 0s; -webkit-transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;}

/* shadow */
.nav-sub, .category-tree .sub, #nav-language .i-menu,
.product-list li:hover .i-img,
#cart-slide .i-del-confirm
{-moz-box-shadow:0 1px 10px rgba(0,0,0,0.15);-webkit-box-shadow:0 1px 10px rgba(0,0,0,0.15);box-shadow:0 1px 10px rgba(0,0,0,0.15);}
.cut, .product-list .i-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* radius */
.sns-urls .if, #totop{border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;}

/** ---------------- media ------------------ **/
@media screen and (max-width:1100px){
.wrap{width:auto;padding-left:18px;padding-right:18px;}
#top{background-color:#FFF;}
.top-right{position:fixed;top:0;left:0;overflow-y:scroll;overflow-x:hidden;width:0;height:100%;background-color:#76a830;z-index:9999;
-moz-box-shadow: 0 8px 15px rgba(0,0,0,0.4);-webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.4);box-shadow: 0 8px 15px rgba(0,0,0,0.4);}
.top-fixed{position:fixed !important;top:0;left:0;z-index:999;
-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.4);-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.4);box-shadow: 0 1px 10px rgba(0,0,0,0.4);
-webkit-animation:top_anima 0.7s ease 0s;animation:top_anima 0.7s ease 0s;}
@-webkit-keyframes top_anima{0%{top: -60px;}100%{top: 0;}}
@keyframes top_anima{0%{top: -60px;}100%{top: 0;}}

#logo img{margin:15px 0;height:45px;}
#nav-toggle{display:block;position:absolute;z-index:2;right:18px;top:15px;cursor:pointer;}
#nav-toggle .if{height:45px;line-height:45px;font-size:32px;}

#top-contact{position:absolute;z-index:2;top:14px;left:18px;margin:0;}
#top-contact span{margin:0;display:block;color:#FFF;font-size:11px;margin-bottom:2px;}
#top-contact .if{width:16px;height:16px;line-height:16px;background-color:#FFF;color:#76a830;font-size:10px;}

#nav-language{margin:18px 18px 0 0;}
#nav-language .i-menu{display:none;height:auto;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);}

#nav-search{float:inherit;clear:both;margin:0 18px;padding-top:70px;}
#nav-search form{white-space:nowrap;}
#nav-search input{padding:0 18px;width: -moz-calc(100% - 90px);width: -webkit-calc(100% - 90px);width: calc(100% - 90px);}

#nav{float:inherit;clear:both;width:100%;margin-top:20px;}
#nav li.n{float:inherit;width:100%;margin:0;border-bottom:1px solid #8eb919;}
#nav a.p{position:relative;text-align:left;height:50px;line-height:50px;padding:0 18px;color:#FFF;border-radius:0;-webkit-border-radius:0;}
#nav a.p:hover, #nav li.on a.p{background-color:#7b7d80;}
#nav a.p .if{position:absolute;right:18px;top:0;}
.nav-sub{display:none;position:static;height:auto;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);}
.nav-sub .i-menu a{padding:8px 18px;}
.nav-custom{width:auto;}

#totop, #pos .i-nav{right:18px;}
#pos{margin:0;}

.category-tree{width:100%;}
.category-tree .sub{position:static;border-bottom:1px solid #EEE;}
.category-tree .sub li{background-color:#F2F2F2;}
}

@media screen and (max-width:980px){
#footer-newsletter .i-title, #footer-newsletter .i-form{float:inherit;width:100%;}
#footer-newsletter .i-form{margin-top:25px;}
#footer-newsletter input{width: -moz-calc(100% - 158px);width: -webkit-calc(100% - 158px);width: calc(100% - 158px);}
#footer-nav, #footer-follow{width:100%;}
#footer-follow{margin-top:30px;}

#pos .i-text-container{width:65%;}
}

@media screen and (max-width:640px){
#logo img{margin:12px 0;height:36px;}
#nav-toggle{top:7px;}

#footer{padding-top:50px;}
#footer-nav .n-col{width:100%;margin-bottom:30px;}
#footer-follow{margin-top:0;}

#pos{height:220px;}
#pos .wrap{height:220px;}
#pos .i-text-container{width:85%;height:220px;}
#pos h1{font-size:24px;}
#pos p{font-size:11px;margin:10px 0 0 0;}
#pos .i-nav a{font-size:10px;}
#pos .i-nav .if{padding:0 2px;font-size:10px;}

#main{padding:36px 0;}

}