.header {width: 100%; position: relative; z-index:1111;} .header .area{ display:flex; justify-content: space-between;align-items: flex-end;align-items: center; padding:30px 0; } .header .logo, .header .nav .quick-text .m-logo{font-family: 'HsBombaram21'; font-size:16px; font-weight:normal; color:#283748; letter-spacing:0; } .header .logo b, .header .nav .quick-text .m-logo b{ display:block; letter-spacing:0; font-size:37px; font-weight:normal; margin-top:5px;} .header .area p{ font-weight:600;} .header .area p span+span{ margin-left:20px;} .header .area p span i{ margin-right:5px;} .header .top-icon ul{ display:flex;text-align:center;} .header .top-icon ul li a{ color:#333; display:block;} .header .top-icon ul li img{ height:45px;} .header .top-icon ul li p{ font-size:19px; margin-top:10px;} .header .top-icon ul li+li{ margin-left:50px;} .header .nav { display:flex;align-items: center; background:#283748; padding:0 70px;} .header .nav .close {display: none;} .header .nav .deps_1 {display: flex;} .header .nav .deps_1 > li {height: 100%; font-size:25px; font-weight: 500; position: relative} .header .nav .deps_1 > li+li{ position:relative; margin-left:30px; padding-left:30px;} .header .nav .deps_1 > li+li:before{ content:''; position:absolute; top:50%;transform: translateY(-50%); left:0; width:5px; height:5px; border-radius:50%; background:#fff;} .header .nav .deps_1 > li a{ padding:40px 0; display: block;white-space:nowrap; display: flex; align-items: center; color: #fff ; position: relative; font-size:27px;} .header .nav .deps_1 > li a:hover{ color:#F66} .header .quick-text {display: none} .header .nav .deps_1 > li .deps_2 {position: absolute;left:50%; bottom: 15px; transform: translateY(100%); width:250px; margin-left:-125px;background:#283748; opacity: 0; transition: all .3s ;padding: 17px 0; visibility: hidden} .header .nav .deps_1 > li .deps_2 li > a {padding: 8px 0px;justify-content: center; font-size: 19px; color: #fff} .header .nav .deps_1 > li .deps_2 li > a:hover{ color:#0CF} .header > .icon-box { position:absolute; top:50%; transform: translateY(-50%); right:0;} .header > .icon-box button {padding:10px; font-size: 24px; color: #333; cursor:pointer} .header > .icon-box button.ham {display: none} .header .fix_btn_box {position: fixed; right: 40px; bottom: 40px; opacity: 1; z-index: 5 ; transition: all .3s} /*전체메뉴*/ #modal{display:none;} .modal-btn{font-size:25px;cursor: pointer;; margin-right:30px;} .dialog {display:none;position: fixed;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;background:url(../img/common/modal-bg.jpg) no-repeat 50% 50% / cover;} .dialog>.tb {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;} .dialog>.tb .inner img{ width:500px;} .dialog>.tb .inner > ul{display: grid; grid-template-columns:repeat(5, 1fr); text-align:center; border-top:2px solid #fff; padding-top:30px; margin-top:50px;} .dialog>.tb .inner > ul > li+li{ border-left:1px solid rgb(255,255,255,0.3)} .dialog>.tb .inner > ul > li > a{ font-size:35px; font-weight:700; border-bottom:1px solid #fff; display:block; margin:0 20px 30px 20px; padding-bottom:20px;} .dialog>.tb .inner > ul > li:first-child a{ margin-left:0;} .dialog>.tb .inner > ul > li:last-child a{ margin-right:0;} .dialog>.tb .inner > ul > li > ul > li{ line-height:40px;} .dialog>.tb a{ color:#fff;} input[id="modal"]:checked + label + .dialog{ display: block;} .dialog .m-close{font-size:55px;cursor:pointer; display:block; color:#fff; position:absolute; top:30px; right:30px;} .inner{ position:relative; width:1920px; margin:0 auto;} a.over{transition: all 0.3s; display:block;} a.over:hover, a.over:focus, a.over:hover, a.over:focus { background: #ebf2f6; } #footer{ background:url(../img/common/footer-bg.jpg) 50% 100%; background-size:cover; color:#fff; margin-top:170px; padding:500px 0 150px 0;} #footer .inner > h1{font-family: 'HsBombaram21'; font-size:35px; font-weight:normal; letter-spacing:0;} #footer .inner > h2{ margin:10px 0 30px 0; font-weight:normal} .footer_link {display:flex;justify-content: space-between;} .footer_link ul{ display:flex;align-items: center;} .footer_link ul li+li{ margin-left:25px;} .footer_link ul:nth-child(1) a{ display:inline-block; border:1px solid rgb(255,255,255,0.3); padding:10px 20px;} .footer_link ul:nth-child(1) a i{ margin-right:10px;} .footer_link ul:nth-child(2) li+li{ position:relative; padding-left:20px;} .footer_link ul:nth-child(2) li+li:before{ content:''; position:absolute; top:50%;transform: translateY(-50%); left:0; width:1px; height:15px; border-left:1px solid rgb(255,255,255,0.3);} .footer_link ul a{ color:#fff;} .footer_info{ margin-top:50px; border-top:1px solid rgb(255,255,255,0.2); padding-top:50px;display:flex;justify-content: space-between;} .footer_info .area01 h2{ font-size:23px;} .footer_info .area02 h2{ font-size:20px;} .footer_info .area02 h2 b{ font-size:25px; margin-left:5px;} .footer_info .area02 p{ font-size:16px; color:rgb(255,255,255,0.7); margin-top:7px;} .footer_info span+span{ margin-left:15px;} #footer .copy{ color:rgb(255,255,255,0.9); margin-top:10px;} #footer .copy a{color:rgb(255,255,255,0.9)} /* siteLink */ .siteLink { } .siteLink .siteBtn { position: relative; } .siteLink .siteBtn button { width: 100%;height:100%;display: flex; justify-content: space-between;align-items: center; background:rgb(255,255,255,0.1); padding:15px 20px; border-radius: 0.8rem; color:rgb(255,255,255,0.5); letter-spacing:1px;font-size:17px; } .siteLink .siteBtn button i { display: inline-block; color: #666; margin-left:50px; } .siteLink .siteBtn .sitelst { position: absolute; width:100%; box-sizing:border-box; padding: 0.9rem; bottom: calc(100% + 0.2rem); background: #fff; border-radius: 0.8rem; display: none; z-index: 2; } .siteLink .siteBtn .sitelst ul { height:178px; overflow-y: auto; } .siteLink .siteBtn .sitelst ul li + li { margin-top:10px; } .siteLink .siteBtn .sitelst ul li a { display: block; color: #444; font-size:18px; } .siteLink .siteBtn .sitelst ul li a:hover{ color:#0072bc; font-weight:600;} /* siteLink:active */ .siteLink .siteBtn button i { transition: all 0.3s; } .siteLink .siteBtn.on button { background: #004895; color: #fff; } .siteLink .siteBtn.on button i { transform: rotate(180deg); color: #fff; } @media (max-width: 1980px) { .inner{ width:1440px;} .header > .inner:before{height:150px; width:285px; right:27%; } .header .area{padding:20px 0;} .header .logo, .header .nav .quick-text .m-logo{ padding:0 0 0 10px;font-size:13px;} .header .logo b, .header .nav .quick-text .m-logo b{ font-size:30px;} .header .nav .deps_1 > li {font-size:21px;} .header .top-icon ul li+li{ margin-left:37px;} .header .nav .deps_1 > li a {padding:30px 0; font-size:21px;} .header .nav .deps_1 > li .deps_2 { width:200px; margin-left:-100px;} .header .nav .deps_1 > li .deps_2 li > a { font-size: 17px;} .header .top-icon ul li img{ height:30px;} .header .top-icon ul li p{ font-size:15px;margin-top:5px;} .dialog>.tb .inner > ul{ margin-top:30px;} .dialog>.tb .inner img{ width:400px;} .dialog>.tb .inner > ul > li > a{ font-size:30px;} .dialog>.tb .inner > ul > li > ul > li{ line-height:30px;} .dialog .m-close{font-size:40px;} #footer{ margin-top:130px; padding:400px 0 100px 0; } #footer .inner h1{ font-size:27px;} #footer .copy{ font-size:15px;} .footer_link h1 img{ width:300px; } .footer_info p b{font-size:16px;} .siteLink .siteBtn button{ font-size:14px; padding:10px 20px;} .siteLink .siteBtn button i{ font-size:20px;} .siteLink .siteBtn .sitelst ul li a { font-size:15px; } .siteLink .siteBtn .sitelst ul { height:158px;} } @media (max-width: 1440px) { .header .nav .close , .header > .icon-box button.ham, .header .quick-text {display: block} .header .area p{ display:none;} .header .nav .quick-text .m-logo{ padding-left:0;} .header .nav .close {position: absolute; right:20px; top:30px; color: #333; font-size: 28px} .header .nav {position: fixed; left:0%;right: auto ;top: 0; width: 100%; height: 100%; z-index: 10; display: block; background-color: #002f60; transform: translate(100%,0); padding:0; transition: left .5s ease-in-out;overflow: auto; display: flex; flex-direction: column; align-items: flex-start;;} .header.on .nav {left: -100%; } .header .nav .quick-text{display: block;width: 100%; padding:20px 20px; box-sizing:border-box; background:#fff;} .header .nav .quick-text .m-logo img{ width:250px;} .header .nav .quick-text > p {font-size: 24px; color: #fff; font-weight: 700; padding: 0 40px;} .header .nav .quick-text .navi_bg {padding: 0; box-shadow: none; border-radius: 0; display: flex; margin-top: 20px;border-bottom: 10px solid rgba(255,255,255, 0.2) } .header .nav .quick-text .navi_bg li {width: 20%; border: 1px solid rgba(255,255,255, 0.2); height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px;} .header .nav .quick-text .navi_bg li + li {margin-top: 0; border-left: none;} .header .nav .quick-text .navi_bg .icon_box {height:40px ; display: flex; align-items: center ; justify-content: center } .header .nav .quick-text .navi_bg li .ico_tit {word-break: keep-all;} .header .nav .quick-text .navi_bg li .ico_tit br {display: none;} .header .nav .bot-text {display: block; display: flex; font-size: 15px; width: 100%; padding-left: 40px; padding-top: 15px;} .header .nav .bot-text ul {display: flex; width: 100%;} .header .nav .bot-text ul li {border: 1px solid rgba(255,255,255, 0.2); color: #fff; border-radius: 50px; padding: 0 15px; height: 35px; line-height: 33px; font-size: 13px;} .header .nav .bot-text ul li + li {margin-left: 15px;} .header .nav > ul {display: flex;flex-direction: column; align-items: flex-start; padding: 20px 0;} .header.on > .right .spe .ham {display:none} .header.on > .right .spe .close {display:flex; position: fixed; right: 0; top: 0px; width: 80px; height: 80px;} .header .nav .deps_1 {padding:0 10px; margin-top:15px; box-sizing:border-box; width: 100%; height: auto} .header .nav .deps_1 > li {width: 100%; height: auto; font-weight: 500; font-size:20px; border-bottom:1px solid rgb(255,255,255,0.05) } .header .nav .deps_1 > li+li{ margin-left:0px; padding-left:0;} .header .nav .deps_1 > li+li:before{ display:none;} .header .nav .deps_1 > li > a {height: auto; padding: 0px;color: #fff !important; display: flex; align-items: center; justify-content: flex-start; padding: 20px 30px 0px; padding-bottom:20px ;} .header .nav .deps_1 > li > a::after { content: "\ea4e"; font-family: "remixicon";display: none; posi0tion: static; width: auto; height:auto; font-size:20px; transform: translateX(0); vertical-align: middle; line-height: 1; margin-left: auto; font-weight: 500; width: auto; transition: all .3s;} .header .nav .deps_1 > li:nth-of-type(1), .header .nav .deps_1 > li:nth-of-type(2), .header .nav .deps_1 > li:nth-of-type(4), .header .nav .deps_1 > li:nth-of-type(5), .header .nav .deps_1 > li:nth-of-type(6) {cursor: pointer} .header .nav .deps_1 > li:nth-of-type(1) > a, .header .nav .deps_1 > li:nth-of-type(2) > a, .header .nav .deps_1 > li:nth-of-type(4) > a, .header .nav .deps_1 > li:nth-of-type(5) > a, .header .nav .deps_1 > li:nth-of-type(6) > a{pointer-events: none} .header .nav .deps_1 > li:nth-of-type(1) > a:after, .header .nav .deps_1 > li:nth-of-type(2) > a:after, .header .nav .deps_1 > li:nth-of-type(4) > a:after, .header .nav .deps_1 > li:nth-of-type(5) > a:after, .header .nav .deps_1 > li:nth-of-type(6) > a:after{display: inline-block} .header .nav .deps_1 > li:first-child a{margin-top: 0; } .header .nav .deps_1 > li.on {background-color: transparent; color: #fff;} .header .nav .deps_1 > li.active > a::after {transform: rotate(180deg); } .header .nav .deps_1 > li .deps_2 {position: static; transform: none; opacity: 1;visibility: visible; transition: none; display: none; left:0; margin:0; width:100%; background:rgb(0,0,0,0.25)} .header .nav .deps_1 > li .deps_2 li > a {justify-content: flex-start; padding-left: 40px; color:rgb(255,255,255,0.6);} .navi_bg {; border-radius: 55px; padding:45.5px 20px 42.5px; box-shadow:2px 1px 25px rgba(0,0,0,0.35);} .navi_bg li + li {margin-top:40px;} .navi_bg i {font-size:35px; color: rgba(255,255,255,0.3); display: block; text-align: center;} .navi_bg .ico_tit {font-size:13px; font-weight: 400; margin:15px auto 0; color:#fff; display: block; text-align: center;} .navi_bg a {display: block; width:100%; text-align: center;} .navi_bg img {width:36px; opacity: 0.3;} .navi_bg a i, .navi_bg a img {transition: 0.3s ease-in-out;} .header .fix_btn_box .menu_btn_box {display: none} .deps_3 {display: none;} .inner{ width:100%;} #footer{padding: 400px 10px 100px 10px;} } @media (min-width: 1440px){ .header .nav .deps_1 > li:hover a:before {opacity: 1; bottom: -5px; } .header .nav .deps_1 > li:hover .deps_2 {opacity: 1; bottom: 0; visibility:inherit} .header .fix_btn_box .top_btn_box:hover {box-shadow: none; background: #000;} .header .fix_btn_box .top_btn_box:hover i {color:#fff;} .header .fix_btn_box .menu_btn_box:hover ul{max-height: 542px; opacity: 1} .header .fix_btn_box .menu_btn_box:hover >i {opacity: 0;visibility: hidden} .header .fix_btn_box .menu_btn_box ul li a:hover .icon {opacity: 1} } @media (max-width:1024px){ #footer{padding:200px 10px 100px 10px; } .footer_link{ display:block;} .footer_link ul{ margin-top:15px;} .footer_info{ display:block;} .footer_info .area02{ margin-top:20px;} } @media (max-width:800px){ #footer .inner > h2{ font-size:19px;} .footer_link ul li+li{ margin-left:10px;} .footer_link ul:nth-child(2) li+li{ padding-left:10px;} } @media (max-width:640px){ #footer .inner h1{ font-size:23px;} #footer .inner > h2 br{ display:none} .header .logo, .header .nav .quick-text .m-logo{font-size:12px;} .header .logo b, .header .nav .quick-text .m-logo b{ font-size:25px;} } @media (max-width:480px){ .header .logo b, .header .nav .quick-text .m-logo b{ font-size:22px;} #footer{padding:200px 10px 50px 10px; background-position:20% 100%; } #footer .copy{ margin-top:5px; opacity:0.7; font-size:13px; letter-spacing:0;} .footer_info .area01 h2{ font-size:20px;} .footer_link ul:nth-child(1) a{ padding:10px 15px;} .footer_info .area02 p span{ display:block;} .footer_info .area02 p b{ display:none} .footer_info .area02 p br{ display:none;} }