.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float:left;} th.col-1, th.col-2, th.col-3, th.col-4, th.col-5, th.col-6, th.col-7, th.col-8, th.col-9, th.col-10, th.col-11, th.col-12, td.col-1, td.col-2, td.col-3, td.col-4, td.col-5, td.col-6, td.col-7, td.col-8, td.col-9, td.col-10, td.col-11, td.col-12 {float:none;} .in-col .col-1, .in-col .col-2, .in-col .col-3, .in-col .col-4, .in-col .col-5, .in-col .col-6, .in-col .col-7, .in-col .col-8, .in-col .col-9, .in-col .col-10, .in-col .col-11, .in-col .col-12 {padding:0 10px;} .col-1 {width:8.33333333% !important;} .col-2 {width:16.66666667% !important;} .col-3 {width:25% !important;} .col-4 {width:33.33333333% !important;} .col-5 {width:41.66666667% !important;} .col-6 {width:50% !important;} .col-7 {width:58.33333333% !important;} .col-8 {width:66.66666667% !important;} .col-9 {width:75% !important;} .col-10 {width:83.33333333% !important;} .col-11 {width:91.66666667% !important;} .col-12 {width:100% !important;} /* header */ #new-header {width:100%; height:80px; position:absolute; background:#fe5e01; z-index:9000; left:0;} #new-header:after {content:''; width:15%; height:80px; background:#525050; position:absolute; top:0; right:0; z-index:1;} #new-header > .inwrap {max-width:1500px; width:100%; margin:0 auto; position: relative;} #new-header > .inwrap:after {content:''; display:block; clear:both;} #new-header .top-left-box {height:80px; /* max-width: 1190px; */ width: 100%; box-sizing: border-box; float:left; width:calc(100% - 530px); background:#fe5e01; z-index:3; padding-left:140px;} #new-header .top-left-box:after {content:''; display:block; clear:both;} /* #new-header .top-left-box .logo {display: block; position: absolute; top: 50%; left: 110px; transform: translateY(-50%);} */ #new-header .top-left-box .logo {display: block; float:left; position: absolute; left:0; top: 50%; transform: translateY(-50%); margin-top:0 !important;} #new-header .top-left-box .logo .renew-sprite {width: 140px; height: 30px; background-position: -312px -398px; display: block;} #new-header .top-rihgt-box {max-width:530px; width:100%; height:100%; background:#525050; float:left; position:relative; padding-left:40px; box-sizing:border-box; z-index:3;} #new-header .top-rihgt-box:before {content:''; width:40px; height:80px; background:#525050; position:absolute; top:0; left:-10px; webkit-transform: skewX(-13deg); transform: skewX(-13deg);} #new-header .mobile_mn_op, #new-header .mobile_mn_cs {display:none} /* 기존 #header 에 있는 css 값 초기화 */ #header {height:auto !imoprtant; background:none !important;} #header:after {display:none !important;} .all-menuBox {float:right; margin:30px 50px 0 0 } /* .all-menuBox .all-menu span {font-family:'Titillium Web', 'NanumBarunGothic'; font-size:14px; letter-spacing:0; color:#fff; font-weight:bold; display:block; padding-right:35px; background:url('../img/main/ico-all_Menu.png') no-repeat right center; } */ .all-menuBox .all-menu {width:25px; height:16px; display:block; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out;} .all-menuBox .all-menu > span {width:100%; height:2px; background:#fff; text-indent:-99999px; display:block; margin-left:auto; position:relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; font-size:0;} .all-menuBox .all-menu > span:before {content:''; width:25px; height:2px; background:#fff; position:absolute; top:7px; right:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out;} .all-menuBox .all-menu > span:after {content:''; width:100%; height:2px; background:#fff; position:absolute; top:14px; right:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out;} .all-menuBox .all-menu:hover > span {width:10px;} .all-menuBox .all-menu:hover > span:before {width:18px;} .all-menuBox .all-menu:hover > span:after {width:25px;} .top-rihgt-container {position:absolute; top:50%; transform:translateY(-50%); right:0;} .top-rihgt-container span {} .top-rihgt-container > a {margin-left:20px; display: inline-block; vertical-align: top;} .top-rihgt-container > a:first-child {margin-left:0;} .top-rihgt-container > a.main-search { margin: 0 5px 0 25px !important; width: 35px !important; height: 35px !important; background: #fe5e01 !important; line-height: 40px; text-align: center;} .top-rihgt-container > a.main-search .renew-sprite {width: 19px; height: 19px; background-position: -345px -132px; background-size: 392px; display: block; margin: 7px auto 0;} /* lang 수정 */ .login span, .join-member span, .recruit-info span, .langs span, .pc-mypage span, .logout span {font-size:14px; letter-spacing:0; font-weight:400; color:#fff; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; line-height:35px;} [lang='ko-KR'] .login span, [lang='ko-KR'] .join-member span, [lang='ko-KR'] .recruit-info span, [lang='ko-KR'] .langs span, [lang='ko-KR'] .pc-mypage span, [lang='ko-KR'] .logout span {font-family:'Pretendard Variable';} .langs span {padding-right:15px; vertical-align:bottom; position:relative;} .langs span .renew-sprite {width: 6px; height: 5px; background-position: -120px -714px; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} .top-rihgt-container > a:hover span {text-decoration:underline;} .top-rihgt-container > a.langs:hover span {border-bottom:none;} .top-rihgt-container > a.langs:hover span .renew-sprite {width: 6px; height: 5px; background-position: -146px -714px; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} .top-rihgt-container > a.mobile_mn_op:hover span {border-bottom:none;} .top-rihgt-container > a.hide, .top-rihgt-container > a.m-mypage {display:none;} .top-rihgt-container > a.login {margin-top:0 !important; padding-right:0 !important; border-top:none !important;} .top-rihgt-container > a.weChat {width: 24px; height: 24px; background: url('/web/main_renewal/img/main/new_sprites.webp') -562px -398px; text-indent: -99999px; margin-top: 5px;} #mobile-mn-mypage {display:none;} #new-header .gnb_bg {display:none; position:absolute; top:80px; left:0; width:100%; min-height:460px; /* transition:height 0.3s; */ background:#fff; z-index:2; box-sizing:content-box; display:none !important;} #new-header .gnb_bg_bk {display:none; position:fixed; top:80px; left:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.6); z-index:1;} #main-navi {width:calc(100% - 85px); float:left; margin-left:10px;} #main-navi .mobile-top {display:none;} #main-navi .mobile-tab {display:none;} #main-navi .mobile-mn-mypage {display:none;} #main-navi .top1menu {padding-top: 30px; padding-left:110px; display:block;} #main-navi .top1menu:after {content:''; display:block; clear:both;} #main-navi .top1menu li.depth1 {float:left; margin-left:45px; padding-bottom:30px;} #main-navi .top1menu li.depth1:first-child {margin-left:0;} #main-navi .top1menu li.depth1 > a > span { font-size:18px; color:#fff; font-weight:600; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; line-height:1.2;} [lang='ko-KR'] #main-navi .top1menu li.depth1 > a > span {font-family: 'Pretendard Variable';} #main-navi .top1menu li.depth1 > a.depth1_tit > span.active {border-bottom:2px solid #fff;} #main-navi .top1menu li .top2m {display: none; position: absolute; top: 80px; left: 0; width: 100vw; z-index: 40; -ms-overflow-style: none; scrollbar-width: none; background:#fff; left:50%; transform:translateX(-50%);} #main-navi .top1menu li .top2m::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} #main-navi .top1menu li .top2m .depth2_wrap {max-width:1200px; margin:0 auto; position:relative; padding:40px 0 40px;} #main-navi .top1menu li .top2m .depth2_wrap:after {content:""; display:block; clear:both;} #main-navi .top1menu li .top2m .tit_area {width:180px; float:left; margin:0 40px 0 0px;} #main-navi .top1menu li .top2m .tit_area .tit {font-size:26px; color:#333; margin-bottom:20px; letter-spacing:-0.03em; line-height:1;} #main-navi .top1menu li .top2m .tit_area .stxt {display:block; margin-bottom:30px; line-height:1.3;} #main-navi .top1menu li .top2m .tit_area .imgbox {position:relative; padding-bottom:25px;} #main-navi .top1menu li .top2m .tit_area .imgbox .img {width:175px; height:200px; } #main-navi .top1menu li .top2m .tit_area .imgbox .img.ty01 {background:url('/web/main_renewal/img/main/tit_area_img.webp') no-repeat;} #main-navi .top1menu li .top2m .tit_area .imgbox .img.ty02 {background:url('/web/main_renewal/img/main/tit_area_img02.webp') no-repeat;} #main-navi .top1menu li .top2m .tit_area .imgbox .img.ty03 {background:url('/web/main_renewal/img/main/tit_area_img03.webp') no-repeat;} #main-navi .top1menu li .top2m .tit_area .imgbox .img.ty04 {background:url('/web/main_renewal/img/main/tit_area_img04.webp') no-repeat;} #main-navi .top1menu li .top2m .tit_area .imgbox a.go-depth-btn {position:absolute; top:-112px; right:0; width:25px; height:25px; background:#fff; border: 1px solid #eaeaea; box-sizing: border-box; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; text-align: center; line-height: 22px;} #main-navi .top1menu li .top2m .tit_area .imgbox a.go-depth-btn .renew-sprite {width: 6px; height: 9px; background-position: -10px -714px; display:inline-block; vertical-align:unset;} #main-navi .top1menu li .top2m .tit_area .imgbox a.go-depth-btn:hover {background: #fe5e01; border:1px solid #fe5e01;} #main-navi .top1menu li .top2m .tit_area .imgbox a.go-depth-btn:hover .renew-sprite {width: 6px; height: 9px; background-position: -36px -714px; display:inline-block;} #main-navi .top1menu li .top2m .depth2 {float:left; width:calc(100% - 500px); position:relative;} #main-navi .top1menu li .top2m .depth2 .depth2_tit {display:block; width:calc(45% - 15px); padding:8px 50px 8px 30px; background:#f4f4f4; border-bottom:1px solid #eaeaea; border-left:1px solid #eaeaea; border-right:1px solid #eaeaea; box-sizing:border-box; position:relative;} #main-navi .top1menu li .top2m .depth2 li:first-child .depth2_tit {border-top:1px solid #eaeaea; border-radius:3px 3px 0 0px;} #main-navi .top1menu li .top2m .depth2 li:last-child .depth2_tit {border-bottom:1px solid #eaeaea; border-radius:0px 0px 3px 3px;} #main-navi .top1menu li .top2m .depth3 {display:none; width:100%; position:absolute; top:0px; right:0px; padding-left:30px; box-sizing:border-box;} #main-navi .top1menu li .top2m .depth3.origin{display:none} #main-navi .top1menu li .top2m .depth3 .depth3_tit {display:block; padding:13px 30px; border-bottom:1px solid #eaeaea; box-sizing:content-box;} #main-navi .top1menu li .top2m .depth3 li {position:relative;} #main-navi .top1menu li .top2m .depth3.depth3-column{width:50%;} #main-navi .top1menu li .top2m .depth3.depth3-column.second-column{width:50%; left:90%;} #main-navi .top1menu li .top2m .depth3.column{display:flex; width:calc(100% - 15px); left:43%; flex-wrap:wrap; align-items:stretch;} #main-navi .top1menu li .top2m .depth3.column li{width:50%; } #gnb-right {display:none; position:absolute; top:0px; left:0; right:0;} .gnb-right-box-wrap {max-width:1200px; margin:0 auto; position:relative; z-index:20;} .gnb-right-box {position:absolute; top:40px; right:-150px; width:380px;} .gnb-right-box .navi-R-btn {display:table; width:100%; border:1px solid #f1f1f1; height:100px; margin-bottom:20px; position:relative; background:#fff;} .gnb-right-box .navi-R-btn .icon {position:absolute; top:50%; right:40px; width:70px; height:70px; background-color:#f4f4f4; border-radius:50%; transform: translateY(-50%);} .gnb-right-box .navi-R-btn .icon .rel-box {position:relative; width: 100%; height: 100%;} .gnb-right-box .navi-R-btn.ty01 .renew-sprite {background-position: -305px -125px; width: 30px; height: 28px; background-size: 392px; position: absolute; top: 45%; left: 52%; transform: translate(-50%, -50%);} .gnb-right-box .navi-R-btn.ty02 .renew-sprite {background-position: -305px -85px; width: 30px; height: 30px; background-size: 392px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .gnb-right-box .navi-R-btn .nr_inwrap {display:table-cell; vertical-align:middle; padding:0 50px;} .gnb-right-box .navi-R-btn .btxt {font-size:22px; margin-bottom:5px;} .gnb-right-box .navi-R-btn .btxt span {color:#fe5e01;} .gnb-right-box .navi-R-btn .stxt {color:#666;font-size:14px;} .gnb-right-box .center-numBox { display:table; width:100%; background:#f4f4f4; text-align:center; height:100px;} .gnb-right-box .center-numBox .nr_inwrap {display:table-cell; vertical-align:middle; padding:0 40px 0 50px;} .gnb-right-box .center-numBox .txt {display:block;} .gnb-right-box .center-numBox .num {display:block; font-size:30px; color:#fe5e01; font-weight:bold; letter-spacing:0; margin-top:10px;} #new-header.eng-ty .gnb-right-box .center-numBox .txt {float:none;} #new-header.eng-ty .gnb-right-box .center-numBox .num {float: none; display: block;} /* 스크롤 header - fiexd 시 */ #new-header.fix-header {position:fixed; top:0; height:70px;} #new-header.fix-header:after, #new-header.fix-header .top-left-box, #new-header.fix-header .top-rihgt-box, #new-header.fix-header .top-rihgt-box:before {height:70px;} #new-header.fix-header #main-navi .top1menu {padding-top:28px;} #new-header.fix-header .gnb_bg {top:70px;} #new-header.fix-header .gnb_bg_bk {top:70px;} #new-header.fix-header #main-navi .top1menu li .top2m {top:70px;} /* 띠배너 존재 시 */ #new-header.belt-banner_On {position:absolute;} #new-header.belt-banner_On .gnb_bg {top:80px;} #new-header.belt-banner_On .gnb_bg_bk {top:224px;} #new-header.belt-banner_On.fix-header {position:fixed; top:0; height:70px;} #new-header.belt-banner_On.fix-header #main-navi .top1menu li .top2m {top:70px;} #new-header.belt-banner_On.fix-header .gnb_bg {top:70px;} #new-header.belt-banner_On.fix-header .gnb_bg_bk {top:70px;} /* my page-mobile만 */ #mypage-wrap {display:none;text-align:center;} #mypage-wrap .welcom-txt {padding:25px 20px;} #mypage-wrap .my-product {padding:15px 0;border:1px solid #ddd;border-width:1px 0;} #mypage-wrap .my-product li {padding:0 5px;} #mypage-wrap .my-product li:nth-child(2) {border:1px solid #ddd;border-width:0 1px;} #mypage-wrap .my-product .txt {margin:10px 0 15px;color:#666;} #mypage-wrap .my-product .num {position:relative;font-size:36px;line-height:42px;color:#fe5e01;} #mypage-wrap .my-product .num:hover {text-decoration:none;} #mypage-wrap .my-product .num:after {content:'';position:absolute;bottom:5px;left:0;width:100%;height:1px;background:#fe5e01;} #mypage-wrap .my-product .info, #mypage-wrap .my-product .info .num{font-size:12px;} #mypage-wrap .my-product .info .fc2, #mypage-wrap .my-product .info .num {line-height:20px;} #mypage-wrap .my-product .info .num:after {bottom:1px;} .nav-list li.sub-visible:before, .nav-list li.sub-visible:after {display:none;} @media screen and (min-width:1921px){ #new-header:after {width:35%;} } @media screen and (min-width:1199px){ /* hover */ #main-navi .top1menu li .top2m .depth2 .depth2_tit:hover, #main-navi .top1menu li .top2m .depth2 .depth2_tit:focus, #main-navi .top1menu li .top2m .depth2 .depth2_tit.over {background:#fff; border-right:none;} #main-navi .top1menu li .top2m .depth2 .depth2_tit:hover .renew-sprite, #main-navi .top1menu li .top2m .depth2 .depth2_tit:focus .renew-sprite, #main-navi .top1menu li .top2m .depth2 .depth2_tit.over .renew-sprite { width: 8px; height: 12px; background-position: -576px -222px; display: inline-block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%);} #main-navi .top1menu li .top2m .depth2 .depth2_tit:hover span, #main-navi .top1menu li .top2m .depth2 .depth2_tit:focus span, #main-navi .top1menu li .top2m .depth2 .depth2_tit.over span {color:#fe5e01} #main-navi .top1menu li .top2m .depth3 .depth3_tit:hover, #main-navi .top1menu li .top2m .depth3 .depth3_tit:focus {color:#fe5e01} #main-navi .top1menu li .top2m .depth3 .depth3_tit:hover .renew-sprite, #main-navi .top1menu li .top2m .depth3 .depth3_tit:focus .renew-sprite {width: 10px; height: 12px; background-position: -288px -95px; background-size: 392px; position: absolute; top: 55%; left: 12px; transform: translateY(-50%);} } /**************************************************************************************************************/ /** ------------------------------------------------ mobile --------------------------------------------------**/ @media screen and (max-width:1700px){ .top-left-box {padding-left:170px;} #new-header .top-left-box .logo {left:30px; } .top-rihgt-container {right:30px;} } @media screen and (max-width:1600px){ #new-header .top-left-box {padding-left:170px; width:calc(100% - 450px)} #new-header .top-rihgt-box {max-width:450px; padding-left:20px;} #new-header .top-rihgt-box::before {width:20px;} #main-navi .top1menu {padding-left:15%;} #main-navi .top1menu li.depth1 {margin-left:12%;} #main-navi .top1menu li .top2m .depth2_wrap {padding-left:30px; padding-right:30px; box-sizing:border-box;} #gnb-right {position:static; clear:both;} .gnb-right-box {position:static; width:100%; padding-top:20px; box-sizing:border-box;} .gnb-right-box::after {content:""; display:block; clear:both;} .gnb-right-box .navi-R-btn {margin-bottom:0;} .gnb-right-box .navi-R-btn, .gnb-right-box .center-numBox {width:32.66%; margin-right:1%; float:left; box-sizing:border-box;} .gnb-right-box .center-numBox {margin-right:0;} .top-rihgt-container > a {margin-left:25px;} .top-rihgt-container > a.main-search {margin: 0 0 0 25px !important;} .gnb_bg{padding:0 !important;} } @media screen and (max-width:1370px){ #main-navi .top1menu li .top2m {display: none; position: absolute; top: 80px; left: 50%; transform:translateX(-30%); width: 1200px;} } @media screen and (max-width:1350px){ #main-navi .top1menu {padding-left:15%;} #main-navi .top1menu li.depth1 {margin-left:10%;} } @media screen and (max-width:1300px){ #main-navi .top1menu {padding-left:10%;} #main-navi .top1menu li.depth1 {margin-left:6%;} } @media screen and (max-width:1220px){ #main-navi .top1menu {padding-left:4%;} #main-navi .top1menu li.depth1 {margin-left:4%;} } @media screen and (max-width:1200px){ #new-header {height:70px; top:auto;} #new-header::after {display:none;} #new-header .top-left-box {height:70px; padding-left:5%; width:auto;} #new-header .top-left-box .logo {position: static; transform: none; float: left; margin-top: 25px !important; width: auto; height: auto;} #new-header .top-left-box .logo .renew-sprite {width:96px; background-size: 520px; background-position: -207px -260px;} #new-header .top-left-box .langs {float:left; margin:23px 0 0 10px;} #new-header .top-rihgt-box {width:auto; background:none; float:right; padding-left:0; padding-right:5%; text-align:right;} #new-header .top-rihgt-box::before {display:none;} .all-menuBox {display:none;} .top-rihgt-container {position:static; transform:none; display:inline-block; margin-top:24px;} .top-rihgt-container > a {margin-left:10px;} .top-rihgt-container > a.pc-mypage {display:none !important;} .top-rihgt-container > a.m-mypage {width:20px; height:22px; display:inline-block;} .top-rihgt-container > a.m-mypage .renew-sprite {width: 22px; height: 22px; background-position: -297px -192px; background-size: 380px;} .top-rihgt-container > a.m-mypage span {font-size:0; } .top-rihgt-container > a.login {display:none;} .top-rihgt-container > a.join-member {display:none;} .top-rihgt-container > a.recruit-info {display:none;} .top-rihgt-container > a.main-search {background-color: transparent !important; width: 20px !important; height: 22px !important; background: #fe5e01 !important; background-size: 100% !important; margin: 0 0 0 10px !important; line-height: initial;} .top-rihgt-container > a.main-search .renew-sprite {margin:1px auto 0;} #new-header .mobile_mn_op {width: 20px; height: 22px; display:inline-block;} #new-header .mobile_mn_op span {display:block; width:calc(100% + 2px); height:2px; background:#fff; margin-bottom:7px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #new-header .mobile_mn_op span:last-child {margin-bottom:0;} #new-header .mobile_mn_op.act span:nth-child(2) {opacity:0;} #new-header .mobile_mn_op.act span:nth-child(1){ margin-bottom:0; -webkit-transform: translate(-1px, 10px) rotate(45deg); -ms-transform: translate(-1px, 10px) rotate(45deg); -o-transform: translate(-1px, 10px) rotate(45deg); transform: translate(-1px, 10px) rotate(45deg); } #new-header .mobile_mn_op.act span:nth-child(3){ margin-bottom:0; -webkit-transform: translate(-1px, -1px) rotate(-45deg); -ms-transform: translate(-1px, -1px) rotate(-45deg); -o-transform: translate(-1px, -1px) rotate(-45deg); transform: translate(-1px, -1px) rotate(-45deg); } #new-header.Mobile-gnb-open {top:0;} .gnb_bg {display:none;} #main-navi {display:none; position:fixed; left:0; right:0; top:70px; bottom:0; width:100%; background:#fff; margin-left:0; padding:0; overflow-y:auto;} #main-navi .mobile-top {display:block; background:#525050; width:100%; padding:0 5%; box-sizing:border-box;} #main-navi .mobile-top:after {content:""; display:block; clear:both;} #main-navi .mobile-top a {display:block; float:left; text-align:left; position:relative; padding-left:15px; margin-left:15px;} #main-navi .mobile-top a:after {content:""; position:absolute; top:50%; left:0; width:1px; height:20px; margin-top:-10px; background:rgba(255, 255, 255, 0.1)} #main-navi .mobile-top a:first-child {padding-left:0; margin-left:0;} #main-navi .mobile-top a:first-child:after {display:none;} #main-navi .mobile-top a span {display:inline-block; padding:18px 0 18px 30px; position:relative;} #main-navi .mobile-top a span .renew-sprite {position:absolute; left:0; top:50%; transform:translateY(-50%);} #main-navi .mobile-top a.login span .renew-sprite {width: 18px; height: 20px; background-position: -249px -217px; background-size: 320px;} #main-navi .mobile-top a.join-member span .renew-sprite {width: 21px; height: 20px; background-position: -249px -190px; background-size: 320px;} #main-navi .mobile-top a.recruit-info span .renew-sprite {width: 20px; height: 20px; background-position: -249px -162px; background-size: 320px;} #main-navi .mobile-top a.hide {display:none;} #main-navi .mobile-tab {display:block;} #main-navi .mobile-tab:after {content:""; display:block; clear:both;} #main-navi .mobile-tab a {float:left; width:50%; height:40px; line-height:40px; background:#f4f4f4; text-align:center;} #main-navi .mobile-tab a span {padding:0 10%; line-height:40px;} #main-navi .mobile-tab a.act {background:#fe5e01; color:#fff;} #main-navi .mobile-mn-mypage {display:block;} #main-navi .top1menu {padding:0;} #main-navi .top1menu li.depth1 {float:none; margin-left:0; padding-bottom:0; border-bottom:1px solid #eaeaea;} #main-navi .top1menu li.depth1 > a {display:block; padding:15px 5%; position:relative;} #main-navi .top1menu li.depth1 > a:before {content:''; width:1px; height:15px; background:#666; position:absolute; right:37px; top:50%; transform:translateY(-50%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #main-navi .top1menu li.depth1 > a:after {content:''; width:15px; height:1px; background:#666; position:absolute; right:30px; top:50%; transform:translateY(-50%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #main-navi .top1menu li.depth1 > a > span {color:#333333; font-size:13px;} #main-navi .top1menu li.depth1 > a.act:before {height:0;} #main-navi .top1menu li.depth1 > a:hover span, #main-navi .top1menu li.depth1 > a.act > span {color:#fe5e01;} #main-navi .top1menu li .top2m {position:static; overflow:visible; max-height:none; width:100%; left: 0; transform: none;} #main-navi .top1menu li .top2m::before {display:none;} #main-navi .top1menu li .top2m .tit_area {display:none;} #main-navi .top1menu li .top2m .depth2_wrap {padding:0;} #main-navi .top1menu li .top2m .depth2 {width:100%; float:none; min-height:0 !important;} #main-navi .top1menu li .top2m .depth2 .depth2_tit {width:100%; padding:13px 5%; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #main-navi .top1menu li .top2m .depth2 .depth2_tit:hover, #main-navi .top1menu li .top2m .depth2 .depth2_tit.act {background:#525050; color:#fff;} #main-navi .top1menu li .top2m .depth2 li:last-child .depth2_tit {border-bottom:none;} #main-navi .top1menu li .top2m .depth3 {position:static; width:auto; padding:20px 10px 20px 30px;} #main-navi .top1menu li .top2m .depth3 li {padding-left:10px; margin-bottom:15px; width:100% !important;} #main-navi .top1menu li .top2m .depth3 li:last-child {margin-bottom:0px;} #main-navi .top1menu li .top2m .depth3 li:before {content:"-"; position:absolute; top:0; left:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #main-navi .top1menu li .top2m .depth3 .depth3_tit {padding:0; border-bottom:none; position:relative; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #main-navi .top1menu li .top2m .depth3 .depth3_tit:hover {color:#fe5e01;} #main-navi .top1menu li .top2m .depth3.depth3-column.first-column{padding-bottom:0px;} #main-navi .top1menu li .top2m .depth3.depth3-column.second-column{padding-top: 15px;} .gnb-right-box-wrap {display:block; width:auto; padding:20px 5% 40px;} .gnb-right-box {position:static; width:100%;} .gnb-right-box .navi-R-btn, .gnb-right-box .center-numBox {width:100%;} .gnb-right-box .navi-R-btn .nr_inwrap {padding:0 20px;} .gnb-right-box .navi-R-btn {border-bottom:none; height:70px;} .gnb-right-box .navi-R-btn .icon {width: 30px; height: auto; background: none; right: 20px;} .gnb-right-box .navi-R-btn.ty01:after {width:30px; height:28px; right:20px; background-size:30px auto; background-color:#fff; border-radius:0;} .gnb-right-box .navi-R-btn.ty02:after {width:30px; height:30px; right:20px; background-size:30px auto; background-color:#fff; border-radius:0;} /* .gnb-right-box .center-numBox {height:70px;} */ .gnb-right-box .center-numBox .nr_inwrap {padding:0 20px;} .top-rihgt-container > a.weChat {display:none;} /* mypage */ #mypage-wrap .col-m-4 {width:33.33333333% !important;} #mypage-wrap {display:block;} #mypage-wrap .float-list:after {content:''; display:block; clear:both;} #mypage-wrap .float-list > li {float: left; box-sizing:border-box;} #mypage-wrap .float-list > li p i {width: 30px; height: 30px; display: inline-block;} #mypage-wrap .float-list > li p i.icon-new-pro {background: url('/web/main_renewal/img/main/ico-m-recently.webp') no-repeat center center; background-size: cover;} #mypage-wrap .float-list > li p i.icon-att-pro {background: url('/web/main_renewal/img/main/ico-m-bookmark.webp') no-repeat center center; background-size: cover;} #mypage-wrap .float-list > li p i.icon-com-pro {background: url('/web/main_renewal/img/main/ico-m-compar.webp') no-repeat center center; background-size: cover;} #mypage-menu .nav {padding:0;} #mypage-menu .nav li {float:none; margin-left:0; padding-bottom:0; border-bottom:1px solid #eaeaea;} #mypage-menu .nav li > a {display:block; padding:15px 5%; position:relative; font-weight:600; text-align:left; border-bottom:none !important;} #mypage-menu .nav li.sub-visible > a:before {content:''; width:1px; height:15px; background:#666; position:absolute; right:37px; top:50%; transform:translateY(-50%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #mypage-menu .nav li.sub-visible > a:after {content:''; width:15px; height:1px; background:#666; position:absolute; right:30px; top:50%; transform:translateY(-50%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #mypage-menu .nav li > a > span {color:#333333; font-size:13px;} #mypage-menu .nav li > a.act:before {height:0;} #mypage-menu .nav li > a:hover span, #mypage-menu .nav li > a.act > span {color:#fe5e01;} #mypage-menu .nav li .depth2 {width: 100%; float: none; display:none; position: relative;}/* #mypage-menu .nav li .depth2::before {display:none;} #mypage-menu .nav li .depth2 .tit_area {display:none;} #mypage-menu .nav li .depth2 .depth2_wrap {padding:0;} #mypage-menu .nav li .depth2 .depth2 {width:100%; float:none;} */ #mypage-menu .nav li .depth2 .row-1 a {width:100%; background:#f4f4f4; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #mypage-menu .nav li .depth2 .row-1 a:hover, #mypage-menu .nav li .row-1 a.act {background:#525050; color:#fff;} #mypage-menu .nav li .depth2 .row-1 > a {font-weight:200;} #mypage-menu .nav li .depth2 li:last-child.row-1 {border-bottom:none;} #mypage-menu .nav li .depth2 .depth3 {position:static; width:auto; padding:20px 10px 20px 30px;} #mypage-menu .nav li .depth2 .depth3 li {padding-left:10px; margin-bottom:15px;} #mypage-menu .nav li .depth2 .depth3 li:last-child {margin-bottom:0px;} #mypage-menu .nav li .depth2 .depth3 li:before {content:"-"; position:absolute; top:0; left:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #mypage-menu .nav li .depth2 .depth3 .depth3_tit {padding:0; border-bottom:none; position:relative; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} #mypage-menu .nav li .depth2 .depth3 .depth3_tit:hover {color:#fe5e01;} #main-navi .top1menu li .top2m .depth3.depth3-column{display:none;} #main-navi .top1menu li .top2m .depth3.depth3-column.second-column{display:none;} } @media screen and (max-width:1024px){ .col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12 {float:left;} .col-m-1 {width:8.33333333% !important;} .col-m-2 {width:16.66666667% !important;} .col-m-3 {width:25% !important;} .col-m-4 {width:33.33333333% !important;} .col-m-5 {width:41.66666667% !important;} .col-m-6 {width:50% !important;} .col-m-7 {width:58.33333333% !important;} .col-m-8 {width:66.66666667% !important;} .col-m-9 {width:75% !important;} .col-m-10 {width:83.33333333% !important;} .col-m-11 {width:91.66666667% !important;} .col-m-12 {width:100% !important;} } @media screen and (max-width:400px){ .top-rihgt-container > a.main-search, #new-header .mobile_mn_op, #new-header .mobile_mn_cs {margin-left:10px;} } /* gnb 구조 변경 - 211220*/ @media screen and (min-width:1201px){ #main-navi .top1menu li .top2m .depth3 {display:none; width:calc(55% - 15px); position:absolute; top:0px; left:calc(45% - 15px); padding-left:30px;} #main-navi .top1menu li .top2m .depth3 .depth3_tit{word-break:break-all; line-height:1.5} #gnb-right{position:static; clear:both;} .gnb-right-box {position:static; width:100%; padding-top:20px; box-sizing:border-box;} .gnb-right-box::after {content:""; display:block; clear:both;} .gnb-right-box .navi-R-btn {margin-bottom:0;} .gnb-right-box .navi-R-btn, .gnb-right-box .center-numBox {width:32.66%; margin-right:1%; float:left; box-sizing:border-box;} .gnb-right-box .center-numBox {margin-right:0;} } @media screen and (max-width:1200px){ #main-navi .top1menu li .top2m .depth3.column{display:none;} #main-navi .top1menu li .top2m .depth3 li {padding-left:10px; margin-bottom:15px; width:100% !important;} #main-navi .top1menu li .top2m .depth3.depth3-column{display:none !important} #main-navi .top1menu li .top2m .depth3 .depth3_tit{height:auto !important;} }