#header { margin:0 auto; position: relative ;top:0; z-index: 1400; width:100%} ul#lnb li.dropdown:hover > ul.dropdown-menu {display: block !important;} ul#lnb li.active:hover > ul.dropdown-menu { display: block !important;} #lnb ul.dropdown-menu {list-style: none; display: none; position: absolute; z-index: 1000;margin: 0px; padding:0px 0 0px 0; left: 0px; top: 100%; background-color: rgb(255, 255, 255); width:150px} .dropdown-menu > li {width:100%; padding: 10px 0px 0px 20px; text-align:left; background:#000000} .dropdown-menu > li:last-child {padding: 10px 0px 20px 20px;} .dropdown-menu > li > a {width:100%; color: rgb(255, 255, 255); line-height: 15px; clear: both; font-size: 15px; font-weight: 600; display: block; white-space: nowrap;text-decoration: none;} .dropdown-menu > li > a:hover { color: rgb(255, 0, 0); text-decoration: none; } .dropdown-menu > li > a:focus {color: rgb(255, 0, 0); text-decoration: none; background-color: rgb(245, 245, 245);} .dropdown-menu > .active > a {outline: 0px; color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(51, 122, 183);} .dropdown-menu > .active > a:hover {outline: 0px; color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(51, 122, 183);} .dropdown-menu > .active > a:focus {outline: 0px; color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(51, 122, 183);} .dropdown { position: relative;} .h_wrap { margin:0 auto; height: 70px; background: rgba(0, 0, 0, 0.8); } .h_wrap .h_logo { margin: 0px auto; width: 100%; position: relative; } .h_wrap h1 { left: 50%; top: 15px; position: absolute; z-index: 1525; transform: translateX(-50%);} .h_wrap h1 img { height: 45px; padding: 0px 0px;} .h_navi { height:100%; width: 100%; z-index:2000} .h_navi .h_util {margin: 0px auto; width: 100%;} .h_util .util_left {float: left;padding: 10px 0px;15px 0px;} .h_util .util_right {float: right;padding: 10px 0px;} .h_wrap .row-flex {width:100%; margin:0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .tel_warp {padding: 25px 0px;} .tel {display: block; margin:10px 0px 0 20px ; z-index:20000;} .tel li {float:left;margin:0 auto; padding:0px 20px 0 0; position: relative;font-size: 12px;font-weight: 500;color: #a6a6a6; } .tel li a {font-size: 12px;font-weight: 500;color: #a6a6a6; } .tel li:last-child {padding:0 0px 0 0px} .tel li:after {content: '';display: block;width: 1px;height: 8px;position: absolute;top: 50%;right: 10px;margin-top: -4px; background: #c7c7c7;} .tel li:last-child:after {content: '';display: block;width: 0px;height: 0px;position: absolute;top: 50%;right: 10px;margin-top: -4px; background: #c7c7c7;} .tel li a:hover{color: #ffffff;} /**** 국가 텍스트 ***/ .lang {display: block; margin:10px 20px 0 0 ; z-index:20000;} .lang li{float:right; margin:0 auto; padding:0px; position: relative;} .lang li a {display: block;padding: 0 10px;font-size: 12px;font-weight: 500;color: #a6a6a6; } .lang li a:after {content: '';display: block;width: 1px;height: 8px;position: absolute;top: 50%;left: 0;margin-top: -4px; background: #c7c7c7;} .lang li:last-child a:after {display: none;} .lang li a:hover{color: #ffffff;} .lang li a.active {color: #ff1282;} .lang li:hover ul{display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */} .lang .sub-lang {display: none;padding:7px 0 0 0;margin:0px;border:0px;position:absolute;width:120px;z-index:900;left:-50px; /*top:1em;left:0;*/} .lang .sub-lang li {background: rgba(0, 0, 0, 0.5);display:block;float:none;margin:0px;padding:5px 10px 8px 10px;width:120px;} .lang .sub-lang li:first-child {padding:7px 10px 0px 10px; } .lang .sub-lang li a{display:block;margin:0px;padding:0px; text-align:left;font-size: 12px;font-weight: 500;color: #a6a6a6; } .lang .sub-lang li:hover a{color:#ffffff;} .lang .sub-lang li a:after {display: none;} .lang .sub-lang li a.active {color: #ff1282;} .side_menu {display: none;} .fixed#header .lnb { top: 0px !important; position: fixed !important;} .lnb { background: rgba(0, 0, 0, 0.6); top: 70px; width: 100%; position: absolute; z-index: -1;text-align::center; } .lnb_wrap { margin: 0 auto; width: 1200px; position: relative;text-align::center; } .lnb_wrap::after { clear: both; display: block; content: "";} .lnb_wrap{text-align:center;} .lnb_wrap ul{display:inline-block; vertical-align:top;} .lnb_wrap ul:after{content:''; display:block; clear:both;} .lnb_wrap ul li{float:left;} .lnb_bg::before { background: rgb(229, 229, 229); left: 0px; top: 0px; width: 100%; height: 1px; position: absolute; content: "";} .fixed#header .lnb_bg { top: 79px !important; position: fixed !important;} .lnb .lnb-logo {display:none; float:left;height:60px; width:230px; line-height:55px; text-align:center;} .lnb .lnb-logo img {width:60%;height:auto; vertical-align:middle; margin-left:50px;} #lnb {display:inline-block;} #lnb > li { padding: 0px 20px;text-align:center;} #lnb > li:first-child { padding-left: 0px;} #lnb > li:last-child { padding-right: 0px;} #lnb > li > a {padding: 18px 0px; text-align: center; line-height: 20px; letter-spacing: -0.01em; font-size: 15px; font-weight:500; display: block; position: relative;color:#ffffff; z-index:999999;} #lnb > li > a::after { background: rgb(178, 178, 178); border-radius: 2px; top: 27px; width: 4px; height: 4px; right: -20px; position: absolute; content: "";} #lnb > li:last-child > a::after { display: none;} #lnb > li.active > a {color: rgb(255, 0, 0);} #lnb > li > a.page {color: #ff0000; font-weight:500; font-weight:bold; } #lnb > li.active > a::before { background: rgb(255, 0, 0); left: 0px; top: 0px; width: 100%; height: 4px; position: absolute; content: "";} .mobile-logo { display: none;} #sideRightPushy { display: none;} @media only screen and (max-width:1100px) { .lnb_wrap { margin: 0 auto; width: 100%; position: relative;text-align::center;} } @media only screen and (max-width:980px) { .pc-logo { display:none } .mobile-logo { display:inline-block ; float:left; height:60px; width:230px; z-index: 140000;} .h_wrap { margin:0 auto; height: 35px; background: rgba(0, 0, 0, 0.5); } .h_wrap .h_logo { display:none; } .h_wrap h1 {display:none; } .h_navi { height:100%; width: 100%; z-index:2000} .h_navi .h_util {margin: 0px auto; width: 100%;} .h_util .util_right {padding: 5px 0px;} .h_util .util_left {display:none; } /**** 국가 텍스트 ***/ .lang {display: block; margin:5px 10px 0 0 ; z-index:20000;} #lnb {display:none;} .lnb { background: rgba(0, 0, 0, 0.6); top: 35px; width: 100%; position: absolute; text-align::center; } .lnb::before { background: rgb(229, 229, 229); width: 100%; bottom: 0px; position: absolute; content: ""; } .lnb .m-logo { display:inline-block;float:left;height:60px; width:230px; line-height:55px; text-align:center; } .lnb .m-logo img {width:80%;height:auto; vertical-align:middle; margin-left:0px;} .side_menu { margin:10px 10px 0 0;transition:0.2s; width: 41px; height: 41px; font-size: 0px; float: right; display: block; position: relative; } .side_menu span { display:none;} .side_menu a { width: 41px; height: 41px; font-size:30px;color:#ffffff; margin-top:0px; display: block; position: static !important;} .side_menu a i {line-height:41px; } /**************************** ������ ���̵� �����̵� �޴� ***********************************/ #sideRightPushy { display:inline-block } /* Menu Appearance */ .pushyRight { position: fixed; width: 250px; height: 100%; text-align:top; top: 0; z-index: 99999999999999; background: #ffffff; /* enables momentum scrolling in iOS overflow elements */} /* Menu Movement */ .pushy-right{ right:-100px; -webkit-transform: translate3d(250px,0,0); -moz-transform: translate3d(250px,0,0); -ms-transform: translate3d(250px,0,0); -o-transform: translate3d(250px,0,0); transform: translate3d(250px,0,0); } .pushy-right-open{ right:0px; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .container-right-push{ -webkit-transform: translate3d(-300px,0,0); -moz-transform: translate3d(-250px,0,0); -ms-transform: translate3d(-250px,0,0); -o-transform: translate3d(-250px,0,0); transform: translate3d(-250px,0,0); } .push-push{ -webkit-transform: translate3d(250px,0,0); -moz-transform: translate3d(250px,0,0); -ms-transform: translate3d(250px,0,0); -o-transform: translate3d(250px,0,0); transform: translate3d(250px,0,0); } /* Menu Transitions */ .pushy, #container, .push{ -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); transition: transform .2s cubic-bezier(.16, .68, .43, .99); } /* Site Overlay */ .overlay-pushy{ display: none;} .overlay-pushy.overlay-active {display: block; position: fixed;top: 0; right: 0;bottom: 0;left: 0; z-index: 999999999; background-color: rgba(0,0,0,0.8); -webkit-animation: fade 500ms; -moz-animation: fade 500ms; -o-animation: fade 500ms; animation: fade 500ms; } #sideRightPushy {background: rgb(75, 80, 89); min-height: 800px; max-width: 280px; z-index:9999999999999999999999999999999} #sideRightPushy div.warp {width:100%; height:100%; overflow-y:scroll;z-index:9999999999999999999999999999999} #sideRightPushy > div {z-index:9999999999999999999999999999999} #sideRightPushy .menuCtg {background: rgb(255, 255, 255);} #sideRightPushy .menuCtg .top_menu {text-align: center; overflow: hidden;} #sideRightPushy .menuCtg .top_menu p { width: calc(100%/3); border-left-color: rgb(191, 191, 191); border-left-width: 1px; border-left-style: solid; float: left; box-sizing: border-box; } #sideRightPushy .menuCtg .top_menu p a { padding: 50px 0px 16px; color: rgb(85, 91, 101); display: block; } #sideRightPushy .top_menu .home a { background: url("/images/common/navi_home.png") no-repeat center 18px; border-left-color: currentColor; border-left-width: medium; border-left-style: none; } #sideRightPushy .top_menu .faq a { background: url("/images/common/navi_faq.png") no-repeat center 18px; } #sideRightPushy .top_menu .english a { background: url("/images/common/navi_eng.png") no-repeat center 18px; } #sideRightPushy .menuCtg .member {background: rgb(75, 80, 89); text-align: center; overflow: hidden;} #sideRightPushy .menuCtg .member p {position: relative; box-sizing: border-box;} #sideRightPushy .menuCtg .member p:first-child::before { background: rgba(255, 255, 255, 0.15); top: 15px; width: 1px; height: 28px; right: 0px; position: absolute; content: ""; } #sideRightPushy .member .logo {width: 100%; margin:0 auto; text-align:center;padding:10px 0 7px 0} #sideRightPushy .member .logo img {width:200px; } #sideRightPushy .member .logo a { } #sideRightPushy .member .title { width: 100%; font-size:15px; font-weight:bold; color:#abb7cd;padding:0px 0 15px 0} #sideRightPushy .menuCtg .member p a { padding: 14px 0px 14px 20px; color: rgb(238, 238, 238); line-height: 28px; font-size: 15px; display: block; } #sideRightPushy .on ul li { border-bottom: 1px solid rgb(233, 233, 233);:} #sideRightPushy .t_a_line { overflow: hidden;} #sideRightPushy .mnTit { padding: 12px 0px 12px 19px; width: 100%; color: rgb(69, 69, 69); letter-spacing: -0.04em; font-size: 17px; font-weight:400;float: left; box-sizing: border-box; } #sideRightPushy span.arrow { background: url("../../img/ml_down_arrow.png") no-repeat center; width: 54px; height: 51px; float: left; cursor: pointer; } #sideRightPushy .on > .t_a_line { background-color: rgb(154, 24, 36); } #sideRightPushy .on > .t_a_line > .mnTit { color: rgb(255, 255, 255); font-weight: bold; float: left; } #sideRightPushy .on > .t_a_line > span.arrow { background: url("../../img/ml_up_arrow.png") no-repeat center; } #sideRightPushy .navi_util_warp {width:100%} #sideRightPushy .navi_util {width:100%; overflow:hidden; background: url("../../img/navi_title.jpg") no-repeat center;} #sideRightPushy .navi_title_warp {width:100%; padding: 15px 0px 0 20px;} #sideRightPushy .navi_title { margin:0 auto; text-align:center; padding: 15px 0px; 15px 0} #sideRightPushy .navi_title p.title {font-size: 16px; font-weight: bold;line-height: 1.5; padding:0px 0 10px 0;} #sideRightPushy .navi_title p {font-size: 13px; font-weight: bold; line-height: 1.5; color:#abb7cd;} #sideRightPushy .navi_title_warp .navi_title p.tit2 { font-size:15px; font-weight:400; line-height:25px; padding:0px 0 10px 0; letter-spacing:0px;} #sideRightPushy .navi_title_warp .navi_title p.tit2 strong { font-size:16px;} #sideRightPushy .navi_util_warp i {padding:0 5px 0 0; font-size:18px } #sideRightPushy .navi_util_warp .ml_tel {width:100%;margin-top:0px;padding-top: 0px; border-top-color: rgba(255, 255, 255, 0.1); border-top-width: 0px; border-top-style: solid; } #sideRightPushy .navi_util_warp .ml_tel {color: rgb(204, 204, 204); letter-spacing: -0.04em; font-size: 15px;} #sideRightPushy .navi_util_warp .ml_tel a {color: rgb(229, 229, 229); letter-spacing: -0.04em; font-size: 15px; } #sideRightPushy .navi_util_warp .ml_fax {width:100%;margin-top:10px;padding-top: 0px; } #sideRightPushy .navi_util_warp .ml_fax {color: rgb(204, 204, 204); letter-spacing: -0.04em; font-size: 15px;} #sideRightPushy .navi_util_warp .ml_fax span {color: rgb(229, 229, 229); letter-spacing: -0.04em; font-size: 15px; } #sideRightPushy .navi_util_warp .ml_email {width:100%;margin-top:10px;padding-top: 0px; } #sideRightPushy .navi_util_warp .ml_email {color: rgb(204, 204, 204); letter-spacing: -0.04em; font-size: 15px;} #sideRightPushy .navi_util_warp .ml_email a {color: rgb(229, 229, 229); letter-spacing: -0.04em; font-size: 15px; } #sideRightPushy .closeArea { left: -45px; top: 40px; position: absolute;background:black} #sideRightPushy .closeArea .close { /* background: url("../../img/bg_btn.png") no-repeat 0px 0px; width: 30px; height: 29px; display: block; position: relative; z-index: 999999999999999999999999999999999999; */} #sideRightPushy .closeArea .close i{width: 30px; height: 29px; color:#ffffff;font-size:40px;display: block; position: relative; z-index: 99999999999;} } @media only screen and (max-width:768px) { } @media screen and (max-width:480px) { .h_wrap { margin:0 auto; height: 35px; background: rgba(0, 0, 0, 0.5); } .h_wrap .h_logo { display:none; } .h_wrap h1 {display:none; } .h_navi { height:100%; width: 100%; z-index:2000} .h_navi .h_util {margin: 0px auto; width: 100%;} .h_util .util_right {padding: 5px 0px;} #lnb {display:none;} .lnb { background: rgba(0, 0, 0, 0.6); top: 35px; width: 100%; position: absolute; text-align::center; } .lnb::before { background: rgb(229, 229, 229); width: 100%; bottom: 0px; position: absolute; content: ""; } .lnb .m-logo { display:inline-block;float:left;height:60px; width:230px; line-height:55px; text-align:left; } .lnb .m-logo img {width:70%;height:auto; vertical-align:middle; margin-left:0px;} .side_menu { margin:10px 10px 0 0;transition:0.2s; width: 41px; height: 41px; font-size: 0px; float: right; display: block; position: relative; } .side_menu span { display:none;} .side_menu a { width: 41px; height: 41px; font-size:30px;color:#ffffff; margin-top:0px; display: block; position: static !important;} .side_menu a i {line-height:41px; } /**** 국가 텍스트 ***/ .lang {display: block; margin:8px 15px 0 0 ;} .lang li {float: left;} .lang li a {display: block;padding: 0 10.5px;position: relative;font-size: 11px;font-weight: 500;color: #a6a6a6;} .lang .sub-lang {display: none;padding:8px 0 0 0;margin:0px;border:0px;position:absolute;width:120px;z-index:900;left:-15px; /*top:1em;left:0;*/} .lang .sub-lang li {background: rgba(71, 71, 71, 1.0);display:block;float:none;margin:0px;padding:5px 10px 10px 10px;width:110px;} .lang .sub-lang li:first-child {padding:11px 10px 5px 10px; } .lang .sub-lang li a{display:block;margin:0px;padding:0px; text-align:left;font-size: 11px;font-weight: 500;color: #a6a6a6; } .lang .sub-lang li:hover a{color:#ffffff;} .lang .sub-lang li a:after {display: none;} .lang .sub-lang li a.active {color: #ff1282;}