/* BASIC css start */
/* 오른쪽퀵버튼 */
#fix_pagescroll { position:fixed;right:-50px;bottom:85px;z-index:99999;  -webkit-transition:all 1s;moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
#fix_pagescroll.active {right:30px;bottom:85px;}
.updown > div {margin-top:5px;opacity:1;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.updown > div:hover {opacity:0.8;}
.updown div.r_icon { cursor:pointer; position:relative; width:60px;height:60px; line-height:60px; background-color:#fff; border:1px solid #ddd;  text-align:center; box-sizing:border-box;}
.updown div.r_icon i {font-size:14px;color:#999;}
.updown . { width:60px;height:60px; }

.updown div.r_icon1 { cursor:pointer; position:relative; width:60px;height:60px; line-height:60px; background-color:#ffee2e; border:1px solid #ddd; text-align:center; box-sizing:border-box;}
.updown div.r_icon1 i {font-size:35px;color:#3c1e1e;}
.top_family {height:55px; background:#212121}



body{min-width:1580px; max-width: 1903px; margin: 0 auto;}
#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }

/* header */
#header { width:100%; z-index:1001;}
#header .inner {max-width:1903px; margin:0 auto;}
#header .headerTop { width:100%; *zoom:1 }
#header .headerTop.header-scroll{position: fixed; top:0; max-width: 1903px; background: #ffffff; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; opacity: 0.9;}
#header .headerTop .headerTopinner{ position: relative; padding: 20px 50px; background: #ffffff;}
#header .headerTop .headerTopinner.hovback{background: #fff;}
#header .headerTop:after { display:block; clear:both; content:''; }

/* 카테고리 */
#header .headerGnb { position: absolute; top: 50%; left: 50px; transform: translateY(-50%);  }
#header .headerGnb ul { *zoom:1 }
#header .headerGnb ul:after { display:block; clear:both; content:'' }
#header .headerGnb ul.depth1 > li { float:left; padding: 0 35px /*45px*/ 0 0; }
#header .headerGnb ul.depth1 > li:last-of-type{padding-right:0}
#header .headerGnb ul.depth1 > li > a { display:block; padding: 0 20px 0 0; color:#000; font-size:15px; line-height:75px; white-space:nowrap; font-family: 'Noto Sans','Noto Sans KR', sans-serif;  border:0px solid #000;}
#header .headerGnb ul.depth1 > li > a.depopen{ opacity: 0.8;}

/*메뉴 중분류*/
.dn {display: none !important}
#header .headerGnb .sub_menu_wrap { position: absolute; top:76px;  left:-50px; width: 100vw; padding: 40px 0; border-top: 1px solid #c8c8c8; background: #fff;  }
#header .headerGnb .sub_menu_in{ width: 80%;  padding:0 0 0 50px; border:0px solid #000; box-sizing:border-box;}
#header .headerGnb .sub_menu_in2 { width: 80%;  padding:0 0 0 150px; border:0px solid #000; box-sizing:border-box;}

#header .headerGnb ul.depth2{ display: flex; float: left; width: 383px; height: ; align-content: flex-start; flex-direction: column; flex-wrap: wrap; overflow: auto;}
#header .headerGnb ul.depth2 > li { width: 186px; margin: 0 10px 23px 0;}
#header .headerGnb ul.depth2 > li:nth-of-type(){ height: 100px; }
#header .headerGnb ul.depth2 > li a { color: #000; font-size: 15px; font-family: 'Noto Sans', 'NanumBarunGothic', sans-serif; line-height: 16px;}
#header .headerGnb ul:after {display: block; clear: both; content: ''}
#header .headerGnb .sub_menu_in .collecBox{ float: right;}
#header .headerGnb .sub_menu_in .collecBox p{ margin: 0 25px 20px; color: #000; font-size: 15px; font-family: 'Noto Sans', 'NanumBarunGothic', sans-serif;}
#header .headerGnb .sub_menu_in .collecBox img{ width: 288px; margin: 0 0 0 25px; cursor: pointer;}
#header .headerGnb .sub_menu_in .collecBox img:hover{opacity:0.8;}

#header .headerGnb .sub_menu_in2 .collecBox{ float: right;}
#header .headerGnb .sub_menu_in2 .collecBox p{ margin: 0 25px 20px; color: #000; font-size: 15px; font-family: 'Noto Sans', 'NanumBarunGothic', sans-serif;}
#header .headerGnb .sub_menu_in2 .collecBox img{ width: 288px; margin: 0 0 0 25px; cursor: pointer;}
#header .headerGnb .sub_menu_in2 .collecBox img:hover{opacity:0.8;}



/* 로고 */
#header .headerTop .tlogo { width: auto; margin: 0 auto; text-align:center; }
#header .headerTop .tlogo a img{ max-width: 100%;}

/* 계정 */
#header .headerTop .headerTopinner .tnbRight{ position: absolute; top: 50%; right: 50px; transform: translateY(-50%);}
#header .headerTop .headerTopinner .tnbRight ul li{float: left; margin: 0 0 0 35px;}
#header .headerTop .headerTopinner .tnbRight ul li a{font-family: 'Noto Sans','Noto Sans KR', sans-serif;}

/* 슬라이드 메뉴 */
.slideMenu{ display:none; position: absolute; width: 100%; padding: 40px 0; border-top: 1px solid #c8c8c8; background: #fff;}
.slideMenu .slideIn{ width: 1330px; margin: 0 auto; ;}
.slideMenu .slideIn .slide_list1{display:flex; float: left; width: 383px; height: 386px; align-content:flex-start; flex-direction:column; flex-wrap:wrap; overflow:auto}
.slideMenu .slideIn .slide_list1 li{width: 186px; margin: 0 10px 23px 0;}
.slideMenu .slideIn .slide_list1 li:nth-of-type(3){height: 247px;}
.slideMenu .slideIn .slide_list1 li a{ color: #000; font-size: 15px; font-family: 'Noto Sans', 'NanumBarunGothic', sans-serif; line-height: 16px;}
.slideMenu .slideIn .collecBox{ float: left;}
.slideMenu .slideIn .collecBox p{ margin: 0 25px 20px; color: #000; font-size: 15px; font-family: 'Noto Sans', 'NanumBarunGothic', sans-serif;}
.slideMenu .slideIn .collecBox img{ width: 288px; margin: 0 0 0 25px; cursor: pointer;}





.tooltipTarget { position:relative; }
.icoTooltip { z-index:5; position:absolute; top:20%; left:-33px; }

#header{position:fixed; top:0; left:0; width:100%; z-index:9000; background:#fff;}
#header.slideDown.animated {
    -webkit-animation-name: slideDown;
    animation-name: slideDown;
}

#header.slideUp.animated {
    -webkit-animation-name: slideUp;
    animation-name: slideUp;
}

#header.slideUp {
    height: 129px;
}


.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-56px)
    }

    100% {
        -webkit-transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-56px)
    }

    100% {
        transform: translateY(0)
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-56px)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-56px)
    }
}


/* BASIC css end */