@charset "utf-8";

/* 프로덕트 확대 팝업 시 딸각거리는거 방지하기 위해 추가 */
html {overflow-y: scroll;}

#wrap {position:relative; width:100%;min-width:1140px; overflow-x: hidden;}
#container {position:relative;width:100%;padding-top:70px;}
#content{/*min-height:500px;*/min-width:1140px;padding-bottom:100px;}
.wrapper {position:relative; width:1140px; max-width:1920px; margin:0 auto;}

#header{position:fixed;width:100%;height:70px;background-color:#fff;z-index:1000;}
#header .wrapper{ background-color:#fff;}

#select_brand {float:left;width:172px;}
#select_brand .select{z-index: 100;position: relative;display:inline-block; width:192px;height:70px; font-family: 'Lato';font-size: 18px;font-weight:700; color: #000;background: #fff url(//image.goodpeople.co.kr/goodpeople/web/icon/arrow_9x5_down.png) no-repeat 179px 31px;cursor:pointer;padding-top:25px;}
#select_brand .select.active{background: #fff url(//image.goodpeople.co.kr/goodpeople/web/icon/arrow_9x5_up.png) no-repeat 179px 31px;}
#select_brand ul {display: none;position: absolute;top:70px;z-index:9999;width:208px;overflow: hidden;left: -20px;padding-left:20px;background: #fff;border:none;}
#select_brand ul li {float: left;background-color:#fff;width: 100%;}
#select_brand ul li:last-child a{padding: 13px 13px 26px 0;}
#select_brand ul li a {display: block;padding-bottom:17px; font-family: 'Lato';font-size: 12px;font-weight:300; color: #999;padding: 13px 13px 13px 0;}
#select_brand ul li.on a,
#select_brand ul li a:hover {color: #000;}


#header .gnb{float:left;padding-top:27px;margin-left:0px;}
#header .gnb li{position:relative;float:left;margin-left:18px;}
#header .gnb li:first-child{margin-left:34px;}
#header .gnb li a{position:relative;display:block;font-size:14px;font-family: 'Lato','Nanum Barun Gothic';font-weight:300;color:#010101;}
#header .gnb li a img { vertical-align:center; margin-top:3px; }
#header .gnb li.bul{padding-left:22px;}
#header .gnb li.bul:before{display:block; content:''; position:absolute; top:2px; left:0; width:2px; height:10px; background-color:#e7e7e7;}

#header .gnb li a:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    right: 50%;
    bottom: 0;
    background: #000;
    height: 1px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

#header .gnb li.on a:before,  #header .gnb li a:hover:before{left: 0;right: 0;}

#header .gnb li a>span{  font-family: 'Nanum Barun Gothic';font-weight:300;}

#header .util{float:right;padding-top:20px;margin-right:64px;}
#header .util li{float:left;}
#header .util li a{display:block;position:relative;text-indent:-9999px;width:16px;height:22px;}

#header .util .mypage a{background:url(//image.goodpeople.co.kr/goodpeople/web/common/ico_mypage.png) no-repeat 0 100%;}
#header .util .cart{margin-left:25px;}
#header .util .cart a{background:url(//image.goodpeople.co.kr/goodpeople/web/common/ico_cart.png) no-repeat 0 100%;text-indent:0;width:26px;}
#header .util .search{position:relative;z-index:99999;margin-left:13px;}
#header .util .search a{background:url(//image.goodpeople.co.kr/goodpeople/web/common/ico_search.png) no-repeat 0 100%;}
#header .util li a .count{display:block;position:absolute;left:11px;top:4px;width:14px;font-size:11px;font-weight:300;text-align:center;color:#fff; overflow:hidden; }

#header .menu{position:absolute;right:0;top:0;padding-top:30px;width:24px;height:70px;cursor:pointer;}
#header .menu_icon{position: relative;-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);	-o-transform: rotate(0deg);	transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out; transition: .5s ease-in-out;	cursor: pointer;}
#header .menu_icon span{display: block; position: absolute; right: 0; height: 2px; background-color: #000; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

#header .menu_icon span:nth-child(1){top: 0px;width: 24px;}
#header .menu_icon span:nth-child(2){top: 6px;width: 14px;}

#header .menu_icon.on span{top:4px;height:1px; }
#header .menu_icon.on span:nth-child(1){transform: rotate(45deg);width: 20px;}
#header .menu_icon.on span:nth-child(2){transform: rotate(-45deg);width: 20px;}

#header .menu_icon.active span{top:4px;height:1px; }
#header .menu_icon.active span:nth-child(1){transform: rotate(45deg);width: 20px;}
#header .menu_icon.active span:nth-child(2){transform: rotate(-45deg);width: 20px;}

#header .menu_open{position:relative;display:none;background-color:#000;width:100%;height:0;z-index:8888;opacity:0.9; filter: alpha(opacity=90);}
#header .menu_open .wrap_box{position:relative;width:1140px; margin: 0 auto;}
.menu_gnb{width:1140px;margin:0 auto 0;padding-top:60px;}
.menu_gnb>li{float:left;width:300px;}
.menu_gnb>li:first-child{width:210px;}
.menu_gnb>li>a{display:block;color:#fff;font-family: 'Lato';font-weight:700;font-size:18px;margin-bottom:20px;}
.menu_gnb>li>a strong{display:block;color:#fff;font-family: 'Lato','Nanum Barun Gothic';font-weight:700;font-size:18px;margin-bottom:20px;}
.menu_gnb>li>ul.menu_nav{float:left;width:100px;}
.menu_gnb>li>ul.menu_nav>li>a{display:block;color:#666;margin-bottom:20px;font-size:14px;}

.menu_brand{width:1140px;margin:100px auto 0;border-top:1px solid #333;padding-top:20px;}
/*.menu_brand li{float:left;margin-left:34px;}*/
.menu_brand li{float:left;width:160px;margin-right:34px;margin-bottom:5px;} /*20180626 김미경 수정 브랜드가 늘어났을 경우 20180829 적용*/
.menu_brand li:first-child{margin-left:0;}
.menu_brand li>a{color:#666;font-family: 'Lato';font-weight:700;font-size:18px;}

.login_box{position:absolute; top:60px;right:-10px;}
.login_box ul{width:200px;text-align:right;}
.login_box ul li{display:inline-block;  padding:0 10px; font-size:14px; color:#999;}
.login_box ul li a{font-family: 'Lato';font-size:14px; color:#999;}

#header .search_input{display:none;width:1076px;height:70px;background-color:#fff;position:absolute;left:-1px;top:0px;z-index:9999;}
#header .search_input.on{display:block;}
#header .search_input .ipt{margin-top:15px;width:1076px;height:38px;line-height:38px;color:#000;border-bottom:1px solid #000;background-color:transparent;}

#footer{height:294px; padding-top:40px; background-color:#f0f0f0;} /*20200731 김미경 height:254px; -> height:294px; 수정*/
#footer .wrapper > div{float:left;}
.cs_center{width:332px;}
.cs_center.v2{margin-top:16px;}
.cs_center dt{font-size:14px; color:#000;}
.cs_center dd{margin-top:4px; font-size:12px; color:#666;}
.cs_center dd span{font-family: 'Lato'; font-size:22px; font-weight:700; color:#000;}

.mypage_box{width:334px; padding-top:23px;}
.mypage_box li{float:left; width:142px; margin-bottom:20px;}
.mypage_box li a{display:block; font-size:12px; color:#000;}
#footer h2{font-size:14px; color:#000; font-weight:400; }
.company_info{width:474px; overflow:hidden;}
.company_info li{position:relative; float:left;margin-top:10px; padding: 0 9px 0 9px;  font-size:12px; color:#666;}
.company_info li:after{display:block; content:''; position:absolute; top:0px; right:0; width:1px; height:10px; background-color:#d8d8d8;  }
.company_info li:before{display:block; content:''; position:absolute; top:0px; left:0; width:1px; height:10px; background-color:#eeeeee;  }
.company_info li.clearfix{padding-left:0;}
.company_info li.clearfix:before{display:none;}
.company_info li.no_line:after{display:none;}
.company_info li strong{font-size:12px; color:#000;}
.privacy{margin: 19px 0; overflow:hidden;}
.privacy li{position:relative; float:left; padding: 0 9px 0 9px;}
.privacy li:before{display:block; content:''; position:absolute; top:1px; left:0; width:1px; height:10px; background-color:#d8d8d8;}
.privacy li:first-child{padding-left:0;}
.privacy li:first-child:before{display:none;}
.privacy li a{display:block; font-size:12px; color:#000;line-height:1.2; height:15px; }

a.family{display:inline-block; height:18px; padding-top:4px; font-family: 'Lato'; font-size:12px; color:#000; font-weight:700; border-bottom:1px solid #999999;}
address{font-family: 'Lato'; font-size:9px; color:#999;}
address img { vertical-align:middle; margin-left:20px; }

/* 2019.01.08 김미경 해외몰 아이콘 삭제관련 float:left; 삭제 */
select.family{display:inline-block; width:110px; height:24px; margin-bottom:20px; font-family: 'Lato'; font-size:12px; line-height:24px; color:#000; font-weight:700; border-bottom:1px solid #999999; background:url(//image.goodpeople.co.kr/goodpeople/web/common/family_arrow.png) no-repeat 100% 48%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

select.family::-ms-expand {display: none;}
select.family option { height:18px; padding-top:4px; font-family: 'Lato'; font-size:12px; color:#000; font-weight:400; }

/* 2018.10.02 김미경 추가, select.family, a.family 수정 */
.langWrap{overflow:hidden;display:inline-block;vertical-align:top;margin-left:20px;font-size:0;margin-bottom:20px;}
.langWrap > a{display:inline-block;margin-right:5px;vertical-align:top;}



/* ie8 */
.ie_box { display:none; }


#header .menu { display:block; } /* 2018.10.11 김미경 수정 display:none; -> display:block; */
#header .gnb { display:block; } /* 2018.10.11 김미경 수정 display:none; -> display:block; */
#header .util .search { display:block; } /* 2018.10.11 김미경 수정 display:none; -> display:block; */
.main { display:none; }
select.family { display:none; }
#select_brand .select { background:#fff; }
.btn_filter { display:none; }

.orderbrowser #header .menu { display:block; }
.orderbrowser #header .gnb { display:block; }
.orderbrowser #header .util .search { display:block; }
.orderbrowser .main { display:block; }
.orderbrowser select.family { display:block; }
.orderbrowser #select_brand .select{z-index: 100;position: relative;display:inline-block; width:192px;height:70px; font-family: 'Lato';font-size: 18px;font-weight:700; color: #000;background: #fff url(//image.goodpeople.co.kr/goodpeople/web/icon/arrow_9x5_down.png) no-repeat 170px 31px;cursor:pointer;padding-top:25px;}
.orderbrowser #select_brand .select.active{background: #fff url(//image.goodpeople.co.kr/goodpeople/web/icon/arrow_9x5_up.png) no-repeat 170px 31px;}
.orderbrowser .btn_filter { display:inline-block; }


.filter_dim{display:none;position:fixed;left:0;right:0;top:0;bottom:0;background-color:#fff;z-index:90;opacity:.3; filter: alpha(opacity=30);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30); }

.ie8 #header .util { margin-right:0; }
.ie8
.ie8 #select_brand ul { display:none !important; }

.ie8 .ie_box { display:block; text-align:center; padding:240px 0 278px; }
.ie8 .ie_box h3 { display:block; text-align:center; font-weight:normal; font-size:20px; color:#000; font-family: 'Nanum Barun Gothic'; line-height:1.2; }
.ie8 .ie_box h3 span { font-weight:normal; font-size:18px; color:#000; font-family:'Lato'; margin-left:3px; }
.ie8 .ie_box ul { margin:36px auto; width:780px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; height:78px; font-size:0; }
.ie8 .ie_box li { display:inline-block; height:78px; line-height:78px; font-family:'Lato'; font-size:26px; margin:0 20px; }
.ie8 .ie_box li a{ font-family:'Lato'; line-height:78px; font-size:26px; font-family:'Lato','Nanum Barun Gothic'; font-weight:bold; }
.ie8 .ie_box li a:hover { text-decoration:underline; }
.ie8 .ie_box p { font-size:14px; line-height:22px; color:#999999; font-family: 'Nanum Barun Gothic';  }
.ie8 .snsList { display:none !important; }

.animateimg { opacity:1; transform:matrix(1, 0, 0, 1, 0, 0) scale(1.03); transition:1.8s ease-in-out; }
.animate1 { opacity:0; transform:matrix(1.03, 0, 0, 1, 0, 40); transition:0.6s ease-out; transition-delay:.3s; }
.animate2 { opacity:0; transform:matrix(1.03, 0, 0, 1, 0, 35); transition:0.4s ease-out; transition-delay:.4s; }
.animate3 { opacity:0; transform:matrix(1.03, 0, 0, 1, 0, 20); transition:0.4s ease-out; transition-delay:.5s; }
.animateimg.moved { opacity:1; transform:matrix(1, 0, 0, 1, 0, 0) scale(1); }
.animate1.moved { opacity:1;transform:matrix(1, 0, 0, 1, 0, 0); }
.animate2.moved { opacity:1; transform:matrix(1, 0, 0, 1, 0, 0); }
.animate3.moved { opacity:1; transform:matrix(1, 0, 0, 1, 0, 0); }