/* 공통 */ .o_ctnt {position:relative; width:100%; max-width:1200px; margin:0 auto; padding:0 15px;} /* 모바일 */ /* @media screen and (max-width: 1200px) { .o_ctnt {padding:0 15px;} } */ /* scrollreveal-master init. */ .o-slide-up {visibility:hidden;} .o-slide-up2 {visibility:hidden;} .o-slide-up3 {visibility:hidden;} .o-slide-up4 {visibility:hidden;} .o-fade-in {visibility:hidden;} .v-hidden {visibility:hidden;} .col-xs-12 {} @media screen and (max-width: 991px) { .col-xs-12 { flex:0 0 100%; max-width:100%;} } .img_effect {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transition: all 0.3s ease-in-out; /* 부드러운 모션을 위해 추가*/ } .img_effect:hover {transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);} .img_effect_1 {position: relative;display: block;border-radius: 0px;width: 100%;margin-bottom: 20px;transition: all 250ms linear;} .img_effect_1:hover {box-shadow: 0px 40px 70px -5px rgba(149, 164, 175, 0.4);transform: translateY(-5px);} .color_white {color:#ffffff;} .color_red {color:red;} input.input_basic {line-height:48px; height:48px; padding:0 15px; border:1px solid #ebebeb;} .wr_content_wrap img {width:auto; max-width:100%; } .bg-cccccc { background-color: #cccccc!important; color:#333333!important; font-size:80%; } .bg-333333 { background-color: #333333!important; color:#ffffff!important; font-size:80%; } /* 헤더 */ #o_header {position:relative; /* background-color:#434343; */ min-height:60px; /* border-bottom:1px solid #1c1c1c; */} #o_header .o_logo {position:relative; background:url('/assets/images/2020/logo.png')no-repeat center; background-color:#434343; width:121px; height:40px; z-index:10;} #o_header .o_topnav {} #o_header .o_topnav > ul > li { margin:0 15px 0 0; } #o_header .o_topnav > ul > li > a { font-size:17px; white-space:nowrap; color:#ffffff; } #o_header .o_topnav > ul > li:hover > a { font-weight:bolder; } #o_header .o_topnav > ul > li.active > a { font-weight:bolder; } #o_header .o_topnav > ul > li.util_search > a, #o_header .o_topnav > ul > li.util_user > a { line-height:36px; } #o_header .o_topnav > ul > li > div > a { font-size:17px; white-space:nowrap; color:#ffffff; } #o_header .o_topnav > ul > li > div:hover > a { font-weight:bolder; } #o_header .o_topnav > ul > li > div.active > a { font-weight:bolder; } #o_header .o_topnav > ul > li > div.util_search > a, #o_header .o_topnav > ul > li.util_user > a, #o_header .o_topnav > ul > li.util_user > div > a{ line-height:36px; } /* .o_header_sub ul.o_subnav { } .o_header_sub ul.o_subnav li { line-height: 48px; margin:0 20px; } .o_header_sub ul.o_subnav li a { font-size:15px; color:#888888; text-decoration:none;} .o_header_sub ul.o_subnav li.active {border-bottom:2px solid red;} .o_header_sub ul.o_subnav li.active a {color:#414141; font-weight:bolder;} .o_header_sub ul.o_subnav li:hover {border-bottom:2px solid red;} .o_header_sub ul.o_subnav li:hover a {color:#414141; font-weight:bolder;} */ .o_header_sub .o_subnav ul { } .o_header_sub .o_subnav ul li { line-height: 40px; margin:0 15px; box-sizing:border-box; border-bottom:2px solid #fff;} .o_header_sub .o_subnav ul li a {font-size:15px; color:#888888; text-decoration:none; } /* .o_header_sub .o_subnav ul li.active {border-bottom:2px solid red; box-sizing:border-box;} */ .o_header_sub .o_subnav ul li.active a {color:#414141; box-sizing:border-box; font-weight:bold;} /* .o_header_sub .o_subnav ul li:hover {border-bottom:2px solid red; } */ .o_header_sub .o_subnav ul li:hover a {color:#000; border-bottom:2px solid #fff;} .o_header_sub h3 { white-space:nowrap; } .mobile_sub_menu {display:none;} /* * 탑메뉴용 - 메뉴가 로고와 겹치지 않게 하기 위해.. * 메뉴 수에 따라 조절 */ @media screen and (min-width: 992px) { /*#o_header .o_logo {position:absolute;}*/ #o_header .o_topnav > ul > li.util_search, #o_header .o_topnav > ul > li.util_user { margin:0 15px; } } @media screen and (max-width: 1080px) { #o_header .o_topnav > ul > li { margin:0 7px 0 0; } } /* 모바일 - 헤더 */ @media screen and (max-width: 991px) { #o_header .o_topnav {margin-top:10px; margin-bottom:5px;} #o_header .o_topnav > ul > li {margin:0;} #o_header .o_topnav > ul > li > a {display:block;line-height:30px;padding: 10px 15px;background-color: #2b2b2b;border-bottom:1px solid #434343;position: relative; text-decoration:none;} #o_header .o_topnav > ul > li > div > a {display:block;line-height:30px;padding: 10px 15px;background-color: #2b2b2b;border-bottom:1px solid #434343;position: relative; } .o_header_sub {display: none; } /* old */ ul.mobile_sub_menu {display:block;} ul.mobile_sub_menu > li {display:block; } ul.mobile_sub_menu > li > a {display:block;line-height:26px;padding: 10px 15px 10px 30px;background-color: #555555;border-bottom:1px solid #818181;position: relative;color:#ccc; text-decoration:none;} /* new */ dl.mobile_sub_menu {display:block;} dl.mobile_sub_menu > dt {display:block;line-height:30px;padding: 10px 15px;background-color: #2b2b2b;border-bottom:1px solid #434343;position: relative; color:#fff; cursor:pointer;font-size:17px; font-weight:normal;} dl.mobile_sub_menu > dd {margin:0;padding:0; display:none;} dl.mobile_sub_menu > dt > a, dl.mobile_sub_menu > dd > a {display:block;line-height:26px;padding: 10px 15px 10px 30px;background-color: #555555;border-bottom:1px solid #818181;position: relative;color:#ccc; text-decoration:none;} dl.mobile_sub_menu > dt.active, dl.mobile_sub_menu > dt:hover { background-color: #000000;} dl.mobile_sub_menu > dd > a:hover { background-color: #4c4c4c;color:#dfdfdf;} } .o_user_nav {position:absolute; top:45px; left:-65px; z-index:100; border:1px solid #000000;} .o_user_nav ul {width:150px; height:164px; line-height:40px; background-color:#fff; } .o_user_nav ul li {width:100%; border-bottom:1px solid #eeeeee; text-align:center; color:#888888; display:block;} .o_user_nav ul li a {text-align:center; color:#888888; display:block; text-decoration:none;} .o_user_nav ul li:hover a {color:#000;} /* 푸터 */ .o_footer { padding: 20px 0 0 0;} .o_footer_sns {margin:50px auto; text-align:center;} .o_footer_sitemap {margin:0 auto; text-align:center;} .o_footer_sitemap > div.col > dl {text-align:left; margin-bottom:80px;} .o_footer_sitemap > div.col > dl > dt {font-size:18px; font-weight:bold; } .o_footer_sitemap > div.col > dl > dd {} .o_footer_sitemap a {color:#212529; } .o_footer_nav ul > li {margin-right:30px;} .o_footer_nav ul > li > a {color:#fff;} .o_footer_nav {background-image:url('/assets/images/2020/footer_bg_big.png'); background-repeat:repeat-x; width:100%; height:auto; min-height: 260px; } .o_footer_info {} .o_footer_info ul {margin:0 0 5px 0; padding:0;} .o_footer_info ul > li { background-image:url('/assets/images/2020/footer_info_line.jpg'); background-repeat:no-repeat; background-size: 2px 10px; background-position: left center; margin:0; padding:0 10px;} .o_footer_info ul > li:first-child { padding-left:0; background-image:none;} /* 퀵메뉴 */ .o_quick {position:fixed; bottom:30px; right:30px; z-index:10;} .o_quick a {display:block; margin:10px auto;} @media screen and (max-width: 991px) { /* 퀵메뉴 */ .o_quick {position:fixed; bottom:30px; right:30px; z-index:10;} .o_quick a {display:block; margin:10px auto;} } /* 메인 파킹 */ #main_parking {position:fixed; top:0; left:0; z-index:100; width:100%; height:100vh; background-image:url('/assets/images/2020/parking_bg.jpg'); background-position:center center; background-size:cover; background-repeat:no-repeat; display:table;} .park_table {width:100%; height:100%; display:table-cell; text-align:center; vertical-align:middle;} .park_cell {position:relative; margin:0 auto; width:561px; height:514px; text-align:center; vertical-align:middle; background-image:url('/assets/images/2020/parking_ctnt.jpg'); background-position:center center; background-size:cover; background-repeat:no-repeat;} .o_input_srh_parking_wrap {position:absolute; top:63%; left:10%; width: 80%; text-align:center;} .o_input_srh_parking {width: 100%;background-color: #FFFFFF;border: 3px solid #898989;box-sizing: border-box;border-radius: 40px; padding:0 55px 0 20px; outline:none; font-size: 18px; font-weight:bold; height:60px; line-height: 60px;color: #666666;} .o_input_srh_parking_btn {border:none; margin:0; padding:0; outline:none; position:absolute; top:15px; right:35px;} .main_parking_go_home {position:absolute; bottom:10%; left:50%; margin-left:-83px;} .park_hide_today {position:absolute; bottom:0px; left:10px; color:#fff;} @media screen and (max-width: 640px) { /*768px*/ .o_input_srh_parking_wrap {top:58%; left:10%; width: 80%; text-align:center;} .park_cell {width:400px; height:366px;background-image:url('/assets/images/2020/parking_ctnt_m.jpg');} .o_input_srh_parking {border-radius: 40px; padding:0 55px 0 20px; font-size: 17px; height:45px; line-height:45px; } .o_input_srh_parking_btn {width:25px; top:10px; right:20px; } .main_parking_go_home {bottom:13%; } } @media screen and (max-width: 414px) { .o_input_srh_parking_wrap { top:57%; left:10%; width: 80%; text-align:center;} .park_cell {width:360px; height:329px; background-image:url('/assets/images/2020/parking_ctnt_m.jpg');} .o_input_srh_parking {border-radius: 40px; padding:0 55px 0 20px; font-size: 17px; height:45px; line-height:45px; } .o_input_srh_parking_btn { width:25px; top:10px; right:20px; } .park_hide_today { bottom:0px; left:10px; color:#fff;} } @media screen and (max-width: 360px) { .o_input_srh_parking_wrap { top:55%; left:10%; width: 80%; text-align:center;} .park_cell {width:320px; height:293px; background-image:url('/assets/images/2020/parking_ctnt_m.jpg');} .o_input_srh_parking {border-radius: 40px; padding:0 55px 0 20px; font-size: 17px; height:45px; line-height:45px; } .o_input_srh_parking_btn { width:25px; top:10px; right:20px; } .park_hide_today { bottom:0px; left:10px; color:#fff;} } /* w561 h514 = w400 hY, Y=366 => w400 y366 w561 h514 = w360 hY, Y=293 => w360 y329 w561 h514 = w320 hY, Y=293 => w320 y293 */ /* 메인 */ /* 메인 타이틀 */ .main_ttl {position:relative;margin:0 auto; text-align:center;font-size:47px; font-weight:bold;} .main_ttl > span {position:absolute; width:32px; height:5px; left:50%; margin-left:-16px; top:77px; background-color:#9e9e9e;} /* @media screen and (max-width: 1280px) { .main_ttl {font-size:42px;} .main_ttl > span {position:absolute; width:32px; height:5px; left:50%; margin-left:-16px; top:77px; background-color:#9e9e9e;} } */ @media screen and (max-width: 991px) { .main_ttl {font-size:36px;} .main_ttl > span {position:absolute; width:28px; height:4px; left:50%; margin-left:-14px; top:65px; background-color:#9e9e9e;} } /* 메인 비주얼 */ #carouselMainVisual {width:100%; overflow:hidden;} #carouselMainVisual .carousel-item > img {width:100%;} @media screen and (max-width: 991px) { #carouselMainVisual .carousel-inner {margin-left:-25%;width:150%; } } /* 추천 및 트렌드 */ #main_trend_wrap {padding:80px 0; background-color:#ffffff; border-bottom:1px solid #eeeeee;} @media screen and (max-width: 991px) { #main_trend_wrap {padding:60px 0; } } #carouselMainProduct .carousel-control-prev-icon {background-image:url('/assets/images/2020/main_trend_btn_left.png');background-size:100% 100%; width:57px; height:111px; background-position:left 70%;} #carouselMainProduct .carousel-control-next-icon {background-image:url('/assets/images/2020/main_trend_btn_right.png');background-size:100% 100%; width:57px; height:111px; background-position:right 70%;} #carouselMainProduct .carousel-item .carousel-caption {margin:80px auto 10px; left:0; position:relative; color:#666666;} #carouselMainProduct .carousel-item .carousel-caption {} #carouselMainProduct .carousel-item .carousel-caption .prd_name_eng {font-size:40px; font-weight:bold;} #carouselMainProduct .carousel-item .carousel-caption .prd_name_kor {font-size:20px;} #carouselMainProduct .carousel-item .carousel-caption .prd_name_link {color:#2460b2; font-size:18px;} @media screen and (max-width: 991px) { /* 추천 및 트렌드 */ #carouselMainProduct .carousel-control-prev-icon {background-image:url('/assets/images/2020/main_trend_btn_left.png');background-size:60%; width:48px; } #carouselMainProduct .carousel-control-next-icon {background-image:url('/assets/images/2020/main_trend_btn_right.png');background-size:60%; width:48px; } #carouselMainProduct .carousel-item .carousel-caption {} #carouselMainProduct .carousel-item .carousel-caption .prd_name_eng {font-size:24px; font-weight:bold;} #carouselMainProduct .carousel-item .carousel-caption .prd_name_kor {font-size:16px;} #carouselMainProduct .carousel-item .carousel-caption .prd_name_link {color:#2460b2; font-size:14px;} #carouselMainProduct .carousel-indicators {bottom:-40px;} #carouselMainProduct .carousel-indicators li { background-color:#d1d1d1; } } /* 재능기부 교육1 */ #main_talent_wrap {padding:80px 0; background-color:#f8f8f8; border-bottom:1px solid #eeeeee;} .main_talent_link {margin-top:80px; margin-bottom:55px; text-align:center;} @media screen and (max-width: 991px) { #main_talent_wrap {padding:60px 0; } .main_talent_link {margin-top:50px; margin-bottom:45px;} } /* 재능기부 교육2 */ .slick-dots {bottom:-55px !important;} .main_talent_btn_left {position:absolute; z-index:10; top:140px; left:-25px; cursor:pointer;} .main_talent_btn_right {position:absolute; z-index:10; top:140px; right:-25px; cursor:pointer;} @media screen and (max-width: 1240px) { .main_talent_btn_left {top:140px; left:8px;width:60px; } .main_talent_btn_right {top:140px; right:8px;width:60px; } } /* 하단 배너 */ .main_bottom_banner {position:relative; display:inline-block; float:left; width:50%; overflow:hidden;} @media screen and (max-width: 991px) { .main_bottom_banner{width:100%;} } .main_bottom_banner div.bnr_bg_all {background-color:#000; opacity:0.3; width:100%; height:100%;} .main_bottom_banner div.bnr_bg {z-index:1; position:absolute; text-align:center; margin:5% auto; width:60%; height:200px; left:50%; margin-left:-30%; padding:30px 30px 30px 30px; background-color:#000; opacity:0.3;} .main_bottom_banner dl {z-index:3; position:absolute; text-align:center; margin:0 auto; width:60%; height:200px; left:50%; margin-left:-30%; padding:20px 30px 30px 30px; } .main_bottom_banner dl dt {font-size:34px; margin-bottom:5px; color:#fff; text-shadow: 2px 2px 2px #000;} .main_bottom_banner dl dd.bnr_desc {font-size:20px; color:#fff; font-weight:bold; text-shadow: 2px 2px 2px #3c3c3c;} .main_bottom_banner dl dd.bnr_link a {font-size:18px; color:#dfeaf9; padding-right:15px; font-weight:bold; text-shadow: 2px 2px 2px #1c4a8a;} .main_bottom_banner img {z-index:2; } img.img_dark { filter: brightness(60%); } @media screen and (max-width: 1700px) { .main_bottom_banner div.bnr_bg { height:200px;} .main_bottom_banner dl { height:200px;} .main_bottom_banner dl dt {font-size:34px;} .main_bottom_banner dl dd.bnr_desc {font-size:20px;} .main_bottom_banner dl dd.bnr_link a {font-size:18px;} } @media screen and (max-width: 1280px) { .main_bottom_banner div.bnr_bg { width:80%; height:170px; left:50%; margin-left:-40%; } .main_bottom_banner dl { width:80%; height:170px; left:50%; margin-left:-40%; } .main_bottom_banner dl dt {font-size:28px;} .main_bottom_banner dl dd.bnr_desc {font-size:18px;} .main_bottom_banner dl dd.bnr_link a {font-size:16px;} } @media screen and (max-width: 991px) { .main_bottom_banner div.bnr_bg { height:180px; } .main_bottom_banner dl { height:180px; } .main_bottom_banner dl dt {font-size:28px;} .main_bottom_banner dl dd.bnr_desc {font-size:18px;} .main_bottom_banner dl dd.bnr_link a {font-size:16px;} } /* .mb_bnr1 {background-image:url('/assets/images/2020/main_banner_1.png'); background-size:cover; width:50%; height:500px;} */ .mb_bnr3 > dl > dt, .mb_bnr3 > dl > dd.bnr_desc {color:#ffffff;} .mb_bnr3 > dl > dd.bnr_link > a {color:#b3d1fa; } /* 서브 - 조달 */ .o_jodal_main_wrap {background-image:url('/assets/images/2020/jodal_main_bg.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:auto; overflow:hidden; background-color:#000000; } .o_jodal_main_wrap .o_page_ttl {padding-top:120px; font-size:45px; text-align:center;} .o_jodal_main_wrap .o_page_desc {padding-top:15px; font-size:18px; text-align:center;} .o_jodal_main_bnr {} @media screen and (max-width: 991px) { /* .o_jodal_main_bnr .col-6 { flex:0 0 100%; max-width:100%;} */ } .o_jodal_main_bnr .o_bnr_box { position:absolute; top:30px; left:35px;} .o_bnr_box .o_bnr_ttl {font-size:34px; font-weight:bold;} .o_bnr_box .o_bnr_gogo {font-size:18px; color:#2460b2; display:block; margin-top:20px;} @media screen and (max-width: 991px) { .o_bnr_box .o_bnr_ttl {font-size:26px;} .o_bnr_box .o_bnr_gogo {font-size:14px;} } .o_page_visual {} .o_page_visual .o_page_ttl {padding-top:130px; font-size:50px; text-align:center;} .o_page_visual .o_page_desc {padding-top:15px; font-size:22px; text-align:center;} .o_jodal_visual {background-image:url('/assets/images/2020/jodal_sub_visual.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } /* 페이지 탭메뉴 */ .o_page_nav {width:100%; height:66px; border-bottom: 1px solid #dddddd; overflow-y:hidden;} .o_page_nav ul {text-align:center;} .o_page_nav ul li { display:inline-block;} .o_page_nav ul li span{cursor:pointer; text-align:center; white-space:nowrap; padding:0; margin:0; color:#888888; line-height:66px; display:inline-block; text-decoration:none;} .o_page_nav ul li span a{text-decoration:none; color:#888888;display:inline-block; padding:0 30px; } /* .o_page_nav ul li a { color:#888888; line-height:66px; display:inline-block; padding:0 50px; text-decoration:none;} */ @media screen and (max-width: 991px) { .o_page_nav ul li span a {padding:0 ;} } /*왼쪽에서 오른쪽으로 이동하는 에니메이션*/ /*가운데서 좌우로 펼쳐지는 라인 에니메이션*/ /*
*/ /* .o_page_nav ul li a{ */ .o_page_nav ul li span{ /* 왼쪽에서 오른쪽으로 이동하는 에니메이션 position: relative; */ text-decoration: none; display: inline-block; position: relative; } /* .o_page_nav ul li a:after{ */ .o_page_nav ul li span:after{ /* 왼쪽에서 오른쪽으로 이동하는 에니메이션 content: ""; position: absolute; left: 0; bottom: 0px; width: 0px; height: 3px; margin: 0; transition: all 0.2s ease-in-out; transition-duration: 0.3s; opacity: 0; background-color: red; */ background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 3px; left: 50%; position: absolute; background: red; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } /* .o_page_nav ul li a:hover:after{ */ .o_page_nav ul li span:hover:after{ /* 왼쪽에서 오른쪽으로 이동하는 에니메이션 width: 100%; opacity: 1; */ width: 100%; left: 0; } /*왼쪽에서 오른쪽으로 이동하는 에니메이션:끝*/ /* active */ /* .o_page_nav ul li.active a:after { */ .o_page_nav ul li.active span:after { /* 왼쪽에서 오른쪽으로 이동하는 에니메이션 width: 100%; opacity: 1; */ width: 100%; left: 0; } @media screen and (max-width: 1280px) { /* .o_page_nav ul li a { padding:0 30px;} */ .o_page_nav ul li span{ padding:0 30px;} } @media screen and (max-width: 991px) { /* .o_page_nav ul li a { padding:0 5px; font-size:15px;} */ .o_page_nav ul li span{ padding:0 5px; font-size:15px;} } h3.o_content_ttl {position:relative; font-size:45px; font-weight:bold; text-align:center;} h4.o_content_ttl {position:relative; font-size:34px; font-weight:bold; } .o_content_ttl_redbar {position:absolute; top:0; left:15px; width:27px; height:5px; background-color:red; } .center_btn_left {position:absolute; z-index:10; top:50%; margin-top:-40px; left:-25px; cursor:pointer;} .center_btn_right {position:absolute; z-index:10; top:50%; margin-top:-40px; right:-25px; cursor:pointer;} @media screen and (max-width: 1280px) { .center_btn_left {top:50%; margin-top:-30px; left:30px;width:60px; } .center_btn_right {top:50%; margin-top:-30px; right:30px;width:60px; } } @media screen and (max-width: 991px) { .center_btn_left {top:50%; margin-top:-30px; left:8px;width:60px; } .center_btn_right {top:50%; margin-top:-30px; right:8px;width:60px; } } /* 서브 - 솔루션 */ .o_solution_main_wrap { background-image:url('/assets/images/2020/solution_main_bg.png'); background-size:cover; background-repeat:no-repeat; width:100%; height:auto; overflow:hidden; background-color:#000000; padding-bottom: 50px;} .o_page_ttl {padding-top:120px; font-size:45px; text-align:center;} .o_page_desc {padding-top:15px; font-size:18px; text-align:center;} .o_solution_visual {background-image:url('/assets/images/2020/solution_sub_visual.png'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } .o_solution_lists {} .o_solution_lists dl {} .o_solution_lists dl dt { color:#2b2b2b; font-size:22px; } .o_solution_lists dl dd { color:#666666; font-size:16px; } .o_solution_lists a {text-decoration:none;} .o_prd_lists {} .o_prd_lists dl {} .o_prd_lists dl dt { color:#2b2b2b; font-size:22px; } .o_prd_lists dl dd { color:#666666; font-size:16px; } .o_prd_lists a {text-decoration:none;} /* input */ .o_input {font-size: 16px; /* padding:0 15px; */ vertical-align:middle;} .o_input:hover {border: 1px solid #7265E3;} .o_input:active {border: 1px solid #7265E3;} .o_input:focus {border: 1px solid #7265E3;} .o_input_file {border: 1px solid #cccccc; box-sizing: border-box; border-radius: 2px; font-size: 15px; line-height: 25px; padding:0 5px 0 0; outline:none; vertical-align:middle;} .o_input_file:hover {border: 1px solid #7265E3;} .o_input_file:active {border: 1px solid #7265E3;} .o_input_file:focus {border: 1px solid #7265E3;} .o_input_datepicker { background-image: url('/assets/images/common/icon_caledar.png'); background-repeat: no-repeat; background-position: calc(100% - 12px) 50%; background-size: 16px 16px; } .o_input_srh_nobtn {width: 430px;background-color: #FFFFFF;border: 3px solid #898989;box-sizing: border-box;border-radius: 40px; padding:0 55px 0 20px; outline:none; font-size: 18px; font-weight:bold; line-height: 60px;color: #666666;} .o_input_srh {width: 430px;background-color: #FFFFFF;border: 3px solid #898989;box-sizing: border-box;border-radius: 40px; padding:0 55px 0 20px; outline:none; font-size: 18px; font-weight:bold; line-height: 60px;color: #666666; background-image:url('/assets/images/2020/icon_srh_right.png'); background-repeat:no-repeat; background-position:95% center;} .o_input_srh_top {width: 100%;background-color: #FFFFFF;border:none; box-sizing: border-box;border-radius: 40px; padding:0 55px 0 20px; outline:none; font-size: 17px; line-height: 60px;color: #666666; background-image:url('/assets/images/2020/icon_header_search.png'); background-repeat:no-repeat; background-position:3% center;} /* select */ .o_selectbox { min-width: 70px; /* padding:11px 40px 11px 11px; */ padding:0 40px 0 15px; border: 1px solid #ebebeb; box-sizing: border-box; /* border-radius: 5px; */ font-weight: 600; font-size: 14px; line-height: 17px; /* color: #000000; */ color: #333333; font-family: inherit; background-color:#fff; background-image: url('/assets/images/2020/selectbox_arrow.png'); background-repeat:no-repeat; background-position:calc(100% - 16px) 55%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .o_selectbox::-ms-expand { /* for IE 11 */ display: none; } /* dropdown */ .o_dropdown {position:relative;} .o_dropdown > button.o_btn_dropdown { position:relative; min-width: 70px; padding:11px 40px 11px 11px; border: 1px solid #E7E7E7; box-sizing: border-box; border-radius: 5px; font-weight: 600; font-size: 13px; line-height: 17px; color: #000000; font-family: inherit; background-color:#ffffff; background-image: url('/assets/images/common/selectbox_arrow.png'); background-repeat:no-repeat; background-position:calc(100% - 16px) 48%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .o_dropdown .o_dropdown_menu {display:none; position:absolute; top:49px; left:0; z-index:100; /*padding:24px 10px 20px 30px; */ width: 280px;background-color: #FFFFFF;box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);border-radius: 5px;} .o_dropdown .o_dropdown_menu ul {position:relative;width: 240px; margin:24px 10px 20px 30px; } .o_dropdown .o_dropdown_menu li {margin-top:18px;font-weight: normal;font-size: 16px;line-height: 19px;color: #333333;} .o_dropdown .o_dropdown_menu li:first-child {margin-top:0;} .o_dropdown .o_dropdown_menu li a {font-weight: normal;font-size: 16px;line-height: 19px;color: #333333;} .o_dropdown .o_dropdown_menu li a:hover {text-decoration: underline; font-weight: 600;} /* checkbox */ .o_checkbox {position:relative; text-align:center; vertical-align:middle;} .o_checkbox input[type="checkbox"]{display: none;} .o_checkbox input[type="checkbox"] + label{ display:inline-block; width: 20px; height: 20px; vertical-align:middle; background-color: #F7F7F7; border: 1px solid #E7E7E7; box-sizing: border-box; border-radius: 2px; cursor: pointer; margin-bottom:4px; } .o_checkbox input[type="checkbox"]:checked + label{ background:url('/assets/images/common/o_checkbox_checked.png') no-repeat 50% 50%; } /* checkbox 2 */ /* Customize the label (the container) */ /* .o_checkbox_container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */ .o_checkbox_container { display: inline-block; position: relative; padding-left: 30px; margin-bottom: 12px; margin-right:20px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .o_checkbox_container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .o_chk_checkmark { position: absolute; top: 0; left: 0; height: 23px; width: 23px; background-color: #eee; } /* On mouse-over, add a grey background color */ .o_checkbox_container:hover input ~ .o_chk_checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .o_checkbox_container input:checked ~ .o_chk_checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .o_chk_checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .o_checkbox_container input:checked ~ .o_chk_checkmark:after { display: block; } /* Style the checkmark/indicator */ .o_checkbox_container .o_chk_checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* radio */ /* The container */ .o_radio_container { display: inline-block; position: relative; padding-left: 30px; margin-bottom: 12px; margin-right:20px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .o_radio_container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .o_checkmark { position: absolute; top: 0; left: 0; height: 23px; width: 23px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */ .o_radio_container:hover input ~ .o_checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .o_radio_container input:checked ~ .o_checkmark { background-color: #2196F3; } /* Create the indicator (the dot/circle - hidden when not checked) */ .o_checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .o_radio_container input:checked ~ .o_checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .o_radio_container .o_checkmark:after { top: 7px; left: 7px; width: 9px; height: 9px; border-radius: 50%; background: white; } /* 서브 - 제품소개 */ .o_product_visual {background-image:url('/assets/images/2020/product_sub_visual.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } .table_prd {margin:0 auto 50px; max-width:1000px; } .table_prd h5 { font-size:26px; text-align:left; } .table_prd table { width:100%; border-top:2px solid #333333;} .table_prd table th, td { height:50px; line-height:20px; padding:15px; border-bottom: 1px solid #dddddd;} .table_prd table th {background-color:#f9f9f9; border-right: 1px solid #dddddd;} .table_prd table td {width:65%; } .table_download { width:100%; border-top:2px solid #333333;} .table_download th, td { height:50px; line-height:20px; padding:15px; border-bottom: 1px solid #dddddd;} .o_estimate_tbl { position:relative; width:100%; } .o_estimate_row { position:relative; width:100%; padding:20px 0; vertical-align:middle;} .o_estimate_tbl dl { position:relative; clear:both; width:100%; margin:0; padding:0; vertical-align:middle;} .o_estimate_tbl dl dt {display:inline-block; float:left; width:85px; margin:0; padding:10px 0 0 0; vertical-align:middle;} .o_estimate_tbl dl dd {display:inline-block; float:right; width:calc(100% - 85px); margin:0; padding:0; vertical-align:middle;} .o_estimate_tbl dl dd input.input_estimate, textarea.textarea_estimate {width:100%; border:1px solid #e3e3e3;} .o_estimate_tbl dl dd input.input_estimate { height:47px; line-height:47px; padding:0 24px;} .o_estimate_tbl dl dd textarea.textarea_estimate { padding:15px 24px;height:300px;} .o_estimate_tbl br.b_line_estimate { clear:both; border:none; border-bottom: 1px solid #e1e1e1; margin:0; padding:0;} .o_estimate_tbl hr.b_line_estimate { clear:both; border:none; border-bottom: 1px solid #e1e1e1; margin:0; padding:0;} /* 서브 - 미디어 */ .o_media_visual {background-image:url('/assets/images/2020/media_sub_visual.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } /* 서브 - 뉴스룸 */ .o_newsroom_visual {background-image:url('/assets/images/2020/newsroom_sub_visual.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } /* 서브 - 재능기부교육 */ .o_talent_visual {background-image:url('/assets/images/2020/talent_sub_visual.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } .o_talent_request {position:relative; margin-top:40px; border-top:3px solid #333333; border-bottom:1px solid #333333; padding:40px 40px 20px 40px; background-color:#fafafa;} .o_agree_ctnt {} .o_agree_ctnt dl { margin-bottom:5px;} .o_agree_ctnt dl dt {display:inline-block;} .o_agree_ctnt dl dd {display:inline-block;} dl.o_request_form { clear:both; margin:0; line-height:48px; min-height:88px; padding:20px 0; border-bottom:1px solid #e1e1e1;} dl.o_request_form dt {float:left; width:13.33%; max-width:160px; margin:0;} dl.o_request_form dd {float:left; width:86.66%; max-width:1040px; margin:0;} dl.o_request_form dd input {width:100%;} .o_request_row {padding:20px 0; border-bottom:1px solid #ebebeb;} .o_request_row dl {margin:0;line-height:48px; height:48px; clear:both;} .o_request_row dt {float:left; display:inline-block; width:13.33%; max-width:160px; margin:0;} .o_request_row dd {float:left; display:inline-block; width:86.66%; max-width:1040px; margin:0;} .o_request_row dd input {width:100%;} @media screen and (max-width: 991px) { .o_request_row dt {width:20%;} .o_request_row dd {width:80%;} } /* 서브 - 회사소개 */ .watchcam-history {margin:0 auto; width: 90%;} .watchcam-history .history_wrap { margin-top: 20px; border:0px solid red; outline:none;} .watchcam-history .history_year h1 {color:#000000; font-size:40px; font-weight:bold; text-align:center; padding:10px 0 20px 0;} .watchcam-history .history_year h1.this_year {color:RED;} .watchcam-history .history_text {text-align:center;} /* .o_history_right {position:relative; padding-top:50px;} .o_history_right .o_history_circle {background-repeat:no-repeat; background-position:center top;} .o_history_right .o_history_circle .o_history_line {margin-left:50%; padding-left:80px; background-repeat:no-repeat; background-position:left 5px;} .o_history_year {position:relative; height:auto; min-height:50px;} .o_history_year h1 {position:absolute; top:-18px; color:#000000; font-size:40px; font-weight:bold; text-align:right;} .o_history_left {position:relative; padding-top:50px;} .o_history_left .o_history_circle {background-repeat:no-repeat; background-position:center top;} .o_history_left .o_history_circle .o_history_line {margin-right:50%; padding-right:80px; text-align:right; background-repeat:no-repeat; background-position:right 5px;} .o_history_left .o_history_year h1 {right:0px;} .o_history_circle {background-image:url('/assets/images/2020/history_year_black_circle_12px_2.jpg'); } .o_history_circle .o_history_line {background-image:url('/assets/images/2020/history_year_black_line.jpg'); } .o_history_text { font-size:15px;} .o_this_year {padding:0;} .o_this_year .o_history_circle {background-image:url('/assets/images/2020/history_year_red_circle_2.jpg'); } .o_this_year .o_history_circle .o_history_line {background-image:url('/assets/images/2020/history_year_red_line.jpg'); background-position:left 7px;} .o_this_year .o_history_year h1 {color:red; text-align:left; top:-18px; } .o_this_year .o_history_text {} @media screen and (max-width: 991px) { .o_history_right .o_history_circle .o_history_line {margin-left:50%; padding-left:20px; background-repeat:no-repeat; background-position:left 5px;} .o_history_left .o_history_circle .o_history_line {margin-right:50%; padding-right:20px; text-align:right; background-repeat:no-repeat; background-position:right 5px;} .o_this_year .o_history_circle .o_history_line {background-image:url(''); background-position:left 7px;} .o_history_circle .o_history_line {background-image:url(''); } .o_history_year h1 {position:relative;color:#000000; font-size:40px; font-weight:bold; text-align:right;} .o_history_right .o_history_year h1 {text-align:left;} } */ /* 서브 - 마이페이지 */ .o_mypage_visual {background-image:url('/assets/images/2020/mypage_sub_visual.jpg'); background-size:cover; background-repeat:no-repeat; width:100%; height:400px; overflow:auto; background-color:#000000; } /* 서브 - 견적요청 */ .est_item { background-color: #f7f7f7; border: 1px dashed #ccc; margin: .25rem 0; padding: .25rem; /* cursor: pointer; */ } /* #Forms ================================================== */ .form-group{ position: relative; display: block; margin: 0; padding: 0; } .form-style { padding: 13px 20px; height: 48px; width: 100%; font-weight: 400; border-radius: 0px; font-size: 14px; /* line-height: 22px; */ letter-spacing: 0.5px; outline: none; color: #1f2029; background-color: #fff; border: 1px solid rgba(200, 200, 200, .5); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-style.dark-version { color: #efeef2; background-color: #333333; } .form-style.dark-blue-version { color: #efeef2; background-color: #1f2029; } .form-style.gray-version { color: #1f2029; background-color: #f6f6f6; } .no-border { border: none !important; } .form-group.just-line-light .form-style{ padding: 13px 0; height: 42px; font-size: 15px; border-radius: 0; background-color: transparent; border: none; color: #bdc3c7; font-weight: 700; border-bottom: 1px solid #ccc; } .form-group.just-line-light .form-style:focus, .form-group.just-line-light .form-style:active { border-color: #0027e6; outline: none; box-shadow: none; } .form-style.search { padding: 10px 0; height: auto; font-weight: 100; border-radius: 0; font-size: 7.5vw; color: #333; background-color: transparent; border: none; border-bottom: 3px solid rgba(200, 200, 200, .4); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-style.search:focus, .form-style.search:active { border-color: #333; outline: none; box-shadow: none; } .form-style.form-textarea { height: auto; } .form-style:focus, .form-style:active { border-color: #0027e6; outline: none; box-shadow: 0 4px 8px 0 rgba(21,21,21,.03); } .form-style:invalid { border-color: #e74c3c; } .form-group input:-ms-input-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input::-moz-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:-moz-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input::-webkit-input-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:-ms-input-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea::-moz-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:-moz-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea::-webkit-input-placeholder { color: #6e6e6e; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:focus:-ms-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:focus::-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:focus:-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:focus::-webkit-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:focus:-ms-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:focus::-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:focus:-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:focus::-webkit-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:active:-ms-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:active::-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:active:-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group input:active::-webkit-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:active:-ms-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:active::-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:active:-moz-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-group textarea:active::-webkit-input-placeholder { opacity: 0; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-style.big { background: #f8f8f8; padding: 18px 20px; height: 60px; font-size: 14px; line-height: 24px; font-weight: 500; border: none; box-shadow: 0px 10px 30px -5px rgba(51, 51, 51, 0.1); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .form-style.dark-version.big { box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.2); } .form-style.dark-version.big:focus, .form-style.dark-version.big:active { box-shadow: 0px 40px 70px -5px rgba(0, 0, 0, 0.4); } .form-style.dark-blue-version.big { box-shadow: 0px 10px 30px -5px rgba(149, 164, 175, 0.2); } .form-style.dark-blue-version.big:focus, .form-style.dark-blue-version.big:active { box-shadow: 0px 40px 70px -5px rgba(149, 164, 175, 0.4); } .form-style.big.form-textarea { height: auto; } .form-style.big.form-style-with-icon { padding-left: 60px; } .form-style.big:focus, .form-style.big:active { border: none; outline: none; box-shadow: 0px 40px 70px -5px rgba(149, 164, 175, 0.4); } .form-style.big.with-border { border: 1px solid #d9dcde; } .form-style.big.with-border:focus, .form-style.big.with-border:active { border: 1px solid #0027e6; } .form-style.no-shadow { box-shadow: none; } .form-style.no-shadow:focus, .form-style.no-shadow:active { box-shadow: none; } .input-icon { position: absolute; top: 0; left: 20px; height: 48px; font-size: 24px; line-height: 48px; text-align: left; color: #333; opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .input-icon.big { height: 60px; line-height: 60px; } .form-style-with-icon { padding-left: 55px; } #contact-feedback { position: absolute; left: 0; bottom: -50px; font-size: 13px; width: 100%; z-index: 3; } #contact-feedback.success { color: #0027e6; } #contact-feedback.error { color: #e74c3c; } #contact-message-feedback { position: absolute; left: 0; top: 0; font-size: 15px; line-height: 24px; width: 100%; text-align: center; z-index: 3; transition: all 300ms linear; } #contact-message-feedback.success { color: #0027e6; transition: all 300ms linear; } #contact-message-feedback.error { color: #e74c3c; transition: all 300ms linear; } form .error{ padding:1px 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; /* font-weight: 500; */ color: #ff0000; } form .error2{ padding:1px 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 500; color: #ff0000; } form .alert_username, form .alert_email { padding:1px 0 0 0; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 500; color:#0038c9; } /* #Button 추가 ================================================== */ .btn-light-dark{ color: #343a40; background-color: #ddd; } .btn-light-dark:active, .btn-light-dark:focus, .btn-light-dark:hover{ color: #fff !important; background-color: #333 !important; } .btn-xs { padding: .15rem .3rem; font-size: .675rem; line-height: 1.3; border-radius: .15rem; } .no-radius {border-radius:0;} /* #link 스타일 ================================================== */ .link{ -webkit-transition: all 200ms linear; transition: all 200ms linear; letter-spacing: 0px; color: #333; font-weight: 700; margin: 0; padding: 0; position: relative; display: inline-block; } .link.link-normal::after{ display: none; } .link.link-normal-vert::after{ display: none; } .link:hover{ text-decoration: none; color: transparent; } .link::after{ position: absolute; top: 0; left: 0; width: 100%; display: block; content: attr(data-hover); color: #0027e6; max-height: 0; overflow: hidden; -webkit-transition: max-height 0.5s; -moz-transition: max-height 0.5s; transition: max-height 0.5s; } .link:hover::after{ max-height: 100%; } .link.link-normal:hover{ color: #666; } .link.link-normal-vert:hover{ color: #fff; } .link.mPS2id-highlight{ color: #0027e6; } .link.mPS2id-highlight::after{ max-height: 100%; } .link:active, .link:focus{ box-shadow: none; outline: none; border: none; } .link-white-primary{ color: #fff; } .link-white-primary::after{ background: #0027e6; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-primary{ color: #0027e6; } .link-primary::after{ background: linear-gradient(298deg, #54d98c, #0027e6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-primary.link-normal:hover{ /*color: #54d98c;*/ color:#333; } .link-secondary{ color: #6c757d; } .link-secondary::after{ background: linear-gradient(298deg, #6e6e6e, #6c757d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-secondary.link-normal:hover{ color: #6e6e6e; } .link-success{ color: #54d98c; } .link-success::after{ background: linear-gradient(298deg, #16a085, #54d98c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-success.link-normal:hover{ color: #16a085; } .link-red{ color: #e74c3c; } .link-red::after{ background: linear-gradient(298deg, #e74c3c, #c0392b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-red.link-normal:hover{ color: #c0392b; } .link-blue{ color: #598bfd; } .link-blue::after{ background: linear-gradient(298deg, #331177, #598bfd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-blue.link-normal:hover{ color: #331177; } .link-purple{ color: #8e44ad; } .link-purple::after{ background: linear-gradient(298deg, #343a40, #8e44ad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-purple.link-normal:hover{ color: #343a40; } .link-gray{ color: #bdc3c7; } .link-gray.active { color: #fff; } .link-gray::after{ background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-gray.link-normal:hover{ color: #f0eff3; } .link-dark-gray{ color: #999; } .link-dark-gray.active { color: #333; } .link-dark-gray::after{ background: #333; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-dark-gray.link-normal:hover{ color: #333; } .link-dark-primary{ color: #1f2029; } .link-dark-primary.link-normal:hover{ color: #0027e6; } .link-dark-primary::after{ background: #0027e6; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-light-primary{ color: #f0eff3; } .link-light-primary.link-normal:hover{ color: #adadad; } .link-light-primary::after{ background: #0027e6; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-dark-light{ color: #1f2029; } .link-dark-light.link-normal:hover{ color: #f0eff3; } .link-dark-light::after{ background: #f0eff3; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-dark-secondary{ color: #1f2029; } .link-dark-secondary.mPS2id-highlight{ color: #1f2029; } .link-dark-secondary.link-normal:hover{ color: #6c757d; } .link-dark-secondary::after{ background: #6c757d; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-light-primary-2{ color: #f0eff3 !important; } .link-light-primary-2.link-normal:hover{ color: #adadad !important; } .link-light-primary-2::after{ background: #0027e6; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-dark-primary-2{ color: #1f2029 !important; } .link-dark-primary-2.link-normal:hover{ color: #0027e6 !important; } .link-dark-primary-2::after{ background: #0027e6; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link-gray-dark{ color: #6e6e6e !important; } .link-gray-dark.link-normal:hover{ color: #1f2029 !important; } .link-gray-dark::after{ background: #1f2029; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-center-v{ display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } /* #Font-Size ================================================== */ .size-10 { font-size: 10px; } .size-12 { font-size: 12px; } .size-13 { font-size: 13px; } .size-14 { font-size: 14px; } .size-15 { font-size: 15px; } .size-16 { font-size: 16px; } .size-17 { font-size: 17px; } .size-18 { font-size: 18px; } .size-19 { font-size: 19px; } .size-20 { font-size: 20px; } .size-21 { font-size: 21px; } .size-22 { font-size: 22px; } .size-23 { font-size: 23px; } .size-24 { font-size: 24px; } .size-25 { font-size: 25px; } .size-26 { font-size: 26px; } .size-27 { font-size: 27px; } .size-28 { font-size: 28px; } .size-29 { font-size: 29px; } .size-30 { font-size: 30px; } .size-34 { font-size: 34px; } .size-40 { font-size: 40px; } .size-50 { font-size: 50px; } .size-58 { font-size: 58px; line-height: 62px; } .size-68 { font-size: 68px; line-height: 72px; } /* 저장소 - underline css 효과 */ /* */ /*왼쪽에서 오른쪽으로 이동하는 에니메이션*/ .to-right-underline{ position: relative; } .to-right-underline:after{ content: ""; position: absolute; left: 0; bottom: -10px; width: 0px; height: 2px; margin: 5px 0 0; transition: all 0.2s ease-in-out; transition-duration: 0.3s; opacity: 0; background-color: #8fd3f4; } .to-right-underline:hover:after{ width: 100%; opacity: 1; } /*왼쪽에서 오른쪽으로 이동하는 에니메이션:끝*/ /*가운데서 좌우로 펼쳐지는 라인 에니메이션*/ .spread-underline { color: #333; text-decoration: none; display: inline-block; padding: 15px 0; position: relative; } .spread-underline:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #ffb000; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } .spread-underline:hover:after { width: 100%; left: 0; } /*가운데서 좌우로 펼쳐지는 라인 에니메이션:끝*/ /*형광펜 위로 올라오는 에니메애션*/ .highlight { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); background-repeat: no-repeat; background-size: 100% 50%; background-position: 0 88%; transition: background-size 0.25s ease-in; } .highlight:hover{ background-size: 100% 100%; } /*형광펜 위로 올라오는 에니메애션:끝*/ /*위에서 살짝 떨어지는 밑줄*/ .drop-in-underline { position: relative; padding-bottom: 10px; } .drop-in-underline:before{ content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 2px; background-color: #b9f; } .drop-in-underline:before{ opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-transition: opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s; transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .drop-in-underline:hover:before{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /*위에서 살짝 떨어지는 밑줄:끝*/ /* 2021-01-02 컨텐츠 하단에서 상단으로 */ .ani_to_top { animation-name: ani_move; animation-duration: 2s; animation-fill-mode: forwards; animation-timing-function: ease-out; } @keyframes ani_move { from {top: 40px;} to {top: 0px;} } /* 2021-01-02 메인 및 서브 비주얼 페이드인효과 */ .o_fadein { animation: o_fadein 1s; -moz-animation: o_fadein 1s; /* Firefox */ -webkit-animation: o_fadein 1s; /* Safari and Chrome */ -o-animation: o_fadein 1s; /* Opera */ } .o_fadein_2s { animation: o_fadein 2s; -moz-animation: o_fadein 2s; /* Firefox */ -webkit-animation: o_fadein 2s; /* Safari and Chrome */ -o-animation: o_fadein 2s; /* Opera */ } .o_fadein_1point5 { animation: o_fadein 1.5s; -moz-animation: o_fadein 1.5s; /* Firefox */ -webkit-animation: o_fadein 1.5s; /* Safari and Chrome */ -o-animation: o_fadein 1.5s; /* Opera */ } @keyframes o_fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes o_fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes o_fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes o_fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } } /* 아이디 찾기, 비밀번호 찾기 */ .font-noto-700 { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 700 !important; letter-spacing: 0px !important; } /* 모바일에서 페이지 ::: 슬라이드 탭 메뉴 */ /* Frame */ .m_frame { height: 66px; line-height: 66px; overflow: hidden; } .m_frame ul { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; height: 100%; } .m_frame ul li { height: 100%; margin: 0 1px 0 0; padding: 0 10px; color: #333; text-align: center; cursor: pointer; } /* .m_frame ul li.active { color: #fff; background: #a03232; } */ /* 자동 줄바꿈 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .change_line {white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:break-all;} /* 말줄임 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .ellipsis { display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; padding-right:2px; vertical-align:top; } .ellipsis_g {display:inline-block;overflow:hidden;max-width:100%;padding-right:2px;white-space:nowrap;text-overflow:ellipsis;vertical-align:top} .ellipsis_2line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.6em; height: 3.2em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */ } .ellipsis_multi { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; /* line-height: 1.2em; height: 2.4em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */ } .mypage_zzim_btn {height:60px; line-height:60px; border-bottom:2px solid #333333; margin-bottom: 10px; text-align:right;} .mypage_zzim_btn #btn_sel_estimate {width:130px;} .mypage_zzim_btn #btn_sel_all {width:120px;} .mypage_zzim_btn #btn_sel_del {width:120px;} @media screen and (max-width: 991px) { .mypage_zzim_btn #btn_sel_estimate {width:100px;} .mypage_zzim_btn #btn_sel_all {width:90px;} .mypage_zzim_btn #btn_sel_del {width:90px;} } @media screen and (max-width: 481px) { .mypage_zzim_btn #btn_sel_estimate {width:100px;} .mypage_zzim_btn #btn_sel_all {width:70px;} .mypage_zzim_btn #btn_sel_del {width:70px;} }