@charset "UTF-8";

main { display: block; position: fixed; top: 50%; transform: translateY(-50%); left: 0; right: 0; max-width: 1440px; margin: 0 auto; max-height: calc(100vh - 240px);}

@media screen and (max-width: 1600px){
main { max-width: 1160px;}
}
@media screen and (max-width: 1240px){
main { margin: 0 30px;}
}
@media screen and (max-width: 767px){
main { transform: translateY(0); max-height: initial; top: 80px; margin: 0;}
}

/*
------------------------------------------------------------*/
.title-wrap .title { display: inline-block; width: calc(62.0689655172% - 40px); vertical-align: top;}
.title-wrap .title img { max-height: 344px; width: auto;}
.title-wrap .glitch-wrap { display: inline-block; width: 37.9310344828%; margin-left: 40px; vertical-align: top;}

@media screen and (max-width: 1600px){
.title-wrap .title img { max-height: 276px;}
}
@media screen and (max-width: 1240px){
.title-wrap .title img { max-height: auto; max-width: 90%;}
}
@media screen and (max-width: 767px){
.title-wrap { padding: 0 30px;}
}
@media screen and (max-width: 320px){
.title-wrap { margin-bottom: 30px!important;}
}

/* glitch-wrap
------------------------------------------------------------*/
@media screen and (max-width: 767px){
.title-wrap .glitch-wrap { width: 100%; margin: 0;}
}

/* category 
------------------------------------------------------------*/
.category li { display: inline-block; vertical-align: top; width: calc(20% - 32px); background: rgba(255,255,255,.8); position: relative;}
.category li::after { position: absolute; top: 20px; right: 20px; content: ''; width: 10px; height: 10px; background: url("../img/page/top/plus.svg") center center; background-size: cover;}
.category li + li { margin-left: 40px;}
/*.category.data_1 li.civi { background: rgba(255,221,51,.8);}
.category.data_2 li.web { background: rgba(51,255,221,.8);}
.category.data_3 li.artwork { background: rgba(153,51,255,.8);}
.category.data_4 li.flyer { background: rgba(85,255,51,.8);}
.category.data_5 li.original { background: rgba(255,51,51,.8);}*/
.category.data_1 li.civi,
.category.data_2 li.web,
.category.data_3 li.artwork,
.category.data_4 li.flyer,
.category.data_5 li.original { background: rgba(200,200,200,.8);}

.category li a { display: block;}

/*
------------------------------------------------------------*/
body .modaal-wrapper .modaal-inner-wrapper{ position: fixed; top: 120px; bottom: 120px; left: 30px; right: 30px; width: auto; height: auto; padding: 0;}
body .modaal-wrapper .modaal-inner-wrapper .modaal-container { max-width: 1440px; box-shadow: none; background: #efefef; border-top: #000 1px solid; height: 100%;}
body .modaal-wrapper .modaal-inner-wrapper .modaal-container .modaal-content { height: 100%; overflow-y: scroll;}
body .modaal-wrapper .modaal-inner-wrapper .modaal-close { position: absolute; top: 0; right: 0; background: #000; border-radius: 0;}

body .modaal-wrapper .modaal-content-container { padding: 0;}
body .modaal-wrapper .modaal-content-container h2 { border-left: #000 1px solid; padding: 40px 0 0 40px;}
body .modaal-wrapper .modaal-content-container h2 img { height: 91px; width: auto;}

body .modaal-wrapper .modaal-content-container .thumb-wrap { display: flex; flex-wrap: wrap;}
body .modaal-wrapper .modaal-content-container .thumb-wrap li { flex-basis: calc(20% - 16px); background: #000; margin-left: 20px; margin-bottom: 20px;}
body .modaal-wrapper .modaal-content-container .thumb-wrap li:nth-child(5n-4) { margin-left: 0;}
body .modaal-wrapper .modaal-content-container .thumb-wrap li a { display: block; transition: all .4s;}
body .modaal-wrapper .modaal-content-container .thumb-wrap li a:hover { opacity: .6;}

body .modaal-overlay { display: none;}

@media screen and (max-width: 1600px){
body .modaal-wrapper .modaal-inner-wrapper .modaal-container { max-width: 1160px;}
}
@media screen and (max-width: 767px){
body .modaal-wrapper .modaal-inner-wrapper{ top: 80px; bottom: 80px;}
body .modaal-wrapper .modaal-content-container h2 { padding: 30px 0 0 30px;}
body .modaal-wrapper .modaal-content-container .thumb-wrap li { flex-basis: calc(50% - 5px); margin-left: 0; margin-bottom: 10px;}
body .modaal-wrapper .modaal-content-container .thumb-wrap li:nth-child(even) { margin-left: 10px;}
}

/*
------------------------------------------------------------*/
.slick { margin: 0 30px; text-align: center;}
.slick .slick-list { margin-bottom: 25px;}
.slick .slick-list .slick-track >li { position: relative; padding: 0 5px;}
.slick .slick-list .slick-track >li p img { max-height: 120px; width: auto;}
.slick .slick-list .slick-track >li a { display: block; width: 110px; height: 40px; line-height: 40px; background: #141414; color: #fff; text-align: center; outline: none; text-decoration: none!important; letter-spacing: .1em; position: absolute; top: calc(50% - 15px); transform: translateY(-50%); right: 5px; border-radius: 20px; font-size: 15px;}

.slick .slick-list .slick-track >li::before { content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; background: #ccc;}
.slick .slick-list .slick-track >li p { margin-bottom: 30px;}

.slick .slick-prev { position: static; transform: none; display: inline-block; vertical-align: middle; width: auto; height: auto;}
.slick .slick-next { position: static; transform: none; display: inline-block; vertical-align: middle; width: auto; height: auto;}
.slick .slick-prev:before,
.slick .slick-next:before { content: ''; display: block; width: 54px; height: 54px; opacity: 1;}
.slick .slick-prev:before { background: url("../img/page/top/slick-prev.svg") center center no-repeat; background-size: cover;}
.slick .slick-next:before { background: url("../img/page/top/slick-next.svg") center center no-repeat; background-size: cover;}

.slick .slick-dots { position: static; display: inline-block; vertical-align: middle; width: auto; margin-left: 10px;}
.slick .slick-dots::after { content: '/ 6'; font-size: 14px; margin: 0 15px 0 3px;}
.slick .slick-dots >li { margin: 0; width: auto;}
.slick .slick-dots >li:not(.slick-active) { display: none;}
.slick .slick-dots li button { font-size: 14px; color: #333; padding: 0; width: auto;}
.slick .slick-dots li button:before { content: none;}

.slick .title::after { content: ''; width: 58px; height: 20px; position: absolute; right: 5px; top: calc(50% - 15px); transform: translateY(-50%); background: url("../img/page/top/swipe.gif") center center no-repeat; background-size: contain;}

@media screen and (max-width: 320px){
.slick .slick-list .slick-track >li p img { max-height: 100px;}
.slick .slick-list .slick-track >li p { margin-bottom: 20px;}
.slick .slick-prev:before,
.slick .slick-next:before { width: 50px; height: 50px;}
}