@charset "UTF-8";
/* 스크롤 고정 */
body.fixed{position:relative;overflow:hidden;}

/* 레이아웃 - 기본(딤) */
.popup-outer-wrap{position:relative;}
.popup-wrap{display:none;position:fixed;top:0;left:0;z-index:1055;width:100%;height:100%;background:rgba(75 ,85, 99, 0.6);overflow:auto;text-align:center;}
.popup-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
.popup-wrap .popup-box{display:inline-block;position:relative;width:calc(100% - 20px);max-width:1200px;background:#fff;text-align:left;border-radius:10px;box-shadow: 0px 5px 21px 6px rgba(0,0,0,0.1);vertical-align:middle;}
.popup-box .popup-header{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #e4e4e4;}
.popup-box .popup-header h4{color:#666;font-weight:500;}
.popup-box .popup-body{padding:40px;max-height:70vh;height:70vh;overflow:auto;box-sizing:border-box;}
.popup-box .popup-footer{display:flex;justify-content:center;padding:20px 40px;}

/* cms 레이아웃 - 기본(딤) */
.layer-popup-outer{display:none;position:fixed;top:0;left:0;z-index:1055;padding:100px 50px;width:100%;height:100%;background:rgba(75 ,85, 99, 0.6);overflow:auto;text-align:center;box-sizing:border-box;}
.layer-popup-outer.on{display:block;}
.layer-popup-wrap{display:inline-block;position:relative;margin:0 20px 20px 0;width:auto;min-width:420px;max-width:100%;background:#fff;text-align:left;border-radius:10px;box-shadow: 0px 5px 21px 6px rgba(0,0,0,0.1);vertical-align:middle;}
.layer-popup-wrap .popup-body{padding:20px;max-height:100%;height:auto;}
.layer-popup-box{position:relative;padding:65px 15px 15px;background:#fff;box-sizing:border-box;}
.layer-popup-box.window-popup{padding:15px;}
.layer-popup-box img{max-width:100%;}
.layer-popup-box .btn-box{position:absolute;top:0;right:0;padding:10px 15px 5px;width:100%;text-align:right;box-sizing:border-box;}
.layer-popup-box .btn-box .btn-layer-close{display:inline-block;margin:0 0 4px 8px;padding:5px 14px;border:1px solid #ccc;color:#666666;font-size:1.5rem;line-height:2rem;border-radius:5px;}
.layer-popup-box .btn-box .btn-layer-close:first-of-type{margin-left:0;}
.layer-popup-box.blue .btn-box{background:#1976d2;}
.layer-popup-box.blue .btn-box .btn-layer-close{background:rgba(255,255,255,0.2);color:#fff;border:none;}

/* 레이아웃 - 툴팁 */
.popup-wrap.tooltip{position:static;top:auto;left:auto;background:none;}
.popup-wrap.tooltip:before{display:none;}
.popup-wrap.tooltip .popup-box{position:absolute;top:100%;left:0;width:100%;max-width:500px;z-index:500;border:1px solid #eee;border-radius:10px;box-shadow:rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;}
.popup-wrap.tooltip .popup-body{min-height:auto;height:auto;}

/* 레이아웃 - 아이프레임,크기별 팝업 등 사용자 지정 */
.popup-wrap.layer-iframe .popup-body{padding:0;overflow:unset;}
.popup-wrap.layer-large > .popup-box{max-width:1400px;}
.popup-wrap.layer-middle > .popup-box{max-width:1200px;}
.popup-wrap.layer-small > .popup-box{max-width:768px;}

/* 팝업 열기 버튼 */
.btn-popup-open{display:inline-block;position:relative;margin:9px;padding:15px 25px;border:0;border-radius:10px;background:#9abf7f;color:#fff;text-align:center;box-shadow:0px 4px 0px #87a86f;}
.btn-popup-open:active{top:4px;background-color:#87a86f;box-shadow:0 0 #87a86f;}

.btn-popup-open.blue{box-shadow:0px 4px #74a3b0;background-color:#7fb1bf;}
.btn-popup-open.blue:active{box-shadow:0 0 #74a3b0;background-color:#709ca8;}

.btn-popup-open.red{box-shadow:0px 4px 0px #e04342;background-color:#fa5a5a;}
.btn-popup-open.red:active{box-shadow:0 0 #ff4c4b;background-color:#ff4c4b;}

.btn-popup-open.purple{box-shadow:0px 4px 0px #ad83a8;background-color:#cb99c5;}
.btn-popup-open.purple:active{box-shadow:0 0 #ba8cb5;background-color:#ba8cb5;}

.btn-popup-open.cyan{box-shadow:0px 4px 0px #73b9c9;background-color:#7fccde;}
.btn-popup-open.cyan:active{box-shadow:0 0 #73b9c9;background-color:#70b4c4;}

.btn-popup-open.yellow{box-shadow:0px 4px 0px #d1b757;background-color:#f0d264;}
.btn-popup-open.yellow:active{box-shadow:0 0 #ff4c4b;background-color:#d6bb59;}

/* 팝업 닫기 버튼 - 기본 */
.btn-popup-close{display:inline-block;width:20px;height:20px;background:url(/_res/team2/_share/img/common/ico-modal-close.png) no-repeat center center/100%;}

/* 팝업 닫기 버튼 - 팝업 외부 */
.popup-box > .btn-popup-close{position:absolute;top:-40px;right:0;z-index:10;}

/* 팝업 닫기 버튼 - 푸터 내부 */
.popup-footer > .btn-popup-close{padding:10px 20px;width:auto;height:auto;background:none;border:1px solid #e8ebed;border-radius:5px;background:#fff;color:#666;transition:all .2s;}
.popup-footer > .btn-popup-close:hover{background:#101725;color:#fff;}

/* 팝업 닫기 버튼 - 흰색 */
.btn-popup-close.white{background-image:url(/_res/team2/_share/img/common/ico-modal-close-w.png)}

/* cms 팝업 - 닫기 버튼(전체/개별)*/
.popup-box .btn-box{text-align:center;}
.popup-box .btn-box .btn-popup-close{display:inline-block;margin:0 0 4px 8px;padding:5px 14px;width:auto;height:auto;border:1px solid #ccc;background:none;color:#666666;font-size:1.5rem;line-height:2rem;border-radius:5px;}
.popup-box .btn-box .btn-popup-close:first-of-type{margin-left:0;}

.layer-popup-outer .btn-all-popup-close{display:none;position:fixed;top:30px;right:50px;z-index:1100;padding:8px 40px 7px 10px;width:auto;height:auto;background-image:url(/_res/team2/_share/img/common/ico-modal-close.png);background-repeat:no-repeat;background-position:right 10px center;background-size:20px;color:#fff;}
.layer-popup-outer.on .btn-all-popup-close{display:block;}

/* 옵션 - 외부스크롤 */
.outer-scroll .popup-wrap{padding:20px;box-sizing:border-box;}
.outer-scroll .popup-wrap .popup-body{max-height:100%;height:auto;}

@media screen and (max-width:1200px) {
    /* 레이아웃 - 기본(딤) */
    .popup-wrap .popup-box{width:calc(100% - 20px);}

    /* cms 레이아웃 - 기본(딤) */
    .layer-popup-outer{padding:100px 30px;}

    /* 레이아웃 - 아이프레임,크기별 팝업 등 사용자 지정 */
    .popup-wrap.layer-large > .popup-box{max-width:1400px;width:calc(100% - 20px);}
    .popup-wrap.layer-middle > .popup-box{max-width:1200px;width:calc(100% - 20px);}
    .popup-wrap.layer-small > .popup-box{max-width:768px;width:calc(100% - 250px);}
}
@media screen and (max-width:1024.98px) {
    /* 레이아웃 - 기본(딤) */
    .popup-box .popup-header{padding:15px;}
    .popup-box .popup-footer{padding:20px;}
    .popup-wrap .popup-box{width:calc(100% - 20px);}
    .popup-wrap .popup-body{padding:20px;min-height:60vh;}

    /* cms 레이아웃 - 기본(딤) */
    .layer-popup-outer{padding:20px 10px;}
    .layer-popup-box{padding:45px 10px 10px;}
    .layer-popup-box.window-popup{padding:10px;}
    .layer-popup-box .btn-box{padding:10px 10px 5px;}
    .layer-popup-box .btn-box .btn-layer-close{margin:0 0 4px 0;padding:2px 3px;}

    /* 팝업 닫기 버튼 - 푸터 내부 */
    .popup-footer > .btn-popup-close{padding:8px 10px;}

    /* cms 팝업 - 닫기 버튼(전체/개별)*/
    .layer-popup-outer .btn-all-popup-close{top:20px;right:20px;padding:8px 40px 7px 10px;background-color:#000;background-position:right 8px center;background-size:15px;}

    /* 옵션 - 외부스크롤 */
    .outer-scroll .popup-wrap .popup-body{max-height:100%;min-height:100%;height:auto;}
}
@media screen and (max-width:480px) {
    .layer-popup-wrap{min-width:100%;}

}