/**
* OLYM Cascading Style Sheets
* File Name : main.css
* Description : 메인 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2022.08.04
* Update : 2022.08.07
* Copyright(c) 2022 OLYM Communications. All Rights Reserved.
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.section_title p { color: #7e7e7e; font-size: 18px; padding: 20px 0 50px 0;}
.h_title {font-family: 'Pretendard'; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1em; font-size: 50px; color: #000;}
.h_title span { font-weight: 600; color: #233976;}

/* quick */
.quick { position: fixed; top: 50%; right: 0; transform: translate(0, -50%); z-index: 1000;}
.quick ul { width: 100px;}
.quick ul li { height: 120px; display: flex; justify-content: center;}
.quick ul li:nth-child(1){ background-color: rgb(183, 150, 92, 0.95);}
.quick ul li:nth-child(2){ background-color: rgb(56, 71, 127, 0.95);}
.quick ul li:nth-child(3){ background-color: rgb(18, 25, 52, 0.95);}
.quick ul li a { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; font-weight: 600; }
.quick ul li a span { line-height: 1.2em;}
.quick ul li a .num { font-family: 'BareunBatang'; font-size: 50px; line-height: 1em;}
.quick ul li a i { font-size: 30px; margin-bottom: 5px;}


/* main */
#main { position: relative; height: 100vh; background: url("/project/design/main2/img_main_bg.jpg") no-repeat center / 100% 100%; animation:bg_mo 3s ease;}

@keyframes bg_mo {
    from { background-size: 110% 110%;}
    to { background-size: 100% 100%;}
}

#main .main_section {position:absolute;	right:15%;	top:28%; }
#main .main_section .main_text h2 { font-size: 56px; padding: 35px 0;}
#main .main_section .main_text .p_desc1 { font-size: 24px; font-weight: 700; color: #000;}
#main .main_section .main_text .p_desc2 { font-size: 18px; color: #2a3875; line-height: 1.6em;}

/* section01 */
.section01 { background: url("/project/design/main2/img_sec1_main.png") no-repeat center top / cover; padding: 100px 0;}
.section01 .section_title { text-align: center;}
.section01 .swiper2 { overflow: hidden;}
.section01 .swiper2 .swiper-pagination { bottom: -10px;}
.section01 .img_wrap { padding-top: 20px;}
.section01 .img_wrap .img_box { width: 100%;}
.section01 .img_wrap .img_box .img {border-top-right-radius: 60px; overflow: hidden; transition: all ease 0.3s;}
.section01 .img_wrap .img_box .img img { width: 100%;}
.section01 .img_wrap .img_box:hover .img { box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.1);}
.section01 .img_wrap .img_box .text_box { padding: 50px 45px;}
.section01 .img_wrap .img_box .text_box .title { font-family: 'Montserrat'; font-weight: 800; font-size: 20px; color: #bb9558;}
.section01 .img_wrap .img_box .text_box h2 { font-size: 32px; font-weight: 700; color: #fff; padding:10px 0 20px 0;}
.section01 .img_wrap .img_box .text_box p { font-size: 18px; color:rgba(255, 255, 255, 0.7); line-height: 1.6em;}
.section01 .img_wrap .img_box .text_box ul > li {font-size: 18px; color:rgba(255, 255, 255, 0.7); line-height: 1.6em;}
.section01 .img_wrap .img_box .text_box ul > li::before { content: "· ";}

/* section02 */
.section02 { position: relative; padding: 60px 0; overflow: hidden;}
.section02 .section02_mark { position: absolute; top: 140px; right:15%; opacity:0.3;}
.section02 .wrap_box2 { display: flex; align-items:flex-end; gap: 50px;}
.section02 .room_type { width: 65%;}
.section02 .room_type .img_box { display: flex;gap: 50px;}
.section02 .room_type p { font-size: 15px; color: #7e7e7e; padding-top: 20px;}

/* swiper */
.section02 .swiper { position: relative; overflow: hidden; margin-top: 50px; transform: translate(160px, 0);}
.section02 .swiper .swiper-slide .img { overflow: hidden;}
.section02 .swiper .swiper-slide .img img { width: 100%; transition: all ease 0.5s;}
.section02 .swiper .swiper-slide .img img:hover { transform: scale(1.1);}
.section02 .swiper .swiper-slide .img_text { padding: 45px 10px;}
.section02 .swiper .swiper-slide span { font-family: 'Montserrat'; font-weight: 500; color: #bb9558;}
.section02 .swiper .swiper-slide h3 { padding: 10px 0 20px 0; font-size: 24px; font-weight: 800;}
.section02 .swiper .swiper-slide p { font-size: 17px; color: #7e7e7e;}
.section02 .swiper .scroll_box { width: calc(100% - 320px); position: relative;}
.section02 .swiper .swiper-scrollbar { width: 100%; left: 0; height: 3px;}
.section02 .swiper .swiper-scrollbar-drag { background-color: #bb9558;}

/* section03 */
.section03 {margin-top: 100px; margin-bottom: 130px; display: flex; justify-content: space-between; align-items: center;}
.section03 .left_box { padding-bottom: 30px;}
.section03 .left_box .p_desc0 { font-family: 'Montserrat'; font-weight: 900; font-size: 18px; color: #bb9558; padding: 0 0 20px 0;}
.section03 .left_box .h_title span { display: block;}
.section03 .left_box .section_title p { width: 80%;}
.section03 .left_box > ul { display: flex; justify-content: space-between; gap: 20px;}
.section03 .left_box > ul > li > img { width: 100%; max-width: 116px;}

/* section04 */
.section04 .section_title { text-align: center;}
.section04 > ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 50px;}
.section04 > ul > li { width: 100%; display: flex;}
.section04 > ul > li .box_in {width: 100%; border: 1px solid #e4e4e4; border-radius: 30px; padding: 40px 40px 75px 40px; position: relative; transition: all ease 0.3s;}
.section04 > ul > li .box_in:hover { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);}
.section04 > ul > li .box_in .img { position: absolute; top: 40px; right: 40px;}
.section04 > ul > li .box_in h2 { font-size: 24px; color: #000; font-weight: 800; line-height: 1.2em;}
.section04 > ul > li .box_in .p_desc3 { color: #324880; font-weight: 600; padding: 15px 0;}
.section04 > ul > li:nth-child(even) .p_desc3 { color: #bb9558;}
.section04 > ul > li .box_in .p_desc2 { color: #8a8a8a;}
.section04 > ul > li .box_in .btn_in { position: absolute; bottom: 35px; right: 40px; display: flex; justify-content: end; gap: 20px;}
.section04 > ul > li .box_in .btn_ar1 { display: inline-block; color: #8a8a8a; font-weight: 700; font-size: 15px; line-height: 1em;} 
.section04 > ul > li .box_in .btn_ar1 i { display: inline-block; text-indent: -9999px; width: 40px; height: 16px; background: url("/project/design/main2/icon_ar_f1.png") no-repeat center / 100%; transition: all ease 0.3s; transform: translate(0,5px);}
.section04 > ul > li .box_in .btn_ar1:hover { color: #000;} 
.section04 > ul > li .box_in .btn_ar1:hover i {background: url("/project/design/main2/icon_ar_f2.png") no-repeat center / 100%;}
.section04 h4 { font-size: 24px; color: #000; font-weight: 800; line-height: 1.2em; padding: 50px 0 20px 0;}
.section04 .p_desc4 { color: #7e7e7e; font-size: 15px;padding: 20px;}

.table_type1 { overflow-x:auto;} 
.table_type1 table, .table_type1 th, .table_type1 td { border:1px solid #e4e4e4; border-top:none; border-collapse:collapse; font-size:inherit;}
.table_type1 table { width:100%;}
.table_type1 th { padding:15px;}
.table_type1 thead th { color:#fff; background:#324880; border:1px solid rgba(255, 255, 255, 0.1);}
.table_type1 tbody th { color: #324880;}
.table_type1 th.bg2 { background: #bb9558;}
.table_type1 td { padding:15px; text-align:center;}
.table_type1 td.co1 { color: #dd2a2a; font-size: 1.125em; font-weight: 600;}

/* section05 */
.section05 { margin-top: 70px; padding: 90px 0; background-color: #f8f8f8;}
.section05 .wrap_box2 { display: flex; gap: 60px; align-items: center;}
.section05 .map { width: 50%;}
.section05 .contact li + li { border-top: 1px solid #efefef;}
.section05 .contact li { display: flex; align-items: center; padding: 30px; gap: 20px;}
.section05 .contact li .img { width: 70px; height: 70px; background-color: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center;}
.section05 .contact li .desc h2 {font-size: 20px; color: #000; font-weight: 700;}
.section05 .contact li .desc p { color: #7e7e7e; padding-top: 5px;}

#footer .wrap_box {width: 1600px;}

@media all and (max-width:1680px) {
    .h_title {font-size: 40px; }
    #main .main_section .main_text h2 { font-size: 46px; padding: 15px 0;}
    #main .main_section .main_text .p_desc1 { font-size: 22px;}
    
    .section01 { padding: 80px 0;}
    .section01 .img_wrap { padding-top: 20px;}
    .section01 .img_wrap .img_box .img {border-top-right-radius: 40px;}
    .section01 .img_wrap .img_box .text_box { padding: 40px 35px 20px 35px;}
    .section01 .img_wrap .img_box .text_box .title { font-size: 18px;}
    .section01 .img_wrap .img_box .text_box h2 { font-size: 28px;}
    
    .section02 .room_type .img_box {gap: 30px;}
    .section02 .room_type .img_box img { width: 100%;}
    .section02 .swiper { transform: translate(5%, 0);}
    .section02 .swiper .scroll_box { width: 90%;}
    
    .section03 { gap: 40px;}
    .section03 .left_box { width: 50%;}
    .section03 .right_box { width: 50%;}
    .section03 .right_box img { width: 100%;}
    
    .section04 > ul { gap: 20px;}
    .section04 > ul > li .box_in {padding: 30px 30px 65px 30px;}
    .section04 > ul > li .box_in .img { top: 30px; right: 30px;}
    .section04 > ul > li .box_in h2 { font-size: 22px; }
    .section04 > ul > li .box_in .btn_in { bottom: 25px; right: 30px;}
    .section04 h4 { font-size: 22px;}

    .section05 .wrap_box2 { gap: 40px;}

    #footer .wrap_box {width: 90%;}
}

@media all and (max-width:1460px) {
    .section02 .section02_mark { top: 80px;}
}

@media all and (max-width:1024px) {    
    .h_title {font-size: 32px; }
    .section_title p { font-size: 16px; padding: 10px 0 30px 0;}

    #main { height:600px;}
    #main .main_section {right:5%;}
    #main .main_section .main_text h2 { font-size: 36px;}
    #main .main_section .main_text .p_desc1 { font-size: 18px;}
    #main .main_section .main_text .p_desc2 { font-size: 16px;}
    
    .section01 { padding: 60px 0;}
    .section01 .img_wrap { padding-top: 0;}
    .section01 .img_wrap .img_box .img {border-top-right-radius: 30px;}
    .section01 .img_wrap .img_box .text_box { padding: 20px 15px 0 15px;}
    .section01 .img_wrap .img_box .text_box .title { font-size: 14px;}
    .section01 .img_wrap .img_box .text_box h2 { font-size: 22px; padding: 5px 0 10px 0;}
    .section01 .img_wrap .img_box .text_box p { font-size: 16px; }
    .section01 .img_wrap .img_box .text_box ul > li {font-size: 16px;}
    
    
    .section02 { padding: 40px 0;}
    .section02 .section02_mark { top: 60px;}
    .section02 .room_type .img_box {gap: 20px;}

    .section02 .swiper .swiper-slide .img_text { padding: 30px 10px;}
    .section02 .swiper .swiper-slide span { font-size: 14px;}
    .section02 .swiper .swiper-slide h3 { padding: 5px 0 10px 0; font-size: 20px;}
    .section02 .swiper .swiper-slide p { font-size: 16px;}

    .section03 {margin-top: 50px; margin-bottom: 80px;}
    .section03 { gap: 20px;}    
    .section03 .left_box { width: 40%;}
    .section03 .left_box .p_desc0 { font-size: 15px; padding: 0 0 20px 0;}
    .section03 .right_box { width: 60%;}
    
    .section04 > ul { grid-template-columns: 1fr 1fr;}

    .table_type1 th { padding:10px;}
    .table_type1 td { padding:10px;}
    
    .section05 { margin-top: 40px; padding: 60px 0;}
    .section05 .wrap_box2 { gap: 30px;}
    .section05 .contact li { padding: 20px;}
    .section05 .contact li .desc h2 {font-size: 18px;}
}

@media all and (max-width:800px) {    
    .quick { display: none;}
    .h_title {font-size: 24px; }
    .section_title p { font-size: 14px; padding: 5px 0 30px 0;}

    #main { height:450px;}
    #main .main_section { top: 24%; right:3%; width: 50%;}
    #main .main_section .main_text h2 { font-size: 26px; padding: 10px 0 15px 0;}
    #main .main_section .main_text .p_desc1 { font-size: 16px;}
    #main .main_section .main_text .p_desc2 { font-size: 14px;}
    #main .main_section .main_text .p_desc2 br { display: none;}
    
    .section01 { padding: 30px 0;}
    .section01 .img_wrap { padding-top: 0;}
    .section01 .img_wrap .img_box .img {border-top-right-radius: 30px;}
    .section01 .img_wrap .img_box .text_box { padding: 20px 5px;}
    .section01 .img_wrap .img_box .text_box .title { font-size: 12px;}
    .section01 .img_wrap .img_box .text_box h2 { font-size: 18px; padding: 2px 0 5px 0;}
    .section01 .img_wrap .img_box .text_box p { font-size: 13px; line-height: 1.4em;}
    .section01 .img_wrap .img_box .text_box ul > li {font-size: 13px; line-height: 1.4em;}
    
    .section02 .room_type p { font-size: 13px; padding-top: 10px;}

    .section02 .swiper .swiper-slide .img_text { padding: 20px 5px;}
    .section02 .swiper .swiper-slide span { font-size: 12px;}
    .section02 .swiper .swiper-slide h3 { padding: 2px 0 5px 0; font-size: 18px;}
    .section02 .swiper .swiper-slide p { font-size: 13px;}

    .section03 {margin-top: 30px; margin-bottom: 60px;}
    .section03 .left_box .p_desc0 { font-size: 12px; padding: 0 0 10px 0;}
    .section03 .left_box .section_title p { width: 100%;}
    
    .section04 > ul { gap: 10px;}
    .section04 > ul > li .box_in {padding: 20px 20px 50px 20px;}
    .section04 > ul > li .box_in .img { top: 30px; right: 30px;}
    .section04 > ul > li .box_in h2 { font-size: 18px; }
    .section04 > ul > li .box_in .p_desc3 { font-size: 13px; padding: 5px 0;}
    .section04 > ul > li .box_in .p_desc2 { font-size: 13px;}
    .section04 > ul > li .box_in .btn_in { bottom: 20px; right: 20px;}
    .section04 h4 { font-size: 18px; padding: 40px 0 10px 0;}
    .section04 .p_desc4 { font-size: 13px; padding: 10px;}
    
    .table_type1 table, .table_type1 th, .table_type1 td { font-size:13px;}
    
    .section05 { padding: 40px 0;}
    .section05 .wrap_box2 { gap: 20px;}
    .section05 .map { width: 60%;}
    .wrap_map { height: 250px !important;}
    .section05 .contact li { padding: 10px;}
    .section05 .contact li .img { width: 50px; height: 50px; border-radius: 10px;}
    .section05 .contact li .img img { transform: scale(0.7);}
    .section05 .contact li .desc h2 {font-size: 16px;}
    .section05 .contact li .desc p { font-size: 13px;}
}

@media all and (max-width:500px) {    

    #main { height:670px; background: url("/project/design/main2/img_main_bg.jpg") no-repeat 30% top / auto 100%;}

    @keyframes bg_mo {
        from { background-size: auto 110%;}
        to { background-size: auto 100%;}
    }

    #main .main_section { top: 18%; right:4%;}
    #main .main_section .main_text h2 { font-size: 28px; padding: 10px 0 15px 0;}
    #main .main_section .main_text .p_desc1 { font-size: 14px;  color: #2a3875; font-weight: 500; letter-spacing: -0.02em;}
    #main .main_section .main_text .p_desc2 { display: none;}

    .section01 { padding: 40px 0;}
    .section01 .section_title .h_title span { display: block;}
    .section01 .wrap_box2 { width: 80%;}
    
    .section02 .wrap_box2 { flex-direction: column-reverse; gap: 0; align-items: center;}
    .section02 .wrap_box2 .section_title { text-align: center;}
    .section02 .room_type { width: 100%; padding-bottom: 30px;}
    .section02 .room_type p { text-align: center; padding: 10px 20px;}
    
    .section02 .swiper { margin-top: 0;}
    
    .section03 {flex-direction: column;}
    .section03 .left_box { width: 100%; text-align: center;} 
    .section03 .right_box { width: 100%;} 

    .section04 .section_title .h_title span { display: block;}
    .section04 > ul { grid-template-columns: 1fr;}

    .section05 .wrap_box2 {flex-direction: column;}
    .section05 .map { width: 100%;}
}