@charset "utf-8";

.list01 {}
.list01 li { font-size:1.07em; line-height:1.6em; margin-bottom:3px; text-indent:-0.65em; padding-left:1em;}
.list01 li i { display:inline-block; width:1em; text-align:center; font-style:normal; margin-left:-1em;}
.list01 li::before {content:"- ";}
.list02 {}
.list02 li { margin-bottom:1.5em; padding-left:1em;}
.list02 li i { display:inline-block; width:1em; text-align:center; font-style:normal; margin-left:-1em;}
.list02 li strong { display:block;}
@media  (max-width: 1024px){

.list01 li { font-size:0.9em; letter-spacing:-0.05em;}
}

.tab_nav {}
.tab_nav:after {content:"";display:block;clear:both;}
.tab_nav li { float:left; display:inline; margin:0; }
.tab_nav li a { }
.tab_nav li.ui-tabs-active a {color:#6d83ac; font-weight:700;}

.con_dl { }
.con_dl dt { font-size:1.2em; font-weight:600; margin-bottom:0.2em; }
.con_dl dd { line-height:1.6em; margin-bottom:1em;}

.active.con_dl dt {opacity:1; transition: all 0.5s ease 0.5s}
.active.con_dl dd {opacity:1; margin:2em 0 6em; transition: all 0.5s ease 1s}





/* 회사소개 - 오시는 길 영역 */ 
#map { /* 오시는길 링크 지점 */
    position: absolute;
    top: -110px;
    left: 0;
}
.map_dl { 
    position:relative; z-index:2; max-width: 1450px; margin: 200px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.title-box p {
    color: #000;
    font-size: 20px;
    line-height: 1.5;
}
.title-box .sub_tit {
    font-family: 'pret-sb';
    color: var(--main-green);
    margin-bottom: 30px;
    line-height: 1;
}
.title-box .tit {
    font-size: 50px;
    margin-bottom: 70px;
    line-height: 1;
}

.mapCon { 
    display: flex;
}

.map-text {
    text-align: left;
    padding: 80px 50px;
    background-color: var(--main-green);
    color: #fff;
    line-height: 1.7;
    position: relative;
}

.map-name {
    font-size: 18px;
    font-family: 'pret-sb';
}
.map-tel {
    font-size: 30px;
    font-family: 'pret-sb';
}
.map-tel-num {
    color: #fff;
    margin-left: 10px;
}
.map-line {
    background-color: #fff;
    width: 0;
    height: 1px;
    margin: 42px 0 50px;
    transition: width 1s ease-in-out;
}
.map-line.active {
    width: 100%;
}

.map-notice {
    font-size: 17px;
}

.map-text .map-sns-box {
    position: absolute;
    right: 40px;
    bottom: 30px;
    gap: 25px;
}
.map-sns-box a.sns-icon img {
    width: 25px;
    height: 25px;
}

.mapFrame { 
    position:relative; 
    width:46.875vw; height:36.45vw;
    background:#ddd; 
    border:1px solid #eee; overflow:hidden; 
}
.mapFrame iframe {position:absolute; width:200%; height:200%; left:-50%; top:-20%; opacity:0; }
.active .mapFrame iframe { opacity:1; top:-50%; transition: all 0.5s ease 0.5s;}


@media  (max-width: 1200px){

    .title-box .sub_tit {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .title-box .tit {
        font-size: 36px;
        margin-bottom: 12.5vw;
    }
    .title-box p {
        font-size: 16px;
    }
}

@media (max-width:1024px) {
    .mapCon {
        flex-direction: column;
        width: 100%;
    }
    .mapCon > div {
        width: 100%;
    }
}

@media (max-width:768px) {
    .map_dl {
        flex-direction: column;
        margin: 0 auto 80px;
    }
    .map_dl .title-box {
        padding: 80px 0 0;
    }
    .title-box p {
        margin-bottom: 30px;
    }
    .title-box .sub_tit {
        font-size: 10px;
        margin-bottom: 10px;
    }
    .title-box .tit {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .map-text {
        padding: 50px 10vw;
    }
    .map-name {
        font-size: 15px;
    }
    .map-tel {
        font-size: 25px;
    }
    .map-tel-num {
        color: #fff;
        margin-left: 10px;
    }
    .map-line {
        background-color: #fff;
        height: 1px;
        margin: 42px 0 50px;
    }
    .map-notice {
        font-size: 15px;
    }

    .map-text .map-sns-box {
        position: static;
        margin-top: 20px;
        gap: 22px;
    }
    .map-sns-box a.sns-icon img {
        width: 23px;
        height: 23px;
    }

    .mapFrame {
        height: 100vw;
        max-height: 400px;
    }
    
}

@media (max-width: 370px) {
    .map-tel {
        font-size: 22px;
    }
}

/* 회사소개 - 회사 개요 */
.overview-cont {
    display: flex;
    justify-content: space-between;
    gap: 140px;
    margin: 0 auto;
    padding: 200px 14.6vw;
    height: 100vh;
    background: url(/html/images/about/overview-bg.jpg) no-repeat center/cover;
}
.overview-cont .title-box {
    text-align: center;
}
.overview-cont .ov-img {
    max-width: 40vw;
}
.overview-cont  .ov-list {
    min-width: 60%;
}
.ov-list dt {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 27px;
    font-family: 'pret-eb';
}
.ov-list dd {
    font-size: 20px;
    line-height: 2.2;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    border-left: 1px solid #707070;
}
.ov-list dd b {
    display: inline-block;
    width: 97px;
    font-size: 23px;
    margin-right: 30px;
}
.ov-list dd span {
    font-size: 20px;
}
.ov-list dd::before {
    content: "";
    background: #569A71;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    margin-left: -5px;
    margin-right: 25px;
}

@media (max-width:1024px){
    .overview-cont {
        gap: 70px;
        padding: 200px 7.6vw;
    }
    .overview-cont .ov-img {
        display: none;
    }
}

@media(max-width:768px) {
   .overview-cont {
        height: auto;
        flex-direction: column;
        gap: 0;
        padding: 80px 10vw 80px 5vw;
        background: url(/html/images/about/m/overview-bg.jpg) no-repeat center/cover;
   } 
   .ov-list dt {
        font-size: 20px;
        letter-spacing: 0;
        margin-bottom: 25px;
    }
    .ov-list dd b {
        width: 75px;
        font-size: 17px;
        margin-right: 15px;
    }
    .ov-list dd span {
        font-size: 15px;
    }
}

@media (max-width:409px) {
    .ov-list dd b {
        width: 63px;
        font-size: 16px;
    }
    .ov-list dd span {
        font-size: 14px;
    }
}

@media (max-width:370px) {
    .ov-list dt {
        font-size: 18px;
    }
    .ov-list dd b {
        width: 58px;
        font-size: 14px;
    }
    .ov-list dd span {
        font-size: 12px;
    }
}



/* room */
.roomCon { position:relative; }
.roomCon01 { margin-top:10%; padding-top:30px; text-align:right;}
.room_reser { position:absolute; display:inline-block; left:0; top:0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; z-index:2;}
.room_reser:hover { left:10px;}
.room01_01 { position:relative; width:96%; max-width:1327px; vertical-align:top; z-index:1;}


.roomCon02 { margin:0; text-align:center;}
.room02_01 { margin:6% 0;}
.room02_01 img { width:70%; max-width:500px; vertical-align:top;}
.room02_03 { margin:6% 0; font-size:1.38em;line-height:2em; color:#919191; }

.roomCon03 { padding-top:8%; margin-bottom:8%;}
.room03_01 { position:absolute; width:100%; height:45%; left:0; top:0; background:#d3d3d3; z-index:1; }
.room03_02 { position:relative; width:92%; max-width:1440px; margin:0 auto; z-index:2}
.room03_03 { position:relative; font-size:6.9em; font-weight:600; line-height:0.8em; color:#000; text-transform:uppercase; letter-spacing:0.2em; padding-left:0.2em; margin-top:-0.44em; text-align:center; z-index:2;}

@media  (max-width: 1720px){
.room02_03 { font-size:1.6vw; line-height:1.5em; }
.room03_03 { font-size:4.5vw; }
}

@media  (max-width: 1024px){
.roomFa {font-size:0.9em; line-height:1.5em;}

.room_reser img { width:150px;}
.room02_03 { font-size:2.4vw;}
.room03_03 { font-size:7vw; }
}

/* roomPre */
.roomPre_01 { width:90%; max-width:1600px; margin:0 auto 5%; padding:3% 10%; background:url(../images/room/img01.jpg) right center no-repeat; background-size: cover !important;}
.roomPre_01 p { font-size:1.25em; line-height:1.5em; color:#000; margin-bottom:0.5em;}
.roomPre_01 .btn_scroll { display:inline-block; font-size:14px; line-height:1em; color:#fff; padding:8px; background:#898989; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.roomPre_01 .btn_scroll:hover { padding:8px 16px;}
.roomPre { position:relative; float:left; }
.roomPre_list { position:absolute; width:70%; height:100%; left:24%; top:0; z-index:2;}
.roomPre_list a { position:absolute; display:block; width:9.2%; height:13%; margin:-4% 0 0 -4.7%; background:#000; color:#fff; opacity:0; filter: alpha(opacity=0;);}

.roomPre_list .roomNav01 { left:34.8%; top:32.2%;}
.roomPre_list .roomNav02 { left:46.6%; top:32.1%;}
.roomPre_list .roomNav03 { left:58.3%; top:32.0%;}
.roomPre_list .roomNav04 { left:69.6%; top:30.3%;}
.roomPre_list .roomNav11 { left:12.5%; top:30.8%;}

.roomPre_list02 { position:absolute; width:70%; height:100%; left:20%; top:0; z-index:2; }

@media  (max-width: 1280px){
}

@media  (max-width: 1024px){
.roomPre_01 { width:96%; max-width:1600px; margin:0 auto 5%; padding:3%; background:url(../images/room/m/img01.jpg) right center no-repeat; background-size: cover !important;}
.roomPre_01 p { font-size:0.9em; line-height:1.3em; text-shadow:1px 1px rgba(255, 255, 255, 0.5); }
.roomPre_01 .btn_scroll { font-size:12px;}
.roomPre_list a { width:11%; height:18%; margin:-7% 0 0 -5.5%;}


.roomPre_list {width:100%; left:0;}
}

/* special */
.spCon { position:relative; margin-bottom:10%;}
.spCon:after {content:"";display:block;clear:both;}
.spCon01, .spCon02 { margin-bottom:0;}
.sp01_01, .sp01_02 { float:left; width:50%;}
.sp01_02 { margin-top:4%;}
.sp_text { width:50%; margin:0 0 10% 50%;}
.sp_text02 { margin-top:3%;}
.sp_text dt {font-size:3.85em; line-height:1.5em; color:#000; letter-spacing:0.02em;}
.sp_text dt:before {content:"";display:block; height:45px; width:1px; background:#a4a4a4; margin:1.1em 0 0.7em;}
.sp_text dt:after {content:"";display:block; height:1px; width:14px; background:#666; margin:0.1em 0 0.5em;}
.sp_text dd { font-size:1.15em; line-height:1.5em; color:#333;}
.sp_text dd p { font-size:1.33em; color:#000; font-weight:500; margin-bottom:2em;}
.sp02_01 { position:relative; display:block; width:36.8%; vertical-align:top; margin:0 auto; z-index:1; }
.sp02_02 { position:absolute; width:100%; left:50%; top:50%; -ms-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center; font-size:6.9em; font-size:4.8vw; font-weight:600; line-height:1em; text-transform:uppercase; color:#000; letter-spacing:0.2em; padding-left:0.2em; opacity:0.7; filter: alpha(opacity=70;); z-index:2;}

@media  (max-width: 1024px){

.sp_text { width:94%; margin:0 auto 10%;}
.sp_text dt { font-size:2.4em;}
.sp_text dt:before {height:30px;}
.sp_text dt:after { width:14px; margin:0.2em 0 0.5em;}
.sp_text dd { font-size:1em; word-break: keep-all;}
.sp_text dd br.pc {display: none;}
.sp_text dd p { font-size:1.45em; margin-bottom:1em;}
.sp02_02 { font-size:6vw;}



}

@media  (max-width: 640px){
}


/* tour */
.tourList {  margin-bottom:5%; }
.tourList:after {content:"";display:block;clear:both;}
.tourList li { float:left; width:46.68%; margin-left:2.64%;}
.tourList li:nth-child(3n+1) { margin-left:0;}
.tourList li.clear { float:none; width:100%; margin-left:0;}
.tourList li img { width:100%; vertical-align:top;}
.tourList dl { padding:3% 0 6%; }
.tourList dt { font-size:2em; line-height:1.5em; letter-spacing:-0.05em; font-weight:200;}
.tourList dt strong { font-weight:400;}
.tourList dt .line { display:block; width:48px; height:1px; background:#000; margin:0.8em 0 0.5em; }
.tourList dd { font-size:1.07em; line-height:1.6em; color:#666;}
.tourList dd p { margin-top:1.5em;}


@media  (max-width: 1280px){

.tourList dl dd { font-size:0.95em; line-height:1.6em;}

}

@media  (max-width: 768px){
.tourList li { float:none; width:100%; margin:0;}
.tourList dl { padding:3% 0 10%; }
.tourList dt { font-size:1.5em; }
.tourList dt .line { width:36px;  margin:0.7em 0 0.5em; }
.tourList dd { font-size:1.07em; line-height:1.5em; letter-spacing:-0.05em }
.tourList dd p { margin-top:1.5em;}
}

/* reser */
.reserCon01 { margin:0 auto 5%; border-bottom:1px solid #dedede;}
.reserCon01:last-child { margin-bottom:0; border:none;}
.reser01_01 { float:left; width:30.7%; margin-bottom:6%;}
.reser_dl { float:left; width:65%; margin-left:4.3%;}
.reser_dl dt { font-size:2em; line-height:1.5em; margin-bottom:1em; }
.reser_dl dt.line { border-bottom:1px solid #999; padding-bottom:0.2em;}
.reser_dl dd { margin-bottom:6%; font-size:1.03em; overflow:hidden;}
.reser_dl dd > p {font-size:1.03em; line-height:1.8em; margin-bottom:0.5em;}
.reser_info { font-size:1.07em; line-height:1.8em;}

.reserTable { width:100%; border-collapse:collapse; border-top:1px solid #999;}
.reser .reserTable { position:relative; margin-bottom:5%;}
.roomReser { margin-bottom:10px;}
.room .reserTable { float:left; width:50%;}
.reserTable th, .reserTable td { padding:12px 2px; font-size:1em; line-height:1.5em; text-align:center; border-bottom:1px solid #999; font-weight:400;}
.reserTable th { background:#f9f9f9}
.reserTable td { background:url(../images/bg/white_50.png);}
.reserTable thead { border-bottom:2px solid #333;}
.reserTable td.type { text-align:left; padding-left:5%;}
.reser .reserTable tbody tr { overflow:hidden;}
.reser .reserTable .roomName { position:relative;}
.roomLink { position:absolute; width:2000%; height:100%; left:0; top:0; opacity:0;  filter: alpha(opacity=0;); z-index:5;}
.roomLink a { display:block; width:100%; height:100%;}
.reser .reserTable tbody tr:hover td, .reser .reserTable tbody tr:hover th {  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background:#000; color:#fff; cursor:pointer;}

.cancelTable { width:100%;  border-collapse:collapse; border-top:1px solid #999; margin:20px 0 15px;}
.cancelTable th, .cancelTable td { padding:12px 3px; font-size:1em; line-height:1.5em; text-align:center; border-bottom:1px solid #999; font-weight:400;}
.cancelTable thead { border-bottom:2px solid #333;}

.reser_frame {position:relative;  z-index:3; }
.reser_frame iframe { display:block; width:100%; height:900px; border:0; overflow-y:auto; margin:0 auto; padding:2% 0; background:#fff;}

.active .reser01_0301 {opacity:1; filter: alpha(opacity=100;); transition: all 0.5s ease 1.3s;}


@media  (max-width: 1024px){
.reser_name { font-size:0.95em; margin-bottom:5px;}
.reser_name strong { font-size:1.15em;}
.reser01_01 { float:none; width:100%; margin-bottom:0; }
.reserCon01 { width:100%; }
.reser_dl { float:none; width:100%; margin-left:0; }
.reser_dl dt {  font-size:1.5em; line-height:1.5em; margin:-1.5em 0 0.5em; padding-left:0.5em; color:#fff; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);}
.reser_dl dd { font-size:0.95em; line-height:1.6em; margin-bottom:5%;}
.reser_dl01 dd { padding-top:3%;}
.reser_dl dd > p {font-size:1em; line-height:1.8em; margin-bottom:0.5em;}
.reser_dl dd.reser_info { font-size:1em; line-height:1.6em;}
.room .reserTable { width:100%; margin-bottom:-1px;}
.reser .reserTable thead { border-bottom:2px solid #555;}
.reserTable th, .reserTable td, .cancelTable th, .cancelTable td { padding:10px 1px; font-size:0.85em; letter-spacing:-0.05em; line-height:1.5em;}
}


/*  commnuity */
.boardCon { position:relative; width:80%; max-width:1440px; margin:0 auto;}
.boardImg {  width:100%; margin:5% auto;  z-index:1;}
.borderCon { position:relative; width:56%; height:calc(100vh - 180px); left:41.5%; top:130px; background:url(../images/bg/white_70.png); z-index:3;}
.board_frame { display:block; width:100%; margin:0 auto; padding:2em; }


@media  (max-width: 1280px){

.boardCon { width:92%;}

}

@media  (max-width: 1024px){
.boardCon { width:94%;}
}


@media  (max-width: 768px){


}


@media  (max-width: 560px){



}

@media  (max-width: 480px){


}


@media  (max-width: 380px){


}
