@charset "utf-8";
/* CSS Document */
#container.mypage .wrap{ padding-top:104px}
#container.mypage .list_type_E li{ border-bottom:1px solid #eee; border-top:0;}

#footer.mypage ul{ text-align:center}
#footer.mypage li{ display:inline;height:42px; font-size:13px; line-height:13px}
#footer.mypage li a{display:inline-block; height:28px; padding-top:14px}
#footer.mypage li a span{padding:0 18px; border-right:1px solid #f2f2f2}
#footer.mypage li:last-child a span{border-right:none}


#header.emph .header_view{ position:relative;}
#header.emph .header_view .view_portfolio { position:absolute; right:10px; top:10px;
    padding:0 10px 0 33px;
    display:block;
    line-height:30px;
    height:30px;
	color:#fff;
	border:1px solid #f8c2bf;
    border-radius:3px;
    background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_portfolio_w.png) no-repeat;
    background-position: 7px 5px;
	background-size:20px auto; 

}

#header .view_portfolio+.viewtitle{ text-align:left; margin-left:50px}



/* 메시지 */
#mypage_message{ position:relative; background:#fff; border-top:1px solid #e5e5e5; /*border-bottom:1px solid #dcdcdc;*/ overflow:hidden; margin-bottom:8px}
#mypage_message .util{ position:absolute; top:9px; right:16px;}
#mypage_message .util input{ padding:0 10px; margin:0 0 0 4px; height:34px; background:#fff; border:1px solid #e5e5e5; border-radius:3px; font-size:14px; cursor:pointer;}
#mypage_message ul li{ position:relative; padding:16px; border-bottom:1px solid #eee;}
#mypage_message .read{ }
#mypage_message .read .icon{position:absolute; top:50%; left:16px; width:27px; height:27px; margin-top:-13px;  text-indent:-9999em;}
#mypage_message .read .icon.off{background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_message.png) 0 0 no-repeat; background-size:27px;}
#mypage_message .read .icon.on{background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_message.png) 0 -27px no-repeat; background-size:27px;}
#mypage_message .name{position:absolute; top:16px; left:59px; font-size:13px; color: #999;}
#mypage_message .date{position:absolute; top:16px; right:16px; font-size:13px; color: #999;}
#mypage_message .message{ padding:23px 50px 0 43px;}
#mypage_message .check{position:absolute; bottom:16px; right:16px; width:18px; height:18px;}
.check .chk{ display:none; width:18px; height:18px;}
.check label{ position:absolute; top:0; display:block; width:18px; height:18px;background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_check_off.png) 0 0 no-repeat; cursor:pointer; background-size:18px; text-indent:-9999em; }
.check input:checked + label{background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_check_on.png) no-repeat;  background-size:18px;}

/* 프로필 */
#mypage_profile .profile, #mypage_profile .group{ position:relative; background:#fff; border-top:1px solid #e5e5e5; border-bottom:1px solid #dcdcdc; margin-bottom:8px}
#mypage_profile .index{ position:relative; background:#fff; border-top:1px solid #e5e5e5; border-bottom:1px solid #dcdcdc;}
#mypage_profile h4{padding:16px 16px 0; font-size:17px; font-weight:normal; color: #222; }
#mypage_profile>.profile>ul, #mypage_profile>.index>ul,#mypage_profile>.group>ul{ margin:16px;}
#mypage_profile>.profile>ul>li, #mypage_profile>.index>ul>li, #mypage_profile>.group>ul>li{ min-width:288px; height:40px; padding:0 12px; line-height:40px; border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; font-size:14px; box-sizing:border-box;}
#mypage_profile>.profile>ul>li:first-child, #mypage_profile>.index>ul>li:first-child, #mypage_profile>.group>ul>li:first-child{ border-top:1px solid #e5e5e5; border-top-left-radius:3px; border-top-right-radius:3px;}
#mypage_profile>.profile>ul>li:last-child, #mypage_profile>.index>ul>li:last-child, #mypage_profile>.group>ul>li:last-child{border-bottom-left-radius:3px; border-bottom-right-radius:3px;}
#mypage_profile>.profile>ul>li strong, #mypage_profile>.index>ul>li strong, #mypage_profile>.group>ul>li strong{ display:inline-block; font-weight:normal;}

.profile{ padding-top:118px; overflow:hidden;}
.profile strong{ width:87px;}
.profile .thumb{ position:absolute; top:20px; left:20px; width:100px; height:100px; background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_member.png) no-repeat; background-size:100px; border-radius:50px; overflow:hidden;}
.profile .thumb img{ width:100%; height:100%;}
.profile .name{ position:absolute; top:34px; left:140px; font-size:24px; color:#222;}
.profile .id{ position:absolute; top:62px; left:140px; font-size:19px; color:#777;}
.profile .birthday{ position:absolute; top:93px; left:140px; padding-left:24px; background:url(//img.dongascience.com/kids2016/mobile/images/mypage/ico_birthday.png) no-repeat; background-size:16px 17px; font-size:14px; color:#777;}
.profile .modify{position:absolute; top:88px; right:16px;}
.profile .modify input{ height:30px; padding:0 8px; line-height:30px; background:#fff; border:1px solid #e83428; border-radius:3px; color:#e83428; cursor:pointer;}

.index strong{ width:128px;}
.index .em{font-weight:bold; color:#b6ce00;}
.index .next{ height:40px; line-height:40px; margin:16px; border:1px solid #e5e5e5; border-radius:3px; text-align:center; color:#777;}
.index .next span{ color: #444;}

.lvl_wrap{ position:relative; display:flex; width:calc(100% - 32px); height:78px; margin-left:16px;overflow:hidden;}
.lvl_wrap .lvl{ flex:1;}
.lvl_wrap .i_lvl, .lvl_wrap .progress, .lvl_wrap label{ display:block; text-align:center;}
.lvl_wrap .i_lvl{ height:51px; text-indent:-9999em; background:none;}
.lvl_wrap .lvl.on .i_lvl{ display:block; background:url(//img.dongascience.com/kids2016/mobile/images/mypage/ico_bubble.png) no-repeat; background-size:32px 350px;}
.lvl_wrap .lvl.on.n1 .i_lvl{ background-position:center 4px;}
.lvl_wrap .lvl.on.n2 .i_lvl{ background-position:center -46px;}
.lvl_wrap .lvl.on.n3 .i_lvl{ background-position:center -96px;}
.lvl_wrap .lvl.on.n4 .i_lvl{ background-position:center -146px;}
.lvl_wrap .lvl.on.n5 .i_lvl{ background-position:center -196px;}
.lvl_wrap .lvl.on.n6 .i_lvl{ background-position:center -246px;}
.lvl_wrap .lvl.on.n7 .i_lvl{ background-position:center -296px;}

.lvl_wrap .lvl .progress{ display:none; position:absolute; top:51px; left:0; width:100%; height:3px; text-indent:-9999em;}
.lvl_wrap .lvl.on .progress{ display:block}
.lvl_wrap .n1 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level1.png) no-repeat; background-size:100% 5px;}
.lvl_wrap .n2 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level2.png) no-repeat; background-size:100% 5px;}
.lvl_wrap .n3 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level3.png) no-repeat; background-size:100% 5px;}
.lvl_wrap .n4 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level4.png) no-repeat; background-size:100% 5px;}
.lvl_wrap .n5 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level5.png) no-repeat; background-size:100% 5px;}
.lvl_wrap .n6 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level6.png) no-repeat; background-size:100% 5px;}
.lvl_wrap .n7 .progress{background:url(//img.dongascience.com/kids2016/mobile/images/mypage/line_level7.png) no-repeat; background-size:100% 5px;}
.lvl_wrap label{margin-top:11px; font-size:11px; line-height:11px;}

.order { background:#fff; overflow:hidden; border-top:#e5e5e5; border-bottom:#dcdcdc;}
.order h4{padding:16px 16px 0; font-size:17px; font-weight:normal; color: #222; }
.order strong{ display:inline-block; width:82px; font-weight:normal; }
.order ul{ margin:16px; border:1px solid #e5e5e5; border-radius:3px;}
.order li{min-width:288px; height:40px; padding:0 12px; line-height:40px; border-bottom:1px solid #e5e5e5; font-size:14px; box-sizing:border-box;}
.order li:last-child{ border-bottom:0;}
.order span.em{ font-weight:bold; color: #eb4e44;}
.order p{ font-size:13px; text-align:center;}
.order p.em{color: #eb4e44;}
.order input{ display:block; height:32px; line-height:32px; padding:0 13px; margin:16px auto; background:#eb4e44; color:#fff; border-radius:3px; border:0; cursor:pointer; }
.order input.btn_order2{ display:inline-block; margin-right:4px;  border:1px solid #eb4e44; background:#fff; color:#eb4e44; }
.order input.btn_order3{ display:inline-block; margin-left:0px; border:1px solid #d3d3d3; background:#fff; color:#222; }
.profile span, .order span{ color:#777;}
.profile ul li{ overflow:hidden;}
.profile ul li strong, .profile ul li span{ display:block !important; float:left;}
.profile ul li span{width:172px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:-0.05em;}

/* 프로필 수정 */
#mypage_profile_01{}
.f_modify{padding:16px;width: 320px;margin: 0 auto;box-sizing: border-box;}
.f_modify li{ padding:8px 0; border-bottom:1px  solid #eee; }
.f_modify li:after{display:block;height:0;content:".";font-size:0;visibility:hidden;clear:both}
.f_modify .p_left, .f_modify .p_right{ position:relative; height:110px; display:inline-block; vertical-align:top;}
.f_modify .p_left .thumb{ width:100px; height:100px; background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_member2.png) no-repeat; background-size:100px; border:2px solid #e83428; border-radius:10px; overflow:hidden;}
.f_modify .p_left .thumb img{ width:100%; height:100%;}
.f_modify .p_right{ padding-left:20px;}
.f_modify .p_right .name{ font-size:30px; padding:10px 0 10px; color: #222;}
.f_modify .p_right .id{ font-size:20px; color: #777;}
.f_modify .p_right .btn_modify{ height:34px; line-height:34px; padding-bottom:0; text-align:center; margin-top:10px; background:#fff; border:1px solid #d3d4d4; border-radius:3px; color: #222;}
.f_modify .p_right .btn_modify.off{ display:block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.f_modify label{ display:block; padding-bottom:4px;}
.f_modify label span{ font-size:11px; color: #e83428; padding-left:6px;}
.f_modify input, .f_modify select{ display:inline-block; padding:0 10px; height:40px; border:1px solid #ccc; box-sizing:border-box; vertical-align:middle;}
.f_modify .btn_check{ padding:0 15px;}
.f_modify label[for="mailing1"], .f_modify label[for="mailing2"]{ display:inline-block;}
.f_modify label b{ font-weight:normal;}
.f_modify .inp_mn{ width:92px;}
.f_modify .inp_nm{ width:81px;}
.f_modify .inp_pw{ width:140px;}
.f_modify input.inp_mail{ width:160px;}
.f_modify select.inp_mail{ width:100px;}
.f_modify input.inp_g, .f_modify input.inp_txt{ width:200px;}
.f_modify select.inp_g{ width:80px;}
.f_modify .btn_area{ padding:20px 0 0; text-align:center;}
.f_modify .btn_area .btn_ok{ width:100px; margin-right:10px; background:#eb4e44; border:0; border-radius:3px; color: #fff; text-align:center;}
.f_modify .btn_area .btn_cancel{width:100px; background:#fff; border:1px solid #d3d3d3; border-radius:3px; color: #222;}

/* 내가 쓴 글 */
#mypage_portfolio{ position:relative; background:#fff; border-top:1px solid #e5e5e5;/* border-bottom:1px solid #dcdcdc;*/ overflow:hidden; margin-bottom:8px}
#mypage_portfolio .category{ position:absolute; top:10px; right:16px;}
#mypage_portfolio .category .opt{ padding:0 10px; width:132px; height:46px; background:#fff; border:1px solid #e5e5e5; border-radius:3px; cursor:pointer;}
#mypage_portfolio .date{ padding-top:7px; font-size:12px;}



/* 알림 설정 */
#mypage_setting{ position:relative; background:#fff;}
#mypage_setting h3{ height:67px; line-height:67px; padding-left:16px; border-bottom:1px solid #eee; color:#e83428; font-size:17px; font-weight:normal;}

#mypage_setting dl{ position:relative; padding:16px; border-bottom:1px solid #eee;}
#mypage_setting dl:last-child{ border-bottom:1px solid #e5e5e5;}
#mypage_setting .desc{ width:85%; padding-top:4px; font-size:14px; color: #777;}
#mypage_setting .em{ color:#eb4e44; font-size:12px;}
#mypage_setting .onoff_all{position:absolute; top:25px; right:16px;}
#mypage_setting .onoff{ position:absolute; top:50%; right:16px; margin-top:-9px; }
#mypage_setting .chk{ display:none; width:18px; height:18px;}
#mypage_setting label{display:block; width:18px; height:18px;background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_check_off.png) 0 0 no-repeat; cursor:pointer; background-size:18px; text-indent:-9999em; }
#mypage_setting input:checked + label{background:url(//img.dongascience.com/kids2016/mobile/images/common/ico_check_on.png) no-repeat;  background-size:18px;}



/* 포트폴리오 */
.portfolio { background:#fff; overflow:hidden; border-top:#e5e5e5; border-bottom:#dcdcdc; margin-bottom: 8px;}
#mypage_profile .portfolio h4{ border-bottom:1px solid #eee; padding:16px}
.portfolio dl{border-bottom: 1px solid #eee;background:#fdfdfd; }
.portfolio dl:last-child { border-bottom:0; }
.portfolio dt { position:relative; padding-left:16px; height: 30px; line-height: 49px;}
.portfolio dd{padding:19px 0 19px 16px; }
.portfolio .msg{ line-height:30px; font-size:13px; color:#999; }
.portfolio .info { height:20px; line-height:20px; font-size:13px; color:#999; position:absolute; top:15px; right:10px ; font-weight:normal}
.portfolio dd .btn_check{ display: inline; width: 100px; height: 38px; margin-right: 10px; background: #fff; border: 1px solid #eb4e44; border-radius: 3px; color: #e83428;  vertical-align:top }
.portfolio dd .myurl{ display:inline-block; width:145px; font-size:17px; letter-spacing:0}
.portfolio dd .btn_go{ display:inline-block; height:36px; line-height:36px; padding:0 10px; margin-right:10px; background: #fff; border: 1px solid #eb4e44; border-radius:3px; color:#e83428;  vertical-align:middle }
.portfolio dd input[type=text]{ border:1px solid #d9d9d9; background:#fff;height:36px;  vertical-align:middle;border-radius: 3px; width:175px; padding-left:10px; letter-spacing:0}
.portfolio dd label{position:relative;}
.portfolio dd input[type=radio]{position: absolute;left:20px; top:5px}
.portfolio dd label span{display:inline-block;border:1px solid #d9d9d9;border-radius: 3px;  display:inline-block; padding:0 35px 0 40px; line-height:40px }
.portfolio dd input[type=radio]:checked+span {  color:#e83428;border:1px solid #f8c2bf; background:#fff}
.portfolio .btn_area { text-align:center; padding:20px 0;}
.portfolio .btn_area .btn_save{  padding:0 30px; height:40px; background:#eb4e44; border-radius:3px; color: #fff; border:0 }

.pop_msg{position: fixed;z-index: 9999; width: 360px; height: 360px;background: #fff; top: calc(50% - 180px); left:  calc(50% - 180px);border:1px solid #ddd; box-shadow: 0px 0px 16px 3px  rgba(0,0,0,0.1);border-radius: 3px;}
.cont_msg {padding: 5px 30px 30px 30px}
.cont_msg h4{ font-size: 18px;line-height: 50px;}
.cont_msg h4 em{ display: inline-block; overflow: hidden;width: 17px;height: 17px;margin: 16px 4px 0 0;background: url(//img.dongascience.com/kids2016/images/common/ico_message_onoff.png) no-repeat;}

.cont_msg h4 em.new{ background-position: 0 0;}
.cont_msg h4 em.opened{background-position: 0px -17px;}
.cont_msg h4 span{display: inline-block; vertical-align: top; font-size: 12px; font-weight: normal; letter-spacing: 0.1em;padding-left: 10px}
.cont_msg span.btn_close{position: absolute; right: 10px; top:10px; display: block; width: 30px; height: 30px; font-size: 18px;line-height: 30px; text-align: center; cursor: pointer}
.cont_msg .box{ height: 180px;border:1px solid #ccc; border-radius: 3px;padding: 16px; overflow-y: scroll; font-size: 14px; line-height: 1.5}
.cont_msg input.btn_close{display: inline-block; height: 40px;width:100px; margin: 20px auto; background: #fff;border:1px solid #bbb;border-radius: 3px;}
.cont_msg .btn_align{text-align: center}

@media (min-width:320px){
    .profile ul li span{width:inherit;}
    }