@charset "utf-8";
@import url("menu.css");

/*a { color: #fff; }*/
a:hover { color: #999; text-decoration: none; }
button { outline:none; }

/*IE 6 不支援最大寬度，因此寬度預設為 100%*/
.ie6 img { width: 100%; }

body { background: #101010; font-family: "Microsoft JhengHei", 微軟正黑體, arial, sans-serif; }
/*body.noscroll { position: fixed; width: 100%; overflow: hidden; }*/

@media (min-width: 1200px) {
    #articlePage #main-col.col-lg-9 { width: 100%; }
}

.modal-backdrop { background-color: #fff; }
.modal-backdrop.in { opacity: .05; }

.btn.gray, div.gray { background: #3F464E !important; }
.btn { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang TC', '微软雅黑', 'Microsoft YaHei', '华文细黑', 'STHeiti', sans-serif; }

/*----------footer----------*/
/*footer { background: #ff6066; }*/
footer section { padding: 30px 0; text-align: center; text-transform: capitalize; font-size: 16px;
	font-family: "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", sans-serif; color: #fff; }
footer section a { color: #fff; }
footer section a:hover { color: #fff !important; }
footer section .link { font-weight: bold; }



/*----------common item box----------*/
ul li .item { display: block; margin: 4%; background-color: #eee; position: relative; }
.item .clearfix { padding: 10px; overflow: hidden; }
.item .title { font-size: 16px; height: 52px; margin: 0 0 10px;
	line-height: 1.5; font-family: "Microsoft JhengHei", 微軟正黑體, arial, sans-serif; font-weight: 700;
	color: #333; text-overflow: ellipsis; overflow: hidden; }

/*----------標籤----------*/
/*.tags, .item .tags, .item ul.posted { margin: 0; padding: 0; list-style: none; display: block; }
.item .tags { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tags li, .item .tags li { width: auto; float: none; display: inline-block;
	margin: 0 4px 4px 0; font-size: 13px; white-space: nowrap; padding-right: 100px; color: #999; }	
.tags li a, .item .tags li a { border: 1px solid #fff; background: #fff; border-radius: 3px;
	display: block; padding: 0 4px; line-height: 18px; }*/

/*----------標籤顏色----------*/
/*.tags li.all a, .tags li.fate a, .tags li.love a, .tags li.work a,.tags li.personality a,
.tags li.puzzle a, .tags li.issue a, .tags li.poll a, .tags li.friendship a { color:#fff !important; }
.tags li.all a, .tags.color-or li.all a, .tags.color-or li.color01 a { background: #5d5e5e; }
.tags li.fate a, .tags.color-or li.fate a, .tags.color-or li.color02 a { background: #74bc48; }
.tags li.love a, .tags.color-or li.love a, .tags.color-or li.color03 a { background: #eb6f70; }
.tags li.work a, .tags.color-or li.work a, .tags.color-or li.color04 a { background: #40a880; }
.tags li.personality a, .tags.color-or li.personality a, .tags.color-or li.color05 a { background: #eb9e79; }
.tags li.puzzle a, .tags.color-or li.puzzle a, .tags.color-or li.color06 a { background: #955694; }
.tags li.issue a, .tags.color-or li.issue a, .tags.color-or li.color07 a { background: #309ac1; }
.tags li.poll a, .tags.color-or li.poll a, .tags.color-or li.color08 a { background: #ff8400; }	
.tags li.friendship a, .tags.color-or li.friendship a, .tags.color-or li.color09 a { background: #ECBF0A; }*/

/*----------分享----------*/
/*.clip { position: absolute; right: 13px; bottom: 12px; width: 42px; height: 42px;
    border-radius: 21px; text-align: center; font-family: helvetica, arial; color: #ffa133;
    font-weight: normal; padding: 22px 0 0; line-height: 1em; display: block;
    overflow: hidden; background-color: #3cafef; }
.clip:visited { color: #ffa133; }
.clip.cliped { background: #ffa133 url('../images/common/share2.png') no-repeat center 5px; color: #fff; }
.clip:hover { text-decoration: none; background-position: center 8px; border-radius: 24px;
    width: 48px; height: 48px; padding: 25px 0 0; right: 10px; bottom: 9px; color: white; }
.clip span { color: #fff; position: absolute; top: 15px; width: 30px; left: 6px; }
.at-style-responsive .at-share-btn { padding: 5px 2px !important; }
#share-detail .content .share-button .at-share-btn-elements a { margin: 0 8px !important; }

@media only screen and (max-width: 480px) {
    .item .tags li { padding-right: 20px; }
    .clip { width: 40px; height: 40px; }
    .clip span { top: 14px; left: 3px; }
}*/

/*----------更多按鈕----------*/
/*.more-lg-btn, .share-lg-btn { display: table; margin: 0 auto 15px; text-align: center;
    min-width: 302px; max-width: 302px; height: 50px; border-radius: 25px; color: #fff;
    font-size: 171.42857142857142% !important; line-height: 50px; background-color: #ffa133; cursor: pointer; }
.more-lg-btn:before, .share-lg-btn:before { display: table-cell; vertical-align: middle;
    font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto;
    -webkit-font-smoothing: antialiased; padding-right: 5px; font-size: 28px; content: "\f054"; text-indent: 25px; }
.more-lg-btn:after, .share-lg-btn:after { content: attr(btn-text); display: table-cell; vertical-align: middle;
    text-indent: -60px; font-family: "Microsoft JhengHei", 微軟正黑體, arial, sans-serif; }
.more-lg-btn:hover, .share-lg-btn:hover { background-color: #ffbb66; color: #fff; text-decoration: none; }*/

/*----------lightbox分享按鈕----------*/
/*設定*/
.lightbox header { position: relative; padding: 10px 15px; -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px; border-top-right-radius: 5px; }
.lightbox header:after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 2px; background-color: #e9eaeb; }
.lightbox h4 { font-family: Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體", Helvetica, sans-serif;
    height: 30px; color: #3f464d; font-weight: bold; text-align: center; padding: 10px 15px 10px; }
.lightbox header button { padding: 3px 8px; opacity: 1; color: #fff; font-size: 24px; border-radius: 99px; 
    background-color: #a0aab0; margin: 10px 5px 0 0; }
.modal-content { box-shadow: 2px -2px 5px rgb(0 0 0 / 10%); border: 1px solid rgba(128,128,128,.3); background-color: #101010; }

/*light box 垂直置中*/
.vertical-alignment-helper { display: table; height: 100%; max-width: 450px; min-width: 450px; margin: 0 auto; }
.vertical-alignment-helper_ad { display: table; height: 100%; /*max-width: 336px;*/ min-width: 280px; margin: 0 auto; }
.vertical-align-center { display: table-cell; vertical-align: middle; }
@media only screen and (max-width: 480px) {
    .vertical-alignment-helper { max-width: 360px; min-width: 336px; }
}
.modal-backdrop { z-index: 0; }

/*禁止.modal-open時,body增加padding-right*/
.modal-open, .modal { padding-right: 0 !important; }

/*按鈕*/
/*.share-lg-btn { font-size: 22px !important; line-height: 50px; background-color: #ffa133;
    text-align: left; cursor: pointer; margin: 20px auto 20px; color: #fff; }
.share-lg-btn:before { font-size: 28px; content: "\f078"; text-indent: 25px; padding-right: 15px; }
.share-lg-btn.fb, .share-lg-btn.fb:hover { background: #3c5a98; }
.share-lg-btn.fb:before { content: "\f230"; }    
.share-lg-btn.line, .share-lg-btn.line:hover { background: #00c400; }
.share-lg-btn.line:before { content: "\f075"; }
.share-lg-btn:after { content: attr(btn-text); display: inline; vertical-align: middle; text-indent: -40%;
    font-family: "Microsoft JhengHei", 微軟正黑體, arial, sans-serif; }
@media only screen and (max-width: 400px) {
    .share-lg-btn, .share-lg-btn:hover { min-width: 100%; max-width: 100%; }    
}*/

/*會員個人資料*/
#user-detail .vertical-alignment-helper_ad { width: 80% !important; }
#user-detail section .content { display: flex; justify-content: center; margin: 60px 50px 0; min-height: calc(100vh - 221px); }

/*#info-1 { width: 50%; display: flex; flex-direction: column; color: #fff; }
#info-1 > div { margin-bottom: 20px; }
#info-1 .diamond { text-align: center; color: #FFD698; font-size: 18px; }
#info-1 .diamond img { width: 35px; }
#info-1 .photo { text-align: center; }
#info-1 .photo img { border-radius: 999px; width: 250px; }
#info-1 .name { text-align: center; font-size: 20px; color: 3f464d; }
#info-1 .gender { text-align: center; }
#info-1 .gender .age {}
#info-1 .gender .age.female { position: relative; padding: 2px 10px 2px 22px; background: #fff; border: 1px solid #fff; border-radius: 17px; color: #101010; }
#info-1 .gender .age.female:before { position: absolute; top: 3px; left: 4px; content: ''; width: 15px; height: 15px; background-image: url(../img/common/icon-female.png); background-size: cover; }
#info-1 .gender .fans { padding: 2px 10px; border: 1px solid #fff; border-radius: 17px; color: #fff; }*/

/*#info-2 { width: 50%; color: #fff; }
#info-2 > div:not(:first-child) { margin-bottom: 40px; }
#info-2 .icon { position: relative; text-align: center; margin-bottom: 10px; }
#info-2 .line { height: 5px; background-color: #81909f; border-radius: 99px; }
#info-2 .icon img { width: 50px; }
#info-2 .greeting {}
#info-2 .intro {}
#info-2 .hobby {}
#info-2 span { border: 1px solid #fff; color: #fff; padding: 8px 16px; border-radius: 17px; display: inline-block; margin-bottom: 10px; font-size: 18px; }
#info-2 p { font-size: 16px; line-height: 1.4; }*/

#user-detail footer { background: linear-gradient(to right, #6928BB, #FF1474); }
#user-detail footer div { padding: 10px 12px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; }

/*註冊登入*/
#login-detail .vertical-alignment-helper_ad { max-width: 456px; }
#login-detail .content { display: flex; flex-direction: column; align-items: center; padding: 60px 0; font-size: 12px; }

#login-detail .choose .content div { margin-top: 20px; color: #ECECEC; }
#login-detail .choose .logo img { width: 100px; margin-bottom: 10px; }
#login-detail .choose .btn { border-radius: 99px; font-size: 18px; font-weight: bold; width: 280px; cursor: pointer; }
#login-detail .choose .register-btn {background: linear-gradient(to right, #6928BB, #FF1474); color: #fff; padding: 9.5px 0; }
#login-detail .choose .login-btn { border: 3px solid #fff; color: #fff !important; padding: 7.5px 0; }
#login-detail .choose .terms { margin: 10px 0 60px !important; }
#login-detail .choose a { /*color: #2187dd;*/ color: #ECECEC;  font-weight: bold; }
#login-detail .choose .download { color: #81909f; }
#login-detail .choose .app img { width: 140px; }

#login-detail .login .content div, #login-detail .register .content div { margin-top: 20px; color: #fff; }
#login-detail .content .title { position: relative; font-size: 26px; font-weight: bold; color: #fff; }
#login-detail .content .title:after { position: absolute; bottom: -15px; left: -68px; content: ''; width: 240px;  height: 3px; background-color: #fff; }
#login-detail .content .title-des { padding-top: 10px; color: #fff; }
#login-detail .content .input { border: 1px solid #003f46; border-radius: 99px; }
#login-detail .content input { border: 1px solid #fff; font-size: 16px; background-color: #101010; color: #fff; text-align: center; width: 280px; height: 46px; border-radius: 99px; }
#login-detail .content input[disabled] { background-color: #101010; color: #fff; border: 1px solid #fff; }
#login-detail .content input:focus { outline:none; }
#login-detail .content .btn { border-radius: 99px; font-size: 18px; font-weight: bold; width: 280px; padding: 9.5px 0; cursor: pointer; color: #fff; }
#login-detail .content .black { background: #000; }
#login-detail .content .purple { background: #6928BB; }
#login-detail .content .gray { background: #81909f; }
#login-detail .content .blue { background: #2187dd; }
#login-detail .content .gradual { background: linear-gradient(to right, #6928BB, #FF1474); }
#login-detail .content .verification_result { color: #FF1474 !important; margin: 30px 0 -10px !important; }


#login-detail .content .send-des { width: 240px; color: #B3B3B3 !important; margin: 10px 0 10px !important; text-align: center; }
#login-detail .content .input-title { font-size: 12px; font-weight: bold; margin-bottom: -10px !important; }


#login-detail .register .birthday input { padding: 0 20px !important; }
#login-detail .register .gender div { display: inline-block; border-radius: 99px; padding: 20px; margin: 0 10px; cursor: pointer; border: 1px solid #fff; width: 60px; height: 60px; }
/*#login-detail .register .gender img { width: 30px; }*/
#login-detail .register .gender .male { /*background: #2187dd;*/ background-image: url(../img/common/icon-male2.png); background-repeat: no-repeat; background-size: 50% 50%; background-position:center; }
#login-detail .register .gender .female { /*background: #ff6066;*/ background-image: url(../img/common/icon-female2.png); background-repeat: no-repeat; background-size: 50% 50%; background-position:center; }
#login-detail .register .gender .male.active { background-image: url(../img/common/icon-male3.png); border: 1px solid #FF1474; }
#login-detail .register .gender .female.active { background-image: url(../img/common/icon-female3.png); border: 1px solid #FF1474; }

#login-detail .register .gender .opacity { opacity: .5; }

@media only screen and (max-width: 990px) and (min-width: 500px)  {
    #user-detail section .content { flex-direction: column; align-items: center; margin: 30px 50px 0; }
   /* #info-1 { width: 90%; }
    #info-2 { width: 90%; margin-top: 30px; padding-bottom: 60px; }
    #info-2 .line { position: relative; height: 1px; background-color: #e9eaeb; }
    #info-2 .line:before { position: absolute; top: -2px; left: 30%; content: ''; height: 5px; width: 40%; background-color: #81909f; border-radius: 99px; }*/
}

@media only screen and (max-width: 500px) {
    #user-detail section .content { flex-direction: column; align-items: center; margin: 30px 50px 0; }
    /*#info-1 { width: 100%; }
    #info-1 .photo img { width: 180px; }

    #info-2 { width: 100%; margin-top: 30px; padding-bottom: 75px; }
    #info-2 span { font-size: 16px; padding: 6px 12px; }
    #info-2 .icon img { width: 35px; }
    #info-2 .line { position: relative; height: 1px; background-color: #e9eaeb; }
    #info-2 .line:before { position: absolute; top: -2px; left: 30%; content: ''; height: 5px; width: 40%; background-color: #81909f; border-radius: 99px; }*/
}



/*----------文章列表----------*/
ul.same-with-mobile li .item {
    padding: 0; margin: 2.5% 0%; background-color: #fff; border-bottom: 1px dotted #bfbfbf; }
ul.same-with-mobile li .item:hover { opacity: .8; }
.same-with-mobile .item a { text-decoration: none; cursor: pointer; }
.same-with-mobile .item .title { color: #252525; font-weight: 700; font-size: 20px;
    margin-right: 20px; max-height: 30px; /*padding-left: 10px;*/ }
.same-with-mobile .item .description { margin: 0 30px 20px 0; color: #666; font-size: 14px;
    letter-spacing: 0.5px; max-height: 52px; overflow: hidden; position: relative; }
.same-with-mobile .item .clearfix { padding: 15px 5px 10px 20px; }
ul.article-part-lists { margin: 0; padding: 0; list-style: none; position: relative; top: 0; }
ul.article-part-lists li { width: 100%; float: none; }
.article-part-lists div.img-bg { height: 183px; margin-right: -10px; border-radius: 6px 0 0 6px; }
.img-bg { background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }

.wrap-swiper { padding: 0 4% 2%; }
 #part1 .wrap-swiper { padding: 4% 4% 2%; }
.owl-prev, .owl-next { position: absolute; top: 35%; z-index: 99; }
.owl-prev img, .owl-next img { width: 30px; }
.owl-prev { left: -6%; }
.owl-next { right: -6%; }
.owl-theme .owl-nav [class*=owl-] { background: none !important; }

@media screen and (max-width: 992px) {
    .wrap-swiper { padding: 0 6% 2%; }
     #part1 .wrap-swiper { padding: 4% 6% 2%; }
    .owl-prev, .owl-next { top: 35%; }
    .owl-prev img, .owl-next img { width: 25px; }
    .owl-prev { left: -8%; }
    .owl-next { right: -8%; }
}

@media screen and (max-width: 640px) {
    .wrap-swiper { padding: 0 6% 2%; }
    #part1 .wrap-swiper { padding: 4% 6% 2%; }
    .owl-prev, .owl-next { top: 37%; }
    .owl-prev img, .owl-next img { width: 22px; }
    .owl-prev { left: -8%; }
    .owl-next { right: -8%; }
    #user-detail .vertical-alignment-helper_ad { width: 90% !important; }
    .lightbox header button { font-size: 20px; padding: 2px 6px; }
}

@media screen and (max-width: 520px) {
    .owl-prev, .owl-next { top: 35%; }
    .owl-prev img, .owl-next img { width: 22px; }
}

@media screen and (max-width: 400px) {
    .owl-prev, .owl-next { top: 30%; }
    .owl-prev img, .owl-next img { width: 20px; }
}



/*----------首頁選單----------*/
.index_menu { position: fixed; z-index: 100; top: 50px; width: 100%; background: #fff; 
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.2); }
.index_menu div { width: 50%; float: left; text-align: center; font-size: 18px; font-weight: bold; padding: 5px 0; }
.index_menu div.active { border-bottom: 4px #ff584b solid; }

@media screen and (min-width: 768px) {
    footer section .footer-list { padding-left: 3%; }
}
@media screen and (max-width: 768px) {
    #login-detail .content { padding: 40px 60px; font-size: 12px; }
    /*#login-detail .choose .content { padding: 40px 60px; font-size: 12px; }*/
    #login-detail .choose .content .logo img { width: 85px; }
    #login-detail .choose .btn { font-size: 18px; padding: 8px 100px }
    #login-detail .choose .content .app img { width: 120px; }

    footer section { font-size: 14px; }
}