.scrolled #header-wrap { color:#555} #header {max-width: none; top: 15px } #header-wrap { border-bottom: 1px solid #ddd; height: 85px; } #header .lnb-line { right: 10px;top: 25px; font-weight:bold} #btn-menu-m,#btn-menu-m span{display:inline-block;transition:all .4s;box-sizing:border-box} #btn-menu-m{position:fixed;width:30px;height:40px;top:20px;right:15px;z-index:120; display:none } #btn-menu-m span{position:absolute;left:0;width:100%;height:2px;background-color:#8c8c8c} #btn-menu-m.active span{background-color:#fff;height:1px} #btn-menu-m span:nth-of-type(1) {top: 8px;} #btn-menu-m span:nth-of-type(2) {top: 16px;width:25px} #btn-menu-m span:nth-of-type(3) {bottom: 13px;} #btn-menu-m.active span:nth-of-type(1) {-webkit-transform: translateY (16px) rotate (-45deg);transform: translateY(16px) rotate(-45deg); top: 0px;} #btn-menu-m.active span:nth-of-type(2) { opacity: 0;} #btn-menu-m.active span:nth-of-type(3){-webkit-transform:translateY(-23px) rotate(45deg);transform:translateY(-23px) rotate(45deg);bottom:0} .scrolled #btn-menu-m span { background-color:#222} .logo { margin: 7px 0 0 20px; text-align: center} .logo a {display:inline-block; width:260px; height:70px; line-height:56px; background-image:url(../img/logo.png); background-position: center left; background-repeat: no-repeat; background-size:100%} .scrolled .logo a {background-image:url(../img/logo-color.png);} .scrolled #header-wrap{background-color:rgba(255,255,255,1);border-bottom:0;top:0;z-index:4} #header-wrap{position:fixed;z-index:100;width:100%;height:80px;z-index:4; border-bottom: 1px solid rgba(255, 255, 255, .3);} #header .lnb-line { position: absolute; right:100px; } #header.fixed { position: fixed;width: 100%; top:0} #header .lnb-line:after{content:" ";visibility:hidden;display:block;height:0;clear:both} #lnb { float:left;} #lnb * { box-sizing: border-box;} #lnb > ul:after{content:" ";visibility:hidden;display:block;height:0;clear:both} #lnb > ul > li{display:inline-block;float:left;margin-left:-1px;transition:all .5s;white-space:nowrap;padding-bottom:20px} .scrolled #lnb > ul > li > a {color: #222; opacity: 0.8 } .scrolled #lnb > ul > li > a:hover {color: #0B43A6; opacity: 1} .inBox { width: 1100px; text-align: right; color: rgb(109, 109, 109); padding-top: 60px; font-size: 12px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-bottom: 20px; } .inBox span { padding-left: 6px; font-size: 12px; font-weight: bold; color: #333; } .inBox a { padding: 0px 6px; font-size: 12px; color: #666; } @media screen and (max-width: 1560px) { #lnb { display:none} #btn-menu-m { display:block} } @media screen and (max-width: 920px) { #lnb > ul > li.hide{width:10px;overflow:hidden;opacity:.5;background-color:#888;padding:0 10px;box-sizing:border-box} } #lnb > ul > li > a { color: #fff;opacity: 0.8} #lnb > ul > li > a:hover {color: #0B43A6; opacity:1} #lnb > ul > li > ul{position:absolute;width:100%;display:none;box-sizing:content-box;margin-left:-1px;z-index:2} #lnb > ul > li > ul ul{position:absolute;width:100%;display:none;border:1px solid #525252;box-sizing:content-box;margin-top:-1px;top:0;left:100%;margin-left:0} #lnb > ul > li { padding: 0 5px; position: relative;} #lnb > ul > li > a{display:block;width:100%;height:100%;padding:0 10px;text-align:center;font-size:19px;font-weight:500;color:#222;transition: 0.1s; opacity:0.9;letter-spacing: -1px} #lnb > ul > li > a:hover { opacity:1} #lnb > ul > li li{border-top:1px solid #525252;line-height:48px;height:50px;background-color:#333;padding:0;margin-top:-1px} #lnb > ul > li li:first-child {border-top:0} #lnb > ul > li li:nth-last-child(1) {height: 50px;line-height: 50px;} #lnb > ul > li li > a{width:100%;height:100%;display:block;padding:0 20px;color:#fff;font-size:14px} #lnb > ul > li li > a:hover {background-color:#39F; color:#fff;} #lnb > ul > li > ul { width: 220px; top: 100%;left: 0px;} #lnb > ul > li.on > ul { position: absolute;display: block;} #lnb > ul > li .d1 { display:none} #lnb .arrow{position:absolute;width:30px;height:30px;font-size:14px;color:#fff;display:inline-block;right:0;top:50%;margin-top:-15px;text-align:center;line-height:30px;z-index:1} #lnb ul ul .arrow {transform: rotate(-90deg);} @media screen and (max-width: 768px) { #header .lnb-line { display: none;} #header-wrap {position: fixed;top:0;} #header-wrap #logo-line { margin: 0;} #logo-line .logo { display: inline-block;float: none;} #logo-line .contact { display: none;} #btn-menu-m { display: inline-block;} #btn-menu-m { /* display: none;*/ } #top-bg-wrapper {} .scrolled #header-wrap{background-color:rgba(255,255,255,1);border-bottom:0;top:0;z-index:4} } #m-lnb-wrapper{position:fixed;top:0;right:-400px;z-index:110;max-width:400px;width:100%;height:100vh;overflow:auto;background-color:#255171;opacity:.9;box-sizing:border-box;padding-top:60px;padding-left:2em;padding-right:1em;transition:all .5s;opacity:1} #m-lnb-wrapper.on {right: 0px;} #m-lnb > ul {font-size: 14px; margin-top: 20px } #m-lnb > ul > li > a {color: #fff;} #m-lnb > ul > li > span{position:absolute;right:0;top:0;width:40px;height:50px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer; display: none} #m-lnb > ul > li.on > span {transform: rotate(180deg);} #m-lnb > ul > li li > span{position:absolute;right:0;top:0;width:40px;height:40px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer} #m-lnb > ul > li li.on > span { transform: rotate(180deg);} #m-lnb > ul > li {position: relative;} #m-lnb > ul > li > a{display:inline-block;padding:0 10px;font-size:16px} #m-lnb > ul > li {line-height: 40px;border-bottom: 1px solid #466e8b;} #m-lnb > ul > li:nth-last-child(1) {border-bottom: 0;} #m-lnb > ul > li ul {display: none;line-height: 40px;} #m-lnb > ul > li li {border-top: 1px solid #474747;background-color: #222;} #m-lnb > ul > li li li {border-top: 1px solid #959595; background-color: #777;} #m-lnb > ul > li li > a {display:inline-block;padding:3px 15px 3px 20px;font-weight:300} #m-lnb > ul > li li li > a { display: inline-block; padding: 0 10px 0 30px;} @media screen and (max-width: 768px) { #header-wrap { height:80px } } @media screen and (max-width: 640px) { .logo { margin-top:12px} .logo a { background-image: url(../img/logo.png); background-repeat:no-repeat; width:179px; height:50px;} .scrolled .logo a { background-image: url(../img/logo-color.png); width:179px; height:50px} #btn-menu-m { top:23px} } .call > a {color : #FFFFFF; font-size:1.4em} .wrap_controllers {display : none} /** applyBar *****************/ #applyBar {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 1340px; padding: 30px 0; border-radius: 30px 30px 0 0; background: #3261C1; display: flex; justify-content: center; align-items: center; z-index: 99; transition: transform .35s ease; transform: translate(-50%, 100%);} #applyBar .barBtn {font-size: 16px; font-weight: bold; background: #3261C1; color: #fff; display: flex; align-items: center; position: absolute; bottom: 99%; padding: 11px 34px; gap: 10px; border-radius: 20px 20px 0 0; cursor: pointer} #applyBar .barBtn img {transition: 0.3s;} #applyBar .logo {margin-right: 30px;} #applyBar .logo img {max-width: 210px;} #applyBar .formWrap {margin-right: 60px; display: flex; gap: 10px;} #applyBar .formWrap .inputArea {display: flex; flex-wrap: wrap; gap: 10px; width: min-content;} #applyBar .formWrap .inputArea .list {display: flex; gap: 10px;} #applyBar .formWrap .inputArea .list li {width: 170px;} #applyBar .formWrap .inputArea .list input {display: block; width: 100%; height: auto; padding: 10px; box-sizing: border-box; font-size: 14px; border: none; background: #fff; border-radius: 5px; font-family: inherit;} #applyBar .formWrap .inputArea .list input:focus {outline: none; border: 0 !important; box-shadow: none;} #applyBar .formWrap .inputArea .list select {display: block; width: 100%; height: auto; padding: 10px; box-sizing: border-box; font-size: 14px !important; border: none; border-radius: 5px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff url('../images/apply_ic_slide.svg') right 10% center no-repeat; font-family: inherit; color: #696969;} #applyBar .formWrap .inputArea .list select:focus {outline: none; border: 0 !important; box-shadow: none;} #applyBar .formWrap .inputArea .list li:last-child {width: 200px;} #applyBar .formWrap .inputArea .check {display: flex; align-items: center; color: #fff; font-size: 16px;} #applyBar .formWrap .inputArea .check input {background: #fff; border: none; width: 15px; height: 15px; margin-top: -3px; margin-right: 6px;} #applyBar .formWrap .inputArea .check a {margin-left: 6px; color: #fff;} #applyBar .formWrap .applyBtn {flex-shrink: 0; width: 100px; display: flex; align-items: center; justify-content: center; background: #fff; height: 68px; border-radius: 5px; color: #3261C1; font-family: inherit; font-weight: bold; font-size: 18px;} #applyBar .formWrap .applyBtn i {display: none; font-style: normal;} #applyBar .callWrap {color: #fff;} #applyBar .callWrap .txt {margin-bottom: 3px; font-size: 16px;} #applyBar .callWrap .tit {font-size: 32px; font-weight: 800;} #applyBar.active .barBtn img {transform: rotate(180deg);} #applyBar.open {transform: translate(-50%, 0);} @media all and (max-width: 880px) { #applyBar {width: 100%; padding: 30px 20px 25px 20px; box-sizing: border-box; border-radius: 0; z-index: 99999; transform: translate(-50%, 100%);} #applyBar .logo {display: none;} #applyBar .formWrap {flex-wrap: wrap; gap: 20px; margin-right: 0;} #applyBar .formWrap .inputArea {width: 100%; flex-wrap: wrap; row-gap: 20px;} #applyBar .formWrap .inputArea .list {flex-wrap: wrap; gap: 8px; margin-bottom: 0;} #applyBar .formWrap .inputArea .list li {width: 100%;} #applyBar .formWrap .inputArea .list li:last-child {width: 100%;} #applyBar .formWrap .inputArea .list input {font-size: 16px;} #applyBar .formWrap .inputArea .list select {font-size: 16px !important; background-position: right 5% center; padding: 10px;} #applyBar .formWrap .inputArea .check {font-size: 18px;} #applyBar .formWrap .inputArea .check input {width: 14px; height: 14px; margin-right: 4px;} #applyBar .formWrap .inputArea .check label {font-size: 10px} #applyBar .formWrap .inputArea .check a {font-size: 10px; margin-left: 2px;} #applyBar .formWrap .applyBtn {width: auto; height: auto; font-size: 14px; padding: 6px 23px; border-radius: 23px; position: absolute; font-weight: 800; bottom: 16px; right: 15px;} #applyBar .formWrap .applyBtn i {display: inline;} #applyBar .callWrap {display: none;} }