@charset "utf-8";

/* l-container */

.l-container {padding:40px 0 10px 0;}
.l-container a {text-decoration:none;}

/* c-search */

.c-search {
    position:relative;
    border-top:1px solid #e0e0e0;
    border-bottom:1px solid #f0f0f0;
    padding-bottom:1px;
}
.c-search:after {display:block; content:''; position:absolute; left:0; bottom:0; width:100%; height:0; border-bottom:1px solid #e0e0e0;}
.c-search ul {padding:10px; display:block; position:relative; height:30px; white-space:nowrap; overflow-x:auto;}
.c-search ul ::-webkit-scrollbar {display:none;}
.c-search li {height:28px; display:inline-block; vertical-align:top; padding:0 10px; border:1px solid #e0e0e0; background-color:#fff;}
.c-search li {line-height:28px; font-size:13px; color:#333;}
.c-search li:nth-child(n+2) {margin-left:10px;}
.c-search li.active {background-color:#333; border-color:#333; color:#fff;}
.c-search li.ty-enable {cursor:pointer;}
.c-search li.ty-disabled {background-color:#f0f0f0; color:#999;}

/* c-header */

.c-header {padding:0 0 10px 0;}
.c-header .title {padding:0 0 25px 0; margin:-5px 0 -3px 0; text-align:center;}
.c-header .title {font-weight:bold; line-height:1.4; font-size:18px; color:#000;}

/* c-container */

.c-container {padding:0 7px 0 7px;}
.c-container .group {position:relative; padding:15px 0 8px 0; border-bottom:1px solid #efefef;}
.c-container .subj {margin:0 7px; padding-bottom:8px;}
.c-container .subj span {padding:0 15px; min-width:30px; height:30px; display:inline-block; background-color:#333; text-align:center;}
.c-container .subj span {font-weight:bold; line-height:30px; font-size:13px; color:#fff;}

.c-container .items ul {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -ms-flex-align:center;
    flex-wrap:wrap;
    align-items:stretch;
}
.c-container .items li {padding:7px 0; display:inline-block; vertical-align:top;}
.c-container .inner {position:relative; margin:0 7px; padding:10px 0; border:1px solid #e0e0e0;}
.c-container .inner a {z-index:10; display:block; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background:transparent; opacity:0;}
.c-container .logo {margin:0 10px; position:relative; width:calc(100% - 20px);}
.c-container .logo > img {display:block; width:100%; height:100%;}
.c-container .logo > div {display:block; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%;}
.c-container .logo > div > img {transition:all .5s ease; margin:auto; position:absolute; left:0; right:0; top:0; bottom:0; width:auto; height:auto; max-width:100%; max-height:100%; border:0; opacity:1;}
.c-container .logo .ty-no {background-color:#ececec;}
.c-container .logo .ty-no svg {display:inline-block; margin:auto; position:absolute; left:0; right:0; top:0; bottom:0; width:30px; height:30px; fill:#000; opacity:0.1;}
.c-container .title {text-align:center; word-wrap:break-word; word-break:break-all;}
.c-container .title {font-weight:bold; line-height:1.4; font-size:12px; color:#000;}

.c-container.ty-list .title {margin:0 5px;}
.c-container.ty-logo .title {margin:10px 5px 0 5px;}

/* c-footer */

.c-footer {padding-top:25px;}

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

.c-container .items li {width:33.333%;}

}

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

.c-container .items li {width:25%;}

}

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

.c-container .items li {width:20%;}

}

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

.c-container .items li {width:16.666%;}

}

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

.c-container .items li {width:14.285%;}

}

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

.c-container .items li {width:12.5%;}

}

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

.c-container .items li {width:11.111%;}

}

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

.c-container .items li {width:10%;}

}

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

.c-container .items li {width:10%;}

}

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

.c-container .items li {width:9.09%;}

}

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

.c-container .items li {width:8.333%;}

}

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

.c-container .items li {width:7.692%;}

}

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

.c-container .items li {width:7.142%;}

}