/**
 * 
 * @authors Bert
 * @date    2020-08-20 10:05:59
 * @version 1.0
 */
@import "../../common/less/global";
@import "./global";
/********header star ********/
.logo {
    width: 216px;
    height: 50px;
    background: url('../svgs/logo.svg') left center no-repeat;
    background-size: contain;
}

.loginAfterLogo {
    width: 216px;
    height: 50px;
    background: url('../svgs/loginAfterLogo.svg') left center no-repeat;
    background-size: contain;
    margin: auto 10px auto 10px;
}

@media screen and (max-width: 1386px) {
    .logo, .loginAfterLogo {
        width: 216px;
    }
}

.notLoggedTips {
    height: 107px;
}

.notLoggedHeader.notLoggedTips {
    .mobileNav .navBtn {
        top: 81px;
    }
}
.notLoggedHeader {
    .mobileNav .navBtn {
        top: 22px;
    }
}
/********header end********/

.backTop {
    position: fixed;
    bottom: 18px;
    right: 13px;
    z-index: 999;
    cursor: pointer;
}
.topBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .8);
}
.topBox:before {
    content: "";
    display: block;
    border-style: solid;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom: 10px solid #fff;
    margin-top: -8px;
}
.backTop.robot {
    bottom: 65px;
}

/********stories star ********/
.stories {
    max-width: 1000px;
    margin: auto;
    padding: 40px 0;
    .tit {
        font-size: 18px;
        .publicFont4;
        text-align: center;
    }
    .p1 {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.3px;
    }
    .p1 a {
        text-decoration: underline;
        letter-spacing: 0.3px;
        &:hover {
            text-decoration: none;
        }
    }
    .mt1 {
        margin-top: 20px;
    }
    .mt2 {
        margin-top: 12px;
    }
    .line {
        margin: 40px auto;
        height: 1px;
        background-color: rgba(238, 238, 238, 1);
    }
    .listTop {
        min-height: 22px;
        .add {
            float: left;
            display: block;
            position: relative;
            height: 22px;
            line-height: 22px;
            padding: 0 0 0 22px;
            cursor: pointer;
            font-size: 14px;
            .publicFont3;
        }
        .addIcon {
            width: 12px;
            height: 12px;
            border: 1px solid #0f0f0f;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -7px;
        }
        .addIcon:before,
        .addIcon:after {
            content: '';
            background-color: #0f0f0f;
            display: block;
            margin: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .addIcon:before {
            width: 8px;
            height: 1px;
        }
        .addIcon:after {
            width: 1px;
            height: 8px;
        }
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        .sort {
            float: right;
            margin-left: 32px;
        }
    }
    .sort {
        height: 22px;
        cursor: pointer;
        position: relative;
    }
    
    .sort .htmlBox {
        height: 22px;
        line-height: 22px;
        padding: 0 16px 0 0;
        overflow: hidden;
        font-size: 14px;
        color: #0f0f0f;
        span {
            .publicFont2;
        }
    }
    
    .sort:after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        right: 3px;
        top: 4px;
        border-bottom: 1px solid #0f0f0f;
        border-right: 1px solid #0f0f0f;
        transform: rotate(45deg);
        pointer-events: none;
    }
    
    .sort.active:after {
        transform: rotate(-135deg);
        top: 8px;
    }
    .sort.active .filterBoxA {
        display: block;
    }
    .filterBoxA {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
        position: absolute;
        top: 40px;
        left: 50%;
        width: 185px;
        margin-left: -100px;
    }
    
    .filterBoxA:after {
        position: absolute;
        display: block;
        top: -8px;
        left: 50%;
        margin-left: -11px;
        width: 0;
        height: 0px;
        content: '';
        border-style: solid;
        border-width: 8px;
        border-color: #fff #fff transparent transparent;
        transform: rotate(-45deg);
        box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.02);
    }
    
    .filterBoxA .dropItem {
        padding: 20px 0;
    }
    
    .filterBoxA .dropItem li {
        margin: 0 10px 0 24px;
        line-height: 31px;
        text-align: left;
        cursor: pointer;
        position: relative;
        padding: 0 18px 0 0;
        font-size: 14px;
        user-select: none;
    }
    
    .filterBoxA .dropItem li:hover span {
        text-decoration: underline;
    }
    
    .filterBoxA .dropItem li.active {
        color: @mainColor;
    }
    
    .filterBoxA .dropItem li.active:after {
        content: '';
        position: absolute;
        top: 7px;
        right: 4px;
        width: 6px;
        height: 10px;
        border-style: solid;
        border-width: 0 2px 2px 0;
        transform: rotateZ(45deg);
        color: @mainColor;
    }
    .filterBoxA .dropItem li span.active:after {
        content: '';
        position: absolute;
        top: 7px;
        right: 4px;
        width: 6px;
        height: 10px;
        border-style: solid;
        border-width: 0 2px 2px 0;
        transform: rotateZ(45deg);
        color: @mainColor;
    }
    .item {
        border-top: 1px solid rgba(238, 238, 238, 1);
        margin-top: 30px;
        padding-top: 30px;
    }
    .item:first-child {
        border-top: 0;
        margin-top: 10px;
    }
    .item h4 {
        font-size: 15px;
        line-height: 22px;
        .publicFont3;
    }
    .item p {
        line-height: 21px;
        font-size: 14px;
        margin-top: 16px;
        word-break: break-word;
    }
    .item a {
        text-decoration: underline;
    }
    .item a:hover {
        text-decoration: none;
    }
    .moreAndLess {
        font-size: 14px;
        color: #666;
        margin-top: 5px;
        .more {
            background-color: #fff;
            cursor: pointer;
            display: inline-block;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    &.main2 {
        position: relative;
        &:after{
            content: '';
            display: block;
            clear: both;
        }
    }
    &.main2 .leftWarp {
        width: 192px;
        float: left;
        margin-top: 67px;
    }
    &.main2 .rightWarp {
        width: ~"calc(100% - 252px)";
        float: right;
    }
    &.main2 .leftWarp .menu {
        overflow: hidden;
    }
    &.main2 .leftWarp .menu dd {
        padding: 0 0 16px 14px;
        position: relative;
        font-size: 13px;
        line-height: 18px;
        &:hover:before,
        &.active:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            border: 6px solid transparent;
            border-left: 6px solid #0f0f0f;
            left: 0;
            top: 3px;
        }
    }
    &.main2 .leftWarp .menu ul {
        display: none;
        padding: 5px 0 0 0;
    }
    &.main2 .leftWarp .menu dd.active ul {
        display: block;
    }
    &.main2 .leftWarp .menu ul li {
        font-size: 12px;
        line-height: 18px;
    }
    &.main2 .rightWarp .title {
        font-size: 20px;
        line-height: 27px;
        text-align: center;
        .publicFont3;
    } 
    &.main2 .rightWarp .items2 {
        margin-top: 40px;
    }
    &.main2 .rightWarp .item2 {
        min-height: 19px;
        padding: 0 0 15px 18px;
        position: relative;
        &::before {
            display: block;
            content: '';
            width: 10px;
            height: 10px;
            .importSvgBg(@mainColor, '../svgs/arrowDown.svg');
            position: absolute;
            left: 0;
            top: 4px;
            transform: rotate(-90deg);
        }
        dt {
            cursor: pointer;
            font-size: 14px;
            line-height: 19px;
        }
        dd {
            display: none;
            font-size: 13px;
            line-height: 18px;
            .publicFont3;
            word-break: break-word;
            margin-top: 8px;
        }
        dd a {
            .publicFont3;
            text-decoration: underline;
        }
        dd a:hover {
            text-decoration: none;
        }
        &.active:before {
            transform: rotate(0);
        }
        &.active dd {
            display: block;
        }
        .prevNextWarp {
            margin-top: 20px;
            font-size: 14px;
        }
        .prevNextWarp a {
            text-decoration: underline;
        }
        .prevNextWarp a:hover {
            text-decoration: none;
        }
    }
}
@media screen and (max-width: 1000px) {
    .sStories {
        padding: 45px 30px 45px;
    }
    .stories {
        margin: 0 15px;
        .listTop .add {
            clear: both;
            margin-bottom: 20px;
        }
        .listTop .sort:nth-child(2) {
            margin-left: 0;
        }
        &.main2 .rightWarp,
        &.main2 .leftWarp {
            float: none;
            width: 100%;
        }
        &.main2 .rightWarp .title {
            text-align: left;
            margin-top: 20px;
        }
    }
}
@media screen and (max-width: 768px) {
    .notLoggedHeader .mobileNav .navBtn {
        top: -45px;
    }
    .blogWrap .left_container h3 {
        padding: 0px 0 15px 0;
    }
    .stories {
        padding-top: 22px;
        .tit {
            font-size: 16px;
            letter-spacing: 0.3px;
            line-height: 24px;
        }
        .p1 {
            font-size: 15px;
            line-height: 23px;
        }
        .filterBoxA .dropItem li {
            span {
                font-size: 15px;
            }
        }
        .mt2 {
            margin-top: 18px;
        }
        .mt1 {
            margin-top: 22px;
        }
        .line {
            margin: 24px auto;
        }
        .item {
            margin-top: 24px;
            padding-top: 24px;
            p {
                line-height: 23px;
                font-size: 15px;
                margin-top: 8px;
                .publicFont2;
                letter-spacing: 0.3px;
                a {
                    .publicFont2;
                }
            }
            .lineClamp {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;
                position: relative;
                word-break: break-word;
            }
            .moreAndLess .more {
                font-size: 15px;
                height: 21px;
                &:hover {
                    text-decoration: none;
                }
            }
        }
        .item:first-child {
            margin-top: 24px;
            padding-top: 0;
        }
        .listTop .add {
            width: 95%;
            .publicFont4;
            margin-bottom: 16px;
            line-height: 23px;
        }
        .listTop  .addIcon {
            margin-bottom: -8px;
        }
        .listTop .sort {
            float: left;
            margin-left: 0px;
        }
        .listTop .sort:nth-child(2) {
            margin-left: 0;
            .filterBoxA {
                left: 75%;
            }
        }
        .listTop .sort:nth-child(3) {
            float: right;
        }
        .center {
            text-align: left;
            line-height: 22px;
            margin-top: 20px;
        }
        .filterBoxA.shortShow {
            left: 15px;
        }
    }
}
/********stories end ********/

/********dating blog start ********/
.blogWrapChDialog {
    padding: 0;
    font-size: 14px;
    line-height: 18px;
    max-width: 670px;
    text-align: left;
    width: auto;
}
.datingBlog {
    max-width: 1000px;
    margin: auto;
    padding: 40px 0;
    .item {
        border-top: 1px solid #D1D1D1;
        margin-top: 30px;
        overflow: hidden;
    }
    .item:first-child {
        border-top: 0;
        margin-top: 0;
    }
    .item .title {
        font-size: 20px;
        line-height: 27px;
        letter-spacing: 0.09px;
        margin-top: 30px;
        a {
            .publicFont4;
        }
    }
    .item:first-child .title {
        margin-top: 0;
    }
    .item .time {
        font-size: 15px;
        line-height: 27px;
        letter-spacing: 0.06px;
        margin-top: 8px;
    }
    .item .content {
        overflow: hidden;
        margin-top: 12px;
        font-size: 15px;
        line-height: 23px;
    }
    .item .content a.readMore {
        font-size: 15px;
        color: #666;
        display: inline-block;
        margin-top: 5px;
    }
    .item .img {
        display: block;
        float: left;
        width: 300px;
        height: 200px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 6px 12px 5px 0;
    }
}
.datingBlogDetail {
    max-width: 1000px;
    margin: auto;
    padding: 40px 0;
    .content {
        img {
            max-width: 100%;
            display: block;
            margin: auto;
        }
        .timer {
            margin: 15px 0 30px;
            font-size: 15px;
        }
        strong {
            font-size: 16px;
            .publicFont3;
        }
        li {
            font-size: 15px;
            line-height: 23px;
            margin-top: 10px;
            a {
                text-decoration: underline;
            }
        }
        ul li {
            list-style-type: disc;
        }
        ol li {
            list-style-type: decimal;
        }
        ul,
        ol {
            padding-left: 30px;
            margin: 15px 0;
        }
        p {
            margin: 10px 0;
            line-height: 23px;
            font-size: 15px;
            word-break: break-word;
            &.interracial_dating_solution {
                margin-bottom: 31px;
            }
            a {
                text-decoration: underline;
            }
            label {
                font-weight: bold;
            }
        }
        h3 {
            margin: 15px 0;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            .publicFont4;
            a {
                .publicFont4;
                text-decoration: underline;
            }
        }
        h1 {
            font-size: 32px;
        }
        h2,
        h1.title {
            font-size: 24px;
        }
        h2.subTitle {
            .publicFont2;
            font-size: 15px;
            margin-bottom: 10px;
        }
        h3 {
            font-size: 18px;
        }
        h4 {
            font-size: 16px;
        }
        h5 {
            font-size: 15px;
        }
        h6 {
            font-size: 15px;
        }
    }
    .bottomMenu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    .bottomMenu a {
        font-size: 14px;
        &:hover{
            text-decoration: underline;
        }
    }
    .btnWrap{
        text-align: center;
        margin-top: 52px;
    }
    .btnWrap .btn {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding: 0 65px;
    }
    .contentTable {
        border-collapse: collapse;
        border: 0;
        width: 100%;
    }
}
@media screen and (max-width: 1400px) {
    .publicHeader .header .nav{
        width: 880px;
    }
}
@media screen and (max-width: 1000px) {
    .datingBlog {
        padding: 15px 0 24px 0;
        margin: 25px 15px;
        .item  .img {
            clear: both;
            margin: 0 0 10px 0;
            float: none;
        }
    }
    .datingBlogDetail {
        padding: 15px 0;
        margin: 0 15px;
    }
}
@media screen and (max-width: 768px) {
    .datingBlog {
        .press_page .topWrap {
            padding: 0;
        }
        .item {
            .title {
                a {
                    .publicFont3;
                }
            }
            .img {
                display: block;
                margin: 0 auto 10px;
            }
        }
    }
    .datingBlogDetail {
        ul li, ol li, .content p {
            font-size: 15px;
            line-height: 23px;
        }
        .bottomMenu a {
            font-size: 15px;
        }
    }
}
@media screen and (max-width: 428px) {
    .datingBlog .item .img{
        width:100%;
    }
}
/********dating blog end ********/

/********landing page start********/
.landingPage {
    .banerWarp {
		width: 100%;
		min-width: 1000px;
		height: 600px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
	}
    .baner1 {
		background-image: url('../img/landingPageBaner1.png');
	}
    .baner2 {
		background-image: url('../img/landingPageBaner2.png');
	}
    .baner3 {
		background-image: url('../img/landingPageBaner3.png');
	}
    .baner4 {
		background-image: url('../img/landingPageBaner4.png');
	}
    .banerWarp .content {
		max-width: 1000px;
		margin: auto;
        overflow: hidden;
        height: 600px;
        position: relative;
	}
    .searchArea {
        width: 383px;
        background-color: rgba(0, 0, 0, 0.5);
        box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
        border-radius: 20px;
        color: #fff;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    .searchArea select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 34px;
    }
    .searchArea .selectWrapper {
        position: relative;
        display: inline-block;
        width: 100%;
    }
    .searchArea .selectWrapper::after {
        content: "";
        width: 6px;
        height: 6px;
        position: absolute;
        right: 10px;
        top: 11px;
        transform: translateY(-50%);
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
        pointer-events: none;
    }
    .searchArea h2 {
        border-radius: 19px 19px 0 0;
        line-height: 45px;
        font-size: 18px;
        text-shadow: 0 1px #226ba7;
        background: linear-gradient(to top,#4cb1f7,#32a0ec);
        text-align: center;
        .publicFont4;
    }
    .searchArea .formBox {
        padding: 15px 48px 33px 48px;
    }
    .searchArea .item1 {
        display: flex;
        align-items: center;
        margin-top: 12px;
    }
    .searchArea .item1 label,
    .searchArea .item2 label {
        width: 100px;
        min-width: 100px;
        font-size: 14px;
        .publicFont3;
    }
    .searchArea .item1 select {
        flex: 1
    }
    .selectA {
        font-size: 14px;
        padding: 5px 6px;
        border: 2px solid #b5bec4;
        background: #5b6e7a;
        border-radius: 8px;
        color: #fff;
        appearance: revert;
        width: 100%;
    }
    .searchArea .item2 {
        margin-top: 10px;
    }
    .searchArea .item2 label {
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }
    .searchArea .item2 ul {
        display: flex;
        align-items: center;
    }
    .searchArea .item2 ul li.w2 {
        width: ~"calc((100% - 60px) / 2)";
    }
    .searchArea .item2 ul li.w1 {
        width: 60px;
        text-align: center;
        font-size: 14px;
        .publicFont3;
    }
    .searchArea .quickSearch {
        background: #fd9f52;
        border-radius: 8px;
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        text-shadow: 0 1px #df8d48;
        margin-top: 16px;
        outline: 0;
        cursor: pointer;
        a {
            color: #fff;
            font-size: 18px;
            .publicFont4;
        }
    }
    .siteCountInfo {
        background-color: #f6faff;
    }
    .siteCountInfo ul {
        max-width: 1200px;
        margin: auto;
        padding: 38px 0 58px 0;
        display: flex;
        li {
            flex: 1;
        }
        .svg {
            width: 70px;
            height: 70px;
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .svgIcon {
                margin: auto;
            }
        }
        .svg1 {
            .importSvgBg(@mainColor, '../svgs/psMembers.svg');
            width: 90%;
            height: 90%;
        }
        .svg2 {
            .importSvgBg(@mainColor, '../svgs/psConversations.svg');
            width: 80%;
            height: 80%;
        }
        .svg3 {
            .importSvgBg(@mainColor, '../svgs/psBlog.svg');
            width: 58px;
            height: 58px;
        }
        .svg4 {
            .importSvgBg(@mainColor, '../svgs/psStory.svg');
            width: 58px;
            height: 58px;
        }
        .svg5 {
            .importSvgBg(@mainColor, '../svgs/home_ic_service.svg');
            width: 58px;
            height: 58px;
        }
        .svg6 {
            .importSvgBg(@mainColor, '../svgs/ic_safe.svg');
            width: 58px;
            height: 58px;
        }
        h3 {
            text-align: center;
            font-size: 18px;
            line-height: 30px;
            .publicFont4;
        }
        p {
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            .publicFont3;
        }
    }
    .website {
		font-size: 16px;
		line-height: 25px;
		.publicFont3;

		a {
			text-decoration: underline;

			&:hover {
				text-decoration: none;
			}
		}
	}
    .main1 {
        max-width: 1000px;
        margin: auto;
        padding: 30px 0;
    }
    .pageContent {
        clear: both;
        ol{
            margin-left: 40px;
            li{
                font-size: 16px;
                line-height: 22px;
                margin-top: 10px;
                padding-left: 5px;
                list-style-type: decimal;
            }
        }
    }

    .pageContent .title {
        font-size: 32px;
    }
    
	.pageContent h1,
	.pageContent h2,
	.pageContent h3,
	.pageContent h4,
	.pageContent h5,
	.pageContent h6 {
		display: block;
		font-size: 24px;
		line-height: 36px;
		padding: 38px 0 0 0;
	}
    .pageContent .p2 {
        font-size: 16px;
    }
    .pageContent h1 {
        .publicFont4;
    }
    .pageContent p {
		font-size: 16px;
		color: #333;
		line-height: 24px;
		padding: 16px 0 0 0;
	}
    .pageContent p strong {
        .publicFont4;
    }
    .pageContent .flImg {
        float: left;
        width: 350px;
        height: 266px;
        margin: 7px 15px 10px 0;
        border-radius: 5px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .pageContent .flImg1 {
        background-image: url('../img/landingPageImg1.jpg');
    }
    .pageContent .flImg2 {
        background-image: url('../img/landingPageImg2.jpg');
    }
    .pageContent .flImg3 {
        background-image: url('../img/landingPageImg3.jpg');
    }
    .pageContent .flImg4 {
        background-image: url('../img/landingPageImg4.jpg');
    }
    .pageContent .adbaner {
        width: 100%;
        display: block;
        clear: both;
        height: 0;
        padding-bottom: ~"calc((100% / 1050) * 200)";
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-image: url('../img/adbanner.png');
        cursor: pointer;
    }
    .pageContent p a:hover {
        text-decoration: underline;
    }
    .moreDatingAdvice {
		display: flex;
		margin-top: 25px;
	}

	.moreDatingAdvice li {
		width: ~"calc((100% - 80px) / 3)";
		margin-right: 40px;
	}

	.moreDatingAdvice li:last-child {
		margin-right: 0;
	}

	.moreDatingAdvice .img {
		height: 210px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.moreDatingAdvice .datingAdvice01 {
		background-image: url('../img/herpesDating.jpeg');
	}

	.moreDatingAdvice .datingAdvice02 {
		background-image: url('../img/hivDating.jpeg');
	}

	.moreDatingAdvice .datingAdvice03 {
		background-image: url('../img/hpvDating.jpeg');
	}

    .moreDatingAdvice .datingAdvice04 {
		background-image: url('../img/stdDating.jpeg');
	}

	.moreDatingAdvice .font1 {
		text-decoration: center;
		margin-top: 15px;
		font-size: 18px;
	}

	.moreDatingAdvice .font1 a,
	.moreDatingAdvice p a {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	.moreDatingAdvice p {
		font-size: 16px;
		line-height: 24px;
		margin-top: 16px;
	}
    .articleWarp {
		max-width: 1000px;
		margin: 40px auto;
	}

	.articleWarp h2 {
		margin-top: 30px;
		font-size: 20px;
		text-transform: uppercase;
		.publicFont4;
	}

    .articleWarp h2.hasline {
        border-bottom: 1px solid #d8d8d8;
        margin: 80px 0 25px 0;
        padding-bottom: 10px;
    }

	.articleWarp ul.articles {
		margin-top: 5px;
        padding-bottom: 15px;
	}

	.articleWarp ul.articles li {
		margin-top: 10px;
		line-height: 22px;
		font-size: 16px;
		padding-left: 20px;
		position: relative;

		a {
			text-decoration: none;
		}

        a:hover {
            text-decoration: underline !important;
		}

	}

	.articleWarp ul.articles li:before {
		content: '';
		display: block;
		height: 7px;
		width: 7px;
		background: #0f0f0f;
		position: absolute;
		left: 1px;
		top: 7px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.articleWarp .moreWarp {
		text-align: right;

		a {
			text-decoration: underline;
			font-size: 18px;
		}
	}

    .topCities {
        padding: 10px 0 0 0;
        font-size: 16px;
        .publicFont3;
        color: #333;
        h2 {
            .publicFont4;
            font-size: 20px;
            text-transform: uppercase;
        }
        a {
            color: #0f0f0f;
            margin-top: 10px;
            display: inline-block;
            width: 19%;
            height: 30px;
        }
        a:hover {
            text-decoration: underline;
        }
    }

    .landingPageDetail {
        img {
            padding-right: 10px;
        }
    }
}
@media screen and (max-width: 768px) {
    .landingPage {
        .banerWarp {
            min-width: inherit;
        }
        .banerWarp .content {
            margin: 0 15px;
        }
        .searchArea {
            width: 100%;
            max-width: 383px;
        }
        .searchArea .formBox {
            padding: 15px;
        }
        .siteCountInfo ul {
            display: block;
            overflow: hidden;
            padding: 20px 0 40px 0; 
        }
        .siteCountInfo ul li {
            width: 49%;
            float: left;
            margin: 20px 0 0 0;
        }
        .pageContent,
        .website {
            margin: 0 15px;
        }
        .pageContent .flImg {
            max-width: 100%;
        }
        .moreDatingAdvice {
			display: block;
		}

		.moreDatingAdvice li {
			margin: 20px 0 0 0;
			width: 100%;
		}
        .topCities a {
            width: 49%;
            height: 25px;
        }
        .articleWarp h2.hasline {
            margin: 87px 0 0px 0;
            margin-bottom: none;
            font-size: 16px;
            text-align: center;
        }
        .articleWarp {
			margin: 30px 0 0;
            padding: 0 16px 24px 16px;
		}
        .pagination {
            width: 240px;
        }
        .pagenav .pagination li.disabled{
            width: 62px;
            height: 30px;
            border: 1px solid #CCCCCC;
        }
        .pagenav .pagination li.active{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background: #111110;
            a {
                color: #fff;
            }
        }
        .pagenav .pagination li{
            margin-right: 0;
            box-sizing: border-box;
        }
        .pagenav .pagination li.next{
            font-size: 20px;
            width: 62px;
            position: static;
            text-align: center;
            box-sizing: border-box;
            height: 30px;
            border: 1px solid #CCCCCC;
        }
        .pagenav .pagination li{
            width: 30px;
            line-height: 30px;
            text-align: center;
            height: 30px;
            border: 1px solid #CCCCCC;
        }
        .pagenav .pagination li.prev{
            position: static;
        }
        .pageContent .p2 {
			font-size: 16px;
			line-height: 24px;
			.publicFont3;
		}
        .landingPageDetail {
            img {
                padding-right: 0;
            }
        }
    }
}
/********landing page end********/
/********stdQa page star********/
@-webkit-keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
@keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
.stdQa {
    max-width: 1000px;
    margin: auto;
    padding: 48px 0;
    position: relative;
    min-height: 550px;
    .item .time {
        text-transform: capitalize;
    }
    .leftWarp {
        margin: 0 368px 0 0;
    }
    .leftWarp.detail {
        margin: 0;
    }
    .leftWarp.add {
        max-width: 750px;
        margin: auto;
    }
    .leftWarp.add h1.title {
        text-align: center;
        font-size: 15px;
        letter-spacing: 0.3px;
    }
    .leftWarp h1.title {
        line-height: 22px;
        text-transform: uppercase;
        position: relative;
        text-align: center;
        .publicFont3;
        letter-spacing: 0.3px;
    }
    .leftWarp .p1 {
        font-size: 14px;
        line-height: 21px;
        margin-top: 20px;
        .publicFont3;
    }
    .leftWarp .p1:nth-child(2) {
        margin-top: 55px;
    }
    .leftWarp.add .p1 {
        .publicFont3;
        letter-spacing: 0.3px;
        color: #0f0f0f;
    }
    .leftWarp.add .p1 a {
        letter-spacing: 0.3px;
    }
    .leftWarp .p1 a {
        text-decoration: underline;
        .publicFont3;
        letter-spacing: 0.3px;
    }
    .leftWarp .p1 a:hover {
        text-decoration: none;
    }
    .askBtnDiv {
        text-align: center;
    }
    .askBtn {
        margin-top: 20px;
        display: inline-block;
        height: 40px;
        color: #000000;
        line-height: 40px;
        font-size: 12px;
        text-transform: uppercase;
        padding: 0;
        .publicFont3;
        cursor: pointer;
    }

    .stdQaOpeBox {
        width: 100%;
        height: 40px;
        padding-bottom: 10px;
        padding: 0 0 30px 0;
    }
    .stdQaOpeBox .askBtn i {
        border: 1px solid #0f0f0f;
        width: 14px;
        height: 14px;
        margin: 12px 8px 0 0;
        display: inline-block;
        display: inline-flex;
        position: relative;
        float: left;
    }
    .stdQaOpeBox .askBtn span {
        .publicFont4;
        float: left;
    }
    .stdQaOpeBox .askBtn i::before, .stdQaOpeBox .askBtn i::after {
        content: '';
        display: block;
        width: 8px;
        height: 1px;
        background: #0f0f0f;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        margin: auto;
    }
    .stdQaOpeBox .askBtn i::after {
        transform: rotate(90deg);
    }
    .stdQaOpeBox .selectBox {
        height: 37px;
        font-size: 14px;
        line-height: 37px;
        min-width: 154px;
        position: relative;
        float: right;
        border: 0px;
        margin-top: 15px;
        display: none;
    }
    .stdQaOpeBox .selectBox::before {
        display: none;
    }
    .stdQaOpeBox .selectBox .htmlBox {
        cursor: pointer;
        color: #0f0f0f;
        border: 0px;
    }
    .stdQaOpeBox .selectBox .htmlBox i {
        display: inline-block;
        margin-left: 8px;
        width: 8px;
        height: 8px;
        border-left: 1px solid #0f0f0f;
        border-bottom: 1px solid #0f0f0f;
        transform: rotate(-45deg);
        pointer-events: none;
        position: relative;
        top: -3px;
    }
    .stdQaOpeBox .selectBox.active .htmlBox i {
        transform: rotate(-225deg);
        top: 3px;
    }
    .stdQaOpeBox .selectBox .filterBoxA {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        position: absolute;
        width: 214px;
        z-index: 20;
    }
    .stdQaOpeBox .selectBox .filterBoxA {
        transform: translate(-50%, 0);
        left: 95%;
    }


    .stdQaOpeBox .selectBox .filterBoxA .dropItem {
        padding: 20px 0;
    }
    .stdQaOpeBox .selectBox .filterBoxA .dropItem li {
        margin: 0 10px 0 24px;
        line-height: 31px;
        text-align: left;
        cursor: pointer;
        position: relative;
        padding: 0 18px 0 0;
        font-size: 15px;
        user-select: none;
    }

    .leftWarp h1.title .askBtn {
        position: absolute;
        top: 50%;
        margin-top: -17.5px;
        right: 0;
    }
    .rightWarp {
        width: 285px;
        position: absolute;
        top: 48px;
        right: 0;
    }
    .listTop {
        margin-top: 25px;
        min-height: 22px;
        line-height: 22px;
        .total {
            color: #A0A0A0;
            font-size: 14px;
            .publicFont3;
            float: left;
        }
        .total span {
            color: #0f0f0f;
            .publicFont3;
        }
        .sort {
            float: right;
        }
        .sort .htmlBox {
            font-size: 14px;
            .publicFont3;
        }
        .sort .htmlBox span {
            color: #A0A0A0;
            .publicFont3;
        }
    }
    .title {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 16px;
        .publicFont4;
        color: #0F0F0F;
        line-height: 48px;
        letter-spacing: 1px;
    }
    .items {
    }
    .leftWarp.detail .items {
        border-top: none;
        margin-top: unset;
    }
    .answersNum {
        font-size: 16px;
        font-family: Hind-Medium, Hind;
        color: #000000;
        line-height: 26px;
        margin-top: 20px;
    }
    .item {
        border-bottom: 1px solid #f8f8f8;
        padding: 30px 0 20px 0;
        &:last-child {
            border-bottom: none;
        }
        .userInfo {
            position: relative;
            min-height: 50px;
        }
        .avatar {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #e9e9e9;
            border-radius: 50%;
            overflow: hidden;
        }
        .avatar .defaultAvatar {
            position: absolute;
            width: 80%;
            height: 80%;
            left: 10%;
            top: 10%;
            .importSvgBg(#fff,'../../common/svgs/defaultAvatar.svg');
        }
        .avatar .anonymousAvatar {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url('../../common/img/avatar_ic_anon.png');
            background-position: center;
        }
        .avatar .lazyImg {
            z-index: 2;
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            left: 0;
            top: 0;
        }
        .avatar .disabledTxt {
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            color: #999999;
            transform: translate(-50%, -50%) scale(.7, .7);
        }
        .info {
            margin: 0 0 0 62px;
            min-height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .titleArea {
            height: 19px;
            align-items: center;
        }
        .titleArea .delete {
            float: right;
        }
        .titleArea a:hover {
            text-decoration: underline;
            cursor: pointer;
        }
        .titleTxt {
            font-size: 14px;
            .publicFont3;
            color: #0f0f0f;
            line-height: 17px;
            a {
                .publicFont3;
            }
        }
        .titleArea .titleTxt {
            float: left;
        }
        .titleTxt a.link {
            text-decoration: underline;
        }
        .titleTxt a:hover {
            text-decoration: none;
        }
        .premium,
        .verified {
            float: left;
            margin-left: 5px;
            line-height: 18px;
            text-align: center;
            text-transform: uppercase;
            font-size: 12px;
            box-sizing: border-box;
        }
        .premium {
            width: 63px;
            height: 18px;
            border: 1px solid #1c1c1c;
        }
        .premium::before {
            content: 'PREMIUM';
        }
        .verified {
            // .importSvgBg(@mainColor,'../../common/svgs/icoVerify2.svg');
            background: url('../../common/svgs/icoVerify2.svg') no-repeat;
            width: 19px;
            height: 18px;
            position: relative;
        }
        .verified:hover .tips {
            display: block;
        }
        .verified .tips {
            text-transform: none;
            display: none;
            position: absolute;
            color: #fff;
            height: 26px;
            line-height: 26px;
            padding: 0 7px;
            white-space: nowrap;
            background-color: #0f0f0f;
            transform: translateX(-41%);
            top: calc(~"100% + 7px");
        }
        .verified .tips::before {
            content: '';
            display: block;
            position: absolute;
            border: 5px solid transparent;
            border-bottom: 5px solid #0f0f0f;
            height: 0;
            width: 0;
            left: 50%;
            margin-left: -5px;
            top: -10px;
        }
        .time {
            color: #999999;
            font-size: 14px;
            line-height: 19px;
            margin-top: 2px;
        }
        .subject {
            font-weight: bold;
            .publicFont3;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        .subject, .content {
            word-break: break-word;
            font-size: 14px;
            line-height: 21px;
            letter-spacing: -0.1px;
            margin-top: 20px;
            -webkit-line-clamp: 5;
        }
        .content a {
            border: none;
            text-decoration: underline;
            color: #0f0f0f;
            margin-left: 8px;
            // font-weight: bold;
            &:hover {
                text-decoration: none;
            }
        }

        .content a.noStyle {
            .publicFont2;
            border: none;
            text-decoration: initial;
            margin-left: auto;
            &:hover {
                text-decoration: none;
            }
        }

        .content .more {
            display: none;
        }

        .subject a {
            .publicFont4;
        }
        .lineClamp {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            position: relative;
            word-break: break-word;
        }
        .moreAndLess {
            .less, .more {
                font-size: 14px;
                height: 21px;
                cursor: pointer;
                display: inline-block;
                color: #666;
                margin-top: 5px;
                text-decoration: none;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .lineClamp .less {
            display: none;
        }
        .bottomWarp {
            display: flex;
            justify-content: flex-start;
            min-height: 22px;
            margin-top: 20px;
        }
        .bottomWarp li {
            margin: 0 70px 0 0;
            min-height: 22px;
            user-select: none;
            cursor: pointer;
            display: block;
            padding: 0 0 0 26px;
            position: relative;
            font-size: 16px;
            line-height: 22px;
            .voteCnt, .commentCnt {
                width: 15px;
                position: absolute;
                top: 5.5px;
            }
        }
        .bottomWarp li:last-child {
            margin-right: 0;
        }
        .bottomWarp li.likesBox {
            margin-right: 0;
        }
        .bottomWarp li .commentCnt
        .answers .ico {
            width: 24px;
            height: 24px;
            position: absolute;
            left: 0;
            top: 0;
            .importSvgBg(@mainColor,'../../common/svgs/Conversations.svg');
        }
        .like .ico,
        .liked .ico {
            width: 24px;
            height: 22px;
            position: absolute;
            left: 0;
            top: 0.2rem;
        }
        .like .ico {
            .importSvgBg(@mainColor,'../../common/svgs/overall_ic_like_normal.svg');
            opacity: 1;
        }
        .liked .ico {
            .importSvgBg(@mainColor,'../../common/svgs/overall_ic_like_selected.svg');
            opacity: 1;
        }
        .comment .ico {
            width: 21px;
            height: 21px;
            position: absolute;
            left: 0;
            top: 0.2rem;
            .importSvgBg(@mainColor,'../../common/svgs/overall_ic_comments_normal.svg');
        }
    }
    .detail {
        .item {
            .subject {
                overflow: unset;
                text-overflow: unset;
                display: block;
            }
            .titleTxt {
                font-size: 16px;
            }
        }
    }
    .noResult {
        a {
            text-decoration: underline;
        }
        a:hover {
            text-decoration: none;
        }
    }
    .leftWarp .note {
        color: #A4A4A4;
        font-size: 14px;
        line-height: 19px;
        padding: 20px 0 10px 0;
    }
    .sort {
        height: 22px;
        cursor: pointer;
        position: relative;
    }
    
    .sort .htmlBox {
        height: 22px;
        line-height: 22px;
        padding: 0 24px 0 0;
        overflow: hidden;
        font-size: 14px;
        color: #0f0f0f;
    }
    
    .sort:after {
        content: '';
        width: 7px;
        height: 7px;
        position: absolute;
        right: 3px;
        top: 4px;
        border-bottom: 1px solid #0f0f0f;
        border-right: 1px solid #0f0f0f;
        transform: rotate(45deg);
        pointer-events: none;
    }
    .sort.active:after {
        transform: rotate(-135deg);
        top: 8px;
    }
    .sort.active .filterBoxA {
        display: block;
    }
    .filterBoxA {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
        position: absolute;
        top: 40px;
        left: 50%;
        width: 185px;
        margin-left: -100px;
    }
    
    .filterBoxA:after {
        position: absolute;
        display: block;
        top: -8px;
        left: 50%;
        margin-left: -11px;
        width: 0;
        height: 0px;
        content: '';
        border-style: solid;
        border-width: 8px;
        border-color: #fff #fff transparent transparent;
        transform: rotate(-45deg);
        box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.02);
    }
    
    .filterBoxA .dropItem {
        padding: 20px 0;
    }
    
    .filterBoxA .dropItem li {
        margin: 0 10px 0 24px;
        line-height: 31px;
        text-align: left;
        cursor: pointer;
        position: relative;
        padding: 0 18px 0 0;
        font-size: 14px;
        user-select: none;
    }
    
    .filterBoxA .dropItem li:hover span {
        text-decoration: underline;
    }
    
    .filterBoxA .dropItem li.active {
        color: @mainColor;
    }
    
    .filterBoxA .dropItem li.active:after {
        content: '';
        position: absolute;
        top: 7px;
        right: 4px;
        width: 6px;
        height: 10px;
        border-style: solid;
        border-width: 0 2px 2px 0;
        transform: rotateZ(45deg);
        color: @mainColor;
    }

    .rightWarp .searchWarp {
        border: 1px solid #ebebeb;
        position: relative;
        display: flex;
        justify-content: flex-start;
        border-radius: 2px;
    }
    .rightWarp .searchWarp form {
        width: 100%;
        .close {
            cursor: pointer;
            display: block;
            position: absolute;
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            background: rgb(255, 255, 255) url("../../common/svgs/iconClose.svg") no-repeat center center;
        }
    }
    .rightWarp .searchWarp input[type=text] {
        width: ~"calc(100% - 70px)";
        box-sizing: border-box;
        padding: 10px 9px;
        font-size: 14px;
        border: 0;
        background-color: #fff;
    }
    .rightWarp .searchWarp .submit {
        width: 50px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rightWarp .searchWarp .searchIco {
        width: 24px;
        height: 24px;
        margin: auto;
        .importSvgBg(#000,'../../common/svgs/icoSearch1.svg');
        cursor: pointer;
    }
    .rightWarp .list {
        padding-top: 10px;
    }
    .rightWarp .list dd {
        font-size: 14px;
        line-height: 19px;
        margin-top: 10px;
    }
    .rightWarp .list dd a:hover {
        text-decoration: underline;
    }
    .rightWarp .list dt {
        margin-top: 20px;
        .publicFont2;
        font-size: 14px;
        font-weight: bold;
    }
    .likesBox {
        right: 0;
        top: 0;
        position: absolute;
        flex: 1;
        line-height: 22px;
        color: #0f0f0f;
        font-size: 14px;
        text-align: right;
        .num {
            position:relative;
            cursor: pointer;
            dl {
                z-index: 99999;
                width: 176px;
                position: absolute;
                text-align: left;
                top: 40px;
                right: 0;
                padding: 10px 12px;
                background: rgba(0, 0, 0, 0.74);
                color: #fff;
                line-height: 20px;
                display: none;
                font-size: 13px;
            }
            dd {
                height: 20px;
                overflow: hidden; 
                white-space: nowrap; 
                text-overflow: ellipsis;
            }
            .username{
                text-transform: uppercase;
            }
    
        }
        .num:hover {
            dl {
                display: block;
            }
        }
        span {
            padding-left: 8px;
            float: right;
        }
        & > dl {
            float: right;
            dd {
                position: relative;
                float: left;
                margin-left: -8px;
                border-radius: 50%;
                overflow: hidden;
                background: #fff;
                height: 22px;
                width: 22px;
            }
            dd:nth-child(1) {
                margin-left: 0;
                z-index: 5;
            }
            dd:nth-child(2) {
                z-index: 4;
            }
            dd:nth-child(3) {
                z-index: 3;
            }
            dd:nth-child(4) {
                z-index: 2;
            }
            dd:nth-child(5) {
                z-index: 1;
            }
        }
        
        .avatar {
            position:relative;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            left: 0rem;
            top: 0;
            overflow: hidden;
            background-size: 26px;
            -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
            background-color: #e9e9e9;
            box-sizing:border-box;
            &.specialUser{
                cursor: initial;
            }
        }
        .avatar .lazyImg {
            z-index: 2;
            width: 100%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            left: 0;
            top: 0;
        }

        .defaultAvatar {
            border-radius: 50%;
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            .importSvgBg(#fff,'../../common/svgs/defaultAvatar.svg');
        }
    }
  
    .commentWarp h2.title {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.1px;
        text-transform: uppercase;
        .publicFont3;
    }
    .commentWarp .btn {
        width: 98px;
        border: 0;
        border-radius: 2px;
    }
    .commentWarp .btn.disabled {
        background: #A4A4A4;
        cursor: inherit;
    }
    .commentWarp .editWarp {
        margin-top: 16px;
        .ql-editor {
            height:292px;
        }
    }
    .commentWarp .noCommentNote {
        color: #888;
        font-size: 15px;
        text-align: center;
        margin-top: 16px;
        padding-top: 40px;
    }
    .addFormWarp {
        padding: 12px 0;
    }
    .addFormWarp .formItem {
        margin-top: 24px;
        position: relative;
    }
    .addFormWarp .captcha.formItem {
        margin-top: 30px;
    }
    .addFormWarp .formItem label {
        font-size: 14px;
        line-height: 22px;
        display: block;
        .publicFont3;
        letter-spacing: 0.3px;
        span {
            color: #6D6D6D;
        }
    }
    .addFormWarp input[type=text],
    .addFormWarp textarea {
        box-sizing: border-box;
        padding: 9px 12px;
        font-size: 14px;
        display: block;
        width: 100%;
        border: 1px solid #d1d1d1;
        margin-top: 12px;
        resize: none;
    }
    .addFormWarp input[type=text]:focus,
    .addFormWarp textarea:focus  {
        border: 1px solid #0f0f0f;
    }
    .addFormWarp textarea[name=question_desc] {
        height: 120px;
        resize: none;
        margin-top: 12px;
    }
    .addFormWarp textarea[name=answer] {
        height: 200px;
    }
    .addFormWarp .mail_notify_input{
        position: relative;
        top: -3px;
        width: 16px;
        height: 16px;
    }
    .addFormWarp .ai_reply_status{
        position: relative;
        top: 10px;
        width: 16px;
        height: 16px;
    }
    .addFormWarp .ai_reply_status_label{
        position: relative;
        top: 10px;
        left: 14px;
        margin: 15px 0 10px 0;
        font-weight: normal !important;
        letter-spacing: 0.3px !important;
    }
    .addFormWarp .mail_notify_label{
        position: relative;
        left: 12px;
        font-weight: normal !important;
        letter-spacing: 0.3px !important;
    }
    .addFormWarp input[type=checkbox]::after{
        cursor: pointer;
        position: relative;
        width: 16px;
        height: 16px;
        font-size: 14px;
        margin-right: 8px;
    }
    .addFormWarp input[type=checkbox]::after{
        position: absolute;
        top: 0px;
        width: 16px;
        height: 16px;
        display: inline-block;
        visibility: visible;
        text-align: center;
        content: ' ';
    }
    .addFormWarp input[type=checkbox]:checked::after{
        background: rgb(255, 255, 255) url("../../common/svgs/popovers_check_selected.svg") no-repeat center center;
    }
    .addFormWarp input[type=checkbox]:checked {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .addFormWarp .formItem .selectBox {
        margin-top: 12px;
        border: none;
    }
    .addFormWarp .formItem.notify {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 10px;
        p {
            margin: 0 0 0 12px;
            font-size: 16px;
            line-height: 22px;
        }
    }
    .stdLoading {
        margin-top: 19px;
    }
    .stdLoading i {
        display: block;
        height: 30px;
        width: 30px;
        margin: 0 auto;
        background: rgba(0,0,0,-0.5) url("../../common/svgs/loading.svg") no-repeat center center;
        background-size: contain;
        animation:myRotate 1.5s linear infinite;
    }
    .loading_group {
        background-color: rgba(255, 255, 255, 1);
        width: 1000px;
        height: 85px;
        margin: 19px 0;
        text-align: center;
    }

    .note_text {
        width: 541px;
        height: 21px;
        overflow-wrap: break-word;
        color: rgba(27, 27, 27, 1);
        font-size: 14px;
        letter-spacing: 0.20000000298023224px;
        font-weight: 300;
        text-align: left;
        white-space: nowrap;
        line-height: 21px;
    }
    .answer_reload {
        height: 36px;
        border: 1px solid rgba(27, 27, 27, 1);
        width: 160px;
        margin: 19px auto;
        span {
            width: 52px;
            height: 36px;
            overflow-wrap: break-word;
            color: rgba(27, 27, 27, 1);
            font-size: 14px;
            letter-spacing: 0.20000000298023224px;
            text-transform: uppercase;
            font-family: Hind-Medium;
            font-weight: 500;
            text-align: right;
            white-space: nowrap;
            line-height: 36px;
        }
    }
    .answer_reload:hover {
        cursor: pointer;
    }
    
    .addFormWarp .btnBox {
        text-align: center;
    }
    .addFormWarp .btn {
        margin: 30px auto 0;
        display: block;
        width: 200px;
        border: 0;
    }
    .addFormWarp .btn.disabled {
        background: #a4a4a4;
        cursor: inherit;
    }
    .addFormWarp .btn.ask_disabled {
        cursor: inherit;
        border: 1px solid #888888;
        background-color: white;
        color: #888888;
    }
    .selectBox {
        position: relative;
        height: 44px;
        border: 1px solid #d1d1d1;
    }
    
    .selectBox.err {
        border: 1px solid #cb0000;
    }
    
    .selectBox .htmlBox {
        height: 44px;
        line-height: 44px;
        padding: 0 8px;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid #d1d1d1;
    }
    
    .selectBox select {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: pointer;
        opacity: 0;
        z-index: 1;
        padding: 0 16px;
    }
    
    .selectBox:before {
        content: '';
        width: 8px;
        height: 8px;
        position: absolute;
        right: 10px;
        top: 16px;
        border-bottom: 1px solid #0f0f0f;
        border-right: 1px solid #0f0f0f;
        transform: rotate(45deg);
    }
    .checkbox {
        width: 14px;
        height: 14px;
        border: 1px solid @mainColor;
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .checkbox.active {
        background-color: @mainColor;
    }
    .checkbox.active:before {
        content: '';
        position: relative;
        display: inline-block;
        top: -10%;
        width: 4px;
        height: 10px;
        border-style: solid;
        border-width: 0 2px 2px 0;
        transform: rotateZ(45deg);
        color: #fff;
    }
    .submitBox {
        display: flex;
        justify-content: space-between;
    }
    .anonymously{
        margin-top: 7px;
        .anonymously_label p {
            display: inline-block;
        }
    }
    .anonymously input[type=checkbox], .anonymously label {
        cursor: pointer;
        font-size: 14px;
    }
    .anonymously input[type=checkbox] {
        vertical-align: middle;
        margin-right: 8px;
        width: 16px;
        height: 16px;
    }
    .anonymously input[type=checkbox]::after {
        cursor: pointer;
        position: relative;
        width: 16px;
        height: 16px;
        font-size: 14px;
        margin-right: 8px;
    }
    .anonymously input[type=checkbox]::after {
        position: absolute;
        width: 16px;
        height: 16px;
        display: inline-block;
        visibility: visible;
        text-align: center;
        content: ' ';
    }
    .anonymously input[type=checkbox]:checked::after {
        background: rgb(255, 255, 255) url("../../common/svgs/popovers_check_selected.svg") no-repeat center center;
    }
    .addFormWarp .captcha input {
        padding: 13px 12px;
        width: 16%;
        height: 40px;
        border: 1px solid #dedede;
        box-sizing: border-box;
        vertical-align: top;
        margin: 0 0 0 10px;
        display: inline-block;
    }
    .tip1 {
        display: flex;
        justify-content: space-between;
        span {
            font-size: 1.2rem;
            line-height: 2rem;
            margin-top: 0.4rem;
            font-family: Hind-Regular, Arial, Helvetica, sans-serif;
            color: #0f0f0f;
        }
        .num {
            flex: 1;
            text-align: right;
        }
        .error {
            color: #cb0000;
        }
    }
    .detail .backPrev {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        span{
            font-size: 18px;
            color: #000000;
            line-height: 24px;
            box-sizing: border-box;
            padding-top: 1px;
            .publicFont3;
        }
        i {
            display: inline-block;
            width: 21px;
            height: 16px;
            background: url(../../common/svgs/icon_back.svg);
            margin-right: 11px;
        }
    }
}
.backToPrevPage {
    display: none;
    position: relative;
    height: 48px;
    i{
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        background: url(../svgs/back.svg) no-repeat;
        width: 10px;
        height: 18px;
    }
    span {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-family: Hind-SemiBold, Hind;
        color: #0F0F0F;
        line-height: 48px;
    }
}
@media screen and (max-width: 768px) {
    .logoHeader {
        display: none;
    }
    .backToPrevPage {
        display: block;
        span {
            .publicFont4;
        }
    }
    .stdQa {
        * {
            .publicFont2;
        }
        margin: 0 16px;
        padding-top: 0;
        .leftWarp {
            margin: auto;
            .addFormWarp .formItem .content-check {
                width: 55%;
            }
            .publicPagination {
                margin-top: 32px;
                padding-top: 0;
            }
        }
        .addFormWarp {
            padding-top: 0;
        }
        .rightWarp {
            top: 20px;
            width: 100%;
            position: relative;
            padding-bottom: 30px;
            .list {
                padding-top: 12px;
                dt {
                    margin-top: 20px;
                }
                dd {
                    margin-top: 16px;
                }
            }
        }
        .isMobile {
            display: none;
        }
        .item {
            border: none;
            padding: 24px 0 12px 0;
            clear: both;
            &:last-child{
                border-bottom: none;
                padding: 20px 0 0;
            }
            .moreAndLess {
                .less, .more {
                    font-size: 15px;
                }
            }
        }
        .item .userInfo {
            min-height: 38px;
        }
        .item .avatar {
            width: 38px;
            height: 38px;
        }
        .item .info {
            margin-left: 46px;
            min-height: 38px;
        }
        .item .time {
            .publicFont2;
            color: #0f0f0f;
        }
        .item .subject {
            margin-top: 16px;
        }
        .item .subject, .item .content {
            font-size: 15px;
            line-height: 23px;
        }
        .item .content {
            margin-top: 8px;
        }
        .item .lineClamp:before {
            height: 46px;
        }
        .item .lineClamp .more {
            line-height: 23px;
        }
        .item .subject a {
            .publicFont3;
            line-height: 23px;
        }
        .item .bottomWarp li.likesBox {
            display: none;
        }
        .item .bottomWarp {
            margin-top: 16px;
            justify-content: flex-start;
            li {
                margin: 0 50px 0 0;
                &.like {
                    padding: 0 0 0 30px;
                }
                .voteCnt, .commentCnt {
                    font-size: 15px;
                }
            }
        }
        .leftWarp h1.title {
            font-size: 15px;
            line-height: 23px;
            .publicFont3;
        }
        .leftWarp h1.title .askBtn {
            position: relative;
            margin-top: 10px;
        }
        .leftWarp .p1 {
            .publicFont2;
            margin-top: 63px;
            font-size: 15px;
            line-height: 23px;
            a {
                .publicFont2;
            }
        }
        .leftWarp .p1:nth-child(2) {
            margin-top: 59px;
        }
        .leftWarp .p1:nth-child(3), .leftWarp .p1:nth-child(4) {
            margin-top: 8px;
        }
        .leftWarp.add .p1,
        .leftWarp.add .p1 a {
            .publicFont2;
        }
        .title {
            display: none;
        }
        .addFormWarp textarea[name=question_desc] {
            height: 180px;
        }
        .detail {
            .item {
                padding: 24px 0 20px 0;
                &:first-child {
                    padding: 0;
                }
                &:last-child {
                    padding-bottom: 8px;
                }
                .titleTxt {
                    font-size: 14px;
                }
            }
            padding-top: 12px;
            .backPrev {
                display: none;
            }
            .answersNum {
                font-size: 14px;
                line-height: 23px;
                height: 23px;
                .publicFont3;
            }
            .answer .content {
                margin-top: 16px;
            }
            .addFormWarp .captcha input {
                width: 22%;
            }
            .addFormWarp textarea {
                .publicFont2;
                font-size: 15px;
                border: 1px solid #ebebeb;
            }
            .addFormWarp textarea::placeholder {
                font-size: 15px;
                color: #888;
            }
            .submitBox {
                display: block;
                text-align: center;
            }
            .anonymously {
                text-align: left;
                margin-top: 8px;
            }
            .anonymously input[type=checkbox] {
                margin: -3px 4px 0 12px;
            }
            .anonymously p {
                display: inline-block;
                margin: 11px 0 0 0;
            }
            .anonymously label {
                .publicFont2;
                font-size: 15px;
                color: #0f0f0f;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                display: block;
                background-color: #ffffff;
                height: 88px;
                z-index: 3;
                //margin-bottom: 2rem;
                border-top: 1px solid #eeeeee;
            }
            .commentWarp .btn {
                position: fixed;
                bottom: 15px;
                right: 10px;
                width: auto;
                display: block;
                z-index: 10;
                color: #1b1b1b;
                background-color: white;
                margin: 0;
                height: 24px;
            }
            .commentWarp .btn.disabled {
                position: fixed;
                bottom: 15px;
                right: 10px;
                width: auto;
                display: block;
                z-index: 10;
                color:  #bcbcbc;
                background-color: white;
                margin: 0;
                height: 24px;
                pointer-events: none;
            }
        }

        .askBtnDiv {
            text-align: left;
        }
        .stdQaOpeBox {
            border: none;
            padding: 0;
            margin-top: 24px;
            line-height: 21px;
            .askBtn {
                margin-top: 0;
                height: 21px;
                line-height: 21px;
                float: left;
                clear: both;
                position: relative;
                i {
                    margin: 2px 8px 0 0;
                }
                span {
                    font-size: 14px;
                }
            }
            .selectBox{
                height: 21px;
                line-height: 21px;
                display: block;
                margin-top: 10px;
                float: left;
                clear: both;
            }
            .selectBox .filterBoxA {
                margin-left: 0;
                left: 0;
                position: absolute;
                top: 25px;
                transform: translate(0, 0);
            }
            .selectBox:before {
                right: 10px;
                top: 17px;
            }
            .selectBox .htmlBox {
                height: 21px;
                line-height: 21px;
                padding: 0;
            }
        }
        .addFormWarp input[type=text],
        .addFormWarp textarea {
            border-radius: 0;
            font-size: 15px;
        }
        .addFormWarp textarea[name=question_desc],.addFormWarp textarea[name=question_title], 
        .addFormWarp .formItem .selectBox{
            margin-top: 8px;
            font-size: 15px;
        }
        .loading_group {
            width: 100%;
        }
        .note_text {
            white-space: initial;
        }
        .selectBox select {
            font-size: 15px;
        }
    }
    .stdQa .addFormWarp textarea {
        padding: 10px 12px 8px 12px;
        line-height: 23px;
        overflow: hidden;
        overflow-y: scroll;
        resize: none;
    }
}
/********stdQa page end********/

/* press page start */
.press_page {
    .press_img .swiper-container img {
        border: 5px solid #fff;
    }
    .swiper-pagination-bullet {
        background: #d8d8d8;
    }
    .swiper-pagination-bullet-active {
        background: #999999;
    }
    .press_img .swiper-container img {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
   .press_page {
       .press_right_download {
           margin-top: 47px;
       }
       .press_right_download a:first-child {
           margin-right: 14px;
       }
       .topWrap {
            padding: 0px 16px;
       }
       .topWrap .pressImgWrap {
           margin-top: -4px;
       }
       .press_img {
           margin-top: 68px;
       }
       .swiper-slide-next img {
           margin-left: -64px;
       }
       .swiper-slide-prev img {
           margin-right: -64px;
       }
       .topWrap .mobile .downloadKit{
          .publicFont2;
           margin-top: 22px;
       }
       .topWrap .mobile .download_btn {
           margin-top: 30px;
           height: 44px;
       }
       .press_content.press_coverage {
           margin-top: 24px;
       }
       .press_content.press_coverage li p.contDetail a{
           font-size: 15px;
           .publicFont2;
       }
       .press_content.press_coverage .d_3_content_title a {
           font-size: 15px;
           color: #666;
       }
       .press_content.press_coverage .d_3_content_title {
           margin-top: 0;
       }
       .press_content.press_coverage li {
           margin-bottom: 27px;
       }
       .press_right_download a{
          border-radius: 3px;
       }

       .swiper-slide-active img {
           transform: scale(0.9);
           transition: all 0.3s;
       }
   }
}
/* press page end */

@media screen and (max-width: 768px) {
	.store_guide_box .store_guide_head.store_guide_head_inner {
		margin-top: 88px;
	}
    .blogdetail_container p {
        img {
            max-width: 358px;
        }
    }
    .blogdetail_container .blogDetailBox .userInfo .userInfoLeft > div h3 {
        font-size: 16px;
    }
}

/* quickExit start */
.quickExit {
    position: fixed;
    width: auto;
    height: auto;
    border: 0 none;
    right: -30px;
    top: 116px;
    z-index: 999;
    transform: rotate(90deg);
    span {
        display: inline-block;
        width: 80px;
        height: 20px;
        color: #fff;
        box-sizing: border-box;
        background-color: rgba(0,0,0,.6);
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        .publicFont3;
    }
}
@media screen and (max-width: 768px) {
	.quickExit {
        display: none;
    }
}
/* quickExit end */

/********success stories star********/
.sStories {
    .info1 {
        .img {
            background: url(../img/stories_content_bg.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}
/********success stories end********/

@media screen and (max-width: 375px) {
    .stdQa .addFormWarp .ai_reply_status{
        position: relative;
        top: 0px;
    }
}

/********doctor review end ********/

/* web to app start */
.webToApp{
    display: none;
}
@media screen and (max-width: 768px) {
    .webToApp{
        display: block;
    }
    .webToAppHeader{
        margin: 24px 16px 25px;
        display: flex;
        justify-content: space-between;
        position: relative;
        img{
            width: 188px;
            height: 30px;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
        .listBtn{
            margin-top: 2px;
            i {
                display: block;
                margin: 5px 0 0;
                width: 24px;
                height: 2px;
                background: #0F0F0F;
            }

        }
    }
    .notLoggedHeader .mobileNav {
        top: auto;
    }
    .mobileNav{
        width: 100%;
        height: auto;
        background: #fff;
        border-top: 1px solid #ddd;
        position: absolute;
        font-size: 14px;
        z-index: 9;
        display: none;
        li{
            a{
                display: block;
                border-bottom: 1px solid #dedede;
                text-align: left;
                margin: 0 15px;
                padding: 15px 0px;
                width: 92%;
                position: relative;
                .publicFont3;
                text-transform: uppercase;
            }
            a::before{
                display: none;
                content: " ";
                height: 6px;
                width: 6px;
                border-width: 1px 1px 0 0;
                border-color: #373737;
                border-style: solid;
                transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
                position: absolute;
                top: 45%;
                right: 4px;
            }
            &:last-child{
                a{
                    border-bottom: none;
                }
            }
        }
    }
    .stayPositive{
        margin: 0 16px;
        img {
            width: 343px;
            height: 96px;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
    }
    .webToAppArea{
        margin: 19px 16px 30px;
        img{
            width: 100%;
            height: 240px;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
    }
    .getWebToApp{
        margin: 0 16px;
        display: flex;
        justify-content: space-between;
        img{
            width: 165px;
            height: 48px;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
    }
    .webToAppStroies{
        margin: 36px 16px 44px;
        .title{
            font-size: 24px;
            .publicFont4;
            color: #0A6EDB;
            line-height: 38px;
            margin-bottom: 23px;
        }
        img{
            width: 100%;
            height: 286px;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }
        p{
            font-size: 16px;
            color: #0F0F0F;
            line-height: 24px;
            margin: 16px 0 32px;
        }
        .downloadBtn{
            font-size: 16px;
            .publicFont4;
            color: #FFFFFF;
            line-height: 45px;
            text-align: center;
            width: 210px;
            height: 44px;
            background: #0A6EDD;
            border-radius: 50px;
            margin: 2px auto 0;
            text-transform: uppercase;
        }
    }
    .webToAppMonthly {
        background: #f7f7f7;
        padding-bottom: 42px;
       ul {
            display: block;
            overflow: hidden;
            margin: 20px auto 42px auto;
            li {
                width: 50%;
                float: left;
                margin: 32px 0 0 0;
            }
            li:nth-child(n+3) {
                margin-top: 34px;
            }
            .svg {
                width: 70px;
                height: 70px;
                margin: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .svgIcon {
                    margin: auto;
                }
            }
            .svg1 {
                .importSvgBg(@mainColor, '../svgs/psMembers.svg');
                width: 90%;
                height: 90%;
            }
            .svg2 {
                .importSvgBg(@mainColor, '../svgs/psConversations.svg');
                width: 80%;
                height: 80%;
            }
            .svg3 {
                .importSvgBg(@mainColor, '../svgs/psBlog.svg');
                width: 58px;
                height: 58px;
            }
            .svg4 {
                .importSvgBg(@mainColor, '../svgs/psStory.svg');
                width: 58px;
                height: 58px;
            }
            h3 {
                text-align: center;
                font-size: 18px;
                line-height: 30px;
                .publicFont4;
            }
            p {
                font-size: 16px;
                line-height: 30px;
                text-align: center;
                .publicFont3;
            }
       }
       .joinInToday{
            width: 210px;
            height: 48px;
            background: #0A6EDB;
            border-radius: 50px;
            font-size: 16px;
            .publicFont4;
            color: #FFFFFF;
            line-height: 49px;
            text-transform: uppercase;
            text-align: center;
            margin: 0 auto;
       }
    }
    .webToAppFooter{
        background: #0f0f0f;
        padding: 24px 16px 22px;
        .footerNote{
            opacity: 0.8;
            p {
                font-size: 14px;
                color: #FFFFFF;
                line-height: 22px;
            }
            h5 {
                font-size: 15px;
                .publicFont3;
                color: #FFFFFF;
                line-height: 19px;
                letter-spacing: 1px;
                margin: 16px 0 12px;
                text-transform: uppercase;
            }
            .title.mt1{
                margin-top: 22px;
            }
            img {
                width: 22px;
                height: 22px;
                background-repeat: no-repeat;
                background-size: 100% auto;
                margin-right: 27px;
            }
        }
    }
}

/* ========== PC Font Styles (min-width: 768px) ========== */
@media screen and (min-width: 768px) {
  .stdQa .answersNum {
    font-family: Hind-Medium, Hind;
  }

  .stdQa .answer_reload span {
    font-family: Hind-Medium;
  }

  .stdQa .tip1 span {
    font-family: Hind-Regular, Arial, Helvetica, sans-serif;
  }

  .backToPrevPage span {
    font-family: Hind-SemiBold, Hind;
  }
}

/* ========== Mobile Font Styles (max-width: 768px) ========== */
@media screen and (max-width: 768px) {
  .stdQa .answersNum {
    font-family: STIXTwoText-Medium, STIXTwoText;
  }

  .stdQa .answer_reload span {
    font-family: STIXTwoText-Medium;
  }

  .stdQa .tip1 span {
    font-family: STIXTwoText-Regular, Arial, Helvetica, sans-serif;
  }

  .backToPrevPage span {
    font-family: STIXTwoText-SemiBold, STIXTwoText;
  }

  .press_page .topWrap .mobile .downloadKit {
    font-family: STIXTwoText-Regular, Arial, Helvetica, sans-serif;
  }

  .press_page .press_content.press_coverage li p.contDetail a {
    font-family: STIXTwoText-Regular, Arial, Helvetica, sans-serif;
  }

  .mobileNav li a {
    font-family: STIXTwoText-Medium, Arial, Helvetica, sans-serif;
  }

  .webToAppStroies .title {
    font-family: STIXTwoText-SemiBold, Arial, Helvetica, sans-serif;
  }

  .webToAppStroies .downloadBtn {
    font-family: STIXTwoText-SemiBold, Arial, Helvetica, sans-serif;
  }

  .webToAppMonthly ul h3 {
    font-family: STIXTwoText-SemiBold, Arial, Helvetica, sans-serif;
  }

  .webToAppMonthly ul p {
    font-family: STIXTwoText-Medium, Arial, Helvetica, sans-serif;
  }

  .webToAppMonthly .joinInToday {
    font-family: STIXTwoText-SemiBold, Arial, Helvetica, sans-serif;
  }

  .webToAppFooter .footerNote h5 {
    font-family: STIXTwoText-Medium, Arial, Helvetica, sans-serif;
  }
}
/* web to app end */