/******************************
Creator: ZEROIS
Version: Vz-0.1.0
Production Date: 2020.09.01
******************************/
/*** zidoc Doccomment reset style : S ***/
.zidoc {font-size:12px;}
.zidoc h1, .zidoc h2, .zidoc h3, .zidoc h4, .zidoc h5, .zidoc h6 {margin:0;}
/*** zidoc Doccomment reset style : E ***/
/*** Basic Doccomment style : S ***/
.zidoc.basic {line-height:auto;}
.zidoc.basic [class*="area"] {font-size:14px;}
.zidoc.basic [class*="area"] p:last-child {margin-bottom:auto;}
.zidoc.basic .docS {font-size:135%; color:#333333; margin-bottom:50px;}
.zidoc.basic p {margin-bottom:15px; font-size:130%; line-height:150%; color:#666666; text-indent:10px; word-break:keep-all;}
.zidoc.basic .title {}
.zidoc.basic .title h1 {font-size:250%;}
.zidoc.basic .stitle {border-left:#dfdfdf solid 3px; padding-left:20px;}
.zidoc.basic .stitle>* {margin-bottom:10px;}
.zidoc.basic .stitle>*:last-child {margin-bottom:auto;}
/*** Basic style : E ***/
/* doccomment style */
.zi-title-s1 {text-align:center; padding:20px 0;}
.zi-title-s1 .title {color:#4292bd; font-size:40px; margin:10px 0; text-transform:capitalize;}
.zi-title-s2 {text-align:center;}
/* .zi-title-s1 .title.ttgd {position:relative; display:inline-block; padding:0 30px; color:#fff; z-index:99; background-color:transparent; border-radius:100px;
    background:-webkit-linear-gradient(to left, #4a5561, #4292bd); /* Safari 5.1 to 6.0 */
    background:-o-linear-gradient(to left, #4a5561, #4292bd); /* For Opera 11.6 to 12.0 */
    background:-moz-linear-gradient(to left, #4a5561, #4292bd); /* For Firefox 3.6 to 15 */
    background:linear-gradient(to left, #4a5561, #4292bd); /* Standard syntax (must be last) */
    background:-ms-linear-gradient(left, #4a5561 0%, #4292bd 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a5561', endColorstr='#4292bd',GradientType=1);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
} */
.zi-title-s1 .info {margin-bottom:10px; color:#777; opacity:.7;}

.zi-list-s1 {display:flex; flex-wrap:wrap;}
.zi-list-s1 .iconBox [class^="ic-"] {display:inline-block; font-size:11px; color:#fff; padding:2px 5px; border-radius:3px;}
.zi-list-s1 .iconBox .ic-1 {background-color:#333;}
.zi-list-s1 .iconBox .ic-2 {background-color:#601b1b;}
.zi-list-s1 .iconBox .ic-3 {background-color:#603a1b;}
[class*="zi-type"] {align-content:center;}
[class*="zi-type"] [class^="data"] {margin:0.5%; background-color:#fff;}
[class*="zi-type"] [class^="data"]:hover {animation-name:zi-ani4; animation-duration:1s; box-shadow:0 0 2px 5px #95b1bf; z-index:1;}
[class*="zi-type"] [class^="data"]:hover .title {animation-name:zi-ani1; animation-duration:1s; animation-iteration-count:infinite; animation-direction:alternate-reverse;}
[class*="zi-type"] [class^="data"] .iconBox {display:flex; padding:3px 0;}
[class*="zi-type"] [class^="data"] .iconBox .ic-3 {animation-name:zi-ani6; animation-duration:.7s; animation-iteration-count:infinite; animation-direction:alternate-reverse;}
.zi-type0 [class^="data"] {width:99%;}
.zi-type1 [class^="data"] {width:19%;}
.zi-type2 [class^="data"] {width:24%;}
[class*="zi-dds"] [class^="data"] {position:relative;}
[class*="zi-dds"] [class*="title"] {margin:10px 0; line-height:130%; word-break:keep-all; color:#4c4f57;}
[class*="zi-dds"] .title-cut {width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
[class*="zi-dds"] .cnt {padding:10px;}
[class*="zi-dds"] .cat {color:#909090;}
[class*="zi-dds"] .box .tag {display:flex; color:#9da5ab;}
[class*="zi-dds"] .box .tag {flex-wrap:wrap;}
[class*="zi-dds"] .box .tag>li {margin-right:5px;}
[class*="zi-dds"] .box .tag>li::before {content:"#";}
[class*="zi-dds"] .box.img {position:relative;}
[class*="zi-dds"] .box.img .pic, [class*="zi-dds"] .box.img .pic img, .zi-dds1 .box.img .cat {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); overflow:hidden;}
[class*="zi-dds"] .box.img .pic img {width:100%;}
[class*="zi-dds"] .box.head {padding:10px;}
[class*="zi-dds"] .box.cnt {width:100%;}
[class*="zi-dds"] .box.cnt p {color:#7d7d7d; overflow:hidden;}
.zi-dds1 .box.img {padding-bottom:150px;}
.zi-dds1 .box.img .pic:hover {animation-name:zi-ani2; animation-duration:1s; background-color:#885acf; z-index:1;}
.zi-dds1 .box.img .pic {width:100%; height:100%; background-color:#333;}
.zi-dds2 [class^="data"] {display:flex;}
.zi-dds2 [class^="data"]:hover .pic img {animation-name:zi-ani5; animation-duration:1s;}
.zi-dds2 [class^="data"] .box.cnt {width:100%;}
.zi-dds2 .data-img .box.img {width:30%;}
.zi-dds2 .data-img .box.img .pic {width:100%; height:100%; background-color:#333; overflow:hidden;}
.zi-dds2 .data-img .box.img .pic img {width:auto; height:100%;}
.zi-dds2 .data-img .box.cnt {width:70%;}
.zi-dds3 .data {height:30vh; position:relative; overflow:hidden;}
.zi-dds3 .data:hover .box.img {animation-name:zi-ani3; animation-duration:1s; width:130%; height:130%; left:50%; top:0; transform:translate(-50%, 0);}
.zi-dds3 .data:hover .box.cnt {background-color:transparent;}
.zi-dds3 .data:hover .box.cnt .title, .zi-dds3 .data:hover .box.cnt .title-cut {font-size:20px; color:#fff; text-shadow:1px 1px 2px #333; white-space:normal;}
.zi-dds3 .data:hover .box.cnt .tag {display:none;}
.zi-dds3 .box.img {height:100%;}
.zi-dds3 .box.img .pic {width:100%; height:100%;}
.zi-dds3 .box.img .pic img {left:50%; top:0; transform:translate(-50%,0%);}
.zi-dds3 .box.cnt {position:absolute; bottom:0; z-index:1; background-color:#fff;}
.zi-dds4 [class*="data"] {max-height:200px; overflow:hidden;}
.zi-dds4 [class*="data"]:hover .head .more a {color:#ffcc00; animation-name:zi-ani7; animation-duration:.7s; animation-iteration-count:infinite; animation-direction:alternate-reverse;}
.zi-dds4 [class*="data"] .cnt {background-color:rgba(255,255,255,.9); height:100%;}
.zi-dds4 [class*="data"].notice .cnt {background-color:rgba(255, 212, 212, 0.9); height:100%;}
.zi-dds4 .box.head {background:linear-gradient(#fff, rgba(255,255,255,.9)); padding-bottom:0; position:relative;}
.zi-dds4 .box.head .more {position:absolute; right:0; top:0; font-size:130%; color:#cdcdcd; width:100%; height:100%;}
.zi-dds4 .box.head .more a {display:inline-block; padding:10px; position:absolute; left:75%; top:50%; transform:translateY(-50%); opacity:0;}
.zi-dds4 .data-img {background-position:center; background-repeat:no-repeat; background-size:cover;}
.zi-dds5 [class*="data"] {display:flex; align-items:center; padding:5px; border-radius:100px; overflow:hidden;}
.zi-dds5 [class*="data"] .title {margin:auto; white-space:nowrap; text-overflow:ellipsis;}

.zi-rank [class*="data"] .box.img {background:linear-gradient(-45deg, #23a6d5, #23d5ab); background-size: 400% 400%; animation: zi-ani8 15s ease infinite; padding-bottom:100px;}
.zi-rank [class*="data"] [class*="number"] {position:absolute; left:10px; top:0; width:40px; height:40px; text-align:center; padding:10px; font-size:18px; background-color:#7e6f6f; border-radius:0 0 10px 0; color:#fff; z-index:1;}
.zi-rank [class*="data"] .number1 {background-color:#ffd700;}
.zi-rank [class*="data"] .number2, .zi-rank [class*="data"] .number3 {background-color:#68808b;}
.zi-dds1 .box.img .cat {display:inline-block; background-color:#fff; padding:5px 10px; border-radius:10px 0 10px 0; color:#374a4d; white-space:nowrap; overflow:visible; z-index:1; box-shadow:#374a4d 1px 1px 0;}
.zi-dds1 .box.img .cat::after {content:attr(zi-number); width:20px; height:20px; padding:5px; border-radius:10px 0 10px 0; font-size:120%; background:linear-gradient(220deg, #115ca7, #fff 40%, #fff); position:absolute; top:-20px; right:-28px; text-align:center; box-shadow:#374a4d 1px 1px 0;}

.zi-bgbox-s1 {background-color:#4c79ac; padding:30px 0;}
.zi-bgbox-s1 .zi-title-s1 .title {color:#fff; text-shadow:rgba(0, 0, 0, 0.5) 1px 1px;}
.zi-bgbox-s1 .info {color:#bbcede;}

.zi-slide-s1 .data {display:flex;}

.zi-title-ani1:hover {animation-name:zi-ani1; animation-duration:1s; animation-iteration-count:infinite; animation-direction:alternate-reverse;}

.zidoc.zds1 p, .zidoc.zds1 .titleBox .info {background-color:#fff; padding:10px;}
.zidoc.zds1 .titleBox {background-color:rgba(255,255,255,.7); padding:10px;}
.zidoc.zds1 .titleBox .title {}
.zidoc.zds1 .titleBox .info {border-left:#dfdfdf solid 5px; padding:5px 10px;}

/*** Common style : S ***/
.zidoc .tc-1 {color:#742222;}
.zidoc .tc-2 {color:#224574;}
.zidoc .tc-3 {color:#a6802c;}
.zidoc .tc-4 {color:#387749;}
.zidoc .ta-l {text-align:left;}
.zidoc .ta-c {text-align:center;}
.zidoc .ta-r {text-align:right;}
.zidoc .td-u {text-decoration:underline;}
.zidoc .mg-b50 {margin-bottom:50px;}
.zidoc .mg-b100 {margin-bottom:100px;}
.zidoc .pd-30 {padding:30px;}
.zidoc .paper-s1 {background-color:#ffffff;}
/*** Common style : E ***/

/* animation style */
@keyframes zi-ani1 {
  from {color:#b51c12;}
  to {color:#4b75d4;}
}
@keyframes zi-ani2 {
  0% {width:100%; height:100%;}
  50% {width:120%; height:120%;}
  100% {width:100%; height:100%;}
}
@keyframes zi-ani3 {
  from {width:100%; height:100%;}
  to {width:130%; height:130%; font-size:20px;}
}
@keyframes zi-ani4 {
  from {box-shadow:0 0 2px 5px rgba(149, 177, 191, 0);}
  to {box-shadow:0 0 2px 5px #95b1bf;}
}
@keyframes zi-ani5 {
    0 {height:100%;}
    50% {height:130%;}
    100% {height:100%;}
}
@keyframes zi-ani6 {
  from {background-color:#98851a;}
  to {background-color:#ff7300;}
}
@keyframes zi-ani7 {
  from {left:75%; opacity:.5;}
  to {left:80%; opacity:1;}
}
@keyframes zi-ani8 {
	0% {background-position:0% 50%;}
	50% {background-position:100% 50%;}
	100% {background-position:0% 50%;}
}


/* @media style */
@media screen and (max-width:1200px) {
    .zi-list-s1 {padding:0 10px;}
}
@media screen and (max-width:1024px) {
    .zi-type1 [class^="data"] {width:24%;}
    .zi-type2 [class^="data"] {width:32.333333%;}
}
@media screen and (max-width:892px) {
    .zi-type1 [class^="data"] {width:32.333333%;}
    .zi-type2 [class^="data"] {width:49%;}
}
@media screen and (max-width:768px) {

}
@media screen and (max-width:426px) {
    .zi-type1 [class^="data"] {width:49%;}
    .zi-type2 [class^="data"] {width:100%;}
}
@media screen and (max-width:326px) {
    .zi-type1 [class^="data"] {width:100%;}
}