/** * WimFactory Style Sheet * Author: 노경석 * reference guide http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/ 8px = 0.5rem 9px = 0.5625rem 10px = 0.625rem 11px = 0.6875rem 12px = 0.75rem 13px = 0.8125rem 14px = 0.875rem 15px = 0.9375rem 16px = 1rem 17px = 1.0625rem 18px = 1.125rem 19px = 1.1875rem 20px = 1.25rem 21px = 1.3125rem 22px = 1.375rem 23px = 1.4375rem 24px = 1.5rem 25px = 1.5625rem 26px = 1.625rem 27px = 1.6875rem 28px = 1.75rem 29px = 1.8125rem 30px = 1.875rem 31px = 1.9375rem 32px = 2rem 33px = 2.0625rem 34px = 2.125rem 35px = 2.1875rem 36px = 2.25rem 37px = 2.3125rem 38px = 2.375rem 39px = 2.4375rem 40px = 2.5rem 41px = 2.5625rem 42px = 2.625rem 43px = 2.6875rem 44px = 2.75rem 45px = 2.8125rem 46px = 2.875rem 47px = 2.9375rem 48px = 3rem 49px = 3.0625rem 50px = 3.125rem 51px = 3.1875rem 52px = 3.25rem 53px = 3.3125rem 54px = 3.375rem 55px = 3.4375rem 56px = 3.5rem 57px = 3.5625rem 58px = 3.625rem 59px = 3.6875rem 60px = 3.75rem 61px = 3.8125rem 62px = 3.875rem 63px = 3.9375rem 64px = 4rem */ @charset "UTF-8"; /* 공통 */ :root { font-size: 16px;} * { box-sizing:border-box;transition:all .2s ease;-webkit-transition:all .2s ease;} :focus { outline:none;} html,body { overflow-x:hidden;-webkit-overflow-scrolling:touch;font-family:"Noto Sans KR", "Roboto", sans-serif;scroll-behavior:smooth;} ::-webkit-scrollbar { width:12px;} ::-webkit-scrollbar-thumb { width:12px;border-radius:6px;background-color:#dedede;background-clip:padding-box;border:2px solid transparent;} ::-webkit-scrollbar-track { background-color:transparent;width:12px;} img { max-width:100%;height:auto;} .inner { width:1400px;margin:0 auto;} .clearfix { content:"";display:block;clear:both;overflow:hidden;} .hidden { position:absolute;top:0;left:0;font-size:0;width:0;height:0;overflow:hidden;} #wrap { transition:padding 0s;-webkit-transition:padding 0s;position:relative;} .red { color:#ff3900 !important;} .green { color:#18aaa5 !important;} /* skip */ #skipnav { position:absolute;top:0;left:0;z-index:9999;width:100%;height:0;line-height:1;} #skipnav a { display:block;overflow:hidden;width:1px;height:1px;margin:0 -1px -1px 0;padding:0;font-size:0;line-height:1;transition:none;-webkit-transition:none;} #skipnav a:active, #skipnav a:focus, #skipnav a:hover { position:absolute;top:0;left:0;z-index:50;width:100%;height:auto;margin:0;padding:5px 0;border:1px solid #000;background:#000;color:#fff;font-weight:700;font-size:1rem;text-align:center;line-height:100%;} /* modal */ .modal { display:none;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);} .modal-container { display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;left:0;top:0;pointer-events:none;} #modal1.modal-container { padding-right:600px;} #modal2.modal-container { padding-left:600px;} .modal-content { position:relative;max-width:550px;width:70%;height:auto;pointer-events:auto;} .modal-content img { width:100%;} .modal-content .close { position:absolute;top:10px;right:10px;width:1.5rem;height:1.5rem;background:url('../images/main/solution-close-btn-sel.png') center 100%;background-size:cover;cursor:pointer;} /* floating Banner */ #floatBanner { position:absolute;left:50%;width:170px;transform:translate(750px, 0);z-index:100;} #floatBanner li { width:100%;box-shadow:6.7px 7.4px 20px 0 rgba(4, 14, 50, 0.16);} #floatBanner li:active { box-shadow:2.7px 3px 12px 0 rgba(4, 14, 50, 0.2);} #floatBanner li:not(.smart):not(.data) { margin-bottom:20px;height:70px;} #floatBanner li.call { background-color:#0799ec;background-image:linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0) 29%, rgba(0,0,0,0) 100%);} #floatBanner li.kakao { background-color: #f9e000;background-image:linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0) 29%, rgba(0,0,0,0) 100%);} #floatBanner li.facebook { background-color: #3e5b9a;background-image:linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0) 29%, rgba(0,0,0,0) 100%);} #floatBanner li.call:active { background-color:#0077bb;background-image:linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0) 29%, rgba(0,0,0,0) 100%);} #floatBanner li.kakao:active { background-color: #d1bc00;background-image:linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0) 29%, rgba(0,0,0,0) 100%);} #floatBanner li.facebook:active { background-color: #26385e;background-image:linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0) 29%, rgba(0,0,0,0) 100%);} #floatBanner li.smart { margin-bottom: 20px;} #floatBanner li.smart, #floatBanner li.data { height:120px;} #floatBanner li:not(.smart):not(.data) a { display:flex;width:100%;height:100%;padding-left:62px;align-items:center;font-size:0.9375rem;font-weight:700;color:#fff;} #floatBanner li.call a { background:url('../images/common/floating-call.png') no-repeat left 20px center;} #floatBanner li.kakao a { background:url('../images/common/floating-kakaotalk.png') no-repeat left 20px center;color:#3b1e1e;} #floatBanner li.facebook a { background:url('../images/common/floating-facebook.png') no-repeat left 30px center;} #floatBanner li.smart a { display:flex;width:100%;height:100%;padding:13px 0 0 14px;font-size:0.9375rem;font-weight:900;color:#000;background:url('../images/common/floating-smart-nor.png') no-repeat center center;} #floatBanner li.smart a:active { background-image: url('../images/common/floating-smart-sel.png');} #floatBanner li.data a { display:flex;width:100%;height:100%;padding:13px 0 0 14px;font-size:0.9375rem;font-weight:900;color:#000;background:url('../images/common/floating-data-nor.png') no-repeat center center;} #floatBanner li.data a:active { background-image: url('../images/common/floating-data-sel.png');} /* header */ #header { height:90px;position:absolute;;left:0;right:0;z-index:102;} .scroll #header { -webkit-transition:top .3s;transition:top .3s;position:fixed;top:-90px;background-color:#fff;} .scroll.hd-top #header { -webkit-transition:top .3s;transition:top .3s;top:0;} #header.bg { background-color:#f2f2f2;} .scroll #header.bg { background-color:#fff;} #header .inner { height:100%;} #header .navbar { padding:0 16px;} #header .icon-navbar { display:none;position:relative;width:18px;height:60px;} #header .icon-navbar span { display:inline-block;position:absolute;left:0;width:100%;height:2px;background-color:#ff3900;border-radius:4px;} #header .icon-navbar span:nth-child(1) { top:calc(50% - 8px);animation:navbar1 .75s forwards;-webkit-animation:navbar1 .75s forwards;} #header .icon-navbar span:nth-child(2) { top:calc(50% - 1px);transition:all .25s .25s;} #header .icon-navbar span:nth-child(3) { bottom:calc(50% - 8px);animation:navbar2 .75s forwards;-webkit-animation:navbar2 .75s forwards;} #header .icon-navbar.active span:nth-child(1) { animation:active-navbar1 .75s forwards;-webkit-animation:active-navbar1 .75s forwards;} #header .icon-navbar.active span:nth-child(2) {opacity:0;} #header .icon-navbar.active span:nth-child(3) { animation:active-navbar2 .75s forwards;-webkit-animation:active-navbar2 .75s forwards;} #logo { margin-right:auto;position:relative;z-index:102;} #logo a { display:block;width:152px;height:26px;text-indent:-9999px;background:url('../images/common/logo.png') no-repeat center;} #header.on #logo a, #logo a.red { background:url('../images/common/logo-on.png') no-repeat center;} #nav { height:100%;} #nav ul { display:flex;flex-direction:row;height:100%;position:relative;z-index:102} #nav ul li a { display:flex;align-items:center;width:auto;height:100%;padding:0 30px;position:relative;font-size:1rem;font-weight:700;color:#1d1d1f;letter-spacing:-1.5px;white-space:nowrap;} #nav ul li a:hover, #nav ul li a:focus, #nav ul li.active a, #nav.white-text ul li a:hover, #nav.white-text ul li a:focus, #nav.white-text ul li.active a { color:#ff3900;} #nav ul li a:active, #nav.white-text ul li a:active { color:#bd2a00;} #nav.white-text ul li a { color:#fff;} #header.on #nav.white-text ul li:not(.on):not(.active) a { color:#1d1d1f;} #nav ul li span.nav_line { position:absolute;bottom:0;width:0;height:3px;background-color:#ff3900;opacity:0;-webkit-transition:0.6s cubic-bezier(0.23, 1, 0.32, 1);transition:0.6s cubic-bezier(0.23, 1, 0.32, 1);} #header .language { text-align:center;position:relative;margin-left:30px;z-index:102;} #header .language > a { display:block;position:relative;font-size:0.875rem;color:#1d1d1f;font-weight:500;padding-right:13px;white-space:nowrap;} #header .language.white-text > a { color:#fff;} #header.on .language.white-text > a { color:#1d1d1f;} #header .language img { width:1.5rem;} #header .language > i { font-size:.8125rem;margin:0;position:absolute;right:0;margin-top:0.4rem;margin-left:3px;opacity:0.7;} #header .language ul.lang-select { position:absolute;top:33px;left:-5px;width:100px;padding:13px 0;text-align:center;box-shadow:4px 4.5px 20px 0 rgba(0, 0, 0, 0.15);background-color:#fff;z-index:11;display:none;-webkit-transition:none;transition:none;} #header .language ul.lang-select li a { display:block;font-size:0.875rem;font-weight:500;color:#1d1d1f;line-height:29px;cursor:pointer;} #header .language ul.lang-select li.active a, #header .language ul.lang-select li a:hover, #header .language ul.lang-select li a:focus { color:#ff3900;} #header .language ul.lang-select li a:active { color:#bd2a00;} #header .sub-nav-wrap { overflow:hidden;height:0;z-index:101;position:absolute;top:0;left:0;width:100%;padding-top:90px;-webkit-transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1);-moz-transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1);-o-transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1);transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1);} .scroll #header .sub-nav-wrap { border-bottom:1px solid #f1f1f1;} #header .sub-nav-wrap.on { height:490px;background:#fff;} #header .sub-nav-wrap .sub-nav { padding-top:40px;} #header .sub-nav-wrap .sub-nav .sub-nav-title { font-size:1.25rem;font-weight:700;color:#1d1d1f;line-height:1;width:190px;} #header .sub-nav-wrap .sub-nav ul { display:none;} #wrap.en #header .sub-nav-wrap .sub-nav .sub-nav2-left, #wrap.en #header .sub-nav-wrap .sub-nav .sub-nav2-right { max-width:210px;} #wrap.en #header .sub-nav-wrap .sub-nav .sub-nav2-left li:not(:last-child), #wrap.en #header .sub-nav-wrap .sub-nav .sub-nav2-right li:not(:last-child) { margin-bottom:20px;} #wrap.en #header .sub-nav-wrap .sub-nav .sub-nav2-right { margin-left:20px;} #header .sub-nav-wrap .sub-nav ul li:not(:last-child) { margin-bottom:30px;} #header .sub-nav-wrap .sub-nav ul li a { display:block;font-size:1rem;font-weight:500;color:#1d1d1f;line-height:1;} #header .sub-nav-wrap .sub-nav ul li a:hover, #header .sub-nav-wrap .sub-nav ul li a:focus, #header .sub-nav-wrap .sub-nav ul li a.on { font-weight:700;color:#ff3900;} #header .sub-nav-wrap .sub-nav ul li a:active { color:#bd2a00;} #header .sub-nav-wrap .sub-nav-banners { padding-top:40px;min-width:750px;} #header .sub-nav-wrap .sub-nav-banners .banner { margin-bottom:10px;} /* sideBar */ #sideBar { position:fixed;} #sideBar .sidebar-bg { display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.5);} #mNav { position:fixed;left:-360px;top:60px;bottom:0;width:360px;background-color:#fff;z-index:1;transition:left .3s cubic-bezier(0.6, 0, 0.4, 1);-webkit-transition:left .3s cubic-bezier(0.6, 0, 0.4, 1);overflow-y:auto;} #mNav a.depth1 { display:flex;align-items:center;width:100%;height:60px;font-size:1rem;font-weight:700;color:#1d1d1f;padding:0 20px 0 40px;} #mNav a.depth1 i.nav-arrow { display:block;width:16px;height:10px;background:url('../images/common/m-nav-arrow.png') no-repeat center;margin-left:auto;} #mNav li.active a.depth1, #mNav li.on a.depth1 { color:#ff3900;} #mNav li.on a.depth1 i.nav-arrow { background-image:url('../images/common/m-nav-arrow-on.png');transform:rotate(180deg);-webkit-transform:rotate(180deg);} #mNav .depth2 { display:none;background-color:#f6f6f6;transition:none;} #mNav .depth2 a { display:flex;align-items:center;height:50px;afont-size:1rem;font-weight:500;color:#1d1d1f;padding-left:3.125rem;} #mNav .depth2 a.on { background-color:#e5e5e5;} /* footer */ #footer { height:680px;background:url('../images/common/footer-back.png') no-repeat center;background-size:cover;padding:109px 0 72px;} #footer .inner { display:flex;flex-direction:column;height:100%;} #footer .ft-menu { display:flex;flex-direction:row;} #footer .ft-menu > ul { margin-top:-7px;max-width:20%;} #footer .ft-menu > ul:not(:first-child) { margin-left:70px;} #footer .ft-menu > ul li:not(:first-child) { margin:5px 0;} #footer .ft-menu li a { font-size:0.875rem;font-weight:300;color:#fff;} #footer .ft-menu li a:hover, #footer .ft-menu li a:focus { color:#ff3900;} #footer .ft-menu li a:active { color:#bc2a00;} #footer .sns-box { margin-left:auto;} #footer .sns-box ul.sns { display:flex;flex-direction:row;width:100%;align-items:center;justify-content:space-between;margin-bottom:24px;} #footer .sns-box ul.sns li a { display:block;text-indent:-9999px;} #footer .sns-box ul.sns li a.sns1 { width:22px;height:22px;background:url('../images/common/ch.png') no-repeat center;} #footer .sns-box ul.sns li a.sns1:hover, #footer .sns-box ul.sns li a.sns1:focus { background:url('../images/common/ch-over.png') no-repeat center;} #footer .sns-box ul.sns li a.sns1:active { background:url('../images/common/ch-select.png') no-repeat center;} #footer .sns-box ul.sns li a.sns2 { width:11px;height:22px;background:url('../images/common/facebook.png') no-repeat center;} #footer .sns-box ul.sns li a.sns2:hover, #footer .sns-box ul.sns li a.sns2:focus { background:url('../images/common/facebook-over.png') no-repeat center;} #footer .sns-box ul.sns li a.sns2:active { background:url('../images/common/facebook-select.png') no-repeat center;} #footer .sns-box ul.sns li a.sns3 { width:14px;height:18px;background:url('../images/common/blog.png') no-repeat center;} #footer .sns-box ul.sns li a.sns3:hover, #footer .sns-box ul.sns li a.sns3:focus { background:url('../images/common/blog-over.png') no-repeat center;} #footer .sns-box ul.sns li a.sns3:active { background:url('../images/common/blog-select.png') no-repeat center;} #footer .sns-box ul.sns li a.sns4 { width:25px;height:18px;background:url('../images/common/youtube.png') no-repeat center;} #footer .sns-box ul.sns li a.sns4:hover, #footer .sns-box ul.sns li a.sns4:focus { background:url('../images/common/youtube-over.png') no-repeat center;} #footer .sns-box ul.sns li a.sns4:active { background:url('../images/common/youtube-select.png') no-repeat center;} #footer .sns-box p { font-size:0.9375rem;font-weight:400;color:#fff;text-align:right;line-height:1;margin-top:8px;} #footer .sns-box p a { color:#fff;} #footer .sns-box p i { font-size:0.6875rem;margin-right:8px;} #footer .sns-box p i.fa-envelope { font-size: 0.9375rem;} #footer .address-box { margin-top:auto;display:flex;flex-direction:row;} #ft-logo { width:200px;height:37px;text-indent:-9999px;background:url('../images/common/ulalalab-logo.png') no-repeat center;margin-right:60px;} #ft-logo a { display:block;width:100%;height:100%;} #footer address { margin-top:-5px;} #footer address p { font-size:0.875rem;font-weight:500;color:#fff;line-height:1.71;font-style:normal;} #footer address p span { margin-left:1.5rem;} #footer address p.copy { font-weight:300;color:rgba(255, 255, 255, 0.8);} #footer .marks { display:flex;flex-direction:row;margin-left:auto;align-items:flex-end;} #footer .marks li:first-child { margin-right:20px;} #footer .mobile-foot { display:none;} #footer .mobile-foot .top { display:flex;flex-direction:row;align-items:center;margin-bottom:1.875rem;} #footer .mobile-foot .top #ft-logo { width:9.375rem;height:1.75rem;background:url('../images/m/common/ulalalab-logo.png') no-repeat center;background-size:cover;margin-right:0;} #footer .mobile-foot .top .ft-slide-btn { display:inline-block;width:auto;height:auto;margin-left:1rem;} #footer .mobile-foot .top .ft-slide-btn img { transform:rotate(180deg)} #footer .mobile-foot .top .ft-slide-btn.on img { transform:rotate(0)} #footer .mobile-foot .m-ft-menu { display:flex;flex-wrap:wrap;flex-direction:row;margin-bottom:2.1875rem;} #footer .mobile-foot .m-ft-menu li { margin-right:0.875rem;} #footer .mobile-foot .m-ft-menu li a { font-size:1rem;color:#fff;line-height:1.63;} #footer .mobile-foot .m-ft-menu li:not(:last-child):after { content:'';display:inline-block;width:2px;height:15px;background:#727273;margin-left:0.875rem;vertical-align:-2px;} #footer .mobile-foot .sns-box { margin:0 auto;} #footer .mobile-foot .sns-box ul.sns { display:flex;flex-direction:row;width:100%;align-items:center;justify-content:center;margin:0;} #footer .mobile-foot .sns-box ul.sns li { margin:0 6.25%;} #footer .mobile-foot .sns-box ul.sns li a.sns1 { width:2.0625rem;height:2.25rem;background:url('../images/common/ch.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns1:active { background:url('../images/common/ch-select.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns2 { width:.875rem;height:2.0625rem;background:url('../images/common/facebook.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns2:active { background:url('../images/common/facebook-select.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns3 { width:1.3125rem;height:1.6875rem;background:url('../images/common/blog.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns3:active { background:url('../images/common/blog-select.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns4 { width:2.125rem;height:1.375rem;background:url('../images/common/youtube.png') no-repeat center;background-size:cover;} #footer .mobile-foot .sns-box ul.sns li a.sns4:active { background:url('../images/common/youtube-select.png') no-repeat center;background-size:cover;} #footer .mobile-foot .ft-slide-box { display:none;transition:none;-webkit-transition:none;} #footer .mobile-foot .ft-menu-2 { display:flex;flex-direction:row;margin:2.5rem 0 2.1875rem;} #footer .mobile-foot .ft-menu-2 > ul { width:50%;} #footer .mobile-foot .ft-menu-2 ul li:not(:first-child) { margin:10px 0;} #footer .mobile-foot .ft-menu-2 li a { font-size:1rem;font-weight:400;color:#fff;line-height:1.63;} #footer .mobile-foot .ft-menu-2 li a:active { color:#bc2a00;} #footer .mobile-foot .customer-box { display:flex;flex-direction:row;} #footer .mobile-foot .customer-box .cusromer p { font-size:1.125rem;font-weight:400;color:#fff;line-height:1;margin-top:0.5rem;} #footer .mobile-foot .customer-box .cusromer a { color:#fff;} #footer .mobile-foot .customer-box .cusromer i { font-size:0.6875rem;margin-right:0.5rem;} #footer .mobile-foot .customer-box .cusromer i.fa-envelope { font-size: 0.9375rem;} #footer .mobile-foot address { margin-top:2.625rem;} #footer .mobile-foot address p { font-size:1rem;line-height:1.63;} #mobile-share-wrap { display:none;position:fixed;left:0;right:0;top:0;bottom:0;transition:none;} #mobile-share-wrap .bg { position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.6);} #mobile-share-wrap .share-box { position:fixed;left:0;right:0;top:100%;padding:15px 0;background-color:#fff;border-radius:15px 15px 0 0;-webkit-transform:translate(0, -100%);transform:translate(0, -100%);-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;} #mobile-share-wrap .share-box .title { font-size:1.25rem;font-weight:700;color:#1d1d1f;text-align:center;} #mobile-share-wrap .share-box .share-close { position:absolute;right:15px;top:10px;width:2rem;height:2rem;background:url('../images/contents/btn-form-delete-sel.png') no-repeat center 50%;} #mobile-share-wrap .share-box .share-list { display:flex;flex-direction:row;align-items:center;justify-content:space-around;padding:2rem;} #mobile-share-wrap .share-box li { width:40px;height:40px;border-radius:20px;overflow:hidden;} #mobile-share-wrap .share-box li:not(:first-child) { margin-left:14px;} #mobile-share-wrap .share-box li a { display:block;width:100%;height:100%;} #mobile-share-wrap .share-box li a.blog { background:url('../images/contents/btn-share-b-nor.png') no-repeat center center;} #mobile-share-wrap .share-box li a.blog:active { background:url('../images/contents/btn-share-b-sel.png') no-repeat center center;} #mobile-share-wrap .share-box li a.facebook { background:url('../images/contents/btn-share-f-nor.png') no-repeat center center;} #mobile-share-wrap .share-box li a.facebook:active { background:url('../images/contents/btn-share-f-sel.png') no-repeat center center;} #mobile-share-wrap .share-box li a.kakao { background:url('../images/contents/btn-share-kakao-nor.png') no-repeat center center;} #mobile-share-wrap .share-box li a.kakao:active { background:url('../images/contents/btn-share-kakao-sel.png') no-repeat center center;} #mobile-share-wrap .share-box li a.url { font-size:1.375rem;color:#000;line-height:40px;text-align:center;background-color:#d8d8d8;} #mobile-share-wrap .share-box li a.url:active { background-color:#969696;} #popup .share-wrap .share-box { border:1px solid #f1f1f1;} /* 새창 팝업 */ body#popup { width:100%;height:100%;} .pop-box { position:relative;max-width:1200px;background-color:#fff;} .pop-box .pop-top { display:flex;justify-content:center;height:155px;} .pop-box .pop-top .pop-title { font-size:3rem;font-weight:700;color:#ff3900;line-height:1;} .pop-box .pop-top .share-wrap { margin:0 0 0 29px;} .pop-btn { position:absolute;right:4%;bottom:2.5%;font-size:1.125rem;font-weight:700;color:#ff3900;} @media all and (max-width:1400px) { #modal1.modal-container { padding-right:42.8%;} #modal2.modal-container { padding-left:42.8%;} #floatBanner { display:none;} .inner { width:100%;padding:0 4.3%;} #nav ul li a { padding:0 15px;} #header .language { margin-left:20px;} } @media all and (max-width:1024px) { #header { position:relative;height:60px;box-shadow:0 1px 0 0 rgba(1, 2, 7, 0.2);background-color:#fff;} #header.bg { background-color:#fff;} #header .inner { height:100%;justify-content:center;} #logo { margin-right:0;} #logo a { background:url('../images/common/logo-on.png') no-repeat center;} #header .navbar { display:block;position:absolute;top:0;left:0;} #header .icon-navbar { display:block;} #nav { display:none;} #header .language { position:absolute;top:0;right:0;height:60px;display:flex;align-items:center;} #header .language.white-text > a { color:#1d1d1f;} #header .language ul.lang-select { top:60px;right:0;width:100px;padding:0.8125rem 0;box-shadow:4px 4.5px 10px 0 rgba(0, 0, 0, 0.5);border:1px solid #d9d9d9;} #header .language ul.lang-select li a { line-height:2.5rem;} #header .language ul.lang-select li a:active { color:#1d1d1f;background-color:#e9e9e9;} .sub-nav-wrap { display:none;} #footer { height:auto;background:url('../images/m/common/footer-back.png') no-repeat bottom #1d2431;background-size:cover;padding:3.125rem 0 6.25rem;} #footer .ft-menu, #footer .address-box { display:none;} #footer .mobile-foot { display:block;} } @media all and (max-width:639px) { :root { font-size:14px;} #modal1.modal-container { padding-right:0;} #modal2.modal-container { padding-left:0;} .modal-content { width:90%;} #header .language ul.lang-select { width:90px;} } @media all and (max-width:425px) { :root { font-size:12px;} #mNav { width:260px;left:-260px;} #header .language ul.lang-select { width:80px;} #footer .mobile-foot .ft-menu-2 { flex-direction:column;} #footer .mobile-foot .ft-menu-2 > ul { width:100%;} } @keyframes navbar1 { 0% {transform:translateY(7px) rotate(45deg);} 50% {transform:translateY(7px) rotate(0);} 100% {transform:translateY(0) rotate(0);} } @-webkit-keyframes navbar1 { 0% { -webkit-transform:translateY(7px) rotate(45deg);} 50% { -webkit-transform:translateY(7px) rotate(0);} 100% { -webkit-transform:translateY(0) rotate(0);} } @keyframes navbar2 { 0% {transform:translateY(-7px) rotate(-45deg);} 50% {transform:translateY(-7px) rotate(0);} 100% {transform:translateY(0) rotate(0);} } @-webkit-keyframes navbar2 { 0% {-webkit-transform:translateY(-7px) rotate(-45deg);} 50% {-webkit-transform:translateY(-7px) rotate(0);} 100% {-webkit-transform:translateY(0) rotate(0);} } @keyframes active-navbar1 { 0% { transform:translateY(0) rotate(0);} 50% { transform:translateY(7px) rotate(0);} 100% { transform:translateY(7px) rotate(45deg);} } @-webkit-keyframes active-navbar1 { 0% { -webkit-transform:translateY(0) rotate(0);} 50% { -webkit-transform:translateY(7px) rotate(0);} 100% { -webkit-transform:translateY(7px) rotate(45deg);} } @keyframes active-navbar2 { 0% { transform:translateY(0) rotate(0);} 50% { transform:translateY(-7px) rotate(0);} 100% { transform:translateY(-7px) rotate(-45deg);} } @-webkit-keyframes active-navbar2 { 0% { -webkit-transform:translateY(0) rotate(0);} 50% { -webkit-transform:translateY(-7px) rotate(0);} 100% { -webkit-transform:translateY(-7px) rotate(-45deg);} } .slideInBottom { -webkit-animation-name: slideInBottom; animation-name: slideInBottom; } @-webkit-keyframes slideInBottom { from { -webkit-transform: translate(0, 0); transform: translate(0, 0); } to { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } } @keyframes slideInBottom { from { -webkit-transform: translate(0, 0); transform: translate(0, 0); } to { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } } .slideOutBottom { -webkit-animation-name: slideOutBottom; animation-name: slideOutBottom; } @-webkit-keyframes slideOutBottom { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes slideOutBottom { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } }