@import url("../../../comm/css/sub.css");



.new {font-family: 'Outfit', sans-serif; width:18px; height:18px; border-radius:100%; text-align:center; color:#fff; font-weight:bold; display:inline-block; font-size:11px; margin-left:4px; line-height:18px; vertical-align:middle; font-style:normal;}

.header .sitemap {display:none;}
.header {position:fixed; padding:20px; border-bottom:1px solid #ddd; background:#fff; width:100%; top:0; left:0; z-index:9999; box-sizing:border-box;}
.header h1 {position:relative; display:inline-block; z-index:1000;}
.header h1 img {width:155px;}
.header h1 a {display:block; position:relative; z-index:1000;}
.header h1 .svg_logo {position:absolute; top:0; left:0; width:155px; z-index:-1;}

.my_util {font-size:0; position:absolute; right:30px; top:50%; transform:translateY(-50%);}
.my_util p {position:relative; display:inline-block; vertical-align:middle; letter-spacing:-0.6pt; line-height:1; font-size:1rem; color:#777;}
.my_util p::after {content:''; width:1px; height:18px; background:#bcbcbc; position:absolute; top:5px; right:-30px;}
.my_util p b {font-weight:400; color:#222; margin-right:3px; font-size:1rem;}
.my_util ul {font-size:0; display:inline-block; vertical-align:middle; margin-left:60px;}
.my_util ul li {display:inline-block; margin-right:15px; vertical-align:middle;}
.my_util ul li:last-child {margin-right:0;}


.loca_cont {font-size:0; position:fixed; top:26px; left:280px; z-index:9999;}
#wrap.close .loca_cont {left:205px;}
.loca_cont a.home {color:#fff; background:#467fd7; padding:9px 14px; border-radius:20px; line-height:1; font-size:13px; position:relative; top:-1px;}
.loca_cont a {position:relative; display:inline-block; font-size:15px; letter-spacing:-0.7pt; margin-right:40px; line-height:1; vertical-align:middle; font-weight:400;}
.loca_cont a::after {content:''; width:6px; height:9px; background:url('../../../img/mypage/main/loca_arrow.png')no-repeat center; position:absolute; top:4px; right:-24px;}
.loca_cont a.home::after {top:14px;}
.loca_cont a:last-child {margin-right:0;}
.loca_cont a:last-child::after {display:none;}

/* 슬라이드 메뉴 : 모바일 메뉴 */
.noScroll{overflow:hidden;}
#left_menu {position:relative; width:260px;  padding:10px; box-sizing:border-box; background: #fff; float:left; z-index:999;}
#left_menu .left_menu { height:100%; width:100%; box-sizing:border-box;}

#left_menu  .login_cont {display:none;} 
#left_menu .btnMenu_mClose {display:none}
#left_menu .left_menu .list {background-color:#fff; width:100%;}
#left_menu .left_menu .list>li {background:#fff; border-bottom:1px solid #ededed;}
#left_menu .left_menu .list>li>a {position:relative; padding:20px 50px; display:block; color:#222; font-weight:400; letter-spacing:-0.5pt; z-index:10; line-height:1; background-repeat:no-repeat; background-position:top 54% left 13px;}
#left_menu .left_menu .list>li>a::after {content:''; width:13px; height:8px; background:url('../../../img/mypage/main/left_arrow.png'); position:absolute; right:15px; top:50%; transform:translateY(-50%); transition:all 0.2s linear;}
#left_menu .left_menu .list>li.bgColor>a::after {background:url('../../../img/mypage/main/left_arrow_up.png'); transition:all 0.2s linear;}
#left_menu .left_menu .list>li.none_sMenu>a::after {display:none;}

#left_menu .left_menu .list>li>a i {display:block;  font-size:15px; font-weight:400; position:absolute; top:50%; transform:translateY(-50%); right:40px; font-style:normal;}
#left_menu .left_menu .list>li.bgColor>a i {color:#fff !important;}

#left_menu .left_menu .list>li.bgColor {border-radius:5px; overflow:hidden;}
#left_menu .left_menu .list>li.bgColor>a {color:#fff;  transition:all 0.2s linear; }

#left_menu .left_menu .list>li.icon01>a {background-image:url('../../../img/mypage/main/left_icon01.png');}
#left_menu .left_menu .list>li.icon02>a {background-image:url('../../../img/mypage/main/left_icon02.png');}
#left_menu .left_menu .list>li.icon03>a {background-image:url('../../../img/mypage/main/left_icon03.png');}
#left_menu .left_menu .list>li.icon04>a {background-image:url('../../../img/mypage/main/left_icon04.png');}
#left_menu .left_menu .list>li.icon05>a {background-image:url('../../../img/mypage/main/left_icon05.png');}
#left_menu .left_menu .list>li.icon06>a {background-image:url('../../../img/mypage/main/left_icon06.png');}
#left_menu .left_menu .list>li.icon07>a {background-image:url('../../../img/mypage/main/left_icon07.png');}
#left_menu .left_menu .list>li.icon08>a {background-image:url('../../../img/mypage/main/left_icon08.png');}
#left_menu .left_menu .list>li.icon09>a {background-image:url('../../../img/mypage/main/left_icon09.png');}
#left_menu .left_menu .list>li.icon10>a {background-image:url('../../../img/mypage/main/left_icon10.png');}
		#left_menu .left_menu .list>li.icon01.bgColor>a {background-image:url('../../../img/mypage/main/left_icon01_up.png');}
		#left_menu .left_menu .list>li.icon02.bgColor>a {background-image:url('../../../img/mypage/main/left_icon02_up.png');}
		#left_menu .left_menu .list>li.icon03.bgColor>a {background-image:url('../../../img/mypage/main/left_icon03_up.png');}
		#left_menu .left_menu .list>li.icon04.bgColor>a {background-image:url('../../../img/mypage/main/left_icon04_up.png');}
		#left_menu .left_menu .list>li.icon05.bgColor>a {background-image:url('../../../img/mypage/main/left_icon05_up.png');}
		#left_menu .left_menu .list>li.icon06.bgColor>a {background-image:url('../../../img/mypage/main/left_icon06_up.png');}
		#left_menu .left_menu .list>li.icon07.bgColor>a {background-image:url('../../../img/mypage/main/left_icon07_up.png');}
		#left_menu .left_menu .list>li.icon08.bgColor>a {background-image:url('../../../img/mypage/main/left_icon08_up.png');}
		#left_menu .left_menu .list>li.icon09.bgColor>a {background-image:url('../../../img/mypage/main/left_icon09_up.png');}
		#left_menu .left_menu .list>li.icon10.bgColor>a {background-image:url('../../../img/mypage/main/left_icon10_up.png');}

#left_menu .left_menu .list .sMenu {position: relative;  padding:18px 20px; display:none;}
#left_menu .left_menu .list .sMenu>li {margin:0 0 10px;}
#left_menu .left_menu .list .sMenu>li:last-child {margin:0;}
#left_menu .left_menu .list .sMenu>li>a {display:block; line-height:1.2; font-size:15px; letter-spacing:-0.6pt; font-weight:400;}

.mask_popup {position:fixed; height:100%; width:100%; left:0; top:0; z-index:99; background-color:rgba(34,34,34,0.7); transition:all 0.3s ease-in-out; cursor:pointer; opacity:0; visibility:hidden;}
.mask_popup.view {opacity:1; visibility:visible; transition:all 0.3s ease-in-out;}
/* 슬라이드 메뉴 : 모바일 메뉴 */


#contWrap {overflow:hidden; padding-top:80px;}
#contents {position:relative; width:calc(100% - 260px); padding:20px !important; box-sizing:border-box; margin-left:260px; background:#eceff4; height:100%; min-height:1009px;}
#contents .tab_button {display:block; width:20px; height:35px; border-radius:0 5px 5px 0; border:1px solid #dddddd; border-left:0; background:#fff url('../../../micro/img/tab_Arrow_left.png')no-repeat center; position:absolute; top:25px; left:0; z-index:999;}
#contWrap.close {}
#contWrap.close #left_menu {display:none;}
#contWrap.close #contents .tab_button {background:#fff url('../../../micro/img/tab_Arrow.png')no-repeat center left 3px;}
#contWrap.close #contents {width:100%; margin-left:0;}



/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


}
/*******************************************************************************
	@media ~1100px
*******************************************************************************/
@media all and (max-width:1100px) { 


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.header {padding:15px;}
.header h1 img {width:130px;}
.header h1 .svg_logo {width:130px;}

.my_util {right:15px;}
.my_util p::after {right:-15px; height:15px;}
.my_util p b {font-weight:400; color:#222; margin-right:3px; font-size:1rem;}
.my_util ul {margin-left:30px;}
.my_util ul li {margin-right:10px;}
.my_util ul li img {max-width:20px; max-height:20px;}


.loca_cont {top:17px; left:250px;}
.loca_cont a.home {padding:7px 12px; font-size:13px; top:0px;}
.loca_cont a.home::after {top:10px;}
.loca_cont a {margin-right:25px;}
.loca_cont a::after {right:-17px; top:4px;}


#left_menu {width:225px;}
#left_menu .left_menu .list>li>a {padding:15px 50px; background-position:top 54% left 10px; font-size:14px;}
#left_menu .left_menu .list .sMenu {padding:15px;}
#left_menu .left_menu .list .sMenu>li {margin:0 0 7px;}
#left_menu .left_menu .list .sMenu>li>a {font-size:13px;}

#contents {width:calc(100% - 225px);margin-left:225px; }

#contWrap {padding-top:65px;}



}
/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) { 

#wrap.close .loca_cont {left:160px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.loca_cont a {font-size:1rem;}


.header {position:relative; padding:12px 10px; z-index:99;}
.header h1 img {width:100px;}
.header h1 .svg_logo {width:100px;}


.header .sitemap {display:block; position:absolute; right:15px; top:17px;}
.header .sitemap img {width:18px;}

.my_util {right:15px; display:none;}
/* .my_util p::after {right:-10px; height:10px;}
.my_util p b {font-weight:400; color:#222; margin-right:3px; font-size:1rem;}
.my_util ul {margin-left:20px;}
.my_util ul li {margin-right:10px;}
.my_util ul li img {max-width:18px; max-height:18px;}
 */

.loca_cont {position:absolute !important; left:120px !important;  z-index:99; top:13px; /* position:absolute !important; top:69px !important; left:15px !important; z-index:9 !important; */}
.loca_cont a {display:none;}
.loca_cont a.home {display:block; font-size:12px; padding:6px 10px;}
.loca_cont a::after {display:none;}
/* .loca_cont a {margin-right:25px;}
.loca_cont a::after {right:-17px; top:3px;} */


#left_menu {position:fixed; top:50px; left:0; float:none; height:100%;width:225px; display:none; z-index:999; border-right:1px solid #ddd;}
#left_menu .left_menu {overflow-y:auto;}
#left_menu .left_menu .list>li>a {padding:15px 50px; background-position:top 54% left 10px; font-size:14px;}
#left_menu .left_menu .list>li>a::after {width:10px; right:10px; background-size:100% !important; background-repeat:no-repeat !important; background-position:center !important;}
#left_menu .left_menu .list>li>a i {font-size:1rem; right:30px;}
#left_menu .left_menu .list .sMenu {padding:15px;}
#left_menu .left_menu .list .sMenu>li {margin:0 0 7px;}
#left_menu .left_menu .list .sMenu>li>a {font-size:13px; background-size:15px;}


#contents {width:100%; margin-left:0; min-height:auto;}

#contWrap {padding-top:65px;}



#contWrap {padding-top:0;}
#contWrap #contents .tab_button {display:none !important;/* position:fixed; left:0;  top:70px; background:#fff url('../../../micro/img/tab_Arrow.png')no-repeat center left 2px; */}

#contents {padding:15px !important;}
#contWrap #left_menu {left:auto; z-index:999999; top:0; width:300px; padding:0; display:block; right:-300px; transition:all 0.5s;}
#contWrap #left_menu.view {right:0; transition:all 0.5s;}

#left_menu  h2 {position:relative; padding:27px 25px; box-sizing:border-box; overflow:hidden; font-size:15px; color:#222; font-weight:400; letter-spacing:-0.5pt;}
#left_menu  h2 img {width:15px; margin-right:10px;}
#left_menu .btnMenu_mClose {display:none; padding:0; margin:0; position:absolute; top:25px; left:-40px; background:none; border:none; z-index:99999999999 !important; cursor:pointer;}
#left_menu .btnMenu_mClose img {width:20px;}
#contWrap #left_menu.view .btnMenu_mClose {display:block;}

#left_menu  .login_cont {display:block;}
#left_menu  .mem_list {font-size:0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
#left_menu  .mem_list li {display:inline-block; position:relative; width:50%; border-right:1px solid #ddd; box-sizing:border-box;}
#left_menu  .mem_list li:last-child {border-right:0;}
#left_menu  .mem_list li a {font-size:13px; letter-spacing:-0.5pt; line-height:35px; font-weight:400; background:#f5f5f5; display:block; text-align:left; background-repeat:no-repeat; box-sizing:border-box;}


#left_menu  .mem_list li.login a {background-image:url('../../../img/main/m_login.png'); background-position:center left 37px; background-size:12px; padding-left:60px;}
#left_menu  .mem_list li.join a {background-image:url('../../../img/main/m_join.png'); background-position:center left 35px; background-size:12px; padding-left:55px;}
#left_menu  .mem_list li.cart a {background-image:url('../../../img/main/m_cart.png'); background-position:center left 32px; background-size:14px; padding-left:55px;}
#left_menu  .mem_list li.logout a {background-image:url('../../../img/main/m_logout.png'); background-position:center left 35px; background-size:11px; padding-left:55px;}

#left_menu .left_menu .list {padding:15px; box-sizing:border-box;}

/* #contWrap.close #left_menu {display:block;}
#contWrap.close #contents .tab_button {left:225px; background:#fff url('../../../micro/img/tab_Arrow_left.png')no-repeat center; } */

/* #contWrap.close #contents {width:calc(100% - 225px);  margin-left:225px; } */


}
/*******************************************************************************
	@media 361~480px
*******************************************************************************/
@media all and (max-width:480px) { 

}
/*******************************************************************************
	@media ~360px
*******************************************************************************/
@media all and (max-width:360px) { 

}