@charset "UTF-8";

/* mobile menu s*/
    /* 공통 기본 */
    .mobile_menu { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; box-sizing: border-box; overflow: hidden; display: none; background: transparent; z-index: 150; }
    .mobile_menu::after { content: ''; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; opacity: 0; transition: all 0.7s linear;  z-index: -1; }
    .mobile_menu.mobileOn::after { opacity: 1; }

    .mob_gnb .head_icons { display: block; z-index: 200; }
    .mobile_menu .gnb { box-sizing: border-box; }

    .mob_gnb .head_icons { display: block; }
    .mob_gnb .ham-btn { display: block; }

    .mob_gnb .gnb > ul > li .img_wrap { display: none; }

    .mobile_menu .nav-eng { display: none; }
    .mobile_menu.eng-on .nav { display: none; }
    .mobile_menu.eng-on .nav-eng { display: block; }


    /* 전체창 스타일 */
    .mob_gnb.mob_gnb_wide { width: 100vw; height: 100vh; background-color: rgb(14, 104, 104); position: relative; }

    .mob_gnb.mob_gnb_wide .mo-wrap { width: 100%; height: 100vh; position: relative; padding: 160px; box-sizing: border-box; }
    .mob_gnb.mob_gnb_wide .gnb { width: 100%; }
    .mob_gnb.mob_gnb_wide .gnb > ul::after { display: block; content: ""; clear: both; height: 0; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li { width: calc(100% /6); float: left; text-align: center; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li > a { display: block; width: 90%; margin: 0 auto; font-size: 36px; font-weight: 700; line-height: 120%; color:#fff; transition: .3s ease; word-break: keep-all; padding-bottom: 20px; border-bottom: 1px solid #ddd; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li:hover a { color: #2ed690; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li ul { display: block; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li ul a { display: inline-block; line-height: 140%; padding: 15px 0 15px 10px; line-height: 130%;  position: relative; font-weight: 400; color:#ddd; font-size: 18px; transition: all .3s ease-in-out; word-break: keep-all; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li ul a:hover { color: #fff; text-decoration: underline; }


    /* 하프창 스타일 */
    .mob_gnb.mob_gnb_half { width: 50%; height: 100vh; background-color: #054b8f; position: absolute; top: 0; left: unset; right: 0; padding: 5%; transform: inherit; box-sizing: border-box; overflow: hidden; }

    .mob_gnb.mob_gnb_half .gnb { width: 100%; height: 80vh; }
    .mob_gnb.mob_gnb_half .gnb > ul { overflow-y: auto; height: 100%; }
    .mob_gnb.mob_gnb_half .gnb > ul > li { padding: 10px 0; }
    .mob_gnb.mob_gnb_half .gnb > ul > li > a { display: block; padding: 25px 0; font-size: 36px; font-weight: 700; line-height: 120%; color:#fff; transition: .3s ease; word-break: keep-all; padding-bottom: 20px; }
    .mob_gnb.mob_gnb_half .gnb > ul > li:hover > a { color: pink; }

    .mob_gnb.mob_gnb_half .gnb > ul > li > .two-depth-wrap { display: none; }
    .mob_gnb.mob_gnb_half .gnb > ul > li ul a { display: inline-block; font-weight: 300; font-size: 22px; line-height: 140%; padding: 12px 0 12px 20px; color: #fff; }

    .mobile_menu.mobileOn.rightIn .mob_gnb.mob_gnb_half { right: -50%; }  /* 하프창 크기 그대로 혹은 이상 */

    .mobile_menu .mob_gnb.mob_gnb_half.ani_circle { background-color: transparent; }
    .mobile_menu .mob_gnb.mob_gnb_half.ani_circle .bg { width: 0; height: 0; border-radius: 50%; background-color: #054b8f; position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }
    .mobile_menu .mob_gnb.mob_gnb_half.ani_circle .mobile-menu-wrap { position: relative; }


    /* 이미지창 스타일 */
    .mob_gnb.mob_gnb_img .gnb { position: absolute; top: 0; left: 0; width: 60%; height: 100%; box-sizing: border-box; padding: 5% 10% 0; background: #6f6353 url("/resources/img/example/vert_bg00.jpg") center top/cover no-repeat; transition: background-image .5s ease-in-out; background-attachment: fixed; }

        /* #이미지창 이미지 변경용 - js로 제어(header_ham_menu.js), 선택자는 그냥 둘 것 */
        .mob_gnb.mob_gnb_img .gnb#linum_1 { background-image:url("/resources/img/example/vert_bg01.jpg"); }
        .mob_gnb.mob_gnb_img .gnb#linum_2 { background-image:url("/resources/img/example/vert_bg02.jpg"); }
        .mob_gnb.mob_gnb_img .gnb#linum_3 { background-image:url("/resources/img/example/vert_bg03.jpg"); }
        .mob_gnb.mob_gnb_img .gnb#linum_4 { background-image:url("/resources/img/example/vert_bg04.jpg"); }
        .mob_gnb.mob_gnb_img .gnb#linum_5 { background-image:url("/resources/img/example/vert_bg05.jpg"); }
        .mob_gnb.mob_gnb_img .gnb#linum_6 { background-image:url("/resources/img/example/vert_bg06.jpg"); }

    .mob_gnb.mob_gnb_img .gnb > ul { width: 100%; text-align: left; }
    .mob_gnb.mob_gnb_img .gnb > ul > li { width: 100%; vertical-align: top; box-sizing: border-box; margin: 5px 0 35px; }
    .mob_gnb.mob_gnb_img .gnb > ul > li > a { width: 100%; line-height: 140%; color:#fff; display: inline-block; font-weight: 600; font-size: 32px; transition: all .3s ease; word-break: keep-all; position: relative; }
    .mob_gnb.mob_gnb_img .gnb > ul > li ul { margin-top: 20px; }
    .mob_gnb.mob_gnb_img .gnb > ul > li ul li { display: inline-block; margin-right: 2%; }
    .mob_gnb.mob_gnb_img .gnb > ul > li ul li:last-child { margin-right: 0; }
    .mob_gnb.mob_gnb_img .gnb > ul > li ul a { display: inline-block; line-height: 140%; position: relative; font-weight: 100; color: #fff; font-size: 18px; transition: all .3s ease-in-out; word-break: keep-all; padding-left: 5px; border-bottom: 1px solid rgba(255,255,255,0); }
    .mob_gnb.mob_gnb_img .gnb > ul > li ul a:hover { border-bottom: 1px solid #fff; }

    .mobile_menu .mob_gnb_img .ham_bg2 { width: 40%; height: 100%; position: absolute; top: 0; right: 0; background: #d4b290; padding: 10% 5% 5%; box-sizing: border-box; }
    .mobile_menu .mob_gnb_img .bg_box { display: inline-block; width: 100%; height: 100%; position: relative; }
    .mobile_menu .mob_gnb_img .bg_box .info { text-align: right; width: 100%; color: #6f6353; }
    .mobile_menu .mob_gnb_img .bg_box .info .ti { font-size: 32px; }
    .mobile_menu .mob_gnb_img .bg_box .info .tt { margin-top: 10px;line-height: 140%; }
    .mobile_menu .mob_gnb_img .bg_box .circle { width: 152px; height: 152px; display: inline-block; line-height: 152px; position: relative; cursor: pointer; float: right; margin-top: 50px; text-align: center; }
    .mobile_menu .mob_gnb_img .bg_box .circle::before {content: ""; width: 100%; height: 100%; background: url("/resources/img/example/vert_circle.png") no-repeat; position: absolute; left: 0; top: 0; animation: rotate 7s linear infinite; }
    
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
    }

    .mobile_menu .mob_gnb_img .bg_box .circle .arw { font-size: 19px; transition: all .3s ease-in-out; display: inline-block; }
    .mobile_menu .mob_gnb_img .bg_box .circle:hover .arw { transform: translateX(10px); }
    .mobile_menu .mob_gnb_img .bg_box .sns { position: absolute; bottom: 0; width: 100%; }
    .mobile_menu .mob_gnb_img .bg_box .sns::before { content: ""; width: calc(100% - 200px); height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #6f6353; }
    .mobile_menu .mob_gnb_img .bg_box .sns .tt { display: inline-block; font-weight: 400; font-size: 14px; float: left; height: 30px; line-height: 30px; position: relative; }
    .mobile_menu .mob_gnb_img .bg_box .btn_box { display: inline-block; float: right; }
    .mobile_menu .mob_gnb_img .bg_box .btn_box > a { width: 32px; height: 30px; background: url("/resources/img/example/vert_sns.png") 0 1.5px no-repeat; display: inline-block; float: left; transition: all .3s ease-in-out; }
    .mobile_menu .mob_gnb_img .bg_box .btn_box > a:hover { opacity: .8; }
    .mobile_menu .mob_gnb_img .bg_box .btn_box > a.ig { background-position: -87px 1.5px; margin-left: 12px; }

    .mobile_menu.mobileOn.slDw-rgIn .mob_gnb.mob_gnb_img .ham_bg2 { right: -40%; } /* .ham_bg2의 가로사이즈 혹은 이상 */

    .mobile_menu.mobileOn.lfIn-slDw .mob_gnb.mob_gnb_img .gnb { left: -60%; } /* .gnb의 가로사이즈 혹은 이상 */


    /* 모달창 스타일 */
    .mob_gnb.mob_gnb_all { width: 100%; height: 100%; position: relative; }
    .mob_gnb.mob_gnb_all .mog-wrap { width: 60%; height: 60vh; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

    .mob_gnb.mob_gnb_all .mog-wrap .menu_box { width: 100%; height: 80px; background-color: #472f4d; }
    .mob_gnb.mob_gnb_all .mog-wrap .menu_box p.txt { color: #fff; font-size: 24px; font-weight: 500; padding: 25px; }

    .mob_gnb.mob_gnb_all .mobile-menu-wrap { width: 100%; max-width: 1280px; height: 640px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .mob_gnb.mob_gnb_all .mobile-menu-wrap .top_box { width: 100%; height: 80px; background-color: pink; }

    .mob_gnb.mob_gnb_all .gnb > ul { width: 100%; }
    .mob_gnb.mob_gnb_all .gnb > ul > li { display: block; width: calc(100% /6); margin-bottom: 35px; vertical-align: top; box-sizing: border-box; text-align: center; float: left; }
    .mob_gnb.mob_gnb_all .gnb > ul > li > a { height: 60px; line-height: 60px; color:#fff;  display:block;  font-weight: 500; font-size: 24px; letter-spacing: -1.5px; transition: .3s ease; word-break: keep-all; background-color: #8f77a3; }

    .mob_gnb.mob_gnb_all .gnb > ul > li ul { display: block; margin-top: 25px; }
    .mob_gnb.mob_gnb_all .gnb > ul > li ul li { margin-bottom: 0; }
    .mob_gnb.mob_gnb_all .gnb > ul > li ul a { display: block; color: #444; padding: 10px; font-size: 18px; }
    .mob_gnb.mob_gnb_all .gnb > ul > li ul a:hover { text-decoration: underline; }


    /* 삼등분창 스타일 */
    .mob_gnb.mob_gnb_triple { display: block; width: 100vw; height: 100vh; background: url('/resources/img/main/main08_vis01.jpg') no-repeat right center /cover; overflow: hidden; }

    .mob_gnb.mob_gnb_triple .mo-wrap { width: 70%; height: 80%; position: absolute; top: 0; right: 0; padding: 100px; box-sizing: border-box; background-color: rgba(9, 15, 52, 90%); }
    .mob_gnb.mob_gnb_triple .mo-wrap .nav { width: 100%; height: 100%; }
    .mob_gnb.mob_gnb_triple .gnb { width: 100%; height: 100%; overflow-y: auto; }

    .mob_gnb.mob_gnb_triple .gnb ul > li > a { display: block; font-size: 34px; font-weight: 500; color: #fff; padding: 25px 0; }
    .mob_gnb.mob_gnb_triple .gnb ul > li > .two-depth-wrap { height: auto; padding-left: 20px; }
    .mob_gnb.mob_gnb_triple .gnb ul > li > .two-depth-wrap li { display: inline-block; margin-right: 20px; }
    .mob_gnb.mob_gnb_triple .gnb ul > li > .two-depth-wrap li a { font-size: 20px; font-weight: 300; color: #fff; padding: 10px 0; }

    .mob_gnb.mob_gnb_triple .ham_bg1 { width: 70%; height: 20%; position: absolute; bottom: 0; right: 0; background: #090f34; }
    
    .mob_gnb.mob_gnb_triple .ham_bg2 { display: block; width: 30%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 80px; background:#6f6353; background: url("/resources/img/example/vert_bg00.jpg") center top/cover no-repeat; background-attachment: fixed; }
    .mob_gnb.mob_gnb_triple .ham_bg2 .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); font: 800 20px 'Montserrat'; text-transform: uppercase; color: rgba(255,255,255,.2); letter-spacing: 10px; }

    .mobile_menu.slDw-rgIn .mob_gnb_triple .mo-wrap { right: -70%; } /* .mo-wrap의 가로사이즈 혹은 이상 */
    .mobile_menu.slDw-rgIn .mob_gnb_triple .ham_bg1 { bottom: -20%; }

    .mobile_menu.lfIn-slDw .mob_gnb_triple .ham_bg2 { left: -30%; } /* .ham_bg2의 가로사이즈 혹은 이상 */
    .mobile_menu.lfIn-slDw .mob_gnb_triple .ham_bg1 { bottom: -20%; }

    /* .ham_bg1 커스텀 */
    .mob_gnb.mob_gnb_triple .ham_bg1 .icon-wrap { width: 100%; height: 100%; padding: 50px 100px; box-sizing: border-box; }
        .sns-ico ul { display: flex; }
        .sns-ico ul > li { margin-right: 15px; }
        .sns-ico ul > li:last-child { margin-right: 0; }
        .sns-ico ul > li > a { display: block; width: 40px; height: 40px; text-indent: -9999px; position: relative; }
        .sns-ico ul > li > a::after { content: ''; width: 100%; height: 100%; background: url('/resources/img/common/ico_sns_ytb.png')no-repeat center/36px 36px; position: absolute; top: 0; left: 0; }
        .sns-ico ul > li > a.ico-ytb::after { background-image: url('/resources/img/common/ico_sns_ytb.png');}
        .sns-ico ul > li > a.ico-fbk::after { background-image: url('/resources/img/common/ico_sns_fbk.png');}
        .sns-ico ul > li > a.ico-twt::after { background-image: url('/resources/img/common/ico_sns_twt.png');}
        .sns-ico ul > li > a.ico-isg::after { background-image: url('/resources/img/common/ico_sns_isg.png');}
        .sns-ico ul > li > a.ico-kkt::after { background-image: url('/resources/img/common/ico_sns_kkt.png');}
/* mobile menu e*/



@media screen and (min-width:501px){
    /* mobile_menu *//*모바일에서 PC로 바뀔 때 메뉴 간 간격 오류 수정*/
    .mobile_menu .gnb > ul > li > ul { height: auto ; }
}

@media screen and (max-width:1366px){
    .mob_gnb.mob_gnb_half { width: 80%; }
}

@media screen and (max-width:1024px){
    /* mobile_menu */
    .mobile_menu .mob_gnb .gnb > ul > li ul { display: none; }

    /* mob_gnb_wide */
    .mob_gnb.mob_gnb_wide .mo-wrap { padding: 120px; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li { width: 100%; text-align: left; float: unset; }
    .mob_gnb.mob_gnb_wide .gnb > ul > li > a { width: 100%; }



    /*.mob_gnb_img*/
    .mobile_menu .mob_gnb_img .ham_bg2 { display: none; }
    .mobile_menu .mob_gnb_img .gnb { width: 100%; height: 100vh; padding: 10%; position: relative; }
        .mob_gnb.mob_gnb_img .gnb#linum_1,
        .mob_gnb.mob_gnb_img .gnb#linum_2,
        .mob_gnb.mob_gnb_img .gnb#linum_3,
        .mob_gnb.mob_gnb_img .gnb#linum_4,
        .mob_gnb.mob_gnb_img .gnb#linum_5,
        .mob_gnb.mob_gnb_img .gnb#linum_6 { background-image:url("/resources/img/example/vert_bg01.jpg"); }
    .mobile_menu .mob_gnb_img .gnb::after { content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; z-index: 1; }
    .mobile_menu .mob_gnb_img .gnb ul { width: 100%; max-width: none; text-align: left; overflow-y: auto; position: relative; z-index: 2; }
    .mobile_menu .mob_gnb_img .gnb ul li { margin-bottom: 8%;}
    .mobile_menu .mob_gnb_img .gnb > ul ul { display: none; }

    /*.mob_gnb_notice*/
    .mobile_menu .mob_gnb_triple .mo-wrap { width: 100%; height: 100%; }
    .mobile_menu .mob_gnb_triple .ham_bg1 { display: none; }
    .mobile_menu .mob_gnb_triple .ham_bg2 { display: none; }
}

@media screen and (max-height:860px){
    /* mobile_menu *//*높이 값이 낮을 때, overflow-y 스크롤 추가*/
    .mobile_menu .gnb { overflow-y: scroll; }


}

@media screen and (max-width:768px){
    /* mob_gnb_half */
    .mob_gnb.mob_gnb_half { width: 100%; }
    
    /*.mob_gnb_img*/
    .mobile_menu .mob_gnb_img .gnb { padding: 25% 10% 0; }

    /*.mob_gnb_basic*/
    .mobile_menu .mob_gnb_basic .gnb { width: 100%; overflow-y: scroll; }
    .mobile_menu .mob_gnb_basic .gnb > ul > li > ul li:first-child {margin-top: 0;}
    .mobile_menu .mob_gnb_basic .gnb > ul > li > ul li {display: block; margin-left: 0; margin-top: 15px;}
    .mobile_menu .mob_gnb_basic .gnb > ul > li > ul a {font-size: 17px;/*width: 80%;*/}

    /*.mob_gnb_all*/
    .mob_gnb.mob_gnb_all .mobile-menu-wrap { top: 0; transform: translate(-50%, 0); height: 100%; }
    .mobile_menu .mob_gnb_all .gnb { max-height: none; height: calc(100vh - 67px); background-size: 50%; }
    .mob_gnb.mob_gnb_all .gnb > ul > li { width: 100%; text-align: left; margin: 0; float: unset; }
    .mob_gnb.mob_gnb_all .gnb > ul > li > a { height: auto; border-right: 0; padding: 25px 30px; line-height: 1.2; box-sizing: border-box; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
    .mob_gnb.mob_gnb_all .gnb > ul > li > a.open { font-weight: 700; }
    .mob_gnb.mob_gnb_all .gnb > ul > li > a::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #ddd; position: absolute; right: 20px; top: 50%; transform: translate3d(0, -50%, 0);}
    .mob_gnb.mob_gnb_all .gnb > ul > li > a.open::before { border-bottom: 10px solid #4a0553; border-top: 0; }

    .mob_gnb.mob_gnb_all .gnb > ul > li ul { background:#f9f9f9; margin: 0; padding: 10px 0; }
    .mobile_menu .mob_gnb_all .gnb > ul > li ul > li { margin: 0; border-bottom: 1px dashed #e2e2e2; }
    .mobile_menu .mob_gnb_all .gnb > ul > li ul > li > a {padding: 18px 30px; font-size: 16px; box-sizing: border-box; text-align: left;}
    .mobile_menu .mob_gnb_all .gnb > ul > li ul > li:last-child { border-bottom: 0; }

    /* mobile_menu */

    .mobile_menu .mob_gnb_basic .gnb > ul > li > a {font-size: 45px;}
}