.header_wrap .logintop {z-index: 100;position: absolute; top: 53px;right: 130px; padding: 4px 20px; color: #fff; border: 1px solid #fff;} .header_wrap .logintop2 {z-index: 100;position: absolute; top: 53px;right: 165px; padding: 4px 20px; color: #fff; border: 1px solid #fff; display:none} .header_wrap.open .logintop{border:1px solid #000; color:#000} .amDim {display: none;position: absolute;width: 100%;background-color: rgba(0,0,0,.5);right: 0;top: 0;z-index: 98;} .main #container {margin-top: 0;} #header {position: fixed;left: 0;width: 100%;top: -100px;z-index: 88;transition:top .6s ease-in-out;-webkit-transition:top .6s ease-in-out;box-sizing:border-box} #header.load {top: 0;} #header .gnbWrap {position: relative;text-align: center;} #header h1 {z-index: 97;position: absolute;width: 240px;height: 63px;left: 60px;top: 18.5px;background-image: url(../images/main/logo.png);background-repeat: no-repeat;-webkit-background-size: cover; background-size: cover;text-indent: -9999px;} #header h1 a{display: block;height: 100%;} #header #gnb {font-size: 0;text-align: center;display: inline-block;vertical-align: top;} #header #gnb > li{display: block;text-align: center;float: left;} #header #gnb > li > a{display: block;line-height: 100px;color: #fff;padding: 15px 27.5px 0;font-size: 22px;font-weight: 500;} #header #gnb > li > a > span {display: block;position: relative;} #header #gnb > li > a > span:after {display: none;bottom: 0;left: 0;content:'';width: 100%;height: 2px;position: absolute;background-color: #8dc63f;transform:scale(0);-webkit-transform:scale(0);transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} #header #gnb > li.on > a > span:after {transform:scale(1);-webkit-transform:scale(1);} #header #gnb > li:hover > a > span:after {transform:scale(1);-webkit-transform:scale(1);} #header #gnb > li .depth2 {font-size: 0;display: none;padding: 10px 0;box-sizing:border-box;width: 100%;text-align: center} #header #gnb:hover > li .depth2 {display: block;} #header #gnb > li .depth2:after {clear: both;content:'';display: block;} #header #gnb > li .depth2 > li {text-align: center;display: block;} #header #gnb > li .depth2 > li > a{display: block;font-size: 15px;line-height: 38px;font-weight: 500;color: #fff;} #header #gnb > li .depth3 {padding-left:14px;} #header #gnb > li .depth3 > li > a{position: relative;font-size: 14px;padding-left: 10px;display: block;line-height: 30px;color: #fff;font-weight: 400;} #header #gnb > li .depth3 > li > a:before{content:'-';position: absolute;left: 0;top: 0;} #header #gnb > li .depth3 > li > a:hover {color: #8dc63f;} #header #gnb > li:hover .depth2 > li:hover > a{font-weight: 400;color: #8dc63f;} .btn_all_menu {z-index: 100;position: absolute;width: 100px;height: 100px;top: 15px;right: 27px;} .btn_all_menu div {position: absolute;width: 33px;height: 25px;left: 50%;top: 50%;margin-left: -16.5px;margin-top: -12.5px;} .btn_all_menu span{position: absolute;right: 0;height: 3px;background-color: #fff; transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;width: 100%;border-radius: 2px; } .btn_all_menu span.barTop{top: 0;} .btn_all_menu span.barMid{top: 11px;width: 70%;} .btn_all_menu span.barBot{top: 22px;} .btn_all_menu.on .barTop{width: 100%;transform:rotate(45deg);-webkit-transform:rotate(45deg);top:12px; background:#000} .btn_all_menu.on .barBot{width: 100%;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:12px; background:#000} .btn_all_menu.on .barMid {width: 0;} #header .gnbBtn {position: absolute;width: 100px;height: 100px;right: 0;top: 0;z-index: 999;} #header .gnbBtn .gtContact {position: absolute;width: 50%;left: 0;height: 100%;background-image: url(../images/main/icon_contact.png);background-repeat: no-repeat;background-position: center center;text-indent: -9999px;background-color: #367c2b;} #header .lang {position: absolute;width: 50%;height: 100%;right: 0;top: 0;} #header .lang a{display: block;} #header .lang a span{position: relative;display: block;line-height: 100px;font-family: 'Noto Sans Condensed';font-size: 12px;font-weight: bold;color: #fff;text-align: center;} .sub #header .lang a span {color: #000;} #header.fff .lang a span {color: #000;} #header.fff .lang > a span em {background-image: url(../images/main/lang_arrow.png);} #header .lang > a span em{display: block;position: absolute;left: 50%;bottom: 30%;margin-left: -3.5px;width: 7px;height: 5px;background-repeat: no-repeat;background-image: url(../images/main/lang_arrow_w.png);transition:transform .2s ease-in-out; -webkit-transition:transform .2s ease-in-out;} .sub #header .lang > a span em {background-image: url(../images/main/lang_arrow.png);} #header .lang > a.on span em {transform:rotate(180deg);-webkit-transform:rotate(180deg);} #header .lang ul{height: 0;overflow: hidden; transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out; } #header .lang > a.on + ul {height: auto;} #header.active {background-color: #fff;border-bottom: 1px solid #eaeaea;box-shadow:0 0 14px rgba(0,0,0,.4)} #header.active:after {/*content:'';position: absolute;width: 100%;height: 1px;background-color: #eaeaea;top: 100px;z-index: -1;*/} .sub #header:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #eaeaea;top: 100px;z-index: -1;} #header.active h1 {background-image: url(../images/main/logo_c.png);} #header.ov {background-color: #fff;border-bottom: 1px solid #eaeaea;box-shadow:0 0 14px rgba(0,0,0,.4)} #header.ov:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #eaeaea;top: 100px;z-index: -1;} #header.ov h1 {background-image: url(../images/main/logo_c.png);} #header.active #gnb > li > a{color: #000;} #header.active #gnb > li .depth2 > li > a {color: #7a7a7a;} #header.active #gnb > li .depth2 > li > a:hover {color: #2e3480;font-weight: 700;} #header.active #gnb > li:hover > a{} .active .btn_all_menu span {background-color: #000;} .fff .btn_all_menu span {background-color: #000;} #header.ov #gnb > li > a{color: #000;} #header.ov #gnb > li .depth2 > li > a {color: #7a7a7a;} #header.ov #gnb > li .depth2 > li > a:hover {color: #2e3480;font-weight: 700;} #header.ov #gnb > li:hover > a{} .ov .btn_all_menu span {background-color: #000;} #header.active .lang {border-color: #000;} #header.active .lang a span {color: #000;} #header.active .lang > a span em {background-image: url(../images/main/lang_arrow_c.png);} #header.active.fff .lang {border-color: #fff;} #header.active.fff .lang a span {color: #fff;} #header.active.fff .lang > a span em {background-image: url(../images/main/lang_arrow.png);} #header .lang ul li a span {line-height: 30px;} .sub #header .lang ul {background-color: #fff;} .allMenuWrap {z-index: 99;position: absolute;width: 70%;right: -100%;top: 0;box-sizing:border-box;background-color: #fff;transition:right .4s ease-in-out;-webkit-transition:right .4s ease-in-out;} .allMenuWrap.active {right: 0;} .allMenuWrap .allMenuWrap_inner {display: table;table-layout: fixed;height: 100%;width: 100%;} .allMenuWrap .allMenu_inner{display: table-cell;vertical-align: middle;height: 100%;padding: 0 4% 0 8%;overflow-y: auto;} .allMenu{} .allMenu {font-size: 0;text-align: center;} .allMenu > li {position: relative;vertical-align: top;color: #333;box-sizing:border-box;text-align: left;padding-left: 250px;margin-bottom: 60px;} .allMenu > li:last-child {margin-bottom: 0;} .allMenu > li:last-child {margin-right: 0;} .allMenu > li > p {display: none;font-size: 36px;line-height: 38px;font-weight: bold;} .allMenu > li > a {font-size: 40px;line-height: 49px;font-weight: 500;position: absolute;left: 0;top: 0;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .allMenu > li > a:after {left: 0;content:'';position: absolute;width: 0;bottom: -6px;height: 2px;background-color: #2e3480;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .allMenu > li:hover > a {color: #2e3480;} .allMenu > li:hover > a:after {width: 100%;} .allMenu > li > a span {position: absolute;font-size: 14px;line-height: 14px;font-weight: bold;color: #8dc63f;left: 0;top: 0;} .allMenu .dep2 {} .allMenu .dep2 > li {display: inline-block;margin-right: 40px;} .allMenu .dep2 > li > a{font-size: 18px;line-height: 49px;color: #555;} .allMenu .dep2 > li > a:hover {color: #333;font-weight: 500;} .allMenu .dep3 {margin-top: 4px;} .allMenu .dep3 > li > a{font-size: 16px;line-height: 30px;font-weight: 300;color: #646464;} .allMenu .dep3 > li > a:before{content:'-';margin-right: 4px;} .allMenu > li a{color: #333;display: inline-block;vertical-align: top;} .fpWrap .fp_item {position: relative;background-repeat: no-repeat;background-position: center center;-webkit-background-size: cover; background-size: cover;} .fpWrap .fp_item:before {display: none;content:'';position: absolute;width: 1px;height: 100%;background-color: rgba(255,255,255,.5);transition:all .5s .6s ease-in-out;-webkit-transition:all .5s .6s ease-in-out;left: -1px;} #container.load .fp_item:before {left: 99px;} .fpWrap .fp_item1 {background-image: url(../images/main/main_bg1.jpg);} .fpWrap .fp_item2 {background-image: url(../images/main/main_bg2.jpg);} .fpWrap .fp_item3 {background-image: url(../images/main/main_bg3.jpg);} .fpWrap .fp_item4 {background-image: url(../images/main/main_bg4.jpg);} .mvWrap .mv_item .txt_box a span em {position: absolute;width: 39px;height: 5px;background-image: url(../images/main/main_btn_arrow.png);background-repeat: no-repeat;right: 0;top: 50%;margin-top: -2.5px; animation-name: arrow; animation-duration: .4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; -webkit-animation-name: arrow; -webkit-animation-duration: .4s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } .mainicons{display:none} /* Safari 4.0 - 8.0 */ @-webkit-keyframes arrow { 0% {width:135px;} 100% {width: 150px;} } /* Standard syntax */ @keyframes arrow { 0% {width:135px;} 100% {width: 150px;} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes scroll { 0% {transform:translateY(0);-webkit-transform:translateY(0);} 100% {transform:translateY(14px);-webkit-transform:translateY(14px);} } /* Standard syntax */ @keyframes scroll { 0% {transform:translateY(0);-webkit-transform:translateY(0);} 100% {transform:translateY(14px);-webkit-transform:translateY(14px);} } .section_footer {position: relative;z-index: 99999;} .sub #footer2 {background-color: #f6f6f6;} #footer2 {text-align: center;position: relative;z-index: 99999;padding: 42px 100px;background-color: #fff;} #footer2 .footer_inner {position: relative;} .footerCont ul {font-size: 0;text-align: center;} .footerCont ul li{display: block;vertical-align: top;font-size: 14px;line-height: 26px;color: #333;opacity: .75;margin: 0 6px;} .footerCont ul li.w100p {width: 100%;margin: 0;} .footerBtn {margin-bottom: 10px;} .footerBtn a {display: inline-block;vertical-align: top;font-size: 14px;line-height: 20px;font-weight: 500;color: #333;opacity: .7; padding:0 20px;} .footerBtn a:hover {opacity: 1;} #footer2 .copy {font-size: 12px;line-height: 26px;color: #707070;margin-top: 10px;} #container.load .scrollDown{bottom: 50px;opacity: 1;} .scrollDown {opacity: 0;position: fixed;bottom: 10px;left: 50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);color: #fff;text-align: center;z-index: 9999; transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out; } .scrollDown p {font-size: 14px;line-height: 16px;font-family: 'Noto Sans Condensed';font-weight: 500; transform:rotate(90deg);-webkit-transform:rotate(90deg);margin-bottom: 15px;opacity: .7; } .scrollDown span {display: inline-block;vertical-align: top; animation-name: scroll; animation-duration: .4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; -webkit-animation-name: scroll; -webkit-animation-duration: .4s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } .main #container.load .btn_contact {bottom: 70px;opacity: 1;} .main .btn_contact {z-index: 99999;text-align: left;position: fixed;color: #fff;left: 100%;margin-left: -200px;opacity: 0;bottom: 20px;font-size: 16px;line-height: 18px;box-sizing:border-box;padding-bottom: 11px;width: 140px; background-repeat: no-repeat;background-position: right bottom;background-image: url(../images/main/arrow_qna.png);transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out; animation-name: arrow; animation-duration: .4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; -webkit-animation-name: arrow; -webkit-animation-duration: .4s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } .main_sec_btnBox {margin-top: 60px; opacity: 0;transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;transform:translateY(30px);-webkit-transform:translateY(30px); } .fp_item.on .main_sec_btnBox {opacity: 1;transform:translateY(0);-webkit-transform:translateY(0);} .btn_ove {overflow: hidden;position: relative;display: inline-block;vertical-align: top;text-align: center;width: 150px;height: 50px;} .btn_ove span {position: relative;z-index: 99;display: inline-block;line-height: 48px;vertical-align: top;padding-right: 17px;font-size: 13px;color: #fff;background-repeat: no-repeat;background-position: right center;background-image: url(../images/main/btn_inner_arrow.png);} .btn_ove p {border: 1px solid #fff;box-sizing:border-box;} .btn_ove:after {z-index: 9;content:'';position: absolute;width: 8px;height: 8px;background-color: #8dc63f;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;right: 0;bottom: 0;} .btn_ove:hover:after {width: 100%;height: 100%;} .btn_ove.type2 span {color: #367c2b;background-image: url(../images/contents/btn_more_arrow.png);} .btn_ove.type2 p {border: 1px solid #8dc63f;} #fp-menu {width: 117px;position: absolute;left: -117px;top: 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%); transition:all .5s .6s ease-in-out;-webkit-transition:all .5s .6s ease-in-out; } #fp-menu.on {left: 59px;} #fp-menu li {position: relative;margin-bottom: 10px;} #fp-menu li:last-child {margin-bottom: 0;} #fp-menu li.on a{opacity: 1;} #fp-menu li a {opacity: .5;display: block;font-size: 14px;line-height: 31px;position: relative;color: #fff;} #fp-menu li a span {right: 0;top: 0;position: absolute;width: 31px;height: 31px;border-radius: 100%; background:#0c4da2;box-sizing:border-box;transform:scale(0);-webkit-transform:scale(0);transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out} #fp-menu li.on a span {transform:scale(1);-webkit-transform:scale(1);} #fp-menu li a:after {content:'';position: absolute;width: 4px;height: 4px;background-color: #fff;border-radius: 100%;right: 14px;top: 50%;margin-top: -2px;} #fp-menu li:last-child{margin-bottom: 0;} .service_box { position: absolute; bottom: 150px; left: 50%; margin-left:-600px; padding: 17px 0; width: 1200px; /*height: 94px;*/ border-radius: 80px; background: #0b3379; opacity: 0.9; } .service_box li{display:inline-block; width:115px;} .service_box li a{ font-size:13px; color:#fff; position: relative; margin: 0; /*padding: 26px 0 0 0;*/ display: block; width: 100%; height: 100%; line-height: 18px; } .service_box li a span{display:block} .service_box li a:after { position: absolute; right: 0; top: 21px; width: 1px; height: 20px; /*background: #fff;*/ content: ''; } .service_box li:last-child a:after{display:none} .service_box li a: .fp_item {overflow: hidden;} .fc_green {color: #8dc63f !important;} .fp_inner {max-width: 1448px;margin: 0 auto;text-align: center;padding: 0 130px;} .fp_inner .txt_box {opacity: 0;transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;transform:translateY(-30px);-webkit-transform:translateY(-30px);} .fp_inner .txt_box a {margin-top: 26px;height: 56px;width: 190px;display: inline-block;vertical-align: top;font-size: 15px; line-height: 52px;box-sizing:border-box;border: 2px solid rgba(255,255,255,.4);text-align: center;color: #fff;} .fp_item.on .fp_inner .txt_box {opacity: 1;transform:translateY(0);-webkit-transform:translateY(0);} .fp_inner .txt_box > strong{display: inline-block;font-size: 85px; line-height: 135px; font-weight: 600; margin-top: 20px; color:#fff} .fp_inner .txt_box > span {display: block;font-size: 20px;line-height: 32px; color: #fff; padding-top:25px; margin-bottom: 10px;letter-spacing: -.4px;} .fp_inner .txt_box > p {font-size: 58px;line-height: 65px;color: #fff;font-weight: 300;letter-spacing: -1.4px;} .fp_inner .txt_box > p strong {font-weight: 500;} .fp_item1 .icon_list {font-size: 0;margin-top: 60px;} .fp_item1 .botTxt {position: absolute;bottom: 40px;right: 60px;color: #fff;font-size: 14px;font-weight: 500;line-height: 16px;opacity: .5;} .fp_item1 .icon_list li{height: 170px;position: relative;display: inline-block;font-size: 14px;vertical-align: bottom;width: 260px;margin: 0 30px;text-align: left;} .fp_item1 .icon_list li > div {position: absolute;width: 100%;bottom: 0;height: 140px;box-sizing:border-box;border: 1px solid #fff;padding: 27px 30px;background-repeat: no-repeat;background-position: right bottom;-webkit-background-origin: content-box; background-origin: content-box;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out; background-color: rgba(0,0,0,.15); } .fp_item1 .icon_list li:nth-child(1) > div {background-image: url(../../images/main/main_sec1_icon1.png);} .fp_item1 .icon_list li:nth-child(2) > div {background-image: url(../../images/main/main_sec1_icon2.png);} .fp_item1 .icon_list li:nth-child(3) > div {background-image: url(../../images/main/main_sec1_icon3.png);} .fp_item1 .icon_list li:nth-child(1) > div:hover {background-image: url(../../images/main/main_sec1_icon1_on.png);} .fp_item1 .icon_list li:nth-child(2) > div:hover {background-image: url(../../images/main/main_sec1_icon2_on.png);} .fp_item1 .icon_list li:nth-child(3) > div:hover {background-image: url(../../images/main/main_sec1_icon3_on.png);} .fp_item1 .icon_list li > div span {display: block;font-size: 13px;line-height: 15px;color: #fff;margin-bottom: 46px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .fp_item1 .icon_list li > div p {position: absolute;bottom: 27px;left: 30px;font-size: 20px;line-height: 22px;color: #fff;font-weight: 500;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .fp_item1 .icon_list li > div:hover {height: 100%;background-color: #fff;} .fp_item1 .icon_list li > div:hover p {color: #333;} .fp_item1 .icon_list li > div:hover span {color: #a7a9ac;} .fp_item2 .list_mb .icon_box {display: inline-block;vertical-align: top;width: 126px;height: 126px;border-radius: 100%;background-color: rgba(255,255,255,.4);background-repeat: no-repeat;background-position: center center; transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;margin-bottom: 20px; } .fp_item2 .list_mb {font-size: 0;text-align: center;} .fp_item2 .list_mb li {text-align: center;display: inline-block;vertical-align: top;width: 345px;box-sizing:border-box;padding: 0 20px;} .fp_item2 .list_mb li:nth-child(1) .icon_box {background-image: url(../images/main/main_sec2_icon1.png);} .fp_item2 .list_mb li:nth-child(2) .icon_box {background-image: url(../images/main/main_sec2_icon2.png);} .fp_item2 .list_mb li:nth-child(3) .icon_box {background-image: url(../images/main/main_sec2_icon3.png);} .fp_item2 .list_mb li a{display: block;} .fp_item2 .list_mb li a:hover .icon_box {background-color: rgba(255,255,255,.8);} .fp_item2 .list_mb li a .txt_area {color: #fff;} .fp_item2 .list_mb li a .txt_area strong {display: block;font-size: 16px;line-height: 24px;margin-bottom: 10px;letter-spacing: -.4px;} .fp_item2 .list_mb li a .txt_area p {font-size: 14px;line-height: 22px;letter-spacing: -.4px;} .fp_item2 .icon_list {margin-top: 68px;} .fp_item3 .list_pl {font-size: 0;margin-top: 40px; width: 100%; padding: 0 32px; position: relative; } .fp_item3 .list_pl .slick-arrow {position: absolute;z-index: 999;top: 50%; margin-top: -52px;color: #fff;text-indent: -9999px;width: 22px;height: 61px;background-repeat: no-repeat;-webkit-background-size: cover; background-size: cover;} .fp_item3 .list_pl .slick-prev {left: 0;background-image: url(../images/main/main_pf_arrow_prev.png);} .fp_item3 .list_pl .slick-next {right: 0;background-image: url(../images/main/main_pf_arrow_next.png);} .fp_item3 .list_pl {opacity: 0;transition:transform .5s ease-in-out, opacity .5s ease-in-out;-webkit-transition:transform .5s ease-in-out, opacity .5s ease-in-out;transform:translateY(30px);-webkit-transform:translateY(30px);} .fp_item3.on .list_pl {opacity: 1;transform:translateY(0);-webkit-transform:translateY(0);} .fp_item3 .list_pl li {width: 33.33333%;display: inline-block;vertical-align: top;padding: 0 20px;box-sizing:border-box} .fp_item3 .list_pl li .img_box {position: relative;} .fp_item3 .list_pl li .img_box img {width: 100%;} .fp_item3 .list_pl li p {font-size: 18px;line-height: 26px;font-weight: 400;margin-top: 26px;color: #fff;} .fp_item3 .list_pl li a > p {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;letter-spacing: -.4px;} .fp_item3 .list_pl li .img_box .ovBox {display: none;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;opacity: 0;position: absolute;width: 100%;top: 0;height: 100%;left: 0;overflow-y: auto;background-color: rgba(0,0,0,.5);padding: 8% 7% ; box-sizing:border-box} .fp_item3 .list_pl li a:hover .img_box .ovBox {opacity: 0;} .fp_item3 .list_pl li .img_box .ovBox li p {font-weight: 300;font-size: 15px;line-height: 20px;margin-top: 0;} .fp_item3 .list_pl li .img_box .ovBox li {padding: 0;display: table;table-layout: fixed;width: 100%;position: relative;text-align: left;color: #fff;margin-bottom: 10px;} .fp_item3 .list_pl li .img_box .ovBox li:last-child {margin-bottom: 0;} .fp_item3 .list_pl li .img_box .ovBox li strong {font-size: 15px;line-height: 20px;width: 88px;box-sizing:border-box;padding-right: 20px;left: 0;top: 0;font-weight: 500;} .fp_item3 .list_pl li .img_box .ovBox li > * {display: table-cell;vertical-align: top;} .fp_item4 .mainBtnList {text-align: center;font-size: 0;margin-top: 50px;} .fp_item4 .mainBtnList li {display: inline-block;vertical-align: top;width: 191px;box-sizing:border-box;padding: 0 5px;} .fp_item4 .mainBtnList li a{display: block;border: 2px solid rgba(255,255,255,.4);line-height: 52px;font-size: 15px;color: #fff;font-weight: 500;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .fp_item4 .mainBtnList li a:hover {background-color: rgba(255,255,255,1);color: #000;} .fp_item5 .icon_list {font-size: 0;margin-top: 45px;} .fp_item5 .icon_list > li {display: inline-block;vertical-align: top;margin: 0 34px;} .fp_item .icon_list {margin-top: ;} .fp_item .icon_list > li {opacity: 0;transition:transform .5s ease-in-out, opacity .5s ease-in-out;-webkit-transition:transform .5s ease-in-out, opacity .5s ease-in-out;transform:translateY(30px);-webkit-transform:translateY(30px);} .fp_item .icon_list > li:nth-child(1) {transition-delay: 0 ;-webkit-transition-delay: 0 ;} .fp_item .icon_list > li:nth-child(2) {transition-delay: .2s ;-webkit-transition-delay: .2s ;} .fp_item .icon_list > li:nth-child(3) {transition-delay: .4s;-webkit-transition-delay: .4s ;} .fp_item.on .icon_list > li {opacity: 1;transform:translateY(0);-webkit-transform:translateY(0);} .fp_item .icon_list .slick-track > li {opacity: 0;transition:transform .5s ease-in-out, opacity .5s ease-in-out;-webkit-transition:transform .5s ease-in-out, opacity .5s ease-in-out;transform:translateY(30px);-webkit-transform:translateY(30px);} .fp_item .icon_list .slick-track > li:nth-child(1) {transition-delay: 0 ;-webkit-transition-delay: 0 ;} .fp_item .icon_list .slick-track > li:nth-child(2) {transition-delay: .2s ;-webkit-transition-delay: .2s ;} .fp_item .icon_list .slick-track > li:nth-child(3) {transition-delay: .4s;-webkit-transition-delay: .4s ;} .fp_item.on .icon_list .slick-track > li {opacity: 1;transform:translateY(0);-webkit-transform:translateY(0);} .header_wrap.open .btn_all_menu span{background:#000} .m_only {display: none;} @media screen and (max-width: 1488px) { .fp_inner {padding: 0 100px;width: 100%;box-sizing:border-box} } @media screen and (max-width: 1500px){ .allMenu{width: 100%;padding: 0 30px;box-sizing:border-box} .allMenuWrap .allMenu_inner {padding: 0 30px;} .allMenu > li > a {margin-bottom: 15px;} .allMenu > li a {position: relative;font-size: 40px;line-height: 42px;} .allMenu > li {padding-left: 0;margin-bottom: 30px;} } @media screen and (max-width: 1300px){ #footer2 {padding: 30px 30px 40px;} } @media screen and (max-width: 1240px){ #header .gnbWrap {height: 100%;} .fp_item1 .icon_list li {margin: 0 1%;width: 31%;} .fp_item5 .icon_list li {margin: 0 2%;} .fp_item5 .icon_list li:first-child {margin-left: 0;} .fp_item5 .icon_list li:last-child {margin-right: 0;} .fp_item2 .list_mb li {width: 33.333333%;} .fp_item2 .list_mb li br {display: none;} } @media screen and (max-width: 1100px){ #fp-menu {display: none;} #fp-nav {display: none;} #header {height: 60px;} #header h1 {width: 140px;height: 36px;left: 15px;top: 50%;margin-top: -18px;} .gnbWrap {display: none;} .btn_all_menu{width: 60px;height: 60px;right: 0;} #header .gnbBtn {width: 60px;height: 60px;} #header .lang a span {line-height: 60px;} #header .gnbBtn {width: 120px;} .header_wrap{min-width:100% !important} .header_wrap .gnb_wrap{display:none !important} .header_wrap .header_logo{background-size: 120px !important; left:20px !important} .btn_all_menu div {width: 20px;height: 20px;margin-left: -10px;margin-top: -10px;} .btn_all_menu span.barMid {top: 8px;} .btn_all_menu span.barBot {top: 16px;} .btn_all_menu.on .barTop {top: 8px;} .btn_all_menu.on .barBot {top: 8px;} #header .lang a span {font-size: 14px;font-weight: bold;} #header.fff .lang a span {color: #8dc63f;} #header.fff .lang > a span em {background-image: url(../images/main/lang_arrow_g.png)} .sub #header .lang a span {color: #8dc63f;} #header .lang > a span em {bottom: 24%;} .sub #header .lang > a span em {background-image: url(../images/main/lang_arrow_g.png)} .allMenu {padding: 0;} .allMenu > li{display: block;width: 100%;float: none;width: auto;padding: 0;} .allMenuWrap {padding-bottom: 80px;display: block;} .allMenuWrap.active {} .allMenuWrap .allMenuWrap_inner{padding-top: 80px;display: block;box-sizing:border-box} .allMenuWrap .allMenu_inner {display: block;padding: 0;} .allMenu .dep2 {padding: 0 30px;margin-top: 0;} .allMenu > li > p {position: relative;display: none;font-size: 22px;line-height: 50px;font-weight: 500;padding: 0 30px;} .allMenu > li > p:after {vertical-align: middle;margin-left: 10px;content:'';display: inline-block;width: 10px;height: 8px;-webkit-background-size: cover; background-size: cover;background-repeat: no-repeat;background-image: url(../images/main/m_dep2_arrow.png);right: 30px;top: 50%;} .allMenu > li.active > p:after {background-image: url(../images/main/m_dep2_arrow_on.png);} .allMenu .dep2 > li {margin-top: 0;margin-bottom: 0;} .allMenu .dep2 > li > a{font-size: 15px;line-height: 40px;} .allMenu .dep3 {margin-top: 0;} .allMenu .dep3 > li > a{font-size: 13px;line-height: 32px;padding: 0 30px;} .allMenuWrap {width: 80%;} .allMenuWrap .allMenuWrap_inner {padding-top: 60px;} .allMenu > li {margin-bottom: 30px;} .allMenu > li > a {position: relative;padding: 0 30px;font-size: 30px;line-height: 32px;margin-bottom: 10px;} .allMenu > li > a:after {display: none;} .allMenu > li.has_no_dep a {display: block; display: block;font-size: 22px;line-height: 50px;font-weight: 500;padding: 0 30px; } .allMenu > li.has_no_dep a span {display: none;} #footer2 .footer_inner .footer_logo img {width: 160px;} #footer2 .footer_inner .footer_logo {position: static;padding-top: 20px;margin-top: 20px;border-top: 1px solid #4b4a4d;} #footer2 .footer_inner .footer_cont {padding-left: 0} #footer2 .footer_inner .footer_cont ul li {display: block;float: none;} #footer2 .footer_inner .footer_cont ul.footer_address {margin-bottom: 10px;} #footer2 .footer_inner .footer_cont ul li:first-child {margin-right: 0;padding-right: 0;} #footer2 .footer_inner .footer_cont ul li:first-child:after {display: none;} #fp-menu.on {right: 20px;} .fp_inner {padding: 0 50px;} .fp_inner .txt_box > strong {font-size: 40px;line-height: 46px;} .fp_inner .txt_box > span {font-size: 20px;line-height: 22px;} .fp_inner .txt_box > p {font-size: 30px;line-height: 40px;} .fp_item1 .icon_list li > div p {font-size: 18px;line-height: 20px;} .fp_item1 .icon_list li > div {padding: 20px 24px;} .fp_item1 .icon_list li > div p{bottom: 20px;left: 24px;} .fpWrap .fp_item1 {background-position: 50% center;} .fpWrap .fp_item2 {background-position: 14% center;} .fpWrap .fp_item3 {background-position: 75% center;} .fpWrap .fp_item4 {background-position: 18% center;} .btn_ove {width: 120px;height: 40px;} .btn_ove span {line-height: 38px;} .btn_ove:hover:after {width: 8px;height: 8px;} .fp_item3 .list_pl li .img_box .ovBox {display: none;} } @media screen and (max-width: 767px){ .pc_only {display: none;} .m_only {display: block;} .service_box{ display:none; } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .mainicons{display:block; margin-top:50px} .mainicons .article_top{overflow:hidden; border-bottom:1px solid #d8d8d8;} .mainicons .article_top li{float:left; font-size:15px; padding:15px; width:50%; text-align:center; color:#000;} .mainicons .article_top li:first-child{border-left:none;} .mainicons .article_top li span{color:#3a7bd3; font-weight:bold;} .mainicons .article_btm{overflow:hidden;} .mainicons .article_btm li{float:left; font-size:13px; padding:10px 0; width:25%; /*height:45px;*/ text-align:center; color:#666;} .mainicons .article_btm li.s1{border-left:none;} .mainicons .article_btm li.s5{border-left:none;} .mainicons .article_btm li.s9{border-left:none;} .mainicons .article_btm li.s4{width:24.1%} .mainicons .article_btm li.s8{width:24.1%} .mainicons .article_btm li.s12{width:24.1%} .mainicons .article_btm li.s9{border-bottom:0} .mainicons .article_btm li.s10{border-bottom:0} .mainicons .article_btm li.s11{border-bottom:0} .mainicons .article_btm li.s12{border-bottom:0} .mainicons .article_btm li .ico{display:block; width:24px; height:24px; margin:0 auto 5px; background:url(/theme/basic/images/mobile/ico_top.png) no-repeat; background-position:0 0; background-size:320px auto;} .mainicons .article_btm li.s1 .ico{background-position:-25px 0;} .mainicons .article_btm li.s2 .ico{background-position:-107px 0;} .mainicons .article_btm li.s3 .ico{background-position:-188px 0;} .mainicons .article_btm li.s4 .ico{background-position:-269px 0;} .mainicons .article_btm li.s5 .ico{background-position:-25px -23px;} .mainicons .article_btm li.s6 .ico{background-position:-107px -23px;} .mainicons .article_btm li.s7 .ico{background-position:-188px -23px;} .mainicons .article_btm li.s8 .ico{background-position:-269px -23px;} .mainicons .article_btm li.s9 .ico{background-position:-25px -50px;} .mainicons .article_btm li.s10 .ico{background-position:-107px -50px;} .mainicons .article_btm li.s11 .ico{background-position:-188px -50px;} .mainicons .article_btm li.s12 .ico{background-position:-269px -50px;} .mainicons .article_btm li a{font-size:12px; color:#fff} .allMenu > li > a {font-size: 25px;line-height: 27px;} .allMenu .dep2 > li {margin-right: 30px;} #header h1{} .header_wrap .logintop {z-index: 100;position: absolute; top: 30px;right: 65px; padding: 4px 20px; color: #fff; border: 1px solid #fff;} .header_wrap .logintop2 {z-index: 100;position: absolute; top: 30px;right: 65px; padding: 4px 20px; color: #fff; border: 1px solid #fff;} .btn_all_menu {right: 0;} .fp_item4 .sec4Nav > li {float: none;width: 100%;height: 33.333333%;} .fp_item4 .sec4Nav > li:nth-child(1){left: 0;top: 0;} .fp_item4 .sec4Nav > li:nth-child(2){left: 0;top: 33.33333%;} .fp_item4 .sec4Nav > li:nth-child(3){left: 0;top: 66.66666%;} .fp_item4 .sec4Nav > li a .sec4Nav_cont .icon_box{width: 80px;height: 80px;-webkit-background-size: 40px; background-size: 40px;margin-bottom: 10px;} .fp_item4 .sec4Nav > li a .sec4Nav_cont .txt_box strong {font-size: 16px;line-height: 20px;} .fp_item4 .sec4Nav > li a .sec4Nav_cont .txt_box p {font-size: 13px;line-height: 20px;margin-top: 15px;} .slickDotsWrap {left: 15px;} .mvWrap .mv_item .txt_box {left: 15px;right: 15px;} .mvWrap .mv_item .txt_box strong {font-size: 30px;line-height: 38px;} .mvWrap .mv_item .txt_box p {font-size: 13px;line-height: 20px;margin-top: 15px;} .mvWrap .mv_item .txt_box a {margin-top: 20px;} .fp_item5 .icon_list li {width: 30%;} .slickDotsWrap2 {left: 15px;} .mainProd .mp_item .txt_box {left: 15px;right: 15px;} .mainProd .mp_item .txt_box strong {font-size: 30px;line-height: 38px;} .mainProd .mp_item .txt_box p {font-size: 13px;line-height: 20px;margin-top: 15px;} .mainProd .mp_item .txt_box a {margin-top: 20px;} .fp_inner .txt_box > strong {font-size: 45px;line-height: 36px;} .fp_inner .txt_box > span {font-size: 12px;line-height: 20px;margin-bottom: 0;} .fp_item4 .sec4Nav > li a .sec4Nav_cont .txt_box p br {display: none;} .slickNavWrap {padding-left: 30%;} .slickNavWrap .slickArrow {width: 30%;} .fp_inner .txt_box > p {font-size: 24px;line-height:35px; font-weight: 500;} .fp_inner .txt_box > p br {display: none;} .slickNavWrap .slickArrow .slick-arrow {-webkit-background-size: 11px; background-size: 11px;} .slickDotsWrap{top: 20%;} .mvWrap .mv_item .txt_box {top: 26%;} .slickDotsWrap2{top: 20%;} .mainProd .mp_item .txt_box {top: 26%;} .fp_item1 .icon_list {margin-top: 40px;} .fp_item1 .icon_list li > div {position: static;height: auto;background-image: none !important;text-align: center;padding: 15px 10px;} .fp_item1 .icon_list li > div p {position: static;} .fp_item1 .icon_list li > div span {margin-bottom: 10px;} .fp_item1 .icon_list li > div:hover {height: auto; background-color: rgba(0,0,0,.15);} .fp_item1 .icon_list li > div:hover p {color: #fff;} .fp_item1 .icon_list li > div:hover span {color: #fff;} .fp_item1 .icon_list li > div p {font-size: 15px;line-height: 17px;} .fp_item1 .icon_list li {width: 31%;height: auto;} .fp_item1 .icon_list li:first-child {margin-left: 0;} .fp_item1 .icon_list li:last-child {margin-right: 0;} .fp_item1 .botTxt {right: 15px;bottom: 30px;font-size: 13px;line-height: 15px;} .main_sec_btnBox {margin-top: 30px;} .fp_item5 .icon_list {margin-top: 30px;} #fp-menu {display: none;} .fpWrap .fp_item:before {display: none;} .fp_inner {padding: 0 15px;} #footer2 {padding: 30px 15px;} #footer2 .footer_inner .footer_cont ul li {font-size: 13px;line-height: 20px;margin-bottom: 5px;} #header .gnbBtn {width: 60px;} #header .gnbBtn .gtContact {display: none;} #header .lang {width: 100%;} #container.load .scrollDown {bottom: 20px;} /* Safari 4.0 - 8.0 */ @-webkit-keyframes scroll { 0% {transform:translateY(0);-webkit-transform:translateY(0);} 100% {transform:translateY(8px);-webkit-transform:translateY(8px);} } /* Standard syntax */ @keyframes scroll { 0% {transform:translateY(0);-webkit-transform:translateY(0);} 100% {transform:translateY(8px);-webkit-transform:translateY(8px);} } .scrollDown p {font-size: 10px;line-height: 10px;margin-bottom: 15px;} .scrollDown span {width: 30px;height: 30px;} .main .btn_contact {display: none;} .fp_item2 .list_mb {width: 100%; width: calc(100% + 20px); width: -webkit-calc(100% + 20px); width: -moz-calc(100% + 20px); margin-left: -10px; margin-top: 40px; } .fp_item2 .list_mb li {padding: 0 10px;} .fp_item2 .list_mb .icon_box {width: 84px;height: 84px;} .fp_item2 .list_mb li a .txt_area strong {font-size: 15px;line-height: 20px;} .fp_item2 .list_mb li a .txt_area p {display: none;} .fp_item3 .list_pl {padding: 0 20px;overflow: visible;margin-top: 40px;} .fp_item3 .list_pl .slick-list {} .fp_item3 .list_pl .slick-arrow {width: 15px;height: 41.59px;margin-top: -44px;} .fp_item3 .list_pl li {padding: 0 13px;} .fp_item3 .list_pl li p {font-size: 16px;line-height: 24px;margin-top: 10px;} .fp_item4 .mainBtnList {margin-top: 40px;} .fp_item4 .mainBtnList li {width: 33.3333333%;} .fp_inner .txt_box a {font-size: 13px;line-height: 40px;height: 42px;width: 120px;margin-top: 20px;} .fp_item3.on .list_pl {margin-top: 30px;} /*.other-link button{display:none}*/ }