@charset "utf-8";
/* CSS Document */

/* layerPopup (메인 레이어 팝업) */
.main_popup {position:absolute;z-index:100;display:none;box-shadow:0 10px 30px rgba(0,0,0,.25);border-radius:0 0 8px 8px;overflow:hidden}
.main_popup a:focus,
.main_popup input:focus {outline:2px solid #fee358;outline-offset:-2px}
.main_popup p {overflow:visible !important}

.pop_stopview {display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:linear-gradient(90deg,#1a2540 0%,#2a3a66 100%);font-size:.8rem;box-sizing:border-box}
.pop_stopview span {color:#fff}
.pop_stopview .stopview_check {display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:#fff;user-select:none;line-height:1}
.pop_stopview .stopview_check input[type="checkbox"] {appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;background:transparent;cursor:pointer;position:relative;transition:border-color .15s ease,background-color .15s ease;flex-shrink:0;box-sizing:border-box}
.pop_stopview .stopview_check:hover input[type="checkbox"] {border-color:#fee358}
.pop_stopview .stopview_check input[type="checkbox"]:checked {background:#fee358;border-color:#fee358}
.pop_stopview .stopview_check input[type="checkbox"]:checked::after {content:"";position:absolute;top:2px;left:5px;width:4px;height:9px;border:solid #1a2540;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pop_stopview .stopview_check span {font-weight:500;letter-spacing:-.3px}
.pop_stopview .btn_pop_close {display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:15px;color:#fff;font-weight:600;font-size:.78rem;text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.pop_stopview .btn_pop_close::before {content:"\00d7";font-size:1rem;line-height:1;font-weight:400}
.pop_stopview .btn_pop_close:hover,
.pop_stopview .btn_pop_close:focus {background:#fee358;border-color:#fee358;color:#1a2540;text-decoration:none}

/* introPopup (메인 인트로 팝업) */
.intro_popup_wrap {display:none;overflow-y:scroll;position:fixed;top:0;left:0;width:100%;height:100%;min-height:100vh;background:rgba(0, 0, 0, .8);z-index:1000}

.intro_wrap {position:relative;width:100%;padding:3rem 0 2rem 0}
.intro_layout {position:relative;width:100%;max-width:1600px;margin:0 auto;box-sizing:border-box}
.intro_layout .intro_logo {display:block;width:12.7rem;height:2.35rem;margin:0 auto 1.5rem;background:url(../../img/portal/popup/intro_logo.png)no-repeat;background-size:12.7rem}
.intro_layout .intro_pop_wrap {position:relative;height:25rem;margin-top:.5rem;padding:0 2rem;box-sizing:border-box;text-align:center}
.intro_layout .intro_pop_wrap > .intro_pop_list {overflow:hidden;height:26.3rem}
.intro_layout .intro_pop_wrap > .intro_pop_list > li {position:relative;float:left;width: calc((100% - 1.5rem)/4);margin-left: .5rem}
.intro_layout .intro_pop_wrap > .intro_pop_list > li:first-child {margin-left:0}
.intro_layout .intro_pop_wrap > .intro_pop_list > li a {overflow:hidden;position:relative;display:block;height:25rem;box-sizing:border-box}
.intro_layout .intro_pop_wrap > .intro_pop_list > li img {width:100%;height:100%;object-fit:cover}
.intro_layout .intro_pop_wrap > .intro_pop_list > li.on {border:.2rem solid #F76600;box-sizing:border-box}
.intro_layout .intro_pop_wrap > .intro_pop_list > li:nth-child(n+5) {display:none}

.intro_pop_prev {position:absolute;top:50%;left:-1rem;transform:translateY(-50%);width:1.5rem;height:2.5rem;background:url(../../img/portal/popup/intro_prev.png) no-repeat;background-size:1.5rem;text-indent:-9999px}
.intro_pop_next {position:absolute;top:50%;right:-1rem;transform:translateY(-50%);width:1.5rem;height:2.5rem;background:url(../../img/portal/popup/intro_next.png) no-repeat;background-size:1.5rem;text-indent:-9999px}
.intro_pop_prev:focus,
.intro_pop_next:focus {position:absolute !important}

.intro_layout .intro_pop_close {position:absolute;top:0;right:1rem}
.intro_layout .intro_pop_close a {display:block;width:2.15rem;height:2.15rem;background:url(../../img/portal/popup/intro_close.png)no-repeat;background-size:2.15rem;text-indent:-9999px}

.intro_ctrl {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:2rem;padding-left:2rem}
.intro_ctrl p {margin:.25rem;height:2.25rem;line-height:2.25rem}
.intro_ctrl p span {display:block;padding:0 1.5rem;background:#0065d7;border-radius:1.2rem;color:#fff;font-size:.8rem;box-sizing:border-box}
.intro_ctrl p span em {margin:0 .1rem;font-style:normal;font-weight:500}
.intro_ctrl .today_close {display:flex;align-items:center}
.intro_ctrl .today_close input[type=checkbox] {width:1rem;height:1rem}
.intro_ctrl .today_close span {margin-left:.5rem;color:#fff;font-size:.9rem}
.intro_ctrl .pop_close {display:block;width:2.5rem;height:2.5rem;background:#0055ae url(../../img/portal/popup/intro_close.png)no-repeat center center;background-size:.7rem;border-radius:50%;transition:all ease-in-out .3s;text-indent:-9999px}
.intro_ctrl .pop_close:hover {transform:rotate(-90deg);}

@media screen and (max-width:1640px){

.intro_layout {padding:0 2rem}
        
}


@media screen and (max-width:1200px){

.intro_layout .intro_pop_wrap > .intro_pop_list > li {width:calc((100% - 1rem)/2)}
.intro_layout .intro_pop_wrap > .intro_pop_list > li:nth-child(n+3) {display:none}


}

@media screen and (max-width:1000px){


.intro_layout .intro_pop_wrap {height:22rem}
.intro_layout .intro_pop_wrap > .intro_pop_list {height:22rem}
.intro_layout .intro_pop_wrap > .intro_pop_list > li > a {height:22rem}

}


@media screen and (max-width:640px){

.intro_layout .intro_pop_wrap {height:18rem;padding:0 1rem}
.intro_layout .intro_pop_wrap > .intro_pop_list {height:18rem}
.intro_layout .intro_pop_wrap > .intro_pop_list > li {width:100%}
.intro_layout .intro_pop_wrap > .intro_pop_list > li:nth-child(n+2) {display:none}
.intro_layout .intro_pop_wrap > .intro_pop_list > li:first-child {margin:0}
.intro_layout .intro_pop_wrap > .intro_pop_list > li > a {height:18rem}

.intro_pop_prev {background-size:1rem}
.intro_pop_next {background-size:1rem}

.intro_ctrl {margin-top:1rem}
.intro_ctrl p span {padding:0 1rem}

}