@charset "utf-8";

/*fake 셀렉트*/
._hidden .popup_sel.sel_option{z-index:300!important;}

/*레이어 팝업*/
.modal-wrapper{
    width:100%;
    height:100%;
    position:fixed;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    visibility:hidden;
    opacity:0;
    z-index:9999;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.modal-wrapper.open{opacity:1; visibility:visible;}

.modal{
    width:1167px;
    height:720px;
    display:block;
    margin:50% 0 0 -583px;
    position:relative;
    top:50%;
    left:50%;
    background:#fff;
    border-radius:32px;
    opacity:0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal{margin-top:-360px; opacity:1;}

.head{position:absolute; right:0; padding:1.5em 4%; overflow:hidden;  display: inline-block; border-radius: 16px 16px 0 0;}

.btn-close{width:32px; height:32px; display:block; float:right;}
.btn-close:hover{opacity: 0.5;}
.btn-close::before, .btn-close::after{content:''; width:32px; height:2px; display:block; background:#000;}

.btn-close::before{
    margin-top:12px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.btn-close::after{
    margin-top:-2px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.layerPopup-cont{padding:0 48px; }



.ceo .layerPopup-cont{padding:0; height:100%;}
.ceo-layer{display:flex; width:100%; height:100%; align-items: center;}
.ceo-layer .ceo-img{background:url('../images/ko/sub/introduce/ceo-img02.jpg') no-repeat center center; height:100%; position:relative; overflow: hidden; width:30%;}
.ceo-layer .ceo-img img{position: absolute; bottom:0; left:-16%;}
.ceo-layer .ceo-txt{padding:0 48px; width:70%;}

.ceo-layer .ceo-txt p{line-height:1.8;}



.communi-video .layerPopup-cont .video-area iframe{position:absolute; height:90%; left:0; bottom:0;}
.esg-modal .layerPopup-cont{width:100%;}
.esg-modal .layerPopup-cont .esg-area{padding:64px 0;}
.esg-modal .layerPopup-cont .esg-area img{border-radius:32px;}
.esg-modal .layerPopup-cont .esg-area h3{margin:40px 0 24px; font-size:28px; font-weight: 500;}
.esg-modal .layerPopup-cont .esg-area p{line-height: 1.8;}

.esg-modal .default-box-btn{margin-top:40px;}
.esg-modal .default-box-btn .default-btn{font-size:18px;}
.esg-modal .default-box-btn .default-btn .default-arrow{width:32px;}

.esg-modal .esg-special{display:inline-block; font-weight: 400; padding:8px 24px; border:1px solid #ccc; border-radius:8px; color:#333; margin-bottom:16px;}
.esg-modal .modal{width:800px; height:720px; margin: 50% 0 0 -400px;}


.sinmungo-modal{text-align:center;}
.sinmungo-modal .modal{width:800px; height:auto; margin: 50% 0 0 -400px;}
.sinmungo-modal.open .modal{margin-top:-210px;}
.sinmungo-modal .layerPopup-cont .sinmungo-area{padding:64px 0;}
.sinmungo-modal .layerPopup-cont .sinmungo-area h3{font-size:32px;}
.sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap{margin-top:48px;}
.sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul{display:flex; justify-content: space-evenly; align-items: flex-start;}
.sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li{width:30%; background:#f5f5f5; border:1px solid #eee; border-radius:16px;}
.sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li a{display:block; padding:40px 0;}
.sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li a:hover{opacity: 0.5;}
.sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li a .iden-tit{font-size:14px; margin-top:8px;}


.privacy-modal .modal{width:800px; height:auto; margin: 50% 0 0 -400px;}
.privacy-modal.open .modal{margin-top:-400px;}
.privacy-modal .layerPopup-cont .privacy-area{padding:32px 0;}
.privacy-modal .layerPopup-cont .privacy-area h3{font-size:24px; margin-bottom:16px;}
.privacy-modal .layerPopup-cont .privacy-area p{font-size:14px;}
.privacy-modal .layerPopup-cont .privacy-area .pri-list{margin-top:32px;}
.privacy-modal .layerPopup-cont .privacy-area .pri-list .pri-category{margin-bottom:20px;}

.related-modal .modal{width:100%; height:100%; margin: 50% 0 0 0; top:0; left:0; border-radius:0; background:#f5f5f5;}
.related-modal.open .modal{margin-top:0;}
.related-modal .layerPopup-cont{display:flex; justify-content: space-between; align-items: flex-start;}
.related-modal .layerPopup-cont .related-list{margin-top:48px; width:48%;}
.related-modal .layerPopup-cont .related-list p{font-size:24px; margin-bottom:32px; padding-bottom:8px; text-align:center; font-family: "TmoneyRound", "Noto Sans KR", "AppleGothic",sans-serif; font-weight: 900; letter-spacing: -0.5px;}
.related-modal .layerPopup-cont .related-list:first-child p{border-bottom:1px solid #920783; color:#920783;}
.related-modal .layerPopup-cont .related-list:last-child p{border-bottom:1px solid #f18e18; color:#f18e18;}
.related-modal .layerPopup-cont .related-list li{margin-bottom:8px;}
.related-modal .layerPopup-cont .related-list li a{position: relative; font-size:18px; color:#333; background:#fff; border-radius:8px; padding:16px 24px; border:1px solid #eee; display:block; text-align:center;}
.related-modal .layerPopup-cont .related-list li a::after{
    position: absolute;
    content: "";
    top: 50%;
    right: 4%;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
    transform: rotate(315deg);}





/*태블릿*/
@media screen and (max-width:1180px){
    .modal{width:1100px; height:560px; margin: 50% 0 0 -550px;}
    .modal-wrapper.open .modal{margin-top:-280px;}

    .esg-modal .modal{width:1100px; height:auto; margin: 50% 0 0 -550px;}
    .esg-modal.modal-wrapper.open .modal{margin-top: -300px;}

    .sinmungo-modal .modal{width:1100px; margin: 50% 0 0 -550px;}

    .privacy-modal .modal{width:1100px; height:560px; margin: 50% 0 0 -550px; overflow-y: auto;}
    .privacy-modal.open .modal{margin-top:-280px;}

    .related-modal.open .modal{margin-top:0;}
    .related-modal .layerPopup-cont .related-list li a{font-size:16px;}
}


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


    .modal{width:980px; height:480px; margin: 50% 0 0 -490px; overflow:unset;}
    .modal-wrapper.open .modal{margin-top:-240px;}



    .ceo .modal{border-radius:16px 16px 0 0;}
    .ceo-layer{display:block; height:auto;}
    .ceo-layer .ceo-txt{padding:24px; font-size:14px; width:100%;}
    .ceo .layerPopup-cont{overflow: auto;}
    .mobile-close{position:relative; bottom:0; width:100%; background:#920883; color:#fff; padding:16px 0; text-align:center; border-radius:0 0 16px 16px;}

    .communi-video .mobile-close{position:absolute; bottom:-55px;}


    .esg-modal .modal{width:980px; height:auto; margin: 50% 0 0 -490px; border-radius:16px;}
    .esg-modal .layerPopup-cont{padding:0 16px;}
    .esg-modal .layerPopup-cont .esg-area{padding:16px 0 32px;}
    .esg-modal .layerPopup-cont .esg-area h3{font-size:20px; margin: 32px 0 16px;}
    .esg-modal .layerPopup-cont .esg-area p{font-size:14px; line-height: 1.6;}
    .esg-modal .layerPopup-cont .esg-area img{width:auto;}
    .esg-modal.modal-wrapper.open .modal{margin-top: -280px;}

    .esg-modal .default-box-btn .default-btn{font-size:16px;}



    .sinmungo-modal .modal{width:980px; margin: 50% 0 0 -490px;}
    .sinmungo-modal .layerPopup-cont{padding:0 16px;}
    .sinmungo-modal .layerPopup-cont .sinmungo-area{padding:32px 0;}
    .sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap{margin-top:24px;}
    .sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul{display:block; text-align:left;}
    .sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li{display:inline-block; width:48%; text-align:center; margin-right:8px; margin-bottom:12px;}
    .sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li:nth-child(2){margin-right:0;}
    .sinmungo-modal .layerPopup-cont .sinmungo-area .iden-wrap ul li a{padding:24px 0;}



    .privacy-modal .modal{width:980px; height:480px; margin: 50% 0 0 -490px; overflow-y: auto;}
    .privacy-modal .layerPopup-cont{padding:0 8px;}
    .privacy-modal.open .modal{margin-top:-240px;}
    .privacy-modal .layerPopup-cont .privacy-area h3{font-size:20px;}
    .privacy-modal .layerPopup-cont .privacy-area p{font-size:12px;}
    .privacy-modal .layerPopup-cont .privacy-area .pri-list{margin-top:24px;}
    .privacy-modal .layerPopup-cont .privacy-area .pri-list .pri-category{margin-bottom:16px;}
    
    .related-modal.open .modal{margin-top:0;}
    .related-modal .mobile-close{border-radius:0; bottom:-8%;}    
}


@media screen and (max-width:820px){
    .modal{width:720px; height:480px; margin: 50% 0 0 -360px; overflow:unset;}
    .modal-wrapper.open .modal{margin-top:-240px;}




    .esg-modal .modal{width:720px; height:auto; margin: 50% 0 0 -360px;}
    .esg-modal.modal-wrapper.open .modal{margin-top: -280px;}


    .sinmungo-modal .modal{width:720px; margin: 50% 0 0 -360px;}



    .privacy-modal .modal{width:720px; height:720px; margin: 50% 0 0 -360px; overflow-y: auto;}
    .privacy-modal.open .modal{margin-top:-360px;}
    
    .related-modal.open .modal{margin-top:0;}
}


/*모바일*/
@media screen and (max-width:768px){
    .modal{width:680px; height:480px; margin: 50% 0 0 -340px; overflow:unset;}
    .modal-wrapper.open .modal{margin-top:-240px;}




    .esg-modal .modal{width:680px; height:auto; margin: 50% 0 0 -340px;}
    .esg-modal.modal-wrapper.open .modal{margin-top: -280px;}
    .esg-modal .layerPopup-cont .esg-area img {width: 100%;}


    .sinmungo-modal .modal{width:680px; margin: 50% 0 0 -340px;}



    .privacy-modal .modal{width:680px; height:720px; margin: 50% 0 0 -340px; overflow-y: auto;}
    .privacy-modal.open .modal{margin-top:-360px;}

    .related-modal.open .modal{margin-top:0;}
}

@media screen and (max-width:430px){
    .modal{width:360px; height:480px; margin: 50% 0 0 -180px; overflow:unset;}
    .modal-wrapper.open .modal{margin-top:-240px;}

    .esg-modal .modal{width:360px; height:auto; margin: 50% 0 0 -180px;}
    .esg-modal.modal-wrapper.open .modal{margin-top: -280px;}
    .esg-modal .layerPopup-cont .esg-area img {width: 100%;}

    .sinmungo-modal .modal{width:360px; margin: 50% 0 0 -180px;}
    
    .privacy-modal .modal{width:360px; height:480px; margin: 50% 0 0 -180px; overflow-y: auto;}
    .privacy-modal.open .modal{margin-top:-240px;}

    .related-modal .layerPopup-cont{padding:0 16px;}
    .related-modal .layerPopup-cont .related-list p{font-size:20px;}
    .related-modal .layerPopup-cont .related-list li a{font-size:14px;}
    .related-modal .layerPopup-cont .related-list li a::after{right:8%;}
    .related-modal.open .modal{margin-top:0;}
}