@charset "utf-8";

* {
    margin: 0 0;
    padding: 0 0;
    list-style-type: none;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-size: 16px;
    background-color: #FBF7EE;
    /* 纸张色 */
    font-family: Georgia, "Times New Roman", serif;
    overflow-x: hidden;
}

@media screen and (min-width: 1024px) {
    body {
        margin: 0 auto;
        width: 750px;
    }
}

@font-face {
    font-family: jxzk;
    src: url('../font/jxzk.ttf');
}

input,
button {
    color: #3b3228;
    font-size: 16px;
}

img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    /*-- 使图片不会被拉伸变形 --*/
}

@media screen and (min-width: 1024px) {
    img {
        image-rendering: -webkit-optimize-contrast;
        /*-- 使图片改变尺寸之后依然清晰 --*/
    }
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .3);
}

/*-------------------iphone button style reset-------------------*/

input[type=button],
input[type=file],
input[type=text],
textarea,
select {
    -webkit-appearance: none;
}

/*-- bootstrap hack --*/

p,
ol,
ul,
li,
dl,
h1,
h3,
h4,
h5,
h6,
label,
select,
input {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    color: #3b3228;
}

a {
    color: #3b3228;
}

a:hover {
    color: #8B5E3C;
    text-decoration: none;
}

span {
    color: #f0f0f0;
}

h2 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

button:active {
    opacity: .5;
}

/*-- public --*/

.hidden {
    visibility: hidden;
}

.flex {
    display: flex;
}

.flex-jcsb {
    display: flex;
    justify-content: space-between;
}

.flex-jcsb-aic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.flex-aic {
    display: flex;
    align-items: center;
}

.flex-2c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-radius {
    width: 30%;
    height: 2.5em;
    border: none;
    border-radius: 10em;
    color: #fff;
}

.btn-radius-full {
    width: 100%;
    height: 3em;
    border: none;
    border-radius: 10em;
    color: #fff;
}

.btn-radius-sm {
    padding: .2em .8em;
    border: none;
    border-radius: 10em;
    color: #fff;
}

.btn-line {
    padding: .2em .7em;
    border: 2px solid #cfc1ad;
    border-radius: 100px;
    color: #6b5b4b;
    background-color: transparent;
}

.i-dot {
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    background-color: #8B6E53;
    border-radius: 50%;
}

.color-red {
    color: #e74c3c;
}

.color-green {
    color: #16a085;
}

.animate__animated.animate__slowest {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-duration: calc(var(--animate-duration)*20);
    animation-duration: calc(var(--animate-duration)*20)
}

/*-- common --*/

.cover-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, #EBD4B2, #F6ECDE, #FFFDF7) no-repeat;
}

.cover-wrap::after {
    width: 100%;
    height: 100%;
    content: ' ';
    position: absolute;
    background-size: contain;
    background-position: top right;
    opacity: .5;
    z-index: 1;
    left: 0%;
    top: 0%;
}

.cover-absolute {
    position: absolute;
    z-index: 0;
}

.con-wrap {
    position: relative;
    box-shadow: 0 4px 16px rgb(50 35 20 / 12%);
}

.bottom-linear::before {
    content: ' ';
    width: 100%;
    height: 30px;
    position: absolute;
    /* 横向色彩从左到右：#FDFAF2 -> #FFFDF7；纵向从上到下渐变为透明（使用 mask） */
    background: linear-gradient(to right, #FDFAF2, #FFFDF7);
    /* mask-image 用于实现自上而下的透明度渐变，兼容 -webkit- 前缀 */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    width: 750px;
    left: -0.6em;
    top: -2.6em;
}

.inline {
    display: flex;
    flex-flow: row wrap;
}

.animate__animated {
    z-index: 3;
}

.cover-tit-wrap {
    z-index: 2;
    margin: 0 .5rem;
}

.cover-tit-wrap img {
    margin: 5em auto 0 auto;
    width: 75%;
}

.cover-img {
    display: flex;
    justify-content: center;
    width: 100%;
}

.cover-img>div {
    flex-shrink: 0;
    position: absolute;
    margin: 5em auto 0 auto;
    width: 75%;
}

@media screen and (min-width: 1920px) {
    .cover-tit-wrap img {
        margin: 80px auto 0 auto;
        width: 450px;
    }

    .cover-img>div {
        margin: 80px auto 0 auto;
        width: 450px;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
    .cover-tit-wrap img {
        margin: 80px auto 0 auto;
        width: 400px;
    }

    .cover-img>div {
        margin: 80px auto 0 auto;
        width: 360px;
    }
}

@media screen and (min-width: 1366px) and (max-width: 1439px) {
    .cover-tit-wrap img {
        margin: 60px auto 0 auto;
        width: 300px;
    }

    .cover-img>div {
        margin: 60px auto 0 auto;
        width: 320px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1365px) {
    .cover-tit-wrap img {
        margin: 60px auto 0 auto;
        width: 280px;
    }

    .cover-img>div {
        margin: 60px auto 0 auto;
        width: 280px;
    }
}

.tips-wrap {
    position: absolute;
    bottom: 2em;
    width: 100%;
}

@media screen and (min-width: 1024px) {
    .tips-wrap {
        display: none;
    }
}

.tips-wrap p {
    width: 100%;
    color: rgba(59, 50, 40, .8);
    text-align: center;
    white-space: nowrap;
}

.tips-wrap img {
    margin: 0 auto;
    width: 1em;
    opacity: .6;
    filter: contrast(0.5);
}

.con-wrap {
    margin: 2.6em .6em 0 .6em;
    padding: 1.2em;
    background-color: #fff;
    border-radius: 1em;

    box-shadow: 0 4px 16px rgba(50, 35, 20, .08);
}

@media screen and (min-width: 1024px) {
    .con-wrap {
        padding: 40px;
    }
}

.tit-wrap {
    display: flex;
    justify-content: center;
    margin-top: -4px;
    margin-bottom: 1em;
}

.tit-wrap h2 {
    margin-top: -1.1em;
    padding: .2em 1em .4em 1em;
    width: 75%;
    color: #3b3228;
    background: linear-gradient(0deg, #EADFC6, #D6C4A3) no-repeat;
    font-family: jxzk;
    font-size: 1.5em;
    text-align: center;
    border-radius: 4px 4px .6em .6em;
}

@media screen and (min-width: 1024px) {
    .tit-wrap {
        margin-top: -20px;
    }
}

.timeline-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em 0;
    height: 6em;
}

.timeline-wrap>img {
    position: absolute;
    width: 6em;
}

.timeline-wrap>span {
    font-size: 3.8em;
    font-weight: 100;
}

.article-wrap {
    margin-bottom: 2em;
    font-family: jxzk;
}

.article-wrap>p {
    margin-bottom: 1em;
    font-size: 1.3em;
}

.article-wrap>p>span {
    /*
display: inline-flex;
align-items: flex-end;
*/
    margin: 0 .2em;
    font-family: arial;
    font-weight: 800;
    font-size: 1.2em;
    color: #8B5E3C;
    border-bottom: 2px dashed rgba(139, 94, 60, .18);
}

.video-wrap video {
    margin: 0 auto 1em auto;
    width: 100%;
    border-radius: 4px;
}

.video-wrap p {
    margin-bottom: .3em;
    font-size: 1em;
    color: #8A6B4F;
    font-weight: bold;
}

.ul-circle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ul-circle li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5em;
    width: 33.3%;
}

.ul-circle li>p {
    margin-top: .4em;
    font-size: .9em;
}

.shield-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6em;
    height: 6em;
    background: url(../images/img-cjd01.png) no-repeat center;
    background-size: contain;
}

.shield-wrap>h2 {
    margin-top: 0;
    font-size: .9em;
    font-weight: 800;
    color: #F2B40E;
    text-align: center;
    margin-top: -1.5rem;
    margin-left: 0rem;
    -webkit-text-stroke: .5px #B77A0D;
    text-stroke: .5px #B77A0D;
    /* 非标准，作为补充 */
}

.shield-wrap>span {
    position: absolute;
    margin-top: 3em;
    font-size: .8em;
    color: #3b3228;
}



.hotclass-wrap h2 {
    margin: 0 auto;
    padding: .4em .5em;
    width: 70%;
    text-align: center;
    font-size: 1.2em;
    font-weight: 800;
    color: #3b3228;
    background-color: #D6C4A3;
    border-radius: 10em;
}

.hotclass-wrap.triple h2 {
    margin-top: 3em;
    margin-bottom: 1.6em;
    padding: .8em .4em;
    width: 100%;
    font-size: 1em;
    background: url(../images/bg-btn.png);
    background-size: cover;
}

.hotclass-wrap.triple h2:first-child {
    margin-top: 1.5em;
}

.hotclass-wrap.triple h2:last-child {
    margin-bottom: 1em;
}

.ul-hotclass {
    margin: 0 auto;
    margin-bottom: 1.5em;
    padding: 1em;
    width: 90%;
    background-color: #E9E0D5;
    border-radius: .8em;
}

.ul-hotclass li {
    display: flex;
    align-items: center;
    margin-bottom: .5em;
}

.ul-hotclass li:last-child {
    margin-bottom: 0;
}

.ul-hotclass li>h4 {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .2em;
    width: 1.6em;
    height: 1.6em;
    color: #8B6E53;
    background: url(../images/i-hot.png) no-repeat;
    background-size: contain;
    font-size: 1.2em;
    font-weight: 800;
}

.ul-hotclass li>p {
    color: #3b3228;
    font-size: 1.1em;
    font-weight: 800;
    text-overflow: clip;
    white-space: nowrap;
    overflow-x: auto;
}

.ul-hotclass li>p::-webkit-scrollbar {
    display: none;
}

.cube-wrap {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    width: 70%;
}

.cube-wrap span {
    display: block;
    width: .8em;
    height: .8em;
    background-color: #C9B79A;
}

.footer-wrap {
    margin: 3em auto 0 auto;
    width: 80%;
}

.radar-wrap {
    margin: 2em 0;
}

.radar-wrap>h2 {
    font-family: jxzk;
    font-size: 1.5em;
    text-align: center;
}

.radar-wrap>h2>span {
    color: #8A6B4F;
}

.img-radar {
    margin: 1.5em auto;
    width: 70%;
}

@media screen and (min-width: 1024px) {
    .img-radar {
        width: 50%;
    }

}

@media screen and (max-width: 1024px) {
    .img-radar {
        width: 50%;
    }

    .shield-wrap span {
        display: none;
    }

    .shield-wrap>h2 {
        margin-top: -.5rem;
        margin-left: 0;
    }

    .cover-img>div {
        margin: 16em auto 0 auto;
        width: 75%;
    }
}

.radar-wrap>h4 {
    margin-bottom: 1.5em;
    font-family: jxzk;
    font-size: 1.3em;
    line-height: 1.5;
    text-align: center;
}

.con-radar {
    margin: 0 auto;
    width: 100%;
    height: 18em;
    background-color: #fff;
    border-radius: 50%;
    overflow: visible;
}

@media screen and (min-width: 1024px) {
    .con-radar {
        height: 36em;
    }
}

.i-music {
    position: absolute;
    z-index: 999;
    top: .5em;
    left: .3em;
    font-size: 2em;
    color: #3b3228;
    opacity: .5;
    cursor: pointer;
}

.tit-music {
    position: absolute;
    z-index: 999;
    top: 2.1em;
    left: 3.7em;
    opacity: .6;
    font-size: 12px;
    line-height: 15px;
    color: #3b3228;
}

@media screen and (min-width: 1024px) {
    .i-music {
        left: auto;
        margin-left: 0.5em;
    }

    .tit-music {
        left: auto;
        margin-left: 4.2em;
    }
}

.hide {
    display: none;
}

.details-wrap {
    margin-bottom: 2em;
    padding: .6em;
    border: 2px dashed rgba(139, 94, 60, .15);
    border-radius: .4em;
}

.details-wrap p>span {
    margin: 0 .2em;
    color: #8A6B4F;
}

.article-wrap h4 {
    color: #8B5E3C;
    font-size: 1.3em;
    line-height: 1.6;
}

@media screen and (min-width: 1024px) {
    .img-wrap img {
        margin-bottom: 18px;
    }
}

.hc-con {
    text-align: center;
    margin-bottom: 1em;
    padding: .4em;
    border: 2px dashed rgba(96, 194, 211, .4);
    border-radius: 0.4em;
}

.hc-con p {
    padding: .4em;
    font-size: 1em;
    border-bottom: 1px dashed rgba(96, 194, 211, .4);
    border-radius: 8px;
}

.hc-con p:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
    text-align: left;
}

.hc-con img {
    margin: 1em auto;
}

.mar-top {
    margin-top: 3em;
}

.end-wrap {
    margin: 4em auto;
    padding-bottom: 4em;
    width: 80%;
}

.end-wrap p {
    margin-bottom: .4em;
    color: rgba(59, 50, 40, .9);
    text-align: center;
    position: relative;
    font-family: jxzk;
    font-size: 1.5em;
    z-index: 2;
}

@media screen and (max-width: 600px) {
    .cover-img>div {
        margin: 8.5em auto 0 auto;
        width: 80%;
    }

    .hotclass-wrap.triple h2 {
        padding: .8em .5em;
    }
}

.hotclass-wrap.triple h2 {
    margin-top: 3em;
    margin-bottom: 1.6em;
    padding: .8em 1.25em;
    border-radius: .5em;
    width: 100%;
    font-size: 1.1em;
    background: url(../images/bg-btn.png) no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff9f1;
    text-shadow: 1px 1px #ff6c00;
    font-family: jxzk;

}

.swiper {
    height: 100vh;
    overflow: hidden;
}

.bottom-linear::before {
    height: 0;
}

.con-wrap {
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
    height: 95vh !important;
}

.article-wrap>img {
    margin-top: 0;
}

.article-wrap>p {
    margin-bottom: 0;
}

.article-wrap {
    margin-bottom: 0;
}

.shield-wrap {
    width: 12em;
    height: 9em;
}

.ul-circle li {
    margin-bottom: 0;
}

.end-wrap {
    height: 100vh;
    
    width: 100%;
}

.hotclass-wrap.triple h2:first-child {
    margin: 0;
}

.swiper-slide {
    background-color: #FBF7EE;
    overflow: hidden;
}

/* 给 swiper 容器开启 3D 透视，避免层级错乱 */

/* 强制激活的 slide 层级最高 */
.swiper-slide-active {
    z-index: 15 !important;
}

/* 上一页的 slide 层级低于激活页，避免遮挡 */
.swiper-slide-prev {
    z-index: 5 !important;
}

.cover-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 多层柔化渐变：从body色到透明，无硬边界 */
    background: linear-gradient(to right,
            rgba(251, 247, 238, 1),
            /* 最左侧：完全匹配body色 */
            rgba(251, 247, 238, 0.98) 1%,
            /* 左5%：轻微透明 */
            rgba(251, 247, 238, 0.85) 2.5%,
            /* 左10%：半透明 */
            rgba(251, 247, 238, 0.5) 5%,
            /* 左15%：更多透明 */
            transparent 10%,
            /* 左20%：完全透明（保留原有渐变） */
            transparent 90%,
            /* 右20%：完全透明 */
            rgba(251, 247, 238, 0.5) 95%,
            /* 右15%：开始渐变 */
            rgba(251, 247, 238, 0.85) 97.5%,
            /* 右10%：加深 */
            rgba(251, 247, 238, 0.98) 99%,
            /* 右5%：接近实色 */
            rgba(251, 247, 238, 1)
            /* 最右侧：完全匹配body色 */
        );
    /* 关键：不拦截交互，不影响子元素 */
    pointer-events: none;
    z-index: 1;
    /* 遮罩在背景之上，内容之下 */
}

.mb-0 {
    margin-bottom: 0 !important;
}

/* 翻页引导提示样式（仅PC端显示） */
.swiper-tip {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 9999;
    pointer-events: none;
    animation: tipAnimation 2s infinite ease-in-out;
    /* 新增：默认显示（PC端） */
    display: flex;
}

/* 箭头动画 */
.tip-arrow {
    font-size: 18px;
    font-weight: bold;
}

.h-100 {
    height: 100% !important;
}

.details-wrap p>span{
    font-weight: bold;
}

.bk-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(251, 247, 238, 1), rgba(251, 247, 238, 0.98) 1%, rgba(251, 247, 238, 0.85) 2.5%, rgba(251, 247, 238, 0.5) 5%, transparent 10%, transparent 90%, rgba(251, 247, 238, 0.5) 95%, rgba(251, 247, 238, 0.85) 97.5%, rgba(251, 247, 238, 0.98) 99%, rgba(251, 247, 238, 1));
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bk-img{
    background: linear-gradient(170deg, #EBD4B2, #F6ECDE, #FFFDF7) no-repeat ;
        background-position: bottom;
    background-size: cover;
}

.end-wrap .tit-wrap img{
    width: 17em;
    height: auto;
}

.end-wrap{
    position: relative;
}

.end-wrap .img-wrap{
    display: flex;
    justify-content: center;
}

.bk-img .tit-wrap h2{
    width: fit-content;
    border-radius: 4px;
}

.lst-img{
    position: absolute;
}


@keyframes tipAnimation {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.8;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

/* 最后一页隐藏提示 */
.swiper-tip.hidden {
    display: none !important;
}



/* ========== 核心新增：移动端隐藏提示 ========== */
/* 屏幕宽度 ≤768px（手机端）时隐藏 */
@media (max-width: 768px) {
    .swiper-tip {
        display: none !important;
    }
}

/* ========== 低分辨率适配核心：媒体查询 ========== */
/* 1. 超小屏（≤320px）：比如旧款红米、iPhone 4/5 */
@media screen and (min-width: 320px) {

    /* 缩小字号，避免文字溢出 */
    body {
        font-size: 0.9em;
    }

    /* 调整容器内边距，适配窄屏 */
    .cover-wrap {
        padding: 0 5px !important;
        /* 减少左右内边距 */
    }

    /* 简化按钮尺寸 */
    .i-music {
        width: 30px !important;
        height: 30px !important;
    }

    /* 隐藏非核心元素（比如装饰性图标） */
    .decor-icon {
        display: none !important;
    }

    .shield-wrap {
        height: 5em !important;
    }

    .lst-img{
        bottom: 2em;
    }
    .bk-img img{
        width: 100%;
    }
    .end-content{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        height: 50%;
    }
    .con-wrap {
        display: block;
    }
}

@media screen and (min-width: 390px) {

    /* 缩小字号，避免文字溢出 */
    body {
        font-size: 1em;
    }
}

@media screen and (min-width: 414px) {

    /* 缩小字号，避免文字溢出 */
    body {
        font-size: 1.1em;
    }
}

@media screen and (min-width: 430px) {

    /* 缩小字号，避免文字溢出 */
    body {
        font-size: 1.15em;
    }
}

/* 2. 小屏（≤375px）：主流低分辨率手机 */
@media (max-width: 375px) {
    .article-wrap>img{
        margin-bottom: 0;
    }

    body {
        font-size: 0.9em;
    }
    /* 调整Swiper翻页动画，避免小屏变形 */
    .swiper {
        perspective: 800px !important;
        /* 降低3D透视，适配窄屏 */
    }

    /* 调整核心内容区域宽度 */
    .content-box {
        width: 95% !important;
        /* 占满屏幕95%，留少量边距 */
        margin: 0 auto !important;
    }

    /* 图片自适应，避免溢出 */
    img {
        max-width: 100% !important;
        height: auto !important;
        /* 保持宽高比 */
    }

    .shield-wrap {
        height: 4em !important;
    }

    .article-wrap>p {
        font-size: 1.2em !important;
    }

    .lst-img{
        bottom: 2em;
    }
    .end-content{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        height: 50%;
    }
    .bk-img img{
        width: 100%;
    }
    .con-wrap {
        display: block;
        position: absolute;
    }
}

@media (max-width: 414px) {
    .shield-wrap {
        height: 7em !important;
    }
    .lst-img{
        bottom: 3em;
    }
    .end-content{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        height: 50%;
    }
    .bk-img img{
        width: 100%;
    }
    .con-wrap {
        display: block;
        position: absolute;
    }
}

@media (max-width: 430px) {
    .shield-wrap {
        height: 6em !important;
    }

    .con-wrap {
        display: block;
        position: absolute;
    }

    .img-wrap img{
        position: absolute;
        bottom: 2em;
        left: 0;
        width: 100%;
    }

    .article-wrap img{
        position: absolute;
        bottom: 2em;
        left: 0;
    }

    .article-wrap {
        margin-bottom: 1em;
        margin-top: 1em;
    }

    .lst-img{
        bottom: 4em;
    }

    .end-content{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        height: 50%;
    }
}



@media (min-width: 1024px) {

    body {
        font-size: 15px;
    }
    .shield-wrap {
        height: 8.5em !important;
    }
    .shield-wrap>h2{
        font-size: 1.4em;
    }
    .shield-wrap>span{
        margin-top: 1em;
    }
    .article-wrap{
        margin-bottom: 10px;
    }
    .lst-img{
        bottom: -45px;
        left: -80px;
    }
    .end-content{
    display: flex;
    justify-content: center;
    margin-top: 2em;
    height: auto;
    }
    .lst-img img{
        width: 85%;
        height: auto;
    }
}

.flex-p{
    width: fit-content;
    margin: 0;
}

.bk-img .tit-wrap h2{
    width: 25%;
}


@media (min-width: 1920px) {

    body {
        font-size: 17px;
    }

    .article-wrap>p {
        font-size: 1.4em;
    }

    .con-wrap {
        display: flex;
    }

    .article-wrap {
        margin-bottom: 2em;
        margin-top: 2px;
    }

    .img-wrap {
        margin-top: 1em;
    }
    .con-wrap {
        display: block;
        position: relative;
    }

    .article-wrap img{
        position: absolute;
        bottom: 0;
        left: 0;
        margin-bottom: 30px;
    }

    .img-wrap img{
        position: absolute;
        bottom: 0;
        left: 0;
        margin-bottom: 30px;
    }
}



*** End of File