@charset "utf_8";
@import url(../style/style.css);
@import url(../style/style.responsive.css);

*{transition: .23s ease;}
#wrap{position: relative;background: #FAFAFA;padding-top: 120px;}
#header{position: relative;z-index: 999;}
#contents{min-height: calc(100vh - 240px);height: 100%;}
#footer{}

/* 공통 */
.mob_hide{}
.web_hide{display: none !important;}
.sect{max-width: 1180px;margin: 0 auto;position: relative;}
.star{color: #FC383F;}

/* header */
#header{display: flex;align-items: center;width: 100%;height: 120px;padding: 0 50px;position: fixed;top: 0;left: 0;box-sizing: border-box;}
#header:hover{background: rgba(255, 255, 255, 0.003); backdrop-filter: blur(2px);}
#header.nav_up{top: -120px;}
#header .logo_wrap{width: calc(100%/3);}
#header .logo_wrap .logo_link{}
#header .logo_wrap .logo_link img.main_logo{display: none;}
#header .top_nav{width: calc(100%/3);margin-left: auto;display: flex;align-items: center;}
#header .top_nav a{font-size: 32px;line-height: 39px;width: 50%;box-sizing: border-box;position: relative;}
#header .top_nav a:first-child{width: calc(50% - 80px); margin-right: 80px;margin-left: auto;}/* 210914 */
#header .top_nav a.on::before{content: '';display: block;width: 12px;height: 12px;border-radius: 50%;background: #2E2D2C;position: absolute;top: calc(50% - 6px);left: -32px;}

/* footer */
#footer{width: 100%; height: 120px;display: flex;align-items: flex-start;justify-content: space-between; padding: 40px 50px 0;box-sizing: border-box;letter-spacing: 0;}
#footer .left_box{width: calc(100% / 3);display: flex;align-items: flex-start;box-sizing: border-box;}
#footer .left_box .copy{font-size: 15px;line-height: 23px;font-weight: 700;margin-right: 105px;flex-shrink: 0;}
#footer .left_box .bottom_nav{display: flex;flex-wrap: wrap; max-width: 320px;}
#footer .left_box .bottom_nav a{display: block;padding-left: 30px;width: 50%; font-size: 15px;line-height: 23px;font-weight: 700; box-sizing: border-box;position: relative;}
#footer .left_box .bottom_nav a:hover::before{content: '';position: absolute;top: calc(50% - 4px);left: 6px;width: 8px;height: 8px;border-radius: 50%;background: #2E2D2C;}
#footer .left_box .bottom_nav a:nth-child(2){margin-left: auto;}
#footer .right_box{width: calc(100% / 3);display: flex;align-items: flex-start;box-sizing: border-box;}
#footer .right_box p{display: block;flex-shrink: 0; width: 50%; font-size: 15px;line-height: 23px;}

/* 팝업공통 */
#pop_wrap{display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}
#pop_wrap .dim{display: block; width: 100%;height: 100%; background: #000;opacity: 0.7;}
#pop_wrap .pop_wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); background: #fff;max-width: 900px;padding: 40px;box-sizing: border-box;}
#pop_wrap .pop_wrap .p_head{display: flex;align-items: center;padding-bottom: 50px;}
#pop_wrap .pop_wrap .p_head h3{font-size: 20px;line-height: 28px;font-weight: 700;}
#pop_wrap .pop_wrap .p_head .btn_pop_close{margin-left: auto;width: 24px;height: 24px;background: url(../images/ico/icon_close.png)no-repeat center;cursor: pointer;}

/*메인*/
.main_wrap #header .logo_wrap .logo_link img.main_logo.pc{display: block;}
.main_wrap #header .logo_wrap .logo_link img{display: none;}
.main_wrap #header .top_nav a{color: #fff;}
.main_wrap #footer{color: #fff;}
.main .row{padding: 60px 50px 0;}
.main .row .col{width: calc(100%/3);margin-left: auto;color: #fff;}
/* .main .row .col p{padding-left: 32px;} 210827 */
.main .row .col .txt_kr{font-size: 26px;line-height: 36px;margin-bottom: 20px;word-break: keep-all;align-items: center;}/* 210917 */
.main .row .col .txt_en{font-size: 22px;line-height: 30px;letter-spacing: 0;word-break: keep-all;}/* 210917 */
.main .row .col .work{display: flex;align-items: center;margin-top: 60px;}
.main .row .col .work dt{width: 50%; font-size: 22px;line-height: 30px;position: relative;box-sizing: border-box;}
.main .row .col .work dd{width: 50%; font-size: 22px;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main .row .col .work dt::before{content: '';display: none;width: 10px;height: 10px;border-radius: 50%;background: #fff;position: absolute;top: calc(50% - 5px);left: -32px;}
/* .main .row .col .work dt:hover{padding-left: 22px;} */
.main .row .col .work dt:hover::before{display: block;}

.main_wrap #footer .left_box .bottom_nav a:hover::before{background: #fff;}
#wrap.main_wrap{background: transparent;}
.fullscreen_background{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
.fullscreen_background .video_box{width: 100%;height: 100%;}
/*.fullscreen_background .video_box .video_wrapper{position: relative; width: 100%;height: 100%;}
.fullscreen_background .video_box .video_wrapper::before{content: '';display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #2E2D2C;opacity: 0.2;z-index: 1;}
 .fullscreen_background .video_box .video_wrapper .iframe_wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.fullscreen_background .video_box .video_wrapper .iframe_wrap iframe{display: block; width: 100%;min-width: 100vw;} 210906 */
.fullscreen_background .video_box .video_wrapper .iframe_wrap{background: #000;position: fixed;top: 0; right: 0; bottom: 0; left: 0;z-index: -99;}

.fullscreen_background .video_box .video_wrapper,
.fullscreen_background .video_box .video_wrapper .iframe_wrap iframe{position: absolute;top: 0;left: 0;width: 100%;min-height: 100%;pointer-events: none;}
.fullscreen_background .video_box .video_wrapper .iframe_wrap{position: absolute;top: 0;left: 0;transition: 0s;width: 100%;height: 100%;}

@media (min-aspect-ratio: 16/9) {
    .fullscreen_background .video_box .video_wrapper .iframe_wrap{width: 100%; height: 177.77%; top: -35%;}
}
@media (max-aspect-ratio: 16/9) {
    .fullscreen_background .video_box .video_wrapper .iframe_wrap{ width: 500%; height: 100%; left: calc((100vw - 500%) / 2);}
}/* //210906 */

/* 로딩아이콘 */
.row.loding_box{display: flex; padding: 0 0 80px 0;justify-content: center;}
.row.loding_box .loding_icon{display: flex;justify-content: center;align-items: center; width: 60px;height: 60px;border-radius: 50%;box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.1);}
.row.loding_box .loding_icon i{display: block;width: 8px;height: 8px;border-radius: 50%;background: #2E2D2C;}
.row.loding_box .loding_icon i:nth-child(2){ margin: 0 4px;}
.row.loding_box .loding_icon i.opacityAni:nth-child(1){animation: 1s opacityAni 0s;}
.row.loding_box .loding_icon i.opacityAni:nth-child(2){animation: 1s opacityAni .5s; margin: 0 4px;}
.row.loding_box .loding_icon i.opacityAni:nth-child(3){animation: 1s opacityAni 1s;}
/* 디테일 fix버튼 */
.request_wrap{width: 20px; height: 80px;overflow: hidden; display: flex;align-items: center;justify-content: flex-end; position: fixed;bottom: 0;right: 50px; box-sizing: border-box;z-index: 998;}
.request_wrap .btn_request{display: block;width: 16px;height: 16px;border-radius: 50%; background: #2E2D2C;cursor: pointer;order: 3;flex-shrink: 0;margin-left: 6px; animation: 1s BlinkingAni infinite;}
.request_wrap a.links{font-size: 18px;line-height: 29px;font-weight: 700;order: 1;position: relative;padding-left: 25px;transition-delay:.1s;background: no-repeat center right;}
.request_wrap a.links::before{content: '';display: block;width: 10px;height: 10px;border-radius: 50%;background: #2E2D2C;position: absolute;top: calc(50% - 5px);left: 0;}
.request_wrap a.links:last-child{margin-left: 80px;}
/* .request_wrap:hover{width: auto; background: rgba(255, 255, 255, 0.01);backdrop-filter: blur(2px);padding: 0 50px;right: 0;}
.request_wrap:hover .btn_request{display: none;}
.request_wrap:hover a.links:hover{padding-right: 31px;background-image: url(../images/ico/icon_arr_small.png);} */
.request_wrap{width: auto; background: rgba(255, 255, 255, 0.01);backdrop-filter: blur(2px);padding: 0 50px;right: 0;}
.request_wrap .btn_request{display: none;}
.request_wrap a.links:hover{padding-right: 31px;background-image: url(../images/ico/icon_arr_small.png);}

/* 노데이터 화면 */
.nodata{display: block;height: 100%; padding: 20px 50px 80px;}
.nodata .txt_box{display: flex;align-items: center;justify-content: center; background: #fff;width: 100%; height: calc(100vh - 340px);text-align: center;}
.nodata .txt_box p{font-size: 18px;line-height: 26px;padding-top: 68px;background: url(../images/ico/icon_nodata.png)no-repeat center top / 48px auto;}

/* 에러 화면 */
#wrap.err_wrap{padding-top: 0;}
.err_wrap{text-align: center;}
.err_wrap .logo_wrap{text-align: center;padding: 100px 0 0;}
.err_wrap .logo_wrap .logo_link{display: inline-block;}
.err_wrap .txt_box{height: calc(100vh - 128px);display: flex;align-items: center;justify-content: center;flex-direction: column;}
.err_wrap .txt_box strong{font-size: 24px;line-height: 28px;margin-bottom: 10px;padding-top: 94px;background: url(../images/ico/icon_err.png)no-repeat center top / 64px auto;}
.err_wrap .txt_box p{font-size: 16px;line-height: 22.5px;color: #4A4A49;}
.err_wrap .txt_box .link_home{margin-top: 30px;width: 160px;line-height: 34px;height: 36px;box-sizing: border-box;text-align: center;padding-right: 26px;border: 1px solid #2E2D2C;background: url(../images/ico/icon_arr_small2.png)no-repeat center right 15px / 16px auto;}

@keyframes BlinkingAni {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes opacityAni {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

@media(max-width:1024px){
    #header .top_nav a{width: auto;}
    #header .top_nav a:first-child{width: auto;}
}

/* @media(max-width:820px){ */
@media(max-width:1024px){
    /* 공통 */
    .mob_hide{display: none !important;}
    .web_hide{display: block !important;}
    #wrap{padding-top: 60px;}
    #contents{min-height: calc(100vh - 180px);}

    /* header */
    #header{padding: 0 20px;height: 60px;}
    #header.nav_up{top: -60px;}
    #header .logo_wrap{min-width: 130px;width: 50%;}
    #header .logo_wrap .logo_link{width: 130px;}
    #header .logo_wrap .logo_link img{width: 100%;height: auto;}
    #header .logo_wrap .logo_link img.main_logo{display: none;}
    #header .top_nav{margin-left: 0;width: 50%;}
    #header .top_nav a{font-size: 16px;line-height: 20px;padding-left: 11px;}
    #header .top_nav a:first-child{margin-right: 20px;}
    #header .top_nav a.on::before{width: 6px;height: 6px;top: calc(50% - 3px); left: 0;}

    /* footer */
    #footer{height: 120px;padding: 20px;box-sizing: border-box;margin: 0;}
    #footer .left_box{width: 50%;flex-direction: column;}
    #footer .left_box .copy{order: 2;font-size: 12px;line-height: 18px;color: #2E2D2C;font-weight: 400;}
    #footer .left_box .bottom_nav{order: 1; width: 100%;margin-bottom: 5px;display: block;}
    #footer .left_box .bottom_nav a{padding-left: 0;width: 50%;font-size: 14px;line-height: 21px;}
    #footer .left_box .bottom_nav a:hover::before{content: none;}
    #footer .left_box .bottom_nav a:nth-child(2){margin-left: 0;}
    #footer .right_box{width: 50%;margin-left: 0;flex-direction: column;}
    #footer .right_box .info_item01{order: 2;width: 100%; margin: 0;font-size: 13px;line-height: 17px;}
    #footer .right_box .info_item01 br{display: none;}
    #footer .right_box .info_item01 span{display: block;}
    #footer .right_box .info_item02{order: 1;width: 100%; margin: 0;font-size: 13px;line-height: 17px;margin-bottom: 6px;word-break: keep-all;}
    #footer .right_box .info_item02 br{display: none;}
    .main_wrap #footer .left_box .copy{color: #fff;}

    /* 팝업공통 */
    #pop_wrap{}
    #pop_wrap .dim{display: none;}
    #pop_wrap .pop_wrap{width: 100%;height: 100%;border: 1px solid #2E2D2C;padding: 30px 20px;}
    #pop_wrap .pop_wrap .p_head h3{font-size: 16px;line-height: 16px;}
    #pop_wrap .pop_wrap .p_head{padding-bottom: 30px;}
    #pop_wrap .pop_wrap .p_head .btn_pop_close{background: url(../images/ico/m_icon_close.png) no-repeat top right / 16px auto;}

    /*메인*/
    .main_wrap #header .logo_wrap .logo_link img.main_logo.mo{display: block !important;}
    .main_wrap #header .logo_wrap .logo_link img.main_logo.pc{display: none;}
    .main_wrap #header .logo_wrap .logo_link img{display: none !important;}
    
    .main .row{padding: 50px 20px 0;}
    .main .row .col{width: 100%;}
    .main .row .col p{padding-left: 0;}
    .main .row .col .txt_kr{font-size: 18px;line-height: 25px;margin-bottom: 10px;}
    .main .row .col .txt_en{font-size: 16px;line-height: 20px;}
    .main .row .col .work{margin-top: 30px;}
    .main .row .col .work dt{width: calc(100% / 3); font-size: 16px;line-height: 22px;}
    .main .row .col .work dd{width: calc((100% / 3) * 2); font-size: 16px;line-height: 22px;text-align: right;}

    /* 로딩아이콘 */
    .row.loding_box{align-items: center;padding-bottom: 50px;}
    .row.loding_box .loding_icon{width: 40px;height: 40px;}
    .row.loding_box .loding_icon i{width: 5.33px;height: 5.33px;}
    
    /* 디테일 fix버튼 */
    .request_wrap{width: 50%; height: 40px;bottom: 0;right: 0; padding: 0 20px 0 0;margin-left: auto;overflow: visible;}
    .request_wrap:hover{background: transparent;backdrop-filter: initial;width: 50%;}
    .request_wrap .btn_request{display: none;}
    .request_wrap a.links{display: block;font-size: 14px;line-height: 21px;padding: 0 0 0 15px;position: relative;flex-shrink: 0;}
    .request_wrap a.links::before{width: 5px;height: 5px;top: calc(50% - 2.5px);}
    .request_wrap a.links:last-child{text-align: right;margin-left: auto;}
    .request_wrap:hover a.links:hover{padding-right: 0;background: none;}

    /* 노데이터 화면 */
    .nodata{padding: 0 20px 50px;}
    .nodata .txt_box{height: calc(100vh - 230px);}
    .nodata .txt_box p{font-size: 16px;line-height: 22px;}

    /* 에러 화면 */
    .err_wrap .logo_wrap{padding-top: 50px;}
    .err_wrap .logo_wrap .logo_link{width: 130px;}
    .err_wrap .logo_wrap .logo_link img{width: 100%;height: auto;}
    .err_wrap .txt_box{height: calc(100vh - 72px);}
}