@media only screen and (max-width: 800px){
.setCenter{ margin:0;}
}
.topTitle{ position:relative; height:300px; background:url(../images/006.jpg) no-repeat center; background-size:cover;}
.topTitle::before{ content:" "; position:absolute; width:100% ; height:100%; background-color:rgba(246,94,140,0.5);}
.topTitle p{ display:block; width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2em; font-weight:bold; color:#FFF; text-align:center; line-height:1.1em;}
.topTitle p span{ display:block;}

.login { height:calc(100vh - 185px); position:relative;}
.login .loginBg{ height:calc(100vh - 110px); width:calc(100% - 3em); position:fixed; bottom:0; left:0; z-index:-1; background:url(../src/loginBg.jpg) no-repeat center; background-size:cover;}
.login .loginBg::after{ content:' '; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
.login .messege{ text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: calc(100% - 2em);}
.login .messege p{ font-weight:bold; color:#FFF; margin-bottom:1em;}
.login .messege p.text555{ color:#999; margin:0.5em 0; font-weight:500;}
.login .messege p.forget{color:#666;}
.login .messege .box{ background-color:#FFF; border-radius:5px; max-width:calc(300px - 2em); margin:0 auto 2em auto; padding:1em; transform:translateY(15px);}
.login .messege .box .logo{ width:90%; display:block; margin:0 auto 1em auto;}
.login .messege .box .fb{ display:block; padding:2px; font-weight:bold; color:#FFF; background-color:#39C; border-radius:8px; margin:0.4em; transition:background-color 0.3s;}
.login .messege .box .fb:hover{ background-color:#369; }
.login .messege .box .gg{     display: block;
    padding: 2px;
    font-weight: bold;
    color: grey;
    background-color: white;
    border-radius: 8px;
    border: 1px solid #757575;
    margin: 0.4em;
    transition: background-color 0.3s;}
.login .messege .box .gg:hover{ background-color:#F36; }
.login .messege .box .fb img,.login .messege .box .gg img{ height: 30px; vertical-align: middle; margin-right: 10px;}
.login .messege .box span{ display:block; color:#CCC;}
.login .messege .box input{ width:calc(100% - 12px - 0.8em); padding:5px; border-radius:8px; margin:0.15em; border:#999 1px solid;}
.login .messege .box .info{ display:block; color:#F90; }
.login .messege .box .info:hover{ color:#C06;}
.login .messege .box .btnB{ font-size:1em; margin:0.5em;}
.login .messege .box .logFunction a{ color:#C00;}

.login .singUp { max-width:none !important; width: calc(400px - 2em);}
.login .singUp .formList{ width:100%;}
.login .singUp .formList tr td:nth-child(1){ width:4.5em;}
.login .singUp .formList tr td:nth-child(2) input.optional{ width: calc(100% - 12px);}
.login .singUp .formList tr td:nth-child(2) input::-webkit-input-placeholder{ color:#CCC;}
/*.login .singUp .formList div{ width:100%;}*/
.login .singUp input.agree{ width:auto;}
.login .singUp .terms{ color:#C00; display:inline-block;}


@media only screen and (max-width: 1000px){
.login { height:calc(100vh - 75px);}
.login .loginBg{ height:calc(100vh - 75px); width:calc(100% - 3rem * 0.8);}
}
@media only screen and (max-width: 600px){
.login { font-size:0.9em; height:auto;}
.login .messege{position:relative; left:auto; top:auto; transform:none; width:auto; padding: 5em 2em;}

.login .singUp button{ font-size:0.8em}
.login .singUp .formList{ font-size:0.8em;}
}
@media only screen and (max-width: 500px){
.login .singUp{width: calc(100% - 2em);}
}

.memberBox .fullBgColor { background-color:#fde9df;}
.memberBox .exchange{ max-width:1200px; margin:auto; padding:3em 1em; text-align:center;}

.memberBox .exchange .iteam li{ float:left; width: calc(25% - 2em - 10px); padding: 1em; background-color: #FFF; margin: 5px;}
.memberBox .exchange .iteam li .imgMask{ width: calc(100%); overflow:hidden; position:relative;}
.memberBox .exchange .iteam li .imgMask.finish::before{content: "　finish　兌換完畢"; display: block; position: absolute; width: 5em; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-15deg); font-weight: bold; font-size: 1.4em; text-align: center; color: #333; background-color: rgba(255,255,255,0.8); padding: 6em; z-index: 1;}
.memberBox .exchange .iteam li .imgMask::after{ content:' '; margin-top:100%; display:block; }
.memberBox .exchange .iteam li .imgMask img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; transition: height 0.3s; cursor:pointer;}
.memberBox .exchange .iteam li .imgMask:hover img{ height:120%;}

.memberBox .exchange .iteam li p{ text-align:left; width: calc(100% - 16px); margin-left: 16px; position: relative;}
.memberBox .exchange .iteam li p::before{ content:"．"; position: absolute; left: -16px;}
.memberBox .exchange .iteam li p:nth-child(2){ width: calc(100%); margin-left: 0; font-size:1.2em; margin-top:1em; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;height: 2.4em;}
.memberBox .exchange .iteam li p:nth-child(2):hover{ color:#C36; cursor:pointer;}
.memberBox .exchange .iteam li p:nth-child(2)::before{ content:"";}
.memberBox .exchange .iteam li p:nth-child(3){ /*width:calc(100% - 0.6em);*/ margin-top:0.6em; line-height:1.5em; font-size:1em; color:#666;}
.memberBox .exchange .iteam li p:nth-child(4){ /*width:calc(100% - 0.6em);*/ margin-top: 1em; color: #666;}
.memberBox .exchange .iteam li p:nth-child(4) span{ font-size:1.2em; color:#d82e62; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
.memberBox .exchange .iteam li p:nth-child(4) span::after{ content: ''; display: inline-block; height: 1em; width: 1.5em; background: url(../src/iconMoney.svg) no-repeat; background-size: contain; vertical-align: sub;}
.memberBox .exchange .iteam li p:nth-child(4) img{ height:1.5em; vertical-align: sub;}
.memberBox .exchange .iteam li p span{ color:#C00; display: inline-block;}
.memberBox .exchange .iteam li .exchange01Icon::before{ content:" "; background:url(../src/iconExchange_01.svg) no-repeat center; background-size:contain; text-align:center; position:absolute; width:40%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; cursor:pointer;}
.memberBox .exchange .iteam li .exchange02Icon::before{ content:" "; background:url(../src/iconExchange_02.svg) no-repeat center; background-size:contain; text-align:center; position:absolute; width:40%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; cursor:pointer;}




@media only screen and (max-width: 800px){
.memberBox .exchange h1{ font-size:1.8em;}
.memberBox .exchange .iteam li{ width: calc(50% - 2em - 2px); margin: 0; border: 1px #fde9df solid;}
}
@media only screen and (max-width: 600px){
.memberBox .exchange .iteam li{ padding: 0.5em; width: calc(50% - 1em - 2px);}
.memberBox .exchange .iteam li p{font-size: 0.9em !important;}
}


.memberBox .photoHead { display:inline-block; padding:0.5em; border-radius:8em; border:#CCC 1px solid;}
.memberBox .photoHead .imgMask{ width:8em; overflow:hidden; position:relative; border-radius:8em;}
.memberBox .photoHead .imgMask::after{ content:' '; padding-top:100%; display:block;}
.memberBox .photoHead .imgMask img{ position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%,-50%);}

/*---會員list基本樣式---*/
.memberBox .formList a{ display:inline-block; width:5em; padding:0.3em; color:#FFF; font-weight:bold; margin:0.2em; background-color:#CCC; text-align:center; border-radius:5px; transition:background-color 0.25s; vertical-align:middle;}
.memberBox .formList a:hover{ background-color:#e77f9f;}
.memberBox .formList a.use{ background-color:#e77f9f;}
/*---條款確認---*/
.memberBox .statement{ background-color:#ffe9df; padding:10px;}
.memberBox .statement ul{ border:2px #FFF solid; padding:2em 1em; text-align:center}
.memberBox .statement ul p{ font-size:1.3em; margin-bottom:1em; font-weight:bold;; }
.memberBox .statement ul li{ list-style:decimal; margin-left:1em; line-height:2em; text-align:left;}
.memberBox .statement ul span{ margin-top:0.5em; display:inline-block;}
.memberBox .statement ul span:nth-child(4){ text-align:left; color: #999;}

/*==========memberPublicity==========*/

.memberBox .publicity .banner{ background:url(../src/banner4.jpg) center no-repeat fixed; background-size:cover; position:relative; height: calc(100vh - 185px - 4em); padding:2em;}
.memberBox .publicity .mgmBg{ background:url(../src/mgmBg.svg) center no-repeat fixed; background-size:cover; height:auto; padding:4em 2em;}
.memberBox .publicity .jUsBg{ background:url(../src/banner9.jpg) center no-repeat fixed; background-size:cover;}
.memberBox .publicity .banner::after{ content:' '; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);}
.memberBox .publicity .mgmBg::after{  background-color:rgba(0,0,0,0);}
.memberBox .publicity .banner .text{ top:50%; transform:translateY(-50%); color:#FFF; position:relative; z-index:1; text-align:center; padding:1em; margin:auto; border:3px #FFF solid; max-width:700px;}
.memberBox .publicity .mgmBg .text{ position:relative; top:0; left:0; transform:none;}
.memberBox .publicity .banner .text h1{ color:#FFF; font-style:normal; font-family:inherit; position:relative; z-index:1; padding:0.5em; font-size:2em;}
.memberBox .publicity .banner .text h1 span{font-size:1em; display:block; color:#f4c4a8; font-family:inherit; font-weight:bold;}
.memberBox .publicity .banner .text p:nth-child(1){ font-size:1.7em; font-weight:bold;}
.memberBox .publicity .banner .text p:nth-child(2){ font-size:1.5em; line-height:1.5em; margin:0 0 1em 0; font-weight:bold;}
.memberBox .publicity .banner .text p:nth-child(3){ margin-bottom:0.5em;}
.memberBox .publicity .banner .text a{}

.memberBox .publicity .intelligent .fullBgColor { background-color:#fde9df;}
.memberBox .publicity .intelligent { max-width:1200px; margin:auto; padding:2em 0;}
.memberBox .publicity .intelligent h1{ padding:1em; }
.memberBox .publicity .intelligent h1 span{ display:block; margin-top:0.8em;}
.memberBox .publicity .intelligent .subheading{ max-width:800px; margin:auto; padding:0 1em 1em 1em; text-align:center; line-height:1.6em;}
.memberBox .publicity .intelligent .iteam li{ float:left; width:calc(33.33% - 4em); padding:2em;}
.memberBox .publicity .intelligent .iteam li .imgMask{ float:left; width: calc(100% - 8em); padding:0 4em;}
.memberBox .publicity .intelligent .iteam li .imgMask img{ width:100%;}
.memberBox .publicity .intelligent .iteam li p{ text-align:center;}
.memberBox .publicity .intelligent .iteam li p:nth-child(2){ float:left; width:calc(100%); font-size:1.2em; margin-top:1em; color:#F36; color:#F36;}
.memberBox .publicity .intelligent .iteam li p:nth-child(3){ float:left; width:calc(100%); padding:0.3em; margin-top:0.6em; margin-bottom:1em; line-height:1.6em; font-size:1em; color:#666; text-align:left;}
.memberBox .publicity .intelligent .iteam li ul{ clear:both; padding:1em; background-color:#EEE; border-radius:5px;}
.memberBox .publicity .intelligent .iteam li ul li{ width: auto; padding: initial; list-style:disc; color:#666; float:none; margin-left:2em; line-height:1.6em}
.memberBox .publicity .intelligent .iteam .width800Down{ display:none;}
.memberBox .publicity .intelligent .iteam .width800Up{ display:block;}

.memberBox .publicity .joinUs{ width: calc(100%); padding: 5em 0; margin:auto; background:url(../src/joinUsBg.jpg) center no-repeat fixed; background-size:cover; text-align:center;}
.memberBox .publicity .joinUs h1{ font-size:3em; padding:0.5em 0; color:#d82e62;}
.memberBox .publicity .joinUs p{ font-size:1.2em; font-weight:bold; color:#d82e62; margin-bottom:1em;}
.memberBox .publicity .joinUs a{ display:inline-block; background-color:#fcb815; font-size:1em; padding:0.8em 1.6em; margin:0.5em; border-radius:0.5em; color:#FFF; transition:background-color 0.5s;}
.memberBox .publicity .joinUs a:hover{ background-color:#F36;}

@media only screen and (max-width: 1000px){
.memberBox .publicity .banner{ height: calc(100vh - 68px);}
.memberBox .publicity .banner .text h1{ font-size:1.8em;}
.memberBox .publicity .banner .text p:nth-child(2){ font-size:1.2em;}
.memberBox .publicity .mgmBg{ height:auto;}
.memberBox .publicity .intelligent .iteam li .imgMask{ width: calc(100% - 4em); padding:0 2em;}
}

@media only screen and (max-width: 800px){
.memberBox .publicity .banner{ background:url(../src/banner4.jpg) center no-repeat; background-size:cover; padding:1.5em;}
.memberBox .publicity .mgmBg{ background:url(../src/mgmBg.svg) center no-repeat fixed;}
.memberBox .publicity .jUsBg{ background:url(../src/banner9.jpg) center no-repeat; background-size:cover;}
.memberBox .publicity .banner .text{ max-width:calc(1000px - 2em); padding:1em;}
.memberBox .publicity .banner .text a{font-size:1.2em;}

.memberBox .publicity .intelligent h1{ /*font-size:1.8em;*/}
.memberBox .publicity .intelligent .iteam li{ width:calc(50% - 2em); padding:1em ;}
.memberBox .publicity .intelligent .iteam li ul li{ width:calc(100% - 2em) !important; padding:0 !important ;}
.memberBox .publicity .intelligent .iteam .width800Down{ display:block;}
.memberBox .publicity .intelligent .iteam .width800Up{ display:none;}
.memberBox .publicity .joinUs{ background:url(../src/joinUsBg.jpg) center no-repeat; background-size:cover;}

}

@media only screen and (max-width: 600px){
.memberBox .publicity .intelligent .content .iteam li{ width:calc(100% - 2em); padding:1em ;}
.memberBox .publicity .intelligent .content .iteam li .imgMask{ width: calc(100%); padding:0; text-align:center;}
.memberBox .publicity .intelligent .content .iteam li .imgMask img{ width:60%;}

}

/*==========normalSet==========*/
.memberBox .memberMenu .menuBtn{ max-width:1200px; margin:auto; padding:2em 1em; text-align:center;}
.memberBox .memberMenu .menuBtn li{ display:inline-block; width:6em; border-radius:5em; overflow:hidden; background-color:#eee; border:3px #eee solid; position:relative; cursor:pointer; transition:background-color .3s, border .3s;}
.memberBox .memberMenu .menuBtn li::after{ content:' '; margin-top:100%; display:block;}
.memberBox .memberMenu .menuBtn li:hover{ background-color:#fde9df; border:3px #d82e62 solid;}
.memberBox .memberMenu .menuBtn .use{ background-color:#fde9df; border:3px #d82e62 solid;}
.memberBox .memberMenu .menuBtn li span{ width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;}
.memberBox .memberMenu .menuBtn li span .imgMask{ display:inline-block; width:40%; position:relative; overflow:hidden;}
.memberBox .memberMenu .menuBtn li span .imgMask::after{ content:' '; padding-top:100%; display:block;}
.memberBox .memberMenu .menuBtn li span .imgMask img{ position:absolute; left:50%; transform:translateX(-50%); height:100%;}
.memberBox .memberMenu .menuBtn li span p{ color:#d82e62; font-size:1em;}
.memberBox .memberMenu .menuBtn li:last-child{ background-color:#e46f93; border:3px #e46f93 solid;}
.memberBox .memberMenu .menuBtn li:last-child:hover{ background-color:#b23965;}
.memberBox .memberMenu .menuBtn li:last-child p{ color:#FFF;}

.memberBox .point { max-width: 800px; margin: auto;}
.memberBox .point h1{ padding:1em; }
.memberBox .point .lineBox{ padding:1em 2em; border: 3px #d83264 solid; border-radius: 20px; margin: 0 1em;}
.memberBox .point .number { position:relative; display:inline-block; width:8em; height:6em; background:url(../src/woCoinBg.svg) no-repeat center center; background-size:contain; vertical-align:middle;}
.memberBox .point .number span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:bold; font-size:0.9em; text-align:center; color:#FFF;}
.memberBox .point .number span p{ font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#FFF; font-size:1.5em;}
.memberBox .point .text{ display:inline-block; width:calc(100% - 9em - 5px); margin-left:1em; vertical-align:middle; color:#d83264;}
.memberBox .point .text a{ text-decoration:underline;}


/*.memberBox .point .number{ font-size:1.3em; font-weight:bold; text-align:center; margin-bottom:0.5em;}
.memberBox .point .number p{ display:inline-block; font-family:Georgia, "Times New Roman", Times, serif; color:#ff8b00; padding:0 0.5em; vertical-align:middle; font-size:1.3em;}
.memberBox .point .number p b{ display:inline-block; vertical-align:middle; font-style:italic;}
.memberBox .point .number p::after{ content:''; display:inline-block; vertical-align:middle; width:1em; height:1em; margin-left:0.2em; background:url(../src/iconUnit.svg) no-repeat center center; background-size:contain; }
.memberBox .point .text{ font-size:1em; display:block; vertical-align: middle; color:#d82e62; text-align:center;}*/

.memberBox .messeges { padding:0 1em 2em 1em;}
.memberBox .messeges h1{ padding: 1em 0;}
.memberBox .messeges .sort{ text-align:center;}
.memberBox .messeges .sort a{ display: inline-block; margin-right: 1em; color:#666; padding-bottom: 4px;}
.memberBox .messeges .sort a.use{ border-bottom: 2px #d82e62 solid;
    }

.memberBox .messeges ul li{ display:block; margin:auto; max-width:600px; background-color:#EEE; position:relative; margin-top:1em; padding:0.5em;}
.memberBox .messeges ul li.detail{ max-width: calc(1000px - 2em); min-height: 300px; padding: 1em;}
.memberBox .messeges ul li .imgMask{ display:block; float:left; width:6em; position:relative; overflow:hidden;}
.memberBox .messeges ul li.detail .imgMask{width:12em;}
.memberBox .messeges ul li .imgMask::after{ content:' '; margin-top:100%; display:block;}
.memberBox .messeges ul li .imgMask img{ position:absolute; left:50%; transform:translateX(-50%); height:100%;}
.memberBox .messeges ul li .text{ display:block; float:left; width:calc(100% - 7em); position:absolute; top:50%; right:0; transform:translateY(-50%);}
.memberBox .messeges ul li.detail .text{ display:block; float:right; width:calc(100% - 13em); position:unset; transform:none;}

.memberBox .messeges ul li .text .functionBtn{ display:block; text-align:center; width:60px; position:absolute; top:50%; right:0; transform:translateY(-50%);}
.memberBox .messeges ul li.detail .text .functionBtn{ text-align:right; width:100%; position:unset; transform:none; padding: 0 0 1em 0;}

.memberBox .messeges ul li .text .functionBtn a.btn{ display: inline-block; margin: 0.2em 0; height: 30px; width: 30px;}
.memberBox .messeges ul li .text .functionBtn a.btn img{width: 100%;}
.memberBox .messeges ul li .text p{ width:calc(100% - 60px); line-height:1.5em; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3;}
.memberBox .messeges ul li.detail .text p{ display: block; width: 100%; line-height: 1.8em; font-size: 1em; color: #666; margin-bottom:2em;}


.memberBox .messeges ul li .text p a{ color:#666;}
.memberBox .messeges ul li .text p a:hover{ color:#f36;}
.memberBox .messeges ul li .text .date{display:block; color:#999; font-size:0.8em;}
.memberBox .messeges ul li.detail .text .date{font-size:1em; float:left;}


@media only screen and (max-width: 800px){
.memberBox .memberMenu .menuBtn li{ font-size:0.8em;}
}
@media only screen and (max-width: 600px){
.memberBox .memberMenu .menuBtn li{ font-size:0.6em;}
.memberBox .point .lineBox{ text-align:center; padding:1em;}
/*.memberBox .point .number { display: block; width: 160px; margin: 0 auto 1em auto;}
.memberBox .point .number span{ font-size:0.9em; }
.memberBox .point .text{ font-size:1em; width:100%;}*/
.memberBox .point .text{ width:calc(100%); margin-left:0em; vertical-align:middle; color:#d83264;}
.memberBox .messeges ul li .imgMask{ display:none;}
.memberBox .messeges ul li.detail .imgMask{ display:block; width:100%; margin-bottom:1em;}
.memberBox .messeges ul li.detail .imgMask::after{ margin-top:70%;}
.memberBox .messeges ul li .text{ position:relative; top:0; right:0; transform:translateY(0); width:calc(100%);}
.memberBox .messeges ul li.detail .text{ float:right; width:calc(100%); position:unset; transform:none; height:auto;}
.memberBox .messeges ul li .text .functionBtn{ width:30px;}
.memberBox .messeges ul li .text p{ width:calc(100% - 40px);}
}

.memberBox .bonus{ max-width:1200px; margin:auto; padding:0 1em 2em 1em; text-align:center;}
.memberBox .bonus .sort{ font-size: 1.2em; padding: 0.5em; display: inline-block; font-weight: bold; color: #666;}
.memberBox .bonus h1{ padding: 1em 0;}
.memberBox .bonus .title{ font-size:1.5em; font-weight:bold; color:#e46f93; padding:1.3em 0 1em 0;}
.memberBox .bonus .complete{ color:#6C0; margin-right:0.5em;}
.memberBox .bonus .list{ background-color:#EEE; width:1000px; margin:auto; border-spacing:0; padding-bottom:4px; margin-bottom:3em; }
.memberBox .bonus .list tr:nth-child(2n+1){ background-color:#FFF;}
.memberBox .bonus .list tr:nth-child(2n){ background-color:#EEE;}
.memberBox .bonus .list tr:nth-child(1){ background-color:#F90; color:#FFF;}
.memberBox .bonus .list tr td{ padding:10px; color:#666;}
.memberBox .bonus .list tr:nth-child(1) td{ color:#FFF; width:3.5em;}
@media only screen and (max-width: 1100px){
.memberBox .bonus .list{ width:100%;}
}

.memberBox .woClub{ max-width:1200px; margin:auto; padding:0 1em 2em 1em;}
.memberBox .woClub h1{ padding: 1em 0;}
.memberBox .woClub .share{ max-width: 800px; margin: auto; padding:2em; text-align: center; margin-bottom: 2em; background-color: #EEE; border-radius: 10px;}
.memberBox .woClub .share span{ font-size: 1em; display: block; margin-bottom: 1em; color: #777;}
.memberBox .woClub .share span a{ font-weight:bold;}
.memberBox .woClub .share span a:hover{ text-decoration:underline;}
.memberBox .woClub .share .link{ font-size: 1.4em; font-weight: bold; color: #6C0;}
.memberBox .woClub .share .link a{ height:1.5em;}
.memberBox .woClub .share .link a img{ height:1em;}
.memberBox .woClub .share input{ width:400px; font-size: 0.9em; padding: 5px; border-radius: 5px; border: 1px #999 solid;}
.memberBox .woClub .list{ border-spacing:1px; margin:auto;}
.memberBox .woClub .list tr{ margin-bottom:3em; display:block;}
.memberBox .woClub .list tr td:nth-child(1){ width:250px;}
.memberBox .woClub .list tr td:nth-child(1) p{ font-family:Georgia, "Times New Roman", Times, serif; font-size:1.5em; font-style:italic;}
.memberBox .woClub .list tr td:nth-child(1) span{ font-size:1em; font-weight:800; margin-left:1.5em; display:block;}
.memberBox .woClub .list tr td:nth-child(2){ padding:0 25px;}
.memberBox .woClub .list tr td:nth-child(2) img{ width:100px;}
.memberBox .woClub .list tr td:nth-child(3){ width:calc(350px - 1em); padding-left:1em;}
.memberBox .woClub .list tr td:nth-child(3) p{ line-height:1.8em; position:relative;}
.memberBox .woClub .list tr td:nth-child(3) .complete i{ position:absolute; top: 5px; left: -1.5em;}
.memberBox .woClub .list tr td:nth-child(3) span{ font-size:0.8em; color:#999; display:block;}
@media only screen and (max-width: 600px){
.memberBox .woClub .share span{ font-size:1em;}
.memberBox .woClub .share .link{ font-size:1em;}
.memberBox .woClub .share input{ width:calc(100% - 12px);}
.memberBox .woClub .list tr td{ vertical-align:top;}
.memberBox .woClub .list tr td:nth-child(1){ display:block; width:100%; padding:1em 0;}
.memberBox .woClub .list tr td:nth-child(1) span{ text-align:right;}
.memberBox .woClub .list tr td:nth-child(1) span br{ display:none}
.memberBox .woClub .list tr td:nth-child(2){ padding:0 15px;}
.memberBox .woClub .list tr td:nth-child(2) img{ width:80px;}
}

.memberBox .exchangeCenter{ padding:0 1em 2em 1em;}
.memberBox .exchangeCenter h1{ padding: 1em 0;}
.memberBox .exchangeCenter .menu { text-align:center;}
.memberBox .exchangeCenter .menu a{ display:inline-block; font-size:1.2em; padding:0.5em; margin:0 1em; position:relative; color:#999;}
.memberBox .exchangeCenter .menu a::after{ content:' '; position:absolute; width:100%; height:3px; bottom:0; left:0; background-color:#CCC;}
.memberBox .exchangeCenter .menu a:hover{ color:#d82e62;}
.memberBox .exchangeCenter .menu a:hover::after{ background-color:#d82e62;}
.memberBox .exchangeCenter .menu .use{ color:#d82e62;}
.memberBox .exchangeCenter .menu .use::after{ background-color:#d82e62;}



@media only screen and (max-width: 800px){
.memberBox .exchangeCenter .menu { font-size:0.9em;}
.memberBox .exchangeCenter .exchange .iteam li {border: 1px #FFF solid;}
}
@media only screen and (max-width: 600px){
.memberBox .exchangeCenter{ padding:0 0 2em 0;}
.memberBox .exchangeCenter .menu { font-size:0.8em;}
.memberBox .exchangeCenter .menu a{ padding:0.5em 0; margin:0 0.5em;}
}


.memberBox .myCollection{ max-width:1200px; margin:auto; padding:0 1em 2em 1em;}
.memberBox .myCollection h1{ padding: 1em 0;}
.memberBox .myCollection .title{ font-size:1.5em; font-weight:bold; color:#e46f93; padding:1.3em 0 1em 0;}
.memberBox .myCollection .complete{ color:#6C0; margin-right:0.5em;}
.memberBox .myCollection .function .delete{display:inline-block; background-color:#fcb815; font-size:0.8em; float:left; vertical-align:baseline; padding:0.2em 0.8em; margin:0.5em; border-radius:0.5em; color:#FFF; transition:background-color 0.5s;}
.memberBox .myCollection .function .delete:hover{ background-color:#F36;}
.memberBox .myCollection .function .selectBox{ margin: 0.5em; float:right;}
.memberBox .myCollection .function .selectBox span{ display:inline-block; vertical-align:middle; font-size: 0.8em; color: #999;}
.memberBox .myCollection .function .selectBox select{ width: 150px; display:inline-block; vertical-align:middle;}
.memberBox .myCollection .menu { text-align:center; padding-bottom:2em;}
.memberBox .myCollection .menu a{ display:inline-block; font-size:1.2em; padding:0.5em; margin:0 1em; position:relative; color:#999;}
.memberBox .myCollection .menu a::after{ content:' '; position:absolute; width:100%; height:3px; bottom:0; left:0; background-color:#CCC;}
.memberBox .myCollection .menu a:hover{ color:#d82e62;}
.memberBox .myCollection .menu a:hover::after{ background-color:#d82e62;}
.memberBox .myCollection .menu .use{ color:#d82e62;}
.memberBox .myCollection .menu .use::after{ background-color:#d82e62;}
.memberBox .myCollection .list{ background-color:#F90; width:100%; border-spacing:0;}
.memberBox .myCollection .list tr:nth-child(2n+1){ background-color:#FFF;}
.memberBox .myCollection .list tr:nth-child(2n){ background-color:#EEE;}
.memberBox .myCollection .list tr td{ padding:10px; font-size:0.9em; color:#666;}
.memberBox .myCollection .list tr:nth-child(1) td{ background-color:#F90; color:#FFF;}
.memberBox .myCollection .list tr td:nth-child(3) a{ overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3;}
.memberBox .myCollection .list a:hover{ text-decoration:underline;}
.memberBox .myCollection .list .down::after{ content:'▼'; font-size:0.8em;}
.memberBox .myCollection .list .up::after{ content:'▲'; font-size:0.8em;}





.memberBox .myCollection .fullBox { padding-top:1em;}
.memberBox .myCollection .fullBox li{ display:block; width:calc(100%); float:left;}
.memberBox .myCollection .fullBox li .select{ font-size:0.8em; color:#999;}
.memberBox .myCollection .fullBox li .imgMask{ width:calc(100%); float:left;}
.memberBox .myCollection .fullBox li .imgMask::after{margin-top:30%;}
.memberBox .myCollection .fullBox li .imgMask img{ height:auto; width:100%;}
.memberBox .myCollection .fullBox li:hover .imgMask img{ width:110%;}
.memberBox .myCollection .fullBox li .text{float: left; text-align: center; width: calc(100% - 2em); padding: 1em;}
.memberBox .myCollection .fullBox li .text P:nth-child(1){ display:none;}
.memberBox .myCollection .fullBox li .text P:nth-child(2){ -webkit-line-clamp: 2; font-size: 1.4em; color: #666;}
.memberBox .myCollection .fullBox li .text P:nth-child(2):hover{ color: #F69;}
.memberBox .myCollection .fullBox li .text P:nth-child(3){ -webkit-line-clamp: 2; margin-top:0.3em;}
.memberBox .myCollection .fullBox li .text P:nth-child(4){ display:none;}
.memberBox .myCollection .fullBox li .text P:nth-child(5){ display:none;}

@media only screen and (max-width: 900px){
.memberBox .myCollection .fullBox { padding:1.5em 1% 1% 1%;}
.memberBox .myCollection .fullBox li .text P:nth-child(2){ font-size: 1em;}
}

@media only screen and (max-width: 600px){
.memberBox .myCollection .list tr td{ font-size:0.7em;}
.memberBox .myCollection .menu { font-size:0.8em;}
.memberBox .myCollection .menu a{ padding:0.5em 0; margin:0 0.5em;}
.memberBox .myCollection .fullBox li .imgMask::after{margin-top:40%;}
}

.memberBox .myCollection .activity .actList{ background-color:#EEE;}

.memberBox .myCollection .keep li .select { font-size:0.8em; color:#999; padding:5px 15px; display:block; }
.memberBox .myCollection .keep li{ display:block; width:calc(16.66%); float:left;}
.memberBox .myCollection .keep li .imgMask{ width:calc(100% - 30px); margin:0 15px; float:left;}

.memberBox .myCollection .keep li .text{ width:calc(100% - 30px); padding:15px; float:left; height: 7.5em;}
.memberBox .myCollection .keep li .text P:nth-child(1){ }
.memberBox .myCollection .keep li .text P:nth-child(2){ -webkit-line-clamp: 3;}
.memberBox .myCollection .keep li .text P:nth-child(3){ display:none;}
.memberBox .myCollection .keep li .text P:nth-child(4){ display:inline-block;}
.memberBox .myCollection .keep li .text P:nth-child(5){ display:inline-block;}
@media only screen and (max-width: 1200px){
.memberBox .myCollection .keep li{width:25%;}
}
@media only screen and (max-width: 800px){
.memberBox .myCollection .keep li{width:33.33%;}
.memberBox .myCollection .keep li .imgMask{ width:calc(100% - 20px); margin:0 10px;}
.memberBox .myCollection .keep li:nth-child(12) ~ li{ display:none;}
}
@media only screen and (max-width: 600px){
.memberBox .myCollection .keep li{width:50%;}
}



.memberBox .myTracking{ max-width:1200px; margin:auto; padding:0 1em 2em 1em;}
.memberBox .myTracking h1{ padding: 1em 0;}
.memberBox .myTracking .delete{display:inline-block; background-color:#fcb815; font-size:0.8em; float:left; vertical-align:baseline; padding:0.2em 0.8em; margin:0.5em; border-radius:0.5em; color:#FFF; transition:background-color 0.5s;}
.memberBox .myTracking .delete:hover{ background-color:#F36;}
.memberBox .myTracking .allAuthor li{ float:left; width:calc(33.33% - 2em); padding:1.5em 1em; position:relative;}
.memberBox .myTracking .allAuthor li input{ position:absolute; top:0; left:0;}
.memberBox .myTracking .allAuthor li .photoImg{ width:35%; float:left;}
.memberBox .myTracking .allAuthor li .photoImg::before{ background-color:rgba(246,94,140,0);}
.memberBox .myTracking .allAuthor li .text{ width:calc(65% - 1em); margin-left:1em; float:left;}
.memberBox .myTracking .allAuthor li .text p{float:left;}
.memberBox .myTracking .allAuthor li .text p:nth-child(1){ color:#000; font-weight:bold;}
.memberBox .myTracking .allAuthor li .text p:nth-child(2){ font-size:1em; color:rgba(246,94,140,1); margin:0.5em 0;}
.memberBox .myTracking .allAuthor li .text p:nth-child(2)::before{content:'Visit/ '; color:#666;}
.memberBox .myTracking .allAuthor li .text p:nth-child(3)::before{content:normal;}
.memberBox .myTracking .allAuthor li .text p:nth-child(4){ height:4rem; width:3.5rem;}
.memberBox .myTracking .allAuthor li .text p:nth-child(5){ font-size:0.7em; width:calc(100% - 3.5rem); margin-top:0.1em;}
.memberBox .myTracking .allAuthor li .text p:nth-child(6){ font-size:0.7em; width:calc(100% - 3.5rem); margin-top:0.1em;}
.memberBox .myTracking .allAuthor li .text p:nth-child(7){ font-size:0.7em; width:calc(100% - 3.5rem); margin-top:0.1em; color:#C00;}
.memberBox .myTracking .allAuthor li .text .number{ text-align:left;}
@media only screen and (max-width: 1000px){
.memberBox .myTracking .allAuthor li .photoImg{ width:120px; margin-left:1em; /*float:none;*/}
.memberBox .myTracking .allAuthor li .text{ width:calc(100% - 2em); margin:1em;}
}
@media only screen and (max-width: 700px){
.memberBox .myTracking .allAuthor li{width:calc(50% - 2em);}
}
@media only screen and (max-width: 600px){
.memberBox .myTracking h4{ margin-left:0.5em;}
.memberBox .myTracking .allAuthor li .photoImg{ width:80%; margin-left:0;}
.memberBox .myTracking .allAuthor li .text{ width:100%; font-size:0.9em; margin:1em 0 0 0;}
}
@media only screen and (max-width: 500px){
.memberBox .myTracking h4 a{ display:block; width:100%; margin-left:0;}
.memberBox .myTracking .allAuthor li .text p:nth-child(4){ height:3rem; width:100%;}
.memberBox .myTracking .allAuthor li .text p:nth-child(5){ width:calc(100%);}
.memberBox .myTracking .allAuthor li .text p:nth-child(6){ width:calc(100%);}
.memberBox .myTracking .allAuthor li .text p:nth-child(7){ width:calc(100%);}
}


.memberBox .Information{ max-width:800px; margin:auto; padding:0 1em 2em 1em; text-align:center;}
.memberBox .Information h1{ padding:1em 0;}
.memberBox .Information .pt500{ color: #666; margin-bottom:2em;}
.memberBox .Information .pt500 span{ font-weight: bold; padding: 0 0.3em; color: #c00;}

.memberBox .Information .formList{ width:100%; font-size:1.2em; padding:1.5em 0; border-bottom:#FFF 5px solid;}
.memberBox .Information .formList tr td{ font-size:0.9em; padding:0.5em 0; color:#666; font-weight:bold; text-align:left;}
.memberBox .Information .formList tr td:nth-child(1){ width:6em; color:#F99;  font-weight:500;}
.memberBox .Information .formList tr td input,.memberBox .Information .formList tr td select,.memberBox .Information .formList tr td textarea{ width:calc(100% - 12px); font-size:0.9em; padding:5px; border-radius:5px; border:1px #999 solid; vertical-align:middle;}
.memberBox .Information .formList tr td select{ width:calc(100%);}

.memberBox .Information .formList tr td a{ vertical-align:middle;}
.memberBox .Information .formList tr:nth-child(4) td:nth-child(2) div{ width:calc(50%); float:left;}
.memberBox .Information .formList tr:nth-child(5) td:nth-child(2) div{ width:calc(33.33%); float:left;}
.memberBox .Information .formList tr:nth-child(6) td:nth-child(2) div{ width:calc(33.33%); float:left;}
.memberBox .Information .formList tr:nth-child(6) td:nth-child(2) div:nth-child(4){ width:calc(100%); float:left;}
.memberBox .Information .formList tr:nth-child(14) td:nth-child(2) textarea{height:10em;}

@media only screen and (max-width: 600px){
.memberBox .Information .formList{ position:relative; font-size:1em; }
.memberBox .Information .formList tr{ display:block; position:relative; padding-top:2em;}
.memberBox .Information .formList tr td:nth-child(1){ position:absolute; top:0; width:100%;}
.memberBox .Information .formList tr td:nth-child(2){ display:block; width:100%;}
}


.memberBox .submission{ max-width:800px; margin:auto; padding:0 1em 2em 1em; }
.memberBox .submission h1{ padding:1em 0;}
.memberBox .submission .complete{ text-align: center;}
.memberBox .submission .complete p{ color: #666;}
.memberBox .submission .complete p span{ font-weight: bold; padding: 0 0.3em; color: #c00;}
.memberBox .submission .complete .bar{ position:relative; background-color: #ccc; font-size: 0.8em; border-radius: 1em; max-width: 600px; margin: 1em auto; overflow:hidden;}
.memberBox .submission .complete .bar p{ position:relative; z-index:1; color: #fff;}
.memberBox .submission .complete .bar::after{ content:''; display:block; position:absolute; left:0; width:50%; background-color:#d82e62; height:100%; top:0;}
.memberBox .submission .saying{ background-color: #ffeadf9c; font-style: italic; padding: 3em; border-radius: 10px; line-height: 1.8em; margin: 1em 0; color: #d82e62;}
.memberBox .submission .saying span{ display: block; text-align: right; margin-top: 1em;}
.memberBox .submission .sayingText{ margin: 2em;}
.memberBox .submission .sayingText p{ line-height: 1.8em; padding: 0.5em;}

.memberBox .submission .formList{ width:100%; font-size:1.2em; padding:1em 0; border-bottom:#FFF 5px solid;}
.memberBox .submission .formList tr td{ font-size:0.9em; padding:0.5em 0; color:#666; font-weight:bold; text-align:left;}
.memberBox .submission .formList tr td:nth-child(1){ width:6em; color:#F99;  font-weight:500;}
.memberBox .submission .formList tr td input,.memberBox .submission .formList tr td select,.memberBox .submission .formList tr td textarea{ width:calc(100% - 12px); font-size:0.9em; padding:5px; border-radius:5px; border:1px #999 solid; vertical-align:middle;}
.memberBox .submission .formList tr td select{ width:100% !important;}

.memberBox .submission .formList tr:nth-child(2) td:nth-child(2) div{ width:calc(100% - 6em); float:left;}
.memberBox .submission .formList tr:nth-child(2) td:nth-child(2) a{ width:calc(5em - 10px); display:block; float:right; text-align:center; margin:0; padding:5px; font-size:1em;}


.memberBox .submission .uploadImg{ width:calc(33.33% - 20px); padding:10px; float:left; text-align:center;}
.memberBox .submission .uploadImg .imgMask{ overflow:hidden; position:relative; background-color:; border:1px #DDD solid;}
.memberBox .submission .uploadImg .imgMask::after{ content:''; display:block; padding-top:70%; }
.memberBox .submission .uploadImg .imgMask img{ height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.memberBox .submission .uploadImg input{ border:0; background-color:#EEE; border-radius:0; font-size:0.8em; width: calc(100% - 10px); padding: 5px;}

@media only screen and (max-width: 800px){
.memberBox .submission .uploadImg{ width:calc(50% - 20px);}
}
@media only screen and (max-width: 600px){
.memberBox .submission .formList{ position:relative; font-size:1em; }
.memberBox .submission .formList tr{ display:block; position:relative; padding-top:2em;}
.memberBox .submission .formList tr td:nth-child(1){ position:absolute; top:0; width:100%;}
.memberBox .submission .formList tr td:nth-child(2){ display:block; width:100%;}
}




.memberBox .changePassword{ max-width:600px; margin:auto; padding:0 1em 2em 1em; text-align:center; }
.memberBox .changePassword h1{ padding: 1em 0;}
.memberBox .changePassword p{ margin-top:2em;}
.memberBox .changePassword .formList{ width:100%; font-size:1.2em; padding:2em 0; border-bottom:#FFF 5px solid;}
.memberBox .changePassword .formList tr td{ font-size:0.9em; padding:0.5em 0; color:#666; font-weight:bold; text-align:left;}
.memberBox .changePassword .formList tr td:nth-child(1){ width:6em;}
.memberBox .changePassword .formList tr td input,.memberBox .submission .formList tr td select,.memberBox .submission .formList tr td textarea{ width:calc(100% - 10px); font-size:0.9em; padding:5px; border-radius:5px; border:1px #999 solid;}
@media only screen and (max-width: 600px){
.memberBox .changePassword p{ font-size:0.9em;}
.memberBox .changePassword .formList{ position:relative; font-size:1em; }
.memberBox .changePassword .formList tr{ display:block; position:relative; padding-top:2em;}
.memberBox .changePassword .formList tr td:nth-child(1){ position:absolute; top:0; width:100%;}
.memberBox .changePassword .formList tr td:nth-child(2){ display:block; width:100%;}
}

.memberBox .authorArea{ background-color:#fde9df; transform:translateY(-4em); padding:1em 0 3em 0;}
.memberBox .authorArea .bannerBtn{ position:absolute; transform:translateY(-4em); border:#FFF 2px solid; display:inline-block; padding:3px 5px; color:#FFF; font-size:0.85em; background-color:rgba(0,0,0,0.5); transition:background-color 0.2s;}
.memberBox .authorArea .bannerBtn:hover{ background-color:#F93;}
.memberBox .authorArea .memberMenu .menuBtn li{background-color:#fff; border:3px #fff solid;}
.memberBox .authorArea .memberMenu .menuBtn li:hover{ background-color:#fde9df; border:3px #d82e62 solid;}
.memberBox .authorArea .memberMenu .menuBtn li.use{ background-color:#fde9df; border:3px #d82e62 solid;}
.memberBox .authorArea .memberMenu .menuBtn li:last-child p{  color:#d82e62;}
.memberBox .authorArea .memberMenu .menuBtn li:first-child{ background-color:#e46f93; border:3px #e46f93 solid;}
.memberBox .authorArea .memberMenu .menuBtn li:first-child:hover{ background-color:#b23965;}
.memberBox .authorArea .memberMenu .menuBtn li:first-child p{ color:#FFF;}

.memberBox .authorArea .formList{ width:100%; font-size:1.2em; padding:3em 0; border-bottom:#FFF 5px solid;}
.memberBox .authorArea .formList tr td{ font-size:0.9em; padding:0.5em 0; color:#666; font-weight:bold; text-align:left;}
.memberBox .authorArea .formList tr td:nth-child(1){ width:6em;}
.memberBox .authorArea .formList tr td input,.memberBox .authorArea .formList tr td select,.memberBox .authorArea .formList tr td textarea{ width:calc(100% - 10px); font-size:0.9em; padding:5px; border-radius:5px; border:1px #999 solid;}
.memberBox .authorArea .formList tr td input[type="radio"] { width: auto !important;}
.memberBox .authorArea .tag{ font-size:1.4em; color:#000; padding:0.6em 0; text-align:center; border-bottom:#FFF 1px solid; }
@media only screen and (max-width: 800px){
.memberBox .authorArea{ transform:none;}
}
@media only screen and (max-width: 600px){
.memberBox .authorArea .formList{ font-size:1em;}
}

.memberBox .authorArea .brand{ text-align:center;}
.memberBox .authorArea .brand .authorInfo{ width:auto !important;}
.memberBox .authorArea .brand .authorInfo li{ display:inline-block; padding:0.5em 1em; font-size:1em; color:#d82e62;}
.memberBox .authorArea .brand .nickName{ font-size: 1.5em; margin-top: 1em;}

.memberBox .authorArea .stationed h1{ padding:1em 0 0 0;}
.memberBox .authorArea .stationed .formList tr:nth-child(3) td:nth-child(2) div{ float:left; width:33.33%;}
.memberBox .authorArea .stationed .listB a{ width:5em;}


.memberBox .authorArea .historical .articaNo{ font-size:0.8em; color:#333; text-align:right;}
.memberBox .authorArea .historical .articalList li.bast::before{ content:' '; display:block; width:35px; height:35px; background:url(../src/barBest.svg) center; background-size:contain; position:absolute; top:-7px; left:4px; z-index:1;}
.memberBox .authorArea .historical .articalList li{ background-color:#FFF; padding:10px; position:relative; margin-top:1em;}
.memberBox .authorArea .historical .articalList li .imgMask{ float:left; width: 8em; overflow:hidden; background-color:#CCC; position:relative;}
.memberBox .authorArea .historical .articalList li .imgMask::after{ content:' '; margin-top:80%; display:block; }
.memberBox .authorArea .historical .articalList li .imgMask img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; transition: height 0.3s; cursor:pointer;}
.memberBox .authorArea .historical .articalList li .imgMask:hover img{ height:120%;}
.memberBox .authorArea .historical .articalList li .text{ margin-left:10px; float:left; width:calc(100% - 8em - 10px);}
.memberBox .authorArea .historical .articalList li .text div{ position:absolute; bottom:10px; right:10px; }
.memberBox .authorArea .historical .articalList li .text div a{ height: 2em; width: 2em; display: inline-block; border-radius: 2em;}
.memberBox .authorArea .historical .articalList li .text div a.stickTop{ background:url(../src/iconStickTop01.svg) no-repeat; background-size:cover;}
.memberBox .authorArea .historical .articalList li .text div a.use{ background:url(../src/iconStickTop02.svg) no-repeat; background-size:cover;}
.memberBox .authorArea .historical .articalList li .text div a img{ height:100%;}
.memberBox .authorArea .historical .articalList li .text span:nth-child(2){ display:block; width:calc(100%); overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3;}
.memberBox .authorArea .historical .articalList li .text span:nth-child(5){ font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#999;}
.memberBox .authorArea .historical .articalList li .text span:nth-child(6){ font-size:0.7em; color:#999;}
.memberBox .authorArea .historical .articalList li .text span:nth-child(8){ font-size:0.7em; color:#d82e62;}
.memberBox .authorArea .historical .articalList li .text span:nth-child(9){ font-size:0.7em; color:#d82e62; display: inline-block;}
@media only screen and (max-width: 600px){
.memberBox .authorArea .historical .articalList li.bast::before{width:30px; height:30px;}
.memberBox .authorArea .historical .articalList li .imgMask{ display:none;}
.memberBox .authorArea .historical .articalList li .text{ margin-left:0; width:calc(100%);}
}
@media only screen and (max-width: 450px){
.memberBox .authorArea .historical .articalList li .text span:nth-child(9){ margin-bottom: 4em;}
}

.memberBox .authorArea .messages h1{ padding:1em;}
.memberBox .authorArea .messages .sort{ color:#666; margin-bottom:1em; text-align: center;}
.memberBox .authorArea .messages .sort a{ display:inline-block; margin-right:1em; padding-bottom: 4px;}
.memberBox .authorArea .messages .sort a.use{ border-bottom: 2px #d82e62 solid;}
.memberBox .authorArea .messages .messagesList tr:first-child td{ padding:0.5em; color:#d82e62; background-color: inherit; position:relative; }
.memberBox .authorArea .messages .messagesList tr:first-child td::after{ content:' '; display:block; position:absolute; bottom:0; left:0; width:100%; height:3px; background-color:#d82e62;}
.memberBox .authorArea .messages .messagesList tr td{ background-color:#FFF; border-bottom: #fde9df 10px solid; padding:2em 1em;}
.memberBox .authorArea .messages .messagesList tr td a{ display:block; width:calc(100%); overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:5;}
.memberBox .authorArea .messages .messagesList tr td a:hover{ cursor:pointer; text-decoration:underline;}
.memberBox .authorArea .messages .messagesList tr td:nth-child(3){ width:50px;}
.memberBox .authorArea .messages .messagesList tr td:nth-child(4){ width:30px;}
.memberBox .authorArea .messages .messagesList tr td:nth-child(5){ width:100px;}
.memberBox .authorArea .messages .messagesList tr td:nth-child(5) a{ display:inline-block; margin:0.2em 0; height:30px; width:30px;}
.memberBox .authorArea .messages .messagesList tr td:nth-child(5) a img{ width:100%; }

@media only screen and (max-width: 600px){
.memberBox .authorArea .messages .messagesList tr:first-child{ display:none;}
.memberBox .authorArea .messages .messagesList tr{ background-color:#d82e62; text-align:right; margin-bottom:1em; display:block;}
.memberBox .authorArea .messages .messagesList tr td{ position:relative; display:inline-block; text-align:left; width:calc(100% - 6em) !important; border-bottom: #d82e62 1px solid; padding:1em; }
.memberBox .authorArea .messages .messagesList tr td:before { content: attr(data-col); display:block; position:absolute; left:-3em; top:50%; transform:translateY(-50%); color: #FFF;}
.memberBox .authorArea .messages .messagesList tr td span{ width:csalc(100% - 4em);}
.memberBox .authorArea .messages .messagesList tr td:nth-child(5){ border-bottom: none;}
.memberBox .authorArea .messages .messagesList tr td:nth-child(5) a{ margin:0 0.5em;}
}

.memberBox .authorArea .publish .formList{ width:100%; font-size:1.2em; padding:1em 0; border-bottom:none;}
.memberBox .authorArea .publish .formList tr td{ font-size:0.9em; padding:0.5em 0; color:#666; font-weight:bold; text-align:left;}
.memberBox .authorArea .publish .formList tr td:nth-child(1){ width:6em;}
.memberBox .authorArea .publish .formList tr td input,.memberBox .authorArea .publish .formList tr td select,.memberBox .authorArea .publish .formList tr td textarea{ width:calc(100% - 12px); font-size:0.9em; padding:5px; border-radius:5px; border:1px #999 solid; vertical-align:middle;}
.memberBox .authorArea .publish .formList tr td select{ width:100% !important;}

.memberBox .authorArea .publish .formList tr:nth-child(2) td:nth-child(2) div{ width:calc(100% - 6em); float:left;}
.memberBox .authorArea .publish .formList tr:nth-child(2) td:nth-child(2) a{ width:calc(5em - 10px); display:block; float:right; text-align:center; margin:0; padding:5px; font-size:1em;}

.memberBox .authorArea .publish .uploadImg{ width:calc(33.33% - 20px); padding:10px; float:left; text-align:center;}
.memberBox .authorArea .publish .uploadImg .imgMask{ overflow:hidden; position:relative; background-color:; border:1px #DDD solid;}
.memberBox .authorArea .publish .uploadImg .imgMask::after{ content:''; display:block; padding-top:70%; }
.memberBox .authorArea .publish .uploadImg .imgMask img{ height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.memberBox .authorArea .publish .uploadImg input{ border:0; background-color:#EEE; border-radius:0; font-size:0.8em; width: calc(100% - 10px); padding: 5px;}

@media only screen and (max-width: 600px){
.memberBox .authorArea .publish .formList{ position:relative; font-size:1em; }
.memberBox .authorArea .publish .formList tr{ display:block; position:relative; padding-top:2em;}
.memberBox .authorArea .publish .formList tr td:nth-child(1){ position:absolute; top:0; width:100%;}
.memberBox .authorArea .publish .formList tr td:nth-child(2){ display:block; width:100%;}
}