/*메인배너*/ .main-carousel{height:100vh; padding:0;} .main-carousel .li{height:100vh; background-size:cover; background-position:center center; cursor: pointer; display:flex;} .main-carousel .li .copy_area{max-width:1240px;position:relative;margin:0 auto; color:#fff; padding:200px 20px 0 20px;} .main-carousel .li .copy_area h2{font-size:65px;font-weight:100; line-height:1.3; text-align:center; letter-spacing:-1px} .main-carousel .li .copy_area h2:after { content: " ";display: block; margin:30px auto 0 auto; width:40px; height: 3px; background-color:#fff; clear: both;} .main-carousel .li .copy_area h3{font-size:25px;font-weight:100;text-align:center;margin:25px 0 40px 0; line-height:1.4; letter-spacing:3px} .main-carousel .li .copy_area h4{font-size:14px;font-weight:600;text-align:center;border:1px solid #fff;display:inline-block;} .main-carousel .li .copy_area h4 a{color:#fff;padding:10px 40px;display:block;} .main-carousel .li .copy_area_movie{ width:100%; position:relative} .main-carousel .li .copy_area_movie h2{color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:40px; line-height:2em; text-align:left; z-index:1;} .main-carousel .li .copy_area_movie h2:after { content: " ";display: block; margin:50px 0 0; width:40px; height: 3px; background-color:#fff; clear: both;} .main-carousel .li .copy_area_movie h3{color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:30px; line-height:2em; text-align:left; margin:15px 0 40px 0; z-index:1;} .main-carousel .owl-dots{position:absolute;width:100%; text-align:center; margin:0 auto; bottom:100px;} .main-carousel .owl-dots .owl-dot{background:rgba(255, 255, 255, 0.5);width:30px;height:5px;display:inline-block;margin-left:10px} .main-carousel .owl-dots .owl-dot.active{background:rgba(255, 255, 255, 1)} .main-carousel .owl-nav { position: absolute; width: 100%; bottom: 50%;} .main-carousel .owl-nav .owl-prev{width:40px;height:30px;position:absolute;left:50px; font-size:14px; color:#fff; border-top: 1px solid #fff; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} .main-carousel .owl-nav .owl-next{width:40px;height:30px;position:absolute;right:50px; font-size:14px; color:#fff; border-top: 1px solid #fff; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} br.main_br{display:none;} .main-carousel .li .copy_area .imgbox{display: block; float: left; width: 33%;} .main-carousel .li .copy_area .imgbox img{width: 100%; height: auto; transform: translate(0%, -15%);} /*메인배너*/ /*회사소개*/ .tl_colum_box_wrap {width:100%; padding:100px 0 50px 0px; color:#6e6e6e; font-size:15px; position:relative; clear:both} .tl_colum_box_wrap .inner { padding:20px} .tl_colum_box_wrap h2{text-align:center;display:block;padding:50px 0 50px 0;font-weight:600;color:#000;font-size:35px;letter-spacing:5px; position:relative} .tl_colum_box_wrap h3{text-align:center;display:block;padding:30px 0 50px 0;font-weight:600;color:#000;font-size:25px; position:relative} .tl_colum_box_wrap h2:before{display:block;position:absolute;top:-20px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .tl_colum_box_wrap h2 span{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900; color:#173268; opacity:.20} .tl_colum_box_wrap h4{font-size:20px; position:relative} .tl_colum_box_wrap .left{float:left;width:48%; line-height:1.95em;text-align:justify} .tl_colum_box_wrap .right{float:right;width:48%; line-height:1.95em;text-align:justify} .tl_colum_box_wrap .left p{font-size: 15px;} .tl_colum_box_wrap .right p{font-size: 15px;} /*회사소개*/ /*로고*/ .tl_clients_slider_box_wrap { width: 100%; padding: 50px 0 80px 0;color: #6e6e6e; position: relative; display: block; clear: both;} .tl_clients_slider_box_wrap h2 { font-size:30px; padding: 0 0 10px 20px; margin-bottom:20px; display:block; border-bottom:1px solid #ddd} .tl_clients_slider_box_wrap .clients_item {cursor: pointer;} .tl_clients_slider_box_wrap .clients_item img{ margin: 0 auto; filter: opacity(30%) grayscale(100%); -webkit-filter: opacity(50%) grayscale(100%); -ms-filter: opacity(30%), grayscale(100%); -moz-filter: opacity(30%) grayscale(100%); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .tl_clients_slider_box_wrap .clients_item:hover img{-webkit-filter: opacity(100%) grayscale(0%);filter: opacity(100%) grayscale(0%);} .tl_clients_slider_box_wrap .owl-carousel .owl-item img{ width:inherit} .tl_clients_slider_box_wrap .owl-carousel .owl-nav.disabled {display:block} .tl_clients_slider_box_wrap .owl-carousel .owl-nav {position:absolute; bottom:0; right:60px; display:inline-block; text-align:center; display:block} .tl_clients_slider_box_wrap .owl-carousel .owl-nav .owl-prev {width:40px;height:39px; line-height:43px; top:1px; left:-1px; background-color:#fff; border:1px solid #ddd; position:absolute; color:#000} .tl_clients_slider_box_wrap .owl-carousel .owl-nav .owl-next {width:40px;height:40px; line-height:43px; right:0; background-color:#ff4200; position:absolute; color:#fff} /*로고*/ /*티로그는 다릅니다.*/ .tl_main_about_wrap {padding:120px 0px; text-align:center; overflow:hidden; background:url(../img/main_about_wrap_bg.jpg) center top no-repeat; background-size:cover; position:relative; background-attachment: fixed;} .tl_main_about_wrap h2 {font-size:30px; color:#fff; line-height:30px; font-weight:600;} .tl_main_about_wrap h2 span{display:block; font-size:16px; color:#fff; line-height:23px; padding:20px; word-break:keep-all} .tl_main_about_wrap ul {display:table; table-layout:fixed; width:100%; vertical-align:middle; margin-top:80px;} .tl_main_about_wrap ul li{display:block; width:25%; float:left} .tl_main_about_wrap ul li .t1{color:#fff; font-size:20px;} .tl_main_about_wrap ul li .t2{color:#fff; font-size:68px; font-weight:100; padding:40px 0px;} .tl_main_about_wrap ul li .t3{color:#fff; font-size:17px;} /*티로그는 다릅니다.*/ /* 티로그 서비스 */ .tl_business_wrap { padding:120px 0 0; width:100%; clear:both} .tl_business_wrap h2 {text-align:center;display:block;padding:70px 0 30px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; position:relative} .tl_business_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .tl_business_wrap h2 span{display:block;position:absolute;top:68%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:#173268;opacity:.20} .tl_business_wrap .sub_title { text-align:center; line-height:1.6; padding-bottom:60px; font-size:17px; color:#6e6e6e} .tl_business_wrap ul {overflow:hidden; padding-left:1px; padding-bottom:1px} .tl_business_wrap ul li{float:left; width:33.33333333333%; margin-left:-1px; margin-bottom:-1px} .tl_business_wrap ul li .box {background:#12203f; border:1px #fff solid; padding:20px 30px; min-height:230px; position:relative} .tl_business_wrap ul li .box .txt { top:50px; border-top:1px #fff solid; padding-top:5px; letter-spacing:1px; font-size:22px; font-weight:bold; color:#fff; position:absolute} .tl_business_wrap ul li .box .icon { right:30px; top:30px; position:absolute} .tl_business_wrap ul li .box .icon img { width:80%; margin-top:20px; opacity: 0.9} .tl_business_wrap ul li .box dl {margin-top:80px; text-align:left} .tl_business_wrap ul li .box dl dt { font-weight: bold; font-size:20px; color:#fff; margin-bottom:5px } .tl_business_wrap ul li .box dl dd { font-size:14px; color:#fff; word-break:keep-all; line-height:1.6} .tl_business_wrap ul li .area_box {background:#fff; border:1px #d2d2d2 solid; padding:20px 30px; min-height:230px; position:relative} .tl_business_wrap ul li .area_box .area_txt { top:50px; border-top:1px #11234a solid; padding-top:5px; letter-spacing:1px; font-size:22px; font-weight:bold; color:#11234a; position:absolute} .tl_business_wrap ul li .area_box .area_icon { right:40px; top:30px; position:absolute} .tl_business_wrap ul li .area_box .area_icon img { width:80%; margin-top:20px; opacity: 0.9} .tl_business_wrap ul li .area_box dl {margin-top:80px; text-align:left} .tl_business_wrap ul li .area_box dl dt { font-size:20px; color:#11234a; margin-bottom:8px } .tl_business_wrap ul li .area_box dl dd { font-size:14px; color:#888; word-break:keep-all; line-height:1.6} /* 티로그 서비스 */ /*프로덕트 갤러리*/ .product_gallery_wrap { padding:120px 0 0} .product_gallery_wrap h2 {text-align:center;display:block;padding:70px 0 30px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; position:relative} .product_gallery_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .product_gallery_wrap h2 span{display:block;position:absolute;top:68%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:red;opacity:.20} .product_gallery_wrap .sub_title { text-align:center; line-height:1.6; padding-bottom:60px; font-size:14px; color:#6e6e6e; word-break:keep-all} .product_gallery_wrap .product_slider { position:relative; } .product_gallery_wrap li {position:relative; float:left; width:100%} .product_gallery_wrap li .txt_wrap{position:absolute;top:0;left:0;width:100%;height:100%;display:block;box-sizing:border-box;background-color:#000;opacity:0.6;overflow:hidden;padding:40px;color:#fff;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out} .product_gallery_wrap li .txt_wrap .cell { text-align:center;width:100%;margin-left:50%; margin-top: 50%; transform: translate(-50%,-50%);} .product_gallery_wrap li .txt_wrap .cell h3 { font-size:24px; color:#fff; font-weight:bold; padding:0 20px 20px 0} .product_gallery_wrap li .txt_wrap .cell p { color:#fff; font-size:14px} .product_gallery_wrap li:hover .txt_wrap {opacity: 0;} .product_gallery_wrap .owl-nav { display:none} /*프로덕트 갤러리*/ /*티로그 그룹*/ .group_area_wrap { max-width:1280px; margin:0 auto; padding:120px 0 0; box-sizing:border-box} .group_area_wrap:nth-child(2n+2) { padding:0} .group_area_wrap h2 {text-align:center;display:block;padding:70px 0 30px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; position:relative} .group_area_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .group_area_wrap h2 span{display:block;position:absolute;top:68%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:#173268;opacity:.20} .group_area_wrap .sub_title {text-align:center; line-height:1.6; padding-bottom:60px; font-size:17px; color:#6e6e6e} .group_area_wrap .box {width:49%; margin-right:2%; display:block; float:left; } .group_area_wrap .box:last-child { margin:0} .group_area_wrap .box .photo { width:100%; height:220px; position:relative; overflow:hidden; cursor:pointer} .group_area_wrap .box .photo img { -webkit-transform: scale(1); transform: scale(1);transition: all 1s ease;-webkit-transition: all 1s ease;} .group_area_wrap .box .photo img:hover { -webkit-transform: scale(1.1); transform: scale(1.1);} .group_area_wrap .box .txt { width:100%; text-align:left; padding:10px; clear:both} .group_area_wrap .box .txt h3 { font-size:17px; padding-top:30px; text-align:center; letter-spacing:2px; font-weight:bold} .group_area_wrap .box .txt p {padding:20px; text-align:center; color:#6e6e6e; line-height:1.6; font-size: 15px; word-break:keep-all } /*티로그 그룹*/ /*갤러리*/ .gallery_area_wrap { width:100%; padding:120px 0 0} .gallery_area_wrap h2{text-align:center;display:block;padding:70px 0 50px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; position:relative} .gallery_area_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .gallery_area_wrap h2 span{display:block;position:absolute;top:56%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:#173268;opacity:.20} .gallery_area_wrap .sub_title {text-align:center; line-height:1.6; padding:60px 60px 60px 60px; font-size:17px; color:#6e6e6e} .gallery_area_wrap li {position:relative; width:20%; float:left; cursor:pointer} .gallery_area_wrap li .txt_wrap{position:absolute;top:0;left:0;width:100%;height:100%;display:block;box-sizing:border-box;background-color:#037bcf;opacity:0;overflow:hidden;padding:40px;color:#fff;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out} .gallery_area_wrap li .txt_wrap .cell { text-align:center;width:100%;margin-left:50%; margin-top: 50%; transform: translate(-50%,-50%);} .gallery_area_wrap li:hover .txt_wrap {opacity: 1;} .gallery_area_wrap li .txt_wrap .cell h3 { font-size:24px; color:#fff; font-weight:bold; padding-bottom:20px} .gallery_area_wrap li .txt_wrap .cell p { font-size:15px;color:#fff} /*갤러리*/ /*임직원*/ .tl_face_wrap { padding-top:120px} .tl_face_wrap h2 {text-align:center;display:block;padding:70px 0 30px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; position:relative} .tl_face_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .tl_face_wrap h2 span{display:block;position:absolute;top:68%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:#173268;opacity:.20} .tl_face_wrap .sub_title { text-align:center; line-height:1.6; padding-bottom:60px; font-size:17px; color:#6e6e6e} .tl_face_wrap .txt_wrap {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out} .tl_face_wrap .txt_wrap .photo { width:90%; margin:auto} .tl_face_wrap .txt_wrap h3 { font-size:25px; letter-spacing:5px; padding-top:50px; text-align:center} .tl_face_wrap .txt_wrap p { font-size:17px; color:#6e6e6e; text-align:center; padding:20px; word-break:break-all; line-height:1.6} .tl_face_wrap .photo:hover .txt_wrap {opacity: 0.7;} .tl_face_wrap .owl-carousel .owl-nav {position:absolute; bottom:375px; width:100%; display:inline-block; text-align:center; cursor:pointer; display:block} .tl_face_wrap .owl-carousel .owl-nav .owl-prev {width:40px;height:39px; line-height:43px; right:0; background-color:#fff; border:1px solid #ddd; position:absolute; color:#000} .tl_face_wrap .owl-carousel .owl-nav .owl-next {width:40px;height:40px; line-height:43px; leftt:0; background-color:#2032a4; position:absolute; color:#fff} /*임직원*/ /*동영상*/ .tl_movie_box_wrap { width:100%; margin-top:100px; min-height:480px; background-image:url(../img/movie_bg.jpg); background-repeat:no-repeat; background-position:top center; cursor:pointer; background-size:cover} .tl_movie_box_wrap:hover { background-color:#000; opacity:0.9} /*동영상*/ .tl_contact_box_wrap { width:100%; min-height:600px; padding:100px 0; } .tl_contact_box_wrap .inner { max-width:1200px; margin:0 auto; padding:0 20px 0} .tl_contact_box_wrap h2 {text-align:center;display:block;padding:70px 0 30px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; background-color:#fff; position:relative} .tl_contact_box_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .tl_contact_box_wrap h2 span{display:block;position:absolute;top:68%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:#173268;opacity:.20} .tl_contact_box_wrap .sub_title { text-align:center; line-height:1.6; padding-bottom:60px; font-size:17px; padding:0 20px 60px 20px; background-color:#fff; color:#6e6e6e; word-break:keep-all} .tl_contact_box_wrap .input_page #co_name { width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:left} .tl_contact_box_wrap .input_page #co_email { width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:right} .tl_contact_box_wrap .txtarea_page #co_message { margin-top:20px; width:100%; height:120px; font-size:15px; color:#6e6e6e; padding:10px 0 0 10px;} .tl_contact_box_wrap .send_page { text-align:center;} .tl_contact_box_wrap .send_page .send {margin:50px 0 0; max-width:142px; height:41px; line-height:41px; padding:0px 40px;background-color: #3949a3; font-size:15px; font-weight:bold; color:#fff; border:0; border-radius:20px} .tl_contact_box_wrap #x_message{position:absolute;width:300px;border-radius:10px;height:50px;text-align:center;line-height:50px;top:50px;left:50%;margin-left:-150px;background-color:#FDD;border:2px solid #C00;font-weight:700;color:#666;z-index:1000} .tl_contact_box_wrap #x_loading{position:absolute;display:none;width:200px;height:200px;top:50px;left:50%;margin-left:-100px;z-index:1;font-size:100px;line-height:200px} .tl_contact_box_wrap #x_message.x-msg1 {background-color: #FDD;} .tl_contact_box_wrap #x_message.x-msg2 {background-color: #9C6;border:2px solid #096} .send_page p {margin-top: 20px; margin-bottom: -20px; font-size: 17px;line-height: 1.6;} /*오시는 길*/ .tl_location_wrap { margin-top:100px; background-color:#444} .tl_location_wrap h2 {text-align:center;display:block;padding:70px 0 30px 0;font-weight:600;color:#000;font-size:25px;letter-spacing:5px; background-color:#fff; position:relative} .tl_location_wrap h2:before{display:block;position:absolute;top:0px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(calc(-50% - 4px));width:1px;height:45px;content:'';background:#173268} .tl_location_wrap h2 span{display:block;position:absolute;top:68%;left:50%;-webkit-transform:translate(-50%,-50px);-moz-transform:translate(-50%,-50px);-ms-transform:translate(-50%,-50px);-o-transform:translate(-50%,-50px);transform:translate(-50%,-50px);font-size:72px;font-weight:900;color:#173268;opacity:.20} .tl_location_wrap .sub_title { text-align:center; line-height:1.6; padding-bottom:60px; font-size:14px; padding:0 20px 60px 20px; background-color:#fff; color:#6e6e6e; word-break:keep-all} .tl_location_wrap .map_info{width:295px;height:214px;background:#037bcf;position:absolute;right:0;top:0px;padding: 30px 28px;font-size:16px;color:#f8969a;letter-spacing:0;} .tl_location_wrap .map_info span{display:block;font-size:20px;color:#fff; font-weight:bold;letter-spacing:-.25px;} .tl_location_wrap .map_info p { padding:2px 0 0; color:#f2f2f2; font-size: 15px; line-height:1.4; text-align:left; background-color:transparent} .tl_location_wrap .map_btn{position:absolute;left:30px;bottom:30px;} .tl_location_wrap .map_btn a{display:inline-block;width:150px; padding:10px 0; border:1px solid #f2f2f2;text-align:center; color:#f2f2f2; letter-spacing:-0.5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .tl_location_wrap .map_btn a:hover{color:#c2131a;background:#03cf5d; color:#fff; border:0; text-decoration:none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .tl_location_wrap .map_btn a:first-child{margin-right:5px;} /*오시는 길*/ /*SNS*/ .sns_wrap { width:100%; background-color:#282828; padding:50px 0; clear:both} .sns_wrap .text-center { text-align:center} .sns_wrap .margin-right-20 {margin-right: 20px; color:#777;} .sns_wrap .margin-right-20:hover { color:#fff; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease; transition: all 0.5s ease;} .sns_wrap i { background-color:#444; padding:5px; border-radius:50px} .sns_wrap .txt {top:-3px; left:10px; font-size:16px; font-weight:bold; position: relative} /*SNS*/ /*푸터*/ .footer { width:100%; background-color:#282828; padding:80px 0 20px 0; text-align:center} .footer ul {padding:0; margin:0} .footer ul li { width:31%; margin-right:2%; float:left} .footer ul li:last-child { margin:0} .footer h2 { font-size:18px; font-weight:bold; padding-bottom:30px; letter-spacing:1px; color:#fff} .footer p{ font-size:14px; color:#777; line-height:1.7; letter-spacing:1px} .footer .copylight { color:#777; display:block; padding:50px 0 20px 0; margin-top:50px; border-top:1px solid #444; line-height:1.6; clear:both} .footer .copylight .point { color:#F30} /*푸터*/ /* 푸터팝업*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;background:#076aa3;font-size:20px;color:#fff;} .tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;} .tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;} .f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;} .f_pop_wrap strong {color:#00a19a;font-weight:normal;} .f_pop_wrap p { color:#333; padding:40px 50px; line-height:1.6;} .mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/btn_close.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; } .mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; } button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } /* 푸터팝업*/ /*기본*/ header { width:100%; text-align:center; height:80px; position:fixed; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index:9999 } header .logo {float:left;line-height:56px} header .logo img { width:80%} header .menu {float:right; padding-right:20px} header b { display:inline-block; margin:20px; padding:6px 0; cursor:pointer; font-size:15px; color:#fff} header b:hover { color:#fff} .scrolled header {height:61px; background-color:#fff; border-bottom:1px solid rgba(0,0,0,0.3); background-color:#000} .scrolled header b { padding:0} #window1 { } #window2 { } #window3 { } #window4 { } #window5 { } #window6 { } /*기본*/ @media screen and (max-width: 1600px) { header b {display:inline-block;margin: 20px 10px;padding:6px 0;cursor:pointer;font-size:15px;color:#fff;} .main-carousel .li .copy_area{width: 100%;} } @media screen and (max-width: 1400px) { .main-carousel .owl-nav { display:none} header b {display:inline-block;margin: 20px 5px;padding:6px 0;cursor:pointer;font-size:15px;color:#fff;} } @media screen and (max-width: 1270px) { header .menu { display:none} .main-carousel .li .copy_area{width: 100%;} @media screen and (max-width: 960px) { .tl_business_wrap ul li { width:50%} .gallery_area_wrap li { width:50%} .group_area_wrap .box { width:100%; margin-right:0} .group_area_wrap .box .photo { text-align:center} .group_area_wrap .box .txt p { max-width:588px; margin:0 auto} .tl_main_about_wrap ul li{ width:50%} .group_area .box { width:100%} .gallery_area li { width:50%} .tl_location_wrap .map_info { top:450px; width:100%} .sns_wrap { padding:250px 0 50px 0} .footer { padding-top:0} .footer ul li { width:100%; margin-right:0; margin-top:2%} .footer ul li:last-child { margin-top:2%} } @media screen and (max-width: 674px) { .main-carousel .li .copy_area h2 {font-size: 26px;} .main-carousel .li .copy_area h3 {font-size: 15px; word-break:keep-all; line-height:1.6} .main-carousel .owl-nav { display:none} .tl_colum_box_wrap .left { width:100%} .tl_colum_box_wrap .right { width:100%; padding-top:20px} .tl_main_about_wrap ul li { width:100%} .tl_business_wrap ul li { width:100%} .map_info { width: 100%; height:184px} .map_info span { font-size:15px} .map_btn { bottom:30px} .gallery_area_wrap li { width:100%} .sns_wrap .text-center { width:154px; margin:20px auto; text-align:left} .sns_wrap .margin-right-20 { display:inline-block; margin-top:20px; } }