.faq-page {
margin-top: 77px;
position: relative;
}
.faq-sub-ttl{
text-align: center;
font-size: 18px;
font-weight: 400;
font-family: var(--font3);
color: var(--black);
display: block;
padding: 24px 0;
letter-spacing: 0.3px;
line-height: 1.3;
margin: 0 auto;
max-width: 50%;
}
.faq-detail{
display: flex;
padding-top: 108px;
align-items: flex-start;
}
.faq-nav{
width: 285px;
background-color: #F7F8FA;
position: sticky;
top: 180px;
padding: 23px 8px 23px 20px;
}
.faq-nav li {
margin-bottom: 19px;
}
.faq-nav li a{
font-size: 18px;
font-weight: 400;
font-family: var(--font3);
color: #474C52;
letter-spacing: -0.1px;
display: inline-block;
border-bottom: 1px solid transparent;
}
.faq-nav li a.active,
.faq-nav li:hover a{
border-bottom: 1px solid var(--menu-hover);
color: var(--menu-hover);
}
.faq-page-ttl{
font-size: 31px;
font-weight: 500;
letter-spacing: 0.5px;
font-family: var(--font3);
color: var(--secondary-color);
}
.faq-content{
padding-left: 24px;
}
.faq-diamond{
margin-bottom: 74px;
}
.faq-diamond .faq-list{
padding: 0;
}
.faq-diamond .faq-ttl{
font-size: 22px;
color: #1B0700;
}
.faq-diamond .faq-list li {
padding: 26px 0 26px;
}
.faq-diamond .faq-tab{
padding: 12px 0 0;
width: 80%;
color: #444;
}
@media only screen and (min-width:768px) and (max-width:1280px) {
.faq-page {
margin-top: 6.016vw;
}
.faq-sub-ttl{
font-size: 1.406vw;
padding: 1.875vw 0;
letter-spacing: 0.023vw;
}
.faq-detail{
padding-top: 8.438vw;
}
.faq-nav{
width: 22.266vw;
top: 14.063vw;
padding: 1.797vw 0.625vw 1.797vw 1.563vw;
}
.faq-nav li {
margin-bottom: 1.484vw;
}
.faq-nav li a{
font-size: 1.406vw;
letter-spacing: -0.008vw;
}
.faq-page-ttl{
font-size: 2.422vw;
letter-spacing: 0.039vw;
}
.faq-content{
padding-left: 1.875vw;
}
.faq-diamond{
margin-bottom: 5.781vw;
}
.faq-diamond .faq-ttl{
font-size: 1.719vw;
}
.faq-diamond .faq-list li {
padding: 2.031vw 0 2.031vw;
}
.faq-diamond .faq-tab{
padding: 0.938vw 0 0;
}
}
@media all and (max-width:767.9px) {
.faq-page {
margin-top: 15.467vw;
}
.faq-sub-ttl{
font-size: 3.467vw;
padding: 4vw 0;
letter-spacing: 0.053vw;
line-height: 1.5;
max-width: 100%;
}
.faq-detail{
flex-direction: column;
padding-top: 10.133vw;
}
.faq-nav{
width: 100%;
white-space: nowrap;
display: flex;
background-color: unset;
position: unset;
top: 0;
padding: 0;
overflow-x:scroll;
}
.faq-nav li {
margin-bottom: 0;
margin-right: 2.133vw;
margin-bottom: 2.667vw;
}
.faq-nav li a{
padding: 1.6vw 5.333vw;
border: 0.267vw solid #9FA4A8;
border-radius: 14.933vw;
font-size: 4.8vw;
font-weight: 400;
font-family: var(--font3);
color: #73787E;
letter-spacing: -0.027vw;
display: block;
}
.faq-nav li a.active{
background-color: var(--primary-color);
color:#CACDD2;
}
.faq-page-ttl{
font-size: 5.333vw;
font-weight: 500;
letter-spacing: 0.139vw;
font-family: var(--font3);
color: var(--secondary-color);    
}
.faq-content{
padding-left: 0;
width: 100%;
margin-top: 8.267vw;
}
.faq-diamond{
margin-bottom: 19.733vw;
}
.faq-diamond .faq-list{
padding: 0;
}
.faq-diamond .faq-ttl{
font-size: 4.267vw;
padding-right: 5.6vw;
}
.faq-diamond .faq-list li {
padding: 6.4vw 0 6.4vw;
}
.faq-diamond .faq-tab{
padding: 3.2vw 0 0;
width: 100%;
color: #444;
}
.faq-diamond:last-child{
margin-bottom: 0;
}
.faq-nav::-webkit-scrollbar {
width: 2px;
height: 3px;
border-radius: 3px;
}
.faq-nav::-webkit-scrollbar-track {
background: transparent;
}
.faq-nav::-webkit-scrollbar-thumb {
background: #888;
} .faq-nav::-webkit-scrollbar-thumb:hover {
background: #555;
}
}