/*header*/ #header{position:relative; z-index:1000; width:100%; height:120px; background:#fff; box-shadow:3px 3px 15px rgba(0,0,0,0.15); } #header:after{display:block; content:''; clear:both} .header-top{background:#005629; } .header-top .header-top-wrap{width:1340px; margin:0 auto;} .header-top:after{display:block; content:''; clear:both;} .header-top .header-top-wrap > div > a{display:inline-block; color:#fff; float:left; font-size:14px; letter-spacing:-0.05em; padding:0 15px; line-height:45px; } .header-top .stie{float:left;} .header-top .stie a{background:#0fa13c; padding:0 40px 0 50px !important; position:relative; font-size:16px !important;} .header-top .stie a:before{position:absolute; content:""; background-image:url('/_res/tongmyong/tuhome/img/main/head-ip-ico.png'); background-repeat:no-repeat; top:16px; left:23px; width:15px; height:13px;} .header-top .other{float:right; position:relative;} .header-top .other > a{padding-left:40px; background-repeat:no-repeat; background-position:15px 50% ;} .header-top .other a.login{background-image:url('/_res/tongmyong/tuhome/img/common/ico-htop1.png');} .header-top .other a.language-btn{background-image:url('/_res/tongmyong/tuhome/img/common/ico-htop2.png'); padding:0 40px; position:relative; width:108px;} .header-top .other a.language-btn:after{display:block; content:''; width:25px; height:45px; position:absolute; top:0; right:0; background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow.png') no-repeat 50% 50%; transform 200ms ease-in-out} .header-top .other a.language-btn.on:after{transform:rotateX(180deg)} .header-top .other .language-list{display:none; width:108px; position:absolute; top:45px; right:0; background:#005629; border:1px solid #005629; border-right:none; z-index:1000;} .header-top .other .language-list li{border-bottom:1px solid #005629;} .header-top .other .language-list li a{display:block; font-size:14px; color:#fff; padding:10px 15px; background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow2.png') no-repeat 90% 50% } .header-top .other a.popupzone-btn{padding:0 40px 0 15px; position:relative} .header-top .other a.popupzone-btn:after{display:block; content:''; width:25px; height:45px; position:absolute; top:0; right:0; background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow.png') no-repeat 50% 50%; transform 200ms ease-in-out} .header-top .other a.popupzone-btn.on:after{transform:rotateX(180deg)} .header-bottom{position:relative; height:80px; background:#fff} .header-bottom-wrap{width:1340px; margin:0 auto;} .header-bottom h1{float:left; margin-left:15px; } .header-bottom h1 a{display:block; width:165px; height:75px; background:url('/_res/tongmyong/tuhome/img/common/img-hbot-logo.gif') no-repeat 0 50%; font-size:0; text-indent: -9999em;} .header-bottom .right-btn{float:right} .header-bottom .right-btn > a{display:inline-block; width:80px; height:80px; background-repeat:no-repeat; background-position:50% 50%; font-size:0; text-indent: -9999em; float:left;} .header-bottom .right-btn a.btn-search{background-image:url('/_res/tongmyong/tuhome/img/common/btn-hbot-search.png'); transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} .header-bottom .right-btn a.btn-search.on{background:#0e2824 url('/_res/tongmyong/tuhome/img/common/btn-hbot-search-close.png') no-repeat 50% 50%} .header-bottom .right-btn a.btn-allmenu{background-image:url('/_res/tongmyong/tuhome/img/common/btn-hbot-allmenu.png'); background-color:#0fa13c; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; display:none;} .header-bottom .right-btn a.btn-allmenu:hover, .header-bottom .right-btn a.btn-allmenu:focus{background-color:#098e32; } .header-bottom .search-box{display:none; position:absolute; top:80px; left:0; width:100%; background:#0e2824; padding:70px 0} .header-bottom .search-box .searh-wrap{margin:0 auto; width:700px; border-bottom:1px solid #fff; padding-right:50px; position:relative;} .header-bottom .search-box .searh-wrap input{border:none; line-height:50px; height:50px; width:100%; background:#0e2824; color:#fff; font-size:18px;} .header-bottom .search-box .searh-wrap input::-ms-input-placeholder {color: #314c48;} .header-bottom .search-box .searh-wrap input::-webkit-input-placeholder {color: #314c48;} .header-bottom .search-box .searh-wrap input::-moz-placeholder {color: #314c48;} .header-bottom .search-box .searh-wrap button{width:50px; height:50px; background:url('/_res/tongmyong/tuhome/img/common/btn-hbot-search-but.png') no-repeat 50% 50%; font-size:0; text-indent: -999em; position:absolute; bottom:0; right:0; border:none; cursor:pointer;} .popupzone{width:100%; background:#0c3937; height:200px; overflow:hidden; display:block; } .popupzone .pop-wrap{width:1340px; margin: auto; position: relative} .popupzone .pop-wrap .slick-slide{text-align:center; /*height:200px;*/} .popupzone .pop-wrap .slick-slide img{display:inline-block;height: 170px;margin-top: 15px;} .popupzone .pop-wrap .slick-arrow{border:none; font-size:0; text-indent: -9999em; width:35px; height:35px; position:absolute; top:50%; margin-top:-15px; z-index:20} .popupzone .pop-wrap .slick-arrow.slick-prev{background:url('/_res/tongmyong/tuhome/img/common/btn-popup-arrow1.png') 50% 50% no-repeat; left:-35px;} .popupzone .pop-wrap .slick-arrow.slick-next{background:url('/_res/tongmyong/tuhome/img/common/btn-popup-arrow2.png') 50% 50% no-repeat; right:-35px;} .popupzone .pop-control{position:absolute; z-index:50; top:85px;right:10px; } .popupzone .pop-control a{display:block; width:35px; height:35px; font-size:0; text-indent: -9999em;background-repeat:no-repeat; background-position:50% 50%; float:left} .popupzone .pop-control a.btn-stop{background-image:url('/_res/tongmyong/tuhome/img/common/btn-popup-stop.png'); } .popupzone .pop-control a.btn-play{display:none;background-image:url('/_res/tongmyong/tuhome/img/common/btn-popup-play.png'); } .popupzone .pop-control a.btn-close{background-image:url('/_res/tongmyong/tuhome/img/common/btn-popup-close.png'); margin-left:10px;} .popupzone .pop-1{} .popupzone .pop-1 > a{display:block; width:500px; height:200px; margin:0 auto;text-align:left; position:relative; background:url('/_res/tongmyong/tuhome/img/main/img-popup1.gif') no-repeat 0 100% ; padding:60px 0 20px 180px;} .popupzone .pop-1 > a i{display:block; font-style:normal;} .popupzone .pop-1 > a i.stxt{color:#fff;} .popupzone .pop-1 > a i.btxt{width:130px;height:85px; margin-top:15px; background:url('/_res/tongmyong/tuhome/img/main/img-popup2.gif') no-repeat -5px 0; font-size:0; text-indent: -9999em;} .popupzone .pop-1 > a i.btn{position:absolute; top:50%; right:0; line-height:35px; color:#fff; border-radius:20px; padding:0 20px; border:1px solid #fff; } #gnb{width:1075px; float:left;text-align:center} #gnb .gnb{display:inline-block;vertical-align:top;} #gnb .gnb > li{float:left;} #gnb .gnb > li > a{position:relative;display:block;padding:0 36px; text-align:center; font-size:18px; color:#000; font-family: 'NotoKrB';line-height:80px; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} #gnb .gnb > li.on > a, #gnb .gnb > li > a:hover, #gnb .gnb > li.open > a, #gnb .gnb > li > a:focus{color:#005629; } #gnb .gnb > li > a::before{position:absolute;top:12px;left:28px;width:17px;height:17px;content:'';opacity:0;background:url('/_res/tongmyong/tuhome/img/common/gnb_ic.png') no-repeat;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} #gnb .gnb > li.on > a::before, #gnb .gnb > li.open > a::before, #gnb .gnb > li > a:hover::before{top:14px;opacity:1;} #gnb .gnb > li.on > a::before{background:url('/_res/tongmyong/tuhome/img/common/gnb_ic_on.png') no-repeat;} #gnb .gnb > li.on.open > a::before, #gnb .gnb > li.on > a:hover::before{background:url('/_res/tongmyong/tuhome/img/common/gnb_ic.png') no-repeat;} #gnb .gnb-box{display:none; position:absolute; z-index:900; top:80px; left:0; width:100%; background:rgba(11, 35, 28, 0.98); } #gnb .gnb > li.o.gnb-box{display:block !important; } #gnb .gnb-box-wrap{position:relative; width:1340px; margin:0 auto; padding:20px 0} #gnb .width{width:1600px;} #gnb .gnb-box .gnb-2depth{display:table; width:100%} #gnb .gnb-box .gnb-2depth > li{display:table-cell;border-left:1px solid rgba(255, 255, 255, 0.2); padding:15px 4px; box-sizing:border-box} #gnb .gnb > li:nth-child(2) .gnb-box .gnb-2depth > li{padding:15px 4px 50px;} /*네비 2뎁스 칸조절*/ #gnb .gnb-box .gnb-2depth.v8 > li{width:12.5%} #gnb .gnb-box .gnb-2depth.v7 > li{width:14.285%} #gnb .gnb-box .gnb-2depth.v6 > li{width:16.666%} #gnb .gnb-box .gnb-2depth.v5 > li{width:20%} #gnb .gnb-box .gnb-2depth.v4 > li{width:25%} #gnb .gnb-box .gnb-2depth.v3 > li{width:33.333%} #gnb .gnb-box .gnb-2depth.v2 > li{width:50%} #gnb .gnb-box .gnb-2depth > li:last-child{ border-right:1px solid rgba(255, 255, 255, 0.2)} #gnb .gnb-box .gnb-2depth > li > a{display:block; color:#fff; font-size:1.1rem; padding-bottom:15px;} #gnb .gnb-box .gnb-3depth{overflow:hidden;} #gnb .gnb-box .gnb-3depth li a{display:block; color:#9ac1b2; padding-bottom:10px; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} #gnb .gnb-box .gnb-3depth li a:hover, #gnb .gnb-box .gnb-3depth li a:focus{color:#0fa13c} #gnb .gnb-box .gnb-3depth li a + .gnb-4depth{margin-top:-5px} /* #gnb .gnb-box .gnb-4depth li a{color:#568e7d;font-size:13px;padding-bottom:0} */ #gnb .gnb-box .gnb-4depth li a{color:#9ac1b2;font-size:13px;padding-bottom:0} #gnb .gnb-box .gnb-4depth li:last-child a{padding-bottom:10px} #gnb ul li:nth-child(2) .gnb-box-wrap{width:1650px;} /* 20230824 ye 2024학년도 모집학과 메뉴 변경 */ /*#gnb .gnb-box .gnb-2depth.v13{padding-right:11%; border-right:1px solid rgba(255, 255, 255, 0.2); overflow:hidden; } #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(1){width:10.5%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(2){width:11%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(3){width:11%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(4){width:11%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(5){width:11.5%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(6){width:11%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(7){border-right:1px solid rgba(255, 255, 255, 0.2);width: 12%;} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(8){width:11%;border-left:none;border-right: 1px solid rgba(255, 255, 255, 0.2);} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(9){width:11%;border-left:none;border-right: 1px solid rgba(255, 255, 255, 0.2);} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(10){position:absolute;width:11%;top:20px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(11){position:absolute;width:11%;top:60px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(12){position:absolute;width:11%;top:140px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(13){position:absolute;width:12%;top:100px;right: -7px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(14){position:absolute;width:12%;top: 65px;right: -7px;border-left:none;border-right:none}*/ /*#gnb .gnb > li:nth-child(2) .gnb-box-wrap{padding: 80px 0 20px 0;position:relative;} #gnb .gnb > li:nth-child(2) .gnb-box-wrap:before{content:'2024학년도 모집학과';position: absolute;top: 25px;color: #ffff00;font-size: 25px;font-weight: 600;transform: translateX(-50%);} #gnb .gnb > li:nth-child(2) .gnb-box-wrap::after{position:absolute;content:'(노란색: 신설학과)';color:#ffff00;display:block;right:36%;font-size:15px;top:25px;}*/ #gnb .gnb-box .gnb-2depth.v15{padding-right:11%; border-right:1px solid rgba(255, 255, 255, 0.2); overflow:hidden; } #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(1){width:10.5%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(2){width:11%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(3){width:11%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(4){width:11%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(5){width:11.5%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(6){width:11%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(7){border-right:1px solid rgba(255, 255, 255, 0.2);width: 12%;} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(8){width:11%;border-left:none;border-right: 1px solid rgba(255, 255, 255, 0.2);} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(9){width:11%;border-left:none;border-right: 1px solid rgba(255, 255, 255, 0.2);} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(10){position:absolute;width:11%;top:20px;right: 0px;border-left:none;border-right:none}/* 위아래 간격 40px 맞춰서 늘리기 */ /* #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(11){position:absolute;width:11%;top:270px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(12){position:absolute;width:11%;top:310px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v13 > li:nth-child(13){position:absolute;width:12%;top:350px;right: -7px;border-left:none;border-right:none} */ #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(11){position:absolute;width:11%;top:300px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(12){position:absolute;width:11%;top:340px;right: 0px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(13){position:absolute;width:12%;top:380px;right: -7px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(14){position:absolute;width:12%;top:380px;right: -7px;border-left:none;border-right:none} #gnb .gnb-box .gnb-2depth.v15 > li:nth-child(15){position:absolute;width:12%;top:380px;right: -7px;border-left:none;border-right:none} /*#gnb .gnb-box .gnb-2depth.v10 > li:nth-child(9){position:absolute; width:11%; top:65px; right:0; border-left:none} #gnb .gnb-box .gnb-2depth.v10 > li:nth-child(10){position:absolute; width:11%; top:110px; right:0; border-left:none; border-right:none}*/ /* 20230407 ye 메뉴명 컬러변경 #pc-gnb-menu-8761{color:yellow !important;} */ /* 20230419 ye gnb 2023학년도 학과 추가 */ #pc-gnb-menu-8861, #pc-gnb-menu-8869, #pc-gnb-menu-8872, #pc-gnb-menu-8877, #pc-gnb-menu-8879, #pc-gnb-menu-8884, #pc-gnb-menu-8886, #pc-gnb-menu-8888, #pc-gnb-menu-8974 {color:yellow !important;font-size:14px !important;} /* 20230818 ye gnb 2024학년도 신설학과 #pc-gnb-menu-10263, #pc-gnb-menu-10271, #pc-gnb-menu-10275, #pc-gnb-menu-10276, #pc-gnb-menu-10279, #pc-gnb-menu-10294, #pc-gnb-menu-10303, #pc-gnb-menu-10304, #pc-gnb-menu-10311, #pc-gnb-menu-10485, #pc-gnb-menu-10486, #pc-gnb-menu-10487, #pc-gnb-menu-10488, #pc-gnb-menu-10489 {color:yellow !important;}*/ /* 20230428 ye 2024학년도 세부전공 구분 */ /* #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9443, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9444, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9445, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9446, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9447, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9448{font-size:0.75em !important;color: #227c61;} */ #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9443, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9444, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9445, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9446, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9447, #gnb .gnb-box .gnb-4depth li #pc-gnb-menu-9448{font-size:0.75em !important;color: #9ac1b2;} #mGnb, #mGnbN{display:none} #m-menu{display:none} @media screen and (max-width:1600px){ .popupzone .pop-control{top:155px; } } @media screen and (max-width:1400px){ .header-top .header-top-wrap, .header-bottom-wrap{width:100%} #gnb{width:73%} #gnb .gnb > li{} #gnb .gnb > li > a{padding:0 22px;font-size:17px;} #gnb .gnb > li > a::before{left:14px} #gnb .gnb-box-wrap{width:100%} #gnb .gnb-box-wrap.width{width:100%} .popupzone .pop-wrap{width:100%} .popupzone .pop-wrap .slick-arrow.slick-prev{left:10px;} .popupzone .pop-wrap .slick-arrow.slick-next{right:10px;} .popupzone .pop-wrap img{height:100%; } } /* @media screen and (max-width:1024px){ .header-top > div > a.enter, .header-bottom .right-btn a.btn-allmenu{display:none;} .header-bottom h1{float:none; width:165px;} .header-bottom .right-btn a.btn-search{position:absolute; top:0; right:80px;} .header-bottom .search-box{padding:30px} .header-bottom .search-box .searh-wrap{width:100%} .header-bottom h1 a{position: static; width:100%; background-size:auto 55%; background-position:0 48%} #gnb{display:none; } #mGnb{display:none; width:50%; background:#fff; height:100%; position:fixed; right:-500px; top:0; overflow-y:scroll; padding:0; z-index:100; box-shadow:3px 3px 15px rgb(0 0 0 / 15%)} #mGnb.on{right:0} #mGnb .m-title{ background:#0fa13c; color:#fff; font-size:1.4rem; line-height:70px; font-family: 'NotoKrB'; padding:0 20px } #mGnb #m-menu-close{position:absolute; top:0; right:0; width:70px; height:70px; font-size:0; text-indent:-9999em; background:#005629 url('/_res/tongmyong/tuhome/img/common/mobile-gnb-close.png') no-repeat 50% 50%; background-size:50%} #mGnb .mGnb{padding:0 10px} #mGnb .mGnb > li.on{border-bottom:1px solid #efefef;} #mGnb .mGnb > li > a{display:block; font-size:17px; text-align:left; border-bottom:1px solid #efefef; line-height:60px; position:relative; padding-left:15px} #mGnb .mGnb > li > a:after{display:block; content:''; width:60px; height:60px; background:url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul1-off.png') no-repeat 50% 50%; position:absolute; top:0; right:0} #mGnb .mGnb > li.on > a:after{background:url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul1-on.png') no-repeat 50% 50%} #mGnb .mGnb > li.on > a{font-family: 'NotoKrB'; color:#005629; } #mGnb .mGnb > li .gnb-2depth{display:none} #mGnb .mGnb .gnb-2depth > li {display:block; width:auto; float:none; border:none; padding:0} #mGnb .mGnb .gnb-2depth > li > a{display:block; position:relative; font-size:1rem; color:#000; padding:15px 15px 15px 25px} #mGnb .mGnb .gnb-2depth > li > a:before{width:3px; height:3px; content:''; background:#979797; position:absolute; top:50%; left:15px;} #mGnb .mGnb .gnb-2depth > li > a:after{width:17px; height:9px; content:''; background: url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul2-off.png') no-repeat 50% 50%; position:absolute; top:45%; right:15px;} #mGnb .mGnb .gnb-2depth > li.on > a{background:#246d58; color:#fff;} #mGnb .mGnb .gnb-2depth > li.on > a:before{background:#fff;} #mGnb .mGnb .gnb-2depth > li.on > a:after{ background: url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul2-on.png') no-repeat 50% 50%} #mGnb .mGnb .gnb-3depth{display:none; background:#e0e4e3; padding:0 15px;} #mGnb .mGnb .gnb-3depth li a{display:block; color:#000; border-bottom:1px solid #cdd0cf; padding:11px 0} #mGnb .mGnb .gnb-3depth li:last-child a{border-bottom:none;} #m-menu{position:absolute; top:0; right:0; width:80px; height:80px; background:#0fa13c url('/_res/tongmyong/tuhome/img/common/btn-hbot-allmenu.png') no-repeat 50% 50%; background-size:45%; font-size:0; text-indent:-9999em; display:block;} #mGnbN{width:100%; background:#fff; height:100%; position:fixed; right:-100%; top:0; overflow-y:scroll; padding:0; z-index:100; box-shadow:3px 3px 15px rgb(0 0 0 / 15%)} #mGnbN.on{right:0} #mGnbN::after{position:absolute;left:0;top:0;width:145px;height:100%;content:'';background:#e0e4e3;} #mGnbN .m-title{position:relative;background:#fff;padding:15px 20px 0;height:70px;z-index:3} #mGnbN .m-title .logo{display:block; width:111px; height:34px; background:url('/_res/tongmyong/tuhome/img/common/img-hbot-logo.gif') no-repeat;background-size:100%;text-indent: -9999em;overflow:hidden} #mGnbN #m-menu-close{position:absolute; top:0; right:0; width:70px; height:70px; font-size:0; text-indent:-9999em; background:#005629 url('/_res/tongmyong/tuhome/img/common/mobile-gnb-close.png') no-repeat 50% 50%; background-size:40%} #mGnbN .order{position:relative;background:#0d3d22;z-index:3} #mGnbN .order > a, #mGnbN .order .langBox a{display:inline-block;padding:0 10px 0 40px;font-size:13px;color:#fff;line-height:40px; background-repeat:no-repeat; background-position:15px 50% ;} #mGnbN .order a.login{background-image:url('/_res/tongmyong/tuhome/img/common/ico-htop1.png');} #mGnbN .order .langBox{position:relative;display:inline-block} #mGnbN .order a.language-btn{background-image:url('/_res/tongmyong/tuhome/img/common/ico-htop2.png'); padding:0 40px; position:relative; width:108px;} #mGnbN .order a.language-btn:after{display:block; content:''; width:25px; height:40px; position:absolute; top:0; right:0; background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow.png') no-repeat 50% 50%; transform 200ms ease-in-out} #mGnbN .order a.language-btn.on:after{transform:rotateX(180deg)} #mGnbN .order .language-list{display:none; width:108px; position:absolute; top:40px; right:0; background:#005629; border:1px solid #0d3d22;border-top:0;z-index:1000;} #mGnbN .order .language-list li{border-bottom:1px solid #005629;} #mGnbN .order .language-list li a{display:block; font-size:13px; color:#fff; padding:10px 15px; line-height:20px;background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow2.png') no-repeat 90% 50% } #mGnbN .mGnbN{position:relative;height:calc(100vh - 110px);overflow:auto;z-index:2} #mGnbN .mGnbN > li > a{position:relative;display:block;padding-top:90px;width:145px;font-size:15px;color:#000;height:140px;font-weight:500;text-align:center;background:#e0e4e3} #mGnbN .mGnbN > li > a::before{position:absolute;top:20px;left:0;width:100%;height:65px;content:'';background-repeat:no-repeat;background-position:center top;} #mGnbN .mGnbN > li:nth-child(1) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic1.png') } #mGnbN .mGnbN > li:nth-child(2) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic2.png') } #mGnbN .mGnbN > li:nth-child(3) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic3.png') } #mGnbN .mGnbN > li:nth-child(4) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic4.png') } #mGnbN .mGnbN > li:nth-child(5) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic5.png') } #mGnbN .mGnbN > li:nth-child(6) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic6.png') } #mGnbN .mGnbN > li:nth-child(7) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic7.png') } #mGnbN .mGnbN > li:nth-child(8) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic8.png') } #mGnbN .mGnbN > li.on > a, #mGnbN .mGnbN > li.active > a{color:#fff;background:#005629} #mGnbN .mGnbN > li.on > a::before, #mGnbN .mGnbN > li.active > a::before{background-position:center bottom} #mGnbN .mGnbN > li.on > ul{display:block} #mGnbN .mGnbN > li > ul{display:none;position:absolute;top:0;left:145px;width:calc(100% - 145px);background:#fff;z-index:50} #mGnbN .mGnbN > li > ul > li{border-bottom:1px solid #e9e9e9} #mGnbN .mGnbN > li > ul > li > a{position:relative;display:block;padding:0 30px;font-size:16px;line-height:55px} #mGnbN .mGnbN > li > ul > li.has-sub > a::after{position:absolute;top:50%;right:20px;width:20px;height:20px;content:'';background:url('/_res/tongmyong/tuhome/img/common/mb_gnb_s_arrow.png') no-repeat center center;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #mGnbN .mGnbN > li > ul > li.has-sub.on > a::after{height:2px;background:#005629} #mGnbN .mGnbN > li > ul > li > ul{display:none;padding:5px 0;background:#0d3d22} #mGnbN .mGnbN > li > ul > li > ul > li > a{display:block;padding:0 40px;font-size:14px;color:#fff;line-height:50px} #mGnbN .mGnbN > li > ul > li > ul > li > ul > li > a{padding:0 45px; line-height:33px;display:block; color:#638773; font-size:13px;} #mGnbN .mGnbN > li > ul > li > ul > li > ul {display:block;padding:5px 0;background:#092a17;} } */ /*20240424 모바일 메뉴 : 단과소개 버튼 추가 염채은*/ @media screen and (max-width:1024px){ .header-top > div > a.enter, .header-bottom .right-btn a.btn-allmenu{display:none;} .header-bottom h1{float:none; width:165px;} .header-bottom .right-btn a.btn-search{position:absolute; top:0; right:80px;} .header-bottom .search-box{padding:30px} .header-bottom .search-box .searh-wrap{width:100%} .header-bottom h1 a{position: static; width:100%; background-size:auto 55%; background-position:0 48%} #gnb{display:none; } #mGnb{display:none; width:50%; background:#fff; height:100%; position:fixed; right:-500px; top:0; overflow-y:scroll; padding:0; z-index:100; box-shadow:3px 3px 15px rgb(0 0 0 / 15%)} #mGnb.on{right:0} #mGnb .m-title{ background:#0fa13c; color:#fff; font-size:1.4rem; line-height:70px; font-family: 'NotoKrB'; padding:0 20px } #mGnb #m-menu-close{position:absolute; top:0; right:0; width:70px; height:70px; font-size:0; text-indent:-9999em; background:#005629 url('/_res/tongmyong/tuhome/img/common/mobile-gnb-close.png') no-repeat 50% 50%; background-size:50%} #mGnb .mGnb{padding:0 10px} #mGnb .mGnb > li.on{border-bottom:1px solid #efefef;} #mGnb .mGnb > li > a{display:block; font-size:17px; text-align:left; border-bottom:1px solid #efefef; line-height:60px; position:relative; padding-left:15px} #mGnb .mGnb > li > a:after{display:block; content:''; width:60px; height:60px; background:url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul1-off.png') no-repeat 50% 50%; position:absolute; top:0; right:0} #mGnb .mGnb > li.on > a:after{background:url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul1-on.png') no-repeat 50% 50%} #mGnb .mGnb > li.on > a{font-family: 'NotoKrB'; color:#005629; } #mGnb .mGnb > li .gnb-2depth{display:none} #mGnb .mGnb .gnb-2depth > li {display:block; width:auto; float:none; border:none; padding:0} #mGnb .mGnb .gnb-2depth > li > a{display:block; position:relative; font-size:1rem; color:#000; padding:15px 15px 15px 25px} #mGnb .mGnb .gnb-2depth > li > a:before{width:3px; height:3px; content:''; background:#979797; position:absolute; top:50%; left:15px;} #mGnb .mGnb .gnb-2depth > li > a:after{width:17px; height:9px; content:''; background: url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul2-off.png') no-repeat 50% 50%; position:absolute; top:45%; right:15px;} #mGnb .mGnb .gnb-2depth > li.on > a{background:#246d58; color:#fff;} #mGnb .mGnb .gnb-2depth > li.on > a:before{background:#fff;} #mGnb .mGnb .gnb-2depth > li.on > a:after{ background: url('/_res/tongmyong/tuhome/img/common/mobile-gnb-bul2-on.png') no-repeat 50% 50%} #mGnb .mGnb .gnb-3depth{display:none; background:#e0e4e3; padding:0 15px;} #mGnb .mGnb .gnb-3depth li a{display:block; color:#000; border-bottom:1px solid #cdd0cf; padding:11px 0} #mGnb .mGnb .gnb-3depth li:last-child a{border-bottom:none;} #m-menu{position:absolute; top:0; right:0; width:80px; height:80px; background:#0fa13c url('/_res/tongmyong/tuhome/img/common/btn-hbot-allmenu.png') no-repeat 50% 50%; background-size:45%; font-size:0; text-indent:-9999em; display:block;} #mGnbN{width:100%; background:#fff; height:100%; position:fixed; right:-100%; top:0; overflow-y:scroll; padding:0; z-index:100; box-shadow:3px 3px 15px rgb(0 0 0 / 15%)} #mGnbN.on{right:0} #mGnbN::after{position:absolute;left:0;top:0;width:145px;height:100%;content:'';background:#e0e4e3;} #mGnbN .m-title{position:relative;background:#fff;padding:15px 20px 0;height:70px;z-index:3} #mGnbN .m-title .logo{display:block; width:111px; height:34px; background:url('/_res/tongmyong/tuhome/img/common/img-hbot-logo.gif') no-repeat;background-size:100%;text-indent: -9999em;overflow:hidden} #mGnbN #m-menu-close{position:absolute; top:0; right:0; width:70px; height:70px; font-size:0; text-indent:-9999em; background:#005629 url('/_res/tongmyong/tuhome/img/common/mobile-gnb-close.png') no-repeat 50% 50%; background-size:40%} #mGnbN .order{position:relative;background:#0d3d22;z-index:3} #mGnbN .order > a, #mGnbN .order .langBox a{display:inline-block;padding:0 10px 0 40px;font-size:13px;color:#fff;line-height:40px; background-repeat:no-repeat; background-position:15px 50% ;} #mGnbN .order a.login{background-image:url('/_res/tongmyong/tuhome/img/common/ico-htop1.png');} #mGnbN .order .langBox{position:relative;display:inline-block} #mGnbN .order a.language-btn{background-image:url('/_res/tongmyong/tuhome/img/common/ico-htop2.png'); padding:0 40px; position:relative; width:108px;} #mGnbN .order a.language-btn:after{display:block; content:''; width:25px; height:40px; position:absolute; top:0; right:0; background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow.png') no-repeat 50% 50%; transform 200ms ease-in-out} #mGnbN .order a.language-btn.on:after{transform:rotateX(180deg)} #mGnbN .order .language-list{display:none; width:108px; position:absolute; top:40px; right:0; background:#005629; border:1px solid #0d3d22;border-top:0;z-index:1000;} #mGnbN .order .language-list li{border-bottom:1px solid #005629;} #mGnbN .order .language-list li a{display:block; font-size:13px; color:#fff; padding:10px 15px; line-height:20px;background:url('/_res/tongmyong/tuhome/img/common/ico-htop-arrow2.png') no-repeat 90% 50% } #mGnbN .mGnbN{position:relative;height:calc(100vh - 110px);overflow:auto;z-index:2} #mGnbN .mGnbN > li > a{position:relative;display:block;padding-top:90px;width:145px;font-size:15px;color:#000;height:140px;font-weight:500;text-align:center;background:#e0e4e3} #mGnbN .mGnbN > li > a::before{position:absolute;top:20px;left:0;width:100%;height:65px;content:'';background-repeat:no-repeat;background-position:center top;} #mGnbN .mGnbN > li:nth-child(1) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic1.png') } #mGnbN .mGnbN > li:nth-child(2) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic2.png') } #mGnbN .mGnbN > li:nth-child(3) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic3.png') } #mGnbN .mGnbN > li:nth-child(4) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic4.png') } #mGnbN .mGnbN > li:nth-child(5) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic5.png') } #mGnbN .mGnbN > li:nth-child(6) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic6.png') } #mGnbN .mGnbN > li:nth-child(7) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic7.png') } #mGnbN .mGnbN > li:nth-child(8) > a::before{background-image:url('/_res/tongmyong/tuhome/img/common/mb_gnb_ic8.png') } #mGnbN .mGnbN > li.on > a, #mGnbN .mGnbN > li.active > a{color:#fff;background:#005629} #mGnbN .mGnbN > li.on > a::before, #mGnbN .mGnbN > li.active > a::before{background-position:center bottom} #mGnbN .mGnbN > li.on > ul{display:block} #mGnbN .mGnbN > li > ul{display:none;position:absolute;top:0;left:145px;width:calc(100% - 145px);background:#fff;z-index:50} #mGnbN .mGnbN > li > ul > li{border-bottom:1px solid #e9e9e9; position: relative;} #mGnbN .mGnbN > li > ul > li .gnb-3depth-button{position: absolute; top: 15px; right: 20px; width:20px; height:20px; background: transparent; border:none; cursor: pointer;} #mGnbN .mGnbN > li > ul > li > a{position:relative;display:block;padding:0 30px;font-size:16px;line-height:55px} #mGnbN .mGnbN > li > ul > li.has-sub .gnb-3depth-button::before, #mGnbN .mGnbN > li > ul > li.has-sub .gnb-3depth-button::after{position:absolute; right: 0; content:''; background: #005629;} #mGnbN .mGnbN > li > ul > li.has-sub .gnb-3depth-button::before{top:0;width:20px;height:2px;opacity: 1; top: 50%; transform: translateY(-50%)} #mGnbN .mGnbN > li > ul > li.has-sub .gnb-3depth-button::after{top:0;width:2px;height:20px; left: 50%; transform: translateX(-50%)} #mGnbN .mGnbN > li > ul > li.has-sub.on .gnb-3depth-button::after{opacity: 0;} #mGnbN .mGnbN > li > ul > li > ul{display:none;padding:5px 0;background:#0d3d22} #mGnbN .mGnbN > li > ul > li > ul > li > a{display:block;padding:0 40px;font-size:14px;color:#fff;line-height:50px} #mGnbN .mGnbN > li > ul > li > ul > li > ul > li > a{padding:0 45px; line-height:33px;display:block; color:#638773; font-size:13px;} #mGnbN .mGnbN > li > ul > li > ul > li > ul {display:block;padding:5px 0;background:#092a17;} } /*20240424 모바일 메뉴 : 단과소개 버튼 추가 끝 염채은*/ @media screen and (max-width:780px){ .header-bottom .search-box .searh-wrap input{font-size:1rem;} .popupzone .pop-control{top:24px; right:45px;} .popupzone .pop-control a.btn-close{display:none} #mGnb{width:300px;} .popupzone, .popupzone .pop-wrap .slick-slide{/*height:80px;*/} .popupzone .pop-1{padding:0 50px;} .popupzone .pop-1 > a{width:300px; height:80px; background-size:auto 93%; padding:10px 0 0 80px} .popupzone .pop-1 > a i.stxt{font-size:0.8rem;} .popupzone .pop-1 > a i.btxt{margin-top:0; background-size:cover; width:80px; background-size:100% auto; background-position:0 0;} .popupzone .pop-1 > a i.btn{top:34%; line-height:27px; font-size:0.7rem; padding:0 13px;} .popupzone .pop-wrap .slick-slide img{width:100%;} } @media screen and (max-width:500px){ .popupzone .pop-control{display:none} #mGnbN::after{width:90px;} #mGnbN .mGnbN > li > a{padding-top:50px;width:90px;font-size: 14px;height: 90px;} #mGnbN .mGnbN > li > a::before{top:10px;height:40px;background-size:40px} #mGnbN .mGnbN > li > ul{left: 90px;width: calc(100% - 90px);} #mGnbN .mGnbN > li > ul > li > a{padding: 0 20px;font-size: 15px;line-height: 50px;} #mGnbN .mGnbN > li > ul > li > a::after{width: 16px; height: 16px;background-size:20px} #mGnbN .mGnbN > li > ul > li > ul li a{padding: 0 30px;font-size: 14px;line-height: 40px;} .header-top .stie a{padding:0 15px !important;font-size:15px !important;} .header-top .stie a:before{display:none;} .header-top .header-top-wrap > div > a{padding:0 10px;} .header-top .other a.popupzone-btn{padding:0 26px 0 10px;} } @media screen and (max-width:380px){ .header-top .stie a{padding:0 8px !important;} .header-top .header-top-wrap > div > a{padding:0 5px;} .header-top .other a.language-btn{width:97px; padding:0 38px;} } /*footer*/ footer{position: relative;} footer > div{background:#1f3335; overflow:hidden} footer .btn-top{position:absolute; width:49px; height:49px; top:-25px; right:50%; margin-right:-700px;} footer .footer-top{border-bottom:1px solid #0e1f21} footer .footer-top :after{display:block; content:''; clear:both;} footer .footer-top ul{width:1340px; margin:0 auto;} footer .footer-top ul li{float:left; padding:15px 18px 15px 15px; background:url('/_res/tongmyong/tuhome/img/common/ico-bottom1.png') no-repeat 100% 50%; box-sizing:border-box} footer .footer-top ul li a{display:block; font-size:14px; letter-spacing:-0.05em; font-weight:normal; color:#fff; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} footer .footer-top ul li a.privay{color:#0fa13c} footer .footer-top ul li:first-child{padding-left:0} footer .footer-top ul li:last-child{padding-right:0; background:none;} footer .footer-top ul li a:hover, footer .footer-top ul li a:focus{opacity:0.8} footer .footer-bottom{width:1340px; margin:0 auto; padding:50px 0; overflow:hidden;} footer .footer-bottom :after{display:block; content:''; clear:both;} footer .footer-bottom .info{width:50%; float:left;} footer .footer-bottom .info ul li{float:left; color:#fff; padding-left:21px;} footer .footer-bottom .info ul li:first-child{padding-left:0} footer .footer-bottom .info p{color:#415a5c; padding-top:10px;} footer .footer-bottom .link{width:40%; float:right;} footer .footer-bottom .link .sns{float:left;} footer .footer-bottom .link .sns li{float:left; padding-left:10px;} footer .footer-bottom .link .sns li:first-child{padding-left:0} footer .footer-bottom .link .sns li a{display:block; width:45px; height:45px; border-radius:45px; background-color:#0e1f21; background-repeat:no-repeat; background-position:50% 50%; font-size:0; text-indent: -9999em; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} footer .footer-bottom .link .sns li a:hover, footer .footer-bottom .link .sns li a:focus{background-color:#0a1719} footer .footer-bottom .link .sns li.ico1 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-bottom-sns1.png')} footer .footer-bottom .link .sns li.ico2 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-bottom-sns2.png')} footer .footer-bottom .link .sns li.ico3 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-bottom-sns3.png')} footer .footer-bottom .link .sns li.ico4 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-bottom-sns4.png')} footer .footer-bottom .link .sns li.ico5 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-bottom-sns5.png')} footer .footer-bottom .link .close-site{float:right; } footer .footer-bottom .link .close-site-wrap{position:relative;} footer .footer-bottom .link .close-site .btn-site{position:relative; display:block; background-color:#0e1f21; color:#fff; line-height:45px; padding:0 15px; width:190px; text-align:left; border:none; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} footer .footer-bottom .link .close-site .btn-site:after{position:absolute; top:50%; right:15px; margin-top:-10px; display:block; content:''; width:20px; height:20px; background:url('/_res/tongmyong/tuhome/img/common/ico-bottom-link.png') no-repeat 50% 50%} footer .footer-bottom .link .close-site .btn-site.on:after{background:url('/_res/tongmyong/tuhome/img/common/ico-bottom-link-on.png') no-repeat 50% 50%} footer .footer-bottom .link .close-site .site-list{display:none; position:absolute; bottom:105px; right:50%; margin-right:-670px; background-color:#0e1f21;padding:10px; width:190px; height:500px; z-index:4;} footer .footer-bottom .link .close-site .site-list li a{display:block; color:#fff; padding-bottom:5px; line-height:35px; font-size:14px; } @media screen and (max-width:1400px){ footer .btn-top{margin-right:-49%;} footer .footer-top ul li{box-sizing:border-box;} } @media screen and (max-width:1340px){ footer .footer-top ul{width:100%; padding:10px 0 20px 0;} footer .footer-top ul li{width:14.2%; text-align:center; padding:10px 18px 0 15px; box-sizing:border-box} footer .footer-top ul li:nth-child(7){background:none} footer .footer-bottom{width:100%} footer .footer-bottom .link .close-site .site-list{right:0; margin-right:0} } @media screen and (max-width:1200px){ footer .footer-top ul li{width:20%; text-align:center; padding:10px 18px 0 15px; box-sizing:border-box} footer .footer-top ul li:nth-child(7){background:url('/_res/tongmyong/tuhome/img/common/ico-bottom1.png') no-repeat 100% 50%} footer .footer-top ul li:nth-child(5),footer .footer-top ul li:nth-child(10){background:none} } @media screen and (max-width:1024px){ footer .footer-top ul{padding:15px 15px 80px} footer .footer-top ul li{padding:5px 13px;} footer .footer-bottom{width:100%; padding:70px 15px 20px 15px; } footer .footer-bottom .info{width:100%; text-align:center;} footer .footer-bottom .info ul{display:inline-block} footer .footer-bottom .info p{text-align:center;} footer .footer-bottom .link{width:100%; text-align:center; } footer .footer-bottom .link ul.sns{display:inline-block; float:none; padding-top:15px;} footer .footer-bottom .link .close-site{float:none; width:95%; } footer .footer-bottom .link .btn-site-wrap{margin-top:10px; position:absolute; bottom:157px; left:50%; margin-left:-48%; width:96%} footer .footer-bottom .link .btn-site-wrap{bottom:165px} footer .footer-bottom .link .close-site .site-list{bottom:198px;} footer .footer-bottom .link .close-site .btn-site{width:100%} footer .footer-bottom .link .close-site .site-list{bottom:203px; left:50%; margin-left:-48%; width:96%} footer .footer-bottom .link .close-site .site-list li a{text-align:left} } @media screen and (max-width:780px){ footer .footer-top ul li{width:50%} footer .footer-top ul li:nth-child(4n), footer .footer-top ul li:nth-child(5){background:url('/_res/tongmyong/tuhome/img/common/ico-bottom1.png') no-repeat 100% 50%} footer .footer-top ul li:nth-child(3n){background:none} footer .footer-bottom .link .close-site .site-list{bottom:196px;} } @media screen and (max-width:550px){ footer .footer-bottom .link .btn-site-wrap{bottom:210px} footer .footer-bottom .link .close-site .site-list{bottom:246px;} footer .footer-top ul li:nth-child(3n){background:url('/_res/tongmyong/tuhome/img/common/ico-bottom1.png') no-repeat 100% 50%} footer .footer-top ul li:nth-child(2n){background:none} } /*sub-layout*/ #sub-layout{min-height:1000px;} .sub-visual{position:relative;} .sub-visual .subVisual{height:200px; background-repeat:no-repeat; background-position:0 50%; background-size:cover;} .sub-visual .vu1{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal1.png')} .sub-visual .vu2{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal2.png')} .sub-visual .vu3{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal3.png')} .sub-visual .vu4{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal4.png')} .sub-visual .vu5{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal5.png')} .sub-visual .vu6{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal6.png')} .sub-visual .vu7{background-image:url('/_res/tongmyong/tuhome/img/common/img-svisal7.png')} .sub-visual .txt-box{text-align:center; color:#fff; /*padding-top:70px;*/} .sub-visual .txt-box span{font-size:0.9rem; opacity:0.7; letter-spacing:0.1rem} .sub-visual .txt-box p{font-family: 'NotoKrB'; font-size:2rem; padding-top:70px;} .sub-visual .s-location{position:absolute; bottom:0; left:0; width:100%; background:rgba(11, 35, 28, 0.8); height:50px;} .sub-visual .s-location > div{width:1340px; margin:0 auto; position:relative;} .sub-visual .s-location > div:after{display:block; content:''; clear:both;} .sub-visual .s-location .path{float:left;} .sub-visual .s-location .path > li{float:left; height:50px; } .sub-visual .s-location .path > li.home a{width:50px; background:#246d58 url('/_res/tongmyong/tuhome/img/common/ico-sloc1.png') no-repeat 50% 50%; font-size:0; text-indent: -9999em;display: inline-block;height: 50px;vertical-align: top;} .sub-visual .s-location .path > li.depth2{min-width:180px; border-right:1px solid rgba(255, 255, 255, 0.2); position:relative; } .sub-visual .s-location .path > li.depth2 > a{display:block; line-height:50px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:#fff; padding:0 50px 0 15px; position: relative;} .sub-visual .s-location .path > li.depth2 > a:after{display:block; content:''; width:50px; height:50px; background:url('/_res/tongmyong/tuhome/img/common/ico-slock-arrow.png') no-repeat 50% 50%; position:absolute; top:0;right:0; transition:transform 200ms ease-in-out} .sub-visual .s-location .path > li.depth2 > a.on:after{transform:rotateX(180deg)} .sub-visual .s-location .path .depth3{display:none; position:absolute; top:50px; left:0; z-index:10; width:100%; background:rgba(11, 35, 28,0.8); padding:10px 0} .sub-visual .s-location .path .depth3 li a{display:block; color:#fff; padding:5px 15px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} .sub-visual .s-location .path .depth3 li a:hover, .sub-visual .s-location .path .depth3 li a:focus{color:#7dda20;} .sub-visual .s-location .path .depth3 li.on a{color:#7dda20;} .sub-visual .s-location .path .c-point{font-size:.9em} .sub-visual .s-location .utill{float:right; } .sub-visual .s-location .utill li{float:left; height:50px; margin-left:1px; } .sub-visual .s-location .utill li a{display:block; width:50px; height:50px; font-size:0; text-indent: -9999em; background-repeat:no-repeat; background-position:50% 50%; } .sub-visual .s-location .utill li.sns > a{background-color:rgba(36, 109, 88, 0.7); background-image:url('/_res/tongmyong/tuhome/img/common/ico-sloc2.png')} .sub-visual .s-location .utill li.sns .utill-sns-list{display:none; background:rgba(11, 35, 28,0.8); position:absolute; top:50px; right:0;} .sub-visual .s-location .utill li.sns .utill-sns-list li{float:left;} .sub-visual .s-location .utill li.sns .utill-sns-list li a{display:block; width:50px; height:50px; background-repeat:no-repeat; background-position:50% 50%; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;} .sub-visual .s-location .utill li.sns .utill-sns-list li a:hover, .sub-visual .s-location .utill li.sns .utill-sns-list li a:focus{background-color:#1f3335} .sub-visual .s-location .utill li.sns .utill-sns-list li.ico-1 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-sloc-sns1.png')} .sub-visual .s-location .utill li.sns .utill-sns-list li.ico-2 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-sloc-sns2.png')} .sub-visual .s-location .utill li.sns .utill-sns-list li.ico-3 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-sloc-sns3.png')} .sub-visual .s-location .utill li.sns .utill-sns-list li.ico-4 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-sloc-sns4.png')} .sub-visual .s-location .utill li.sns .utill-sns-list li.ico-5 a{background-image:url('/_res/tongmyong/tuhome/img/common/ico-share-url.png');background-size:30px} .sub-visual .s-location .utill li.print a{background-color:rgba(28, 94, 75, 0.7); background-image:url('/_res/tongmyong/tuhome/img/common/ico-sloc3.png')} #s-containter{width:1340px; margin:0 auto;padding:100px 0} #s-containter h3.sub-title{font-size:2rem; padding-bottom:80px; color:#000; font-family: 'NotoKrB'; text-align:center;} #s-containter .m-path{display:none;} #s-content{} #s-content:after{display:block; content:''; clear:both} @media screen and (max-width:1340px){ #s-containter{padding:30px 15px;} #s-containter, .sub-visual .s-location > div{width:100%} } @media screen and (max-width:1200px){ #s-tab{padding:0 15px; margin-top:25px} #s-content{padding:0 15px} } @media screen and (max-width:760px){ .sub-visual .vis-img{height:200px;} .sub-visual .txt-box p{font-size:1.5rem} .sub-visual .s-location > div{padding:0 100px 0 0 ; position:relative;} .sub-visual .s-location .path{float:none} .sub-visual .s-location .path > li{display:none} .sub-visual .s-location .path > li:last-child{display:block; min-width:100%;} .sub-visual .s-location .path li.depth2 a{font-size:0.9rem;} .sub-visual .s-location .utill{float:none; position:absolute; top:0; right:0 } #s-containter h3.sub-title{font-size:1.5rem; padding-bottom:15px;} #s-containter .m-path{display:block; text-align:center; padding-bottom:15px;} #s-containter .m-path ul{display:inline-block; } #s-containter .m-path ul li{float:left; line-height:35px; padding:0 10px 0 18px; background:url('/_res/tongmyong/tuhome/img/common/ico-stit-arrow.png') no-repeat -1px 10px ; font-size:0.9rem;} #s-containter .m-path ul li.home{background:url('/_res/tongmyong/tuhome/img/common/ico-stit-home.png') no-repeat 50% 50%; width:35px; height:35px; font-size:0; text-indent: -9999em; padding:0} }