@charset "UTF-8";

body {position: relative;}
body::-webkit-scrollbar-track {background-color: var(--white);}

#wrap {background-color: var(--sky);}

#body {padding: 12.5rem 30px 11.25rem 30px;}

#header.type2 {
    position: absolute;
}
#header .logo a {cursor: pointer;}
#header .menu a {cursor: pointer;}


.mTitle1{font-weight:400;margin:0 0 35px;text-align:center;}
.mTitle1 span{display:inline-block;position:relative;font-weight: 700;font-size:27px;padding:0 0 20px;}
.mTitle1 span:before{content:"";position:absolute;bottom:-1px;left:0;background-color:#2c2c2c;width:100%;height:1px;}
.mTitle1 span:before{left:50%;margin-left:-50px;width:100px;}

.mTab1{margin:0 0 31px;text-align:center;}
.mTab1 .ls{display:inline-block;font-weight:500;padding:0 10px;}
.mTab1 .ls a{position:relative;display:block;color:#2c2c2c;font-size:16px;line-height: 1.5;padding:0 0 4px;}
.mTab1 .ls a:hover{text-decoration:none;}
.mTab1 .ls.selected a:before{content:"";position:absolute;bottom:0;left:0;background-color:#000;width:100%;height:3px;}

.mList1{margin:0 auto;width:960px;}
.mList1 ul{display: flex; flex-wrap: wrap; gap: 40px 20px;width: 100%;}
.mList1 li{background-color:#fff;text-align:center;padding:8px;width:calc((100% - 40px)/3);border-radius: 4px; box-shadow: 0px 2px 10px rgba(0,0,0,0.05);}
.mList1 li a{text-decoration:none;}
.mList1 li .img{display:block;}
.mList1 li .img img {width: 100%;}
.mList1 li .txt{display:block;color:#2c2c2c;font-size:16px;padding:17px 0 0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:51px;}

.mDetail {padding-top: 6.25rem;}
.mDetail .title{position:relative;background-color:var(--sky);}
.mDetail .title .titleBg{position:relative;margin:0 auto;padding:35px 20px;width:100%;max-width: 1024px;}
.mDetail .title h3{color:#2c2c2c;font-weight:500;font-size:24px;letter-spacing:-1px;}
.mDetail .title .txt{color:#666;font-size:15px;margin:10px 0 0;}
.mDetail .title .rt{position:absolute;top:50%;right:20px;top: 35px;}
.mDetail .title .rt a{text-decoration:none;}
.mDetail .title .rt .prev,
.mDetail .title .rt .next{display:block;float:left;background:url(../portfolio/img/ico_prev2_m.png) 50% 50% no-repeat #fff;background-size: 10px; text-indent:-9999px;font-size:0;border-radius:45px;margin-left:10px;width:45px;height:45px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.mDetail .title .rt .next{background-image:url(../portfolio/img/ico_next2_m.png);}
.mDetail .title .rt .btn{cursor: pointer; display:block;float:left;width: auto; border-radius:45px;background-color:#3a3a3a;color:#fff;font-weight: 400;font-size:15px;margin-left:10px;padding:0 20px;line-height:43px;height:45px;}
.mDetail .title .rt .btn::before {display: none;}
.mDetail .con{display: flex; flex-direction: column; align-items: center;padding: 15px 30px 0 30px; background-color:#000;text-align:center;}
.mDetail .con img {margin-bottom: 15px;}

#wrap.fixed .mDetail .title {
    width: 100%;
    position: fixed; left: 0; top: 0;
}
#wrap.fixed .mDetail .con {padding-top: 132px;}

@media (max-width: 1024px) {
    .mList1 {width: 100%; max-width: 640px;}
    .mList1 li {width: calc((100% - 20px)/2);}
    .mList1 li .img {display: flex; align-items: center; justify-content: center;}

    .mDetail .title h3 {font-size: 21px;}
    .mDetail .title .txt {font-size: 14px;}
    .mDetail .title .rt .btn {font-size: 14px;}
}

@media (max-width: 640px) {
    #body {padding: 11.25rem 20px;}

    .mTitle1{margin-bottom:40px;}
    .mTitle1 span{font-size:20px;padding-bottom:10px;}
    .mTitle1 span:before{margin-left:-25px;width:50px;}

    .mTab1{margin-bottom:30px;}
    .mTab1 .ls{padding:0 5px;}
    .mTab1 .ls a{font-size:14px;padding-bottom:7px;}
    .mTab1 .ls.selected a:before{height:1px;}

    .mList1 ul {justify-content: center; gap: 20px;}
    .mList1 li {width: 100%; max-width: 310px;}
    .mList1 li .txt {
        height: auto;
        padding: 12px 0;
        font-size: 15px;
    }

    .mDetail {padding-top: 60px;}
    .mDetail .title .titleBg {
        display: flex; flex-direction: column;
        padding: 16px 20px;
    }
    .mDetail .title h3 {font-size: 18px; line-height: 1.3;}
    .mDetail .title .txt {
        margin: 4px 0 8px 0;
        font-size: 12px;
    }
    .mDetail .title .rt {
        align-self: flex-end;
        position: static;
    }
    .mDetail .title .rt .prev {margin-left: 0;}
    .mDetail .title .rt .prev,
    .mDetail .title .rt .next {width: 38px; height: 38px; background-size: 7px;}
    .mDetail .title .rt .btn {height: 38px; font-weight: 400; font-size: 13px; line-height: 36px;}
    .mDetail .con {padding: 5px 20px 60px 20px;}
    .mDetail .con img {margin-bottom: 10px;}

    .request.forMobile {bottom: 0;}

    #wrap.fixed .mDetail .con {padding-top: 140px;}
}