@charset "utf-8";
@import url("util.css");
@import url(../fonts/xeicon/1.0.4/xeicon.min.css);
@import url(../fonts/xeicon/2.2.0/xeicon.min.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');

/* reset with bootstrap */
html{font-size:15px}
body{background-color:#EEF2F5}
body,input,textarea,select,button,table{font-family:'Noto Sans CJK KR','Noto Sans KR',sans-serif;letter-spacing:-.022em;word-wrap:break-word;color:#222}
a,input,textarea,select,button{color:inherit;transition:color .4s,border-color .4s,background .4s,box-shadow .4s,opacity .4s;outline-color:#da283a}
a:hover,a:focus,a:active{color:inherit}
::selection{background:#F05B91;color:#fff}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{color:#000}
li{list-style:none}
label{cursor:pointer}
a{text-decoration:none !important}
em{font-style: normal}
dt{font-weight:400}
a, input, textarea, select, button{outline:inherit!important}
.panel{background:none}

/* Helper Classes */
.pr{position: relative!important}
.two-line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%;height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;}
.d-flex{display: flex}
.justify-content-between{justify-content: space-between}
.bg-wh{background:#fff !important}
.bg-red{background:#F35F5F !important}
.bg-gray, .bg-gray-xs {background: #eef2f5!important;}
.no-bg{background:none !important}
.pa0{padding:0 !important}
.pt0{padding-top:0 !important}
.d-iblock{display: inline-block!important}
.fw400{font-weight: 400 !important}
.w100{width:100% !important}

/* Typhography */
i{font-style:normal}
u{border-bottom:1px dashed;text-decoration:none}
.font-monoton{font-weight:400;font-family:'Monoton','NanumSquareRound',sans-serif}
.font-rozha{font-family: 'Rozha One', serif;font-style: normal}
.h1,.h2,.h3,.h4,.h5,.h6, h1, h2, h3, h4, h5, h6{line-height:1.2;letter-spacing:-.05em}
.h3{font-size:1.2rem}
.h2 .pull-right, .h3 .pull-right{margin-top:4px;font-weight: 400;font-size: .75em;opacity: .7;}
.h2 .btn,.h3 .btn{ margin: -8px 10px;}


.embed-youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.embed-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ytb-area{padding:20px 35px;margin:0;background:#fff}
.ytb-area li{float:left;width:50%}
.ytb-area li>div{overflow: hidden;border-radius: 10px;border:8px solid #fff;box-shadow:0 0 10px 2px rgba(0,0,0, .1);margin:17px}
.ytb-area p{font-weight: bold;padding:10px 10px 5px}
.btn-lang{position: absolute;top:15px;right:15px;background:#fff;border-radius: 50px;padding:8px 20px;box-shadow: 0 0 10px 0 rgba(0,0,0, .2);font-weight: bold}
.btn-lang:hover{background:#222;color:#fff}
.pet-link div{position: relative}
.pet-link div a{position: absolute; display: inline-block;top: 11%;width: 50%;height: 68%;z-index: 1}
.pet-link div:nth-child(2) a, .pet-link div:nth-child(4) a{right:0}

/* Icon, Sprite */
[class*=xi-],[class*=xi2-]{vertical-align: text-top}
[class^=icon-]{display:inline-block;overflow:hidden;margin:0;padding:0;border:0;background-color:transparent;background-position:50% 50%;background-repeat:no-repeat;background-size:100% auto;background-repeat: no-repeat;font-size:0;line-height:0;text-decoration:none;vertical-align:middle;text-indent:-1000em}
.icon-logo{width:115px;height:40px;background:url(../image/logo.png);background-size:100% auto;background-repeat:no-repeat}
.icon-title{width:513px;height:385px;background:url(../image/title.png);background-size:100% auto;margin-left:35px;margin-top:100px}
#px0{display:flex;justify-content: center; align-items: center;max-width:860px;height:auto;padding-top:60px}
.icon-ft{width:20px;height:20px;margin:-2px 3px 0 0;background:url(../image/ft.png);background-size:100% auto}

/* Button */
.btn{white-space: nowrap}
[class^=btn-]{display: inline-block}

.container{padding:0;margin:0}
.con-panel{max-width:860px;margin:0 auto}
#gnb {position: fixed;background:#fff;width:100%;opacity: .9;z-index: 99}
#gnb ul{display: flex;align-items: center;max-width:860px;margin:0 auto;padding:8px 0 12px}
#gnb ul li{margin:0 10px;}
#gnb ul li:first-child{margin-right:40px}
#gnb ul li a{padding:5px 7px;font-size:16px;letter-spacing: -0.75;font-weight:normal;color:#2c1b11}
#gnb ul li.on a{border-bottom:4px solid #1e6044;font-weight: bold; color:#1e6044 !important}
.btn-buy{border-radius: 5px; background:#1e6044;color:#fff !important}
.btn-buy:hover{background:#11432d}

/* mobile */
/*----------- mobile -----------*/
#mNav{display:none;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling:touch;position:fixed;top:0;bottom:0;left:0; right:0; z-index:99999999;background:#fff}
#mNav .mn-lst>li>a{ display:block; margin:0 0 -1px;padding:10px 30px;border-bottom:1px solid #eee; font-size:16px;font-weight: bold;line-height:44px; color:#222}
#mNav .btn-face{font-size:11px}
.mhd{position: absolute;top:5px;width:100%}
.mhd .icon-logo{width:115px;position: absolute;top:5px;left:30px}
.mhd .btn-cls{position: absolute;top:15px;right:25px;font-size:1.5em;}
#mNav .caret{ float:right; margin-top:20px; border-width:5px; color:#ddd}
#mNav ul ul{ display:none; background:#EEF2F5}
#mNav ul ul a{ color:#b6b6b6}
#mNav ul ul li a{display: inline-block;border-bottom:1px solid #e1e5e8;width:100%;padding:15px 30px;color:#666}
#mNav .pr{height:100%}
#mNav .pr .n-pg{position: absolute;width:100%;height:100%;padding:20px;background:#fff;z-index: 99}
#mNav .pr #resultLst table{width:100%;table-layout: fixed}
#mNav .pr #resultLst th, #mNav .pr #resultLst td{padding:15px;text-align: center}
#mNav .pr #resultLst th{border-top:1px solid #000;border-bottom:1px solid #000}
#mNav .pr #resultLst td{border-bottom:1px solid #eee}
#mNav .pr #resultLst td a{display: inline-block;background:#f5f5f5;border-radius: 5px;padding:8px 10px;font-size:.9em}
#mNav .pr #resultLst td a:hover{background:#eee}
#mNav .hd-search{background:#f2f2f2 !important}
#mMenu{ display:none;position:absolute;top:0; right:5px}
#mMenu a{ float:left; width:45px; height:40px}
.m-page{border-bottom:10px solid #EEF2F5}
.m-page .user-info {position: relative;margin-top:60px;padding:10px 0 10px 70px;height:65px;border-top:1px solid #eee;line-height:40px;font-size:1.4em}
.m-page .user-info .profile-circle{position: absolute;left:25px}
.m-page .onoff-btn{position: absolute;top:10px;right:30px;font-size:11px; text-decoration: underline;color:#666}
.m-page ul{border-top:1px solid #eee}
.m-page ul li{position: relative;float:left;padding:15px 0;width:33.3333333%;text-align: center}
.m-page ul li a{font-weight: bold;color:#666}
.m-page ul li+li:before{content: '';display: inline-block; position: absolute;left:0;width:1px;height:15px;margin-top:3px;background:#ddd}
.m-page ul li a.on{color:#F35F5F}
.menu-btn {display: block;right:20px;position: absolute;top:34px;width: 24px;}
.menu-btn:before, .menu-btn:after {background-color: #333;content: '';display: block;height: 3px;transition: all 200ms ease-in-out;}
.menu-btn:before {box-shadow: 0 8px 0 #333;margin-bottom: 13px}
.menu-btn:after{width:15px}
.menu-btn:hover:after {width:24px}
.menu-nav .menu-btn{top:0}
.icon-close{position: absolute;top:30px;right:23px;width:23px;height:23px;background:url(../img/ico_close.png);z-index: 9999}

/* Animated */
.ani-stop{visibility:hidden;-webkit-animation-name:none !important;animation-name:none !important}
.ani-delay01{animation-delay:.1s !important}
.ani-delay02{animation-delay:.2s !important}
.ani-delay025{animation-delay:.25s !important}
.ani-delay03{animation-delay:.3s !important}
.ani-delay04{animation-delay:.4s !important}
.ani-delay05{animation-delay:.5s !important}
.ani-delay06{animation-delay:.6s !important}
.ani-delay07{animation-delay:.7s !important}
.ani-delay075{animation-delay:.75s !important}
.ani-delay08{animation-delay:.8s !important}
.ani-delay09{animation-delay:.9s !important}
.ani-delay10{animation-delay:1s !important}
.ani-delay11{animation-delay:1.1s !important}
.ani-delay12{animation-delay:1.2s !important}
.ani-delay13{animation-delay:1.3s !important}
.ani-delay14{animation-delay:1.4s !important}
.ani-delay15{animation-delay:1.5s !important}
.ani-delay16{animation-delay:1.6s !important}
.ani-delay17{animation-delay:1.7s !important}
.ani-delay18{animation-delay:1.8s !important}
.ani-delay19{animation-delay:1.9s !important}
.ani-delay20{animation-delay:2s !important}
.ani-delay22{animation-delay:2.2s !important}
.ani-delay24{animation-delay:2.4s !important}
.ani-delay30{animation-delay:3s !important}
.ani-delay40{animation-delay:4s !important}
.ani-duration05{animation-duration:.5s !important}
.ani-duration15{animation-duration:1.5s !important}
.ani-duration20{animation-duration:2s !important}
.ani-duration30{animation-duration:3s !important}
.ani-hover:hover{animation-iteration-count:infinite}

/* common */

@media screen and (max-width:1209px){
    .mn-area{margin:90px auto 0}
}

@media screen and (max-width:1100px){
    .product-info-fix{transform: translate(240px, 0);-webkit-transform: translate(75%, 0);}
}
@media screen and (max-width:815px){
    html{font-size:13px}
    .icon-logo{width:90px;height:30px;}
    .icon-title{width:300px;height:200px;background:url(../image/title.png);background-size:100% auto;margin-left:10vw;margin-top:5vw;background-repeat:no-repeat}
   
    .btn-lang{top:65px;font-size:11px;padding:8px 12px}
    #px0{height:auto;padding-top:50px}
    
    #gnb ul{white-space:nowrap; 
    overflow-x: auto; text-align:center}
    #gnb ul li {display:inline-block;margin:0 2px}
    #gnb ul li a{font-size:15px;margin-top:-8px}
    #gnb ul li:first-child{margin-right:0}
    
    .ytb-area{padding:0 30px 20px}
    .ytb-area li{width:100%}
    .ytb-area li>div{margin:7px}
    
    .btn-fot{position: fixed;width:58px;height:58px;right:10px;bottom:10px;background:#1e6044;border-radius: 30px;z-index: 999;text-align: center;padding-top:9px;box-shadow: 0 0 10px 0 rgba(0,0,0, .1)}
    .icon-cart{width:22px;height:22px;background:url(../image/shopping-cart.png);background-size:100% auto}
    .icon-cart+span{display:block;margin-top:0;color:#fff;font-size:11px;}
}