/* ******************************************************* ■ 사이트 공통 ******************************************************* */ html{font-size:20px;} body{font-size:1rem} .mob{display:none;} #wrap{position:relative; line-height:1.5; overflow:hidden; font-size: .9rem; padding-top:7rem;} #wrap img { border:none; max-width:100%;} /*아이콘*/ [class*="icon_"]{display:inline-block;vertical-align:middle;width:1.2rem; height:1.2rem; background-repeat:no-repeat; background-position:center center; background-size:100%; margin-right:.25rem;} .icon_login{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_unlock.svg');} .icon_logout{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_lock.svg');} .icon_my{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_my.svg');} .icon_tel{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_tell.svg');} .icon_time{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_time.svg');} .icon_home{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_home.svg'); margin-right:0;} .icon_search{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/ico_find.svg');width:1.5rem;} .icon_member{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/member_icon.svg');} .icon_check{background-image:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_check_w.svg');} @media (max-width:1400px){ } @media (max-width:1030px){ /* -----공통----- */ html{font-size: 18px;} body{font-size: 1rem;} .web{display: none;} .mob{display:block;} #wrap{padding-top:4rem;font-size:1rem;} } @media (max-width: 767px){ /* -----공통----- */ html{font-size: 16px;} body{font-size: 1rem} .tablet{display: none;} .mob{display: block;} #wrap{} } /* ******************************************************* ■ 해더 ******************************************************* */ #header{position: fixed; top:0; left: 0; width:100%; background: #fff; z-index:100;-webkit-transition:all .3s;transition:all .3s;} #header .header_top{ display:flex; justify-content: space-between; align-items: center; height:2.5rem; background:#181c3b; font-size:.75rem; letter-spacing:-0.03em; padding:0 2rem;} #header .header_top li{display:inline-block; } #header .header_top .head_info li{ color:#a7a7a7; font-weight:500;} #header .header_top .head_info li span{position:relative; padding:0 .5rem 0 1rem; color:#fff; font-weight:400;} #header .header_top .head_info li span:before{content:''; display:block; position:absolute; left:0px; top:50%; width:1px; height:.9rem; background:#fff;transform:translateY(-50%); } #header .header_top .head_info li.time span:before{left:-0.2rem; width:1.2rem; height:1.2rem; background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/icon_time.svg')no-repeat 0 0; background-size:100%;} #header .header_top .head_info li.closed{margin-left:1rem;} #header .header_top .head_info li.closed em{display:inline-block; width:1.15rem; height:1.15rem; line-height:1.15rem; border-radius:50%; border:1px solid #a7a7a7 ;font-size:.7rem; text-align:center; margin-right:.2rem;} #header .header_top .log_menu li{color:#fff; margin-left:1rem;} #header .header_top .log_menu li.timer i{font-size:1.2rem; vertical-align: middle; font-weight:400; margin-right:0.2rem;} #header .header_top .log_menu li.timer a{background:#fff; color:#005EDD; font-weight:500; padding:0.1rem 0.5rem; border-radius:1rem; margin-left:.1rem;} /*-----네비게이션-----*/ #header h1{position:absolute; left:3rem; top:50%; transform:translateY(-50%); z-index:10;} #header h1 a{display: block;} #header .header_inner{position:relative; height:4.5rem; border-bottom:1px solid #D2D2D2;} #header .header_inner:after{content:""; display:block; clear:both;} #header .header_inner #nav {display: flex; flex-direction: row; justify-content: center; align-items: center;} #header .header_inner #nav ul {clear:both; position:relative; box-sizing:border-box;height:100%;} #header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;} #header .header_inner #nav ul li {position:relative; margin:0 1rem;} #header .header_inner #nav ul li a{position:relative;text-align:center; color:#191919; font-size:1.05rem; font-weight:600; display:inline-block; height:4.5rem; line-height:4.5rem; text-transform: uppercase; padding:0 2rem; transition: all .2s; -webkit-transition: all .2s; } #header .header_inner #nav ul li > div > a:after{content:''; display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:2px; width:0; background:#2F76E0; transition: all 0.1s ease-out 0s;} #header .header_inner #nav ul li.active > div > a{color:#005edd} /*탑메뉴 2차*/ #header .header_inner #nav ul li ul {z-index: 100; display:none; position: absolute; width:100%; left:0; top:4.5rem; box-sizing:border-box; padding:1rem 0 0; border-top:none; text-align:center;height:calc(12.5rem - 3px);} #header .header_inner #nav ul li ul li {display:block; margin:0; margin-top:10px;} #header .header_inner #nav ul li ul li:last-child{padding-bottom:0;} #header .header_inner #nav ul li ul li a{display:inline-block; height:auto; font-weight:normal; line-height:1.5;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;text-align:center; letter-spacing:-0.05em;font-size:0.9rem; padding: 0;} #header .header_inner #nav ul li ul li a:hover{position: relative; color: #2f76e0; text-decoration:underline !important;} #header .header_inner #nav ul li ul li a strong{font-weight:normal;} #header .header_inner #nav ul li.on ul{background:#eff6fc;} #header .header_inner #nav ul li.on ul:after{width:100%;height:3px;background:#212d97;content:'';display:block;position:absolute;top:0;} .bg_box{margin: 0 auto !important; display:none; position: absolute; width: 100%; height: 12.5rem; top:7rem; z-index:10; box-sizing:border-box; border-top: 1px solid #DBDBDB; background-color:#fff; box-sizing: border-box; box-shadow:3px 15px 15px rgba(0,0,0,0.1);border-bottom:3px solid #212d97;} .bg_box:after{width:40%;height:100%;background:url(https://dgsmidc.negagea.kr/dbuild/images/default/main/h_bg.png)no-repeat;content:'';display:block;position:absolute;left:0;top:0;z-index:-10;background-size:cover;} .bg_box .box_txt{width:1400px; margin: 0 auto; height: 100%; position:relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #ffb306; z-index: 1;} .bg_box .box_txt p{font-weight: 300; line-height: 1.3;} .bg_box .bg_img{width:1400px;z-index: -10; margin:0 auto;height:100%;padding:1.5rem 0;} .bg_box .bg_img ul {} .bg_box .bg_img ul li a{padding:2rem 1rem;background:url(https://dgsmidc.negagea.kr/dbuild/images/default/content/link_img01.png)no-repeat;margin-top:0.5rem;color:#fff;font-weight:500;display:block;} .bg_box .bg_img ul li:first-child{margin-top:0;} .bg_box .bg_img ul li:last-child a{background:url(https://dgsmidc.negagea.kr/dbuild/images/default/content/link_img02.png)no-repeat;margin-top:0.5rem;color:#fff;font-weight:500;display:block;} .mob_timer{display:none;} /*-----사이트맵 버튼-----*/ #header .btn-gnb-menu{position:absolute; right:3rem; top:0; width:2rem; height:4.5rem; cursor:pointer; z-index:9999;text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;} #header .btnAll {position:relative; display:block; width:1.6rem; height:1.15rem; margin:0 auto; top:50%; transform:translateY(-50%);outline: none; z-index:9999;} #header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #333; -webkit-transition: all 0.25s; transition: all 0.25s; } #header .btnAll > span:nth-child(1) { top: 0; right:0;} #header .btnAll > span:nth-child(2) { top: 0.5rem; right:0;} #header .btnAll > span:nth-child(3) { top: 1rem; right:0;} #header.open .btnAll > span{background-color:#fff;} #header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;} #header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;} #header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;} #header.open .btn-gnb-menu{height:1.15rem;} /*---모바일 회원증 버튼---*/ #header .mob_card{position:absolute;line-height:2.4rem;text-align:left;top:50%;transform:translateY(-50%);right:6.5rem;background: linear-gradient( 45deg, #2e79e1, #1ab2ef );color:#fff;border-radius:22.5px;padding:0 1.8rem 0 1rem;} #header .mob_card:after{content:'';display:block;position:absolute;width:8px;height:14px;background:url(https://dgsmidc.negagea.kr/dbuild/images/default/main/mob_btn.png)no-repeat center center;background-size:cover;top:50%;transform:translateY(-50%);right:0.9rem;} /*---모바일 비회원 회원증 버튼---*/ .mob_card2{height:2.4rem;line-height:2.4rem;top:50%;transform:translateY(-50%);background: linear-gradient( 45deg, #2e79e1, #1ab2ef );color:#fff;border-radius:22.5px;padding:10px 15px;} .mob_card2:after{content:'';display:block;position:absolute;width:8px;height:14px;background:url(https://dgsmidc.negagea.kr/dbuild/images/default/main/mob_btn.png)no-repeat center center;background-size:cover;top:50%;transform:translateY(-50%);right:0.9rem;} /*-----스크롤반응-----*/ /*사이트맵*/ #header #navi{background:#fff; position:fixed; top:-100%; left:0; width:100%; height:80%; padding-top:0; overflow:hidden; z-index:20; transition-duration: 0.5s; } #header.open #navi{top:0px; opacity:1;z-index:999;} #header #navi:after{content : ""; display : block; position : absolute; left:70%; top:0; width :30%; height : 100%; background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/sitemap1.jpg') no-repeat center bottom; background-size:cover;} #header .naviBlind{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7);z-index:10; opacity:0; display:none;} #header.open .naviBlind{opacity:1; display:block;} #header .nav_mob{display:none;} #menuAll .top_menu{display:none;} #menuAll .mobile_top{width:100%; height:100%; position:relative; background: #fff; display: flex; flex-direction: column;} #menuAll .mobile_top h4{font-size:1.15rem; padding:5rem 3rem 2rem; width:70%; height:30% } #menuAll .mobile_top h4 span{display:block;} #menuAll .mobile_top h6{position:absolute; right:3rem; top:18vh; color:#fff; font-size:1.1rem; font-weight:400; text-align:right;z-index: 1; line-height:1.3; } #menuAll .mobile_top .mbtop{width: 70%; height:50%; display: flex; flex-wrap: wrap; padding:0 3rem;} #menuAll .mobile_top .mbtop > li{width: calc(20% - 1.5rem); position:relative; margin-right:1.5rem;} #menuAll .mobile_top .mbtop > li > a{position:relative; color:#3a3a4a; font-size:1.5rem; line-height:1; font-weight: 700; border-bottom:1px solid #c9c9c9;} #menuAll .mobile_top .mbtop > li:nth-child(6){display:none;} #menuAll .mobile_top ul li > a{display:block; padding:0.75rem 0; font-size:1.1rem; width:100%; position:relative; } #menuAll .mobile_top ul li > a.newBlank:after{content: '';display:inline-block; margin-left:.25rem; width:.75rem; height:.75rem;background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/newBlank.svg')no-repeat 50% 50%; background-size:100% } #menuAll .mobile_top ul li ul{margin-top:1.5rem; } #menuAll .mobile_top ul li ul li{float:none; width:100%; position:relative; margin-top:1rem;} #menuAll .mobile_top ul li ul li:first-child{margin-top:0;} #menuAll .mobile_top ul li ul li a{ display:block; background:none;font-size:.8rem; text-align: left; padding:0; color:#666;} #menuAll .mobile_top ul li ul li ul{margin:.5rem 0 1rem;} #menuAll .mobile_top ul li ul li ul li{margin-top: .2rem;} #menuAll .mobile_top ul li ul li ul li:before{content : ""; display : block; position : absolute; left :0px; top:10px; background:#666; width: .2rem; height:.2rem; border-radius:50%; } #menuAll .mobile_top ul li ul li ul li a{color:#777; font-weight:300; padding-left: .5rem; font-weight: 400;} #menuAll .mobile_top ul li ul li a:hover{color: #2F76E0;} #menuAll .mobile_top ul li ul li a strong{position: relative; color: #2F76E0; font-weight: 500;} #menuAll .mobile_top ul li ul li a strong:after{position: absolute; content: ''; display: block; width: 100%; height: 1px; background: #2F76E0; bottom:-.2rem; left: 50%; transform: translateX(-50%);} #menuAll .mobile_bot{height:20%; background:#f7f5fc; padding:0 3rem; display: flex; align-items: center;} #menuAll .mobile_bot > div{display:flex; } #menuAll .mobile_bot > div:first-child{padding-right:1.5rem; margin-right:1.5rem; border-right:1px solid #c9c9c9;} #menuAll .mobile_bot > div h5{font-weight:500; color:#3a3a4a; font-size:.8rem; margin-right:1.5rem;} #menuAll .mobile_bot > div ul li{font-weight:normal; font-size:.75rem; color:#555; } #menuAll .mobile_bot > div ul li span{font-weight:400; margin-right:.25rem;} #menuAll .mobile_bot > div ul li em{color:#2F76E0;} /* 팝업 */ .con_pop{background: rgba(0, 0, 0, .6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;} .con_pop .popin{width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 100; border-radius: 1rem; overflow:hidden;} .con_pop .popin h3{color: #fff; background: #109cf1; padding:0 1rem; font-size: 1.2rem; font-weight: 500; height: 3.5rem; line-height: 3.6rem; } .con_pop .popin .txt{padding: 1.5rem 2rem; font-size: 0.9rem; line-height: 1.5;background: #fff; } .con_pop .popin table{border-top: 2px solid #333; margin-top: 15px;} .con_pop .popin table th{background-color: #f9f9f9; border-bottom: 1px solid #e9e9e9; vertical-align: middle; text-align: center;} .con_pop .popin table td{color: #666; padding: 10px 15px; vertical-align: middle; border-bottom: 1px solid #e9e9e9;} .con_pop .bottom_button{display: flex; width:100%; position:relative; z-index:10;} .con_pop .bottom_button a{flex-basis: 50%; display: block; height: 60px; line-height: 60px; font-size: 0.9rem;background: #eee; color: #111;} .con_pop .bottom_button a.confirm{background: #00AEFF; color: #fff;} .con_pop .bottom_button a.w100{flex-basis: 100%;} .con_pop .close{position: absolute; right: 1rem; top: 1rem;} .con_pop .close a{color: #fff; font-size: 1.2rem;} .con_pop .close span{font-size: 0;} .con_pop .popin h4{font-size:1.4rem; color:#333; border-bottom:1px solid #ddd; padding-bottom:1rem; margin-bottom:1rem;} .con_pop .popin h4 b{font-weight:bold;} .con_pop .popin h4 img{margin-bottom:10px;} .con_pop .popin .bg span{position:relative; color:#3b4481; font-weight:bold;} .con_pop .popin .bg span:before{content: ''; display: block; position: absolute; width: 100%; height: 50%; background: rgba(59,68,129,0.1); left: 0; bottom:0;} .con_pop .popin .logo img{width:10rem; margin-top:0.5rem;} .con_pop .popin b{font-weight:bold;} .con_pop .alert img{margin-bottom:10px; width:10rem;} .con_pop .alert h4{color:#212121;} .con_pop .popin h5{font-size:1.2rem; color:#333;margin-top:1rem;} /* 마이페이지 연수프로그램 신청내역 영상 팝업 */ .con_pop .popin .bg{margin-top:1.5rem; padding:1.5rem 0 0; position:relative; color:#333; z-index:0;} .con_pop .popin .bg:before{ content : ""; display : block; position : absolute; left :-50%; top:0; width : 200%; height : 20rem; background : #f0f2ff; z-index:-1;} .con_pop .popin .cen_button{margin-bottom:1.5rem;position:relative; z-index:10;} .con_pop .popin .cen_button a{display:block; width:8rem; margin:0 auto; height:2.3rem; line-height:2.3rem; background:#38387f; color:#fff; border-radius:0.5rem;} ul.dot li{margin-bottom:5px; position: relative; padding-left:15px; text-align:left;} ul.dot li:before{ content : ""; display : block; position : absolute; left :0; top:0.5em; width : 6px; height : 6px; background : #666; border-radius:50%; } @media (max-width: 767px){ .con_pop .popin{width: 90%; margin: 0 auto;} } /* 제3자제공조회동의서팝업 */ #confirmpop.con_pop .popin{width:58rem; background:#fff; padding:3rem 4rem; position:relative;} #confirmpop.con_pop .popin:after{content:''; display:block; position:absolute; width:20.35rem; height:13.75rem; background:url('/images/default/main/confirmpop-bg.jpg')no-repeat center center; background-size: cover; bottom:-0.6rem; right:0; z-index:-1;} #confirmpop.con_pop .pop-top{padding-bottom:1.8rem; border-bottom:solid 1px #333333;} #confirmpop.con_pop .pop-top .tit{font-size:1.5rem; font-weight:600; color:#191919; line-height:1.333;} #confirmpop.con_pop .pop-top .sm-txt{font-size:1rem; color:#555; line-height:1.4; padding-top:1.4rem;} #confirmpop.con_pop .pop-bottom{padding-top:1.8rem;} #confirmpop.con_pop .pop-bottom .tit{text-align:left; font-size:1.1rem; color:#333; font-weight:500;} #confirmpop.con_pop .popin table{border-top: none; margin-top: 1rem; width:100%; line-height:1.375; border-bottom:solid 1px #ddd;} #confirmpop.con_pop .popin table th{background-color: #2f76e0; border-bottom: none; vertical-align: middle; text-align: center; color:#fff; font-size:0.8rem; font-weight:600; padding: 18px 10px;} #confirmpop.con_pop .popin table td{color: #555; padding: 18px 10px; vertical-align: middle; border-bottom: none; font-size:0.8rem;} #confirmpop.con_pop .pop-bottom .reference{text-align:left; font-size:0.75rem; color:#555; padding-top:0.75rem;} #confirmpop.con_pop .confirm-btn{margin-top:2.5rem;} #confirmpop.con_pop .confirm-btn a{display:inline-block; width:11rem; height:3rem; line-height:3rem; background:#fff; border:solid 1px #2f76e0; color:#2f76e0; font-size:1rem; font-weight:600; text-align:center; box-shadow: 0px 8px 10px rgb(0 0 0 / 5%); border-radius:0.5rem;} #confirmpop.con_pop .confirm-btn a:hover{background:#2f76e0; color:#fff;} #confirmpop.con_pop .agree-bx-wrap{display:flex; align-items:center; justify-content:flex-end; gap:1.6rem; margin-top:2.5rem;} #confirmpop.con_pop .agree-bx input[type="checkbox"]+ label {display:inline-block;line-height:0;vertical-align:middle;font-size:.8rem;color:#333;} #confirmpop.con_pop .agree-bx input[type="checkbox"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:0} #confirmpop.con_pop .agree-bx input[type="checkbox"] + label {position:relative; margin: 1px; padding:0 0 0 2rem; line-height:25px; cursor:pointer;color:#333333;font-weight:500;} #confirmpop.con_pop .agree-bx input[type="checkbox"] + label::after, .app .app-course .agree-bx input[type="checkbox"] + label::before {content: ''; position: absolute; border-radius: 20px;} #confirmpop.con_pop .agree-bx input[type="checkbox"] + label::after {left: 0; top: 0; width: 1.25rem; height: 1.25rem; border: 1px solid #ddd;background:#f7f7f7 url('/images/default/main/check-img.png')no-repeat center center;border-radius:5px;background-size:0.75rem;} #confirmpop.con_pop .agree-bx input[type="checkbox"]:checked + label::after {border:1px solid #555; background: #555 url('/images/default/main/check-img-on.png')no-repeat center center;background-size:0.75rem;} @media (max-width: 1200px){ #confirmpop.con_pop .popin{width: 90%; padding:2rem;} .table-wrap{width:100%;overflow-x:auto;white-space:nowrap;} .table-wrap table{width:auto;} #confirmpop.con_pop .pop-top .tit{font-size:1.3rem;} } @media (max-width: 767px){ #confirmpop.con_pop .popin{margin:inherit; line-height:1.5; height:90%; overflow-y:scroll;} #confirmpop.con_pop .popin:after{width:15rem; height:10.15rem; bottom:0;} } @media (max-width: 460px){ #confirmpop.con_pop .popin{padding:2rem 1rem;} #confirmpop.con_pop .popin:after{display:none;} } /* 제3자제공조회동의서팝업 끝 */ @media (max-width:1550px){ #header .header_top{padding:0 1rem;} #header h1{left:1rem;} #header .header_inner #nav ul li div a{ padding:0 1.5rem;} #header .mob_card{right:3.5rem;} .bg_box .bg_img h4{width:38%;font-size:1rem; } .bg_box .bg_img h4 span{font-size:1.2rem;} #header .btn-gnb-menu{right:1rem;} #header #navi:after{left:80%; width:20%;} #menuAll .mobile_top h4{width:80%; padding:3rem 1rem 2rem;} #menuAll .mobile_top h6{width: 18%; font-size:.75rem; right:1rem;} #menuAll .mobile_top h6 br{display:none;} #menuAll .mobile_top .mbtop{width:80%; padding:0 1rem;} #menuAll .mobile_top .mbtop > li > a{font-size:1.1rem;} #menuAll .mobile_bot{padding:0 1rem;} } @media (max-width:1300px){ #header .mob_card{font-size:0.8rem; padding:0 1.5rem 0 0.5rem;} #header .mob_card:after{right: 0.5rem;} #header .header_inner #nav{justify-content: flex-end; padding-right:10.5rem;} #header .header_inner #nav ul li{margin:0;} #header .header_inner #nav ul li div a{ padding:0 1rem; font-size:1rem;} } @media (max-width:1030px){ #header h1 img{height:2.8rem;} #header .header_inner{height:4rem;} #header .header_inner #nav {display: none;} #header .header_top{display:none;} #header .header_top .head_info{display: none;} #header .header_top .log_menu{} #header .header_top .log_menu li{margin-left:0.5rem;} #header .header_top .log_menu li:first-child{margin-left:0;} #header .btn-gnb-menu{height:4rem;} #header.open .btn-gnb-menu{top:2rem;} #header.open.scroll .btn-gnb-menu{ top: 0rem;} #header.open .btnAll > span{background-color:#fff;} #menuAll .mobile_top h6{display:none;} #header .mob_card{font-size:0.9rem; padding:0 1.8rem 0 1rem;} #header .mob_card:after{right: 0.8rem;} /*-----사이트맵 버튼-----*/ .mob_timer{display:flex; align-items: center; justify-content: center; position: absolute; top:50%; right:11.5rem; transform: translateY(-50%); height:2.4rem; line-height:1.2; background:#eff2fc; padding: 0.1rem 0.5rem; border-radius: 22.5px; text-align:center; color:#0B0A5A;} .mob_timer i{vertical-align: middle;} /*-----회원서비스-----*/ #menuAll h3{font-weight:normal; font-size:1.2rem; color:#fff;margin-bottom:1rem;} #menuAll .log{display:block; width: 100%; position:absolute; left:0; top:0; padding-left:1.5rem; box-sizing:border-box; z-index:10;} #menuAll .log li{display:inline-block; height:4rem; line-height:4rem; color: #fff; position:relative;} #menuAll .log li a{padding: 0 1rem;} #menuAll .log li:after{right: .75rem; background: #000; width: 2px;} #menuAll .log li b{font-size:1.1rem;} #menuAll .log li.log_join a{padding-left:0;} #menuAll .log li.log_join:after{content : ""; display : block; position : absolute; right:0; top: 35%; width :1px; height : 30%; background:rgba(255, 255, 255, .3);} /*-----마이페이지-----*/ #menuAll .membership{display: block; background: #DC4976; margin-top:4rem;} #menuAll .membership {clear:both;overflow:hidden; } #menuAll .membership li {position: relative; float:left;width: 50%; border-bottom:1px solid rgba(255, 255, 255, .3); text-align:center; line-height:1;padding:1.3rem 0;} #menuAll .membership li:after{content : ""; display : block; position : absolute; right:0; top: 0; width :1px; height : 100%; background:rgba(255, 255, 255, .3);} #menuAll .membership li:nth-of-type(2n):after{display: none;} #menuAll .membership li a{color:#fff;} #menuAll .membership li i{vertical-align:middle; margin-right:5px; font-size:1.1rem;} /*전체메뉴*/ #header #navi{ top:-100%; left:auto; right:-100%; width:70%; transition:right 0.45s; height:100%;} #header.open #navi{transition:right 0.45s; top:0px;right:0; } #header #navi:after{content: ""; display: block; position: absolute; left: 0; top: 4rem; width: 40%; height: 70%; background: #fff; z-index:-1;} #header #navi:before{content: ""; display: block; position: absolute; right: 0; top: 4rem; width: 60%; height:100%; background: #f5f9ff; z-index:-1;} #menuAll .mobile_top h4, #menuAll .mobile_bot{display:none;} #menuAll .mobile_top{width:100%;height:100%; background:transparent;} #menuAll .mobile_top:before, #menuAll .mobile_top:after{display: none;} #menuAll{ position: relative;} #menuAll .top_menu{display:flex; overflow:hidden;background:#2f76e0;height:25vh;align-items:center;} #menuAll .top_menu .top_menu_head{padding:0 1rem;} #menuAll .top_menu .top_menu_head a{color:#fff; display:inline-block; font-size:1rem;height:2.5rem; line-height:calc(2.5rem - 2px);border:1px solid #fff;width:7rem;text-align:center;border-radius:20px;font-weight:400;} #menuAll .top_menu .top_menu_head a:not(:last-child){margin-right:.5rem;} #menuAll .top_menu .top_menu_head a svg{width:1.2rem; vertical-align:text-bottom;} #menuAll .top_menu .top_menu_info{display:flex; margin:1rem 0; align-items: center;} #menuAll .top_menu .top_menu_info img{width:3.5rem; opacity: .7;} #menuAll .top_menu .top_menu_info p{flex-basis:calc(100% - 5rem); margin-left:1rem; font-size:1rem; color:#888;} #menuAll .top_menu .top_menu_info p b{display:block; font-size:1.1rem; color:#333;} #menuAll .top_menu .top_menu_info p b svg{width:1rem; color:#888; vertical-align:text-bottom;} #menuAll .top_menu ul.log_after{display:flex; margin:1.5rem 0 1rem; } #menuAll .top_menu ul.log_after li{flex-basis:25%; text-align:center;} #menuAll .top_menu ul.log_after li a{display:block;} #menuAll .top_menu ul.log_after li img{display:block; margin:0 auto .5rem; width: 1.5rem;} /*전체메뉴*/ /*1차*/ #menuAll .mobile_top h2{display:none;} #menuAll .mobile_top .mbtop{display:block; border: 0; width: 100%; padding:0; position:relative; margin-top: 1rem;} #menuAll .mobile_top .mbtop > li{width: 40%; margin:0 ; position: unset; border-bottom:none;} #menuAll .mobile_top .mbtop > li:nth-child(n+5){margin-top:0;} #menuAll .mobile_top .mbtop > li:before{display:none;} #menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1rem; padding:1rem; color:#333; font-weight:400;background: inherit;font-size:1.2rem;} #menuAll .mobile_top .mbtop > li > a.newBlank:after{content: '';display:inline-block; margin-left:.5rem; width:.9rem; height:.9rem;background:url('https://dgsmidc.negagea.kr/dbuild/images/default/main/newBlank.svg')no-repeat 50% 50%; background-size:100% } #navi ul.mbtop {width:100%; margin:0; padding:0;} #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;} #navi ul.mbtop > li.nosub > a:after{display:none;} #menuAll .mobile_top ul li ul li a strong{color:#2F76E0;} #menuAll .mobile_top .mbtop li ul li a strong:after{display:none;} #menuAll .nav_mob_div{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%); width:100%;} #menuAll .nav_mob{ position:relative;padding:1rem 1rem 1rem 1rem;border:1px solid #2f76e0;width:90%;color:#2f76e0; background:#fff; border-radius:30px;font-size:1.2rem;box-shadow: 1px 1px 25px rgb(0 0 0 / 10%);display:block; margin:0 auto;} #menuAll .nav_mob:after{content:'';display:block;position:absolute;width:2rem;height:2rem;background:url(https://dgsmidc.negagea.kr/dbuild/images/default/content/nav_mob.png)no-repeat center center;background-size:cover;right:1rem;top:50%;transform:translateY(-50%);} #menuAll .nav_mob img{margin-left:0.5rem; height: 1.25rem;vertical-align: middle;} #menuAll .nav_mob:nth-of-type(2){margin-top:.5rem;} #navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem; font-weight: 700; color:#262626;} #navi ul.mbtop > li.open_li > a{font-weight:600;color:#2f76e0;} #navi ul.mbtop > li.open_li > a:after{color:#fff;} #menuAll .mobile_top .mbtop > li:first-child a, #menuAll .mobile_top .mbtop > li:last-child a{border-radius:0;} /*2차*/ #navi ul.mbtop li ul {display:none; float:none; position:absolute; right:0; top:0; width:55%; height:auto; visibility:visible; padding: 1rem; margin: 0;} #navi ul.mbtop li.open_li ul{display:block;} #navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box; background: none; padding-left:0; margin-top:0; margin-bottom:1rem;} #navi ul.mbtop li ul li a {background:url(none); height:auto; padding-left:0; font-size:1.15rem; color:#333;} #navi ul.mbtop li ul li:after, #navi ul.mbtop li ul li:before{display:none;} /*3차*/ #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;} #navi ul.mbtop li ul li ul li {display:none;} } @media (max-width:767px){ #header #navi{width:90%;} #header .mob_card{font-size:0.9rem;right:3.2rem;padding:0 1.5rem 0 0.8rem;} #header .mob_card:after{right:0.5rem;} #header .mob_card i{display:none;} #menuAll .nav_mob{font-size:1rem;} .mob_timer{right:8.2rem; font-size: 12px; flex-direction: column;} .mob_timer a{display:block; line-height:1;} } @media (max-width:350px){ #menuAll h3{font-size:1.1rem;} #navi ul.mbtop li.open_li ul{padding:0;} #menuAll .mobile_top .mbtop > li > a{font-size:1.2rem;height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem;} #navi ul.mbtop li ul li a{font-size:1rem;} #menuAll .nav_mob{font-size:1rem;} #menuAll .nav_mob img{height:1rem;} #menuAll .nav_mob:after{width:1.5rem;height:1.5rem;} } /******************************************************** ■ 푸터 ********************************************************/ #footer{clear:both; padding:2rem 0; color:#e1e1e1; font-size:.8rem; letter-spacing:0.02em; background: #393D49;} #footer .inn{padding:0 3rem; display: flex; justify-content: space-between;} #footer .inn .address{display:flex; } #footer .inn .address div{padding:1.3rem 0 0 1.3rem;} #footer .inn .address div p:nth-child(2){margin-top:.5rem;} #footer .inn .address div p.copy{font-size:.75rem; color:#888; margin-top:.75rem; } #footer .inn .address div p span{display:inline-block; padding:0 1rem;} #footer .inn .fot_info li{position:relative; padding-left:7rem; margin-bottom:1.3rem; font-size:.75rem; } #footer .inn .fot_info li span{position:absolute; left:0px; top:0.25rem; font-size:.8rem;} #footer .inn .fot_info li h5{font-weight:700; font-size:1.25rem; } #footer .inn .fot_info li:first-child h5{color:#18b5f0; } #footer .fot_menu{padding: 0 3rem ; margin-top:2rem;} #footer .fot_menu ul{padding-top:1rem; border-top:1px solid #7C7C7E; text-align:right;} #footer .fot_menu ul li{position:relative; display:inline-block;} #footer .fot_menu ul li:not(:first-child){padding-left:1rem;} #footer .fot_menu ul li:not(:first-child):before{content:''; position:absolute; left:0.5rem; top:50%; margin-top:-0.375rem; width:1px; height:0.75rem; background:#fdfdfd;} @media (max-width:1550px){ #footer .inn, #footer .fot_menu{padding:0 1rem} } @media (max-width:1300px){ #footer .inn .address{flex-direction: column} #footer .inn .address div{padding-left:0;} } @media (max-width:1030px){ #footer .inn{justify-content: flex-start; flex-direction: column;} #footer .inn .address h3 img{height:2.5rem;} #footer .inn .fot_info{margin-top:1.5rem;} #footer .inn .fot_info ul{display:flex; justify-content: space-between;} #footer .inn .fot_info li{width:50%;} } @media (max-width:767px){ #footer .inn .fot_info ul{display:flex;flex-wrap:wrap; justify-content: space-between;} #footer .inn .fot_info li{width:50%; padding-left:0;} #footer .inn .fot_info li span{position:relative; left:auto; top:auto; margin-bottom:.25rem;} #footer .fot_menu ul{text-align:left;} } @media (max-width:467px){ #footer .inn .fot_info li{width:100%; margin-bottom:.25rem;} #footer .fot_menu{margin-top:1rem;} } /*챗봇*/ .chatbot-btn{position: fixed; right: 1.65rem; bottom: 4.25rem; z-index: 999;} .chatbot-btn a{display:inline-block; width:4.5rem; height:4.5rem; border-radius:50%;} .chatbot-btn .chat-btn{background:#181c3b; color:#fff; font-family:"SUIT"; font-size:0.8rem; font-weight:500; position:relative; text-align:center; padding-top:2.7rem; line-height:1;} .chatbot-btn .chat-btn:after{content:''; display:block; position:absolute; width:4.05rem; height:1.85rem; background:url('/images/default/content/chatbot-icon.png')no-repeat center center; background-size: cover; left:53%; transform:translateX(-50%); top:0.6rem;} .chatbot-btn .chat-btn:hover:after{animation: motion 1s linear 0s infinite alternate;} .chatbot-btn .chat-close{background:#181c3b url('/images/default/content/chat-close.svg')no-repeat center center; background-size:0.85rem; display:none;} .chat-bx{position: fixed; right: 1.65rem; bottom: 9.5rem; z-index: 999; border-radius:0.7rem; overflow:hidden; width:17rem; height:27.4rem; box-shadow: 1px 1px 10px rgb(0 0 0 / 13%); display:none;} .chat-bx .tit{font-size:0.75rem; color:#fff; background:#181c3b; font-weight:700; height:2.1rem; line-height:2.1rem; padding:0 0.5rem;} .chat-bx .chat-cts{background:#fff; height:calc(27.4rem - 2.1rem); padding:0.6rem 0.5rem; font-size:0.7rem; color:#666; overflow-x: auto; overflow-y: scroll;} .chat-cts .bot{padding-left:2rem; position:relative;} .chat-cts .bot:before{content:''; display:block; position:absolute; width:2rem; height:2rem; border-radius:50%; border:solid 1px #ddd; background:url('/images/default/content/chatbot-icon.png')no-repeat center center; background-size: 1.65rem; top:0; left:0;} .chat-cts .message{padding-left:0.6rem; position:relative;} .chat-cts .message:after{content:''; display:block; position:absolute; width:0.95rem; height:1.3rem; background:url('/images/default/content/bubble.png')no-repeat center center; background-size: cover; left:0; top:0.65rem;} .msg-wrap{padding:0.65rem; background:#f7f7f7; border-radius:0.75rem 0.75rem 0.75rem 0;} .question-wrap{margin-top:0.65rem;} .question-wrap li{display:flex; align-items:flex-start; gap:0.25rem; background:#fff; border:solid 1px #ddd; padding:0.4rem 0.3rem; border-radius:0.25rem; cursor:pointer;} .question-wrap li:not(:last-child){margin-bottom:0.4rem;} .question-wrap li span{display:inline-block; width:0.95rem; height:0.95rem; line-height:0.95rem; background:#2f76e0; color:#fff; font-size:0.6rem; font-weight:500; text-align:center; border-radius:50%; margin-top:0.1rem;} .question-wrap li p{width:calc(100% - 0.95rem - 0.25rem);} .question-wrap li:hover{background:#2f76e0; color:#fff;} .question-wrap li:hover span{background:#fff; color:#2f76e0;} .conversation.end .question-wrap li{pointer-events: none;} .chat-cts .user{margin:0.7rem 0; display:flex; justify-content:flex-end; display:none;} .chat-cts .user-question{position:relative; padding-right:0.6rem;} .chat-cts .user-question:after{content:''; display:block; position:absolute; width:0.85rem; height:1.35rem; background:url('/images/default/content/bubble-b.png')no-repeat center center; background-size: cover; right:0; bottom:0;} .chat-cts .user-question p{background:#2f76e0; color:#fff; border-radius:0.75rem 0.75rem 0 0.75rem; padding:0.7rem 0.6rem;} .chat-cts .bot.apply{display:none;} .chat-cts .user.apply .user-question{cursor:pointer;} .conversation .bot, .conversation .user, .conversation .bot.apply, .conversation .user.apply {opacity: 0; animation: fadeIn 0.6s forwards;} .conversation .bot{animation-delay: 0s;} .conversation .user{animation-delay: 0.6s;} .conversation .bot.apply{animation-delay: 1.2s;} .conversation .user.apply{animation-delay: 1.8s;} @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes motion { 0% {top:0.6rem;} 100% {top:0.2rem;} } @media (max-width:767px){ .chatbot-btn{bottom:1.5rem;} .chat-bx{width:85%; height:70%; bottom:6.5rem;} .chat-bx .chat-cts{height:calc(100% - 2.1rem); font-size:0.75rem;} .question-wrap li{padding:0.65rem 0.3rem;} .question-wrap li span{width:1.1rem; height:1.1rem; line-height:1.1rem;} .question-wrap li p{width:calc(100% - 1.1rem - 0.25rem);} } @media (max-width:500px){ .chatbot-btn a{width:4.2rem; height:4.2rem;} .chatbot-btn{right:1rem;} .chat-bx{width:calc(100% - 1rem - 1rem); right:1rem;} }