/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400);
.menuClassBox .menuClassList .arrowBox a::before, .menuClassBox .menuClassList .arrowBox a::after, .itemArea .wrap ul.itemList .Txt {
    transition: all .5s;
}

.itemArea .wrap ul.itemList .Img {
    transition: all .8s;
}

.mainArea .wrap {
    width: 100%;
}

@media (max-width: 440px) {
    .mainArea .wrap {
        padding: 0;
    }
}

.contentBox .leftBox {
    padding: 0;
}

.classNote {
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 1.8;
    color: #222;
    text-align: center;
}

.facList {
    margin: 0 -15px;
}

.facList li {
    padding: 0 15px 30px;
}

.facList .Img {
    position: relative;
    overflow: hidden;
}

.facList .Img img {
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.facList .Txt {
    padding: 15px;
    text-align: center;
    background-color: #fff;
}

.facList .Txt h3 a {
    font-size: 20px;
    font-weight: 400;
    color: #333;
}

.facList .Txt h3 a:hover {
    color: #b06228;
}

.facList .Txt p {
    height: 60px;
    padding-top: 10px;
    font-size: 13px;
    line-height: 1.8;
    color: #777;
}

.menuDList {
    padding: 50px 0;
}

.menuDList li {
    margin: 0 auto;
    text-align: center;
    padding: 100px 0;
    position: relative;
}

.menuDList li .Img {
    width: 690px;
    height: 400px;
    margin: 0 auto;
}

.menuDList li .Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menuDList li .Txt {
    padding: 10px 0;
}

.menuDList li::before {
    content: "";
    width: calc(1920px * 1.2);
    height: 500px;
    background-color: #b06228;
    position: absolute;
    top: 20%;
    right: -20%;
    z-index: -5;
    transform: rotate(-4.1deg);
    transform-origin: right top;
}

.menuDList li .chTitle {
    font-size: 28px;
    font-weight: 700;
    line-height: 30px;
    padding: 10px 0 0;
}

.menuDList li .chTitle.subTitle {
    font-size: 20px;
}

.menuDList li .chExp {
    padding: 20px 0 10px;
    max-width: 690px;
    margin: 0 auto;
}

.menuDList li .downloadBtn {
    display: inline-block;
    padding: 10px 30px;
    background-color: #ececec;
}

.menuDList li .downloadBtn:hover {
    color: #fff;
    background-color: #f6ae15;
}

.menuClassBox .menuClassList {
    position: relative;
}

.menuClassBox .menuClassList .arrowBox {
    width: 40px;
    height: 40px;
    position: absolute;
    top: calc(182px + 265px + 10px);
}

.menuClassBox .menuClassList .arrowBox.prevBox {
    left: calc(50% - 440px - 40px);
}

.menuClassBox .menuClassList .arrowBox.nextBox {
    right: calc(50% - 440px - 40px);
}

.menuClassBox .menuClassList .arrowBox a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.menuClassBox .menuClassList .arrowBox a::before {
    content: "";
    width: 2px;
    height: 17px;
    background-color: #c5c5c5;
    position: absolute;
    top: 3px;
    left: 14px;
    transform-origin: bottom right;
}

.menuClassBox .menuClassList .arrowBox a::after {
    content: "";
    width: 2px;
    height: 17px;
    background-color: #c5c5c5;
    position: absolute;
    bottom: 3px;
    left: 14px;
    transform-origin: top left;
}

.menuClassBox .menuClassList .arrowBox a.prevArrow::before {
    transform: rotate(30deg);
}

.menuClassBox .menuClassList .arrowBox a.prevArrow::after {
    transform: rotate(-30deg);
}

.menuClassBox .menuClassList .arrowBox a.nextArrow::before {
    transform: rotate(-30deg);
    left: 26px;
}

.menuClassBox .menuClassList .arrowBox a.nextArrow::after {
    transform: rotate(30deg);
    left: 26px;
}

.menuClassBox .menuClassList .arrowBox a:hover::before {
    background-color: #1d130d;
}

.menuClassBox .menuClassList .arrowBox a:hover::after {
    background-color: #1d130d;
}

@media (max-width: 1800px) {
    .menuClassBox .menuClassList .arrowBox {
        top: 377px;
    }
    .menuClassBox .menuClassList .arrowBox.prevBox {
        left: calc(50% - 300px - 40px);
    }
    .menuClassBox .menuClassList .arrowBox.nextBox {
        right: calc(50% - 300px - 40px);
    }
}

@media (max-width: 960px) {
    .menuClassBox .menuClassList .arrowBox {
        top: calc( 182px + (100% - 182px - 365px) / 2);
    }
    .menuClassBox .menuClassList .arrowBox.prevBox {
        left: -20px;
    }
    .menuClassBox .menuClassList .arrowBox.nextBox {
        right: -20px;
    }
}

@media (max-width: 440px) {
    .menuClassBox .menuClassList .arrowBox {
        top: calc( 182px + 350px);
    }
    .menuClassBox .menuClassList .arrowBox.prevBox {
        left: 0px;
    }
    .menuClassBox .menuClassList .arrowBox.nextBox {
        right: 0px;
    }
}

.menuClassBox .menuClassList .slick-arrow {
    opacity: 0;
    pointer-events: none;
}

.menuClassBox .menuClassLi {
    position: relative;
    padding: 30px 0 0;
}

.menuClassBox .menuClassLi .titleBox {
    text-align: center;
    padding: 0 0 45px;
}

.menuClassBox .menuClassLi .titleBox .yTitle {
    font-size: 49px;
    font-weight: 700;
    line-height: 65px;
    letter-spacing: 0;
    padding: 0;
    -webkit-text-stroke: 1px #fff;
}

.menuClassBox .menuClassLi .titleBox .chTitle {
    padding: 0 0 5px;
    font-size: 26px;
    font-weight: 900;
}

.menuClassBox .menuClassLi .titleBox .slogan {
    display: inline-block;
    padding: 0 90px;
    color: #1d130d;
}

.menuClassBox .menuClassLi .titleBox .slogan::before {
    width: 67px;
    background-color: #1d130d;
}

.menuClassBox .menuClassLi .titleBox .slogan::after {
    content: "";
    width: 67px;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    background-color: #1d130d;
}

@media (max-width: 480px) {
    .menuClassBox .menuClassLi .titleBox .yTitle {
        font-size: 46px;
        line-height: 50px;
    }
    .menuClassBox .menuClassLi .titleBox .slogan {
        padding: 0;
    }
    .menuClassBox .menuClassLi .titleBox .slogan::before, .menuClassBox .menuClassLi .titleBox .slogan::after {
        display: none;
    }
}

@media (max-width: 440px) {
    .menuClassBox .menuClassLi .titleBox {
        padding: 0 30px 15px;
    }
    .menuClassBox .menuClassLi .titleBox .yTitle {
        font-size: 40px;
        line-height: 50px;
    }
    .menuClassBox .menuClassLi .titleBox .slogan {
        padding: 0;
    }
    .menuClassBox .menuClassLi .titleBox .slogan::before, .menuClassBox .menuClassLi .titleBox .slogan::after {
        display: none;
    }
}

.menuClassBox .listContentBox {
    position: relative;
    width: 100%;
}

.menuClassBox .menuList {
    width: 100%;
    width: 880px;
    margin: 0 auto;
}

.menuClassBox .menuList .menuLi {
    width: 880px;
}

.menuClassBox .menuList .Img {
    position: relative;
    width: 100%;
    height: 100%;
}

.menuClassBox .menuList .Img img {
    width: 100%;
}

.menuClassBox .menuList .Img .ImgTxt {
    width: 100%;
    padding: 0 45px 30px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.menuClassBox .menuList .Img .ImgTxt .chTitle {
    padding: 15px 0 0;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    color: #fff;
}

.menuClassBox .menuList .Txt {
    width: 880px;
    padding: 0 45px;
}

.menuClassBox .menuList .Txt .chExp {
    padding: 20px 0 0;
}

.menuClassBox .menuList .Txt .yTitle {
    font-size: 16px;
    line-height: 65px;
    letter-spacing: 0.5px;
    font-weight: 700;
    -webkit-text-stroke: 0.3px #fff;
    padding: 0;
}

.menuClassBox .menuList .Txt .yTitle .num {
    font-size: 30px;
    line-height: 65px;
    letter-spacing: 0.2px;
    text-shadow: 0px 2px 9px rgba(131, 131, 131, 0.45);
}

@media (max-width: 1800px) {
    .menuClassBox .menuList {
        width: 600px;
    }
    .menuClassBox .menuList .Txt {
        width: 600px;
    }
}

@media (max-width: 960px) {
    .menuClassBox .menuList {
        width: 100%;
        max-width: 600px;
        padding: 0 20px;
    }
    .menuClassBox .menuList .Txt {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .menuClassBox .menuList .Img .ImgTxt {
        padding: 0 15px 20px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .menuClassBox .menuList .Img .ImgTxt .yBgTitle {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
    }
    .menuClassBox .menuList .Img .ImgTxt .chTitle {
        padding: 10px 0 0;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 1px;
        color: #fff;
    }
}

@media (max-width: 440px) {
    .menuClassBox .menuList {
        padding: 0;
    }
}

.menuClassBox .slick-dots {
    text-align: right;
    width: 100%;
    height: 20px;
    padding: 0 45px;
    bottom: -20px;
}

.menuClassBox .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 3px;
}

.menuClassBox .slick-dots li button {
    display: block;
    width: 10px;
    height: 10px;
}

.menuClassBox .slick-dots li button::before {
    content: "";
    width: 7px;
    height: 7px;
    background-color: #f2f2f2;
    opacity: 1;
    top: calc(50% - 3.5px);
    left: calc(50% - 3.5px);
}

.menuClassBox .slick-dots li.slick-active button::before {
    background-color: #1d130d;
}

.menuClassBox .bgmenuList {
    width: 440px;
    height: auto;
    margin: 0 auto;
    position: absolute;
    top: 165px;
    z-index: -5;
}

.menuClassBox .bgmenuList.prevList {
    left: -40px;
}

.menuClassBox .bgmenuList.nextList {
    right: -40px;
}

.menuClassBox .bgmenuList .menuLi {
    width: 440px;
    height: 265px;
}

.menuClassBox .bgmenuList .Img {
    position: relative;
    width: 100%;
    height: 100%;
}

.menuClassBox .bgmenuList .Img img {
    width: 100%;
}

@media (max-width: 1800px) {
    .menuClassBox .bgmenuList {
        width: 360px;
        top: 75px;
    }
    .menuClassBox .bgmenuList .menuLi {
        height: auto;
    }
}

@media (max-width: 1440px) {
    .menuClassBox .bgmenuList {
        width: 200px;
        top: 120px;
    }
    .menuClassBox .bgmenuList.prevList {
        left: 0px;
    }
    .menuClassBox .bgmenuList.nextList {
        right: 0px;
    }
}

@media (max-width: 1200px) {
    .menuClassBox .bgmenuList {
        opacity: 0;
    }
}

@media (max-width: 960px) {
    .menuClassBox .bgmenuList {
        opacity: 0;
    }
}

.menuClassBox .classExpBox {
    position: relative;
}

@media (max-width: 440px) {
    .menuClassBox .classExpBox {
        padding: 80px 0 50px;
    }
}

.menuClassBox .classExpBox::before {
    content: "";
    width: 120%;
    height: 300px;
    background-color: #b06228;
    position: absolute;
    bottom: 0px;
    left: 0;
    transform: rotate(-1.8deg);
    transform-origin: bottom left;
    z-index: -5;
}

@media (max-width: 1440px) {
    .menuClassBox .classExpBox::before {
        left: -5%;
    }
}

@media (max-width: 840px) {
    .menuClassBox .classExpBox::before {
        height: 400px;
        width: 130%;
        left: -15%;
    }
}

@media (max-width: 440px) {
    .menuClassBox .classExpBox::before {
        height: 500px;
        width: 130%;
        left: -15%;
    }
}

@media (max-width: 375px) {
    .menuClassBox .classExpBox::before {
        height: 550px;
    }
}

.menuClassBox .classExpBox .wrap {
    width: 1360px;
    padding: 100px 240px 90px;
    display: flex;
    flex-wrap: nowrap;
}

@media (max-width: 1440px) {
    .menuClassBox .classExpBox .wrap {
        width: 100%;
        padding: 80px 100px 90px;
    }
}

@media (max-width: 1200px) {
    .menuClassBox .classExpBox .wrap {
        padding: 80px 0px 90px;
    }
}

@media (max-width: 840px) {
    .menuClassBox .classExpBox .wrap {
        flex-wrap: wrap;
    }
}

@media (max-width: 440px) {
    .menuClassBox .classExpBox .wrap {
        padding: 0 30px;
    }
}

.menuClassBox .classExpBox .titleBox {
    flex-grow: 1;
}

.menuClassBox .classExpBox .contentBox {
    flex-grow: 1;
    position: relative;
}

.menuClassBox .classExpBox .contentBox .expList {
    padding-right: 20px;
    padding-bottom: 30px;
}

.menuClassBox .classExpBox .contentBox .expList li {
    padding-left: 14px;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.6px;
    color: #1d130d;
}

.menuClassBox .classExpBox .contentBox .expList li::before {
    content: "";
    width: 4px;
    height: 4px;
    background-color: #1d130d;
    position: absolute;
    top: 10px;
    left: 0;
}

.menuClassBox .classExpBox .contentBox .chExp {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.6px;
    padding: 0 18px;
    background-color: #1d130d;
    color: #fff;
}

.menuClassBox .classExpBox .Img {
    width: 175px;
    height: 175px;
}

.menuClassBox .classExpBox .Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 840px) {
    .menuClassBox .classExpBox .titleBox {
        width: 100%;
    }
    .menuClassBox .classExpBox .contentBox {
        width: 50%;
    }
    .menuClassBox .classExpBox .Img {
        width: 50%;
        max-width: 175px;
    }
}

@media (max-width: 440px) {
    .menuClassBox .classExpBox .titleBox {
        width: 100%;
    }
    .menuClassBox .classExpBox .contentBox {
        width: 100%;
    }
    .menuClassBox .classExpBox .contentBox .expList {
        padding: 0 0 30px;
    }
    .menuClassBox .classExpBox .Img {
        width: 100%;
        max-width: 175px;
        margin: 20px  auto 0;
    }
}

.itemArea .titleBox {
    text-align: center;
}

.itemArea .titleBox .yTitle {
    font-size: 49px;
    font-weight: 700;
    line-height: 65px;
    letter-spacing: 0;
    padding: 0;
    -webkit-text-stroke: 1px #fff;
}

.itemArea .titleBox .chTitle {
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.6px;
    color: #1d130d;
    padding: 5px 0 15px;
}

.itemArea .titleBox .slogan {
    margin: 0 auto;
    display: inline-block;
    padding: 0 90px;
    color: #1d130d;
}

.itemArea .titleBox .slogan::before {
    width: 67px;
    background-color: #1d130d;
}

.itemArea .titleBox .slogan::after {
    content: "";
    width: 67px;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    background-color: #1d130d;
}

.itemArea .itemClassBox {
    padding: 30px 0 40px;
}

.itemArea .itemClassBox ul.itemClassLink {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.itemArea .itemClassBox ul.itemClassLink li {
    display: inline-block;
    margin: 5px 0;
}

.itemArea .itemClassBox ul.itemClassLink a {
    position: relative;
    display: block;
    margin: 0px;
    padding: 10px 30px;
    border: 1px solid #b06228;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    color: #b06228;
}

.itemArea .itemClassBox ul.itemClassLink a:hover {
    color: #fff;
    background-color: #b06228;
}

.itemArea .itemClassBox ul.itemClassLink a.current {
    color: #fff;
    background-color: #b06228;
}

.itemArea .itemArea {
    width: 100%;
}

.itemArea .wrap {
    width: 1360px;
    padding: 0 24px;
}

.itemArea .wrap ul.itemList {
    width: 100%;
}

.itemArea .wrap ul.itemList li {
    box-sizing: border-box;
    padding: 0 6px;
    height: 320px;
    margin: 0 0 12px;
}

.itemArea .wrap ul.itemList li .item {
    border: 1px solid #1d130d;
    position: relative;
    height: 320px;
}

.itemArea .wrap ul.itemList li:hover .item {
    border-color: #b06228;
}

.itemArea .wrap ul.itemList li:hover .Img {
    opacity: 0;
}

.itemArea .wrap ul.itemList li:hover .Txt {
    opacity: 1;
}

.itemArea .wrap ul.itemList li:hover .Txt.noImg {
    background-color: #b06228;
    opacity: 0;
    color: #1d130d;
}

.itemArea .wrap ul.itemList li:hover .Txt.noImg .chTitle .jpTitle {
    color: #1d130d;
}

.itemArea .wrap ul.itemList li:hover .Txt.noImg .yTitle {
    color: #1d130d;
}

.itemArea .wrap ul.itemList .Img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0;
    opacity: 1;
    border: 2px solid #b06228;
}

.itemArea .wrap ul.itemList .Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemArea .wrap ul.itemList .Txt {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    position: relative;
    opacity: 0;
}

.itemArea .wrap ul.itemList .Txt .chTitle {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1d130d;
    position: relative;
    padding: 0 0 15px;
}

.itemArea .wrap ul.itemList .Txt .chTitle .jpTitle {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    font-weight: 400;
    color: #b06228;
    padding-left: 10px;
}

.itemArea .wrap ul.itemList .Txt .chTitle::before {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #1d130d;
    position: absolute;
    bottom: 0;
    left: 0;
}

.itemArea .wrap ul.itemList .Txt .chExp {
    padding: 15px 0;
}

.itemArea .wrap ul.itemList .Txt .yTitle {
    position: absolute;
    bottom: 0px;
    left: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 65px;
    letter-spacing: 0.5px;
    padding: 0;
    -webkit-text-stroke: 0.5px transparent;
    text-shadow: none;
}

.itemArea .wrap ul.itemList .Txt .yTitle .num {
    font-size: 28px;
}

@media (max-width: 1440px) {
    .itemArea .wrap {
        width: 100%;
        padding: 0;
    }
}

@media (max-width: 1200px) {
    .itemArea .wrap li {
        width: 50%;
    }
}

@media (max-width: 840px) {
    .itemArea .wrap li {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .itemArea .wrap ul.itemList .Txt {
        padding: 20px 10px;
    }
    .itemArea .wrap ul.itemList .Txt .chTitle {
        padding: 0;
    }
    .itemArea .wrap ul.itemList .Txt .chTitle .jpTitle {
        display: block;
        padding: 5px 0 0;
    }
    .itemArea .wrap ul.itemList .Txt .chTitle::before {
        display: none;
    }
    .itemArea .wrap ul.itemList .Txt .chExp {
        padding: 10px 0;
    }
    .itemArea .wrap ul.itemList .Txt .yTitle {
        position: absolute;
        bottom: 10px;
        left: 10px;
        line-height: 20px;
    }
}
/*# sourceMappingURL=fac.css.map */