@charset "utf-8";


/* member - 기본화면 */

.box{
    width: calc(( 100% / 2 ) - 20px);
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
    height: 355px;
    background-color: #656A6B;
    color: #fff;

    background-position: right bottom ;
    background-repeat: no-repeat;
    background-size: 40%;

    position: relative;

    box-sizing: border-box;
    padding: 60px;

    overflow: hidden;

    font-weight:300;
    text-align: left;
}
.box:nth-child(2n){
    margin-right: 0;
}
.boxli{
    margin-bottom: 20px;
    width: 100%;
    margin:  20px auto;
    display: block;
    text-align: center;
}

.box::after{
    content: '';
    display: block;
    clear: both;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 97%;
    height: 94%;
    border: solid 1px #c6ac99 ;
}

/* .box01{
    background-image: url(../../img/sub/0014@3x.webp);
}
.box02{
    background-image: url(../../img/sub/img02_.png);
}
.box03{
    background-image: url(../../img/sub/img03_.png);
}
.box04{
    background-image: url(../../img/sub/img04_.png);
} */


.box .bimg{
    width: 260px;
    position: absolute;
    right: 30px;
    bottom: -65%;;
}
.box01 .bimg{
    width: 260px;
    position: absolute;
    right: 30px;
    bottom: 0;;
}
.box04 .bimg{
    bottom: -42%;;
}

.box a img{
    width:17px;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 3px;
    padding-left: 10px;
}

.box p{
    margin-bottom: 95px;
    margin-top: 20px;
    font-size: 24px;

}
.box p b{
    font-size: 40px;
    margin-right: 5px;
}

.box p::after{
    content: '';
    display: block;
    clear: both;
    width: 35px;
    height: 3px;
    background-color: #c6ac99;
    margin-top: 20px;
}

.box a{
    position: relative;
    z-index: 10;
}



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


    .box{
        height: 300px;
        padding: 50px 30px;
    }


    .box::after{
        width: 96%;
        height: 94%;
    }

    .box .bimg{
        width: 220px;
        position: absolute;
        right: 30px;
     /*   bottom: -65%;;*/
    }
    .box01 .bimg{
        width: 220px;
        position: absolute;
        right: 30px;
        bottom: 0;;
    }
    .box p b{
        font-size: 35px;
        margin-right: 5px;
    }
    
    .box p{
        margin-bottom: 50px;
    
    }
}

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

    .box{
        width: 100%;

        margin-right: 0px;
        display:block;
        height: 200px;
        padding: 30px;
        margin:0px auto 15px 0;
    }

    .boxli{
        margin-bottom: 20px;
        margin:  auto;
        display: block;
        width: 95%;
    }
    
    .box::after{
        content: '';
        display: block;
        clear: both;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 96%;
        height: 94%;
        border: solid 1px #c6ac99 ;
    }
    
    .box .bimg{
        width: 145px;
        position: absolute;
        right: 30px;
     /*   bottom: -65%;;*/
    }
    .box01 .bimg{
        width: 145px;
        position: absolute;
        right: 30px;
        bottom: 0;;
    }
    .box a img{
        width:17px;
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 3px;
        padding-left: 10px;
    }
    .box span{
        font-size: 12px;
    }
    .box p{
        margin-bottom: 15px;
        margin-top: 20px;
        font-size: 15px;
    
    }
    .box p b{
        font-size: 28px;
        margin-right: 5px;
    }
    
    .box p::after{
        width: 22px;
        height: 3px;
        margin-top: 13px;
    }
    
    .box a{
        position: relative;
        z-index: 10;
        font-size: 13px;
    }
    
    .box::after{
        width: 97%;
        height: 89%;
    }

}


@media screen and (max-width:550px) {
    .box::after{
        width: 96%;
        height: 93%;
    }


}





















/* 클릭시 이동 화면 */

.memtop{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:  center center;
    width: 100%;
    height: 740px;
    position: relative;
    background-color:#686D6F ;
    overflow: hidden;
}

.memtop .fimg{
/*
    position: absolute;
    transform: translate(-50%,-50%);
    top: 75%;
    left: 60%;
*/
display: inline-block;
vertical-align: top;
float: right;
margin-top: 150px;
}
.memtop .fimg img{
    width: 400px;
}


.fibox-in{
    display: inline-block;
    vertical-align: top;
    margin-top: 200px;
    float: right;
}

.fimgbox{
    width: 350px;
    height: 450px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position:  center bottom;
    position: relative;

    background-image: url(../../img/sub/0014@3x.webp);

/*
    position: absolute;
    left: 62%;
    top: 60%;
    transform: translate(-50%,-50%);*/
    background-color: #787D80;

}


.memtoptxt{
    /*position: absolute;
    left: 40px;
    top: 70%;
    transform: translate(-50%,-50%);
*/
margin-top: 320px;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    font-weight: 300;
}


.memtoptxt p{
    margin-bottom:60px;
    margin-top: 42px;
    font-size: 24px;
}
.memtoptxt p b{
    font-size: 50px;
    margin-right: 10px;
}

.memtoptxt p::after{
    content: '';
    display: block;
    clear: both;
    width: 44px;
    height: 4px;
    background-color: #c6ac99;
    margin-top: 22px;
}

.memtoptxt a{
    position: relative;
    z-index: 10;

}

.memtoptxt li{
    margin-bottom: 20px;
}


.memtoptxt li ol{
    width: 90px;
    font-weight: 500;
    display: inline-block;
    visibility: top;
}


.mem_li{
    font-size: 0;
    position: relative;
}

.mem_li p{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.mem_li li{
    margin-bottom: 10px;
    line-height: 30px;;
    display: inline-block;
    vertical-align: top;
    width: 95%;
    color: #333;
}

.mem_li ul{
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.mem_li ol span{
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
vertical-align: top;

}

.mem_li ol span::before{
content: '';
display: block;
clear: both;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #000;

display: inline-block;
vertical-align: top;
margin-top: 11px;
}




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

    .mem_li li{
        width: 80%;
    }
    
}

@media screen and (max-width:860px) {
    
    .memtop{
        height: 400px;
    }
    
    .memtop .fimg{
    margin-top: 00px;
    position: absolute;
    right: 2%;
    bottom:-33% ;
    }
    .memtop .fimg04{
        margin-top: 00px;
        position: absolute;
        right: 2%;
        bottom:-18% ;
        }
    .memtop .fimg img{
        width: 200px;
    }
    
    .fibox-in{
        margin-top:0px;
    }
    
    .fimgbox{
        width: 211px;
        height: 253px;    
        background-color: transparent;
        position: absolute;
        right: 0;
        bottom:0 ;
    }
    
    .memtoptxt{
    margin-top: 50px;
        color: #fff;
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;
        position: relative;
        z-index: 1;
    }
    
    
    .memtoptxt p{
        margin-bottom:30px;
        margin-top: 7px;
        font-size: 16px;
    }
    .memtoptxt p b{
        font-size: 26px;
        margin-right: 6px;
    }
    
    .memtoptxt p::after{
        width: 38px;
        height: 4px;
        margin-top: 7px;
    }
    
    .memtoptxt a{
        position: relative;
        z-index: 10;
    
    }
    
    .memtoptxt li{
        margin-bottom:10px;
    }
    
    
    .memtoptxt li ol{ 
        width: 80px;
        font-weight: 500;
        display: block;
    }
    
    .memtoptxt span{
        font-size: 12px;
    }
    
    .mem_li ul:last-child::before{
        content: '';
        display: block;
        clear: both;
        width: 100%;
        height: 1px;
        background-color: #ddd;
        margin: 20px auto;
    }


    .mem_li p{
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .mem_li li{
        margin-bottom: 10px;
        line-height: 30px;;
        display: inline-block;
        vertical-align: top;
        width: 80%;
        line-height: 23px;
    }
    .mem_li li:last-child{
        margin-bottom: 0;
    }
    
    .mem_li ul{
        display:block;
        width: 95%;
        margin: auto;
    }
    
    .mem_li ol span{
        padding-left: 3px;
        padding-right: 7px;
        display: inline-block;
    vertical-align: top;
    }
    
    .mem_li ol span::before{
        content: '';
        display: block;
        clear: both;
        width: 3px;
        height: 3px;
        border-radius: 100%;
        background-color: #000;
        margin-top: 13px;
        }
}

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


}