/* BASIC css start */
.hdEasing {-khtml-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

/* »ó´Ü¹è³Ê ¿µ¿ª */
.adWrap { height: 70px; line-height: 70px; text-align: center; transition: all 0.3s }
.adWrap.active { height: 0; }
.adWrap .adBox { position:relative; width:100% }
.adWrap .adBox li { margin-left:-775px; position:absolute; top:0; left:50%; width:1550px; height:70px }
.adWrap .adBox a { display: inline-block; line-height: 24px; font-size: 20px; color: #fff }
.adWrap .adBox a img { vertical-align: top; }
.adWrap .adBox i { position:absolute; top:0; right:0; margin-top: 20px; font-size: 30px; color: #fff; cursor: pointer; z-index:10 }

/* »ó´Ü */
#hdWrap { position:relative; height:145px }
#hdWrap .hdArea { position: relative; height:145px; letter-spacing:1px; font-size:11px; background:rgba(255,255,255,0.98);  z-index:105 }
#hdWrap .hdTop { margin:0 auto; position:relative; min-width:1300px; height:86px; border-bottom:1px solid #ebebeb; background:#fff; transition: all 0.1s; *zoom:1 }
#hdWrap .hdTop:after { display:block; clear:both; content:'' }
#hdWrap .hdTop .ht_left { float:left }
#hdWrap .hdTop .ht_left .hd_logo { display:block; margin:32px 0 0 182px }
#hdWrap .hdTop .ht_left .hd_logo img{width:275px}
#hdWrap .hdTop .ht_right { float:right; margin:35px 182px 0 0 }
#hdWrap .hdTop .listWrap { float:left; -webkit-transition:all 0.3s ease; transition:all 0.3s ease }
#hdWrap .hdTop .listWrap .list {float:left; margin-left: 30px; position: relative }
#hdWrap .hdTop .listWrap .list .joinPoint { position: absolute; top: -23px; left: 50%; width: 54px; line-height: 15px; margin-left: -28px; background: #737373; border-radius: 5px; font-size: 12px; color: #fff; text-align: center; animation: upDown 0.7s linear Infinite normal; }
#hdWrap .hdTop .listWrap .list .joinPoint::before { content: ''; position: absolute; bottom: -4px; left: 50%; margin-left: -3px; border-style: solid; border-width: 4px 4px 0px; border-color: #737373 transparent; }
#hdWrap .hdTop .listWrap .list .joinPoint { line-height: 20px; padding: 3px 0 1px 0; }
#hdWrap .hdTop .listWrap .link {position: relative;display:block; line-height: 27px; font-size: 15px; font-weight: 300 }
#hdWrap .hdTop .listWrap .list:first-child .link { padding-left:0; }
#hdWrap .hdArea .lang { position: relative; width: 58px; margin-left: 12px !important; background:url('/design/petebox/phps2021/common/selectIcon.png') no-repeat center right; background-size: 13px; font-size: 15px; font-weight: 300; line-height: 27px; text-align: center; cursor: pointer; }
#hdWrap .hdArea .lang img { margin: 0 auto }
#hdWrap .hdArea .lang .langBox { position: absolute; top: 27px; width: 58px; background: #fff; z-index: 105; font-size:13px; line-height: 24px; padding: 15px 0; border: 1px solid #ddd; display: none; }
#hdWrap .hdArea .lang .langBox a { font-size:13px }
#hdWrap .hdArea .mypage { width: 100px !important }
#hdWrap .hdArea .mypage .langBox { width:110px !important }

#hdWrap .hdCateArea { position:relative; min-width:1300px; border-bottom:1px solid #ebebeb }
#hdWrap .hdCateArea .tLogoS { display:none; position:absolute; top:12px; left:10px }
#hdWrap .hdArea.fix .hdCateArea { position:fixed; top: 0; left:0; right:0; width:100%; background:#fff; z-index:100 }
#hdWrap .hdCateArea .hdCate { margin: 0 182px; position:relative; font-size:0; text-align:left }
#hdWrap .hdArea.fix .tLogoS { display:block }
#hdWrap .hdArea.fix .tLogoS img{width:auto; height:18px; padding-top:7px}

/* Àüüº¸±â¹öÆ° Àå¹Ù±¸´Ï¹öÆ° */
#hdWrap .hdCate .menuArea { display:inline-block; margin-top:20px; position:relative; vertical-align:top }
#hdWrap .hdCate .menuArea a {display:block;width: 23px;height: 23px; text-align: center;}
#hdWrap .hdCate .menuArea a .menu { display: block; width: 23px; height: 2px; background: #000; position: absolute; left: 0; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; }
#hdWrap .hdCate .menuArea a .menu.line02 { top: 7px }
#hdWrap .hdCate .menuArea a .menu.line03 { top: 14px }
#hdWrap .hdCate .menuArea:hover a .menu.line01 { width: 20px }
#hdWrap .hdCate .menuArea:hover a .menu.line02 { width: 15px }
#hdWrap .hdCate .menuArea.open .menu.line01 { width: 23px !important; top: 7px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#hdWrap .hdCate .menuArea.open .menu.line02 { display: none } 
#hdWrap .hdCate .menuArea.open .menu.line03 { width: 23px!important; top: 7px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } 

#hdWrap .hdCate .fixLogo, #hdWrap .hdCate .mypage { display: none }

/* Ä«Å×°í¸® */
#hdWrap .hdCate .cateWrap { display:inline-block; position:relative; font-size: 0 }
#hdWrap .hdCate .cateWrap .tmenu { display: inline-block; position: relative; margin: 0 21px; font-size: 0; -webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s; vertical-align:top }
#hdWrap .hdCate .cateWrap .tmenu:after { content:''; display: block; width: 100%; height: 2px; background: #000; position: absolute; bottom: 0; left:0; -moz-transform: scaleX(0); -ms-transform: scaleX(0);-webkit-transform: scaleX(0); transform: scaleX(0); -moz-transition: 0.3s;-o-transition: 0.3s; -webkit-transition: 0.3s;transition: 0.3s; }
#hdWrap .hdCate .cateWrap .tmenu:hover::after { display: block; -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
#hdWrap .hdCate .cateWrap .tmenu a { display:block; font-size:18px; position: relative; height:57px; font-weight: 300; line-height:57px; letter-spacing: 1.25px; vertical-align:top; -moz-transition: ease-out 0.3s 0.1s;-o-transition: ease-out 0.3s 0.1s;-webkit-transition: ease-out 0.3s;-webkit-transition-delay: 0.1s;transition: ease-out 0.3s 0.1s; }
#hdWrap .hdCate .cateWrap .tmenu a.tmenuB { font-weight:600; *line-height:64px; }
#hdWrap .hdCate .cateWrap .tmenu .depth2 { display:none;position: absolute;background:rgba(255,255,255,0.9);top: 57px;left: 50%;width:150px;margin-left:-75px;padding: 10px 0;z-index: 97;text-align: center;}
#hdWrap .hdCate .cateWrap .tmenu .depth2 li a { display: block; height:auto; line-height: 26px;font-size:14px; font-weight: 400}
#hdWrap .hdCate .cateWrap .tmenu .depth2 li a:hover { background:#f1f1f1; color:#111; border-bottom: 0 }

@media screen\0 {
    #hdWrap .hdCate .cateWrap .tmenu a.tmenuB { line-height:64px }
}
_:-ms-lang(x), #hdWrap .hdCate .cateWrap .tmenu a.tmenuB { line-height:64px }

#hdWrap .hdCate .goSearch { position:absolute; top:16px; right:0; vertical-align:top }

#hdWrap .topRight {position: absolute;right: 0;top: 22px;}
#hdWrap .topRight li {position: relative;padding: 0 14px;display: inline-block;height: 24px;line-height: 24px;}
#hdWrap .topRight li a {font-size: 22px;}
#hdWrap .topRight li.cartArea {border-left: 1px solid #ddd;padding-right: 7px;}
#hdWrap .topRight li.cartArea .bsCount {position: absolute;left: 50%;top: -1px;width: 14px;height: 14px;line-height: 14px;border-radius: 14px;background-color: #e8e8e8;text-align: center;font-size:11px;margin-left: 7px;}
#hdWrap .searchArea {display:none;position:absolute;top: -3px;right: 50px;width: 180px;height: 30px;}
#hdWrap .searchArea form{height:100%;}
#hdWrap .searchArea .searchWrap{position:relative;display:block;border-bottom: 1px solid #111;padding-right: 25px;height:100%;background: #fff;height: 29px;}
#hdWrap .searchArea input{border:0;height:100%;padding:0 5px;width: 140px;line-height: 30px;background: transparent;}
#hdWrap .searchArea .searhBtn{position:absolute;top: 0;right:0;bottom:0;display:block;width: 25px;text-align:center;font-size: 18px;line-height: 30px;}

/* Àüüº¸±â ·¹À̾î */
.allMenu {display:none;position:relative;top:0px;left: 0; width: 100%; z-index: 100;}
.allMenu #btn-allMenuClose {width: 40px;height: 40px;font-size: 20px;text-align:center;line-height: 40px;background: #fff;cursor:pointer;margin-left: -10px;}
.allMenu .allMenuBx { width:100%; min-width:1280px; background: rgba(255,255,255,0.97); z-index: 98;}
.allMenu .allMenuBx .allMenuInner { padding:25px 235px 25px; box-sizing: border-box; overflow:hidden;}
.allMenu .allMenuBx .allMenuInner .allMenuList { float: left; width:14% }
/*
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(1) { width: 222px; }
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(2) { width: 185px; }
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(3) { width: 205px; }
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(4) { width: 190px; }
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(5) { width: 223px; }
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(6) { width: 220px; }
.allMenu .allMenuBx .allMenuInner .allMenuList:nth-child(7) { width: 185px; }
*/

.allMenu .allMenuBx .allMenuInner a { font-size: 16px; font-weight: 600 }
.allMenu .allMenuBx .allMenuInner ul li { margin: 22px 0 }
.allMenu .allMenuBx .allMenuInner ul li:first-child { margin-top: 0 }  
.allMenu .allMenuBx .allMenuInner dl { height: 210px }
.allMenu .allMenuBx .allMenuInner dl dt { margin-bottom: 10px }
.allMenu .allMenuBx .allMenuInner dl dt a { font-size: 16px; font-weight: 600 }
.allMenu .allMenuBx .allMenuInner dl dd { line-height: 27px; margin: 5px 0 }
.allMenu .allMenuBx .allMenuInner dl dd a { font-size:14px; font-weight: 400 }
.allMenu .allMenuBx .allMenuInner .allMenuList .bottomMenu { padding-top:42px;height:170px }


@media (max-width:1920px){
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 20px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 222px }
    #hdWrap .hdCateArea .tLogoS { left:10px }
}
@media (max-width:1880px){
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 18px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 220px }
}
@media (max-width:1830px){
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 14px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 220px }
}
@media (max-width: 1750px){
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 12px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 217px }
}
@media (max-width: 1680px){
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 9px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 217px }
}
@media (max-width: 1640px){
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 8px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 217px }
}

@media (max-width:1607px){
    #hdWrap .hdTop .ht_left .hd_logo { margin-left:140px }
    #hdWrap .hdTop .ht_right { margin-right:140px }
    #hdWrap .hdCateArea .hdCate {    margin: 0 138px 0 174px; }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 174px }
}
@media (max-width: 1540px){
    #hdWrap .hdTop .ht_left .hd_logo { margin-left:90px }
    #hdWrap .hdTop .ht_right { margin-right:90px }
    #hdWrap .hdCateArea .hdCate {margin: 0 68px 0 176px;}
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 8px }
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 82px }
}
@media (max-width: 1490px){
    #hdWrap .hdTop .ht_left .hd_logo { margin-left:50px }
    #hdWrap .hdTop .ht_right { margin-right:50px }
    #hdWrap .hdCateArea .hdCate { margin: 0 40px 0 50px }
    #hdWrap .hdArea.fix .hdCateArea .hdCate {margin: 0 40px 0 167px;}
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 82px }
        
}
@media (max-width: 1430px){
    #hdWrap .hdTop .ht_left .hd_logo { margin-left:50px }
    #hdWrap .hdTop .ht_right { margin-right:50px }
    #hdWrap .hdCateArea .hdCate { margin: 0 40px 0 50px }
    #hdWrap .hdArea.fix .hdCateArea .hdCate {margin: 0 40px 0 167px;}
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 82px }
    #hdWrap .hdCate .cateWrap .tmenu { margin:0 8px;}
    #hdWrap .hdCate .cateWrap .tmenu a{ ; font-size:15px }
}


@media (max-width: 1400px){
    #hdWrap .hdTop .ht_left .hd_logo { margin-left:50px }
    #hdWrap .hdTop .ht_right { margin-right:50px }
    #hdWrap .hdCateArea .hdCate { margin: 0 40px 0 50px }
    #hdWrap .hdArea.fix .hdCateArea .hdCate {margin: 0 40px 0 167px;}
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 82px }
         #hdWrap .hdCate .cateWrap .tmenu { margin:0 10px;}
    #hdWrap .hdCate .cateWrap .tmenu a{ ; font-size:15px }
}
@media all and (max-width:1300px) {
    #hdWrap .hdTop .ht_left .hd_logo { margin-left:10px }
    #hdWrap .hdTop .ht_right { margin-right:10px }
    #hdWrap .hdCateArea .hdCate { margin: 0 40px 0 10px }
    #hdWrap .hdArea.fix .hdCateArea .hdCate {margin: 0 40px 0 166px;}
    .allMenu .allMenuBx .allMenuInner { padding:25px 0 25px 44px }
     #hdWrap .hdCate .cateWrap .tmenu { margin:0 10px;}
    #hdWrap .hdCate .cateWrap .tmenu a{ ; font-size:14px }
}

@keyframes upDown {
  0% {
    top:-23px;
  }
  30% {
    top:-20px;
  }
  60% {
    top:-23px;
  }
  100% {
    top:-25px;
  }
}
/* BASIC css end */