.wraper { background: none; }
/* sbanner */
#sbanner, #bottomssbanner{background: url(/images/00/img_banner_bg.jpg) no-repeat 50% 0;display: none;}
#sbanner .txt{position:relative;padding: 190px 0;}
#sbanner .txt:after{content: '';display: block;width: 1px;height: 50px;background: #c7c7c7;position: absolute;left: calc(50% - 1px);top: calc(50% + 90px);}
#sbanner .txt p{text-align: center;color: #fff;position: relative;font-size: 70px;line-height: 100%;text-transform: uppercase;font-family: 'Jost', sans-serif;}
#sbanner .txt h2{text-align: center;color: #fff;font-weight: normal;position: relative;line-height: 100%;font-size: 24px;margin-top: 20px;}

/* waylink */
#waylink .helf { padding: 0 6vw; }
#waylink ol { padding: 20px; display: flex; justify-content: flex-end; align-items: center; gap: .5em; }
#waylink ol li { display: flex; align-items: center; font-size: 14px; color: #b6b6b6; gap: .5em }
#waylink ol li:before { content: '/'; color: #b6b6b6; }
#waylink ol li:first-child:before { content: ''; }
#waylink ol li a, #waylink ol li a i { font-size: revert; color: currentColor; vertical-align: baseline; }

#wrap{margin-bottom: 50px;overflow:hidden;}
#wrap .protitle{border-left: 7px solid #d8d8d8;margin-bottom: 50px;padding-left: 20px;}
#wrap .protitle h1{line-height: 140%;}
#wrap .protitle h2{font-size: 24px;color: #1f1f1f;line-height: 150%;padding: 0 20px;}
#wrap .protitle h1{ font-size: 24px; color: #1f1f1f; line-height: 100%; padding: 0 20px; }
#wrap .protitle span{display:block;color:#656565;font-size:14px;font-weight:normal;margin-top: 5px;}
#wrap .protitle.light-text h2{ color: #fff; }
#wrap #article * { vertical-align: baseline; }

#bottomssbanner{margin-top: 50px;padding: 100px 0;background-image:url(/images/re-make/info/footer-icon-bg.jpg);}

/* aside */
aside .atitle{margin: 50px 0;display: none;}
aside .atitle .titlestyle b{ color: #2e2e2e; font-weight: normal; font-size: 12px; padding-left: 50px; }
aside .titlestyle-h2{ position:relative; }
aside .titlestyle-h2:after{ position:absolute; content:''; width:100%; background:#000; height:2px; left:0; top:50%; z-index:1; }
aside .titlestyle-h2:before{ position:absolute; content:''; width:66%; background:#d3292a; height:2px; left:0%; top:50%; z-index:2; }
aside .titlestyle-h2 h2{ line-height: 100%; font-size: 30px; font-weight: normal; padding-left: 100px; margin-top: 5px; position: relative; z-index: 2; background: #fff; display: inline-block; padding-right: 30px; }
aside .titlestyle-h2 h2 span{ position: absolute; left: 0; width: 70px; height: 1px; display: block; background: #cecece; bottom: 50%;	 } 
aside ul{justify-content: center;display: grid;grid-template-columns: repeat(7, 1fr);gap: 7px;}
aside li{display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
aside li a{overflow: hidden;border:1px solid #838383;text-align: center;line-height: 35px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: #b6b6b6;transition:all linear 0.2s;font-size: 15px;line-height: 200%;letter-spacing: 0;padding: 8px 6px;border-radius: 50px;}
aside li a:hover{border: 1px solid #545454;color: #fff;background: linear-gradient(to right, rgba(117, 77, 218, 1) 0%, rgba(205, 152, 231, 1) 100%);}
aside #side-nav {padding: 0 6vw;margin: 0vmax 0 1.2vmax 0;}
#content {margin: 9vmax 0 3vmax 0;}


/* classificationBox */
.classification{
    padding: 0 7.6vw;
    margin: 1vmax 0 2vmax 0;
}
#classificationBox{overflow:hidden;transform-origin:top center;transition:max-height 0.3s ease;max-height:0}
#classificationBox .projecClassList{display: flex;flex-wrap: wrap;background: rgb(255 255 255 / 5%);padding: 1.2rem 1.5rem;gap: 9px 8px;}
#classificationBox .projecClassList a{
    border: 1px solid #424242;
    color: #b6b6b6;
    overflow: hidden;
    position: relative;
    font-size: 13.5px;
    line-height: 200%;
    letter-spacing: 0;
    padding: 4px 8px;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: all 
linear 0.2s;
    /* border-radius: 50px; */
    }
#classificationBox .projecClassList a:hover{border: 1px solid #545454;color: #fff;background: #545454;}

#classificationBox.show .projecClassList li{opacity:0;animation:cardIn 0.4s ease forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}.classification-toggle{background-color:#f0f0f0;padding:10px 15px;font-size:16px;cursor:pointer;border:none;width:100%;text-align:left;display:none;align-items:center;justify-content:space-between}
.classification-toggle svg{width:13px;height:13px;transition:transform 0.3s ease}
.classification-toggle.active svg{transform:rotate(180deg)}
@media (max-width:1180px){
    #classificationBox .projecClassList{
    gap: 6px 6px;
    padding: 1rem .8rem;
}
    .linkArea .projecttitle >div{width:100%}
.linkArea .projecttitle .projecTitle h2{}
}
@media (min-width:768px){
    .classification-toggle{display:none !important}
#classificationBox{max-height:none}
}
@media (max-width:768px){
        #classificationBox .projecClassList{
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 2px 4px;
    padding: .8rem .2rem;
    border: 1px solid #464646;
}
    .classification-toggle{display:flex !important;justify-content:space-between;align-items:center;padding: 10px 14px;background:#f0f0f0;font-size: 14px;width:100%}
.projecClassList{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #e2e2e2;gap:5px;padding: 10px;}
#classificationBox .projecClassList a{padding: 3px 3px;letter-spacing:0;color: #afafaf;border: 1px solid #464646;display:block;font-size: 12.5px;}
#classificationBox.show{background-color: rgb(15 15 15 / 30%);box-shadow: 0 1px 36px rgb(0 0 0 / 10%);}
}.projecClassList{}
.projecClassList a{text-decoration:none;color:#333}

/* sub-to */
.sub-to{ display:none; }

/* page */
#page{ text-align:center; margin: 50px 0; }
#page a, #page span{ display: inline-block; color: #838383; margin: 0 3px; vertical-align: top; padding: 5px 8px; }
#page span {border: 1px #838383 solid;}

/* quote-ask */
.quote-ask{ margin: 50px 0; text-align: center; }
.quote-ask a{ display: inline-block; background: #e11e1e; color: #fff; font-weight: bold; font-size: 18px; line-height: 150%; padding: 8px 25px; border-radius: 7px; transition:all linear 0.3s; }
.quote-ask a:hover{ background: #970e0e; }
#waylink .helf li a> h1,#waylink .helf li a> h2,#waylink .helf li a> h3{ font-size: 12px; }

/* evaluation_list */
#evaluation_list{display:grid;grid-template-columns:repeat(2,1fr);padding: 10px 0;gap: 60px 50px;x}
#evaluation_list li{display:grid;grid-template-columns:140px 1fr;gap:0 20px;width:100%;margin:0}
#evaluation_list li a{z-index:10}
#evaluation_list .no { line-height: 100%; font-size: 160px; color: #f1f1f1; top: 10px; right: 10%; }
#evaluation_list .img {overflow: hidden;width: 140px;height: 140px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;border: 10px #fff solid;box-shadow: 0 0 20px rgb(0 0 0 / 30%);}
#evaluation_list .img img{aspect-ratio:1 / 1;width:100%}
#evaluation_list .info p{text-align:left}
#evaluation_list .info h6{display:flex;justify-content:space-between;align-items:baseline}
#evaluation_list .info h6 b{height:37px;font-size:22px}
#evaluation_list .info h6 b:last-child{font-size:15px;height:auto}
#evaluation_list .info h6:before { position: absolute; width: 30px; height: 2px; background: var(--info); display: block; bottom: 0; left: 0; content: ""; }
#evaluation_list .info article {height: 54px;-webkit-line-clamp: 2;text-align: left;}
#evaluation_list .info font { height: 23px; font-weight: 400; font-size: 14px; }
#evaluation_list .arrow_box { right: 0; bottom: 0; }

/* Sitemap */
#Sitemap .list { margin-bottom: 15px; }
#Sitemap .list h4 { padding: 0 10px 5px; border-bottom: 1px #cfcfcf solid; font-weight: bold; font-size: 22px; line-height: 170%; }
#Sitemap .list ul { margin: 10px 0; }
#Sitemap .list ul li { display: inline-block; }
#Sitemap .list ul li a { margin: 5px 10px; padding: 5px 15px; display: block; background: #f3f3f3; color: #535252; }
#Sitemap .list ul li a:hover { background: #717171; color: #fff; }


@media screen and (max-width:1440px){
	#sbanner .txt{ padding: 130px 0; }
	#sbanner .txt:after{ height: 30px; top: calc(50% + 70px); }
	#sbanner .txt p{font-size: 60px;}
}
@media screen and (max-width:1280px){
	#sbanner, #bottomssbanner{ background-attachment:inherit; }
	aside .titlestyle-h2 h2{ font-size:24px; }
}
@media screen and (max-width: 1160px){
	aside ul{grid-template-columns: repeat(4, 1fr);}
	aside #side-nav{margin: 1vmax 0 3vmax 0;}
	button#open_popup{bottom: 115px;margin: 1em 0em;right: 5px;}
#gotop {
        right: 5px;
    }
}
@media screen and (min-width:981px){
	#side-nav{ display:block !important; }
}
@media screen and (max-width:980px){
	aside {margin-top: 15vw;text-align: right;}
	.sub-to{display: inline-block;margin-right: 6%;background: #fcfcfc;color: #000;font-size: 14px;padding: 8px 15px;border-radius: 7px;}
	#side-nav, aside .atitle{ display:none; }
	#wrap{ clear:both; }
	#wrap .protitle{ margin: 20px 0 50px; }
	#waylink { display: none; }
	aside #side-nav{margin: 2vmax 0 3vmax 0;}
	.classification { margin: 1vmax 0 2vmax 0; padding: 0 6.5vw; }
	#evaluation_list .img { width: 90px; height: 90px }
	#evaluation_list li { grid-template-columns: 100px 1fr }
	#evaluation_list { grid-template-columns: 1fr; gap: 30px 50px; }
}
@media screen and (max-width:640px){
	#content { margin-bottom: 0; }
	#wrap{ margin-bottom: 0; clear:both; }
	aside ul{position: relative;justify-content: space-between;margin-top: 10px;grid-template-columns: repeat(2, 1fr);gap: 5px;}
	aside li{margin: 3px 0;position: relative;white-space: normal;border: 1px solid #d2d2d252;border-radius: 10px;}
	aside li a{width: 100%;padding: 6px 6%;text-align: left;border: unset;border-radius: unset;margin-left: 3px;border: unset;border-radius: unset;margin-left: 0;color: #d1d1d1;}
	#sbanner .txt{padding: 120px 0 90px 0;}

}
@media screen and (max-width:550px){
	#evaluation_list .info { width: 100%; }
	#evaluation_list .info h6 { padding-bottom: 0; }
	#evaluation_list .info h6:before , #evaluation_list .info article { display: none; }
	#evaluation_list .slick-dots li { margin: 0; }
	aside {margin-top: 23vw;}
}
@media screen and (max-width:480px){
	#sbanner .txt p{font-size: 31px;}
	#sbanner .txt h2{font-size: 18px;margin-top: 10px;}
}