@charset "utf-8";

.mainArea { position:relative; }

.mainTypo { position: absolute; text-align: right; z-index: 35; right: 7%; bottom: 0; transform: translateY(60%); -ms-transform: translateY(60%); -webkit-transform: translateY(60%);}
.mainTypo p { display:inline-block; margin:-1em auto 0; text-align:right; font-family: 'Crimson Text', serif; font-size: 7.7em; font-size: 5.25vw; line-height: 0.8em; font-weight:100; color:#4cc1e3; pointer-events: none;}

.mainCon:after {content:"";display:block;clear:both;}
.mainLink { position:absolute; width:80%; left:10%; top:50%; margin-top:-26px; z-index:2;}
.mainLink li { float:left; width:33.3%; text-align:center;}
.mainLink li a { position:relative; display:inline-block; padding:0 0.8em 0 0.5em; font-family: 'Playfair Display', serif; font-size:2.5em; line-height:1.6em; font-style:italic; border-bottom:1px solid rgba(255, 255, 255, 0.5); -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;}
.mainLink li a .line{ position:absolute; right:0; bottom:0; width:10px; height:1px; background:url(../images/bg/white_50.png); transform: translate(0, -3px) rotate(45deg); -ms-transform: translate(0, -3px) rotate(45deg); -webkit-transform: translate(0, -3px) rotate(45deg); }
.mainLink li a:hover { margin-left:0.5em;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto; width:100%; max-width:970px;height:0}
#hd_pop h2, .sound_only {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

@media  (max-width: 1480px){
.mainArea { }

}

@media  (max-width: 1024px){
.mainArea { width:100%; left:0;}
.mainLink { margin-top:-3.2vw; }
.mainLink li a {  padding:0 0.8em 0 0.5em; font-size:3.5vw; line-height:1.8em;}
.mainLink li a .line{  width:6px; transform: translate(0, -1.8px) rotate(45deg); -ms-transform: translate(0, -1.8px) rotate(45deg); -webkit-transform: translate(0, -1.8px) rotate(45deg); }

.mRoom_arrow_inner {width:55%;}
.mRoom_arrow_inner a {width:50%; height:50px; font-size:1.8em;}

}


@media  (max-width: 768px){

}

@media  (max-width: 560px){
}

.block1910 {display:none;}
    .aboutArea {
        width: 100%;
        background: url('/html/images/common/aboutarea_bg.jpg') no-repeat top center;
        background-size: contain;
    }
    .aboutArea > .Con01 {
        width: 100%;
        position: relative;
        text-align: center;
        padding: 73px 0;
        background:
    }
    .aboutArea > .Con01 >img {
        max-width: 100%;
    }
    .aboutArea > .Con01 > .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 100;
        background: rgb(255,255,255,1);
        max-width: 100%;
        width: 450px;
        height: 300px;
        box-sizing: border-box;
        padding: 50px 30px 30px 30px;
        text-align: center;
        overflow: hidden;
        border-radius: 20px;
    }
    .aboutArea > .Con01 > .box span:first-child {
        color: #8e8e8e;
        font-size: 13px;
    }
    .aboutArea > .Con01 > .box span:last-child {
        color: #8e8e8e;
        font-size: 13px;
    }
    .aboutArea > .Con01 > .box h1 {
        color: #28364a;
        font-size: 35px;
        padding: 20px 0;
    }
    .aboutArea > .Con01 > .box p {
        font-size: 15.5px;
        line-height: 25px;
        padding: 10px 0;
    }
    .aboutArea > .Con02 {
        position: relative;
        width: 100%;
        text-align: center;
        padding-bottom: 55px;
    }
    .aboutArea > .Con02 h1 {
        color: #28364a;
        font-size: 30px;
        text-transform: uppercase;
        padding: 20px 0 30px 0;
        letter-spacing: 4px;
    }
    .aboutArea > .Con02 p {
        position: relative;
        color: #a8a8a8;
        font-size: 18px;
        line-height: 25px;
        padding-bottom: 0;
        z-index: 10;
    }
    .aboutArea > .Con02 > .img000 {
        position: relative;
        top: -110px;
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }
    .aboutArea > .Con02 > .circle {
        position: absolute;
        top: 0;
        right: 0;
    }
    .aboutArea > .Con02 > .text {
        position: absolute;
        top: 17%;
        right: 5%;
        text-align: right;
    }
    .aboutArea > .Con02 > .text h3 {
        font-size: 30px;
        padding-bottom: 40px;
        color: #494a4c !important;
    }
    .aboutArea > .Con02 > .text p {
        color: #494a4c !important;
        font-size: 16px;
    }
    .mainArea .image {
        display: block;
        max-width: 100%;
        width: 100%;
        padding: 47px 0;
    }
    .mainArea .image img {
        display: block;
        max-width: 100%;
    }
    .mainArea .title {
        width: 100%;
        text-align: center;
    }
    .mainArea .title h1 {
        color: #28364a;
        font-size: 30px;
        text-transform: uppercase;
        padding: 20px 0 30px 0;
        letter-spacing: 4px;
    }
    .mainArea .title p {
        color: #a8a8a8;
        font-size: 18px;
        line-height: 25px;
        padding-bottom: 50px;
    }
    .Con03 {
        position: relative;
        width: 100%;
        margin: 90px 0;
    }
    .Con03 .img00_04 {
        position: relative;
        width: 100%;
        max-width: 100%;
        display: block;
        z-index: 10;
    }
    .circle02 {
        position: absolute;
        top: 0;
        left: 0;
    }
    .circle03 {
        position: absolute;
        right: 0;
        bottom: 10%;
    }
    .Con04 {
        width: 100%;
        position: relative;
        text-align: center;
    }
    .Con04 img {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .Con04 h1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-transform: uppercase;
        letter-spacing: 27px;
        font-size: 50px;
        color: rgb(255,255,255,0.7);
        width: 100%;
    }

    .Con05 {
        width: 100%;
    }
    .Con05 > img {
        width: 100%;
        max-width: 100%;
    }
    .Con06 {
        width: 100%;
        padding-bottom: 20px;
    }
    .Con06 > img {
        width: 100%;
        max-width: 100%;
    }
    @media (max-width: 1910px) {
        .block1910 {display: block !important;}
        .Con04 h1 {
            line-height: 55px;
        }
    }
    @media (max-width: 1024px) {
        .aboutArea > .Con01 > .box h1 {
            font-size: 30px;
        }
        .aboutArea {
            background: none;
        }
        .circle_line {
            width: 220px !important;
        }
    }
    @media (max-width: 955px) {
        .none955 {display: none !important;}
        .aboutArea > .Con01 > .box {
            right: 0;
        }
        .aboutArea > .Con02 > .img000 {
            top: 0;
        }
    }
    @media (max-width: 770px) {
        .aboutArea > .Con01 {
            width: 100%;
            position: relative;
            text-align: center;
            padding: 0;
        }
        .aboutArea > .Con01 >img {
            max-width: 100%;
            opacity: 0.2;
        }
        .aboutArea > .Con01 > .box {
            display: block;
            max-width: 100%;
            width: 100%;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-sizing: border-box;
            padding: 0;
            margin-top: 10px;
            text-align: center;
            background: none;
        }
        .aboutArea > .Con01 > .box h1 {
            font-size: 18px;
            padding: 0;
        }
        .aboutArea > .Con01 > .box p {
            font-size: 13px;
            line-height: 18px;
        }
        .aboutArea > .Con01 > .box span { display: none;}
        .aboutArea > .Con02 h1 {
            color: #28364a;
            font-size: 16px;
            text-transform: uppercase;
            padding: 20px 0 10px 0;
            letter-spacing: 3px;
            margin: 0;
        }
        .aboutArea > .Con02 p {
            color: #a8a8a8;
            font-size: 10px;
            line-height: 12px;
            padding-bottom: 10px;
            margin: 0;
        }
        .aboutArea > .Con02 {
            position: relative;
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
            /*background:url(../images/main/m/sp_bg01.jpg)no-repeat top left -10px, 
            url(../images/main/m/sp_bg02.jpg)no-repeat top right -50px, #fff;
            background-size: contain;*/
            background:url(../images/main/m/sp_bg.jpg)no-repeat center center;
            background-size: cover;
        }
        .mainArea .title {
            width: 100%;
            text-align: center;
            padding-top: 20px;
            /*background:url(../images/main/m/sp_bg01.jpg)no-repeat top left -10px, 
            url(../images/main/m/sp_bg02.jpg)no-repeat top right -50px, #fff;
            background-size: contain;*/
            background:url(../images/main/m/sp_bg.jpg)no-repeat center center;
            background-size: cover;
        }
        .mainArea .title h1 {
            color: #28364a;
            font-size: 16px;
            text-transform: uppercase;
            padding: 20px 0 10px 0;
            letter-spacing: 2px;
            margin: 0;
        }
        .mainArea .title p {
            color: #a8a8a8;
            font-size: 12px;
            line-height: 12px;
            padding-bottom: 10px;
            margin: 0;
        }
        .Con03 {
            position: relative;
            width: 100%;
            margin: 20px 0;
        }
        .Con04 h1 {
            line-height: 25px;
            font-size: 20px;
            text-align: center;
            letter-spacing: 20px;
        }
    }