@import url("kis_font.css");

:root {
    /*color*/
    --mainp: #209CEE;
    --mainb: #333333;
    --b10: rgba(0, 0, 0, 0.1);
    --b20: rgba(0, 0, 0, 0.2);
    --b50: rgba(0, 0, 0, 0.5);

    /*font-size*/
    --titles : 28px;
    --subs : 20px;
    --basics :13px;
    --scripts : 11px;
}

body {width: 100%; height:auto; font-family: 'D2Coding'; font-size: var(--basics); color: var(--mainb); font-weight: 200; line-height: 1.8; padding: 0; margin: 0; box-sizing: border-box;}

ul, li, p {padding:0; margin:0;}
li {list-style : none;}
a {text-decoration: none; color: var(--mainb);}

.wrap {display: inline-block; width: 100%; height: auto;}
.inner {width: 100%; max-width: 1280px; padding: 0 35px; margin: auto; box-sizing: border-box;}

header.kis {display: inline-block; position: fixed; left: 0; top: 0; width: 100%; padding: 25px; box-sizing: border-box; z-index: 100;}
header.kis .link {display: inline-block; position: fixed; top: 25px; left: 25px; overflow: hidden; z-index: 100;}
header.kis .link li {float: left; margin-right: 10px;}
header.kis .link li a {display: inline-block; width: auto; cursor: pointer;}
header.kis .link li a:hover {opacity: 0.8;}
header.kis .menu {display: inline-block; position: absolute; left: 0; top: calc((100vh - 25px) / 2); width: 100%;}
header.kis .menu li {display: inline-block; position: absolute; top: 50%; width: 110px; cursor: pointer;}
header.kis .menu li:hover {opacity: 0.8;}
header.kis .menu .gal {left: 0; margin: 0 0 0 25px; padding: 0 0 0 20px; background-image: url(../img/menu_left.svg); background-position: left center; background-repeat: no-repeat; background-size: 11px; text-align: left;}
header.kis .menu .txt {right: 0; margin: 0 25px 0 0; padding: 0 20px 0 0; text-align: right; background-image: url(../img/menu_right.svg); background-position: right center; background-repeat: no-repeat; background-size: 11px;}
header.kis .menu .gal.on, header .menu .gal:hover {background-image: url(../img/menu_left_long.svg);}
header.kis .menu .txt.on, header .menu .txt:hover {background-image: url(../img/menu_right_long.svg);}

.area {display: block; width: 100%; height: 100vh; background: url(../img/dot.svg) repeat-y center top; animation-name: area; animation-duration: 2s;}
.area .title {display: inline-block; width: 100%; height: 100%; background: url(../img/logo.svg) no-repeat center center;}

@-webkit-keyframes area {
    0% {
    height:200vh;
    }
    100% {
    height:100vh;
    }
}

.list_wrap {display: block; width: 100%; height: auto; padding: 400px 0 0 0; background: url(../img/dot.svg) repeat-y center top;}
.list {display: block; width: 200px; height: auto; margin: 0 auto 200px auto;}
.list li {width: 200px; height: 200px; margin-bottom: 200px; border: 1px solid var(--mainb); border-radius: 100px; overflow: hidden;}
.list li img {width: 100%;}
.list li:last-child {margin-bottom: 0;}
.list li:hover {opacity: 0.8;}

.comment {display: block; width: 100%; height: auto; padding: 100px 0 100px 0; background: url(../img/dot.svg) repeat-y center top;}
.comment ul {text-align: center; font-size: var(--scripts);}
.comment ul li span {display: inline-block; margin: 5px; padding: 2px 10px; border: 1px solid var(--mainb); border-radius: 50px; background: #fff;}


/*footer*/
footer {display: block; width: 100%;}
footer .con {width: 100%; padding: 15px 25px 12px 25px; color: #ffffff; font-size: var(--scripts); background: var(--mainb); box-sizing: border-box; overflow: hidden;}
footer .con li:first-child {float: left;}
footer .con li:last-child {float: right;}
footer .copyright {width: 100%; padding: 12px 25px; color: #ffffff; font-size: var(--scripts); text-align: center; background: #000000; box-sizing: border-box;}


/*scroll*/
::-webkit-scrollbar {width:5px;} 
::-webkit-scrollbar-thumb {background-color:#ddd; border-radius:10px;}
::-webkit-scrollbar-track {background-color:#fafafa; border-radius:5px; box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1);}


/*media*/
@media screen and (max-width:700px) {
    header.kis .menu {top: 0;}
    header.kis .menu li {width: 95px;}
    header.kis .menu .gal {top: 85px;}
    header.kis .menu .txt {left: 0; right: auto; top: 110px; margin: 0 0 0 25px; padding: 0 0 0 20px; background-image: url(../img/menu_left.svg); background-position: left center; text-align: left;}
    header.kis .menu .txt.on, header .menu .txt:hover {background-image: url(../img/menu_left_long.svg);}
}