/* Niconne */ @import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap'); /* UhBeeSunhong */ @font-face { font-family: 'UhBeeSunhong'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeSunhong.woff') format('woff'); font-weight: normal; font-style: normal; } .f_ub { font-family: 'UhBeeSunhong' !important; } .costInfo img { max-width: 100%; } .sound_only { opacity: 0; position: relative; z-index: -100000000; } /*Font: Pretendard*/ @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff'); font-weight: 900; font-style: normal; } /* Open+Sans */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); /*------------------------------------------------------*/ /*----------------------RESET----------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} body *{-webkit-text-size-adjust:none;} .clear{clear:both; overflow:hidden; height:0px; font-size:0px; display: block;} input:focus, select:focus, textarea:focus, button:focus {outline: none; box-shadow:none;} input, textarea, select{ -webkit-appearance: none; border-radius: 0; outline: none; border: 0px none; outline: none; transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in; background: none;} a, a:link, a:visited, a:active, a:hover{cursor: pointer; text-decoration: none; outline: none;} a {text-decoration:none; outline:none; transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;} iframe {border: none; outline: none;} ul {list-style: none;} button {background: none; border:0px none;} ::-webkit-input-placeholder {color:#b7b7b7; opacity: 1;} ::-moz-placeholder {color:#b7b7b7; opacity: 1;} :-moz-placeholder {color:#b7b7b7; opacity: 1;} :-ms-input-placeholder {color:#b7b7b7; opacity: 1;} @media (min-width: 1300px) { .container { width: 1300px; } } /*------------------------------------------------------*/ /*----------------------BACKGROUND----------------------*/ .bg {position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden;} .bg img{position:absolute; top: 0px; width: 100%; height: 100%;} .bg video{position:absolute;} .bg-bg {background-position: 50% 50%; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;-ms-background-size: cover; background-size: cover; position:fixed;} .bg-bg.act{position: absolute;} .clip{clip: rect(auto, auto, auto, auto); height: 100%; position: absolute; width: 100%;} .full-width {position:relative; width:100%;} .full-height {height: 100vmin; position:relative;} .vertical-align {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; width: 100%;} .table-view {height: 100%; width: 100%; display: table;} .row-view {display: table-row;} .cell-view {display: table-cell; vertical-align: middle; height: inherit;} /*preload*/ #loading {height: 100%;width: 100%;position: fixed;z-index: 1000;margin-top: 0px;top: 0px;} #loading-center{width: 100%;height: 100%;position: relative;} #loading-center-absolute {position: absolute;left: 50%;top: 50%;height: 200px;width: 200px;margin-top: -100px;margin-left: -100px;} .object{width: 50px;height: 50px;background-color: rgba(255,255,255,0);margin-right: auto;margin-left: auto;border: 4px solid #FFF;left: 73px;top: 73px;position: absolute;} #first_object{-webkit-animation: first_object_animate 1s infinite ease-in-out;animation: first_object_animate 1s infinite ease-in-out;} #second_object{-webkit-animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;} #third_object{-webkit-animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;} @-webkit-keyframes second_object {100% { width: 100px; height:100px; left: 48px; top: 48px; }} @keyframes second_object {100% { width: 100px; height:100px; left: 48px; top: 48px; }} @-webkit-keyframes third_object {100% { width: 150px; height:150px; left: 23px; top: 23px;}} @keyframes third_object {100% { width: 150px; height:150px; left: 23px; top: 23px;}} @-webkit-keyframes first_object_animate {0% { -webkit-transform: perspective(100px); }50% { -webkit-transform: perspective(100px) rotateY(-180deg); }100% { -webkit-transform: perspective(100px) rotateY(-180deg) rotateX(-180deg); }} @keyframes first_object_animate {0% { transform: perspective(100px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(100px) rotateX(-180deg) rotateY(0deg);-webkit-transform: perspective(100px) rotateX(-180deg) rotateY(0deg) ;} 100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);-webkit-transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);}} @-webkit-keyframes second_object_animate {0% { -webkit-transform: perspective(200px); }50% { -webkit-transform: perspective(200px) rotateY(180deg); }100% { -webkit-transform: perspective(200px) rotateY(180deg) rotateX(180deg); }} @keyframes second_object_animate {0% { transform: perspective(200px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(200px) rotateX(180deg) rotateY(0deg);-webkit-transform: perspective(200px) rotateX(180deg) rotateY(0deg) ;} 100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); -webkit-transform: perspective(200px) rotateX(180deg) rotateY(180deg);}} @-webkit-keyframes third_object_animate {0% { -webkit-transform: perspective(300px); }50% { -webkit-transform: perspective(300px) rotateY(-180deg); }100% { -webkit-transform: perspective(300px) rotateY(-180deg) rotateX(-180deg); }} @keyframes third_object_animate {0% { transform: perspective(300px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg) ;} 100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);-webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);}} /* color style 1 */ body[data-color="theme-1"] .push-1 {background: #f34580;} body[data-color="theme-1"] .push-1:hover {background: #fff; color: #222;} body[data-color="theme-1"] .bg-main {background: #313fa0;} body[data-color="theme-1"] .bg-second {background: #f34580;} body[data-color="theme-1"] .item-layer {background: rgba(243,69,128,0.95);} body[data-color="theme-1"] .fillter-wrap .but.activbut {background: #f34580; color: #fff;} body[data-color="theme-1"] .fillter-wrap .but:hover {background: #f34580; color: #fff;} body[data-color="theme-1"] .how-block:hover {background: #f34580;} body[data-color="theme-1"] .service-block .text span {border-color: #f34580;} body[data-color="theme-1"] .folow a:hover {background: #f34580; color: #fff;} body[data-color="theme-1"] .skill-block .skill-line div {background: #f34580;} body[data-color="theme-1"] .cust-block .bg-main.text:before {border-color: transparent transparent #313fa0 transparent;} body[data-color="theme-1"] .cust-block.cust-top .bg-main.text:before{border-color: #313fa0 transparent transparent transparent;} body[data-color="theme-1"] .cust-block:hover .bg-main.text:before {border-color: transparent transparent #f34580 transparent;} body[data-color="theme-1"] .cust-block.cust-top:hover .bg-main.text:before{border-color: #f34580 transparent transparent transparent;} body[data-color="theme-1"] .news-block .text span {color: #f34580;} body[data-color="theme-1"] .news-block .push-1:hover {background: #313fa0; color: #fff;} body[data-color="theme-1"] .price {border-color: #f34580;} body[data-color="theme-1"] .price-block:hover {background: #F34580;} body[data-color="theme-1"] .contact-block a:hover {color: #f34580;} body[data-color="theme-1"] .contact-form input[type="submit"]:hover {background: #313fa0;} body[data-color="theme-1"] .swiper-arrow-left:hover, body[data-color="theme-1"] .swiper-arrow-right:hover {color: #f34580;} body[data-color="theme-1"] header.scrol {background: #313fa0;} body[data-color="theme-1"] .left-menu nav ul li a:hover {color: #f34580;} body[data-color="theme-1"] .left-menu nav ul li a.active {color: #f34580;} body[data-color="theme-1"] .top-menu nav ul li a:before {background: #f34580;} body[data-color="theme-1"] .top-menu nav ul li a:hover:before {background: #f34580;} body[data-color="theme-1"] .up-button {background: #f34580;} body[data-color="theme-1"] .up-button:hover {background: #313fa0;} body[data-color="theme-1"] .border-title {border: 20px solid #f34580;} body[data-color="theme-1"] .news-block .text a h6:hover {color: #F34580;} body[data-color="theme-1"] .point-style-2 .swiper-pagination-switch.swiper-active-switch {border-color: #f34580;} body[data-color="theme-1"] .nav-menu-icon a.active i {background: #f34580;} body[data-color="theme-1"] #loading {background: #313fa0;} body[data-color="theme-1"] .cust-block:hover .bg-main {background: #f34580;} /* color style 2 */ body[data-color="theme-2"] .push-1 {background: #ffc107;} body[data-color="theme-2"] .push-1:hover {background: #fff; color: #222;} body[data-color="theme-2"] .bg-main {background: #388e3c;} body[data-color="theme-2"] .bg-second {background: #ffc107;} body[data-color="theme-2"] .item-layer {background: rgba(255,193,7,0.95);} body[data-color="theme-2"] .fillter-wrap .but.activbut {background: #ffc107; color: #fff;} body[data-color="theme-2"] .fillter-wrap .but:hover {background: #ffc107; color: #fff;} body[data-color="theme-2"] .how-block:hover {background: #ffc107;} body[data-color="theme-2"] .service-block .text span {border-color: #ffc107;} body[data-color="theme-2"] .folow a:hover {background: #ffc107; color: #fff;} body[data-color="theme-2"] .skill-block .skill-line div {background: #ffc107;} body[data-color="theme-2"] .cust-block .bg-main.text:before{border-color: transparent transparent #388e3c transparent;} body[data-color="theme-2"] .cust-block:hover .bg-main.text:before{border-color: transparent transparent #ffc107 transparent;} body[data-color="theme-2"] .cust-block.cust-top .bg-main.text:before{border-color: #388e3c transparent transparent transparent;} body[data-color="theme-2"] .cust-block.cust-top:hover .bg-main.text:before{border-color: #ffc107 transparent transparent transparent;} body[data-color="theme-2"] .news-block .text span {color: #ffc107;} body[data-color="theme-2"] .news-block .push-1:hover {background: #388e3c; color: #fff;} body[data-color="theme-2"] .price {border-color: #ffc107;} body[data-color="theme-2"] .price-block:hover {background: #ffc107;} body[data-color="theme-2"] .contact-block a:hover {color: #ffc107;} body[data-color="theme-2"] .contact-form input[type="submit"]:hover {background: #388e3c;} body[data-color="theme-2"] .swiper-arrow-left:hover, body[data-color="theme-2"] .swiper-arrow-right:hover {color: #ffc107;} body[data-color="theme-2"] header.scrol {background: #388e3c;} body[data-color="theme-2"] .left-menu nav ul li a:hover {color: #ffc107;} body[data-color="theme-2"] .left-menu nav ul li a.active {color: #ffc107;} body[data-color="theme-2"] .up-button {background: #ffc107;} body[data-color="theme-2"] .up-button:hover {background: #388e3c;} body[data-color="theme-2"] .top-menu nav ul li a.active {border-color: #ffc107;} body[data-color="theme-2"] .border-title {border: 20px solid #ffc107;} body[data-color="theme-2"] .news-block .text a h6:hover {color: #ffc107;} body[data-color="theme-2"] .point-style-2 .swiper-pagination-switch.swiper-active-switch {border-color: #ffc107;} body[data-color="theme-2"] .nav-menu-icon a.active i {background: #ffc107;} body[data-color="theme-2"] #loading {background: #388e3c;} body[data-color="theme-2"] .cust-block:hover .bg-main {background: #ffc107;} body[data-color="theme-2"] .top-menu nav ul li a:before {background: #ffc107;} body[data-color="theme-2"] .top-menu nav ul li a:hover:before {background: #ffc107;} /* color style 3 */ body[data-color="theme-3"] .push-1 {background: #cddc39;} body[data-color="theme-3"] .push-1:hover {background: #fff; color: #222;} body[data-color="theme-3"] .bg-main {background: #00796b;} body[data-color="theme-3"] .bg-second {background: #cddc39;} body[data-color="theme-3"] .item-layer {background: rgba(205,220,57,0.95);} body[data-color="theme-3"] .fillter-wrap .but.activbut {background: #cddc39; color: #fff;} body[data-color="theme-3"] .fillter-wrap .but:hover {background: #cddc39; color: #fff;} body[data-color="theme-3"] .how-block:hover {background: #cddc39;} body[data-color="theme-3"] .service-block .text span {border-color: #cddc39;} body[data-color="theme-3"] .folow a:hover {background: #cddc39; color: #fff;} body[data-color="theme-3"] .skill-block .skill-line div {background: #cddc39;} body[data-color="theme-3"] .cust-block .bg-main.text:before{border-color: transparent transparent #00796b transparent;} body[data-color="theme-3"] .cust-block:hover .bg-main.text:before{border-color: transparent transparent #cddc39 transparent;} body[data-color="theme-3"] .cust-block.cust-top .bg-main.text:before{border-color: #00796b transparent transparent transparent;} body[data-color="theme-3"] .cust-block.cust-top:hover .bg-main.text:before{border-color: #cddc39 transparent transparent transparent;} body[data-color="theme-3"] .news-block .text span {color: #cddc39;} body[data-color="theme-3"] .news-block .push-1:hover {background: #00796b; color: #fff;} body[data-color="theme-3"] .price {border-color: #cddc39;} body[data-color="theme-3"] .price-block:hover {background: #cddc39;} body[data-color="theme-3"] .contact-block a:hover {color: #cddc39;} body[data-color="theme-3"] .contact-form input[type="submit"]:hover {background: #00796b;} body[data-color="theme-3"] .swiper-arrow-left:hover, body[data-color="theme-3"] .swiper-arrow-right:hover {color: #cddc39;} body[data-color="theme-3"] header.scrol {background: #00796b;} body[data-color="theme-3"] .left-menu nav ul li a:hover {color: #cddc39;} body[data-color="theme-3"] .left-menu nav ul li a.active {color: #cddc39;} body[data-color="theme-3"] .up-button {background: #cddc39;} body[data-color="theme-3"] .up-button:hover {background: #00796b;} body[data-color="theme-3"] .top-menu nav ul li a.active {border-color: #cddc39;} body[data-color="theme-3"] .border-title {border: 20px solid #cddc39;} body[data-color="theme-3"] .news-block .text a h6:hover {color: #cddc39;} body[data-color="theme-3"] .point-style-2 .swiper-pagination-switch.swiper-active-switch {border-color: #cddc39;} body[data-color="theme-3"] .nav-menu-icon a.active i {background: #cddc39;} body[data-color="theme-3"] #loading {background: #00796b;} body[data-color="theme-3"] .cust-block:hover .bg-main {background: #cddc39;} body[data-color="theme-3"] .top-menu nav ul li a:before {background: #cddc39;} body[data-color="theme-3"] .top-menu nav ul li a:hover:before {background: #cddc39;} /* color style 4 */ body[data-color="theme-4"] .push-1 {background: #c54d6b;} body[data-color="theme-4"] .push-1:hover {background: #fff; color: #222;} body[data-color="theme-4"] .bg-main {background: #c54d6b;} body[data-color="theme-4"] .bg-main2 {background: #c54d6b; border: 1px solid #c54d6b;} body[data-color="theme-4"] .bg-second {background: #c54d6b;} body[data-color="theme-4"] .item-layer {background: rgba(33,33,33,0.9);} body[data-color="theme-4"] .fillter-wrap .but.activbut {background: #c54d6b; color: #fff;} body[data-color="theme-4"] .fillter-wrap .but:hover {background: #c54d6b; color: #fff;} body[data-color="theme-4"] .how-block:hover {background: #c54d6b;} body[data-color="theme-4"] .folow a:hover {background: #c54d6b; color: #fff;} body[data-color="theme-4"] .skill-block .skill-line div {background: #c54d6b;} body[data-color="theme-4"] .cust-block .bg-main2.text:before{border-color: transparent transparent #c54d6b transparent;} body[data-color="theme-4"] .cust-block .bg-main.text:before{border-color: transparent transparent #c54d6b transparent;} /* body[data-color="theme-4"] .cust-block:hover .bg-main.text:before{border-color: transparent transparent #c54d6b transparent;} */ body[data-color="theme-4"] .cust-block.cust-top .bg-main2.text:before{border-color: #c54d6b transparent transparent transparent;} body[data-color="theme-4"] .cust-block.cust-top .bg-main.text:before{border-color: #c54d6b transparent transparent transparent;} /* body[data-color="theme-4"] .cust-block.cust-top:hover .bg-main.text:before{border-color: #c54d6b transparent transparent transparent;} */ body[data-color="theme-4"] .news-block .text span {color: #c54d6b;} body[data-color="theme-4"] .news-block .push-1:hover {background: #1976d2; color: #fff;} body[data-color="theme-4"] .price {border-color: #c54d6b;} body[data-color="theme-4"] .price-block:hover {background: #c54d6b;} body[data-color="theme-4"] .contact-block a:hover {color: #c54d6b;} body[data-color="theme-4"] .contact-form input[type="submit"]:hover {background: #1976d2;} body[data-color="theme-4"] .swiper-arrow-left:hover, body[data-color="theme-4"] .swiper-arrow-right:hover {color: #c54d6b;} body[data-color="theme-4"] header.scrol {background: #c54d6b;} body[data-color="theme-4"] .left-menu nav ul li a:hover {color: #c54d6b;} body[data-color="theme-4"] .left-menu nav ul li a.active {color: #c54d6b;} body[data-color="theme-4"] .up-button {background: #c54d6b;} body[data-color="theme-4"] .up-button:hover {background: #1976d2;} body[data-color="theme-4"] .top-menu nav ul li a.active {border-color: #fff;} body[data-color="theme-4"] .border-title {border: 20px solid #c54d6b;} body[data-color="theme-4"] .news-block .text a h6:hover {color: #c54d6b;} body[data-color="theme-4"] .point-style-2 .swiper-pagination-switch.swiper-active-switch {border-color: #c54d6b;} body[data-color="theme-4"] .nav-menu-icon a.active i {background: #c54d6b;} body[data-color="theme-4"] #loading {background: #e7a2c2;} /* body[data-color="theme-4"] .cust-block:hover .bg-main {background: #c54d6b;} */ body[data-color="theme-4"] .top-menu nav ul li a:before {background:#fff;} body[data-color="theme-4"] .top-menu nav ul li a:hover:before {background: #c54d6b;} /* color style 5 */ body[data-color="theme-5"] .push-1 {background: #ff5252;} body[data-color="theme-5"] .push-1:hover {background: #fff; color: #222;} body[data-color="theme-5"] .bg-main {background: #512da8;} body[data-color="theme-5"] .bg-second {background: #ff5252;} body[data-color="theme-5"] .item-layer {background: rgba(255,82,82,0.95);} body[data-color="theme-5"] .fillter-wrap .but.activbut {background: #ff5252; color: #fff;} body[data-color="theme-5"] .fillter-wrap .but:hover {background: #ff5252; color: #fff;} body[data-color="theme-5"] .how-block:hover {background: #ff5252;} body[data-color="theme-5"] .service-block .text span {border-color: #ff5252;} body[data-color="theme-5"] .folow a:hover {background: #ff5252; color: #fff;} body[data-color="theme-5"] .skill-block .skill-line div {background: #ff5252;} body[data-color="theme-5"] .cust-block .bg-main.text:before{border-color: transparent transparent #512da8 transparent;} body[data-color="theme-5"] .cust-block:hover .bg-main.text:before{border-color: transparent transparent #ff5252 transparent;} body[data-color="theme-5"] .cust-block.cust-top .bg-main.text:before{border-color: #512da8 transparent transparent transparent;} body[data-color="theme-5"] .cust-block.cust-top:hover .bg-main.text:before{border-color: #ff5252 transparent transparent transparent;} body[data-color="theme-5"] .news-block .text span {color: #ff5252;} body[data-color="theme-5"] .news-block .push-1:hover {background: #512da8; color: #fff;} body[data-color="theme-5"] .price {border-color: #ff5252;} body[data-color="theme-5"] .price-block:hover {background: #ff5252;} body[data-color="theme-5"] .contact-block a:hover {color: #ff5252;} body[data-color="theme-5"] .contact-form input[type="submit"]:hover {background: #512da8;} body[data-color="theme-5"] .swiper-arrow-left:hover, body[data-color="theme-5"] .swiper-arrow-right:hover {color: #ff5252;} body[data-color="theme-5"] header.scrol {background: #512da8;} body[data-color="theme-5"] .left-menu nav ul li a:hover {color: #ff5252;} body[data-color="theme-5"] .left-menu nav ul li a.active {color: #ff5252;} body[data-color="theme-5"] .up-button {background: #ff5252;} body[data-color="theme-5"] .up-button:hover {background: #512da8;} body[data-color="theme-5"] .top-menu nav ul li a.active {border-color: #ff5252;} body[data-color="theme-5"] .border-title {border: 20px solid #ff5252;} body[data-color="theme-5"] .news-block .text a h6:hover {color: #ff5252;} body[data-color="theme-5"] .point-style-2 .swiper-pagination-switch.swiper-active-switch {border-color: #ff5252;} body[data-color="theme-5"] .nav-menu-icon a.active i {background: #ff5252;} body[data-color="theme-5"] #loading {background: #512da8;} body[data-color="theme-5"] .cust-block:hover .bg-main {background: #ff5252;} body[data-color="theme-5"] .top-menu nav ul li a:before {background: #ff5252;} body[data-color="theme-5"] .top-menu nav ul li a:hover:before {background: #ff5252;} /* color style 6 */ body[data-color="theme-6"] .push-1 {background: #e12d6d;} body[data-color="theme-6"] .push-1:hover {background: #fff; color: #222;} body[data-color="theme-6"] .bg-main {background: #0B858D;} body[data-color="theme-6"] .bg-second {background: #e12d6d;} body[data-color="theme-6"] .item-layer {background: rgba(225,45,109,0.95);} body[data-color="theme-6"] .fillter-wrap .but.activbut {background: #e12d6d; color: #fff;} body[data-color="theme-6"] .fillter-wrap .but:hover {background: #e12d6d; color: #fff;} body[data-color="theme-6"] .how-block:hover {background: #e12d6d;} body[data-color="theme-6"] .service-block .text span {border-color: #e12d6d;} body[data-color="theme-6"] .folow a:hover {background: #e12d6d; color: #fff;} body[data-color="theme-6"] .skill-block .skill-line div {background: #e12d6d;} body[data-color="theme-6"] .cust-block .bg-main.text:before{border-color: transparent transparent #0B858D transparent;} body[data-color="theme-6"] .cust-block:hover .bg-main.text:before{border-color: transparent transparent #e12d6d transparent;} body[data-color="theme-6"] .cust-block.cust-top .bg-main.text:before{border-color: #0B858D transparent transparent transparent;} body[data-color="theme-6"] .cust-block.cust-top:hover .bg-main.text:before{border-color: #e12d6d transparent transparent transparent;} body[data-color="theme-6"] .news-block .text span {color: #e12d6d;} body[data-color="theme-6"] .news-block .push-1:hover {background: #0B858D; color: #fff;} body[data-color="theme-6"] .price {border-color: #e12d6d;} body[data-color="theme-6"] .price-block:hover {background: #e12d6d;} body[data-color="theme-6"] .contact-block a:hover {color: #e12d6d;} body[data-color="theme-6"] .contact-form input[type="submit"]:hover {background: #0B858D;} body[data-color="theme-6"] .swiper-arrow-left:hover, body[data-color="theme-6"] .swiper-arrow-right:hover {color: #e12d6d;} body[data-color="theme-6"] header.scrol {background: #0B858D;} body[data-color="theme-6"] .left-menu nav ul li a:hover {color: #e12d6d;} body[data-color="theme-6"] .left-menu nav ul li a.active {color: #e12d6d;} body[data-color="theme-6"] .top-menu nav ul li a:hover:before {left: 0px;} body[data-color="theme-6"] .up-button {background: #e12d6d;} body[data-color="theme-6"] .up-button:hover {background: #0B858D;} body[data-color="theme-6"] .border-title {border: 20px solid #e12d6d;} body[data-color="theme-6"] .news-block .text a h6:hover {color: #e12d6d;} body[data-color="theme-6"] .point-style-2 .swiper-pagination-switch.swiper-active-switch {border-color: #e12d6d;} body[data-color="theme-6"] .nav-menu-icon a.active i {background: #e12d6d;} body[data-color="theme-6"] #loading {background: #0B858D;} body[data-color="theme-6"] .cust-block:hover .bg-main {background: #e12d6d;} body[data-color="theme-6"] .top-menu nav ul li a:before {background: #e12d6d;} body[data-color="theme-6"] .top-menu nav ul li a:hover:before {background: #e12d6d;} .bg-main {transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .bg-second {transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .bg-1 {background: #313fa0;} .bg-2 {background: #388e3c;} .bg-3 {background: #00796b;} .bg-4 {background: #1976d2;} .bg-5 {background: #512da8;} .bg-6 {background: #0B858D;} .style-page {position: fixed; width: 250px; height: 100%; right: -250px; top: 0%; background: #fff; z-index: 40; text-align: center; box-shadow: -1px -1px 3px rgba(0,0,0,0.1); -webkit-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); -moz-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); -o-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);} .wrapp {overflow-y: auto; overflow-x: hidden; height: 100%; padding: 15px;} .style-page.slide-right {right: 0px;} .conf-logo {margin: 15px 0px;} .color-block {position: relative; width: 100%; padding: 25px 0px; border-bottom: 1px solid #b7b7b7; display: inline-block;} .style-page h5 {padding-bottom: 18px; color: #b7b7b7; font-weight: 400;} .entry {width: 30px; height: 30px; position: relative; float: left; margin: 0px 18px 15px; cursor: pointer; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .conf-button {position: absolute; width: 50px; height: 50px; left: -50px; top: 140px; background: #fff; color: #222; text-align: center; font-size: 30px; line-height: 50px; cursor: pointer; border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-shadow: -2px -2px 3px rgba(0,0,0,0.1);} .conf-button span {transition:all 0.5s ease-in;-webkit-transition:all 0.5s ease-in;-moz-transition:all 0.5s ease-in;-o-transition:all 0.5s ease-in;-ms-transition:all 0.5s ease-in;} .conf-button span.act {transform: rotate(230deg); -webkit-transform: rotate(230deg);-moz-transform: rotate(230deg);-ms-transform: rotate(230deg);} .home-style {position: relative; width: 100%; padding: 25px 0px;} .home-style a {position: relative; width: 100%; display: block;} .home-style a:hover .dark-layer {opacity: 0;} .home-style a img {width: 100%; height: auto; display: block; margin-bottom: 5px;} .bg-sec {position: absolute; right: 0px; bottom: 0px; z-index: 1;width: 0;height: 0;border-style: solid;border-width: 0 0 15px 15px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .bg-1 .bg-sec {border-color: transparent transparent #f34580 transparent;} .bg-2 .bg-sec {border-color: transparent transparent #ffc107 transparent;} .bg-3 .bg-sec {border-color: transparent transparent #cddc39 transparent;} .bg-4 .bg-sec {border-color: transparent transparent #c54d6b transparent;} .bg-5 .bg-sec {border-color: transparent transparent #ff5252 transparent;} .bg-6 .bg-sec {border-color: transparent transparent #e12d6d transparent;} .entry.active {box-shadow: 2px 2px 3px rgba(0,0,0,0.2); transform: scale(1.2);} .entry.active .bg-sec {border-width: 0 0 30px 30px;} /*------------------------------------------------------*/ /*----------------------SWIPER SLIDER----------------------*/ .swiper-container {margin:0 auto;position:relative;overflow:hidden;direction:ltr;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;height: inherit;} .swiper-wrapper {position:relative;width:100%;-webkit-transition-property:-webkit-transform, left, top;-webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform, left, top;-moz-transition-duration:0s;-moz-transform:translate3d(0px,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform, left, top;-o-transition-duration:0s;-o-transform:translate3d(0px,0,0);-o-transition-timing-function:ease;-o-transform:translate(0px,0px);-ms-transition-property:-ms-transform, left, top;-ms-transition-duration:0s;-ms-transform:translate3d(0px,0,0);-ms-transition-timing-function:ease;transition-property:transform, left, top;transition-duration:0s; transform:translate3d(0px,0,0);transition-timing-function:ease;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;cursor:url(../img/drag.png) 16 9, ew-resize;margin: 0 auto;height: inherit;float: left;} .swiper-free-mode > .swiper-wrapper {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;margin: 0 auto;} .swiper-slide {float: left; height: inherit; position: relative;} .swiper-wp8-horizontal {-ms-touch-action: pan-y;} .swiper-wp8-vertical {-ms-touch-action: pan-x;} .swiper-anime {position: relative; width: 100%;} .swiper-arrow-left, .swiper-arrow-right{cursor: pointer; -webkit-transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);-moz-transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);-o-transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155);transition: all 320ms cubic-bezier(0.565, 0.42, 0.355, 1.155); text-align: center; z-index: 30; position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%); font-size: 18px; text-transform: uppercase; color: #fff;} .swiper-arrow-left {left: 100px;} .swiper-arrow-right {right: 100px;} .arr-style-1 {width: 70px; height: 70px; text-align: center; background: rgba(0,0,0,0.3); color: #ececec;} .arr-style-1 span {line-height: 70px;} .arr-style-1.swiper-arrow-left {left: 0px;} .arr-style-1.swiper-arrow-right {right: 0px;} .arr-style-1:hover {background: #000; color: #fff;} .pagination {position: absolute; width: 100%; text-align: center; left: 0px; margin: 0px; bottom: 0px;} .swiper-pagination-switch {margin: 0px 4px; width: 10px; height: 10px; border-radius: 50%; position: relative; display: inline-block; cursor: pointer; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .hidden-pag.pagination{display: none;} .point-style-1 {position: relative; width: 100%; display: inline-block;} .point-style-1 .pagination {bottom: 50px;} .point-style-1 .swiper-pagination-switch {border: 1px solid rgba(255,255,255,0.3); } .point-style-1 .swiper-pagination-switch.swiper-active-switch {border-color: #fff; transform: scale(1.2);} .point-style-2 .swiper-pagination-switch {border: 1px solid rgba(0,0,0,0.3);} .point-style-2 .swiper-pagination-switch.swiper-active-switch {transform: scale(1.2);} /*------------------------------------------------------*/ /*----------------------POPUP ANIMATION----------------------*/ @-webkit-keyframes fadeIn {0% {opacity: 0; margin-left: -80px;} 100% {opacity: 1; margin-left: 0px;}} @-moz-keyframes fadeIn {0% {opacity: 0; margin-left: -80px;} 100% {opacity: 1; margin-left: 0px;}} @keyframes fadeIn {0% {opacity: 0; margin-left: -80px;} 100% {opacity: 1; margin-left: 0px;}} .mfp-figure { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: .35s; -moz-animation-duration: .35s; -ms-animation-duration: .35s; animation-duration: .35s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } /*------------------------------------------------------*/ /*----------------------BUTTON STYLE----------------------*/ .push-1 {position: relative; display: inline-block; border-radius: 5px; padding: 20px; font-size: 11px; line-height: 11px; text-transform: uppercase; color: #fff; background: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.1);} /*------------------------------------------------------*/ /*----------------------TEXT STYLE----------------------*/ body {font-family: 'Open Sans', 'Pretendard', sans-serif; background: #fff; color: #222; font-weight: 400; letter-spacing: -0.03em;} h1 {font-size: 90px; font-weight: 800; line-height: 98px;} h2 {font-size: 36px; line-height: 40px; font-weight: 400; text-transform: capitalize;} h3 {font-size: 22px; line-height: 26px; font-weight: 400;} h4 {font-size: 20px; line-height: 28px; font-weight: 600;} h5 {font-size: 18px; line-height: 22px; font-weight: 600; text-transform: capitalize;} h6 {font-size: 14px; line-height: 20px; font-weight: 600; text-transform: capitalize;} p {font-size: 13px; line-height: 24px; font-weight: 400; color: #b7b7b7;} ul li {font-size: 13px; line-height: 16px; font-weight: 400;} input, textarea {font-size: 12px;} b {font-weight: 700;} a, a:active, a:focus {color: inherit;} .bg-grey {background: #f9f9f9;} .bg-white {background: #fff;} .res-img {width: 100%; height: auto; display: block;} /*------------------------------------------------------*/ /*----------------------HEADER----------------------*/ header {position: fixed; left: 0px; top: 0px; width: 100%; height: 90px; background: none; z-index: 50; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .navigation {position: relative; width: 100%; margin-top: 40px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .logo {position: absolute; left: 0px; top: -17px; color: #fff; font-size: 30px;} .logo span {font-family: 'Niconne', cursive;} .logo a {text-decoration: none; color: #fff !important;} .logo strong {font-size: .6em;} .logo strong,.logo img {vertical-align: middle;} header.scrol {height: 66px;} header.scrol .navigation {margin-top: 23px;} header.scrol .nav-menu-icon {top: -4px;} .nav-menu-icon {position: absolute; overflow: hidden; right: 0px; top: -5px; z-index: 110; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .nav-menu-icon a {display: inline-block;width:32px;height:32px;cursor: pointer;text-decoration: none;} .nav-menu-icon a i {position: relative;display: inline-block;width: 32px;height: 2px;color:#000;font:bold 14px/.4 Helvetica;text-transform: uppercase;text-indent:-55px;background: #fff;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;} .nav-menu-icon a i:before, .nav-menu-icon a i:after {content:''; width: 32px;height: 2px;background: #fff; position: absolute;left:0;transition:all .2s ease-out;} .nav-menu-icon a i:before {top: -7px;} .nav-menu-icon a i:after {bottom: -7px;} .nav-menu-icon a:hover i:before {top: -10px;} .nav-menu-icon a:hover i:after {bottom: -10px;} .nav-menu-icon a.active i:before {transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);} .nav-menu-icon a.active i:after {transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%);} @media (max-width: 768px) { .logo { top: -10px; } .logo a { font-size: 22px; } .logo img { width: 40px; } } /*-------------------------------------------------------------------------------------------------------------------------------*/ /* 02 - HOMEPAGE 1 */ /*-------------------------------------------------------------------------------------------------------------------------------*/ .left-menu nav {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100; background: rgba(255,255,255,0.95); overflow-y: auto; transform: translateX(100%); -webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%); -webkit-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); -moz-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); -o-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);} .left-menu nav.slide-menu {transform: translateX(0%); -webkit-transform: translateX(0%);-moz-transform: translateX(0%);-ms-transform: translateX(0%);} .left-menu nav ul {position: relative; width: 100%; text-align: right; padding: 120px 0px 40px;} .left-menu nav ul li {margin: 0px 0px 45px; font-size: 22px; line-height: 22px;} .text-p {font-size: 14px; line-height: 28px;} .bg-main .second-title h2 {color: #fff;} .top-baner {position: relative; width: 100%; height: 100vmin;} .block-bg {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;} .block-bg .bg-bg {width: 50%; right: 0%; left: auto; transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;} .main-title {color: #fff;} .main-title h1 {padding-bottom: 33px;} .main-title p {font-size: 16px; line-height: 32px; color: #fff; padding-bottom: 50px;} .dark-layer {position: absolute; left: 0px; top: 0px; background: rgba(0,0,0,0.2); mix-blend-mode: color-burn; width: 100%; height: 100%; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .top-slider-1 .pagination {text-align: left;} .top-slider-2 .pagination {text-align: center;} .center-title {text-align: center;} .center-title h1 {text-transform: uppercase;} .center-title p {font-size: 16px; line-height: 32px; text-transform: uppercase;} .section {position: relative; padding: 125px 0px 135px;} .second-title {text-align: center; position: relative; width: 100%; padding-bottom: 60px;} .second-title h2 {padding-bottom: 15px;} .second-title p {text-transform: uppercase; color: #5D5D5D;} .bg-main .second-title p {color: #b7b7b7;} .second-title.left-title {padding-bottom: 40px; text-align: left;} .block-about img {width: 100%; height: auto; display: block; margin-bottom: 25px;} .about-section .text-p {padding-top: 40px;} .info-block {position: relative; text-align: center; color: #fff;} .info-block span {font-size: 35px; line-height: 40px; font-weight: 800; padding-bottom: 10px; display: inline-block; margin: 0 -2px;} .section.no-bottom-padd {padding-bottom: 0px;} .service-block {position: relative; width: 100%; min-height: 445px;} .service-block .text {text-align: left;} .service-block .text .num {font-size: 30px; font-weight: 800; padding-bottom: 12px; line-height: 70px; display: inline-block; margin-bottom: 28px;} .service-block .text h4 {padding-bottom: 18px;} .block-60 .bg-bg {width: 60%;} .left-side .block-60 .bg-bg {left: 0px;} .right-side .block-60 .bg-bg {left: auto; right: 0px;} .block-40 {width: 50%; position: absolute; max-width: 500px; top: 50%; transform: translateY(-50%);} .left-side .block-40 {left: 60%; padding-left: 70px;} .right-side .block-40 {right: 60%; left: auto; padding-right: 70px;} .izotope-container {width: 100%;} .item {display: inline-block; width: 30.3333%; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); margin: 0px 1.5% 30px;} .item img {width: 100%; height: auto; display: block;} .grid-sizer {width: 0px;} .item-layer {position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; text-align: center; color: #fff; opacity: 0; -webkit-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);-moz-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);-o-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);} .item-layer h3 {padding-bottom: 10px;} .item-layer p {text-transform: uppercase; font-size: 11px; color: rgba(255,255,255,0.4);} .item:hover .item-layer {opacity: 1; left: 30px; top: 30px; bottom: 30px; right: 30px;} .fillter-wrap {position: relative; width: 100%; text-align: center; padding-bottom: 70px;} .fillter-wrap .but {font-size: 12px; line-height: 12px; font-weight: 300; color: rgba(255,255,255,0.4); text-transform: uppercase; padding: 9px 15px; margin: 0px 5px; border-radius: 5px; transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;} .load-more {text-align: center; padding-top: 20px;} .no-more {text-align: center; display: block; font-size: 14px; color: #fff; text-transform: uppercase; width: 100%; position: relative;} .block-50 {width: 50%; position: relative; float: left;} .choose {position: relative; width: 100%; min-height: 900px} .choose .left-block {min-height: inherit; left: 0px; position: absolute; top: 0px; width: 35%;} .choose .left-block .bg {width: 35%;} .choose .right-block {min-height: inherit; right: 0; position: absolute; top: 0px; width: 65%;} .choose .right-block .valn {padding: 0 50px;} .choose .right-block .valn ul li {padding: 0;} .choose-block {position: relative; width: 100%; padding-bottom: 65px; padding-right: 30px;} .choose-block:last-child {padding-bottom: 0px;} .choose-icon {width: 100px; height: 100px; border-radius: 50%; text-align: center; position: absolute; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);} .choose-icon img {width: 32px; height: 32px; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; position: absolute; z-index: 5;} .choose-txt {display: block; margin-left: 110px; position: relative;} .choose-txt h6 {padding-bottom: 15px;} .choose .right-block .title h2 {padding-bottom: 15px;} .choose .right-block .title p {text-transform: uppercase; line-height: 28px; padding-bottom: 60px;} .how-block {position: relative; width: 100%; background: #fff; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); text-align: center; margin-top: 40px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .how-block .choose-icon {position: absolute; left: 50%; margin-left: -35px; width: 70px; height: 70px; top: -35px;} .how-block .text {padding: 70px 30px 30px;} .how-block .text h6 {padding-bottom: 15px;} .how-block:hover {color: #fff; box-shadow: 10px 10px 20px rgba(0,0,0,0.2);} .how-block:hover .text p {color: #fff;} .team-slider {padding: 20px 0px;} .team-wrapp {width: 100%; min-height: 545px;} .team-wrapp .block-left {position: absolute; color: #fff; width: 50%; height: inherit; left: 0; padding-right: 100px;} .team-wrapp.revers .block-left {left: auto; right: 0px; padding-left: 100px;} .team-wrapp .block-right {position: absolute; width: 50%; right: 0px; min-height: 600px; margin-top: -20px;} .team-wrapp.revers .block-right {right: auto; left: 0px;} .team-wrapp .block-right .bg {box-shadow: 3px 3px 5px rgba(0,0,0,0.2); height: 579px; left: -4px;} .team-slider .block-left .text h2 {padding-bottom: 20px; font-weight: 800;} .team-slider .block-left .text h6 {text-transform: uppercase; padding-bottom: 20px;} .team-slider .block-left .text p {color: rgba(255,255,255,0.4); padding-bottom: 25px;} .team-slider .block-left .folow {padding-bottom: 40px;} .folow {position: relative; width: 100%; margin-left: -15px;} .folow a {position: relative; display: inline-block; width: 35px; height: 35px; border-radius: 50%; line-height: 35px; text-align: center; color: rgba(255,255,255,0.4); font-size: 18px;} .skill-block {position: relative; float: left; width: 100%; height: 20px; margin-bottom: 70px;} .skill-block h6 {position: relative; padding: 10px 30px 12px 0px; text-transform: uppercase; background: #fff; z-index: 3; display: inline-block;} .skill-block .skill-line {height: 20px; background: #f7f7f7; position: relative; margin-top: 3px; width: 100%; border-radius: 5px;} .skill-block .skill-line div {position: absolute; width: 0%; height:20px; border-radius: 5px; transition:all 2s ease-in-out 0.3s;-webkit-transition:all 2s ease-in-out 0.3s;-moz-transition:all 2s ease-in-out 0.3s;-o-transition:all 2s ease-in-out 0.3s;-ms-transition:all 2s ease-in-out 0.3s;} .skill-block h5 {font-size: 14px;text-align: right; position: absolute;right: 0px;top: -36px; color: #222;font-weight: 400; z-index: 2;} .customer-slider {padding-bottom: 65px;} .cust-block {position: relative; padding: 0px 15px;} .cust-block .image {position: relative; width: 100%; border-radius: 5px; overflow: hidden; display: block;} .cust-block .text {position: relative; width: 100%; color: #fff; border-radius: 5px; padding: 20px 40px;} .cust-block .text:before {width: 0;height: 0;border-style: solid; content: ''; position: absolute; left: 40px;transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-o-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;} .cust-block .text i {font-style: italic; color: rgba(255,255,255,0.4); padding-bottom: 25px; display: block;} .cust-block .text span {font-size: 13px; font-weight: 800; text-transform: capitalize;} .cust-bottom .image {margin-bottom: 10px;} .cust-bottom .text:before {top: -4px; border-width: 0 4px 4px 4px;} .cust-top .image {margin-top: 10px;} .cust-top .text:before {bottom: -4px; border-width: 4px 4px 0 4px;} .logos {padding: 75px 0px 85px;} .logotype {position: relative; width: 100%; text-align: center;} .client-logo {transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-o-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;} .logotype .hover {position: absolute; top: 0px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); opacity: 0; transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-o-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;} .logotype:hover .client-logo {opacity: 0;} .logotype:hover .hover {opacity: 1;} .news-slider {padding-bottom: 65px;} .news-slider .swiper-slide {padding: 10px 15px;} .news-slider .point-style-1 {position: static; width: auto;} .news-slider .point-style-1 .pagination {text-align: center; bottom: 0px;} .news-block {position: relative; background: #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-o-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;} .news-block .text {padding: 35px 30px 40px;} .news-block .text h6 {padding-bottom: 10px;} .news-block .text span {font-size: 11px; display: block; padding-bottom: 15px; text-transform: uppercase;} .news-block .text p {padding-bottom: 30px;} .news-block:hover {box-shadow: 10px 10px 15px rgba(0,0,0,0.4);} .price-block {position: relative; width: 100%; margin-top: 40px; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff; text-align: center; padding: 65px 15px 50px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .price-block .choose-icon {top: -40px; left: 50%; margin-left: -40px;} .price-block h6 {padding-bottom: 15px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .price-block ul {padding-bottom: 35px;} .price-block ul li {font-size: 11px; line-height: 40px; color: #b7b7b7; text-transform: uppercase; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .price {display: inline-block; border-bottom: 3px solid transparent; margin-bottom: 30px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .price span {font-size: 40px; font-weight: 800; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .price sup {font-size: 16px; color: #b7b7b7; top: -1em; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .price-block:hover {box-shadow: 10px 10px 15px rgba(0,0,0,0.4);} .price-block:hover .price span {color: #fff;} .price-block:hover h6 {color: #fff;} .price-block:hover .price sup {color: rgba(255,255,255,0.4);} .price-block:hover ul li {color: rgba(255,255,255,0.4);} .price-block:hover .push-1 {background: #fff; color: #222;} .price-block:hover .price {border-color: #fff;} .contact-block {position: relative; width: 100%; text-align: center;} .contact-block .choose-icon {display: flex; position: relative; float: none; align-items: center; justify-content: center; font-size: 35px; color: #fff; margin: 0 auto; margin-bottom: 15px;} .contact-block h6 {padding-bottom: 10px;} .contact-block a {color: #b7b7b7; font-size: 14px; font-weight: 600;} .contact-block span {color: #b7b7b7; font-size: 14px; font-weight: 600; display: inline-block;} .contact-form {padding-top: 100px;} .contact-form input, .contact-form textarea {position: relative; width: 100%; border-bottom: 1px solid #eee; font-size: 14px; text-transform: capitalize; display: inline-block;} .contact-form input {margin-bottom: 25px; padding: 0px 0px 30px;} .contact-form input:focus {border-bottom: 1px solid #222; outline: none;} .contact-form textarea {margin-bottom: 50px; height: 170px;} .contact-form textarea:focus {border-bottom: 1px solid #222;} .contact-form input[type="submit"] {width: auto; border-radius: 5px; text-transform: uppercase; color: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.1); padding: 15px 20px;} .map-canvas {position: relative; width: 100%; height: 200px;} .footer {position: relative; width: 100%; padding: 70px 0px 60px; display: inline-block;} .footer .folow {float: right; width: auto; margin: 0px 110px 0px 0px;} .footer .folow a {color: #b7b7b7;} .copyright {position: relative; float: left; padding-right: 110px;} .copyright a {margin-bottom: 10px; display: block;} .copyright span {font-size: 11px; line-height: 14px; text-transform: uppercase; color: #b7b7b7; display: block;} .up-button {position: absolute; right: 0px; top: 50%; margin-top: -33px; width: 66px; height: 66px; color: #fff; text-align: center; border-radius: 50%;} .up-button span {line-height: 59px; font-size: 30px;} .up-button:hover {color: #fff;} /*-------------------------------------------------------------------------------------------------------------------------------*/ /* 03 - HOMEPAGE 2 */ /*-------------------------------------------------------------------------------------------------------------------------------*/ .top-menu nav ul {position: relative; float: right; display: flex; align-items: center;} .top-menu nav ul li {position: relative; font-size: 13px; margin: 0px 15px; color: #fff;} .top-menu nav ul li a {padding-bottom: 3px; overflow: hidden; position: relative; display: inline-block; font-weight: 200;} .top-menu nav ul li a:before {content: ''; position: absolute; left: -100%; bottom: 0px; width: 100%; height: 1px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .top-menu nav ul li a:hover:before {left: 0px;} .top-menu nav ul li a:hover {color: #fff;} .top-menu nav ul li a.active:before {left: 0;} .top-menu nav ul li a.active {color: #fff;} .top-menu nav ul li a.btnTuotion {background-color: #111;color: #fff;border-radius: 5px;padding: 6px 10px;} .top-menu nav ul li a.btnTuotion::before {display: none !important;} .top-menu .nav-menu-icon {display: none;} @media (max-width: 992px) { .top-menu nav ul {flex-direction: column;width: 100%;} .top-menu nav ul li {width: 100%;} .top-menu nav ul li a.btnTuotion {position: fixed; right: 10px; bottom: 10px;background-color: #fff;color: #000; font-weight: 500;} } .border-title {text-align: center; padding: 80px 40px;} .border-title h3 {font-size: 24px; padding-bottom: 23px;} .border-title h1 {text-transform: uppercase; padding-bottom: 30px; font-size: 80px; line-height: 70px;} .border-title p {font-size: 14px; line-height: 24px; text-transform: uppercase; padding-bottom: 15px;} .video-wrapper {position: relative; width: 100%; height: 100vmin; min-height: 650px;} video.bgvid {position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;background-size: cover; overflow: hidden;} iframe.bgvid {position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;} button.mfp-close {background: none;} button.mfp-arrow {background: #fff; opacity: 1;} .mfp-arrow-right, .mfp-arrow-left {width: 70px; height: 70px; right: 0px; top: 50%; margin: -35px 0px 0px 0px; background: #fff;} .mfp-arrow-right:before, .mfp-arrow-right .mfp-b, .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {display: none;} .mfp-arrow-right:after {border: 0px none!important; content: '\f178'; font-size: 18px; line-height: 70px; color: #222; font-family: FontAwesome; margin: 0px; padding: 0px; left: auto; top: auto; text-align: center; position: relative; width: auto; height: auto;} .mfp-arrow-left:after {border: 0px none!important; content: '\f177'; font-size: 18px; line-height: 70px; color: #222; font-family: FontAwesome; margin: 0px; padding: 0px; left: auto; top: auto; text-align: center; position: relative; width: auto; height: auto;} .mfp-close {position: fixed; top: 0px; left: 0px; font-size: 55px; opacity: 1;} .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor: pointer;} .mfp-counter {display: none;} .mfp-arrow:active { margin-top: -35px;} button.mfp-arrow:hover {background: rgba(255,255,255,0.5);} @media (min-width: 1200px) { .top-menu nav ul li a { font-size: 14px; } } @media (max-width: 1200px) { .left-side .block-40 {padding: 0px 30px;} .right-side .block-40 {padding: 0px 30px;} .right-side .block-40 .text {text-align: right;} .swiper-arrow-right {right: 15px;} .swiper-arrow-left {left: 15px;} .team-wrapp .block-left {padding-right: 50px;} .team-wrapp.revers .block-left {padding-left: 50px;} } @media (max-width: 992px) { .top-baner {height: 600px;} header{height: 60px;} header .navigation {margin-top: 20px;} header .nav-menu-icon {top: -4px;} .left-menu nav ul {padding: 70px 0px 20px;} .left-menu nav ul li {margin-bottom: 25px;} .block-about {padding-bottom: 30px;} .block-about img {margin-bottom: 15px;} .section {padding: 65px 0px 30px;} .second-title {padding-bottom: 30px;} .about-section .text-p {padding: 20px 0px 30px;} .info-block {padding-bottom: 30px;} .fillter-wrap{padding-bottom: 30px;} .load-more {padding-bottom: 30px;} .item {width: 47%;} .item:hover .item-layer {left: 15px; top: 15px; bottom: 15px; right: 15px;} .choose .right-block .valn {padding-left: 30px;} .choose-block {padding-right: 15px;} .choose .right-block .title p {padding-bottom: 30px;} .how-block {margin-bottom: 30px;} .customer-slider {padding-bottom: 95px;} .news-slider {padding-bottom: 95px;} .news-slider .point-style-1 .pagination {bottom: 30px;} .customer-slider .point-style-2 .pagination {bottom: 30px;} .logotype {padding-bottom: 30px;} .price-block {margin-bottom: 30px;} .contact-block {padding-bottom: 30px;} .contact-form {padding-top: 60px;} .contact-form input[type="submit"] {margin-bottom: 30px;} .footer .folow {float: left; margin: 20px 0px 0px 0px; width: 100%;} .footer {padding: 40px 0px 30px;} .top-menu nav {position: fixed; text-align: center; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.95); overflow-y: auto; transform: translateX(100%); -webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%); -webkit-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); -moz-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); -o-transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095); transition: all 350ms cubic-bezier(0.53, -0.005, 0.75, 0.095);} .top-menu nav.slide-menu {transform: translateX(0%); -webkit-transform: translateX(0%);-moz-transform: translateX(0%);-ms-transform: translateX(0%);} .top-menu .nav-menu-icon {display: block;} .top-menu nav ul {padding: 80px 0px 40px;} .top-menu nav ul li {width: 100%; font-size: 16px; margin: 10px 0px;} } @media (max-width: 768px) { .block-60 .bg-bg {width: 100%;} .left-side .block-40 {width: 100%; left: 0px;} .right-side .block-40 {width: 100%; right: 0px;} .layer-white {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(255,255,255,0.7);} .service-block .text-p {color: #444;} .choose .left-block {width: 100%;} .choose .left-block .bg {width: 100%;} .choose .right-block {width: 100%;} .choose .right-block .title p {color: #444;} .choose-txt p {color: #444;} .swiper-arrow-right, .swiper-arrow-left {display: none;} .team-wrapp .block-left {padding: 0px 30px;} .team-wrapp.revers .block-left {padding: 0px 30px;} .contact-form {padding-top: 20px;} .fillter-wrap .but {margin: 0px 5px 5px;} } @media (max-width: 660px) { .choose .block-50 {width: 100%; padding-bottom: 35px;} .choose-txt {margin-left: 100px;} .choose {padding: 65px 0px; min-height: 1100px;} .choose-block {padding-bottom: 35px;} .choose-txt h6 {padding-bottom: 5px;} .item {width: 100%; margin: 0px 0px 15px;} .team-wrapp .block-right {width: 100%; min-height: 300px; margin-top: 0px; position: relative;} .team-wrapp .block-left {width: 100%; position: relative; top: auto; transform: translateY(0); -webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0); padding: 30px 0px;} .team-wrapp.revers .block-left {padding: 30px 0px;} .team-slider .block-left .folow {padding-bottom: 20px;} .team-slider .block-left .text p {padding-bottom: 15px;} .team-wrapp {min-height: 100%;} .team-wrapp .block-right {margin-bottom: 30px;} .map-canvas {height: 350px;} .border-title {padding: 40px 20px;} } @media (max-width: 480px) { .main-title h1 {font-size: 60px; line-height: 68px; padding-bottom: 20px;} .main-title p {font-size: 13px; line-height: 24px; padding-bottom: 30px;} .block-bg .bg-bg {width: 100%;} .info-block span {font-size: 36px; padding-bottom: 10px;} .footer .folow {margin: 30px 0px 0px;} .border-title {padding: 15px;} .main-title h1 {font-size: 40px; line-height: 50px;} } .swiper-anime .swiper-slide:nth-child(2n+1) .block-bg .bg-bg {opacity: 0; transform: scale(1.2);} .swiper-anime .swiper-slide:nth-child(2n) .block-bg .bg-bg {opacity: 0; transform: scale(1.2);} .swiper-anime .swiper-slide.active .block-bg .bg-bg {transform: scale(1); opacity: 1;} .swiper-anime .main-title {transform: scale(0.5); -webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5); opacity: 0; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;} .swiper-anime .swiper-slide.active .main-title {transform: scale(1); -webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1); opacity: 1;} /*dft*/ .dft { word-break: keep-all; } h1.dft { font-size: 45px; color: #000; line-height: 1em; text-transform: none; } h1.dft.bigsize { font-size: 55px; } h2.dft { font-size: 35px; color: #000; line-height: 1.2em; text-transform: none; } h3.dft { font-size: 28px; color: #000; line-height: 1.4em; text-transform: none; } h4.dft { font-size: 24px; color: #000; line-height: 1.4em; text-transform: none; } h5.dft { font-size: 20px; color: #000; line-height: 1.6em; text-transform: none; } h6.dft { font-size: 14px; color: #000; line-height: 1.4em; text-transform: none; } p.dft { font-size: 17px; line-height: 1.6em; color: #000; } @media (max-width:1200px) and (min-width:768px){ h1.dft, h1.dft.bigsize { font-size: 35px; } h2.dft { font-size: 25px; } h3.dft { font-size: 24px; } h4.dft { font-size: 21px; } h5.dft { font-size: 18px; } h6.dft { font-size: 14px; } p.dft { font-size: 15px; } } @media (max-width:768px){ h1.dft, h1.dft.bigsize { font-size: 27px; } h2.dft { font-size: 22px; } h3.dft { font-size: 20px; } h4.dft { font-size: 18px; } h5.dft { font-size: 16px; } h6.dft { font-size: 13px; } p.dft { font-size: 14px; } } /* word-keep */ .word-keep { word-break: keep-all; } .word-break { word-break: break-all; } /* font-weight */ .font-Thin { font-weight: 100 !important; } .font-ExtraLight { font-weight: 200 !important; } .font-Light { font-weight: 300 !important; } .font-Regular { font-weight: 400 !important; } .font-Medium { font-weight: 500 !important; } .font-Bold { font-weight: 600 !important; } .font-ExtraBold { font-weight: 700 !important; } .font-Heavy { font-weight: 800 !important; } .font-Black { font-weight: 900 !important; } /* color */ .text-light { color: #fff !important; } .text-dark { color: #000 !important; } .c_bei { color: #99977f !important; } .c_gd { color: #b6a679 !important; } .c_org { color: #ff9739 !important; } .c_lorg { color: #f4670b !important; } .c_yl { color: #ffdf35 !important; } .c_rd { color: #ef3f41 !important; } .c_pk { color: #c54d6b !important; } .c_pp { color: #37018d !important; } .c_bl { color: #032938 !important; } .c_lbl { color: #99bae0 !important; } .c_navy { color: #14273f !important; } .c_sky { color: #4f90ff !important; } .c_lsky { color: #36d6cc !important; } .c_lgray { color: #aaa !important; } .c_gray { color: #666 !important; } .c_bw { color: #967440 !important; } .c_pt { color: #f31d1d !important; } /*conbox*/ .conbox { margin-top: 60px; } .conbox.conbox_lg { margin-top: 100px; } .conbox.conbox_xlg { margin-top: 150px; } .conbox.conbox_xxlg { margin-top: 200px; } .conbox.conbox_mini { margin-top: 40px; } .conbox.conbox_xs { margin-top: 30px; } .conbox.conbox_xxs { margin-top: 20px; } .conbox.conbox_xxxs { margin-top: 10px; } @media (max-width:992px){ .conbox { margin-top: 30px; } .conbox.conbox_lg { margin-top: 50px; } .conbox.conbox_xlg { margin-top: 80px; } .conbox.conbox_xxlg { margin-top: 100px; } .conbox.conbox_mini { margin-top: 20px; } .conbox.conbox_xs { margin-top: 15px; } .conbox.conbox_xxs { margin-top: 8px; } .conbox.conbox_xxxs { margin-top: 4px; } } /*sec_dvd*/ .sec_dvd { padding: 130px 0; } .sec_dvd.sec_dvd_lg { padding: 150px 0; } .sec_dvd.sec_dvd_xlg { padding: 200px 0; } .sec_dvd.sec_dvd_mini { padding: 50px 0; } .sec_dvd.sec_dvd_xs { padding: 80px 0; } .sec_dvd.sec_dvd_xxs { padding: 60px 0; } .sec_dvd.sec_dvd_xxxs { padding:40px 0; } @media (max-width:992px){ .sec_dvd { padding: 50px 0; } .sec_dvd.sec_dvd_lg { padding: 70px 0; } .sec_dvd.sec_dvd_xlg { padding: 100px 0; } .sec_dvd.sec_dvd_mini { padding: 30px 0; } .sec_dvd.sec_dvd_xs { padding: 40px 0; } .sec_dvd.sec_dvd_xxs { padding: 30px 0; } .sec_dvd.sec_dvd_xxxs { padding: 20px 0; } } /* second-title */ .second-title h2 { line-height: 1em; } .second-title p { line-height: 1.2em; } /* home */ #home .main-title h1 { line-height: 1em; text-transform: none; padding-bottom: 0; margin-bottom: 0; } #home .btnCall { display: inline-block; font-size: 18px; line-height: 1em; padding: 17px 24px; border-radius: 4px; color: #fff; font-weight: 600; text-decoration: none; background-color: #c54d6b; } /* about */ #about .btTxt { background-color: #c54d6b; padding: 40px 0; border-radius: 20px; } #about .btTxt h5, #about .btTxt p { color: #fff !important; } #about .btTxt p i { font-style: normal; font-size: 1.4em; } /* time-line */ #time-line { background: url(../img/timeline_bg.jpg) center center no-repeat; } @media (min-width:768px){ #time-line { background-attachment: fixed; background-size: cover; } } @media (max-width:768px){ #time-line { background-size: cover; } } .listPink h6 { display: inline-block; padding: 10px 15px; border-radius: 4px; line-height: 1em; background-color: #fdf5f7; color: #c54d6b; margin: 3px 1px; margin-top: 5px; } /* listShape */ .listShape p { position: relative; padding-left: 10px; font-weight: 500; margin-top: 10px; line-height: 1.2em; font-size: 18px; } .listShape p:after { content: ""; position: absolute; top: 6px; left: 0; width: 3px; height: 3px; background-color: #000; border-radius: 50%; } @media (max-width:768px){ .listShape p { font-size: 14px; } } /* service */ #service .num { border-bottom: 1px solid #333; padding-bottom: 15px; line-height: 1em; font-weight: 400; } #service p span { display: inline-block; padding: 10px 15px; border-radius: 4px; background-color: #fdf5f7; color: #c54d6b; line-height: 1.1em; font-size: 16px; margin: 3px 1px; font-weight: 600; } @media (max-width:768px){ #service p span { font-size: 14px; } } /* portfolio */ #portfolio .bg-main { background: url(../img/portfolio_bg.jpg) center center no-repeat; } @media (min-width:768px){ #portfolio .bg-main { background-attachment: fixed; background-size: cover; } } @media (max-width:768px){ #portfolio .bg-main { background-size: cover; } } /* why */ #why .whyItem { display: flex; align-items: center; } #why .whyItem .icon { width: 100px; } #why .whyItem .icon span { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fdf5f7; color: #c54d6b; font-size: 30px; } #why .whyItem .txt { width: calc(100% - 100px); padding-right: 40px; } #why .whyItem .txt p { padding-left: 20px; position: relative; } #why .whyItem .txt p .fl { position: absolute; left: 0; } #why .whyItem .txt h6 { padding-left: 20px; position: relative; font-size: 16px; } #why .whyItem .txt h6 strong { display: block; margin-bottom: 5px; } #why .whyItem .txt h6 .fl { position: absolute; left: 0; } @media (min-width: 1200px) { .valn { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);top: 50%;position: absolute;width: 100%; } } @media (max-width: 1200px) { .choose .left-block { display: none; } .choose .right-block { position: relative; } #why .whyItem { align-items: top; } #why .whyItem .txt { width: calc(100% - 80px); padding-right: 30px; } #why .whyItem .icon { width: 80px; } #why .whyItem .icon span { width: 50px; height: 50px; font-size: 20px; } } @media (max-width:1200px) and (min-width:768px){ #why .whyItem .txt h6 { font-size: 15px; } } @media (max-width:768px){ #why .whyItem .txt h6 { font-size: 14px; } } /* kakao */ .kakao_box { position: relative; } .kakao_box:after { content: ""; position: absolute; left: 0; top: 10%; height: 80%; width: 100%; background-color: #c54d6b; } .kakao_wrp { position: relative; z-index: 3; } .kakao_wrp .txt h5 span { display: inline-block; vertical-align: middle; } .kakao_wrp .img a { text-decoration: none; display: block; } @media (min-width: 768px) { .kakao_wrp { display: flex; align-items: center; } .kakao_wrp > div { width: 50%; } } @media (max-width: 768px) { .kakao_box:after { top: 0%; } .kakao_wrp .txt { padding: 30px 0 } } @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;400;600&display=swap'); /* testimonials */ #testimonials .conTxt { padding: 50px 30px; border: 1px dashed #c54d6b; border-radius: 10px; background-color: #ffe4eb; } #testimonials .conTxt h5 { font-family: 'Noto Serif KR'; line-height: 1.2em; } #testimonials .hasImg { display: flex; align-items: center; justify-content: space-between; } #testimonials .hasImg .tt { width: calc(100% - 150px); } #testimonials .text h4 { color: #ffc1d0 !important; line-height: 1.1em; } #testimonials .hasImg .ii { width: 150px; text-align: right; } #testimonials .hasImg .ii img { border-radius: 50%; } @media (min-width:768px){ #testimonials .conTxt { min-height: 430px; } } @media (max-width:768px){ #testimonials .conTxt { min-height: 380px; } } /* news */ #news ul li .img { line-height: 0px; margin: 0px; } #news ul li .img img { max-width: 100%; width: 100%; } #news ul li .txt { background-color: #fff; padding: 40px 25px; } #news ul li .txt .listPink h6 { line-height: 1.1em; font-size: 16px; } @media (min-width:768px){ #news ul li .txt { height: 460px; } } @media (max-width:768px){ #news ul li { margin-bottom: 15px; } } /* contact */ #contact .text a, #contact .text span { font-weight: 300; font-size: 15px; color: #666; } /* form */ .form { max-width: 1000px; margin: 0 auto; padding: 40px 0; border-top: 1px solid #333; } .form .top h5, .form .top h6 { display: inline-block; vertical-align: middle; margin-right: 10px; } .form ul li { position: relative; padding-left: 130px; margin: 8px 0; } .form ul li label.radioLabel { display: inline-block; vertical-align: middle; height: auto; margin: 11px 0; margin-right: 10px; } .form ul li label:not(.radioLabel) { position: absolute; left: 15px; top: 0; line-height: 50px; font-weight: 600; } .form ul li input[type="radio"]{ -webkit-appearance: radio; } .form ul li label, .form ul li select.form-control, .form ul li input.form-control { display: block; height: 50px; color: #666; font-size: 15px; border-radius: 4px; box-shadow: 0 0 0; font-weight: 300; } .form ul li .form-control { border-radius: 0px; border: 1px solid #aaa; background-color: transparent; margin: 0px; box-shadow: 0 0 0; background-color: #fff; } .form ul li .form-control:focus { border-color: #033e7f; } .form ul li .form-control.short { max-width: 50%; display: inline-block; vertical-align: middle; } .form ul li .form-control + .name { display: inline-block; vertical-align: middle; margin-left: 5px; } .form .smt { line-height: 65px; font-size: 18px; color: #fff; background-color: #c54d6b; width: 100%; display: block; border: 0px; font-weight: 700; } @media (max-width:768px){ .form .top h3, .form .top p { margin-right: 5px; } .form ul li { padding-left: 110px; } .form ul li label { line-height: 45px; } .form ul li label, .form ul li select.form-control, .form ul li input.form-control { height: 45px; font-size: 16px; } .form .smt { line-height: 55px; font-size: 15px; } } /* checkboxCustom */ .agree { padding: 15px; border: 1px solid rgba(0,0,0,0.2); } .agree .readMe { display: inline-block; vertical-align: middle; background-color: #555; color: #fff; margin-left: 15px; line-height: 1em; padding: 5px 10px; font-weight: 600; cursor: pointer; } .checkboxCustom { position: relative; padding: 0 0 0 40px; margin-top: 10px; display: inline-block; vertical-align: middle; } .checkboxCustom:first-child, .checkboxCustom:first-of-type { margin-top: 0; } .checkboxCustom.makeInline { display: inline-block; vertical-align: middle; } .checkboxCustom input[type="radio"], .checkboxCustom input[type="checkbox"] { opacity: 0; position: absolute; top: 50%; left: 3px; margin: -11px 0 0 -3px; z-index: 2; cursor: pointer; width: 30px; height: 30px; } .checkboxCustom input[type="radio"]:checked + label:after, .checkboxCustom input[type="checkbox"]:checked + label:after { content: ''; position: absolute; top: 0px; left: 0; width: 30px; height: 30px; display: inline-block; border-radius: 50%; border: 2px solid #033e7f; background: url(../img/chk_w.png) center center no-repeat; background-color: #033e7f; } .checkboxCustom input[type="radio"]:disabled, .checkboxCustom input[type="checkbox"]:disabled { cursor: not-allowed; } .checkboxCustom input[type="radio"]:disabled:checked + label:after, .checkboxCustom input[type="checkbox"]:disabled:checked + label:after { color: #999; } .checkboxCustom input[type="radio"]:disabled + label, .checkboxCustom input[type="checkbox"]:disabled + label { cursor: not-allowed; } .checkboxCustom input[type="radio"]:disabled + label:before, .checkboxCustom input[type="checkbox"]:disabled + label:before { background: url(../img/chk_w.png) center center no-repeat; background-color: #ddd; border-color: #ddd; } .checkboxCustom label { cursor: pointer; margin-bottom: 0; text-align: left; line-height: 1.2; } .checkboxCustom label:before { content: ''; position: absolute; top: 0px; left: 0; width: 30px; height: 30px; display: inline-block; border-radius: 50%; border: 2px solid #ddd; background: transparent; background: url(../img/chk.png) center center no-repeat; } .checkboxCustom label + label.error { display: block; } @media (max-width:640px){ .checkboxCustom { padding-left: 33px; } .checkboxCustom input[type="radio"]:checked + label:after, .checkboxCustom input[type="checkbox"]:checked + label:after { width: 24px; height: 24px; background-size: 24px !important; } .checkboxCustom label:before { width: 24px; height: 24px; } .agree .readMe { margin-left: 5px; padding: 5px 5px; } } /* modal */ .modal p span { font-size: 0.7em; } /* contact */ #contact { background-color: #f7f7f7; } @media (max-width: 1200px) { .hid-max { display: none; } } /* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;/*width:970px*/;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops_con {width: 100% !important; height: auto !important; max-width: 600px } .hd_pops_con img {max-width: 100%; } .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right} .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff} .lightbox-open { position: relative; overflow: hidden !important; }