@charset "utf-8";

/* 감상하기 - 팝업 */
.view_popup_wrap{position: fixed !important; z-index: 9999; top: 100%; margin-top: 0 !important; left: 0 !important; margin-left: 0 !important; overflow-y: auto; -webkit-overflow-scrolling:touch; display:none;
    transition:top .8s ease, opacity .2s ease; opacity:0;}
.view_popup_dim{position: fixed; top:0; left:-100%; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.9); transition:left .4s ease; z-index:100;}
.view_popup_dim.popup_on{left:0;}
.view_popup_wrap.popup_on{top:0; opacity:1;}
.view_popup_wrap.on{ display: block;}
.view_popup_wrap .content_wrap{z-index: 10; transition:all .2s ease; padding-top:0; height:100%;}
/*.view_popup_wrap.opacity_off .content_wrap{padding-top:100px;}*/
.view_popup_wrap .content_wrap.opacity_off{opacity:0 !important;}
.view_popup_wrap .content_wrap .bg_wrap {position: absolute; z-index: 1; top: 0; left: 0; background-color: transparent; height: 100%;}
.view_popup_wrap .content_wrap .bg_wrap .top_bg_box{background-color:#f0eff8; height:1088px;}
.view_popup_wrap .content_wrap .bg_wrap .bottom_bg_box{background-color:#f0eff8; height:calc(100% - 1088px);}
.view_popup_wrap .content_wrap .top_con{position: fixed; top:0; left: 0; z-index: 4;}
.view_popup_wrap.site_open_wrap .content_wrap .top_con{margin-bottom: 74px;}
.view_popup_wrap .content_wrap .top_con .logo{float: left; margin: 48px 0px 0px 51px;}
.view_popup_wrap .content_wrap .fixed_btn_con{position: fixed; top:24px; right:calc( (100% - ((1060 / 1400) * (100% + 100px))) / 2  ); z-index:9;
    display: flex; flex-direction: column; align-items: center;}

[data-wv-agent="iphone"] .view_popup_wrap .content_wrap .fixed_btn_con{position: -webkit-sticky; position: sticky; width: 41px; height: 41px; float: right; top:24px; right:calc( (100% - ((1060 / 1400) * (100% + 100px))) / 2  ); z-index:9;
    display: flex; flex-direction: column; align-items: center;}

.view_popup_wrap .content_wrap .fixed_btn_con > .close_btn{position: relative; display: inline-block; width: 41px; height: 41px; background-color: #fff; box-sizing: border-box; text-align: center;
    line-height:50px; overflow: hidden; border: 2px solid #000; margin-bottom: 10px;}

[data-wv-agent="iphone"] .view_popup_wrap .content_wrap .fixed_btn_con > .close_btn{margin-bottom: 0;}

.view_popup_wrap .content_wrap .fixed_btn_con > .close_btn:before{content: ""; position: absolute; top:50%; transform:translate(-50%, -50%) rotate(45deg); left:50%; width:75px; border-bottom:1px solid #000;}
.view_popup_wrap .content_wrap .fixed_btn_con > .close_btn:after{content: ""; position: absolute; top:50%; transform:translate(-50%, -50%) rotate(-45deg); left:50%; width:75px; border-bottom:1px solid #000;}

.view_popup_wrap .content_wrap .fixed_btn_con > .top_btn{display: none; width: 14px; height: 8px; padding:20px; background-image: url('../img/port_top_arrow.png'); background-size: 14px 8px; background-position: center center; background-repeat: no-repeat;}

/*.view_popup_wrap .content_wrap .close_btn2 > a:before{content:""; position: absolute; top:50%; transform:translate(-50%, -50%) rotate(45deg); left:50%; width:20px; border-bottom:1px solid #fff; transition:all .3s;}*/
/*.view_popup_wrap .content_wrap .close_btn2 > a:after{content:""; position: absolute; top:50%; transform:translate(-50%, -50%) rotate(-45deg); left:50%; width:20px; border-bottom:1px solid #fff; transition:all .3s;}*/





.view_popup_wrap .content_wrap .top_con .close_btn img{}
.view_popup_wrap .content_wrap .content_con{}
.view_popup_wrap .content_wrap .step1,.view_popup_wrap .content_wrap .step2,.view_popup_wrap .content_wrap .step3{overflow: hidden; position: absolute; width: 100%;}

[data-wv-agent="iphone"] .view_popup_wrap .content_wrap .step1,.view_popup_wrap .content_wrap .step2,.view_popup_wrap .content_wrap .step3{overflow: visible; position: absolute; width: 100%;}

.view_popup_wrap .content_wrap .main_content_con{padding-top: 37px;}
.view_popup_wrap .content_wrap .main_content_inner{z-index: 3; transition:margin .6s ease, opacity .8s ease; margin-top:0;}
.view_popup_wrap .content_wrap .main_content_inner.popup_on{margin-top:0;}
.view_popup_wrap .content_wrap .sub_content_con{padding-top: 110px; margin-bottom: 145px;}
.view_popup_wrap .content_wrap .sub_content_inner{}

.view_popup_wrap .popup_header_con{position: static; top:0; left:0; z-index: 4;}
.view_popup_wrap .popup_header_inner{padding-left:20px;}
.view_popup_wrap .popup_header_con.fixed .popup_header_inner{background-color:rgba(5, 22, 51, 0.25);}
.view_popup_wrap .popup_header_con.fixed .popup_fixed_btn_con .popup_fixed_btn{background-color:transparent;}
.view_popup_wrap .popup_header_con.fixed .popup_fixed_title_con{display:block;}
.view_popup_wrap .popup_fixed_title_con{float:left; font-size:14px; font-size:1.4rem; line-height:20px; line-height:2.0rem; letter-spacing: 0.06em; color:#fff; font-weight:200; display:none;
    width:calc(100% - 280px); overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.view_popup_wrap .popup_fixed_btn_con{float:right; font-size:0; line-height:0; text-align: right; width:280px;}
.view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn{width:70px; height:71px; display:inline-block; vertical-align: top;
    line-height:71px; background-color:rgba(5, 22, 51, 0.25); transition: background .2s ease; text-align: center;}
.view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn img{width:16px;}
.view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn.prev img{width:9px;}
.view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn.next img{width:9px;}
.view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn.top{display:none;}
.view_popup_wrap .popup_header_con.fixed .popup_fixed_btn_con .popup_fixed_btn.top{display:inline-block;}
.view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn.top img{width:17px;}


.popup_title_desc_con {color: #fff; text-align: left;}
.popup_title_desc_con .title_con{}
.popup_title_desc_con .title_con .title{color: #fff; font-size: 25px; font-size: 2.5rem; line-height: 31px; line-height: 3.1rem; letter-spacing: -0.04em; font-weight: 400; opacity: 0; transition:all .4s .3s ease; display:none;}
.popup_title_desc_con .title_con .title.on{display:block;}
.popup_title_desc_con .title_con .title.event_on{opacity:1;}
.popup_title_desc_con .title_con .serial_no{margin-top: 20px; font-family: "Helvetica Neue"; font-size: 18px; font-size: 18px; line-height: 1.8px; line-height: 1.8rem; font-weight: 400; letter-spacing: -0.02px;}
.popup_title_desc_con .desc_con{}
.popup_title_desc_con .desc_con .name{text-transform: uppercase; color: #fff; font-size: 15px; font-size: 1.5rem; line-height: 22px; line-height: 2.2rem; letter-spacing: 0.06em; font-weight: 200; opacity: 0; transition:all .4s .4s ease; display:none;}
.popup_title_desc_con .desc_con .name.on{display:block;}
.popup_title_desc_con .desc_con .name.event_on{opacity: 1;}
.popup_title_desc_con .desc_con .desc{font-size: 17px; font-size: 1.7rem; line-height: 28px; line-height: 2.8rem; letter-spacing: -0.01em; font-weight: 100; word-break: keep-all;}
.popup_title_desc_con .desc_con .desc br{display:none;}
.popup_title_desc_con .date{font-size: 21px; font-size: 2.1rem; line-height: 27px; line-height: 2.7rem; letter-spacing: 0.04em; font-weight: 400; color:#fff; word-break: keep-all;
    position: absolute; top:0; right:0;}


/* portfolio popup */
.bottom_con_padding_ctrl{padding-left: 0; padding-right: 0;}

.view_popup_wrap .bottom_con{opacity: 0; display:none; background-color:#fff;}
.view_popup_wrap .bottom_con .bottom_contents_con{}
.view_popup_wrap .bottom_con.on{display:block;}
.view_popup_wrap .bottom_con.event_on{opacity: 1;}
.view_popup_wrap .bottom_con h3{font-size: 18px; font-size: 1.8rem; line-height: 34px; line-height: 3.4rem; letter-spacing: -0.02em; font-weight: 700;}
/*.bottom_con .process_wrap{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}*/
.bottom_con .process_wrap .text_con{font-size: 14px; font-size: 1.4rem; line-height: 22px; line-height: 2.1rem; letter-spacing: -0.02em; font-weight: 400;}
.bottom_con .notice_wrap .h_desc3{font-size: 18px; font-size: 1.8rem; line-height: 27px; line-height: 2.7rem; letter-spacing: 0; font-weight: 300;}

.bottom_con .process_wrap .img_con{position: relative; width: 50px; height: 50px; border-radius: 50%; background-color: #fff;}
.bottom_con .process_wrap .img_con img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px;}

.bottom_con .process_content_wrap{display: flex; justify-content: space-between;}
.bottom_con .process_content{position: relative;}
.bottom_con .process_content .img_con{margin-left: auto; margin-right: auto; margin-bottom: 12px;}
.bottom_con .process_content:after{content: ""; position: absolute; top: 25px; right: -8px; transform: translate(-50%, -50%); width: 7px; height: 13px;
    background-image: url('../img/view_popup_process_arrow.png'); background-size: cover; background-position: center center; background-repeat: no-repeat;}
.bottom_con .process_content:last-child:after{visibility: hidden;}

.list_style_1_con{}
.list_style_1_con li{position: relative; padding-left:13px; box-sizing: border-box; margin-bottom: 8px;}
.list_style_1_con li:before{content: ""; border-bottom: 1px solid #000; position: absolute;  top: 16px;  left: 0;  width: 5px;}
.bottom_con .list_style_1_con li:before{top:12px;}

.bottom_con .button_wrap{position: relative; text-align: center;
    font-size: 17px; font-size: 1.7rem; line-height: 25px; line-height: 2.5rem; letter-spacing: 0; font-weight: 500; color: #000;}
.bottom_con .button_wrap .button{position: relative; height: 180px; width: 180px; display: inline-block; vertical-align: middle; text-align: center;}
.bottom_con .button_wrap .button .button_inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: table; box-sizing: border-box;
    height: 158px; width: 158px; border-radius: 50%; color: #000; background-color: #f9e143;}

.popup_title_desc_con{padding-left: 35px;}

.theme_img_con{opacity: 0; margin-top:0; transition:all .4s .2s ease; display:none; font-size:0; line-height:0;}
.theme_img_con.on{display:block;}
.theme_img_con.event_on{opacity: 1; margin-top:0;}
.theme_img_con .theme_img_box_list{margin-bottom: 0; font-size: 0; line-height: 0;}
.theme_img_box{overflow: hidden;}
.theme_img_box > img{margin-left: -50px; max-width: calc(100% + 100px); object-fit: cover;}


@media all and (min-width: 768px) {
    .view_popup_wrap .content_wrap .fixed_btn_con{right:calc( (100% - ((1060 / 1400) * (100% + 160px))) / 2  );}
    .popup_title_desc_con{padding-left: 70px;}
    .theme_img_box > img{margin-left: -80px; max-width: calc(100% + 160px);}

    .popup_title_desc_con .desc_con > .desc br{display: block;}

    /* portfolio popup */
    .bottom_con .process_wrap .img_con{width: 100px; height: 100px;}
    .bottom_con .process_wrap .img_con img{width: 40px; height: 40px;}

    .bottom_con .process_content:after{top: 50px; width: 8px; height: 15px;}
    .bottom_con .process_wrap .text_con{font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem;}


}

@media all and (min-width:992px){
    .view_popup_wrap .content_wrap .content_con{}
    .view_popup_wrap .content_wrap .main_content_con{padding-top: 70px;}
    .view_popup_wrap .content_wrap .fixed_btn_con > .close_btn{width: 45px; height: 45px; overflow: hidden; border: 2px solid #000; transition:all .2s;}
    .view_popup_wrap .content_wrap .fixed_btn_con > .close_btn:hover{background-color:#ffc514;}
    .theme_img_box > img{margin-left: 0; max-width: 100%;}
    .view_popup_wrap .content_wrap .fixed_btn_con{right:35px;}

    /* portfolio */
    .bottom_con .process_content_wrap{width: calc(100% + 60px); margin-left: -30px;}
    .bottom_con .process_content{position: relative; padding: 0 30px;}

    /* 감상하기 - 팝업 */
    .popup_title_desc_con .title_con{}
    .popup_title_desc_con .title_con .title{font-size: 29px; font-size: 2.9rem; line-height: 42px; line-height: 4.2rem;
        text-align: left;}
    .popup_title_desc_con .desc_con .name{font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: 0.05em;}
    .popup_title_desc_con .desc_con .desc{font-size: 19px; font-size: 1.9rem; line-height: 35px; line-height: 3.5rem;}
    .popup_title_desc_con .desc_con .desc br{display:inline;}
    .popup_title_desc_con .date{font-size: 21px; font-size: 2.1rem; line-height: 27px; line-height: 2.7rem;
        position: absolute;}

    .popup_title_desc_con .title_con .serial_no {display: table-cell; text-align: right; vertical-align: bottom; margin-top: 0;}
    .popup_title_desc_con .desc_con .etc_con {width: 50%;}

    /*.view_popup_wrap{position:fixed !important;}*/
    .view_popup_wrap .content_wrap .top_con .close_btn:hover span::after,
    .view_popup_wrap .content_wrap .top_con .close_btn:hover span::before{left: 38%; width: 24px; transition: width, left 0.15s;
        transition-timing: easy-out; -webkit-transition-timing: easy-out;}
    .view_popup_wrap .content_wrap .top_con .close_btn > a{width: 61px; height: 61px; line-height:61px;}

    /*  popup_style_0_con type_3 (도메인 팝업) */
    .popup_style_0_con.type_3 .contents{padding-left: 50px; padding-right: 50px;}

    /* 상담하기 popup 버튼 */
    .bottom_con .button_wrap .button_inner:hover{width: 180px; height: 180px; }
    .bottom_con .button_wrap .button .button_inner .arrow > img{width: auto; height: auto;}

    .list_style_1_con li{padding-left:15px; margin-bottom: 7px;}
    .list_style_1_con li:before{top: 21px; width: 6px;}
    .bottom_con .list_style_1_con li:before{top:16px;}

    /* portfolio popup */
    .view_popup_wrap .bottom_con{}
    .view_popup_wrap .bottom_con h3{font-size: 19px; font-size: 1.9rem; line-height: 35px; line-height: 3.5rem;}
    .bottom_con .process_wrap .text_con{font-size: 17px; font-size: 1.7rem; line-height: 35px; line-height: 3.5rem;}
    .bottom_con .notice_wrap .h_desc3{font-size: 19px; font-size: 1.9rem; line-height: 30px; line-height: 3.0rem;}


    .view_popup_wrap .content_wrap .fixed_btn_con{top:30px; right:30px;}
    .view_popup_wrap .content_wrap .fixed_btn_con > .top_btn{display: block;}
    /*.view_popup_wrap .content_wrap .close_btn2:hover > a:before{width:24px;}*/
    /*.view_popup_wrap .content_wrap .close_btn2:hover > a:after{width:24px;}*/

    /*.view_popup_wrap .content_wrap .close_btn2 > a{transition: all 0.2s ease;}*/


    /*scroll bar css*/
    .view_popup_wrap{
        scrollbar-base-color: #000;
        scrollbar-Face-Color: #3d3d3d;
        scrollbar-Highlight-Color: #000;
        scrollbar-arrow-color: #000;
    }
    .view_popup_wrap::-webkit-scrollbar {width: 0px; border: 4px solid transparent; }
    .view_popup_wrap::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 5px; background: transparent}
    .view_popup_wrap::-webkit-scrollbar-track { background: transparent; -webkit-box-shadow: inset 0 0 4px transparent}
    .view_popup_wrap::-webkit-scrollbar-thumb { background: transparent; border:12px solid transparent; -webkit-box-shadow: inset 0 0 40px #fff;  }

    .view_popup_wrap .popup_header_inner{padding-left:60px;}

    .view_popup_wrap .content_wrap .main_content_inner{margin-top:100px;}
    .view_popup_wrap .content_wrap .main_content_inner.popup_on{margin-top:0;}

    .theme_img_con{margin-top:50px;}
    .theme_img_con.event_on{margin-top:0;}
}

@media all and (min-width: 1400px){
    /*.view_popup_wrap{background-color:#f0eff8;}*/
    /*.view_popup_wrap .content_wrap .content_con{background-color:#f0eff8;}*/
    .popup_title_desc_con{padding-left: 0;}

    .view_popup_wrap .popup_fixed_btn_con .popup_fixed_btn:hover{background-color:#000 !important;}
}

@media all and (min-width: 1430px){
    .bottom_con_padding_ctrl{padding-left: 15px; padding-right: 15px;}
}