/*
hedaer
-------------------------------------------------- */
.articleHeader {
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: url(/special/meets/img/article/cll/12/hd_im_01.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

@media screen and (max-width: 1024px) {
    .articleHeader {
        min-height: 600px;
        background: url(/special/meets/img/article/cll/12/hd_im_02.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }
}

@media screen and (max-width: 768px) {
    .articleHeader {
        min-height: 500px;
        background: url(/special/meets/img/article/cll/12/hd_im_03.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: scroll;
    }
}


/*
midImg
-------------------------------------------------- */
.midImg {
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: url(/special/meets/img/article/cll/12/co_bg_01.jpg) no-repeat center top;
    text-indent: -9999px;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    .midImg {
        height: 600px;
        min-height: 600px;
        background: url(/special/meets/img/article/cll/12/co_bg_02.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }
}

@media screen and (max-width: 768px) {
    .midImg {
        min-height: 600px;
        height: 600px;
        background: url(/special/meets/img/article/cll/12/co_bg_03.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }
}

@media screen and (max-width: 480px) {
    .midImg {
        min-height: 400px;
        height: 400px;
        background: url(/special/meets/img/article/cll/12/co_bg_03.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }
}

#secDesc01 .container .txt {
    width: 100%;
    float: none;
}

/*
secAnimal
-------------------------------------------------- */
#secAnimal h3 {
    margin-bottom:20px;
}

.sec01note {
    margin:30px auto 0;
    padding-top:40px;
    background:url(/special/meets/img/article/cll/12/co_ln_01.jpg) no-repeat top center;
}

/*
sec02
-------------------------------------------------- */
#sec02 {
    background:#E5F4FF url(../../../img/article/cll/12/co_bg_07.png) no-repeat center center;
    background-size:cover;
}

#sec02 .titleBox h2 span {
    color: #191970;
}

#sec02 .titleBox h2 em {
    color: #1e90ff;
}

.articleSec .txt h3 {
    border-left:5px solid #191970;
}


/*
ftImg
-------------------------------------------------- */
.ftImg {
    text-align:center;
    background:url(/special/meets/img/article/cll/12/co_bg_08.gif) no-repeat center top;
    padding:150px 0 0;
    background-size:100% auto;
}

.ftImg .inner {
    padding:20px 0 70px;
}


.ftImg h3 {
    display:inline-block;
    line-height:1.6em;
    padding-bottom:20px;
    margin-bottom:30px;
    background:url(/special/meets/img/article/cll/12/co_ln_02.png) no-repeat bottom center;
}


.ftImg h4 {
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px dotted #ccc;
}

.flowlistbox {
    width:96%;
    margin:0 auto;
}

.ftImg ul {
    width:100%;
    padding:30px 0 30px 40px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 0 1px 1px #eee;
}

.ftImg li {
    float:left;
    width:25%;
    padding-right:40px;
    background:url(/special/meets/img/article/cll/12/co_ar_01.png) no-repeat 96% center;
}

.ftImg li:last-child {
    background:none;
}

.step {
    background:#1e90ff;
    color:#fff;
    font-size:1.2rem;
    padding:2px 15px 1px 15px;
    display:inline-block;
    margin-bottom:5px;
    border-radius:10px;
}

@media screen and (max-width: 1024px) {
    .ftImg {
        padding-top:100px;
    }
    .ftImg ul {
        padding-left:25px;
    }
    .ftImg li {
        padding-right:25px;
        background-size:10px 20px;
    }
}

@media screen and (max-width: 800px) {
    .ftImg {
        padding-top:100px;
        background-size:cover;
    }

    .ftImg ul {
        padding:30px 20px;
    }

    .ftImg li {
        width:100%;
        background:none;
        padding:0 0 40px;
        background:url(/special/meets/img/article/cll/12/co_ar_02.png) no-repeat center 90%;
    }

    .imgr,.imgl {
        width:50%;
        float:left;
    }
}

@media screen and (max-width: 600px) {
    .ftImg {
        /*padding-top:60px;*/
    }
    .ftImg ul {
        padding:30px 10px;
    }
    .ftImg li {
        padding-bottom:30px;
    }
    .ftImg li:last-child {
        padding-bottom:0;
    }

    .ftImg h3 {
        font-size:1.6rem;
    }
}

@media screen and (max-width: 500px) {
    .ftImg {
        /*padding-top:50px;*/
    }
}

@media screen and (max-width: 400px) {
    .ftImg {
        /*padding-top:30px;*/
    }
}

.lastImg {
    text-align:center;
    padding:70px;
}

.lastImg p {
    margin-bottom:30px;
}

.lastImg p a {
    text-decoration:underline;
    color:#f00;
}

.lastImg img {
    width:auto;
    height:auto;
    max-width:500px;
}

@media screen and (max-width: 600px) {
    .lastImg {
        padding:50px 20px;
    }
    .lastImg img {
        max-width:100%;
        height:auto;
    }
}

.icon {
    width:50px;
    margin:0 auto 10px;
}

.fttxt {
    margin-top:30px;
}

.lastImg p.youtubebtn {
    display:inline-block;
    max-width:100%;
    border-radius:7px;
}

.lastImg p.youtubebtn a {
    color:#fff;
    padding:10px 35px 10px 20px;
    display:block;
    text-align:center;
    text-decoration:none;
    border-radius:7px;
    font-size:1.3rem;
    background:#f00 url(../../../img/co_ar_02.png) no-repeat 95% center;
    transition:0.5s;
    background-size: 7px;
}

.lastImg p.youtubebtn:hover {
    opacity:0.7;
}

.lastImg p.youtubebtn a span {
    display:inline-block;
}