@charset "utf-8";

/*******************************************
	Scroll Control Style
*******************************************/

body.stateOpenMymenu {overflow:hidden;}
body.stateOpenMymenu #headerWrap:before {content:""; display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:11; background:rgba(0,0,0,.6);}


/*******************************************
	Default Layout
*******************************************/

#mymenuWrap {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999;}
#mymenuWrap .mymenuArea {display:block; position:absolute; top:50%; left:50%; width:1560px; height:800px; margin:-400px 0 0 -780px; background:url(../img/mymenu/bak_popup.png) no-repeat 0 100% #118FE3; border-radius:1em;}
#mymenuWrap .mymenuSection {display:none; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;}
#mymenuWrap .mymenuSection.active {display:block;}

#mymenuWrap #closeMymenu {display:block; position:absolute; top:0; right:0; margin:1.1em -1.9em 0 0; width:4.7em; height:4.7em; background:url(../img/mymenu/btn_pop_close.svg) no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden; border:none;}

#mymenuWrap .topArea {position:absolute; top:0; left:0; bottom:0; width:21em; z-index:1;}
#mymenuWrap .topArea .deco-logo {display:block; position:relative; margin:0 auto 2em; width:5.9em; height:2em; background:url(../img/mymenu/img_login.svg) no-repeat 50% 50%; background-size:auto 100%; text-indent:-999px; overflow:hidden;}
#mymenuWrap .topArea .deco .obj {display:block; position:absolute; z-index:-1; background:no-repeat 50% 50%; background-size:auto 100%;}
#mymenuWrap .topArea .deco .obj.ty1 {left:0; right:0; bottom:0; height:11.8em; background-image:url(../img/mymenu/img_top_obj1.png);}
#mymenuWrap .topArea .deco .obj.ty2 {left:-2.6em; bottom:.8em; width:7em; height:7em; background-image:url(../img/mymenu/img_top_obj2.png);}
#mymenuWrap .topArea .deco .obj.ty3 {right:-2.15em; bottom:3.5em; width:7em; height:7em; background-image:url(../img/mymenu/img_top_obj3.png);}

#mymenuWrap .pannel {position:absolute; top:3em; left:21em; bottom:0; right:0; padding:2.75em 3.5em; border-radius:3em 0 1em 0; box-shadow:.5em .5em 2.5em 0 rgba(0,0,0,.18); background:#F8FAFC; z-index:0;}
#mymenuWrap .pannel > .in {display:block; position:relative; min-height:100%;}

#mymenuWrap .guideBox {display:table; width:100%; table-layout:fixed; margin-bottom:1.75em;}
#mymenuWrap .guideBox > * {display:table-cell; vertical-align:middle; position:relative;}
#mymenuWrap .guideBox .tit {width:7.3em; font-size:1.8em; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; color:#222;}
#mymenuWrap .guideBox .tit:before {content:""; display:inline-block; vertical-align:middle; width:.944445em; height:.944445em; margin-right:.3em; background:url(../img/mymenu/ico_gear.svg) no-repeat 50% 50% #005CB9; background-size:contain; border-radius:100%; overflow:hidden;}
#mymenuWrap .guideBox .desc {color:#4D545B; font-size:.9em; line-height:1.5em; word-break:keep-all;}

@media all and (max-width:1600px) {
	#mymenuWrap .mymenuArea {left:20px; right:20px; width:auto; margin-left:0;}	
}
@media all and (max-width:1500px) {
	#mymenuWrap .topArea {width:17em;}
	#mymenuWrap .pannel {left:17em;}
}

@media all and (max-width:1024px) {
	#mymenuWrap {padding:2em 1em; overflow:auto;}
	#mymenuWrap #closeMymenu {margin:-1.25em -1em 0 0;}
	#mymenuWrap .mymenuArea {position:relative; top:auto; left:auto; right:auto; margin:0 auto; width:580px; max-width:100%; min-width:300px; height:auto; background:url(../img/mymenu/bak_popup_mo.png) no-repeat 50% 0 #118FE3;}
	#mymenuWrap .mymenuSection,
	#mymenuWrap .pannel,
	#mymenuWrap .topArea {position:relative; width:auto; top:auto; left:auto; right:auto; bottom:auto;}
	#mymenuWrap .pannel {border-radius:1em;}
	#mymenuWrap .topArea .deco .obj.ty1 {display:none;}
	#mymenuWrap .topArea .deco .obj.ty2 {left:-.6em; bottom:1.85em; width:6.3em; height:6.3em;}
	#mymenuWrap .topArea .deco .obj.ty3 {right:.45em; bottom:7.85em; width:6.3em; height:6.3em;}
	
	#mymenuWrap .guideBox,
	#mymenuWrap .guideBox > * {display:block; text-align:center;}
	#mymenuWrap .guideBox .tit {width:auto;}
	#mymenuWrap .guideBox .desc {margin-top:1em;}
}
@media all and (max-width:550px) {
	#mymenuWrap {font-size:.9em;}
}
@media all and (max-width:410px) {
	#mymenuWrap .topArea .deco {display:none;}
	#mymenuWrap .guideBox .desc br {display:none !important;}
}


/*******************************************
	Default Layout
*******************************************/

#mymenuIntro .topArea {padding-top:4.1em;}
#mymenuIntro .topArea .deco-logo {display:block; position:relative; margin:0 auto 2em; width:5.9em; height:2em; background:url(../img/mymenu/img_login.svg) no-repeat 50% 50%; background-size:auto 100%; text-indent:-999px; overflow:hidden;}
#mymenuIntro .topArea .tit {display:block; position:relative; height:7.25em; background:url(../img/mymenu/txt_intro_title.svg) no-repeat 50% 50%; background-size:auto 100%; text-indent:-999px; overflow:hidden;}
#mymenuIntro .topArea .link {display:block; position:relative; padding-top:5.4em;}
#mymenuIntro .topArea .link:before {content:""; display:block; position:absolute; width:1px; height:3em; background:rgba(255,255,255,.25); top:1em; left:50%;}
#mymenuIntro .topArea .link > * {display:block; position:relative; margin:0 auto; width:15em; height:3.25em; border-radius:9em; background:url(../img/mymenu/ico_intro_tab.svg) no-repeat top 50% right .8em #005CB9; background-size:1.8em auto; padding:.9em 1.5em;}
#mymenuIntro .topArea .link > * > * {display:block; position:relative; font-size:1em; color:#fff; font-weight:500; line-height:1.5em;}

@media all and (max-width:1024px) {
	#mymenuIntro .topArea {padding-top:1.5em;}
	#mymenuIntro .topArea .deco-logo {margin-bottom:.75em;}
	#mymenuIntro .topArea .link {padding:1.5em 0 1.4em;}
	#mymenuIntro .topArea .link:before {display:none;}
	#mymenuIntro .topArea .link > * {background-image:url(../img/mymenu/ico_intro_tab_down.svg);}
}

#mymenuIntro .mymenuList {display:block; position:relative; border-radius:1em; background:#fff; height:18.5em; padding:2em; margin-bottom:2em;}
#mymenuIntro .mymenuList .control button {display:block; position:absolute; top:50%; margin-top:-1.55em; width:3.1em; height:3.1em; text-indent:-999px; overflow:hidden; border-radius:100%; background:no-repeat 50% 50% #fff; background-size:contain; box-shadow:1em 1em 1.5em 0 rgba(0,0,0,.05);}
#mymenuIntro .mymenuList .control button.prev {left:-1.6em; background-image:url(../img/mymenu/btn_prev.svg);}
#mymenuIntro .mymenuList .control button.next {right:-1.6em; background-image:url(../img/mymenu/btn_next.svg);}
#mymenuIntro .mymenuList .swiper-slide {padding:.6em;}
#mymenuIntro .mymenuList .mnuBox {display:block; position:relative; height:6em;}
#mymenuIntro .mymenuList .mnuBox > * {display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:.5em;}
#mymenuIntro .mymenuList .mnuBox .blank {border:.1em dashed rgba(0,0,0,.15); background:url(../img/mymenu/btn_add.svg) no-repeat 50% 50%; background-size:1.5em auto; text-indent:-999px; overflow:hidden;}
#mymenuIntro .mymenuList .mnuBox .mnu {background:url(../img/mymenu/ico_fav.svg) no-repeat top .7em left 50% #2C2A8B; background-size:1.7em auto; padding:.85em; padding-top:2.75em;}
#mymenuIntro .mymenuList .mnuBox .mnu strong {display:block; position:relative; text-align:center; word-break:break-all; font-size:.9em; line-height:1.3em; height:2.6em; color:#fff; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
#mymenuIntro .mymenuList .mnuBox .del {display:block; position:absolute; top:-.3em; right:-.3em; left:auto; bottom:auto; width:20px; height:20px; text-indent:-999px; overflow:hidden; background:url(../img/mymenu/btn_del.svg) no-repeat 50% 50% #F8FAFC; background-size:contain; border-radius:100%;}

@media all and (max-width:1120px) {
	#mymenuIntro .mymenuList .swiper-slide {padding:.4em;}
}
@media all and (max-width:1024px) {
	#mymenuIntro .pannel {padding:2.6em .75em 1.5em;}
	#mymenuIntro .guideBox {margin-bottom:1em;}
	#mymenuIntro .mymenuList {padding:.5em; height:auto; margin-bottom:1em;}
}


#mymenuIntro .aside {display:block; position:relative; padding-right:5.5em; overflow:hidden;}
#mymenuIntro .aside .setting {display:block; position:absolute; top:0; right:0; width:4.5em; height:4.5em;}
#mymenuIntro .aside .setting > * {display:block; position:relative; width:100%; height:100%; border-radius:.5em; background:#000; padding:.85em 0;}
#mymenuIntro .aside .setting > *:before {content:""; display:block; position:relative; width:1.2em; height:1.2em; margin:0 auto .45em; background:url(../img/mymenu/ico_gear2.svg) no-repeat 50% 50%; background-size:contain;}
#mymenuIntro .aside .setting > * strong {display:block; position:relative; text-align:center; font-size:.9em; color:#fff; font-weight:500; line-height:1.3em;}
#mymenuIntro .aside .links {display:block; position:relative; height:4.5em; border-radius:.5em; background:#005CB9; padding:1.5em 0; text-align:center;}
#mymenuIntro .aside .links > li {display:inline-block;vertical-align:middle;position:relative;padding: 0 1.5em;box-sizing:border-box;}
#mymenuIntro .aside .links > li a {display:block; position:relative; }
#mymenuIntro .aside .links > li a > * {display:inline-block; vertical-align:middle;}
#mymenuIntro .aside .links > li a .icon {width:1.6em; height:1.6em; margin-right:.5em; background:url(../img/mymenu/spr_sidelink_icon.svg) no-repeat 0 0; background-size:auto 1.6em;}
#mymenuIntro .aside .links > li a .icon.ty1 {background-position:0 50%;}
#mymenuIntro .aside .links > li a .icon.ty2 {background-position:-1.6em 50%;}
#mymenuIntro .aside .links > li a .icon.ty3 {background-position:-3.2em 50%;}
#mymenuIntro .aside .links > li a .icon.ty4 {background-position:-4.8em 50%;}
#mymenuIntro .aside .links > li a strong {font-size:.9em; color:#fff;}
#mymenuIntro .aside .links > li:before {content:""; display:block; position:absolute; width:.45em; height:.45em; border-radius:100%; background:rgba(255,255,255,.4); left:0; top:50%; margin:-.225em 0 0 -.225em;}
#mymenuIntro .aside .links > li:first-child:before {display:none;}

@media all and (max-width:1400px) {
	#mymenuIntro .aside .links {padding:1.7em 0;}
	#mymenuIntro .aside .links > li {font-size:.9em;}
	#mymenuIntro .aside {padding-right:6.5em; margin:0 .25em;}
	#mymenuIntro .aside .setting {width:5.75em; height:auto; bottom:0;}
	#mymenuIntro .aside .setting > * {padding:1.5em 0;}
	#mymenuIntro .aside .links {height:6em; padding:1em; text-align:left;}
	#mymenuIntro .aside .links > li {display:block; position:relative; width:50%; float:left; padding:.35em;}
	#mymenuIntro .aside .links > li:nth-child(2n) {padding-left:1em;}
	#mymenuIntro .aside .links > li:nth-child(2n+1):before {display:none;} 
}
@media all and (max-width:1220px) {

}
@media all and (max-width:490px) {
	#mymenuIntro .aside {padding:0;}
	#mymenuIntro .aside .setting {position:relative; width:auto; margin-top:1em; height:auto;}
	#mymenuIntro .aside .setting > * {height:auto; padding:1em 0; text-align:center;}
	#mymenuIntro .aside .setting > *:before,
	#mymenuIntro .aside .setting > * strong {display:inline-block; position:relative; vertical-align:middle;}
	#mymenuIntro .aside .setting > *:before {margin:0 .25em 0 0;}
	#mymenuIntro .aside .setting > * strong {width:auto;}
}
@media all and (max-width:370px) {
	#mymenuIntro .aside .links {height:auto;}
	#mymenuIntro .aside .links > li {width:auto; float:none; padding-left:0 !important; font-size:1em;}
	#mymenuIntro .aside .links > li:before {display:none;}
}


/*******************************************
	Setting Layout
*******************************************/

#mymenuSetting .guideBox .tit {width:9.3em;}
@media all and (max-width:1300px) {
	#mymenuSetting .guideBox {display:Block; width:auto;}
	#mymenuSetting .guideBox > * {display:block; width:auto !important;}
	#mymenuSetting .guideBox .desc {padding-top:.5em;}	
}
@media all and (max-width:1300px) {
	#mymenuSetting .guideBox {margin-bottom:1em;}
}

#mymenuSetting .topArea {padding:4em 2.2em 3em;}
#mymenuSetting .topArea .deco .obj.ty1 {display:none;}
#mymenuSetting .topArea .deco-logo {margin-bottom:1.4em;}
#mymenuSetting .topArea .filter {display:block; position:relative; border-radius:9em; overflow:hidden; background:#005CB9; margin-bottom:1em;}
#mymenuSetting .topArea .filter input[type="text"],
#mymenuSetting .topArea .filter input[type="search"] {display:block; position:relative; border-radius:9em; width:100%; font-size:.9em; color:#fff; height:3.5em; padding:0 3.33em 0 1.8em; border:none; background:transparent;}
#mymenuSetting .topArea .filter input[type="text"]::placeholder,
#mymenuSetting .topArea .filter input[type="search"]::placeholder {color:rgba(255,255,255.6);}
#mymenuSetting .topArea .filter .btn-search {display:block; position:absolute; top:0; right:0; height:100%; width:2.65em; border-radius:0 9em 9em 0; border:none; background:url(../img/mymenu/ico_search.svg) no-repeat top 50% left 0; background-size:1.3em auto; text-indent:-999px; overflow:hidden;}
#mymenuSetting .topArea .allMenulist {display:block; position:absolute; top:11.5em; left:2.2em; right:2.2em; height:25.35em; border-radius:.5em; background:#fff; padding:.85em .95em;}
#mymenuSetting .topArea .allMenulist select {display:block; position:relative; width:100%; font-size:.85em; color:#4D545B; height:2.94em; border-radius:5px; background:url(../img/mymenu/ico_select.svg) no-repeat top 50% right 1em #F2F3F4; background-size:1.17647em auto; padding:0 1.176em; border:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none;}
#mymenuSetting .topArea .allMenulist select::-ms-expand {display:none;}
#mymenuSetting .topArea .listArea {display:block; position:absolute; top:4.4em; left:.9em; right:.9em; bottom:1.1em;}
#mymenuSetting .topArea .listArea .scroll-box {display:block; position:relative; height:100%; overflow:auto;}

#mymenuSetting .topArea .list dt,
#mymenuSetting .topArea .list li {position:relative;}
#mymenuSetting .topArea .list input[type="checkbox"] {position:absolute; top:0; left:0; z-index:-9999; opacity:0;}
#mymenuSetting .topArea .list input[type="checkbox"] + label {display:block; position:relative; padding-left:1.5em;}
#mymenuSetting .topArea .list input[type="checkbox"] + label:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-.5em; width:1em; height:1em; background:url(../img/mymenu/spr_tree.svg) no-repeat -4.5em 50%; background-size:auto 1em}
#mymenuSetting .topArea .list input[type="checkbox"]:checked + label:before {background-position:-3em 50%;}
#mymenuSetting .topArea .list input[type="checkbox"]:focus + label {text-decoration:underline;}
#mymenuSetting .topArea .list input[type="checkbox"] + label strong {display:block; position:relative; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
 


#mymenuSetting .topArea .list .ctrl {display:block; position:absolute; left:0; top:0; font-size:20px; width:1em; height:1em; background:url(../img/mymenu/spr_tree.svg) no-repeat 0 50%; background-size:auto 1em; text-indent:-999px; overflow:hidden;}
#mymenuSetting .topArea .list .ctrl.closeBtn {display:none; background-position:-1.5em 50%;}
#mymenuSetting .topArea .list .state-open > .ctrl.openBtn {display:none;}
#mymenuSetting .topArea .list .state-open > .ctrl.closeBtn {display:block;}

#mymenuSetting .topArea .list > dl {display:block; position:relative;}
#mymenuSetting .topArea .list > dl + dl {margin-top:1.5em;}
#mymenuSetting .topArea .list > dl dt {display:block; position:relative; margin-bottom:.8em;}
#mymenuSetting .topArea .list > dl dt label strong {font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; color:#33383D; font-size:1.2em;}
#mymenuSetting .topArea .list li {display:block; position:relative; padding-left:1.6em;}
#mymenuSetting .topArea .list li + li {margin-top:.5em;}
#mymenuSetting .topArea .list li:before {content:""; display:block; position:absolute; top:0px; bottom:-.5em; left:.5em; width:1px; background:rgba(0,0,0,.1);}
#mymenuSetting .topArea .list li:after {content:""; display:block; position:absolute; left:.5em; top:.5em; width:1em; height:1px; background:rgba(0,0,0,.1);}
#mymenuSetting .topArea .list ul > li:last-child:before {bottom:.5em;}
#mymenuSetting .topArea .list li.has-submenu:after {display:none;}
#mymenuSetting .topArea .list ul > li.has-submenu:last-child:before {display:none;}

#mymenuSetting .topArea .list dd > ul > li > label strong {font-size:.8em; color:#4D545B; line-height:1.25em;}

#mymenuSetting .topArea .list .depth3list {display:none; position:relative; margin:.5em 0; border-radius:.25em; background:#F8FAFC; padding:.7em;}
#mymenuSetting .topArea .list .state-open .depth3list {display:block;}
#mymenuSetting .topArea .list .depth3list li {padding-left:0;}
#mymenuSetting .topArea .list .depth3list li:before,
#mymenuSetting .topArea .list .depth3list li:after {display:none;}
#mymenuSetting .topArea .list .depth3list li label strong {font-size:.75em; color:#4D545B; line-height:1.34em;}


#mymenuSetting .topArea #btn_choice {display:block; position:absolute; top:50%; right:0; margin:-1.55em -1.55em 0 0; width:3.1em; height:3.1em; border-radius:100%; background:url(../img/mymenu/ico_insert.svg) no-repeat 50% 50% #222; background-size:contain; text-indent:-999px; overflow:hidden;}
@media all and (max-width:1024px) {
	#mymenuSetting {background:#118FE3; border-radius:1em;}
	#mymenuSetting .topArea {padding:1.5em 1em 3em;}
	#mymenuSetting .topArea .deco {display:none;}
	#mymenuSetting .topArea .deco-logo {margin-bottom:.5em;}
	#mymenuSetting .topArea .filter {max-width:16.5em; margin:0 auto 1.25em;}
	#mymenuSetting .topArea .allMenulist {position:relative; top:auto; left:auto; right:auto; height:17.5em;}
	
	#mymenuSetting .topArea #btn_choice {top:auto; bottom:0; right:50%; margin-bottom:-.8em; margin-top:0; transform:rotate(90deg); -webkit-transform:rotate(90deg);}
}

#mymenuSetting .mnuSetting {display:block; position:relative; height:22.7em; padding:.25em .7em; border-radius:1em; background:#fff; margin-bottom:1.5em;}
#mymenuSetting .mnuSetting .scroll-box {display:block; position:relative; height:100%; overflow:auto; padding:.5em;}
#mymenuSetting .mnuSetting .list li {display:block; position:relative; border-bottom:.1em dotted rgba(0,0,0,.1);}
#mymenuSetting .mnuSetting .list li .mnuItemBox {display:table; width:100%; height:3em; table-layout:fixed;}
#mymenuSetting .mnuSetting .list li .mnuItemBox > * {display:table-cell; vertical-align:middle; position:relative;}
#mymenuSetting .mnuSetting .list li .mnuItemBox .ctrl {width:1.7em;}
#mymenuSetting .mnuSetting .list li .mnuItemBox .ctrl a {display:block; position:relative; width:1.35em; height:1.35em; text-indent:-999px; overflow:hidden; border-radius:100%; background:url(../img/mymenu/btn_del_list.svg) no-repeat 50% 50% #F8FAFC;}

#mymenuSetting .mnuSetting .list li .mnuItem input[type="checkbox"] {display:none; position:absolute; top:0; left:0; z-index:-999; opacity:0;}
#mymenuSetting .mnuSetting .list li .mnuItem em {display:inline-block; vertical-align:middle; font-size:.75em; width:1.6em; height:1.6em; border-radius:5px; background:#2C2A8B; text-align:center; line-height:1.6em; color:#fff; margin-right:.5em;}
#mymenuSetting .mnuSetting .list li .mnuItem strong {font-size:.85em; line-height:1.6em; color:#4D545B;}
#mymenuSetting .mnuSetting .list li .mnuItem strong span + span:before {content:" > ";}

#mymenuSetting .btnArea {text-align:right;}
#mymenuSetting .btnArea .back,
#mymenuSetting .btnArea .confirm {display:inline-block; vertical-align:middle; line-height:1.2em; border:none; border-radius:10px; font-size:.9em; color:#fff; padding:.75em 1.5em .8em 4em; background:no-repeat top 50% left 1.5em; background-size:1.333334em auto;}
#mymenuSetting .btnArea .back {background-image:url(../img/mymenu/ico_back.svg); background-color:#4E5963;}
#mymenuSetting .btnArea .confirm {background-image:url(../img/mymenu/ico_save.svg); background-color:#2C2A8B;}

@media all and (max-width:1024px) {
	#mymenuSetting .pannel {padding:1.75em .75em;}
	#mymenuSetting .mnuSetting {height:12.5em; padding:1em .75em;}
	#mymenuSetting .mnuSetting .scroll-box {padding-right:0;}
	#mymenuSetting .btnArea {text-align:center;}
}