/*
bxslider
-------------------------------------------------- */
.bxslider li {
    line-height:0;
    /*height:480px;*/
    overflow:hidden;
}

.bxslider li img {
    width:100%;
    max-width:100%;
    height:auto;
}

.mainContents {
    background:#8fd1ce;
    position:relative;
    overflow:hidden;
}

.mainContents:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 400%;
    height: 80%;
    margin: 3% -10% 0;
    background: #ff823a;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    z-index: 0;
}

/*
common
-------------------------------------------------- */
.common .mainContents {
    background:url(../img/co_bg_02.gif) repeat left top;
}

article a {
    color:#000;
}

.articleList {
    margin-bottom:35px;
}

/*
article
---------------- */
.articleArea ul#masonryContainer li.item {
    width:33.333333%;
    box-sizing:border-box;
    padding:10px;
    display: none;
    opacity: 0;
}

.showContents {
    display:block !important;
    opacity:1 !important;
}

article {
    background:url(../img/co_bg_02.png) no-repeat right bottom;
    width:100%;
    padding-bottom:34px;
    box-sizing:border-box;
    position:relative;
}

.articleInner {
    background:#fff;
    padding:15px 20px 0;
}

article p.cat {
    text-align:center;
    line-height:0;
    margin-bottom:15px;
}

article .thumb {
    margin-bottom:20px;
    text-align:center;
}

article h2 {
    font-size:1.2rem;
    margin-bottom:15px;
}

article img {
    max-width:100%;
    height:auto;
}

article a:hover img {
    opacity:0.8;
}

@media screen and (max-width: 700px) {
    .articleArea ul#masonryContainer li.item {
        width:50%;
    }
    article h2 {
        margin-bottom:10px;
    }
}

@media screen and (max-width: 500px) {
    .articleArea ul#masonryContainer li.item {
        width:100%;
        padding:10px 0;
    }
}


/*
paging
---------------- */
.paging {
    display:block;
    padding-top:30px;
    text-align:center;
}

.paging li {
    display:inline-block;
    cursor:pointer;
}

.paging li.numBtn {
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-size:1.7rem;
    border-radius:50%;
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    background:#fff;
    margin:0 5px 5px;
    transition:0.5s;
}


.paging li.current {
    background:#ffc800;
}

.paging li.numBtn:hover {
    background:#ffc800;
}

.paging .prevBtn {
    margin-right:20px;
}

.paging .nextBtn {
    margin-left:20px;
}

.paging .prevBtn span,
.paging .nextBtn span {
    width:21px;
    height:35px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    cursor: pointer;
    position:relative;
}

.paging .prevBtn span{
    width:21px;
    height:17px;
    background:url(../img/co_arrow_01_off.png) no-repeat left center;
    background-size:cover;
    display:inline-block;
}

.paging .prevBtn.disabled span {
    width:21px;
    height:17px;
    background:url(../img/co_arrow_01_on.png) no-repeat left center;
    background-size:cover;
    cursor: auto;
}

.paging .nextBtn span {
    width:21px;
    height:17px;
    background:url(../img/co_arrow_02_off.png) no-repeat right center;
    background-size:cover;
    display:inline-block;
}

.paging .nextBtn.disabled span {
    width:21px;
    height:17px;
    background:url(../img/co_arrow_02_on.png) no-repeat left center;
    background-size:cover;
    cursor: auto;
}

/*
shareArea
---------------- */
.shareArea  {
    z-index:2;
    position:relative;
    width:100%;
    display: table;
}

.shareArea:before {
    content: '';
    position: absolute;
    top: -300px;
    left: -500px;
    width: 400%;
    height: 200%;
    margin: 3% -10% 0;
    background: url(../img/co_bg_01.gif) repeat left top;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    z-index: 2;
}

.shareArea .secContents {
    z-index:3;
    position:relative;
    display:table;
}

.shareArea .column2 {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

.shareArea h2 {
    margin-bottom:20px;
}

@media screen and (max-width: 600px) {
    .shareArea .secContents {
        display:block;
    }
    .shareArea:before {
        top:-200px;
        left:-500px;
    }
    .shareArea .column2 {
        display:block;
        width:100%;
        text-align:center;
        margin-bottom:20px;
    }
    .shareArea h2 {
        display:none;
    }
}


/*
shareBox
---------------- */
.shareBox {
    padding-left:60px;
}

@media screen and (max-width: 800px) {
    .shareBox {
        padding-left:40px;
    }
}

@media screen and (max-width: 700px) {
    .shareBox {
        padding-left:20px;
    }
}

@media screen and (max-width: 600px) {
    .shareBox {
        padding-left:0;
        margin-bottom:0;
    }
}

/*
banner
---------------- */
.banner a
{
    display: block;
    background: #fff;
}
.banner a:hover img {
    opacity:0.7;
}