@charset 'utf-8'; /* 공통 */ #wrap{min-width: 1600px; position: relative;} .m_inBox{max-width: 1600px; margin: 0 auto; } .inBox{max-width: 1400px; margin: 0 auto; } .motionBox, .motion ul li{opacity: 0;} #header{position: absolute; top: 20px; left: 50%; max-width: 1600px; width: 100%; margin-left: -800px; height: 80px; background-color: #fff; z-index: 350; } #header .h_inner{position: relative; padding: 16px 40px;} #header .h_logo{float: left; } nav {float: right;margin-right:100px;} nav #gnb > li { float: left; font-size: 17px; position: relative; margin-left:58px;} nav #gnb > li:first-child { margin-left: 0;} nav #gnb > li > a { display: block; padding: 15px 0 32px 0; color: #141414;} nav #gnb > li > a span{padding: 10px 13px;} nav #gnb > li.on > a,nav #gnb > li:hover > a{color: #fff; } nav #gnb > li.on > a span,nav #gnb > li:hover span{background-color: #79ae57; } /* 2dep */ nav #gnb .lst_dep{display: none;position: absolute;background-color: #d1d1d1;width: 403px;top: 64px;left: 50%;margin-left: -250px;z-index: 400;} nav #gnb .lst_dep ul:after{display: block;clear: both;content: "";} nav #gnb .lst_dep ul li{float: left; margin-left: 47px; } nav #gnb .lst_dep ul li a{display: block; font-size: 15px; font-weight: 300; padding: 18px 0; color:#353535; } nav #gnb .lst_dep ul li a:hover{color:#348600;} nav #gnb .lst_dep ul li:first-child a{border-top: 0; } nav #gnb > li:nth-child(3) .lst_dep{width: 570px;} nav #gnb > li:nth-child(4) .lst_dep{width: 300px;;} nav #gnb > li:nth-child(5) .lst_dep{width: 170px;} /* rightMenu */ .btn_mainNav{position: absolute; right: 40px; top:25PX; width: 35px; height: 42px; z-index: 800; } .btn_mainNav span{position: relative; text-indent: -9999px;display: block; width: 100%; height: 23px; background: url(/img/common/btn_mainNav.jpg) left top no-repeat;} .btn_mainNav strong{display: inline-block; margin-top: 6px; color: #86876a;font-size: 13px; } .bg_menu{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 100; } .rghMenu{position: absolute; top: 0; right: -100%; width: 80%; max-width: 428px; min-width: 320px; /* height: 100%; */margin-top: 100px; z-index: 250; overflow-y: auto; overflow-x: hidden; } .rghMenu.on{right: 50%; margin-right: -800px; width: 1600px; } .rghMenu #gnb>li {} .rghMenu #gnb>li:first-child{display: none; } .rghMenu #gnb>li>a{color: #393939; font-size: 18px; display: block;padding: 20px 24px 20px 24px; background-color: #e5e5e5;border-bottom: 1px solid #cacaca;} .rghMenu #gnb>li>a.on{background-color: #71ab5d; color: #fff;} .rghMenu #gnb>li .lst_dep{display: none; } .rghMenu #gnb>li .lst_dep ul> li>a{display: block; font-size: 16px; background-color: #676767;border-bottom: 1px solid #a5a5a5; position: relative; padding: 17px 24px 17px 24px;color: #dcdcdc;} .rghMenu #gnb>li .lst_dep ul> li.on> a{ display: block; text-transform: uppercase;color: #fff; } .rghMenu .btn_close{position: absolute; z-index: 1010; top:47px; right: 20px;} .rghMenu .btn_close button{position: relative; text-indent: -9999px;display: block; width: 100%; margin:0 auto ;} .rghMenu .btn_close button:before{position: absolute; left: 0; top:0; width: 100%; height: 4px; background-color: #383838; -webkit-transform: rotate3d(0,0,1,45deg);transform: rotate3d(0,0,1,45deg); content: "";} .rghMenu .btn_close button:after{position: absolute; left: 0; top: 0; background-color: #383838; width: 100%; height: 4px;-webkit-transform: rotate3d(0,0,1,-45deg);transform: rotate3d(0,0,1,-45deg); content: "";} #footer{background-color: #353535; padding: 45px 0; position: relative; } #footer .m_inBox{position: relative; } #footer .f_info{max-width: 1060px;} #footer .comp_info:after{display: block;clear: both;content: "";} #footer .comp_info dl{width: 33.33%; float: left; padding: 27px 32px; min-height: 163px; border-left: 1px solid #5b5b5b;} #footer .comp_info dl:nth-child(1){width: 20%;} #footer .comp_info dl:nth-child(2){width: 40%;} #footer .comp_info dl:nth-child(3){width: 40%;} #footer .comp_info dl dt{color: #fff; font-size: 16px; margin-bottom: 30px; } #footer .comp_info dl dt span{padding-right: 34px; } #footer .comp_info dl:nth-child(1) dt span{background: url(/img/common/ico_quick.png) right center no-repeat;} #footer .comp_info dl:nth-child(2) dt span{background: url(/img/common/ico_office.png) right center no-repeat;} #footer .comp_info dl:nth-child(3) dt span{background: url(/img/common/ico_contact.png) right center no-repeat;} #footer .comp_info dl dd{display: block; color: #b9b9b9; font-size: 16px; line-height: 1.2;} #footer .comp_info dl dd a{color: #b9b9b9; } #footer .comp_info dl dd{margin-top: 20px; } #footer .comp_info dl dd:first-child{margin-top: 0; } #footer .comp_info dl dd:after{display: block;clear: both;content: "";} #footer .comp_info dl dd .firstNum{color: #fff; display: inline-block; } #footer .comp_info dl dd .firstNum span{font-size: 16px; display: block; } #footer .comp_info dl dd .firstNum strong{font-size: 30px; font-weight: bold; margin-top: 15px; } #footer .comp_info dl dd ul.info{display: inline-block; margin-left: 5%;} #footer .f_right{text-align: right; position: absolute; right: 0; bottom:33px; } #footer .f_right .copyright{font-size: 14px; font-weight: 300; color: #818181; margin-top: 10px;} #footer .f_right .down { position: absolute; right: 0; bottom:100px; } #footer .f_right .down a { color:#fff; font-size:17px; font-weight:500; line-height:1.3; height:55px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:5px 30px; border-radius:999px; background:#3F3F3F; box-shadow:-5px -5px 10px 0px rgba(85, 85, 85, 0.10), 5px 5px 10px 0px rgba(46, 46, 46, 0.80); } /* s_visual */ #s_visual{position: relative; height: 480px;} #s_visual > .inner{display:block; width: 100%; height: 100%;background-position: center center ;background-repeat: no-repeat; -webkit-background-size: cover;background-size: cover; color: #fff;} #s_visual img{display: block;} #s_visual .cont{display: table; max-width: 1282px; width: 100%; height: 100%; margin: 0 auto; } #s_visual .cont > .inner{display: table-cell; vertical-align: middle; text-align: center; padding-top: 50px; } #s_visual .cont .s_tit{font-size: 50px; font-weight: bold;color: #fff; position: relative; text-transform: uppercase; } #s_visual .cont span{font-size: 18px; color: rgba(256,256,256,0.6); margin-top: 28px; display: inline-block; } /* snb */ #snb{position: relative; margin-top: -105px; } #snb .lst_dep{text-align: center; overflow: hidden;} #snb .lst_dep ul{display: inline-block; margin-left: -5px; } #snb .lst_dep ul:after{display: block;clear: both;content: ""; } #snb .lst_dep ul li{float: left; width: 230px; height: 60px; border: 1px solid #787882; margin-left: 5px; display: table;} #snb .lst_dep ul li a{ display: block; font-size: 18px; color: #fff; padding: 20px 10px; background-color: rgba(0,0,0,0.5); display: table-cell;vertical-align: middle; } #snb .lst_dep ul li.on a{background-color: #3ea642;} /* 서브 레이아웃 */ .sc_inner{max-width: 1400px; margin: 135px auto 100px auto ; position: relative; } .sc_inner:after{display: block;clear: both;content: "";} .innerSub {max-width: 1400px; margin: 100px auto ; position: relative; } .innerSub.SubB { margin-bottom: 0; } .innerSub:after{display: block;clear: both;content: "";} .sc_inner #s_article{} .s_title{} .sTop{position: relative; border-bottom: 1px solid #ccc; margin-bottom: 50px;} .sTop:after{display: block;clear: both;content:"";} .sTop h2, .sTop h3{color: #333;font-size:40px; font-weight: bold; color: #333; float: left; position: relative; padding-bottom: 16px; } .sTop h2:after, .sTop h3:after{position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: #000; content: "";} .sTop .path{float: right; margin-top: 25px; } .sTop .path li{float: left; font-size: 16px; padding-left: 14px; margin-left: 14px; color: #a4a4a4; font-family: 'Noto Sans KR'; position: relative;} .sTop .path li:first-child{padding-left: 0;margin-left: 0; } .sTop .path li:first-child img{vertical-align: top; } .sTop .path li:after{position: absolute; left: 0; top: 50%; margin-top: -6.5px; width: 7px; height: 13px; background: url(/img/common/path_arr.png) left top no-repeat; content: "";} .sTop .path li:first-child:after{display: none;} .sTop .path li.ing{color: #252525;} #contents{min-height: 500px; } @media screen and (max-width:1600px) { #wrap{min-width: 100%; } } @media screen and (max-width:1400px) { #wrap{min-width: 320PX; } #header{ width: 100%;top: 0;margin-left: inherit;left: inherit;} .rghMenu.on{right: 0; margin-right: 0; width: 100%; margin-top: 80px; } #footer .f_right{position: relative; margin-top: 10%; right:30px; } #footer .f_right .down { position: relative; right: 0; bottom:unset; margin-bottom:30px; } .sc_inner{padding: 0 15px; margin: 90px auto 100px auto; } .innerSub{padding: 0 15px; margin: 80px auto; } } @media screen and (max-width:1200px) { #header nav{display: none; } #footer .comp_info dl:nth-child(1){width: 26%; border-left: 0;} #footer .comp_info dl:nth-child(2){width: 31%;} #footer .comp_info dl:nth-child(3){width: 35%;} #footer .comp_info dl{padding: 17px 32px;} #footer .comp_info dl dd{margin-top: 10px;} #footer .comp_info dl dd ul.info{display: block; margin-left: 0; margin-top: 2%; } #footer .f_info{max-width: inherit; } } @media screen and (max-width:960px) { #footer .comp_info dl{padding: 17px 20px;} #footer .comp_info dl dd .firstNum span{font-size: 14px; } #footer .comp_info dl dd .firstNum strong{font-size: 25px; margin-top: 10px; } #s_visual{height:400px; } #s_visual .cont .s_tit{font-size: 42px; } #s_visual .cont span{font-size: 16px; margin-top: 15px; } #snb {margin-top: -95px; } #snb .lst_dep ul {display: block; padding: 0 15px; } #snb .lst_dep ul li{width: calc(25% - 5px); height: auto; } #snb .lst_dep ul li a{font-size: 14px; padding: 15px 10px; } .sTop h2, .sTop h3{font-size: 30px; } .sTop .path{display: none; } } @media screen and (max-width:720px) { #footer .comp_info dl dd{margin-top:5px; font-size: 14px;} #footer .comp_info dl dd br{display: none;} } @media screen and (max-width:640px) { .m_inBox{padding: 0 15px; } #header .h_inner{padding: 16px 15px; } .btn_mainNav{right: 15px; } #footer .comp_info dl{border-left: none; border-top: 1px solid #5b5b5b; padding: 25px 0; min-height: auto ; } #footer .comp_info dl:nth-child(1),#footer .comp_info dl:nth-child(2),#footer .comp_info dl:nth-child(3){width: 100%; } #footer .comp_info dl dt{margin-bottom: 15px; } #footer .comp_info dl dt span{padding-right: 25px;} #footer .f_right{right: 0;} #footer .f_right .f_logo{width: 40%; display: inline-block; } #footer .f_right .copyright{font-size: 13px; } #footer .f_right .down { display:flex; justify-content:center; } #footer .f_right .down a { font-size:16px; height:50px; padding:0 25px; } #snb .lst_dep ul li{height: 58px;} #snb .lst_dep ul li a{line-height: 1.3; height: 100%; padding: 5px;} #s_visual .cont > .inner{padding-top: 30px; } #s_visual .cont .s_tit{font-size: 35px;} #s_visual .cont span{font-size: 14px; margin-top: 15px; } #contents{min-height: 300px; } } @media screen and (max-width:520px) { #header .h_inner{padding: 21px 15px;} #header .h_logo{width: 200px; } .btn_mainNav{right: 15px; } #s_visual{height: 350px;} } @media screen and (max-width:480px) { br.w480_block{display:block !important;} } @media all and (max-width:640px){ .pop-wrap{left:50% !important;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);width:95% !important;word-break:break-all !important;} .pop-wrap > div{width:100% !important;padding-right:3%;box-sizing:border-box;} .pop-wrap p{word-break:break-all;} .pop-wrap a{word-break:break-all;} } /* 게시글 동영상 반응형 24.06.27 */ .video-container { position: relative; overflow: hidden; max-width: 1000px; margin:0 auto; background: #000; } .video-container:before { content: ''; display: block; padding-bottom: 56.25%; /* 16:9 비율 */ } .video-container video, .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* new 25.04.24 */ .innerP100 { padding:0 100px; width:100%; margin:0 auto; } @media screen and (max-width:1430px){ .innerP100 { padding:0 15px; } } .innerP140 { padding:0 140px; } @media screen and (max-width:1430px){ .innerP140 { padding:0 15px; } } .inner1440 { max-width:1400px; margin:0 auto; } @media screen and (max-width:1440px){ .inner1440 { padding:0 15px; } } header.new { position:absolute; left:0; top:0; height:80px; width:100%; background:#fff; z-index:5; } header.new > div { display:flex; align-items:center; justify-content:space-between; height:100%; } header #navi #gnb > ul { display:flex; text-align:center; margin-right:-50px} header #navi #gnb > ul > li { position:relative; } header #navi #gnb > ul > li > a { overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; width:160px; height:80px; text-wrap:nowrap; color:#111; font-size:19px; font-weight:500; line-height:1.3; transition:all 0.3s; } header #navi #gnb > ul > li .subDepth { display:none; position:absolute; left:50%; top:78px; transform:translateX(-50%); width:160px; background:rgba(255, 255, 255, 0.80); text-align:center; } header #navi #gnb > ul > li .subDepth > ul { padding:20px 0; } header #navi #gnb > ul > li .subDepth > ul > li:not(:last-child) { margin-bottom:20px; } header #navi #gnb > ul > li .subDepth > ul > li a { color:#333; font-size:18px; font-weight:400; line-height:1.3; } header .allBox { position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:20; display:none } header .allBox a { position:relative; width:30px; height:30px; display:block; transition:all 0.7s; } header .allBox span { position:absolute; left:50%; top:50%; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)); display:block; width:30px; height:3px; background:#000; border-radius:3px; transition:all 0.2s ease-in-out; } header .allmenu span:nth-child(1) { margin-top:-7px; } header .allmenu span:nth-child(2) { margin-top:0; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) rotate(0deg); } header .allmenu span:nth-child(3) { display:block; margin-top:7px; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) rotate(0deg); } #allmenuBox { position:fixed; top:0; left:unset; right:-520px; max-width:520px; width:100%; height:100vh; transition:all 0.3s 0.1s ease-in-out; z-index:10000; } #allmenuBox.on { right:0; z-index:10000; opacity:1; visibility:visible; transition:all 0.3s 0.1s ease-in-out; background:rgba(0,0,0,0.9); backdrop-filter:blur(7.5px); } #allmenuBox .menuCont { position:relative; z-index:5; height:100vh; } #allmenuBox .menuBox { align-items:flex-start; padding:0 60px; width:100%; } #allmenuBox .menuBox .mCont { width:100%; } #allmenuBox .menuBox .mCont > ul { position:relative; top:100px; padding:0; height:100%; } #allmenuBox .menuBox .mCont > ul > li { position:relative; display:block;} #allmenuBox .menuBox .mCont > ul > li:not(:last-child) { margin-bottom:30px; } #allmenuBox .menuBox .mCont > ul > li > a { width:auto; font-size:30px; line-height:1.3; font-weight:500; color:rgba(255,255,255,0.7); } #allmenuBox .menuBox .mCont > ul > li.hover > a { color:#fff; } #allmenuBox .menuBox .mCont > ul > li > a br { display:none; } #allmenuBox .menuBox .mCont > ul > li > .subDepth { position:relative; display:none; width:100%; } #allmenuBox .menuBox .mCont > ul > li.hover .subDepth { display:block; } #allmenuBox .menuBox .mCont > ul > li .subDepth > ul { padding:15px 0 10px 2px; gap:20px 30px; display:flex; flex-wrap:wrap; } #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li { width:calc((100% - 30px) / 2); } #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li > a { font-size:20px; color:rgba(255,255,255,1); font-weight:400; } #allmenuBox .btnClose { opacity:0; transition:all 0.7s; } #allmenuBox.on .btnClose { opacity:1; position:absolute; top:24px; right:22px; width:30px; height:30px; cursor:pointer; z-index:2; background:url(/imgNew/common/btnClose.svg) center center no-repeat; } @media screen and (max-width:1440px) { header #navi #gnb > ul { margin-right:-20px; } header #navi #gnb > ul > li > a { width:140px; } header #navi #gnb > ul > li .subDepth { width:140px; } } @media screen and (max-width:1280px) { header #navi #gnb > ul > li > a { font-size:19px; } header #navi #gnb > ul > li .subDepth > ul > li:not(:last-child) { margin-bottom:15px; } header #navi #gnb > ul > li .subDepth > ul > li a { font-size:17px; } } @media screen and (max-width:1024px) { header #navi { display:none } header .allBox { display:block; } } @media screen and (max-width:640px) { #allmenuBox .menuBox { padding:0 20px; } #allmenuBox .menuBox .mCont > ul > li > a { font-size:28px; } #allmenuBox .menuBox .mCont > ul > li .subDepth > ul { gap:15px 20px; } #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li { width:calc((100% - 20px) / 2); } #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li > a { font-size:18px; } }