/* 위젯 v3/horizontal3 */
@media screen and (max-width: 690px) {
    .widgetProfileWrap2 .right .iconTxt .icon {
        max-width: 24px;
    }

    #widgetLoginWrap .backLogin .title {
        color: #fff;
    }
}


@media screen and (max-width: 674px) {
    #widgetRewardWrap .rewardTitle .title {
        display: none;
    }

    #widgetIntro .mainTitle:nth-child(2),
    #widgetIntro .mainTitle:nth-child(3) {
        font-size: 30px;
        letter-spacing: -1px;
    }

    #widgetIntro .introTitle {
        height: 62px;
        margin-bottom: 7px;
    }

    #widgetIntro .introBtn {
        margin-top: 0;
    }
}


@media screen and (max-width: 599px) {
    #widgetIntro .titleWrap {
        padding-top: 23px;
    }

    #widgetIntro .titleWrap .title {
        font-size: 30px;
        padding-top: 5px;
    }

    #widgetIntro .introBtnArea {
        bottom: 20px;
    }

    #widgetIntro .titleWrap .title:after {
        display: none;
    }

    #widgetIntro .titleWrap .subTitle:after {
        top: -23px;
        right: -150px;
    }

    .widgetProfileWrap2 .leftBox .leftBoxInner {
        padding: 7px 15px;
    }

    .widgetProfileWrap2 .left .pointWrap .number {
        font-size: 12px;
    }

    .widgetProfileWrap2 .left .pointWrap .point {
        font-size: 12px;
    }

    .widgetProfileWrap2 .left .newsSum {
        font-size: 20px;
    }

    #widgetIntro .introBtnArea {
        bottom: 20px;
    }
}


@media screen and (max-width: 560px) {
    #widgetIntro:before,
    #widgetIntro:after {
        display: none;
    }

    #widgetIntro .mainTitle {
        font-size: 28px;
        line-height: 100%;
    }

    #widgetIntro .introTitle {
        position: inherit;
    }

    #widgetIntro .introTitle .subTitle,
    #widgetIntro .hashTag,
    #widgetIntro .mainTitle:nth-child(3) {
        display: none;
    }

    #widgetIntro .mainTitle:nth-child(2) .highLight {
        display: block;
        padding-top: 6px;
    }

    #widgetIntro .introBtn {
        margin-top: 16px;
    }

    #loginListWrap:after {
        display: none;
    }

    #widgetLoginWrap .findAndJoin .find {
        padding: 0 4px;
    }

    #widgetLoginWrap .findAndJoin .find.minSize {
        display: block;
    }

    #widgetLoginWrap .findAndJoin .find.maxSize {
        display: none;
    }

    #widgetLoginWrap .findAndJoin .find:after {
        display: none;
    }

    #widgetLoginWrap .loginInput {
        padding-top: 27px;
        min-width: auto;
    }

    #widgetLoginWrap .loginInput .pwArea .pwInputWrap, #widgetLoginWrap .loginInput .idArea .idInputWrap {
        width: 100%;
        max-width: 209px;
    }

    #widgetLoginWrap .loginInput .loginInputInner {
        margin-right: 10px;
    }

    #widgetLoginWrap .loginBtnArea .loginBtn {
        width: 93px;
        height: 93px;
        line-height: 93px;
    }

    #qrCodeWrap .qrCodeInner .title {
        font-size: 14px;
        letter-spacing: -0.65px;
    }

    #qrCodeWrap .qrCodeInner > img {
        width: 16px;
    }

    #qrCodeWrap .toolTip {
        width: 86%;
        /*padding-left: 7px;*/
        left: 45px;
        top: 27px;
    }

    #qrCodeWrap .toolTip span {
        display: block;
    }

    #qrCodeWrap .toolTip:before {
        width: 143px;
        height: 44px;
        top: -4px;
        left: -2px;
        /*background: url('/assets/images/front/widget/update/img/bgToolTipBlue3.svg') center / 100% no-repeat;*/
    }

    #qrCodeWrap .toolTip:after {
        top: -10px;
        left: 66.3%;
    }

    .qrCodeTxtWrap .faqLink {
        font-size: 11px;
    }

    #qrCodeWrap .cnt {
        font-size: 12px;
        line-height: 15px;
        padding-top: 8px;
        margin-bottom: 28px;
        letter-spacing: -0.9px;
    }

    #qrCodeWrap .cnt .block {
        display: block;
    }

    .widgetProfileWrap2 .left .pointWrap .number {
        margin-right: 4px;
        font-size: 10px;
    }

    .widgetProfileWrap2 .left .newsInner .newsArea {
        justify-content: flex-end;
    }
}


@media screen and (max-width: 556px) {
    .widgetProfileWrap2 .left {
        max-width: 122px;
    }

    /*.widgetProfileWrap2 .leftBox .leftBoxInner {*/
    /*    padding: 7px 10px;*/
    /*}*/

    .widgetProfileWrap2 .left .userNameWrap {
        margin-bottom: 47px;
    }

    .widgetProfileWrap2 .right .iconTxt {
        height: 96px;
    }

    .widgetProfileWrap2 .right .iconTxt .icon {
        width: 4.998vw;
    }

    .widgetProfileWrap2 .right .iconTxt span {
        font-size: 2.88vw;
    }

    .widgetProfileWrap2 .left .pointWrap .sum {
        /*width: 95px;*/
        font-size: 0.875rem;
        height: 15px;
        overflow: hidden;
    }

    /*.widgetProfileWrap2 .left .pointWrap .sum.newsSum {*/
    /*    width: 96px;*/
    /*}*/


}


@media screen and (max-width: 555px) {
    .widgetProfileWrap2 .left,
    .widgetProfileWrap2 .right .iconTxt {
        margin-right: 8px;
    }

    .widgetProfileWrap2 .right .iconTxt {
        width: 33.3%;
    }

    .widgetProfileWrap2 .right .notice,
    .widgetProfileWrap2 .right .logout {
        font-size: 0.625rem;
    }
}


@media screen and (max-width: 480px) {
    #widgetIntro .titleWrap .title {
        font-size: 24px;
        padding-top: 8px;
    }

    #widgetIntro .titleWrap .subTitle:after {
        right: -105px;
    }

    #qrCodeWrap .qrCodeArea .cnt {
        padding-top: 83px;
    }

    .widgetProfileWrap2 .right .iconTxt {
        width: 20.83vw;
    }

    #widgetShareWrap .snsList li img {
        width: 32px;
    }

    #widgetShareWrap .snsList .btnShare, #widgetShareWrap .snsList .btnUrl {
        margin-right: 10.67px;
    }

    .widgetToast {
        bottom: 8px;
    }

    #widgetIntro .introBtnArea {
        bottom: 22px;
    }
}


@media screen and (max-width: 440px) {
    .widgetProfileWrap2 .left,
    .widgetProfileWrap2 .right .iconTxt {
        margin-right: 8px;
    }

    .widgetProfileWrap2 .right {
        width: calc(100% - 122px);
    }

    .widgetProfileWrap2 .right .iconTxt {
        width: 20vw;
        height: 0;
        padding-top: 31.43%;
    }

    .widgetProfileWrap2 .right .iconTxt .icon {
        width: 18px;
    }

    .widgetProfileWrap2 .right .iconTxt span {
        font-size: 0.75rem;
    }

    .widgetProfileWrap2 .right .noticeWrap {
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .widgetProfileWrap2 .right .notice {
        margin-bottom: 6px;
    }

    .widgetProfileWrap2 .right .iconTxt span {
        bottom: 22px;
    }

    #qrCodeWrap .qrCodeArea {
        right: 72px;
    }

}


@media screen and (max-width: 414px) {
    #loginListWrap .titleWrap .toolTip > span,
    #qrCodeWrap .toolTip > span {
        display: block;
    }

    #loginListWrap .titleWrap .toolTip {
        margin-top: 1px;
        padding-top: 3px;
        z-index: 1;
    }

    #loginListWrap .titleWrap .toolTip:before {
        width: 149px;
        height: 36px;
        background: url("/assets/images/front/widget/update/img/bgToolTipWhite2.svg") center / 100% no-repeat ;
    }

    #loginListWrap .titleWrap .toolTip {
        top: -5px;
    }

    #loginListWrap .title {
        font-size: 16px;
    }

    #loginListWrap .titleWrap .iconToolTip {
        margin-top: 4px;
    }

    #loginListWrap .titleWrap .toolTip {
        left: 70px;
        top: -6px;
    }

    .widgetProfileWrap2 .right .iconTxt span {
        bottom: 16px;
    }

    #loginListWrap .btnLogin:before {
        left: 9px;
    }

    #loginListWrap .btnLoginWrap > .btnLogin {
        margin-right: 0;
        padding-left: 31px;
    }

    #loginListWrap .btnLogin {
        width: 140px;
        font-size: 13px;
    }

    #loginListWrap .snsLoginWrap .snsLogin {
        left: 8px;
    }

    #loginListWrap .snsLoginWrap .snsList .snsLogo {
        left: 8px;
    }

    @keyframes interaction1 {
        from {
            left: 8px;
        } to {
              left: 60px;
          }
    }

    -webkit-@keyframes interaction1 {
        from {
            left: 8px;
        } to {
              left: 60px;
          }
    }

    -ms-@keyframes interaction1 {
        from {
            left: 8px;
        } to {
              left: 60px;
          }
    }

    @keyframes interaction2 {
        from {
            left: 8px;
        } to {
              left: 147px;
          }
    }

    -webkit-@keyframes interaction2 {
        from {
            left: 8px;
        } to {
              left: 147px;
          }
    }

    -ms-@keyframes interaction2 {
        from {
            left: 8px;
        } to {
              left: 147px;
          }
    }





}


@media screen and (max-width: 360px) {
    #widgetIntro .titleWrap .title {
        font-size: 23px;
    }

    #widgetIntro .titleWrap .subTitle:after {
        right: -62px;
    }

    #loginListWrap {
        padding: 12px 17px 22px 36px;
    }

    #widgetWrap .alertPopup.mobileView .title {
        font-size: 16px;
    }

    #widgetWrap .alertPopup.mobileView .checkBtn {
        margin-top: 32px;
    }

    .widgetProfileWrap2 .mobileView {
        display: block;
    }

    .widgetProfileWrap2 .left .webView,
    .widgetProfileWrap2 .right .webView {
        display: none;
    }

    .widgetProfileWrap2 .left {
        width: 200px;
        max-width: 200px;
        margin-right: 5px;
    }

    .widgetProfileWrap2 .leftBox .leftBoxInner {
        height: 98px;
    }

    .widgetProfileWrap2 .left .notice.mobileView {
        font-size: 0.5625rem;
        font-weight: 300;
        color: #616161;
        margin-top: 5px;
    }

    .widgetProfileWrap2 .left .pointInner {
        margin-top: 7px;
    }

    .widgetProfileWrap2 .left .pointInner .sum,
    .widgetProfileWrap2 .left .newsInner .sum {
        text-align: right;
    }

    .widgetProfileWrap2 .left .pointWrap {
        padding-top: 47px;
    }

    .widgetProfileWrap2 .left .pointWrap .sum,
    .widgetProfileWrap2 .left .pointWrap .sum.newsSum {
        width: 100%;
    }

    .widgetProfileWrap2 .right {
        width: calc(100% - 200px);
    }

    .widgetProfileWrap2 .rightBox ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .widgetProfileWrap2 .right .iconTxt {
        width: 56px;
        border-radius: 16px;
    }

    .widgetProfileWrap2 .right .iconTxt:nth-child(1),
    .widgetProfileWrap2 .right .iconTxt:nth-child(3) {
        margin-right: 8px;
    }

    .widgetProfileWrap2 .right .iconTxt:nth-child(2) {
        margin-right: 0;
    }

    .widgetProfileWrap2 .right .iconTxt:nth-child(1),
    .widgetProfileWrap2 .right .iconTxt:nth-child(2) {
        margin-bottom: 8px;
    }

    .widgetProfileWrap2 .right .iconTxt .icon {
        width: 12px;
    }

    .widgetProfileWrap2 .right .iconTxt {
        height: 56px;
    }

    .widgetProfileWrap2 .right .iconTxt span {
        bottom: 12px;
        font-size: 0.5625rem;
    }

    #loginListWrap .btnLogin {
        padding-left: 26px;
    }

    #loginListWrap .btnLogin:before {
        width: 10.84px;
    }

    #loginListWrap .loginFooter a {
        padding-right: 19px;
    }

    .alertPopup .popupTitle,
    .popupDefault .popupTitle,
    #widgetRewardWrap .widgetRewardComplete .widgetRewardInner {
        font-size: 16px;
    }

    #widgetLoginWrap .backLogin {
        left: 8px;
    }

    #widgetLoginWrap .formLoginInner .iconBack {
        height: 16px;
    }

    #qrCodeWrap .didComplete,
    #checkPopupWrap .checkBtn,
    .alertPopup .checkBtn,
    .alertPopup .btnPublish,
    #widgetRewardWrap .rewardBtn.reward {
        bottom: 16px;
        right: 20px;
        width: 66px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
    }

    #widgetIntro .introBtnArea {
        bottom: 21px;
    }
}