
/* about sec2 */
#about .sec2 .fbox {
    border-top: 1px solid #c4c0b6;
}
#about .sec2 .fbox > div {
    padding: 7rem 5rem;
}
#about .sec2 .fbox .lft {
    /* border-right: 1px solid #c4c0b6; */
    text-align: center;
}
#about .sec2 .fbox .storyBox {
    max-width: 750px;
}
@media (max-width:992px){
    #about .sec2 .fbox {
        flex-wrap: wrap;
    }
    #about .sec2 .fbox > div {
        width: 100%;
        padding: 5rem;
    }
    #about .sec2 .fbox .lft {
        order: 1;
        padding-bottom: 0px;
    }
    #about .sec2 .fbox .rt {
        order: 2;
        text-align: center;
    }
}
/* aboutLove */
.aboutLove strong {
    display: block;
}
/* .aboutLove {
    display: flex;
    align-items: flex-start;
}
.aboutLove strong {
    width: 90px;
    position: relative;
    padding-right: 15px;
}
.aboutLove strong:after {
    content: "";
    position: absolute;
    right: 8px;
    width: 1px;
    background-color: #cecece;
    height: 60%;
    top: 20%;
}
.aboutLove span {
    width: calc(100% - 90px);
    padding-left: 10px;
    text-align: left;
}
@media (max-width:768px){
    .aboutLove strong {
        width: 80px;
        padding-right: 10px;
    }
    .aboutLove strong:after {
        right: 5px;
    }
} */

/* menuList */
.menuList .costInfo .top {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.menuList .costInfo .top:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border-bottom: 1px dashed #c4c0b6;
}
.menuList .costInfo .top .f_pr {
    font-weight: 300;
}
.menuList .costInfo .top .cost {
    font-weight: 300;
}
.menuList .costInfo .top span {
    display: inline-block;
    z-index: 3;
    background-color: #f0eee8;
    white-space: nowrap;
}
.menuList .costInfo .ko {
    font-weight: 300;
    /* color: #999; */
}
@media (max-width:500px){
    .menuList {
        width: 100%;
    }
}

/* tabWrp */
.tabWrp .tabs {
    border-left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: max-content;
    border-radius: 0px;
    margin: 0 auto;
    gap: 20px;
}
.tabWrp .tabs .tab {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    font-weight: 300;
}
.tabWrp .tabs .tab.active {
    color: #000;
    border-bottom-color: #000;
    font-weight: 400;
}
.tabWrp .tabs .tab.active img {
    filter: invert(1);
}
.tabWrp .tabCon {
    height: 0px;
    overflow: hidden;
}
.tabWrp .tabCon.active {
    height: auto;
}
@media (max-width:768px){
    .tabWrp .tabs {
        flex-wrap: wrap;
        row-gap: 5px;
        column-gap: 10px;
    }
}

/* proList */
.proList .item {
    border: 1px solid rgba(0,0,0,0.5);
    padding: 5rem 1.5rem;
    position: relative;
}
.proList .item .step {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 3;
}
.proList .item .step span {
    display: inline-block;
    line-height: 1em;
    padding: 5px 15px;
    border-radius: 50px;
    background-color: #00442c;
    color: #fff;
}
.proList .item .txt h6 {
    line-height: 1.4em;
    letter-spacing: -0.04em;
}
@media (min-width:767px){
    .proList + .proList {
        margin-top: 5rem;
    }
    .proList > li {
        position: relative;
        padding-top: 30px;
    }
    .proList > li:not(:first-child):before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 1px;
        background-color: rgba(10, 10, 10, 0.2);
    }
    .proList > li:not(:last-child):after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 1px;
        background-color: rgba(10, 10, 10, 0.2);
    }
    .proList .item:after {
        content: "";
        position: absolute;
        top: -30px;
        width: 1px;
        height: 30px;
        left: 50%;
        background-color: rgba(10, 10, 10, 0.2);
    }
    .proList .item:before {
        content: "";
        position: absolute;
        top: -30px;
        left: 50%;
        width: 3px;
        height: 3px;
        background-color: #00442c;
        border-radius: 50%;
        transform: translate3d(-50%,-50%,0);
    }
    .proList .item .txt {
        height: 100px;
    }
}
@media (max-width:992px) and (min-width:767px){
    .proList .item .txt {
        height: 150px;
    }
}
@media (max-width:768px){
    .proList {
        position: relative;
    }
    .proList:after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: 1px;
        background-color: rgba(0,0,0,0.5);
    }
    .proList li {
        width: calc(50% - 20px);
        padding: 0;
        margin: -5% 0;
    }
    .proList li:first-child {
        margin-top: 0;
    }
    .proList li:nth-child(even) {
        margin-right: auto;
    }
    .proList li:nth-child(even):before {
        content: "";
        position: absolute;
        right: -20px;
        top: 0;
        width: 20px;
        height: 1px;
        background-color: rgba(0,0,0,0.5);
    }
    .proList li:nth-child(even) .item:before {
        content: "";
        position: absolute;
        top: 0;
        right: -21px;
        width: 5px;
        height: 5px;
        background-color: #00442c;
        border-radius: 50%;
        transform: translate3d(50%, -50%, 0);
    }
    .proList li:nth-child(odd) {
        margin-left: auto;
    }
    .proList li:nth-child(odd):before {
        content: "";
        position: absolute;
        left: -20px;
        top: 0;
        width: 20px;
        height: 1px;
        background-color: rgba(0,0,0,0.5);
    }
    .proList li:nth-child(odd) .item:before {
        content: "";
        position: absolute;
        top: 0;
        left: -20px;
        width: 5px;
        height: 5px;
        background-color: #00442c;
        border-radius: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
    .proList li .item {
        padding: 3rem 1.5rem;
    }
    .proList li .item .icon img {
        width: 30px;
    }
}

/* costInfomation */
.costInfomation {
    border-top: 1px solid #aaa;
}
.costInfomation > li {
    padding: 30px 0;
    border-bottom: 1px solid #aaa;
}
.costInfomation .top {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.costInfomation .top:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border-bottom: 2px dotted #aaa;
}
.costInfomation .top .f_pr {
    font-weight: 300;
}
.costInfomation .top .cost {
    font-weight: 500;
}
.costInfomation .top span {
    display: inline-block;
    z-index: 3;
    background-color: #f0eee8;
    padding: 0 1rem;
}
.costInfomation .ko {
    padding-left: 1.9rem;
    font-weight: 300;
    color: #666;
    margin-top: 5px;
}

/* table_basic */
.table.table_basic {
    border-top: 1px solid #333;
}
.table.table_basic tr th,
.table.table_basic tr td {
    font-size: 15px;
    font-weight: 400;
    color: #333;
    border: 1px solid #333;
    padding: 10px;
    vertical-align: middle;
}
.table.table_basic tr th:first-child,
.table.table_basic tr td:first-child {
    border-left: 0px;
}
.table.table_basic tr th:last-child,
.table.table_basic tr td:last-child {
    border-right: 0px;
}
.table.table_basic thead tr th {
    font-weight: 500;
    text-align: center;
}
.table.table_basic thead tr th {
    border-bottom: 1px solid #333;
}
/* .table.table_basic thead tr th:nth-child(4), */
.table.table_basic tbody tr td:nth-child(4) {
    text-align: right;
}
.table.table_basic tbody tr th,
.table.table_basic tbody tr td:nth-child(2){
    text-align: center;
}
.table.table_basic tbody tr td .del {
    font-weight: 300;
    color: #868686;
    display: inline-block;
    padding: 0px 10px 0px 3px;
    position: relative;
}
.table.table_basic tbody tr td .del::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    background-color: #868686;
}
.table.table_basic tbody tr td .del::before {
    content: "";
    position: absolute;
    border-width: 3px;
    border-color: transparent transparent transparent #868686;
    border-style: solid;
    right: -5px;
    top: calc(50% - 3px);
}
@media (max-width:768px) {
    .table.table_basic tr th,
    .table.table_basic tr td {
        font-size: 13px;
        padding: 8px 5px;
    }
}


/* interiorList */
.interiorList > li {
    padding: 5rem 3rem;
}
.interiorList > li {
    border-bottom: 1px solid #333;
}
.interiorList > li:nth-child(1),
.interiorList > li:nth-child(2) {
    border-top: 1px solid #333;
}
.interiorList > li {
    border-left: 1px solid transparent;
}
.interiorList > li:not(:nth-child(odd)) {
    border-left-color:#333;
}
.interiorList > li .bt {
    margin-top: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (max-width:500px){
    .interiorList {
        border-top: 1px solid #333;
    }
    .interiorList > li {
        padding: 3rem 0;
        width: 100%;
        border-left: 0px solid transparent !important;
        border-right: 0px solid transparent !important;
        border-bottom: 1px solid #333 !important;
        border-top: 0px solid transparent !important;
    }
}

/* imgSet2 */
.imgSet2 .slick-slide {
    padding: 0 0 0 1px;
}

/* mbox */
.mbox {
    border: 1px solid #c4c0b6;
}
.mbox .conInfo {
    padding: 2rem;
    border-top: 1px solid #c4c0b6;
}
@media (max-width:500px){
  
	.mbox {
		margin: 0px 30px;
	}
}


/* philosophy1 */
#philosophy1 .sec1 .fbox {
    /* border-top: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding: 60px 0; */
    padding: 60px;
    background-color: #e1e0dc78;
}
#philosophy1 .sec1 .fbox .lft {
    width: 80%;
}
#philosophy1 .sec1 .fbox .rt {
    width: 20%;
}
#philosophy1 .sec1 .fbox .rt video {
    width: 300px;
}
@media (max-width:768px){
    #philosophy1 .sec1 .fbox {
        padding: 30px 20px 20px;
    }
    #philosophy1 .sec1 .fbox .lft {
        width: 100%;
    }
    #philosophy1 .sec1 .fbox .rt {
        width: 100%;
        padding-top: 20px;
    }
    #philosophy1 .sec1 .fbox .rt video {
        width: 100%;
    }
}

/* philosophyList */
.philosophyList {
    /* border-top: 1px solid #333; */
}
.philosophyList li {
    padding: 6rem 3rem;
    padding: 1.5rem 0;
    /* border-bottom: 1px solid #333; */
}
.philosophyList .top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid #333;
}
.philosophyList .bt {
    padding: 20px;
    border: 1px solid #333;
    border-top: 0px;
}

/* compList */
.compList .compItem {
    display: flex;
    position: relative;
    padding-bottom: 5rem;
}
.compList .compItem:not(:last-child):after {
    content: "";
    position: absolute;
    top: 0;
    left: 17px;
    height: 100%;
    border-left: 1px dotted #222;
    z-index: 0;
}
.compList .compItem .num {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
    border-radius: 50%;
    color: #fff;
    transform: translate3d(0, -20%, 0);
    position: relative;
    z-index: 4;
}
.compList .compItem .txt {
    width: calc(100% - 35px);
    padding-left: 15px;
}
.compList .dotted {
    position: relative;
    padding-left: 15px;
}
.compList .dotted:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #222;
    transform: translateY(-50%);
    border-radius: 50%;
}


/* foundation1 */
#foundation1 .sec3 .h_t {
    justify-content: flex-start;
    gap: 12px;
}
/* foundation3 */
#foundation3 .sec1 .fbox {
    align-items: stretch;
}
#foundation3 .sec1 .fbox .rt {
    background: url(../img/bg_green.png) center center;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width:768px){
    #foundation3 .sec1 .fbox .lft,
    #foundation3 .sec1 .fbox .rt {
        width: 100%;
    }
    #foundation3 .sec1 .fbox .rt img {
        max-width: 50vw;
    }
}