:root{
  --color-main:#1a70da;
  --color-main-light:#3686e8;
  --color-main-dark:#1268d2;
  --color2:#8ebb34;
  --padding-about:16px;
  --padding-home-box:clamp(25px,5vw,80px);
  --padding-page-box:clamp(25px,3.5vw,40px);
  --padding-more:min(12px,2vw) min(40px,4vw);
  --padding-around:clamp(18px,3vw,30px);
  --padding-around-long:clamp(25px,3.5vw,45px);
  --padding-around-short:clamp(12px,2vw,20px);
  --margin-default:clamp(16px,2.5vw,30px);
  --margin-long:clamp(25px,3.5vw,45px);
  --margin-short:20px;
  --font-size-title:clamp(22px,3.5vw,35px);
  --font-size-page-title:clamp(20px,3.3vw,32px);
  --font-size-box-title:clamp(17px,2vw,23px);
  --font-size-list-title:clamp(16px,2vw,18px);
  --font-size-desc:min(16px,3vw);
  --font-size-detail-title:clamp(20px,2.5vw,28px);
  --font-size-detail-desc:clamp(15px,1.5vw,17px);
  --font-size-nav:clamp(14px,2vw,26px);
  --gallery-size:125px;
  --gallery-padding:50px;
}
@font-face {
  font-family:'cmbx10';
  src:url('../fonts/cmbx10.woff2') format('woff2'),
  url('../fonts/cmbx10.woff') format('woff'),
  url('../fonts/cmbx10.ttf') format('truetype');
}
.main{position:relative;display:grid;grid-template-columns:11vw 88vw;justify-content:space-between}
.main:after{content:'';position:absolute;top:0;right:0;width:100%;height:28%;z-index:-1}
.main.about:after{background-image:linear-gradient(to bottom, #9ec3ff, rgba(255,255,255,.8))}
.main.gallery:after{background-image:linear-gradient(to bottom, #bcffb3, rgba(255,255,255,.8))}
.main.find:after{background-image:linear-gradient(to bottom, #ffc5dd, rgba(255,255,255,.8))}
.main.create:after{background-image:linear-gradient(to bottom, #fffdc6, rgba(255,255,255,.8))}
.sidebar{display:flex}
.side img{height:100vh;display:block}
.nav{height:100vh;padding:5vh 12px 0 15px}
.nav-item{height:20vh;display:flex;position:relative}
.nav-item small{font-size:var(--font-size-nav)}
.nav-item span{font-size:var(--font-size-nav);margin:20px 0 0 36px}
.nav-item a{position:absolute;inset:0;z-index:1}
.nav-item.active{font-weight:600}
.nav-item.active span{font-family:'cmbx10'}
.about-page{padding:5% 9%;display:flex;flex-direction:column;justify-content:space-between}
.about-page img{width:100%}
.page-main{padding:2% 3% 15px 2%}
.page-title{}
.page-title img{height:4vh}
.page-gallery{position:relative}
.video-box{position:absolute;z-index:2}
.video-box video,
.video-box img{width:100%;display:block}
.video-box a{position:absolute;inset:0;z-index:1}
/*.gallery1{top:22%;left:12%;width:15%}*/
/*.gallery2{top:0;left:47%;width:13%}*/
/*.gallery3{top:45%;left:7%;width:26%}*/
/*.gallery4{top:37%;left:53%;width:20%;z-index:3}*/
/*.gallery5{top:73%;left:5%;width:10%}*/
/*.gallery6{bottom:0;left:44%;width:10%}*/
/*.gallery7{top:68%;left:70%;width:13%}*/
.gallery1{top:18%;left:12%;width:18%}
.gallery2{top:0;left:50%;width:13%}
.gallery3{top:42%;left:7%;width:28%}
.gallery4{top:37%;left:57%;width:20%;z-index:3}
.gallery5{top:73%;left:5%;width:12%}
.gallery6{bottom:5%;left:44%;width:10%}
.gallery7{top:68%;left:74%;width:13%}
.page-find{}
.find-content{margin-top:4%;height:80vh;overflow:auto}
.find-content::-webkit-scrollbar{width:0}
.find-content::-webkit-scrollbar-thumb:vertical{background-color:#eee}
.find-list{}
.find-list li{padding:9px 30px 30px 5px;display:flex;justify-content:space-between;border-top:solid 2px #333}
.find-list a{font-size:22px;transition:color .3s}
.find-list a:hover{color:#ff408c}
.find-list strong{font-size:22px}
.page-create{}
.create-container{margin-top:3%;height:84vh;overflow:auto}
.create-container::-webkit-scrollbar{width:0}
.create-container::-webkit-scrollbar-thumb:vertical{background-color:#eee}
.create-content{display:grid;grid-template-columns:55% 45%;justify-content:space-between}
.create-work{padding-right:4%;border-right:solid 3px #333}
.create-form{padding:0 7% 0 10%}
.create-title{;display:flex;justify-content:center;margin-bottom:30px}
.create-title span{border-radius:18px;border:solid 2px #222;text-align:center;font-size:min(30px,1.8vw);padding:15px 40px;transition:.3s;cursor:pointer}
.create-title__work{background:#fff;color:#222}
.create-title__work:hover{background:#222;color:#fff}
.create-title__form{background:#222;color:#fff}
.create-title__form:hover{background:#fff;color:#222}
.create-list{display:grid;grid-template-columns:55% 42%;justify-content:space-between}
.create-list li{margin-bottom:20px}
.create-list img{width:100%;transition:transform .5s}
.create-list img:hover{transform:scale(0.95)}
.form-title{margin:40px 0 30px;text-align:center;font-size:min(25px,1.6vw);font-weight:600}
.form-group{;margin-top:25px;position:relative}
.form-item{border-radius:15px;border:solid 2px #222;width:100%;padding:20px}
.form-input{height:76px;font-size:18px}
.form-textarea{height:150px;font-size:18px}
.form-textarea__tips{position:absolute;top:25px;right:25px;bottom:25px;left:25px;z-index:1}
.form-textarea__tips p{color:#999;font-size:17px;margin-bottom:9px}
.form-textarea__tips p:first-child{color:#777;font-size:18px}
.form-file-box{padding:20px}
.form-file-box_title{font-size:22px;color:#555}
.form-file-box_text{margin:9px 0;color:#999;font-size:17px;line-height:1.8}
.form-file-box_file{display:flex;align-items:center}
.form-file-box_file span{background:#222;color:#fff;padding:9px 20px;border-radius:9px}
.form-file-box_file small{margin-left:9px;font-size:16px}
.form-selected{font-size:20px;line-height:1.8;margin:40px 0;font-weight:600}
.form-submit{text-align:center}
.form-submit button{font-size:18px;background:#222;color:#fff;padding:9px 20px;border-radius:9px}
.gallery-main{margin:40px;height:calc(100vh - 80px);border:solid 2px #222;display:grid;grid-template-columns:var(--gallery-size) calc(100% - var(--gallery-size));position:relative;overflow:hidden}
.gallery-main_left{border-right:solid 2px #222;height:100%}
.gallery-main__close{width:var(--gallery-size);aspect-ratio:1/1;border-bottom:solid 2px #222;display:flex;align-items:center;justify-content:center;position:relative}
.gallery-main_bottom{border-top:solid 2px #222;position:absolute;right:0;bottom:0;width:100%;background:#fff;height:var(--gallery-size);display:flex;justify-content:space-between}
.gallery-main__prev,
.gallery-main__next{width:var(--gallery-size);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.gallery-main__prev{border-right:solid 2px #222}
.gallery-main__next{border-left:solid 2px #222}
.gallery-main__prev img,
.gallery-main__next img,
.gallery-main__close img{max-width:80%}
.gallery-main__close a,
.gallery-main__prev a,
.gallery-main__next a {position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}
.gallery-detail{position:relative}
.gallery-detail_txt1 p{font-size:20px;margin-bottom:23px}
.gallery-detail_txt2 p{font-size:16px;margin-bottom:12px}
.gd1{display:grid;grid-template-columns:48% 48%;justify-content:space-between}
.gd1-left{}
.gd1-right{}
.gd1-1{padding:var(--gallery-padding)}
.gd1-2{position:absolute;bottom:var(--gallery-size);left:0;width:27%}
.gd1-2 img{display:block;width:100%}
.gd1-3{}
.gd1-3 img{width:100%}
.gd1-4{width:66%;position:absolute;right:0;bottom:var(--gallery-size);padding:0 40px 40px 0}
.gd1-4_more{text-align:right;margin-top:20px}
.gd1-4_more img{}
.gd2{display:grid;grid-template-columns:38% 52%;justify-content:space-between;padding-bottom:var(--gallery-size)}
.gd2-left{display:flex;flex-direction:column;justify-content:space-between}
.gd2-right{display:flex;flex-direction:column;justify-content:space-between}
.gd2-1{padding:var(--gallery-padding) 0 0 var(--gallery-padding);text-align:justify}
.gd2-2{}
.gd2-2 img{width:100%;display:block}
.gd2-3{}
.gd2-3 img{width:100%;display:block}
.gd2-4{padding:5px var(--gallery-padding) var(--gallery-padding) 0}
.gd3{display:grid;grid-template-columns:49% 49%;justify-content:space-between;padding-bottom:var(--gallery-size)}
.gd3-left{display:flex;flex-direction:column;justify-content:space-between}
.gd3-right{height:100%}
.gd3-1{padding:var(--gallery-padding)}
.gd3-2{display:flex;justify-content:space-between}
.gd3-2__img{flex-basis:48%}
.gd3-2__img img{width:100%;display:block}
.gd3-2__desc{flex-basis:48%;position:relative}
.gd3-2__desc .gd1-4_more{position:absolute;right:0;bottom:80px}
.gd3-2__desc h3{font-size:18px;margin-bottom:15px}
.gd3-2__desc p{font-size:16px;line-height:1.7}
.gd3-3{height:100%}
.gd3-3 img{width:100%;height:100%;display:block}
.find-main{margin:40px;height:calc(100vh - 80px);border:solid 2px #222;display:grid;grid-template-columns:var(--gallery-size) calc(100% - var(--gallery-size));position:relative;overflow:hidden}
.find-main_left{border-right:solid 2px #222;height:100%}
.find-main_right{height:100%}
.find-main__close{width:var(--gallery-size);aspect-ratio:1/1;border-bottom:solid 2px #222;display:flex;align-items:center;justify-content:center;position:relative}
.find-main__close img{max-width:80%}
.find-main__close a {position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}
.find-main__title{height:var(--gallery-size);border-bottom:solid 2px #222;display:flex;align-items:center;padding-left:30px}
.find-main__title img{max-height:40%}
.find-main__content{height:calc(95vh - var(--gallery-size));overflow:auto;display:grid;grid-template-columns:29% 20% 25% 20%;justify-content:space-between}
.find-main__content::-webkit-scrollbar{width:0}
.find-main__content::-webkit-scrollbar-thumb:vertical{background-color:#eee}
.find-main__list:nth-child(1){padding-top:70px}
.find-main__list:nth-child(4){padding-top:110px}
.find-main__list li{margin-bottom:25px}
.find-main__list li img{width:100%;display:block}
@media (max-width:1920px){
  :root{
    --gallery-size:115px;
    --gallery-padding:40px;
  }
  .main{grid-template-columns:15vw 84vw}
  .gd3-2__desc .gd1-4_more{bottom:30px}
}
@media (max-width:1600px){
  :root{
    --gallery-size:110px;
    --gallery-padding:40px;
  }
  .find-main,
  .gallery-main{margin:30px;height:calc(100vh - 60px)}
  .gallery-detail_txt1 p{font-size:18px;margin-bottom:20px}
  .gd1-2{width:32%}
  .gd1-4{width:60%;padding:0 35px 20px 0}
  .gd1-4_more img{height:25px}
  .gd3-2__desc .gd1-4_more{display:none}
}
@media (max-width:1280px){
  :root{
    --gallery-size:80px;
    --gallery-padding:30px;
  }
  .main{grid-template-columns:17vw 82vw}
  .nav-item span{margin:20px 0 0 20px}
  .create-title span{padding:15px 30px;font-size:18px}
  .form-input{height:60px}
  .form-input{font-size:16px}
  .form-textarea{font-size:16px}
  .form-selected{font-size:16px}
  .form-textarea__tips p{font-size:15px}
  .form-textarea__tips p:first-child{font-size:16px}
  .form-file-box_title{font-size:20px}
  .form-file-box_text{font-size:16px}
  .form-file-box_file small{font-size:12px}
  .find-main,
  .gallery-main{margin:15px;height:calc(100vh - 30px)}
  .find-main__list:nth-child(1){padding-top:50px}
  .find-main__list:nth-child(4){padding-top:80px}
  .gd1-4_more{display:none}
}

@media (max-width:1024px) {
  .main{grid-template-columns:19vw 80vw}
}