body {
    line-height:3.5em;
    letter-spacing:0.1em;
}

.sec-student .container {
    background:#fff;
    position:relative;
}

.l-inner {
    width:870px;
    margin:0 auto;
    padding-bottom:1px;
}

main.coc {
    border-bottom:1px dashed #eee;
    padding-bottom:100px;
}

main section {
    margin-bottom:100px;
}

.l-img {
    width:98%;
    margin:0 auto;
    line-height:0;
}

.l-img img {
    width:100%;
    height:auto;
}

.img {
    line-height:0;
}

@media screen and (max-width: 1000px) {
    .l-inner {
        max-width:90%;
        margin:0 auto;
    }
}

@media screen and (max-width: 768px) {
    main section {
        margin-bottom:70px;
    }

    header .logo img {
        width:190px;
        height:auto;
    }
}

@media screen and (max-width: 500px) {
    main section {
        margin-bottom:50px;
    }

    .l-inner {
        width:96%;
        margin:0 auto;
    }

    header .logo img {
        width:170px;
        height:auto;
    }
}


@media screen and (max-width: 400px) {
    .l-img {
        width:100%;
    }

    .l-inner {
        max-width:96%;
        margin:0 auto;
    }
    header .logo img {
        width:150px;
        height:auto;
    }

    main section {
        margin-bottom:30px;
    }
}

/*
header
-------------------------------------------------- */
header {
    border-top:none;
}

header .container {
    position:relative;
}

header .title {
    text-align:center;
}

header h1 {
    bottom:auto;
    text-align:center;
    display:block;
    line-height:1.3em;
    font-size:2rem;
    width:100%;
    position:relative;
    padding:20px 0;
    left:0;
}

header h1 .articlenum {
    font-size:1.3rem;
    display:block;
}

header .logo {
    position:absolute;
    top:40px;
    left:10px;
    z-index:10;
}

header .snav {
    position:absolute;
    right:10px;
    top:55px;
    z-index:10;
}

@media screen and (max-width: 1100px) {
    header h1 {
        padding-top:20px;
        margin-bottom:0;
    }

    header h1 .articlenum {
        padding-top:10px;
        border-top:1px dashed #eee;
    }

    header .logo {
        top:20px;
        left:5px;
        position: relative;
    }

    header .snav {
        top:20px;
    }
}

@media screen and (max-width: 500px) {
    header h1 {
        font-size:1.8rem;
        margin-bottom:0;
    }
}

/*
sec-title
-------------------------------------------------- */
#sec-title .container {
    display:table;
    width:100%;
}

#sec-title .titleBox .title {
    position:relative;
}

#sec-title .titleBox {
    display:table-cell;
    vertical-align:middle;
    width:40%;
    padding:0 20px;
}

#sec-title .titleBox h2 {
    padding:10px;
    background:#fff;
    text-align:center;
    position:relative;
    z-index:2;
}


#sec-title .studentsBox {
    display:table-cell;
    vertical-align:middle;
    width:60%;
    text-align:center;
}


#sec-title .studentsBox .student {
    width:45%;
    display:inline-block;
    margin:0;
}

#sec-title .studentsBox .student .thumb {
    line-height:0;
}

#sec-title .studentsBox .student .txt {
    line-height:2em;
    padding:10px 5px;
    display:inline-block;
    min-width:90%;
}

#sec-title .studentsBox .student p {
    font-size:1.2rem;
}

#sec-title .studentsBox .student h3 {
    font-size:1.4rem;
    font-weight:normal;
}

@media screen and (max-width: 1100px) {
    #sec-title .titleBox {
        display:block;
        width:100%;
        text-align:center;
        margin-bottom:25px;
        padding:0 70px;
    }

    #sec-title .studentsBox {
        display:block;
        width:100%;
    }

    #sec-title .titleBox h2 {
        padding:10px;
    }

    #sec-title .studentsBox .student img {
        width:150px;
        height:auto;
    }
    #sec-title .studentsBox .student {
        width:47%;
        margin:0 1%;
    }
}

@media screen and (max-width: 768px) {
    #sec-title .titleBox {
        padding:0 20px;
    }
}

@media screen and (max-width: 500px) {
    #sec-title .titleBox {
        padding:0;
    }

    #sec-title .studentsBox .student img {
        width:130px;
    }

    #sec-title .studentsBox .student .txt {
        padding:7px 3px;
    }

    #sec-title .titleBox h2 {
        font-size:1.6rem;
    }
}

@media screen and (max-width: 400px) {
    #sec-title .studentsBox .student img {
        width:110px;
    }
    #sec-title .studentsBox .student p {
        font-size: 1.1rem;
        line-height: 1.5em;
        margin-bottom: 3px;
    }

}


@media screen and (max-width: 376px) {
    #sec-title .titleBox h2 {
        font-size:1.5rem;
        padding:10px 8px;
    }
}


/*
sec-intro
-------------------------------------------------- */
#sec-intro {
    text-align:center;
}

#sec-intro .container {
    background:#fff;
    margin-top:-70px;
    position:relative;
    padding-top:70px;
}

#sec-intro .img {
    margin:30px auto 10px;
}

.txt-what {
    margin-bottom:50px;
}

#sec-intro h2 {
    font-size:2rem;
    margin-bottom:45px;
}

#sec-intro .img img {
    max-width:77%;
}

@media screen and (max-width: 1000px) {
    .txt-what img {
        width:70px;
        height:auto;
    }
}


@media screen and (max-width: 768px) {
    .txt-what {
        margin-bottom:30px;
    }

    #sec-intro h2 {
        font-size:1.8rem;
    }
    #sec-intro .container {
        margin-top:-50px;
    }
}

@media screen and (max-width: 600px) {

    .txt-what img {
        width:50px;
    }
}

@media screen and (max-width: 500px) {
    #sec-intro .container {
        margin-top:-30px;
        padding-top:40px;
    }

}

@media screen and (max-width: 400px) {
    #sec-intro .container {
        margin-top:0;
    }

    #sec-intro h2 {
        margin-bottom:30px;
    }

    #sec-intro h2 + p {
        text-align:left;
    }
}

/*
sec-title
-------------------------------------------------- */
#sec-title {
    background-size:cover;
}

#sec-title h2 {
    font-size:1.8rem;
}

#sec-title .container {
    width:100%;
    max-width:100%;
}

/*
sec-student
-------------------------------------------------- */
.sec-student h3 {
    font-size:2rem;
    padding:5px 5px 5px 20px;
    margin-bottom:70px;

}

.box {
    margin-bottom:77px;
}

.box:after {
    content:"";
    display:block;
    clear:both;
}

.box .img {
    width:60%;
    position:relative;
}

.box .txt {
    padding:30px;
    margin-top:-130px;
    width:60%;
    background:#fff;
    position:relative;
}

.box-right .img {
    float:right;
}

.box-right .txt {
    float:left;
}


.box-left .img {
    float:left;
}

.box-left .txt {
    float:right;
}


.midimg,.midimg2 {
    height:400px;
    margin-bottom:100px;
    background-attachment: fixed;
    background-size: cover;
}

.youtubelink {
    text-align:center;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box .txt p span.name {
   display:block;
    text-align:right;
}

@media screen and (max-width: 870px) {
    .box .img {
        width:70%;
    }
    .box .txt {
        padding:25px;
        margin-top:-100px;
        width:70%;
    }
}

@media screen and (max-width: 768px) {
    .sec-student h3 {
        font-size:1.8rem;
        border-left:5px solid #3e77ad;
        padding:5px 5px 5px 15px;
    }
}

@media screen and (max-width: 600px) {
    .box .img {
        width:80%;
    }
    .box .txt {
        padding:25px;
        margin-top:-70px;
        width:80%;
    }
    .midimg,.midimg2 {
        height:300px;
    }

    .youtubelink img {
        width:230px;
    }
}

@media screen and (max-width: 500px) {
    .sec-student h3 {
        font-size:1.7rem;
        line-height:1.9em;
    }

    .box .txt {
        margin-top:-40px;
        padding:20px;
    }

    .midimg,.midimg2 {
        margin-bottom:70px;
    }
}


@media screen and (max-width: 400px) {
    .sec-student h3 {
        font-size:1.6rem;
        border-left:5px solid #3e77ad;
        margin-bottom:35px;
    }

    .box {
        margin-bottom:40px;
    }

    .box .txt {
        margin-top:-25px;
    }

    .box .txt p {
        font-size:1.3rem;
    }


    .box-left .img,
    .box-left .txt,
    .box-right .img,
    .box-right .txt {
        width:100%;
        float:none;
        margin-top:0;
    }

    .midimg,.midimg2 {
        height:250px;
    }

    .youtubelink img {
        width:180px;
    }
}

@media screen and (max-width: 380px) {
    .sec-student h3 {
        font-size:1.5rem;
    }

    .midimg,.midimg2 {
        height:220px;
    }

    .youtubelink img {
        width:170px;
    }
}

/*
aside
-------------------------------------------------- */
aside ul:after {
    content:"";
    display:block;
    clear:both;
    margin-bottom:20px;
}

aside li.prev {
    float:left;
}

aside li.next {
    float:right;
}

aside a {
    display:block;
    padding:7px 20px;
}

.pc aside a {
    transition:0.5s;
}

aside p a {
    display:inline-block;
}

aside p {
    text-align:center;
}

.fade {
    opacity:0;
    transition:1.2s;
    transform: translate(0,40px);
    -webkit-transform: translate(0,40px);
}

.mv01{
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    opacity:1;
}

.ftimg {
    line-height:0;
    margin-bottom:100px;
    margin-top:-200px;
}

@media screen and (max-width: 768px) {
    .ftimg {
        margin-top:-120px;
        margin-bottom:70px;
    }
}

@media screen and (max-width: 500px) {
    .ftimg {
        margin-top:-100px;
        margin-bottom:50px;
    }

    aside a {
        padding:7px 15px;
    }
}

@media screen and (max-width: 400px) {
    .ftimg {
        margin-top:0;
    }
}

@media screen and (max-width: 350px) {
    aside a {
        padding:7px 10px;
        font-size:1.3rem;
    }
}


/*
sec-addinfo
-------------------------------------------------- */
.sec-addinfo .container {
    padding:50px;
    border-radius:10px;
    position:relative;
}

.sec-addinfo h3 {
    font-size:2.7rem;
    margin-bottom:30px;
}

.sec-addinfo .txt {
    width:60%;
    float:left;
    padding-right:50px;
}

.sec-addinfo .img {
    width:40%;
    float:left;
    text-align:center;
}

@media screen and (max-width: 768px) {
    .sec-addinfo .container {
        padding:40px;
    }

    .sec-addinfo .txt {
        padding-right:30px;
    }

    .sec-addinfo h3 {
        font-size:1.8rem;
        margin-bottom:20px;
    }
}

@media screen and (max-width: 600px) {
    .sec-addinfo .txt {
        width:100%;
        float:none;
        margin-bottom:20px;
    }

    .sec-addinfo .img {
        width:100%;
        float:none;
    }
}

@media screen and (max-width: 400px) {
    .sec-addinfo .container {
        padding:30px;
    }

    .sec-addinfo h3 {
        font-size:1.6rem;
        margin-bottom:20px;
    }
}


/* --------------------------------------------------
EACH ARTICLE
-------------------------------------------------- */

/* coc13
------------------------------ */
#coc13 h1 {
    color:#3e77ad;
}

#coc13 .articleHeader {
    background:url(/special/meets/img/article/cll/13/hd_bg_01.jpg) no-repeat center center;
}

#coc13 #sec-title {
    background:url(/special/meets/img/article/cll/13/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc13 #sec-title .titleBox h2 {
    color:#3e77ad;
}

#coc13 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #3e77ad, #3e77ad 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #3e77ad, #3e77ad 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc13 .sec-student h3 {
    border-left:7px solid #3e77ad;
}

#coc13 #sec-title .studentsBox .student .txt {
    background:#356695;
    color:#fff;
    box-shadow:5px 5px #242B49;
}

#coc13 .midimg {
    background:url(/special/meets/img/article/cll/13/co_md_01.jpg) no-repeat left center;
    background-size: cover;
}

.pc#coc13 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

#coc13 aside a {
    border:2px solid #356695;
    color:#356695;
}

.pc#coc13 aside a:hover {
    background:#356695;
    color:#fff;
}

@media screen and (max-width: 700px) {
    .pc#coc13 .midimg {
        background-attachment: scroll;
    }
}



/* coc14
------------------------------ */
#coc14 h1 {
    color:#77b393;
}

#coc14 .articleHeader {
    background:url(/special/meets/img/article/cll/14/hd_bg_01.jpg) no-repeat center center;
}

#coc14 #sec-title {
    background:url(/special/meets/img/article/cll/14/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc14 #sec-title .titleBox h2 {
    color:#77b393;
}

#coc14 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #77b393, #77b393 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #77b393, #77b393 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc14 .sec-student h3 {
    border-left:7px solid #77b393;
}

#coc14 #sec-title .studentsBox .student .txt {
    background:#77b393;
    color:#fff;
    box-shadow:5px 5px #426450;
}

#coc14 .midimg {
    background:url(/special/meets/img/article/cll/14/co_md_01.jpg) no-repeat center center;
    background-size: cover;
}

.pc#coc14 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

#coc14 aside a {
    border:2px solid #77b393;
    color:#77b393;
}

#coc14 .sec-addinfo h3 {
    color:#77b393;
}

#coc14 .sec-addinfo .container {
    border:5px solid #77b393;
    background:url(/special/meets/img/article/cll/14/co_bg_02.gif) no-repeat right center;
    background-size:auto 100%;
}

#coc14 .sec-addinfo .img span {
    position:absolute;
    bottom:-1px;
    left:55%;
}

.pc#coc14 aside a:hover {
    background:#77b393;
    color:#fff;
}

@media screen and (max-width: 950px) {
    #coc14 .sec-addinfo .img span {
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .pc#coc14 .midimg {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 600px) {
    #coc14 .sec-addinfo .img span {
        display:block;
        left:0;
    }

    #coc14 .sec-addinfo .img span img {
        width:150px;
    }
}


/* coc15
------------------------------ */
#coc15 h1 {
    color:#be4747;
}

#coc15 .articleHeader {
    background:url(/special/meets/img/article/cll/15/hd_bg_01.jpg) no-repeat center center;
}

#coc15 #sec-title {
    background:url(/special/meets/img/article/cll/15/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc15 #sec-title .titleBox h2 {
    color:#be4747;
}

#coc15 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #be4747, #be4747 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #be4747, #be4747 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc15 .sec-student h3 {
    border-left:7px solid #be4747;
}

#coc15 #sec-title .studentsBox .student .txt {
    background:#be4747;
    color:#fff;
    box-shadow:5px 5px #893939;
}

#coc15 .midimg {
    background:url(/special/meets/img/article/cll/15/co_md_01.jpg) no-repeat center center;
    background-size: cover;
}

.pc#coc15 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

#coc15 aside a {
    border:2px solid #be4747;
    color:#be4747;
}

#coc15 .droneimg {
    position:relative;
    margin-top:120px;
}

#coc15 .droneimg span {
    position:absolute;
    right:50px;
    top:-120px;
    z-index:1;

    -webkit-animation-name:fuwafuwa;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease;

    -moz-animation-name:fuwafuwa;
    -moz-animation-duration:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease;
}

.pc#coc15 aside a:hover {
    background:#be4747;
    color:#fff;
}

@-webkit-keyframes fuwafuwa {
    0% {-webkit-transform:translate(0, 0);}
    50% {-webkit-transform:translate(0, -10px);}
    100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
    0% {-moz-transform:translate(0, 0);}
    50% {-moz-transform:translate(0, -10px);}
    100% {-moz-transform:translate(0, 0);}
}

@media screen and (max-width: 950px) {
    #coc15 .droneimg span img {
        width:250px;
    }

    #coc15 .droneimg span {
        right:0;
    }
}

@media screen and (max-width: 700px) {
    .pc#coc15 .midimg {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 600px) {
    #coc15 .droneimg span img {
        width:170px;
        top:-100px;
    }
}

@media screen and (max-width: 400px) {
    #coc15 .droneimg {
        margin-top:90px;
    }
    #coc15 .droneimg span img {
        width:150px;
    }
    #coc15 .droneimg span {
        right:-10px;
        top:-90px;
    }
}


/* coc16
------------------------------ */
#coc16 h1 {
    color:#a177ad;
}

#coc16 .articleHeader {
    background:url(/special/meets/img/article/cll/16/hd_bg_01.jpg) no-repeat center center;
}

#coc16 #sec-title {
    background:url(/special/meets/img/article/cll/16/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc16 #sec-title .titleBox h2 {
    color:#a177ad;
}

#coc16 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #a177ad, #a177ad 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #a177ad, #a177ad 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc16 .sec-student h3 {
    border-left:7px solid #a177ad;
}

#coc16 #sec-title .studentsBox .student .txt {
    background:#a177ad;
    color:#fff;
    box-shadow:5px 5px #463550;
}

#coc16 .midimg {
    background:url(/special/meets/img/article/cll/16/co_md_01.jpg) no-repeat center center;
    background-size: cover;
}

.pc#coc16 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

#coc16 aside a {
    border:2px solid #a177ad;
    color:#a177ad;
}

#coc16 .sec-addinfo h3 {
    color:#a177ad;
}

#coc16 .sec-addinfo .container {
    border:5px solid #a177ad;
    background:url(/special/meets/img/article/cll/16/co_bg_02.gif) no-repeat right center;
    background-size:auto 100%;
}

#coc16 .sec-addinfo .img span {
    position:absolute;
    bottom:-1px;
    left:55%;
}

#coc16 #sec-intro p a {
    color:#a177ad;
}

#coc16 #sec-intro .img img {
    max-width:100%;
}

.pc#coc16 aside a:hover {
    background:#a177ad;
    color:#fff;
}

.moveimg {
    position:relative;
}

.moveimg span {
    position:absolute;
    top:-50px;
    left:20%;
    z-index:1;
}

.moveimg span img {
    width:200px;
}

@media screen and (max-width: 950px) {
    #coc16 .sec-addinfo .img span {
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .pc#coc16 .midimg {
        background-attachment: scroll;
    }
    .moveimg span {
        left:10%;
    }
    .moveimg span img {
        width:150px;
    }
}

@media screen and (max-width: 600px) {
    #coc16 .sec-addinfo .img span {
        display:block;
        left:0;
    }

    #coc16 .sec-addinfo .img span img {
        width:150px;
    }

    .moveimg span {
        left:0%;
    }
}

@media screen and (max-width: 600px) {
    .moveimg span {
        display:none;
    }
}


/* coc17
------------------------------ */
#coc17 h1 {
    color:#e85c08;
}

#coc17 .articleHeader {
    background:url(/special/meets/img/article/cll/17/hd_bg_01.jpg) no-repeat center center;
}

#coc17 #sec-title {
    background:url(/special/meets/img/article/cll/17/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc17 #sec-title .titleBox h2 {
    color:#e85c08;
}

#coc17 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #e85c08, #e85c08 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #e85c08, #e85c08 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc17 .sec-student h3 {
    border-left:7px solid #e85c08;
}

#coc17 #sec-title .studentsBox .student .txt {
    background:#e85c08;
    color:#fff;
    box-shadow:5px 5px #b14505;
}

#coc17 .midimg {
    background:url(/special/meets/img/article/cll/17/co_md_01.jpg) no-repeat center center;
    background-size: cover;
}

#coc17 .midimg2 {
    background:url(/special/meets/img/article/cll/17/co_md_02.jpg) no-repeat center center;
    background-size: cover;
}

.pc#coc17 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

.pc#coc17 .midimg2 {
    background-attachment: fixed;
    background-size: cover;
}

#coc17 aside a {
    border:2px solid #e85c08;
    color:#e85c08;
}

#coc17 .sec-addinfo h3 {
    color:#e85c08;
}

#coc17 .sec-addinfo .container {
    background:#fff;
    background-size:auto 100%;
}

#coc17 .sec-addinfo .img span {
    position:absolute;
    bottom:-1px;
    left:55%;
}

#coc17 #sec-intro p a {
    color:#e85c08;
}

#coc17 #sec-intro .img img {
    max-width:100%;
}

.pc#coc17 aside a:hover {
    background:#e85c08;
    color:#fff;
}

.moveimg {
    position:relative;
}

.moveimg span {
    position:absolute;
    top:-50px;
    left:20%;
    z-index:1;
}

.moveimg span img {
    width:200px;
}

@media screen and (max-width: 950px) {
    #coc17 .sec-addinfo .img span {
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .pc#coc17 .midimg {
        background-attachment: scroll;
    }
    .moveimg span {
        left:10%;
    }
    .moveimg span img {
        width:150px;
    }

    #coc17 #sec-intro .img {
        max-width: 270px;
    }
}

@media screen and (max-width: 600px) {
    #coc17 .sec-addinfo .img span {
        display:block;
        left:0;
    }

    #coc17 .sec-addinfo .img span img {
        width:150px;
    }

    .moveimg span {
        left:0%;
    }
}

@media screen and (max-width: 600px) {
    .moveimg span {
        display:none;
    }
}


#coc17 #sec-title .titleBox {
    display:block;
    width:70%;
    margin:0 auto 27px;
}

#coc17 #sec-title .studentsBox {
    display:block;
    width:100%;
}

#coc17 #sec-title .studentsBox .student {
    width:31%;
    float:left;
}

#coc17 #sec-schedule {
    position:relative;
    margin-bottom:70px;
}

#coc17 #sec-schedule h3 {
    text-align:center;
    font-size:2rem;
    position:relative;
    z-index:2;
    padding-bottom:20px;
    background:url(/special/meets/img/article/co_ln_01.gif) no-repeat bottom center;
}

#coc17 .schedule-box {
    text-align:center;
    line-height:0;
    padding:100px 0 50px;
    background:#f7f7f7;
    position:relative;
    top:-40px;
    width:100%;
}

#coc17 .sec-addinfo {
    margin-bottom:70px;
}

#coc17 .sec-addinfo .container {
    padding:0 20px 20px;
    border-radius:0;
}

#coc17 .addinfo-inner {
    border: 5px solid #e85c08;
    position:relative;
    padding: 20px 20px 60px;
    border-radius:10px;
}

#coc17 .addinfo-inner .img-box img {
    width:100%;
    height:auto;
}

#coc17 .sec-addinfo .txt-box {
    width:50%;
    float:left;
    padding:0 15px;
}

#coc17 .sec-addinfo .txt {
    padding-right:0;
    width:100%;
    float:none;
}

#coc17 .sec-addinfo h3 {
    position:absolute;
    bottom: -5px;
    right: 2px;
    margin-bottom:0;
    color:#cccccc;
}

#coc17 span.name {
    text-align:right;
    display:block;
}

#coc17 .ftimg {
    margin-top:0;
}

#coc17 .box-left {
    position:relative;
}

#coc17 .box-left .heart {
    position:absolute;
    top:95px;
    left:55%;
    animation: beat .7s infinite alternate;
    transform-origin: center;
    z-index:1;
}

@keyframes beat{
    to { transform: scale(1.1); }
}

@media screen and (max-width: 600px) {
    #coc17 .img-box {
        line-height:0;
    }

    #coc17 .sec-addinfo .txt-box {
        width:100%;
        float:none;
        margin-top:20px;
    }

    #coc17 .box-left .heart {
        width:90px;
    }
}

@media screen and (max-width: 500px) {
    #coc17 .sec-addinfo .container {
        padding:0;
    }
    #coc17 .addinfo-inner {
        padding:10px 10px 40px;
    }
    #coc17 .addinfo-inner p {
        font-size:1.3rem;
    }

}

@media screen and (max-width: 400px) {
    #coc17 #sec-title .studentsBox .student p {
        font-size: 1.0rem;
        line-height: 1.3em;
    }
    #sec-title .studentsBox .student h3 {
        font-size:1.3rem;
    }

    #coc17 #sec-title {
        padding:12px 0 0;
    }
}

@media screen and (max-width: 350px) {
    #coc17 #sec-schedule h3 {
        font-size:1.7rem;
    }
}

#coc17 .diblock {
    display:inline-block;
}


/* coc18
------------------------------ */
#coc18 h1 {
    color:#ff9600;
}

#coc18 .articleHeader {
    background:url(/special/meets/img/article/cll/18/hd_bg_01.jpg) no-repeat center center;
}

#coc18 #sec-title {
    background:url(/special/meets/img/article/cll/18/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc18 #sec-title .titleBox h2 {
    color:#ff9600;
}

#coc18 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #ff9600, #ff9600 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #ff9600, #ff9600 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc18 .sec-student h3 {
    border-left:7px solid #ff9600;
}

#coc18 #sec-title .studentsBox .student .txt {
    background:#ff9600;
    color:#fff;
    box-shadow:5px 5px #d78d23;
}

#coc18 .midimg {
    background:url(/special/meets/img/article/cll/18/co_md_01.jpg) no-repeat 73% center;
    background-size: cover;
}

.pc#coc18 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

#coc18 aside a {
    border:2px solid #ff9600;
    color:#ff9600;
}

#coc18 .sec-addinfo h3 {
    color:#ff9600;
}

#coc18 .sec-addinfo .container {
    border:5px solid #ff9600;
    background:url(/special/meets/img/article/cll/18/co_bg_02.gif) no-repeat right center;
    background-size:auto 100%;
}

#coc18 .sec-addinfo .img span {
    position:absolute;
    bottom:-1px;
    left:55%;
}

#coc18 #sec-intro p a {
    color:#ff9600;
}

#coc18 #sec-intro .img img {
    max-width:100%;
}

.pc#coc18 aside a:hover {
    background:#ff9600;
    color:#fff;
}


#coc18 .secImg {
    width:500px;
    margin:0 auto;
}

#coc18 #sec-intro h3 {
    font-size:1.4rem;
    margin:30px auto 0;
}

#coc18 .slick-arrow {
    width:50px;
    height:50px;
    border-radius:25px;
    background:#ff9600;
    display:inline-block;
    margin-top:-25px;
}

#coc18 .gallery {
    position:relative;
}

#coc18 .gallery p {
    font-size:1.3rem;
}

#coc18 .slick-arrow.slick-next {
    right:-20px;
}

#coc18 .slick-arrow.slick-next:before {
    content:"";
    background: url(/special/meets/img/co_ar_02.png) no-repeat right center;
    width:10px;
    height:24px;
    display:inline-block;
    background-size:contain;
}

#coc18 .slick-arrow.slick-prev {
    left:-20px;
}

#coc18 .slick-arrow.slick-prev:before {
    content:"";
    background: url(/special/meets/img/co_ar_09.png) no-repeat right center;
    width:10px;
    height:24px;
    display:inline-block;
    background-size:contain;
}

@media screen and (max-width: 950px) {
    #coc18 .sec-addinfo .img span {
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .pc#coc18 .midimg {
        background-attachment: scroll;
    }
    .moveimg span {
        left:10%;
    }
    .moveimg span img {
        width:150px;
    }

    #coc18 .secImg {
        width:94%;
    }
}

@media screen and (max-width: 600px) {
    #coc18 .sec-addinfo .img span {
        display:block;
        left:0;
    }

    #coc18 .sec-addinfo .img span img {
        width:150px;
    }

    .moveimg span {
        left:0%;
    }
}

@media screen and (max-width: 600px) {
    .moveimg span {
        display:none;
    }
}


/* coc19
------------------------------ */
#coc19 h1 {
    color:#009FDC;
}

#coc19 .articleHeader {
    background:url(/special/meets/img/article/cll/19/hd_bg_01.jpg) no-repeat center center;
}

#coc19 #sec-title {
    background:url(/special/meets/img/article/cll/19/co_bg_01.jpg) no-repeat center center;
    background-size:cover;
    padding:20px 20px 0;
}

#coc19 #sec-title .titleBox h2 {
    color:#009FDC;
}

#coc19 #sec-title .titleBox .title:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:5px;
    left:5px;
    background: -webkit-repeating-linear-gradient(-45deg, #009FDC, #009FDC 2px,#fff 2px, #fff 5px);
    background: repeating-linear-gradient(-45deg, #009FDC, #009FDC 2px,#fff 2px, #fff 5px);
    z-index: 1;
}

#coc19 .sec-student h3 {
    border-left:7px solid #009FDC;
}

#coc19 #sec-title .studentsBox .student .txt {
    background:#009FDC;
    color:#fff;
    box-shadow:5px 5px #008ABA;
}

#coc19 .midimg {
    background:url(/special/meets/img/article/cll/19/co_md_01.jpg) no-repeat 73% center;
    background-size: cover;
}

.pc#coc19 .midimg {
    background-attachment: fixed;
    background-size: cover;
}

#coc19 aside a {
    border:2px solid #009FDC;
    color:#009FDC;
}

#coc19 .sec-addinfo h3 {
    color:#009FDC;
}

#coc19 .sec-addinfo .container {
    border:5px solid #009FDC;
    background:url(/special/meets/img/article/cll/19/co_bg_02.gif) no-repeat right center;
    background-size:auto 100%;
}

#coc19 .sec-addinfo .img span {
    position:absolute;
    bottom:-1px;
    left:55%;
}

#coc19 #sec-intro p a {
    color:#009FDC;
}

#coc19 #sec-intro .img img {
    max-width:100%;
}

.pc#coc19 aside a:hover {
    background:#009FDC;
    color:#fff;
}


#coc19 .secImg {
    width:500px;
    margin:0 auto;
}

#coc19 #sec-intro h3 {
    font-size:1.4rem;
    margin:30px auto 0;
}

#coc19 .slick-arrow {
    width:50px;
    height:50px;
    border-radius:25px;
    background:#009FDC;
    display:inline-block;
    margin-top:-25px;
}

#coc19 .gallery {
    position:relative;
}

#coc19 .gallery p {
    font-size:1.3rem;
}

#coc19 .slick-arrow.slick-next {
    right:-20px;
}

#coc19 .slick-arrow.slick-next:before {
    content:"";
    background: url(/special/meets/img/co_ar_02.png) no-repeat right center;
    width:10px;
    height:24px;
    display:inline-block;
    background-size:contain;
}

#coc19 .slick-arrow.slick-prev {
    left:-20px;
}

#coc19 .slick-arrow.slick-prev:before {
    content:"";
    background: url(/special/meets/img/co_ar_09.png) no-repeat right center;
    width:10px;
    height:24px;
    display:inline-block;
    background-size:contain;
}

@media screen and (max-width: 950px) {
    #coc19 .sec-addinfo .img span {
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .pc#coc19 .midimg {
        background-attachment: scroll;
    }
    .moveimg span {
        left:10%;
    }
    .moveimg span img {
        width:150px;
    }

    #coc19 .secImg {
        width:94%;
    }
}

@media screen and (max-width: 600px) {
    #coc19 .sec-addinfo .img span {
        display:block;
        left:0;
    }

    #coc19 .sec-addinfo .img span img {
        width:150px;
    }

    .moveimg span {
        left:0%;
    }
}

@media screen and (max-width: 600px) {
    .moveimg span {
        display:none;
    }
}

#coc19 .articlebtn {
    border: 2px solid #009FDC;
    color: #009FDC;
    display:block;
    line-height:1.5;
    padding:10px 20px 10px 10px;
    width:280px;
    margin:30px auto 0;
    position:relative;
}

#coc19 .articlebtn:after {
    content: "";
    border-top: 3px solid #009FDC;
    border-right: 3px solid #009FDC;
    margin-top: -3.5px;
    height: 7px;
    width: 7px;
    position: absolute;
    top: 50%;
    right:10px;
    -webkit-transform: rotate(135deg);
    transform: rotate(45deg);
}

#coc19 .articlebtn small {
    display:inline-block;
    font-size:1.2rem;
}