body { margin: 0; padding: 0 10px; }

a { text-decoration: none; }

li { list-style: none; }

strong { font-weight: 400; }

img { display: block; margin: 0 auto; max-width: 100%; }

.container { max-width: 640px; margin: 0 auto; background: #f4f4f4; box-shadow: 0 0 10px #999; }

.header { border-bottom: 1px solid #dbdbdb; margin-bottom: 15px; }

.header-top h1 { font-size: 22px; margin: 0; font-weight: 400; padding: 10px 0 10px 10px; }

.header-top h1 span { font-size: 30px; color: #f54343; font-weight: bold; font-family: "Georgia"; }

.header-middle { height: 60px; line-height: 60px; }

.header-middle-left { float: left; margin-left: 10px; }

.header-middle-left p { font-size: 12px; color: #999; line-height: 12px; }

.header-middle-left p a { font-size: 14px; color: #999; }

.header-middle-left p a:hover { color: #607fa6; }

.header-middle-right { float: right; margin-right: 10px; }

.header-middle-right a { display: inline-block; width: 40px; height: 40px; background: #86c81e; border-radius: 100%; text-align: center; line-height: 42px; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; }

.header-middle-right a .iconfont { color: white; font-size: 28px; }

.header-middle-right a:hover { background: #00b932; }

.header-bottom { text-align: right; padding-bottom: 10px; margin-right: 10px; }

.header-bottom a { margin-left: 20px; }

.header-bottom a .num { font-family: "Georgia"; font-size: 16px; font-weight: bold; color: #f54343; }

.header-bottom a .text { color: #999; font-size: 12px; }

.header-bottom a:hover .num { color: #607fa6; }

@media screen and (max-width: 340px) { .header-middle-right { display: none; } }

.main { width: 95%; margin: 0 auto; font-size: 17px; }

.main .service { text-align: center; }

.main .service p { line-height: 24px; }

.main .service .id { font-weight: bold; color: #22a48a; }

.main .service .id #line_click { color: #22a48a; background: white; }

.main .service .button img { margin: 0; width: 95%; }

.main .service .button:hover { opacity: 0.9; }

.main p { line-height: 1.5; color: #3f3f3f; }

.main-img { display: block; margin: 0 auto; max-width: 100%; }

.main-summary { margin: 16px 0; border-left: 5px solid #dbdbdb; padding-left: 5px; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; }

.main-summary:hover { border-left: 5px solid #f54343; background: #f9f2f4; }

.introduce { width: 640px; height: 150px; padding: 0 4px; display: table-cell; vertical-align: middle; -webkit-box-shadow: inset 0 4px 5px -3px #999; box-shadow: inset 0 4px 5px -3px #999; border-bottom: 1px solid #dbdbdb; position: relative; }

.introduce-box { font-size: 0; }

.introduce-box-left { display: inline-block; width: 20%; margin-right: 6%; position: relative; }

.introduce-box-left img { max-width: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -30px; }

.introduce-box-right { display: inline-block; width: 70%; }

.introduce-box-right span { font-size: 18px; font-weight: bold; }

.introduce-box-right p { line-height: 14px; color: #3f3f3f; font-size: 14px; }

.introduce .button { width: 180px; height: 35px; background: #00b932; border-radius: 6px; text-align: center; line-height: 35px; position: absolute; top: 30%; right: 5%; }

.introduce .button a { color: white; font-size: 16px; }

.introduce .button:hover { background: #01c700; }

@media screen and (min-width: 640px) { .introduce-box-left img { margin-top: -100px; }
  .introduce-box-right p { font-size: 16px; }
  .introduce-box-right p span { font-size: 20px; } }

@media screen and (max-width: 370px) { .introduce { height: 120px; }
  .introduce-box-left img { margin-top: -70px; }
  .introduce-box-right p { font-size: 12px; line-height: 12px; }
  .introduce-box-right p span { font-size: 16px; }
  .introduce .button { width: 90px; height: 30px; line-height: 27px; }
  .introduce .button a { font-size: 13px; } }

.comment { width: 95%; margin: 0 auto; margin-top: 20px; padding-bottom:100px;}

.comment-title { color: red; font-size: 20px; font-weight: bold; margin-bottom: 20px; }

.comment-list { margin-bottom: 10px; border-bottom: 1px dashed #999; }

.comment-list:last-child { margin-bottom: 0; border-bottom: none; }

.comment-list .name { font-size: 14px; color: #607fa6; }

.comment-list .name:hover { color: #104E8B; }

.comment-list p { font-size: 14px; color: #2b2b2b; }

.comment-list-bottom { padding-bottom: 30px; }

.comment-list-bottom-time { float: left; font-size: 12px; color: #999; }

.comment-list-bottom-btn { float: right; font-size: 12px; }

.comment-list-bottom-btn a { color: #000; }

.comment-list-bottom-btn a:hover { color: #8B0000; }

.comment-list-bottom-btn .num { margin-left: 5px; color: #f54343; font: 16px georgia; }

.comment-list-bottom-btn .fg { color: #999; margin-left: 5px; margin-right: 5px; }

.comment-display { display: none; }

.comment-more { color: #000; text-align: center; margin: 10px 0; display: block; }

.footer { height: 180px; border-top: 1px solid #999; text-align: center; }

.footer-nav { margin-top: 10px; }

.footer-nav a { color: black; font-size: 12px; border-right: 1px solid black; padding-right: 5px; }

.footer-nav a:hover { color: #104E8B; }

.footer-nav a:last-child { border-right: none; }

.nav-br { display: none; height: 0; }

@media screen and (max-width: 600px) { .footer { height: 160px; }
  .nav-br { display: block; }
  .footer-nav a:nth-child(4) { border-right: none; } }

@media screen and (max-width: 320px) { .footer { height: 160px; } }

.guild { max-width: 640px; position: fixed; bottom: -4px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; }

.guild .id { text-align: center; color: #22a48a; font-size: 16px; line-height: 35px; background: white; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; }

.guild img { max-width: 100%; background: white; }

/* @media screen and (max-width: 320px) {
  .guild{padding: 10px 0 15px 10px !important;}
  .guild p{padding-top: 5px !important;}} */

#red { font-size: 1rem; color: #f54343; font-family: "Georgia"; }
#bold { font-weight: bold; }
#pink { color: #c7254e; background: #f9f2f4; }
.pb { text-align: center; font-size: 1.2rem; font-weight: bold; border-top: 2px solid #c7254e; border-bottom: 2px solid #c7254e; }
#pink-bg { color: #fff; background: #c7254e; display: block; padding: 4px 8px; margin: 1px 0; }
.middle { text-align: center; }
#pink-b { color: #c7254e; background: #f9f2f4; font-weight: bold; }