@charset "utf-8";

.noonoo-info{
    & .site-info {
        display:block;
        justify-content: center;
        align-items: center;
        width:100%;
        height:200px;
        & .logo {
            display:flex;
            justify-content: center;
        }
        & .site-link {
            margin-top:25px;
            & .link-row {
                position: relative;
                margin-top:5px;
                display:flex;
                justify-content: center;
                & a {
                    display:block;
                    width:185px;
                    height:30px;
                    text-align:center;
                    box-sizing: border-box;
                    cursor: pointer;
                    height: 100%;
                    min-height: 10px;
                    touch-action: manipulation;
                    transition: all 0.2s ease, visibility 0s;
                    border-radius: 50px;
                    background: #103F54;
                    border: 1px solid #207EA9;
                    padding:5px 0;
                    color:#fff;
                    font-weight:700;
                }
                &:first-child {
                    & a {
                        background: #103F54;
                        /*background:#4A1B0B;*/

                    }
                }
            }
            & .link-img {
                position: relative;
                margin-top:5px;
                display:flex;
                justify-content: center;
                & a {
                    display:block;
                    width:185px;
                    height:30px;
                    text-align:center;
                    box-sizing: border-box;
                    cursor: pointer;
                    height: 100%;
                    min-height: 10px;
                    touch-action: manipulation;
                    transition: all 0.2s ease, visibility 0s;
                    & img {
                        max-width:100%;
                    }
                }
            }
            & .link-toonkor {
                position: relative;
                margin-top:3px;
                display:flex;
                justify-content: center;
                & a {
                    display:block;
                    width:185px;
                    height:30px;
                    text-align:center;
                    box-sizing: border-box;
                    cursor: pointer;
                    height: 100%;
                    min-height: 10px;
                    touch-action: manipulation;
                    transition: all 0.2s ease, visibility 0s;
                    border-radius: 50px;
                    background: #333;
                    border: 1px solid #525252;
                    padding:5px 0;
                    color:#fff;
                    font-weight:700;
                }
            }
        }
    }

    & .site-banner {
        display:grid;
        gap:5px;
        grid-template-columns: repeat(4, 1fr);
        & .banner {
            background:#222;
            width:100%;
            height:100%;
            & a {
                width:100%;
                height:100%;
                display:block;
                position:relative;
                & .blank {
                    position:absolute;
                    top:0;
                    left:0;
                    right:0;
                    bottom:0;
                    background:#222;
                    border:1px solid #333;
                    width:100%;
                    height:100%;
                    z-index:1;
                    &:after {
                        content: ' ';
                    }
                    
                }
                & img {
                    z-index:10;
                    max-width:100%;
                }
            }
        }
    }
}

.noonoo-info .site-info .site-link .link-jancolink{
  position: relative;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.noonoo-info .site-info .site-link .link-jancolink a {
  display: block;
  width: 185px;
  height: 30px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  height: 100%;
  min-height: 10px;
  touch-action: manipulation;
  transition: all 0.2s ease, visibility 0s;
  border-radius: 50px;
  background: #990000;
  border: 1px solid #bb0000;
  padding: 5px 0;
  color: #fff;
  font-weight: 700;
  font-style:normal;
}



& .paging {
    display:flex;
    justify-content: center;
    padding:25px 0;
}


// Color variables (appears count calculates by raw css)
@color0: #181818; // Appears 4 times

// Width variables (appears count calculates by raw css)
@width0: 100%; // Appears 13 times

// Height variables (appears count calculates by raw css)
@height0: 100%; // Appears 6 times

.banner-box {
    width: 1248px;
    margin: 0 auto;
    padding:15px 0;
}

.site-banner-long {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 20px;
    margin-left: 5px;
    .banner {
        background: @color0;
        height: @height0;
        width: @width0;
        a {
            display: block;
            height: @height0;
            position: relative;
            width: @width0;
            .blank {
                background: @color0;
                border: 1px solid #333333;
                bottom: 0;
                height: @height0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                width: @width0;
                z-index: 1;
                &:after {
                    content: ' ';
                }
            }
            img {
                max-width: @width0;
                z-index: 10;
            }
        }
    }
}
.site-banner-4 {
    display: grid;
    grid-gap:5px;
    grid-template-columns: repeat(2, 1fr);
    overflow:hidden;
    .banner {
        background: @color0;
        display: block;
        height: auto;
        a {
            display: block;
            height: @height0;
            position: relative;
            width: @width0;
            img {
                max-width: @width0;
                z-index: 10;
            }
        }
    }
}
.site-banner-4>li {
    height: auto;
    overflow:hidden;
    width: @width0;
}
.site-banner-4>li.middle {
    display:flex;
    width: @width0;
    .banner {
        width:@width0;
    }
}
.site-banner-4>li.short {
    display:flex;
    gap:5px;
    width: @width0;
    .banner {
        width:50%;
    }
}
.site-banner-2 {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 5px;
    .banner {
        background: @color0;
        height: @height0;
        width: @width0;
        a {
            display: block;
            height: @height0;
            position: relative;
            width: @width0;
            img {
                max-width: @width0;
                z-index: 10;
            }
        }
    }
}

.pg_wrap {display:flex; align-items:center; justify-content:center; margin:20px 0 20px 0;text-align:center;}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg {
    display:flex;
    align-items: center;
    & .iconify {
        font-size:26px;
    }
}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;color:#999;text-align:center;background:#333;border:none;border-radius:50px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.pg a:focus, .pg a:hover {color:#fff;background:#1348d5;}
.pg_page {min-width:36px;height:36px;margin:0 5px;color:#999;line-height:36px;padding:0 8px;text-decoration:none;  display:flex; justify-content:center;align-items: center;}
.pg_page i {color:#333;font-size:16px;}
.pg_start,
.pg_prev,
.pg_end,
.pg_next {min-width:20px;padding:0;background:none!important;color:#999!important}
.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover {color:#fff!important;}

.pg_current {display:inline-block;min-width:36px;height:36px;margin:0 3px;padding:0 12px;color:#fff;line-height:36px;background:#1348d5;border:none;}


.seo {
    font-size:10px;
    margin-top:5px;
    & h2 {
        color:#222!important;
        margin-top:5px;
    }
    & p {
        line-height:25px;
        color:#222!important;
    }
}