/* BASIC css start */
@charset "euc-kr";
.header-wrap { position: relative; z-index: 1001; }
.hd-mask { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); }
#header { background-color: #fff; border-bottom: 1px solid #e9e9e9; }

/*header-tnb*/
#header .header-tnb { border-bottom: 1px solid #e9e9e9; background-color: #f6f6f6; }
#header .header-tnb a { display: block; opacity: 0.65; line-height: 25px; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }
#header .header-tnb a:hover { opacity: 1; }
#header .header-tnb .tnb-left { float: left; }
#header .header-tnb .tnb-left > ul > li { position: relative; float: left; padding: 0 7px; }
#header .header-tnb .tnb-left > ul > li:first-child { padding-left: 0px; }
#header .header-tnb .tnb-left > ul > li:last-child { padding-right: 0px; }
#header .header-tnb .tnb-left > ul > li:after { content: ""; display: block; width: 1px; height: 7px; position: absolute; top: 50%; right: 0; margin-top: -3.5px; background-color: #ddd; }
#header .header-tnb .tnb-left > ul > li:last-child:after { display: none; }
#header .header-tnb .tnb-left > ul > li.notice-line a {color:darkcyan;}
#header .header-tnb .tnb-right { float: right; }
#header .header-tnb .tnb-right > ul > li { position: relative; float: left; padding: 0 7px; }
#header .header-tnb .tnb-right > ul > li:first-child { padding-left: 0px; }
#header .header-tnb .tnb-right > ul > li:last-child { padding-right: 0px; }
#header .header-tnb .tnb-right > ul > li:after { content: ""; display: block; width: 1px; height: 7px; position: absolute; top: 50%; right: 0; margin-top: -3.5px; background-color: #ddd; }
#header .header-tnb .tnb-right > ul > li:last-child:after { display: none; }
#header .header-tnb .tnb-right > ul > li a.tnb_join { position: relative; }
#header .header-tnb .down-link { position: relative; }
#header .header-tnb .down-link .down-menu { visibility: hidden; display: none; position: absolute; top: 25px; left: 0; background-color: #fff; border: 1px solid #e9e9e9; padding: 5px 0; z-index: 1; }
#header .header-tnb .down-link:hover .down-menu { visibility: visible; display: block; }
#header .header-tnb .down-link .down-menu > li > a { display: block; word-break: keep-all; white-space: nowrap; padding: 0 12px; }
#header .header-tnb .down-link .down-menu > li > a:hover { background-color: #f6f6f6; }
#header .header-tnb .tnb-right > ul > li a.tnb_join:before { content: ''; position: absolute; top: 22px; left: 50%; width: 0px; height: 0px; border-width: 0px 4px 4px; border-style: solid; border-color: transparent transparent #d7282f; border-image: initial; margin-left: -4px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; }
#header .header-tnb .tnb-right > ul > li a.tnb_join:hover:before { opacity: 1; }
#header .header-tnb .tnb-right > ul > li a.tnb_join:after { content: "+3,000"; position: absolute; top: 20px; left: 50%; width: 40px; height: 18px; line-height: 18px; text-align: center; margin-left: -20px; background-color: #d7282f; color: #fff; font-size: 10px; visibility: hidden; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; }
#header .header-tnb .tnb-right > ul > li a.tnb_join:hover:after { visibility: visible; opacity: 1; top: 26px; }
#header .header-tnb .down-link .down-menu > li > hr { height: 1px; display: block; background: #e9e9e9; margin: 0 auto; border: none; }

/*header-top*/
#header .header-top { padding: 25px 0 15px;  }
#header .header-top ul.top-sns { top: 55px; }
#header .header-top .hd-logo { float: left; }
#header .header-top .hd-logo img { width: 190px; }
#header .header-top .search-area { position: absolute; top: 50%; left: 50%; margin-top: -17.5px; margin-left: -400px; }
#header .header-top .search-area input[name="search"] { border: 1px solid #ddd; height: 35px; width: 300px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: none; float: left; padding: 0 10px; font-size: 14px; }
#header .header-top .search-area .searchBtn { position: relative; display: block; width: 35px; height: 35px;  background-color: #d7282f; text-indent: -9999px; overflow: hidden; float: left; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
#header .header-top .search-area .searchBtn:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 35px; height: 35px; background: url(https://image.plthink.com/homepage/Image_2021/header/search_ico.png) no-repeat center center; background-size: cover; }
#header .header-top .search-area .searchBtn:hover:after { animation: search 0.5s ease 0.1s;  }
#header .header-top .util-menu { float: right; }
#header .header-top .util-menu > button { display: none; }
#header .header-top .util-menu a { display: block; opacity: 0.65; line-height: 12px; padding-top: 40px; background-position: center top; background-repeat: no-repeat; background-size: 30px; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }
#header .header-top .util-menu a:hover { opacity: 1; }
#header .header-top .util-menu > ul > li { position: relative; float: left; padding: 0 8px; }
#header .header-top .util-menu > ul > li:first-child { padding-left: 0; }
#header .header-top .util-menu > ul > li:last-child { padding-right: 0; }
#header .header-top .util-menu > ul > li:after { content: ""; display: block; width: 1px; height: 7px; position: absolute; bottom: 2px; right: 0; background-color: #ddd; }
#header .header-top .util-menu > ul > li:last-child:after { display: none; }
#header .header-top .util-menu > ul > li.li01 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico01.png); }
#header .header-top .util-menu > ul > li.li02 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico02.png); }
#header .header-top .util-menu > ul > li.li03 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico03.png); }
#header .header-top .util-menu > ul > li.li04 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico04.png); }
#header .header-top .util-menu > ul > li.li05 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico05.png); }
#header .header-top .util-menu > ul > li.li06 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico06.png); }
#header .header-top .util-menu > ul > li.li07 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico07.png); }
#header .header-top .util-menu > ul > li.li08 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico08.png); }
#header .header-top .util-menu > ul > li.li09 > a { background-image: url(https://image.plthink.com/homepage/Image_2021/header/right_line_ico09.png); }


#header .header-top .tnb-min { display: none; position: absolute; top: 50%; right: 350px; margin-top: -6px; line-height: 0; }
#header .header-top .tnb-min > ul > li { position: relative; float: left; padding: 0 12px; }
#header .header-top .tnb-min > ul > li:first-child { padding-left: 0; }
#header .header-top .tnb-min > ul > li:last-child { padding-right: 0; }
#header .header-top .tnb-min > ul > li:after { content: ""; display: block; width: 1px; height: 7px; position: absolute; bottom: 2px; right: 0; background-color: #ddd; }
#header .header-top .tnb-min > ul > li:last-child:after { display: none; }
#header .header-top .tnb-min > ul > li > a { position: relative; opacity: 0.65; line-height: 12px; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }
#header .header-top .tnb-min > ul > li > a:hover { opacity: 1; }
/*header-gnb*/
#header .header-gnb { padding-bottom: 8px; padding-top: 8px; }
#header .header-gnb .cate-btn { display: inline-block; vertical-align: middle; }
#header .header-gnb .cate-btn > a { overflow: hidden; float: left; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 130px; height: 31px; border: 1px solid #d7282f; padding: 0 6px; border-radius: 3px; transition: all 0.5s; -webkit-transition: all 0.5s; }
#header .header-gnb.active .cate-btn > a { background-color: #d7282f; }
#header .header-gnb .cate-btn > a > i { display: block; width: 20px; height: 1px; 
	background-color: #d7282f; margin: 3px; transition: all ease 0.5s; transition: all ease 0.5s; }
#header .header-gnb.active .cate-btn > a > i { background-color: #fff; }
#header .header-gnb.active .cate-btn > a > i:first-of-type { transform: rotate(315deg); margin: -1px 0; }
#header .header-gnb.active .cate-btn > a > i:nth-of-type(2) { margin: 0; margin-left: -100px; }
#header .header-gnb.active .cate-btn > a > i:last-of-type { transform: rotate(225deg); margin: -1px 0; }
#header .header-gnb.active .cate-btn > a:hover > i:first-of-type { animation: gnb 0.3s ease; }
#header .header-gnb.active .cate-btn > a:hover > i:nth-of-type(2) { animation: gnb 0.3s ease 0.2s; }
#header .header-gnb.active .cate-btn > a:hover > i:last-of-type { animation: gnb 0.3s ease 0.4s; }
#header .header-gnb .cate-btn > a > span { position: absolute; top: 7px; left: 40px; font-size: 14px; color: #d7282f; line-height: 1; word-break: keep-all; transition: all 0.5s; }
#header .header-gnb.active .cate-btn > a > span { color: #fff; }
#header .header-gnb .sub-menu { display: inline-block; vertical-align: middle; margin-left: 30px; }
#header .header-gnb .sub-menu a { display: block; opacity: 0.65; line-height: 25px; font-size: 14px; transition: color 0.5s, opacity 0.5s; -webkit-transition: color 0.5s, opacity 0.5s; }
#header .header-gnb .sub-menu a:hover { opacity: 1; color: #d7282f; }
#header .header-gnb .sub-menu li { float: left; padding: 0 15px;}
#header .header-gnb .sub-menu > li:first-child { padding-left: 0; }
#header .header-gnb .sub-menu > li:last-child { padding-right: 0; }
#header .header-gnb .gnb-cate-box { overflow: hidden; display: none; position: absolute; top: 40px; left: 0; border: 1px solid #d7282f; background-color: #fff; box-shadow: 0px 1px 5px rgb(0,0,0,0.2); z-index: 1; }
#header .header-gnb.active .gnb-cate-box { display: block; }
#header .header-gnb .gnb-cate-box .cate-wrap { position: relative; display: block; float: left; min-height: 450px; }
#header .header-gnb .gnb-cate-box .cate-wrap:after { content: ''; width: 1px; height: 700px; background-color: #e9e9e9; position: absolute; top: 0; right: 0; }
#header .header-gnb .gnb-cate-box .cate-wrap > li { margin: 12px 20px; min-width: 170px }
#header .header-gnb .gnb-cate-box .cate-wrap > li:first-child { margin-top: 20px; }
#header .header-gnb .gnb-cate-box .cate-wrap > li:last-child { margin-bottom: 20px; }
#header .header-gnb .gnb-cate-box .cate-wrap dd { margin: 13px 20px; min-width: 170px; }
#header .header-gnb .gnb-cate-box .cate-wrap dd:first-of-type { margin-top: 20px; }
#header .header-gnb .gnb-cate-box .cate-wrap dd:last-of-type { margin-bottom: 20px; }
#header .header-gnb .gnb-cate-box a { position: relative; padding: 5px 2px; font-size: 14px; display: inline-block; line-height: 1; transition: all 0.5s; -webkit-transition: all 0.5s; }
#header .header-gnb .gnb-cate-box a:hover { color: #d7282f; }
#header .header-gnb .gnb-cate-box a.active { color: #d7282f; }
#header .header-gnb .gnb-cate-box a:after { content: ''; position: absolute; bottom: 2px; left: 0; width: 0%; height: 1px; background-color: #d7282f; transition: all 0.3s; -webkit-transition: all 0.3s; }
#header .header-gnb .gnb-cate-box a.active:after { width: 100%; }
#header .header-gnb .gnb-cate-box a span { font-size: 0.8em; }
#header .header-gnb .gnb-cate-box .cate-wrap .other-cate { margin-top: 50px; }
#header .header-gnb .gnb-cate-box .cate-wrap .other-cate > li { margin: 10px 0px; }
#header .header-gnb .gnb-cate-box .cate-wrap .sub-menu2 { display: none; }
#header .header-gnb .gnb-cate-box .cate-wrap .sub-menu2 > li { margin: 10px 0px; }

#header .header-gnb .gnb-cate-box .cate-brand { float: left; width: 300px; padding: 20px; }
#header .header-gnb .gnb-cate-box .cate-brand h3 { font-size: 13px; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container { padding-top: 25px; margin-top: -14px; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-slide { background-color: #fff; min-height: 404px; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-slide a { width: 33.333%; text-align: center; padding: 10px 0; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-slide a img { display: inline-block; border-radius: 50%; background-color: #e9e9e9; overflow: hidden; opacity: 0.65; transition: all 0.5s; -webkit-transition: all 0.5s; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-slide a:hover img { opacity: 1; background-color: #fff; border-radius: 0; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-slide a span { display: block; margin-top: 5px; font-size: 13px; white-space: nowrap; word-break: keep-all; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-util-btn  { margin: 0 auto; width: 85px; text-align: center; color: #aaa; position: absolute; top: -4px; right: 0px; line-height: 25px; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container.active .swiper-util-btn  { display: block; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-container .swiper-util-btn .cate-brand-pagination { position: relative; bottom: 0px; }
#header .header-gnb .gnb-cate-box .cate-brand .cate-brand-pagination .swiper-pagination-current { color: #515151; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-next, #header .header-gnb .gnb-cate-box .cate-brand .swiper-button-prev { width: 25px; height: 25px; margin-top: 0; top: 0; outline: 0; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-next { right: 0; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-prev { left: 0; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-next, #header .header-gnb .gnb-cate-box .cate-brand .swiper-button-prev { overflow: hidden; position: absolute; top: 50%; margin-top: -12.5px; width: 25px; height: 25px; background-repeat: no-repeat !important; background-position: center center !important; background-size: auto !important; text-indent: -9999px; outline: 0; opacity: 0.5; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-next:hover, #header .header-gnb .gnb-cate-box .cate-brand .swiper-button-prev:hover { opacity: 1; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-next { background-image: url(https://image.plthink.com/homepage/Image_2021/main/next_ico2.png); border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
#header .header-gnb .gnb-cate-box .cate-brand .swiper-button-prev {background-image: url(https://image.plthink.com/homepage/Image_2021/main/prev_ico2.png); border-top-left-radius: 20px; border-bottom-left-radius: 20px; }



/*----------header fixed-------------*/
#header.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 1; box-shadow: 0px 1px 5px rgba(0,0,0,0.2); border-bottom: none; }

/*header-tnb*/
#header.fixed .header-tnb { display: none; }

/*header-top*/
#header.fixed .header-top { padding: 12px 0; }
#header.fixed .header-top .hd-logo { margin-left: 140px; }
#header.fixed .header-top .hd-logo img { width: 95px; }
#header.fixed .header-top ul.top-sns { top: 15px; }
#header.fixed .header-top .search-area { left: inherit; right: 0; }
#header.fixed .header-top .search-area input[name="search"] { width: 200px; }

#header.fixed .header-top .util-menu { float: none; position: absolute; top: 50%; left: 50%; margin-top: -6px; margin-left: 145px; line-height: 0; }
#header.fixed .header-top .util-menu { margin-left: -380px; }
#header.fixed .header-top .util-menu > button { position: relative; display: inline-block; width: 30px; height: 30px; cursor: pointer; background: url(https://image.plthink.com/homepage/Image_2021/header/zip_ico.png) no-repeat center center; opacity: 0.65; vertical-align: middle; }
#header.fixed .header-top .util-menu > button:focus { outline: none; }
#header.fixed .header-top .util-menu > button:hover { opacity: 1; }
#header.fixed .header-top .util-menu > button { opacity: 1; }
#header.fixed .header-top .util-menu > button:after { content: ''; display: block; position: absolute; bottom: 4px; right: 2px; width: 15px; height: 15px; background-repeat: no-repeat; background-position: center center; background-image: url(https://image.plthink.com/homepage/Image_2021/header/zip_open_ico.png); opacity: 0.65; transition: all ease 0.3s; -webkit-transition: all ease 0.5s; }
#header.fixed .header-top .util-menu > button:hover:after { opacity: 1; }
#header.fixed .header-top .util-menu > button:after { opacity: 1; transform: rotate(225deg); }
/*#header.fixed .header-top .util-menu > ul { display: none; }*/
#header.fixed .header-top .util-menu > ul { display: inline-block; vertical-align: middle; margin-right: 10px; }
#header.fixed .header-top .util-menu > ul > li > a { padding-top: 0; background: transparent; }
#header.fixed .header-top .tnb-min { display: block; right: 250px;}

/*header-gnb*/
#header.fixed .header-gnb { padding-bottom: 0px; padding-top: 0; }
#header.fixed .header-gnb .cate-btn { position: absolute; top: -39px; left: 0; }
#header.fixed .header-gnb .cate-btn > span { display: none; }
#header.fixed .header-gnb .sub-menu { display: none; }
#header.fixed .header-gnb.active .sub-menu { display: none; }
#header.fixed .header-gnb.active .gnb-cate-box { top: 0; }
#header.fixed .header-gnb .gnb-cate-box .cate-wrap .sub-menu2 { display: block; }

/*SNS*/
ul.top-sns { overflow: hidden; position: absolute; right: 5px; background-color: #fff; border-radius: 3px; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); width: 50px; z-index: 9; }
ul.top-sns li { position:relative; vertical-align: top;  margin-top: -3px; }
ul.top-sns li.toLink {opacity: 0.4; transition: opacity 0.5s; -webkit-transition: opacity 0.5s;}
ul.top-sns li.toLink:hover { opacity: 1; }
ul.top-sns li a { padding-top: 0 !important; text-align: center; }
#header .header-top .util-menu > ul > li.li09  ul.top-sns {   visibility: hidden; }
#header .header-top .util-menu > ul > li.li09:hover ul.top-sns {   visibility: visible; } 

@keyframes search {
	0% {top: 0px;}
	50% {top: -3px;}
	100% { top: 0; }
}

-webkit-@keyframes search {
	0% {top: 0px;}
	50% {top: -3px;}
	100% { top: 0; }
}
/* BASIC css end */