@charset "utf-8";
@import url("user_layout.css");




/* 메인 Css */
#wrap {}

#hwrap{b order: 1px solid red; width: 100%; }
#header {width: 1200px; margin: auto;}
#header .head_visual {width: 1200px;}

#mwrap{position:relative; margin: 0; padding:0; bord er: 1px solid red; width: 100%; }


/*메인**/
.mConBox1{width:1200px; margin: auto; height:314px; margin-top:0px; }/*메인비쥬얼,메인메뉴*/
.mConBox2{width:1200px; margin: auto; height:149px; }/*처음 오셨나요,회원이신가요 메뉴*/

.mConBox3{width:1200px; margin: auto;height:493px;}/*써포트포스트샵 추천아이템*/
.mConBox4{width: 1200px; margin: auto; height:386px; position:relative; overflow:hidden;}/*배송대행배너,대행절차,출항일정표*/
.mConBox5{width: 1200px; margin: auto; height:419px; position:relative; overflow:hidden;}/*베스트 이용후기*/
.mConBox6{width: 1200px; margin: auto; height:524px; position:relative; overflow:hidden;}/*추천 카테고리*/
.mConBox7{width: 1200px; margin: auto; height:310px; margin-top: 15px; margin-bottom: 20px; position:relative; overflow:hidden;}/*cs베너, 환율,서비스 아이콘,공지사항*/

#mCon {b order: 1px solid blue;position: relative;}
#Con {bo rder: 1px solid green; text-align: center; }
#mBg {width: 100%; background-image: url(../../image/common/bg_01.png); bor der: 1px solid red; margin:;}
#proBg {width: 100%; background-image: url(../../image/common/pro_bg01.png); bor der: 1px solid red; margin:;}
#cateBg {width: 100%; background-image: url(../../image/common/cate_bg01.png); bor der: 1px solid red; margin:;}
/*슬라이드*/
.m_banner{float:left; width:708px; height:291px;}
.m_banner .bx-wrapper{display:inline-block;float:left;}
.m_banner .bx-controls{position:relative;}
.m_banner .bx-controls .bx-pager{overflow:hidden; position:absolute; top:-19px; left:70%;}
.m_banner .bx-controls .bx-pager .bx-pager-item{float:left; margin:0px 3px;}
.m_banner .bx-controls .bx-pager a {display:block; width:15px; height:15px; text-indent: -9999px; background-color:#333; border-radius:10px;}
.m_banner .bx-controls .bx-pager a.active{background-color:#fff;}

/*메인메뉴*/
.m_Amenu{display: block;}
.m-menu1{float:right; width:492px;}
.m-menu1 ul li{float:left; width:164px;}
.m-menu1 ul li img {margin-top:40px;}
.m-menu1 ul li a{display:block;width:164px; height:164px;}
.m-menu1 ul li a:hover img{background-color:#4e4e4e}
.m-menu2{float:right; width:492px;}
.m-menu2 ul li{float:left; width:164px;}
.m-menu2 ul li img {margin-top:30px;}
.m-menu2 ul li a{display:block;width:164px; height:127px;}
.m-menu2 ul li a:hover img{background-color:}


.m-menu1 ul li a.bg1{background:url(../../image/common/menubg1.png) center 72px #01c9e3 no-repeat}
.m-menu1 ul li a.bg2{background:url(../../image/common/menubg2.png) center 72px #1686d0 no-repeat}
.m-menu1 ul li a.bg3{background:url(../../image/common/menubg3.png) center 72px #255ac9 no-repeat}
.m-menu2 ul li a.bg4{background:url(../../image/common/menubg4.png) center 72px #ffc25f no-repeat}
.m-menu2 ul li a.bg5{background:url(../../image/common/menubg5.png) center 72px #ef8a73 no-repeat}
.m-menu2 ul li a.bg6{background:url(../../image/common/menubg6.png) center 72px #a26cc9 no-repeat}
.m-menu1 ul li a:hover{background-color:#4e4e4e}
.m-menu2 ul li a:hover{background-color:#4e4e4e}


/*처음,회원이신가요*/
.mConBox2 .con-left{float:left; width:50%; height:132px; background:#fff;position:relative}
.mConBox2 .con-right{float:right; width:50%; height:132px; background:#fff;position:relative}
.mConBox2 .title{position:absolute; top:0px; left:0px;}
.mConBox2 ul{position:absolute; top:30px; right:25px; }
.mConBox2 ul li{float:left; width:85px}
.mConBox2 ul li a{display:block; width:85px ;text-align:center; color:#444; line-height:1.2em;font-size:13px; }
.mConBox2 ul li a img{padding-bottom:11px;display:block; width:69px; margin:0 auto;}
.mConBox2 ul li a:hover {position:Relative; text-align:center;color:#33adff;}
.mConBox2 ul li a:hover img{position:Relative; top:-5px;}

/*써포트포스트샵 추천아이템*/

.pro-area{position:absolute; top;0; text-align: center; bor der: 1px solid red;}
.pro-area .title{padding-top:39px; padding-bottom: 46px;}
.pro-area .pro-box{position: relative; display: inline-block; width: 1200px; margin: 0; padding: 0; bor der: 1px solid #666;}
.pro-area .pro-box .plus-view{position: absolute; right: 30px; top:-30px; z-index:1;}
.pro-area .pro-box .btn-right{position:absolute; left:0; top:40%; z-index:1; }
.pro-area .pro-box .btn-right img { opacity: 0.5; filter: alpha(opacity=80); /* For IE8 and earlier */}
.pro-area .pro-box .btn-right img:hover {position:Relative; opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */}
.pro-area .pro-box .btn-left{position:absolute; right:0; top:40%; z-index:1; }
.pro-area .pro-box .btn-left img { opacity: 0.5; filter: alpha(opacity=80); /* For IE8 and earlier */}
.pro-area .pro-box .btn-left img:hover {position:Relative; opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */}
.pro-area ul {list-style-type:none; margin: 0; padding: 0;}
.pro-area ul li{display: inline-block; border:1px solid #e3e3e3; margin:0px; padding:0; background-color: #fff;}
.pro-area ul li img{margin-bottom:0px;}
.pro-area ul li p{text-align:center; padding-top:24px; padding-bottom:5px; text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%; }
.pro-area ul li span{display:block; text-align:center; font-size:12px; padding-bottom:22px;}
.pro-area ul li strong{display:inline; font-size:13px; color: red;}


/*배송대행 배너이미지*/
.post_area {margin-top:39px; width: 890px; display: block;}
/*배송대행 배너이미지*/
.service_box {width:888px; height: 211px; border:1px solid #d2d2d2; backg round-color: #fff;}
.service_box ul {list-style-type:none;}
.service_box ul li {display: inline-block; padding:13px 0 0 10px; position: relative; bor der:1px solid #d2d2d2;}
.service_box ul li span{height: 70px; display:block; text-align:left; font-size:13px; color: #666; padding-top:8px}
.service_box ul li span .view01{position: absolute; right:10px; bottom: 10px;}
.service_box ul li span .view02{position: absolute; right:10px; bottom: 10px;}
.service_box ul li span .view03{position: absolute; right:10px; bottom: 10px;}
.service_box ul li span strong a{font-size:13px; color:#999;}
.service_box ul li span strong a:hover {font-size:13px; color: #fd9300;}


/*대행절차*/
.step_box_area{width:890px; height:136px;}
.step_box_area .menu_tab{height:35px;}
.step_box_area .menu_tab ul{}
.step_box_area .menu_tab ul li{float:left; width:50%; line-height:35px; text-align:center}
.step_box_area .menu_tab ul li.fst{box-sizing:border-box}
.step_box_area .menu_tab ul li a{font-size:14px; font-weight: bold; display:block; background:#e9e9e9; color:#666;}
.step_box_area .menu_tab ul li.active a{background:#dcdcdc; color:#666;}
.step_box_area .mTs {height:101px; background:#dcdcdc;}


/*출항 한주 스케쥴*/
.schedule_area {position:absolute; right: 0; top: 0px; margin-top:39px; width:294px; height: 347px; text-align: center; background-color:#e1e0de;}
.schedule_area .title img {margin: 17px 0 7px 34px;}
.schedule_area .schedule_box { width: 230px; margin-top:10px;  margin-left:32px;}
.schedule_area .schedule_box ul {display: block;}
.schedule_area .schedule_box ul li {border-bottom: 1px solid #dcdcdc; padding: 6px 0px 6px 0px; background-color: #fff}
.schedule_area .schedule_box ul li strong {padding-left: 10px;}
.schedule_area .schedule_box ul li strong.on{ color: red;}
.schedule_area .slink01 {position: absolute; bottom:13px; left:30px; height:23px;padding-left:10px;background:#f37e00; border-radius:3px;fl oat:left;height:23px;line-height:23px;padding:0px 5px 0 5px;color:#fff;text-align:center;cursor:pointer; font-weight:bold;font-size:12px;}
.schedule_area .slink02 {position: absolute; bottom:13px; right:30px;height:23px;padding-left:10px;background:#525252; border-radius:3px;fl oat:left;height:23px;line-height:23px;padding:0px 5px 0 5px;color:#fff;text-align:center;cursor:pointer; font-weight:bold;font-size:12px;}
.schedule_area .slink01 a {color:#fff}
.schedule_area .slink02 a {color:#fff}



/*이용후기*/
.reveiw_area{float:left; width:1200px; background:#fff; b order: 1px solid red;}
.reveiw_area .title{padding-top:39px; padding-bottom: 35px; text-align:center;}
.reveiw_area ul{}
.reveiw_area ul li{text-align:center; width:259px; height: 254px; float:left;border:1px solid #e9e9e9; margin-left:26px;}
.reveiw_area ul li span{margin-top:15px; font-size: 14px; display: block;}
.reveiw_area ul li .re_id {margin-top:15px; font-size: 14px; color: #666; font-weight: bold;}
.reveiw_area ul li .re_st {margin-top:8px; font-size: 12px; overflow:hidden; text-overflow:ellipsis;white-space:nowrap; display:inline-block; width:90%;}



/*카테고리*/
.category-area{width:1198px; height:524px; position: relative; bord er:1px solid #333; text-align: center;}
.category-area .title{padding-top:30px; height:35px;  font-size:20px;font-weight:bold}
.category-area .cate-tab{float:left; width:375px;margin-left:30px;margin-right:6px;}
.category-area .cate-tab ul{ border-left:1px solid #dee5e6;border-top:1px solid #dee5e6;}
.category-area .cate-tab ul li{float:left; width:50%; height:68px; box-sizing:border-box; border:1px solid #dee5e6; border-left:0px; border-top:0px; }
.category-area .cate-tab ul li a{display:block; height:67px; background:#fff; padding-left:76px; line-height:67px;position:relative;text-align:left}
.category-area .cate-tab ul li a img{position:absolute; top:15px; left:25px}
.category-area .cate-tab ul li.active a{background:#f8f4c2}
.category-area .cate-list{width:757px;float:left;  }
.category-area .cate-list .list-area{width:50%;float:left; }
.category-area .cate-list .list-area .list-t{height:43px; line-height:43px; color:#fff;text-align:center;font-size:16px; }
.category-area .cate-list .list-area .list-t.bg1{background:#f4791c}
.category-area .cate-list .list-area .list-t.bg2{background:#c63e02}
.category-area .cate-list .list-area ul{width:50%;height:366px;border:1px solid #dee5e6;float:left; box-sizing:border-box; background:#fff; overflow:hidden; padding:15px 19px; border-right:0px;}
.category-area .cate-list .list-area ul li{height:20px; text-align:left}
.category-area .cate-list .list-area ul li strong{display:block; }
.category-area .cate-list .list-area ul li strong.color1{color:#e87c2b}
.category-area .cate-list .list-area ul li strong.color2{color:#cd582c}
.category-area .cate-list .list-area ul li a{font-size:12px}
.category-area .cate-list .list-area ul li a:hover{text-decoration:underline}

/* 고객관리 메뉴 */

.cs_area {width: 1200px; position: relative;}
.cs_area ul {}
.cs_area ul li {float: left;}

/*CS배너 이미지*/
.banner_box {width: 408px; display:block; bor der: 0px solid red; margin-right:10px;}
.banner_box ul {}
.banner_box ul li {width: 400px; border: 2px solid #e9e9e9; margin-bottom: 5px;}

/*cs icon*/
.icon_box {width: 308px; bo rder: 1px solid blue;}
.icon_box ul {display: block;}
.icon_box ul li {}

/*환율*/
.icon_box .money-ex{height:96px; border-bottom:solid 1px #e9e9e9;}
.icon_box .money-ex .ex-box{width:50%;height:96px; display: inline-block;}
.icon_box .money-ex .ex-box.fl{border-right:solid 1px #dee5e6;box-sizing:border-box}
.icon_box .money-ex .ex-box .title{text-align:center;font-size:14px; padding-top:24px; height:25px;}
.icon_box .money-ex .ex-box p{text-align:center; font-size:12px;}
.icon_box .money-ex .ex-box p strong{font-family: verdana !important; font-size:18px;position:relative; top:2px}
.icon_box .money-ex .ex-box p img{position:Relative;top:2px; padding-right:5px}

.icon_box .cs_icon {display:block;}
.icon_box .cs_icon ul li {width: 70px; height: 80px; padding:15px 2px 2px 2px;  color: #666; font-size:11px}
.icon_box .cs_icon .icon_01 {}
.icon_box .cs_icon .icon_01 li {float: left; text-align:center}
.icon_box .cs_icon .icon_01 li:nth-child(6) img{position:relative; top:5px;} 



/*공지사항*/
.cs_box {width: 453px; height: 287px; background:#fff; pading:10px; border: 1px solid #e9e9e9; position: relative;}
.cs_box .title img {margin-top:20px; margin-left:150px; bo rder: 1px solid blue;}
.cs_box .notice_area {margin-top: 30px; margin-left:23px; width: 400px; display: block; text-align: left; bor der: 1px solid #e9e9e9;}
.cs_box .notice_area .nolist{height:150px; overflow:hidden; display: block; margin-bottom:10px; }
.cs_box .notice_area .nolist p {font-size: 14px; color: #666; padding:5px ;b order-bottom: 1px solid #e9e9e9;}
.cs_box .notice_area .nolist a{overflow:hidden; text-overflow:ellipsis;white-space:nowrap; display:inline-block; max-width:85%; }
.cs_box .notice_area .nolist strong{position:Relative; top:-3px}

.cs_box .notice_area .cs-btn {margin-top: 10px;}
.cs_box .notice_area .cs-btn a{display:inline-block; width:123px; height:30px; line-height:30px;text-align:center; font-size:14px; color:#fff; margin:0px 5px; background:#e4bd48}
.cs_box .notice_area .cs-btn a:hover{background:#e9e9e9; color:#999; font-weight:bold}


/*2020-09-17*/
.m-btn{width:270px;float:left;}
.m-btn ul li{height:73px; width:100%;}
.m-btn ul li:nth-child(4){height:72px;}
.m-btn ul li a{display:block; height:100%; text-align:left;padding-left:86px; line-height:73px; font-weight:bold; font-size:18px;position:Relative; color:#fff}
.m-btn ul li:nth-child(4) a{line-height:72px;}
.m-btn ul li a img{position:absolute; left:22px; top:13px;}
.m-btn ul li a:after{content:'>'; font-weight:100;margin-left:8px; font-size:15px}
.m-btn ul li a:hover span{display:none}
.m-btn ul li a:hover:after{display:none}
.m-btn ul li.bg1 a{background:#01c9e3}
.m-btn ul li.bg2 a{background:#1686d0}
.m-btn ul li.bg3 a{background:#255ac9}
.m-btn ul li.bg4 a{background:#a26cc9}
.m-btn ul li.bg1 a:hover{background:#626262}
.m-btn ul li.bg2 a:hover{background:#6f6f6f}
.m-btn ul li.bg3 a:hover{background:#848484}
.m-btn ul li.bg4 a:hover{background:#9a9a9a}
.m-btn ul li a p{color:#fff; position:absolute; top:18px; left:86px; line-height:18px;display:none; font-weight:100}
.m-btn ul li a:hover p{display:block}

.main-login{width:220px; height:290px; float:left; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; background:#fff; padding:10px; box-sizing:border-box}
.logout {text-align:left}
.logout .con1{font-size:14px;font-weight:bold; padding-top:10px; padding-bottom:10px; border-bottom:1px solid #b3b3b3;}
.logout .con1 strong{font-size:18px;}
.logout .con1 p{padding-top:5px;}
.logout .con1 .fc_red{color:red}
.logout .con2{text-align:Center; margin-top:5px;}
.logout .con2 a{font-size:12px;}
.logout .con2 a:after{content:"|"; padding:0px 10px;}
.logout .con2 a:last-child:after{display:none}
.logout .con3{margin-top:8px;}
.logout .con3 img{}
.logout .con4 ul{padding-top:8px; overflow:hidden;}
.logout .con4 ul li{float:left; width:63px; margin-right:3px;}
.logout .con4 ul li:last-child{margin-right:0;}
.logout .con4 ul li a{display:block; border:1px solid #e7e7e7; text-align:center; padding:14px 0;}
.logout .con4 ul li a img{}
.logout .con4 ul li a p{font-size:12px; margin-top:10px;}

.login-box{}
.login-box .title{height:26px; margin-bottom:19px; text-align:Center; font-weight:Bold; color:#4eb8ff}
.login-box .title strong{position:Relative; top:10px}
.login-box .title span{color:#333}
.login-box .login-form .id{width:195px; height:28px; border:1px solid #dbdbdb}
.login-box .login-form  .password{width:195px; height:28px; border:1px solid #dbdbdb; border-top:0px;}
.login-box .login-form  .id input,.login-box .login-form  .password input{width:100%; height:28px; border:0px;line-height:28px;padding-left:10px;box-sizing:border-box; font-size:13px; }
.login-box .login-form  .login_btn{margin-top:8px;}
.login-box .login-form  .login_btn a{display:Block; border-radius:5px; background:#33adff; height:40px; color:#fff; text-align:center; line-height:40px;font-size:16px}
.login-box .id-save{padding-top:10px;font-size:12px;}
.login-box .id-save input{position:Relative; top:2px;}
.login-box .login_link{padding-top:13px;}
.login-box .login_link a{font-size:12px;}
.login-box .login_link a:after{content:"|"; padding:0px 10px;}
.login-box .login_link a:last-child:after{display:none}
.login-box .naver_login{padding-top:17px;}
.login-box .naver_login a{border:2px solid #00be18;display:Block; border-radius:5px; text-align:center; line-height:40px; color:#898989; font-weight:bold;font-size:14px}
.login-box .naver_login a span{color:#00be18}
.login-box .naver_login a img{position:relative; top:7px;padding-right:7px;}