"utf-8"; /* Font */ @import url(font.css); @font-face { font-family:Pretendard; src: url('../font/Pretendard/Pretendard-Regular.woff') format('woff'); } /* Guide ---------------------------------------------------------------------------------------------------------------------------------------------------------- ▶사이즈 pc : 1200px tablet : 980px ~ mobile : 767px ~ 320px /* root */ :root{ --header-height: 80px; --sub-mid-height: 70px; --main-color:#1d83e6; --orange-color:#ff8b12; } /* Reset ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0;} body,th,td,input,select,textarea,button{/*font-family:'NotoSansKR', sans-serif;*/ font-family:'Pretendard'; font-weight:300; font-size:15px; color:#555;} dl,ul,ol,menu,li {list-style:none;} *, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} :focus{outline:0 !important;} iframe{border:none; width:100%;} a{color:inherit; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out;} a:hover, a:focus ,a:active{text-decoration:none; color:#bf8864;} img{max-width:100%;} textarea{max-width:100%; resize:none;} @media only screen and (min-width: 320px){ body{overflow-x:hidden;} } .hidden{font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;} ::selection { background:#337ab7; color: #fff; text-shadow: none; } ::-moz-selection { background:#337ab7; color: #fff; text-shadow: none; } ::-webkit-selection { background:#337ab7; color: #fff; text-shadow: none; } /* Parallax ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ .parallax{background-position:0 0; background-repeat:no-repeat; background-size:100% auto; width:100%; background-size:cover; background-attachment:fixed;} /* Preloader ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ .animationload{position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:999999;} .loader {width:200px; height:200px; font-size: 24px; text-align: center; position:absolute; left:50%; top:50%; background-image:url(../images/common/preloader.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px;} .loader_svg { position:absolute; top:50%; left:50%; margin:-60px 0 0 -40px; } /*로더 위치*/ /* Back to top (탑 버튼) ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ .back-to-top { width:60px; height:60px; position:fixed; bottom:25px; right:20px; display:none; text-align: center; z-index: 10000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%; /*background:rgba(63,117,173,0.3);*/ background:#555; box-shadow: 0px 10px 20px rgba(0,0,0,0.3); } .back-to-top:hover { background:#555; } .back-to-top i{color: #fff; font-size: 24px; display: block; line-height: 55px;} @media only screen and (max-width: 980px) { .back-to-top {width: 60px; height: 60px;} .back-to-top i {line-height: 58px; font-size: 20px;} } @media only screen and (max-width: 768px) { .back-to-top {width: 50px; height: 50px; bottom: 15px; right: 15px;} .back-to-top i {line-height: 48px; font-size: 18px;} } /* Layoyt (레이아웃) ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ #wrapper{position:relative; width:100%; min-width:320px; height:100%;} /* Header ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header {z-index :666; width: 100%; height: var(--header-height); background-color: #f9f9f9; display:flex; align-items: center; margin-top:100px; } #header h1{float:left;} #header h1 a{display: block; } #header #header_in{position: relative; margin: 0 auto; width: 100%; height: 100%; max-width: 1200px; /* height: 65px;} */ ; } .nav-btn{display:none;} #nav.small {font-size: 100%; } .nav-bg{z-index:888; display:none; position:absolute; top:var(--header-height); width:100%; height:225px; background:#fff; border-top:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; } /*대메뉴 하단 보더라인 적용*/ .util-menu{position:absolute; top:18px; right:0; line-height:0; font-size:0;} .util-menu ul{display:inline-block;} /*탑메뉴 pc용 안쓰는거*/ /* .util-menu li:first-child{ border: 1px solid #337ab7;margin-left: 0;} .util-menu a {display:inline-block; line-height:33px; font-size:16px; font-weight: 400; color: #333; padding: 0 10px; border-radius:25px; } */ .util-menu li:first-child { border-color: var(--main-color); margin-left: 0; } .util-menu li:first-child:hover { border-color:var(--main-color); } .util-menu li { display: inline-block; float: left; height: 30px; border: 1px solid #e1e1e1; text-align: center; margin-left: 10px; border-radius:15px; } .util-menu li:first-child a { color: var(--main-color); font-size: 12px; } .util-menu a { display: inline-block; line-height: 28px; font-size: 12px; font-weight: 400; color: #333; padding: 0 10px; border-radius:15px; } .util-menu a:hover { color: #fff; background:#333; } .util-menu li:first-child a{color:var(--main-color); font-size: 12px; } .util-menu li:first-child a:hover {background:var(--main-color); color:#fff; border-color:var(--main-color); } .navigation {display:inline-flex; flex-direction: row; position: absolute; width:100%; max-width:762px; } .navigation:after{content:""; display:block; clear:both;} .navigation > li {position:relative; height:100%; line-height: var(--header-height); text-align:center; flex:1; } .navigation .main-menu{display:block; padding: 0 20px; width:100%; font-weight:500; font-size:1.2em; color:#222;} .navigation .sub-menu{display:none; z-index:998; position:absolute; top:var(--header-height); left:0; width:100%; height: 225px;} .navigation .sub-menu a{display:block; text-align:center; line-height:3; letter-spacing:-0.5px; font-size:1.1em; font-weight: 500; color:#222;} .navigation .sub-menu .intro-menu{display:none;} .navigation > li:hover {background:#0e6cc7;} .navigation > li:hover > a {color:#fff;} .navigation > li:hover a {color:#fff;} .navigation > li:hover .sub-menu{background:var(--main-color);} .navigation > li:hover:after {content:''; position:absolute; height:1px; width:100%; left:0; bottom:0; background-color:rgba(255,255,255,0.5); z-index:999;} /*대메뉴 2뎁스메뉴 구분 보더라인*/ .navigation .sub-menu a:hover{background:#0e6cc7; color:#fff;} /*2뎁스메뉴 hover*/ @media only screen and (min-width: 981px) { /* .navigation .main-menu {padding: 0 25px;} */ .util-menu {right: 20px;} } @media only screen and (min-width: 1201px) { .util-menu {right: 0;} } @media only screen and (max-width: 1200px) { #header > div{padding:0 20px;} } @media only screen and (max-width: 980px) { #header{z-index:666; width:100%; height:65px; background:#f9f9f9; border-bottom: 1px solid #e1e1e1;} #header > div{padding:0;} #header h1{float:left; height:65px;} #header h1 a{display:block; margin-left: 15px;} #header h1 img{width:auto;} .navigation {max-width:100%; } .nav-btn{z-index:999; display:block; position:absolute; top:50%; transform:translateY(-50%); right:0px; width:30px; height:23px; cursor:pointer; background-color:#555; border-radius: 100%; padding: 22px; } .nav-btn span{position:absolute; left:50%; transform: translateX(-50%); display:block; width:18px; height:2px; background:#fff; transition:.2s all linear; border-radius:3px; transform-origin:top left; } .nav-btn span {transform: translateY(-50%) translateX(-50%); } .nav-btn span:nth-child(1) {top:calc(50% - 5px); } .nav-btn span:nth-child(2) {top:50%; transform: translateY(-50%) translateX(-50%); } .nav-btn span:nth-child(3) {top:calc(50% + 5px); } .nav-btn:hover span { background:#fff; } /* .nav-btn > .nav-wrap {border:1px solid red; } */ /* .nav-btn.nav-close{position:fixed;} */ .nav-btn.nav-close span:nth-child(1){top:50%; transform:rotate(45deg) translateX(-50%) translateY(-50%); } .nav-btn.nav-close span:nth-child(2){margin-left:0; width:0;} .nav-btn.nav-close span:nth-child(3){top:50%; transform:rotate(-45deg) translateX(-50%) translateY(-50%); } .nav-bg {z-index:777; display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7);} #nav {z-index:888; position:fixed; right:-100%; display:block; padding:0 0 20px; width:100%; height:100%; background:#fff;} .util-menu{position:relative; top:0; padding:14px 30px; width:100%; max-height:65px; /* border-top:1px solid #e1e1e1; border-bottom:1px solid #eee;*/ } .util-menu ul {width: 100%;} .util-menu li {width: calc(33.33% - 10px); margin-left: 15px; border-radius: 25px; } .util-menu a {width: 100%; padding: 0; } .navigation .main-menu{display:block; padding:0 30px; width:100%; line-height:55px; font-weight:500; font-size:18px; color:#000; transition:none;} .navigation > li {width:100%; text-align:left; border-top:1px solid #e5e5e5;} .navigation > li:hover {background:var(--main-color); } .navigation > li:first-child {border-top:none;} .navigation > li:hover:after {display:none;} .navigation > li.active {background:var(--main-color);} .navigation > li a {color:#000;} .navigation > li.active > a {color:#fff;} .navigation > li.active > ul li a {color:#555;} .navigation > li:hover .sub-menu {background:inherit;} .navigation .sub-menu {display:none; position:relative; top:0; height:inherit; background:#f1f1f1 !important;} .navigation .sub-menu li {border-top:1px solid #e5e5e5;} .navigation .sub-menu li:first-child {border-top:none;} .navigation .sub-menu a{display:block; padding:5px 30px; line-height:40px; font-size:17px; color:#555; text-align: left;} .navigation .sub-menu a:before{content:""; display:inline-block; margin:-2px 10px 0 0; width:5px; height:5px; border-radius:50%; vertical-align:middle; background:var(--main-color); display:none; } .navigation .sub-menu a:hover{background:#777; } .navigation .sub-menu a:hover:before{background:#fff;} } @media only screen and (max-width: 768px) { /*탑메뉴 모바일용 20.10.10*/ .util-menu li{display: inline-block; float: left; height: 35px; border: 1px solid #e1e1e1; text-align: center; margin-left: 10px; border-radius:25px; } .util-menu li:first-child{ border: 1px solid var(--main-color);margin-left: 0;} /*border-color: #337ab7; */ .util-menu a {display:inline-block; line-height:33px; font-size:16px; font-weight: 400; color: #333; padding: 0 10px; border-radius:25px; } .util-menu a:hover { color: #fff; background:#333; } } /* 메뉴 5개 일 때 메뉴 반응형 */ @media (max-width:1100px) { .util-menu li:first-child a { } .util-menu a { font-size: 10px; } .navigation .main-menu { padding: 0 20px; } .navigation .sub-menu a { font-size: 16px; } #nav { margin-left: 50px; } } @media (max-width:1030px) { #nav { margin-left: 10px; } } /* Button (공통 버튼) ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ .btn{text-transform:uppercase; border-radius:0; line-height:24px;} .btn:focus, .btn:active{outline:none; color:#fff;} .btn-custom{border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#509591; border-color: #509591; color:#fff;} .btn-custom:hover, .btn-custom:focus{background-color:#447774; border-color:#447774; color:#fff;} .btn-custom-outline{border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:transparent; border-color:#fff;} .btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:rgba(255,255,255,.5);} .btn-bar a{margin-right:10px;} .form-control{box-shadow:none; -webkit-box-shadow:none; border-radius:5px; height:38px;} .form-control:focus{outline:none; box-shadow:none; -webkit-box-shadow:none; border-color: #509591;} @media only screen and (max-width: 980px) { } /* Footer ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer{position:relative; width:100%; background:#111; color:#fff; padding:50px 15px; } /* .footer-area{position:relative; margin:0 auto; width:100%; box-sizing:border-box; padding:40px 0 0 0; line-height:1.8; } */ .footer-sns{position:absolute; top:193px; right:0; padding:20px 0;} .footer-sns li{float:left; display:inline; margin-left:10px;} .footer-sns li:first-child{margin-left:0;} .footer-sns li a { display:block; width:35px; height:35px; background-color:#1a1a1a; border-radius: 50%; position:relative; } .footer-sns .ico_btn_kakaotalk_white img { width:73%; position:absolute; top:5px; left:5px; } .footer-sns .ico_btn_facebook_white img { width:56%; position:absolute; top:8px; left:7px; } .footer-sns .ico_btn_instagram_white img { width:60%; position:absolute; top:7px; left:7px; } .footer-sns .ico_btn_twitter_white img { width:66%; position:absolute; top:7px; left:6px; } .footer-sns .ico_btn_naver_blog_white img { width:66%; position:absolute; top:8px; left:6px; } .footer-sns li a:hover { background:#bf8864; } .footer-sns li a img { width:35px; } /* #footer p, #footer li{font-size:15px; font-weight:300; letter-spacing:0; color:#bfbfbf;} */ .foot-logo{float:left; margin:22px 50px 0 0;} .foot-info{float:left; width:calc(100% - 150px);} .footer-menu li{position:relative; display:inline-block; margin-left:10px; padding-left:10px; vertical-align:middle; color:#fff;} .footer-menu li:first-child{margin-left:0; padding-left:0; border-left:0;} .footer-menu li:before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; width:1px; height:10px; background-color:#727272;} .footer-menu li:first-child:before{display:none;} .footer-menu li a {line-height:10px; font-size:0.9em; font-weight:300; color:#fff;} /* .footer-menu li a:hover { text-decoration:underline; color:#80c4ff; } */ .footer-menu2{margin:0 auto 30px; line-height:0; font-size:0;} .footer-menu2 li{position:relative; display:inline-block; margin-left:10px; padding-left:10px; vertical-align:middle; line-height:75px; color:#fff;} .footer-menu2 li:first-child{margin-left:0; padding-left:0; border-left:0;} .footer-menu2 li:before{content:''; position:absolute; top:33px; left:0; width:1px; height:10px; background-color:#727272;} .footer-menu2 li:first-child:before{display:none;} .footer-menu2 li a {line-height:10px; font-size:15px; font-weight:300; color:#fff;} .footer-menu2 li a:hover { text-decoration:underline; color:#80c4ff; } .footer-info{line-height:1.6; margin-bottom:14px; } .footer-info span{color:#9c9a9a;} .footer-info a {color:#fff; text-decoration:none; font-weight:200;} .footer-info a:hover { color:#ffeb00; } #footer .copyright { color:#bfbfbf; } #footer a .design_kweb:hover { color:#fff !important; } .qr-code-box { position: absolute; right:25px; top:34%; } .qr-code-box > .qr-code-box-in { width:100px; height:100px; background-color:#fff; position: absolute; top:0; right:0; /* transform:translateY(-50%); */ } .qr-code-box > .qr-code-box-in > .qrcode { display:block; padding-top:5px; padding-left:5px; } .qr-code-box > .qr-code-box-in canvas { width:100px; height:100px; } @media only screen and (max-width: 1200px) { .footer-sns{right:20px;} .footer-info{width:100%;} } @media only screen and (max-width:768px) { .footer-sns {display:none; } .footer-menu li {margin-left:5px; padding-left:5px; } .footer-menu2 li {margin-left:5px; padding-left:5px; } .footer-menu2 li a {font-size:11px; } .foot-info {float:none; width:100%; } /* .footer-info{width:100%; line-height: 20px; white-space:pre;} */ .footer-info br {display:block; } /* .footer-copy {white-space:pre-line;} */ .foot-logo {float:none; margin:0 0 20px 0;} .qr-code-box {display:none; } #footer {height:auto; } } /* active된 페이지의 slogan 효과 */ .main-visual .item.active .carousel-caption { top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity:1; } /* Main Contents (메인 컨텐츠) ---------------------------------------------------------------------------------------------------------------------------------------------------------- */ .container {width: 100%;} #mainContainer{z-index:555;} .main-box {position: relative; display: block; width: 100%;} .page-box ._left p {margin-bottom: 36px;} .board-box p.customer-pic {display: inline-block; float: left; margin-right: 26px; width:147px; height:147px; } .board-box dl dt {font-size: 20px; color: #777; font-weight: 500; margin-bottom: 15px;} .board-box dl dd {display: block; min-height: inherit; max-width: inherit; font-size: 16px; line-height: 27px; color: #727272; margin-bottom: 5px; } .board-box dl dd a {text-shadow: none; text-align: left; display: block; min-height: inherit; max-width: inherit; font-size: 16px; line-height: 1.2; color: #727272; } .board-box dl dd.customer-tel a {font-family: 'Nanum Square'; font-size:28px; font-weight: 900; color:#0e6cc7; letter-spacing: -1px;} .board-box ._right {padding: 0 0 0 60px;} @media only screen and (min-width: 1201px) { #mainContainer{padding:50px 0 135px; margin:0 auto; width:1200px;} } @media only screen and (max-width: 1210px) { /*.movie_youtube { padding-bottom:56.25%; }*/ } .main-container h3{position:relative; margin-bottom:20px; line-height:1.2; font-weight:400; font-size:20px; color:#000;} .main-container h3 span{display:block; margin-top:5px; font-size:14px; color:#6c7079;} .main-top h3 img{float:right;} .main-top ul{margin:0 -10px;} .main-top ul:after{content:""; display:block; clear:both;} .main-top li{position:relative; float:left; margin:0 10px; width:calc(25% - 20px); background:#f9f9f9; border:1px solid #c5c5c5;} .main-top .txt-frame{margin:30px 25px; word-break:keep-all;} .main-top .txt-frame h3{margin-bottom:15px;} .main-top .img-frame{width:100%; overflow:hidden;} .main-top .img-frame img{width:100%;} .main-top a:hover{color:#555;} .main-top .caption-link{display:block; position:absolute; top:0; left:0; width:100%; height:100%;} .main-top .caption-link:before{position:absolute; top:-1px; left:-1px; content:""; display:block; width:0; height:0; -webkit-transition:all .4s ease-out; -moz-transition:all .4s ease-out; transition:all .4s ease-out;} .main-top .caption-link:after{position:absolute; bottom:-1px; right:-1px; content:""; display:block; width:0; height:0; -webkit-transition:all .4s ease-out; -moz-transition:all .4s ease-out; transition:all .4s ease-out;} .main-top .caption-link:hover:before{width:100%; height:100%; border-left:5px solid #ff4e00; border-top:5px solid #ff4e00;} .main-top .caption-link:hover:after{width:100%; height:100%; border-right:5px solid #ff4e00; border-bottom:5px solid #ff4e00;} .main-center{margin:20px -10px;} .main-center:after{content:""; display:block; clear:both;} .main-center > div{position:relative; float:left; margin:0 10px; padding:30px 25px; height:286px; background:#f9f9f9; border:1px solid #c5c5c5;} .webgine-box{width:calc(50% - 20px);} .notice-box{width:calc(25% - 20px);} .notice-box .more-btn{position:absolute; top:25px; right:20px;} .affilates-box{width:calc(25% - 20px);} @media only screen and (max-width: 1200px) { #mainContainer{padding:50px 20px 100px; width:100%;} .affilates-box{width:calc(25% - 10px);} } @media only screen and (max-width: 980px) { .notice-box{width:calc(50% - 20px);} .affilates-box{width:calc(50% - 20px);} .board-box {padding: 60px 30px;} .board-box p.customer-pic {width: 110px; display:flex; align-items: center; } .board-box dl dd.customer-tel a {font-size: 26px;} .board-box dl dd.customer-tel a { font-size:22px; } } @media only screen and (max-width: 768px){ #mainContainer{padding:20px 10px 30px; width:100%;} .notice-box{width:calc(50% - 10px);} .affilates-box{width:calc(50% - 10px);} .page-box ._left a.btn {width: 100%; display: block; float: none; margin-right: 0; margin-bottom: 20px;} .page-box ._left a._last {margin-bottom: 0;} .board-box ._left {border-bottom: 1px solid #e1e1e1;} .board-box p.customer-pic {width: 50%; float: left; margin-right: 0; margin-bottom: 25px; text-align: center; height:auto; } .board-box p.customer-pic img { width:60%; margin:0 auto; } .board-box dl {position: relative; display: table; margin: 0 auto;} .board-box dl dt { font-size: 26px; margin-top:20px; } } @media only screen and (max-width: 620px) { .customer-pic img { min-width:174px; } } @media only screen and (max-width: 480px) { .main-top li:first-child, .main-bottom li:first-child{margin-top:0;} .notice-box {width:100%;} .affilates-box {width:100%;} .board-box p.customer-pic {width: 100%; float: unset; margin-right: 0; margin-bottom: 20px; text-align: center;} .board-box p.customer-pic img { width:62%; min-width: 200px; } .board-box dl { float:unset; } } /*메인페이지 style 이동 20.09.30*/ .gallery-wrap .gallery-list { position: relative; } .gallery-wrap .gallery-list .owl-stage-outer, .gallery-wrap .gallery-list .owl-stage-outer .owl-stage, .gallery-wrap .gallery-list .owl-stage-outer .owl-stage .owl-item {height: 100%; overflow: hidden;} .gallery-wrap .gallery-list .owl-stage { position: relative; } .gallery-wrap .gallery-list .owl-carousel-item { height: 100%; position: relative; text-align: center; } .gallery-wrap .gallery-list .owl-carousel-item img { max-width: inherit; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; object-fit: cover; } .gallery-wrap .gallery-list .owl-carousel-item .img-title { color: #fff; width: 100%; overflow: hidden; font-size: 1.4em; font-weight: 500; margin-bottom:-30px; transition: all 0.5s; } .gallery-wrap .gallery-list .owl-carousel-item:hover .img-title {margin-bottom:0px; } .gallery-wrap .gallery-list .owl-carousel-item .img-content { opacity: 0; } .gallery-wrap .gallery-list .owl-carousel-item:hover .img-content { opacity: 1; } .gallery-wrap .gallery-list .owl-carousel-item .img-content i { display: block; margin-top: 20px; max-width: 110px; height: 37px; line-height: 35px; border: 1px solid #fff; text-align: center; font-style: normal; transition:all 0.5s; } .gallery-wrap .gallery-list .owl-carousel-item .img-content i:hover { background:var(--main-color); border-color:var(--main-color); } .gallery-wrap .gallery-list .owl-carousel-item .viewport { position: relative; height: 100%; padding: 0 30px; } .gallery-wrap .gallery-list .owl-carousel-item .img-frame { position: relative; height: 100%; max-width: 400px; text-align: center; vertical-align: middle; box-sizing: border-box; overflow: hidden; margin: 0 auto; border-radius:5px; } .gallery-wrap .gallery-list .owl-carousel-item .img-frame p { display: block; height: 100%; } .gallery-wrap .gallery-list .owl-carousel-item .txt-box { position: absolute; left: 0; bottom: 0; height:0; width: 100%; padding:0 10px; color: #fff;-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out; background: rgba(0,0,0,.6); text-align: left; display: flex; align-items: center; } .gallery-wrap .gallery-list .owl-carousel-item:hover .txt-box { height:18%; } /* .gallery-wrap .gallery-list .owl-carousel-item:hover .txt-box { height:80%; padding: 30px; } */ .gallery-wrap .gallery-list .owl-carousel-item .txt-box dl { width: 100%; display: table-cell; vertical-align: middle; text-align: left; text-indent: 30px; overflow: hidden; background: rgba(0,0,0,.4); } .gallery-wrap .gallery-list .owl-controls i{ font-size:20px; color:#000;} .gallery-wrap .gallery-list .owl-controls .owl-prev { cursor: pointer; left: 0; position: absolute; top: 35%; opacity:0.2; } .gallery-wrap .gallery-list .owl-controls .owl-next { cursor: pointer; position: absolute; right: 0; top: 35%; opacity:0.2; } .gallery-wrap .gallery-list .owl-controls .owl-prev:hover, .gallery-wrap .gallery-list .owl-controls .owl-prev:active, .gallery-wrap .gallery-list .owl-controls .owl-next:hover, .gallery-wrap .gallery-list .owl-controls .owl-next:active{ opacity:0.7; } /* .owl-theme .owl-controls { margin-top: 40px; } */ .gallery-wrap .gallery-list .owl-controls .owl-dots { display: inline-block; overflow: hidden; margin: 0 auto; } .gallery-wrap .gallery-list .owl-controls .owl-dots .owl-dot { border-radius: 50%; cursor: pointer; float: left; height: 20px; margin: 2px; width: 20px; transition:all 0.4s; border:3px solid #ccc; } /*background: #d9d9d9;*/ .gallery-wrap .gallery-list .owl-controls .owl-dots .owl-dot.active { background:var(--main-color); width: 40px; border-radius: 19px; border:none; } .gallery-wrap .gallery-list .owl-controls .owl-dots .owl-dot:hover { background:var(--main-color); border:3px solid var(--main-color); } @media (max-width: 772px) { .gallery-wrap .gallery-list .owl-carousel-item .img-content { opacity: 1; } } @media (min-width: 320px) { .gallery-wrap .gallery-list .owl-carousel-item .viewport { padding: 0; } } /*갤러리 코드 별로 css 디자인을 따로 할경우 #gallery-[code] .owl-controls {} 와 같은 형태로 추가. 예 ) #gallery-gallery .owl-controls { background: #ccc; }*/ /*메인 - 공지사항 영역 20.09.30*/ /*없어도 되는 소스인가? 삭제해도 문제가 없음 371번줄에서 잡아주고 있었음*/ .extract-article { border-top: 1px solid #e1e1e1; padding: 10px 0; transition: 0.3s background linear; } .extract-article:first-child { border:0; padding: 0 0 10px 0; } .extract-article .extract-content { line-height: 24px; } .extract-article .extract-content .extract-date { color: #acacac; } .extract-webzine .extract-article .extract-thumb { position:relative; text-align: center; vertical-align:center; border:1px solid #eee; } .extract-webzine .extract-article .extract-thumb img { max-height: 100%; max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .extract-webzine .extract-article .extract-content { font-size:13px; } .extract-webzine .extract-article .extract-content .extract-title { font-weight: bold; font-size:14px; padding: 2px 0; } .extract-board .extract-article .extract-content .extract-title { display: inline-block; font-weight: normal; vertical-align: middle; width: 95%; } .extract-board .extract-article .extract-content .extract-title:hover { text-decoration: underline; } .extract-board .extract-article .extract-content .extract-title-arrow { display: inline-block; vertical-align: middle; width: 5%; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 767px) { .extract-webzine .extract-article .extract-thumb { height: 200px; } .extract-webzine .extract-article .extract-content .extract-title{ padding: 2% 0; } } @media (min-width: 768px) { .extract-webzine .extract-article { box-sizing: content-box; height: 100px; position: relative; } .extract-webzine .extract-article .extract-thumb { bottom: 10px; left: 0; position: absolute; } .extract-webzine .extract-article .extract-content { height: 100%; margin-left: 115px; overflow: hidden; width: calc(100% - 115px); } .extract-webzine .extract-article .extract-thumb { width: 100px; height: 100px; } } /*메인 - 제휴사 슬라이더 배너영역 - INDEX에서 이동 20.09.30*/ #affilates .affilates-list .owl-stage-outer {height: 270px; padding: 58px 0; background: #607d8b; overflow:hidden;} #affilates .affilates-list .owl-stage-outer, #affilates.company_bn_slide { background: #c1c1c1; } #affilates .affilates-list .owl-stage-outer .owl-stage, #affilates .affilates-list .owl-stage-outer .owl-stage .owl-item {height:100%;} #affilates .affilates-list .owl-carousel-item{text-align:center;} #affilates .affilates-list .viewport {position:relative; float:left; width:100%; height: 220px; box-sizing:border-box; padding: 35px;} #affilates .affilates-list .viewport .img-frame{position:relative; margin:0 auto; max-width:405px; height:150px; text-align:center; background: #fff; box-shadow: 0px 6px 10px rgba(0,0,0,.3); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s;} #affilates .affilates-list .viewport .img-frame:hover, #affilates .affilates-list .viewport .img-frame:active{-webkit-transform:scale(1.0); -moz-transform:scale(1.0); -ms-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); box-shadow: 0px 15px 29px rgba(0,0,0,.2);} /*확대 시 이미지 살짝 깨짐 scale(1.1)*/ #affilates .affilates-list .viewport .img-frame a{display:block; width:100%; height:100%; -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s;} #affilates .affilates-list .viewport .img-frame img{position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-height:100%; max-width:100%; box-sizing:border-box;} #affilates .affilates-list .owl-controls {margin-top: 0;} #affilates .affilates-list .owl-controls i{font-size:20px; color:#000;} #affilates .affilates-list .owl-controls .owl-prev {cursor:pointer; position: absolute; left:0; top:50%; margin-top:-20px; opacity:0.2;} #affilates .affilates-list .owl-controls .owl-next {cursor:pointer; position: absolute; right:0; top:50%; margin-top:-20px; opacity:0.2;} #affilates .affilates-list .owl-controls .owl-prev:hover, #affilates .affilates-list .owl-controls .owl-prev:active, #affilates .affilates-list .owl-controls .owl-next:hover, #affilates .affilates-list .owl-controls .owl-next:active{opacity:0.7;} #affilates .affilates-list .owl-controls .owl-dots {display:inline-block; overflow:hidden; margin:0 auto;} #affilates .affilates-list .owl-controls .owl-dots .owl-dot {background: #ccc; border-radius: 50%; cursor: pointer; float: left; height: 10px; margin: 2px; width: 10px;} #affilates .affilates-list .owl-controls .owl-dots .owl-dot.active {background: #000;} /*.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}*/ /*중복삭제*/ /*추가*/ /*sub.css에 있어야하나, 반영이 안되서 이곳에 반영*/ /*위아래 여백주기*/ .height_space50 { width:100%; height:50px; } .height_space100 { width:100%; height:100px; } .height_space200 { width:100%; height:200px; } .height_space300 { width:100%; height:300px; } /*-------세종의료기 기준 스타일 추가 210525------*/ /*푸터 라이센스 정보*/ .licence_info a { color:#222; font-weight:400; } .licence_info a:hover { color:#fff; } .licence_info button { padding:4px 4px; font-size:12px; color:rgba(255,255,255,0.9); line-height: 12px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0);} .licence_info button:hover { background:#fff; color:#000; } .modal-title { font-size:18px !important; } @media screen and (max-width:768px) { .licence_info { font-size:13px; } } /*케이웹미디어 버튼*/ .design_kweb:hover { color:#4fff9c; } .design_kweb { color:#bfbfbf; transition:all 0.4s;} /*주요취급제품 페이지*/ .more_info { text-align:center; } .more_info .pc { display:block; } .more_info .mobile { display:none; } @media (max-width:768px) { .more_info .pc { display:none; } .more_info .mobile { display:block; } .no_padding_m { padding:0; } } /*제품안내 페이지(제이주방가구)*/ .sub_head_tit { font-size:32px; font-weight:600; } .sub_product_info { background:#fff; margin-top:10px; border: 1px solid rgba(0,0,0,0.1); border-top:5px solid #8bc34a; } /*background:#e6f8d1*/ .sub_product_info:nth-child(2) { } .sub_product_info .img_box { } /*background:red;*/ .sub_product_info .row { padding:30px; } .sub_product_info .img_box { } /*margin-right: 30px;*/ .sub_product_info .img_box.right { margin-right: 0px; } .sub_product_info.orange { border-top: 5px solid #ff9800; } .sub_product_info.blue { border-top: 5px solid #2196f3; } .sub_product_info.yellow { border-top: 5px solid #ffc107; } .sub_product_info.purple { border-top: 5px solid #9c27b0; } .sub_head_tit i { color:#8bc34a } .sub_head_tit i.orange { color:#ff9800; } .sub_head_tit i.blue { color:#2196f3; } .sub_head_tit i.yellow { color:#ffc107; } .sub_head_tit i.purple { color:#9c27b0; } .sub_box_bae1 { margin-top:50px; } /*.product_info .sub_box_bae1:nth-child(2) i { color:red !important; }*/ @media (max-width:1220px) { .sub_box_bae1 { padding:0 15px; } } @media (max-width:1000px) { .sub_product_info .row { padding: 15px; } } @media (max-width:768px) { .sub_product_info .img_wrap img { width:100%; } } @media (max-width:640px) { .sub_product_info .row { padding: 0px; } } /*시공갤러리 페이지 드롭다운 버튼*/ /*위아래 여백주기*/ .height_space50 { width:100%; height:50px; } .height_space100 { width:100%; height:100px; } .height_space200 { width:100%; height:200px; } .height_space300 { width:100%; height:300px; } .minheight300 { height:300px; background:#fff; } /*서브페이지 컨텐츠 없을때 210215 bjm*/ /*서브페이지 탭버튼 1*/ .sub_fulldown_btn_01.btn-group, .sub_fulldown_btn_01 .btn-group-vertical { margin-left:0; margin-right:0; width:100%; height: 60px; display:none; } .sub_fulldown_btn_01.btn-group > .btn:first-child { width: 100%; height: 50px; font-size: 20px; z-index: 9999; } .sub_fulldown_btn_01 .dropdown-menu { width:100%; border-radius: 0px; } .sub_fulldown_btn_01 .btn-default:hover { background: #011d54 !important; border: 1px solid #011d54 !important; color:#fff !important; } .sub_fulldown_btn_01 .btn-default { color: #fff; background-color: #011d54; border-color: #011d54; margin-bottom: 10px; } /*서브페이지 탭버튼 1 21.02.16*/ .sub_fulldown_btn_01 { display:none; } .sub_fulldown_btn_01 .dropdown-menu { top: 42px; } .sub_fulldown_btn_01 .btn-default { color: #fff; background-color: #337ab7; border-color: #337ab7; margin-bottom: 10px; } .sub_fulldown_btn_01 .dropdown-menu > li > a { line-height: 40px; font-size: 18px; } @media all and (max-width:768px) { .sub_fulldown_btn_01{ display:block; } /*210216 bjm*/ .sub_fulldown_btn_01.btn-group, .sub_fulldown_btn_01 .btn-group-vertical { display:block; margin-top: -5px; } /*210416 게시판 쓰기 페이지에서 드롭다운 메뉴가 pc에서 모바일 버튼이 보이는 현상 처리*/ } /*서브페이지 보장구 리스트 (매머드 보유장비 페이지)*/ .business_area { position: relative; } .business_area .list-box { position: relative; display: inline-block; width: 100%; } .business_area .list-box .img-frame { width: 33.33333333333333%; padding: 0 20px; text-align: center; float: left; margin-bottom: 40px; } .business_area .list-box .img-frame > div { border: 1px solid #025cab; border-top: none; background:rgb(2,92,171); color: #fff; } /*background: rgba(0,0,0,0.01);*/ .business_area .list-box .img-frame > div a { width: 130px; /*background: #025cab;*/ border: 2px solid #fff; font-weight:400; color: #fff; display: block; margin: 10px auto 20px; padding: 7px 0px; font-size: 16px; font-weight: 400; border-radius:50px; } .business_area .list-box .img-frame > div a:hover { background: #337ab7; border: 2px solid #337ab7; color: #fff; } .business_area .list-box .img-frame p { background-repeat: no-repeat; background-size: cover; height: 350px; border: 1px solid #025cab; border-bottom: 5px solid #025cab; } .business_area .list-box ._frame01 p { background-image: url("../images/sub/product_01_1.jpg"); } .business_area .list-box ._frame02 p { background-image: url("../images/sub/product_01_2.jpg"); } .business_area .list-box ._frame03 p { background-image: url("../images/sub/product_01_3.jpg"); } .business_area .list-box ._frame04 p { background-image: url("../images/sub/product_01_4.jpg"); } .business_area .list-box ._frame05 p { background-image: url("../images/sub/product_01_5.jpg"); } .business_area .list-box ._frame06 p { background-image: url("../images/sub/product_01_6.jpg"); } .business_area .list-box ._frame07 p { background-image: url("../images/sub/product_01_7.jpg"); } .business_area .list-box ._frame08 p { background-image: url("../images/sub/product_01_8.jpg"); } .business_area .list-box ._frame09 p { background-image: url("../images/sub/product_01_9.jpg"); } .business_area .list-box ._frame10 p { background-image: url("../images/sub/product_01_10.jpg"); } .business_area .list-box ._frame11 p { background-image: url("../images/sub/product_01_11.jpg"); } .business_area .list-box ._frame12 p { background-image: url("../images/sub/product_01_12.jpg"); } .business_area .list-box ._frame13 p { background-image: url("../images/sub/product_01_13.jpg"); } .business_area .list-box ._frame21 p { background-image: url("../images/sub/product_02_1.jpg"); } .business_area .list-box ._frame22 p { background-image: url("../images/sub/product_02_2.jpg"); } .business_area .list-box ._frame23 p { background-image: url("../images/sub/product_02_3.jpg"); } .business_area .list-box ._frame24 p { background-image: url("../images/sub/product_02_4.jpg"); } .business_area .list-box ._frame25 p { background-image: url("../images/sub/product_02_5.jpg"); } .business_area .list-box ._frame26 p { background-image: url("../images/sub/product_02_6.jpg"); } .business_area .list-box ._frame31 p { background-image: url("../images/sub/product_03_1.jpg"); } .business_area .list-box ._frame32 p { background-image: url("../images/sub/product_03_2.jpg"); } .business_area .list-box ._frame33 p { background-image: url("../images/sub/product_03_3.jpg"); } .business_area .list-box ._frame34 p { background-image: url("../images/sub/product_03_4.jpg"); } .business_area .list-box ._frame35 p { background-image: url("../images/sub/product_03_5.jpg"); } .business_area .list-box ._frame41 p { background-image: url("../images/sub/product_04_1.jpg"); } .business_area .list-box ._frame42 p { background-image: url("../images/sub/product_04_2.jpg"); } /*.business_area .list-box ._frame04 p { background-image: url("../images/sub/main_link_img_4.jpg"); } */ .business_area .list-box h4 { display: inline-block; background-color: #025cab; font-size: 22px; font-weight: 500; padding: 10px 0 0 0;white-space: pre-line; color: #ffeb3b; text-align: center; width: 100%; } /* padding: 10px 0; height: 50px; line-height: 41px;*/ .business_area .list-box ul { position: relative; display: inline-block; margin: 15px auto 10px; } .business_area .list-box ul li { position: relative; margin-top: 5px; font-size: 16px; font-weight: 300; text-align: left; letter-spacing: 0px; } .business_area .list-box ul li:first-child { margin-top: 0; color: #fff; } .business_area .list-box ul li:before { content: ''; position: relative; width: 3px; height: 3px; background-color: #16599c; display: inline-block; top: -4px; margin-right: 6px; } .business_area .txt-box p { margin-top: 40px; padding: 0 15px; font-size: 20px; font-weight: 300; line-height: 1.5; color: #333; white-space: pre-line; } .business_area .sign-box { float: right; margin-right: 15px; font-size: 24px; font-weight: 400; color: #333; line-height: 1; } .business_area .sign-box span { margin-left: 20px; } .business_area .sign-box:after { content: ''; clear: both; float: none; display: block; } @media only screen and (max-width:1200px) { .business_area .list-box .img-frame { width: 50%; } /*margin-top: 40px;*/ .business_area .list-box ._frame01, .business_area .list-box ._frame02 { margin-top: 0; } .business_area .list-box .img-frame > div a { margin: 5px auto 25px; } } @media only screen and (max-width:980px) { .business_area .txt-box p { font-size: 16px; } .business_area .list-box .img-frame { width: 50%; } } @media only screen and (max-width:768px) { .business_area .list-box .img-frame { width: 100%; padding: 0; } /*margin-top: 40px;*/ .business_area .list-box .img-frame p { margin-bottom:0; height: 200px !important; } .business_area .list-box ._frame01 { margin-top: 0; } .business_area .list-box .img-frame { margin-bottom: 5px; } } /*서브페이지 pc/모바일 별도 이미지형 컨텐츠 (세종의료기) 210513*/ .content_pc { display:block; } .content_m { text-align:center; display:none; } @media (max-width:640px) { .content_pc { display:none; } .content_m { display:block; } } /*메인 - 섬네일 이미지 슬라이더 추가 owl 슬라이더*/ .main_owl_slider_responsive_01 { width:calc(100% - 720px); } /*시공갤러리 페이지 드롭다운 버튼*/ /*위아래 여백주기*/ .height_space50 { width:100%; height:50px; } .height_space100 { width:100%; height:100px; } .height_space200 { width:100%; height:200px; } .height_space300 { width:100%; height:300px; } .minheight300 { height:300px; background:#fff; } /*서브페이지 컨텐츠 없을때 210215 bjm*/ /*서브페이지 탭버튼 1*/ .sub_fulldown_btn_01.btn-group, .sub_fulldown_btn_01 .btn-group-vertical { margin-left:0; margin-right:0; width:100%; height: 60px; display:none; } .sub_fulldown_btn_01.btn-group > .btn:first-child { width: 100%; height: 50px; font-size: 20px; z-index: 9999; } .sub_fulldown_btn_01 .dropdown-menu { width:100%; border-radius: 0px; } .sub_fulldown_btn_01 .btn-default:hover { background: #011d54 !important; border: 1px solid #011d54 !important; color:#fff !important; } .sub_fulldown_btn_01 .btn-default { color: #fff; background-color: #011d54; border-color: #011d54; margin-bottom: 10px; } /*서브페이지 탭버튼 1 21.02.16*/ .sub_fulldown_btn_01 { display:none; } .sub_fulldown_btn_01 .dropdown-menu { top: 42px; } .sub_fulldown_btn_01 .btn-default { color: #fff; background-color: #025cab; border-color: #025cab; margin-bottom: 10px; } .sub_fulldown_btn_01 .dropdown-menu > li > a { line-height: 40px; font-size: 18px; } @media all and (max-width:768px) { .sub-tab.new_tab { display:none; } /**/ .sub_fulldown_btn_01{ display:block; } /*210216 bjm*/ .sub_fulldown_btn_01.btn-group, .sub_fulldown_btn_01 .btn-group-vertical { display:block; margin-top: -5px; } /*210416 게시판 쓰기 페이지에서 드롭다운 메뉴가 pc에서 모바일 버튼이 보이는 현상 처리*/ } /*푸터 라이센스 정보*/ .licence_info { background:#1a1a1a; padding:10px; color:rgba(255,255,255,0.6); font-size:0.9em; text-align:center; } .licence_info a { color:#dbdbdb; font-weight:400; } .licence_info a:hover { color:#fff; } .licence_info button { padding:4px 4px; font-size:12px; color:rgba(255,255,255,0.9); line-height: 12px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0);} .licence_info button:hover { background:#fff; color:#000; } .modal-title { font-size:18px !important; } @media screen and (max-width:768px) { .licence_info { font-size:13px; line-height: 1.3; text-align: left; } .licence_info a {display: block; margin-top: 5px; } } /*pc 히든처리*/ .pc_hidden { display:none; } @media (max-width:768px) { .pc_hidden { display:block; } } /*모바일 히든처리*/ @media (max-width:768px) { .mobile_hidden { display:none; } } /*전화걸기 버튼(fixed형)*/ .phone_call { width:60px; height:60px; position:fixed; bottom:155px; right:20px; display:block; text-align: center; z-index: 10000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%; /*background:rgb(0,150,136,0.85);*/ background:#254de1; box-shadow: 0px 10px 20px rgba(0,0,0,0.3); } /* .phone_call:hover { background:var(--main-color); } */ .phone_call i{color: #fff; font-size: 28px; display: block; line-height: 60px;} .phone_call.msg {bottom:90px; background: #44bd1c; } .phone_call.msg i {font-size: 24px; } } @media only screen and (max-width: 980px) { .phone_call {width: 60px; height: 60px; } .phone_call i {line-height: 60px; font-size: 26px;} } @media only screen and (max-width: 768px) { .phone_call {width: 50px; height: 50px; bottom:125px; right: 15px; background-color:#254de1; } .phone_call i {line-height: 52px; font-size: 26px;} .phone_call.msg {bottom:70px; } } /*메인비주얼 슬라이더 텍스트 정보 교체 (pc/모바일 이미지 교체)*/ .pc_on { display:inline-block; } .mobile_on { display:none; } @media only screen and (max-width: 768px) { .pc_on { display:none; } .mobile_on { display:block; margin: 0 auto; } } /* 연혁 영역 */ #wrap { overflow: hidden; } .cont-wrap .stitle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .cont-wrap .cont-mid { margin: 4.5rem 0; } .cont-wrap .cont-mid::before { content: ""; display: table; } .cont-wrap .cont-mid::after { content: ""; display: block; clear: both; } .history .history-title { text-align: center; margin-bottom: 2.8rem; } .history .history-title .icon { display: inline-block; width: 87px; height: 80px; background: url("../../images/kps/sub0104_symbol.png") no-repeat 0 0/cover; } .history .history-title strong { font-size: 4.5rem; display: block; font-weight: 600; } .history .history-title small { color: #767676; font-size: 1.8rem; font-weight: 300; } .history .timeline { position: relative; padding-bottom: 5rem; } .history .timeline::after { content: ""; display: block; clear: both; } .history .timeline::before { content: ""; width: 1px; height: calc(100% - 3.8rem); background-color: #e0e5ed; position: absolute; top: .5rem; left: 50%; z-index: -1; } .history .timeline > li { width: 50%; padding-left: 5.6rem; position: relative; margin-bottom: 2rem; opacity: 0; -webkit-transform: translateY(5rem); transform: translateY(5rem); -webkit-transition: all .3s ease; transition: all .3s ease; } .history .timeline > li.active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .history .timeline > li.active img { -webkit-transform: translateY(-3rem); transform: translateY(-3rem); } .history .timeline > li:before { content: ""; position: absolute; top: 2.9rem; left: 0; width: 3.5rem; height: 1px; background-color: #3944a7; } /*top:.9rem*/ .history .timeline > li:after { content: ""; position: absolute; top:2.5rem; left: 0; width: .9rem; height: .9rem; border: 3px solid #344480; background-color: #fff; border-radius: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /*top: .5rem*/ .history .timeline > li:nth-child(odd) { right: -50%; } .history .timeline > li:nth-child(even) { padding-right: 5.6rem; text-align: right; } .history .timeline > li:nth-child(even):after { right: 0; left: inherit; -webkit-transform: translateX(50%); transform: translateX(50%); } .history .timeline > li:nth-child(even):before { right: 0; left: inherit; } .history .timeline > li strong { display: block; font-size: 3.5rem; font-weight: 500; color: #000; margin-bottom: 15px; } .history .timeline > li figure {display: inline-block; width: 47.35rem; height: 33.9rem; margin-top: 1rem; } .history .timeline > li figure img { -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transform: translateY(0); transform: translateY(0); } .history .timeline > li ul {padding-bottom:40px;} .history .timeline > li ul > li { overflow: hidden; line-height: 25px; font-size:1.8rem;} .history .timeline > li ul > li > span { font-weight: 500; color: #333; } .history .timeline > li:nth-child(even) ul > li { padding-right: 0px; position: relative; letter-spacing: -1px; } .history .timeline > li:nth-child(even) ul > li em { position: absolute; right: 0; margin-right: 0; } .history .timeline > li:nth-child(even) ul > li span { text-align: right; } @media screen and (max-width: 999px) .container {width: 100% !important;} @media all and (max-width:767px) { .history .timeline::before { left: .45rem; height: calc(100% - 4.2rem); } .history .timeline > li { width: 100%; padding-left: 2rem; padding-right: 2rem; } .history .timeline > li figure { width: 100%; } .history .timeline > li:nth-child(even) { text-align: left; padding-right: 2rem; } .history .timeline > li:nth-child(even)::after { right: inherit; left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .history .timeline > li:nth-child(even)::before { right: inherit; left: 0; } .history .timeline > li:nth-child(odd) { right: 0; } .history .timeline > li::after { -webkit-transform: translateX(0); transform: translateX(0); } .history .timeline > li::before { width: 1.5rem; } .history .timeline .history-img { margin-top: 0; } } /* sub03 사업분야 영역 */ .sub03_content03 .sub03_content02 {} .sub03_content03 .sub03_content02 p {font-size:40px; color:#666; font-family:'NotoSansKR', sans-serif; font-weight:200; line-height:50px;} .sub03_content03 .sub03_content02 p span {font-family:'NotoSansKR', sans-serif; font-weight:500;} .sub03_content03_03 {margin-top:54px; margin-bottom:33px;} .sub03_box_wrap {display:flex;} .sub03_box_wrap .sub03_cont_box {margin-right:34px; width:calc(100%/ 4); background:#4b8bc9;} .sub03_box_wrap .sub03_cont_box:last-child {margin-right:0px;} .sub03_box_wrap .sub03_cont_box img {display:block; margin:17px auto; max-width:100%; height:auto; } .sub03_box_wrap .sub03_cont_box p {text-align:center; font-size:26px; font-family:'NotoSansKR', sans-serif; color:#fff; padding-bottom:36px;} .sub03_content04 {background:url('/images/sub/sub_content03_bg02.png') no-repeat, #e6f1ff; height:952px; margin-bottom:84px; position:relative; background-position:right bottom;} .sub03_content04 > img {max-width:100%; height:auto;} .sub03_content04 .sub03_content04_img01 {position:absolute; z-index:1; top: 37px; left: 37px;} .sub03_content04 .sub03_content04_img02 {position:absolute; right:0px; top: 194px;} .sub03_content05 {} .sub03_content05 > p {font-size:25px; color:#555; font-family:'NotoSansKR', sans-serif; font-weight:500; margin-bottom:30px;} .sub03_content05 > p > img {vertical-align: middle; margin-right:6px;} .sub03_box_wrap_05 {overflow:hidden;} .sub03_box_wrap_05 .sub03_cont_box {margin-right:31px; float:left; background:#e0edff; margin-top:30px;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(1) {margin-top:0px;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(2) {margin-top:0px;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(3) {margin-top:0px;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(3n) {margin-right:0px;} .sub03_box_wrap_05 .sub03_cont_box p {font-size:26px; text-align:center; font-family:'NotoSansKR', sans-serif; color:#565656; padding:43px 0; font-weight:400;} @media all and (max-width:1200px) { .sub03_content03 {padding:0 20px;} .sub03_content03 .sub03_content02 p {font-size:35px;} .sub03_box_wrap_05 .sub03_cont_box {width:calc((100% - 62px)/3);} .sub03_box_wrap_05 .sub03_cont_box:nth-child(3) {margin-right:0px;} .sub03_box_wrap_05 .sub03_cont_box p {font-size:20px;} } @media all and (max-width:999px) { .sub03_box_wrap {flex-wrap: wrap;} .sub03_box_wrap .sub03_cont_box {padding:10px;} .sub03_box_wrap_05 .sub03_cont_box {width:50%;} .sub03_box_wrap .sub03_cont_box img {width:147px;} .sub03_box_wrap .sub03_cont_box:nth-child(2) img {width:167px;} .sub03_box_wrap .sub03_cont_box:nth-child(3) img {width:137px;} .sub03_content04 { background-size: 100vmin; } .sub03_content04 .sub03_content04_img01 {width:100%; left:0px; padding:0 20px;} .sub03_content04 .sub03_content04_img02 {width:100%;} .sub03_box_wrap_05 .sub03_cont_box img {width:100%;} .sub03_box_wrap_05 .sub03_cont_box {width:calc((100% - 31px)/2);} .sub03_box_wrap .sub03_cont_box { width: calc((100% - 34px)/2); margin-bottom:34px;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(2n) {margin-right:0px;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(3) {margin-top:30px; margin-right:30px;} .sub03_box_wrap .sub03_cont_box:nth-child(2n) {margin-right:0px;} } @media all and (max-width:680px) { .sub03_content03 .sub03_content02 p {font-size:27px; line-height: 35px;} .sub03_box_wrap .sub03_cont_box { width:calc((100% - 34px)/2); margin-top:30px;} .sub03_content04 .sub03_content04_img01 {padding:20px; top:15px; left:0px;} .sub03_content04 .sub03_content04_img02 {top:253px;} .sub03_content04 {height:141vmin;} .sub03_content03_03 {margin-top:15px;} .sub03_box_wrap_05 .sub03_cont_box p {font-size:18px; padding:20px 0; margin:0px 0;} .sub03_box_wrap_05 .sub03_cont_box {width:100%;} .sub03_box_wrap_05 .sub03_cont_box:nth-child(2) {margin-top:30px;} .sub03_box_wrap .sub03_cont_box:nth-child(1) {margin-top:0px;} .sub03_box_wrap .sub03_cont_box:nth-child(2) {margin-top:0px; margin-right:0px;} .sub03_box_wrap .sub03_cont_box:nth-child(3) {margin-top:0px;} .sub03_box_wrap .sub03_cont_box:nth-child(4) {margin-top:0px; margin-right:0px;} } @media all and (max-width:500px) { .sub03_box_wrap .sub03_cont_box { width:calc((100% - 5px)/2);} .sub03_box_wrap .sub03_cont_box img {width:90px;} .sub03_box_wrap .sub03_cont_box:nth-child(2) img {width:101px;} .sub03_box_wrap .sub03_cont_box:nth-child(3) img {width:80px;} .sub03_box_wrap .sub03_cont_box:nth-child(4) img {width:84px;} .sub03_box_wrap .sub03_cont_box p {font-size:18px; letter-spacing:-1px;} .sub03_box_wrap .sub03_cont_box {margin-right:5px;} .sub03_box_wrap .sub03_cont_box:nth-child(1) {margin-bottom:5px;} .sub03_box_wrap .sub03_cont_box:nth-child(2) {margin-bottom:5px;} .sub03_content03_03 {margin-bottom:0px;} } /* cei 자격시험 영역 */ .cei_qualification_wrap {} .cei_qualification_content01 p b { font-size: 32px; display: block; font-family: 'NotoSansKR', sans-serif; margin-top: 40px; margin-bottom: 41px; font-weight: 500; line-height: 1.5; color: #f38011; white-space: pre-line;} .cei_qualification_content02 .text_style01 {margin-bottom:11px;} .text_style01 {color:#3292c4; font-size:32px; font-family:'NotoSansKR', sans-serif; font-weight:500; margin-bottom:27px;} .text_style02 {color:#555; font-size:22px; line-height:30px;} .text_style03 {color:#555; font-size:26px; font-family:'NotoSansKR', sans-serif; font-weight:500; margin-top:20px;} .text_style04 {font-size:22px; color:#777; line-height:30px; letter-spacing:-2px;} .cei_qualification_content02 {margin-top:54px; margin-bottom:70px;} .cei_qualification_content03 {overflow:hidden; margin-top:40px;} .cei_qualification_content03 .cei_qualification_content03_con_box01 {float:left; width:50%;} .cei_qualification_content03 .cei_qualification_content03_con_box01 > p:nth-child(1) {margin-bottom:20px; font-family:'NotoSansKR', sans-serif; font-weight:500; color:#333; font-size:28px;} .cei_qualification_content03 .cei_qualification_content03_con_box01 > p:nth-child(1) img {vertical-align: middle; margin-right:6px;} .cei_qualification_content04 {margin-top:101px;} .cei_qualification_content04 > img {max-width:100%; height:auto; display:block; margin:0 auto;} .cei_qualification_content04_m {display:none !important;} .cei_qualification_content05 {margin-top:101px;} .cei_qualification_content06 {margin-top:101px;} .cei_qualification_table {width:100%;} .cei_qualification_table thead tr {border-top:1px solid #c7c7c7;} .cei_qualification_table thead tr th {color:#333; font-size:18px; font-family:'NotoSansKR', sans-serif; font-weight:500; background:#efefef; height:32px; line-height: 32px; text-align:center; border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; border-right:1px solid #c7c7c7;} .cei_qualification_table thead tr th:last-child {border-right:none;} .table_text_style01 {color:#333; font-size:18px; font-family:'NotoSansKR', sans-serif; font-weight:500; text-align:center; background:#f9f9f9;} .table_text_style02 {color:#333; font-size:18px; font-family:'NotoSansKR', sans-serif; font-weight:400; text-align:left; padding:20px;} .cei_qualification_table tbody tr .text_style_w01 {width:190px; vertical-align: middle;} .cei_qualification_table tbody tr .text_style_w02 {width:105px; vertical-align: middle;} .cei_qualification_table tbody tr td {border-right:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; padding:20px;} .cei_qualification_table tbody tr td span {color:#3292c4;} .cei_qualification_table tbody tr td:last-child {border-right:none;} .cei_qualification_table02 {width:100%;} .cei_qualification_table02 thead tr {border-top:1px solid #c7c7c7;} .cei_qualification_table02 thead tr th { color:#333; font-size:18px; font-family:'NotoSansKR', sans-serif; font-weight:500; background:#efefef; height:32px; line-height: 32px; text-align:center; border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; border-right:1px solid #c7c7c7;} .cei_qualification_table02 thead tr th:last-child {border-right:none;} .cei_qualification_table02 tbody tr td {border-right:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; vertical-align: middle;} .cei_qualification_table02 tbody tr .table_r {border-right:none;} .tb_r {border-right:1px solid #c7c7c7 !important;} .table_text_style02_01 {color:#333; font-size:18px; font-family:'NotoSansKR', sans-serif; font-weight:400; text-align:center; padding:5px;} @media all and (max-width:1200px) { .cei_qualification_wrap {padding:0 20px;} .text_style04 > br {display:none;} .text_style01 {word-break: break-all;} .text_style04 {word-break: break-all;} .cei_qualification_content03 .cei_qualification_content03_con_box01 {margin-right: 20px; width: calc((100% - 20px)/2);} .cei_qualification_content03 .cei_qualification_content03_con_box01:nth-child(2) {margin-right:0px;} .sub_content01 {padding:0 20px;} .sub03_content03 .sub_content01 {padding:0 0px;} } @media all and (max-width:999px) { .cei_qualification_content01 p b {font-size:28px;} .text_style01 {font-size:22px !important;} .text_style02 {font-size:20px;} .cei_qualification_content03 .cei_qualification_content03_con_box01 > p:nth-child(1) {font-size:25px;} .text_style03 {font-size:24px;} .text_style04 {font-size:20px;} .table_text_style02 {padding:20px !important;} } @media all and (max-width:680px) { .cei_qualification_content01 p {font-size:25px;} .cei_qualification_content04_pc {display:none !important;} .cei_qualification_content04_m {display:block !important;} .cei_qualification_content01 p b {font-size:20px;} .text_style01 {font-size:22px;} .text_style02 {font-size:16px; line-height:20px; word-break: break-all;} .cei_qualification_content03 .cei_qualification_content03_con_box01 > p:nth-child(1) {font-size:20px;} .text_style03 {font-size:18px; } .text_style04 {font-size: 16px; word-break: break-all; line-height:25px;} .cei_qualification_content04 {margin-top:30px;} .cei_qualification_table thead tr th {font-size:16px; vertical-align: middle;} .table_text_style01 {font-size:16px;} .table_text_style02 {font-size:16px;} .cei_qualification_table02 thead tr th {font-size:16px; vertical-align: middle;} .table_text_style02_01 {font-size:16px;} } /* cei자격시험 일정 */ .cei_qualification_content02_02_01 img {max-width:100%; height:auto;} .table_text_style01_01 { color: #333; font-size: 18px; font-family: 'NotoSansKR', sans-serif; font-weight: 500; text-align: left; background: #f9f9f9; vertical-align: middle !important; padding-left:40px !important; width:360px;} .table_text_style02 { color: #333; font-size: 18px; font-family: 'NotoSansKR', sans-serif; font-weight: 400; text-align: left; padding-left:15px !important;} .cei_qualification_content05_01 {margin-top:101px;} .cei_qualification_content02_02_01 {margin-bottom:101px;} @media all and (max-width:1200px) { .cei_qualification_content05_01 { margin-top: 50px; } } @media all and (max-width:680px) { .table_02 thead tr th {font-size:16px; vertical-align: middle;} .table_text_style01_01 {font-size:16px; padding-left:13px !important;} .table_text_style02 {font-size:16px;} } /* sub02 사업분야 - 사업품목 영역 */ .business_item_wrapper {overflow:hidden; width:100%;} .business_item_wrapper .business_item_l {float:left; margin-top:50px; width:50%;} .business_item_wrapper .business_item_l .business_box01_l {} .business_item_wrapper .business_item_l .business_box01_l p {font-family: 'NotoSansKR', sans-serif; font-size:25px; font-weight:400; position:relative; color:#333;} .business_item_wrapper .business_item_l .business_box01_l p:after {content: ''; position: absolute; top: 11px; left: 146px; width: 3px; height: 21px; background-color: #333;} .business_item_wrapper .business_item_l .business_box01_l p > span {display:inline-block; margin-left:20px; color:#bf8864; font-weight:600;} .business_item_wrapper .business_item_l .business_box02_l {margin-top:30px;} .business_item_wrapper .business_item_l .business_box02_l p {font-family: 'NotoSansKR', sans-serif; font-size:24px; font-weight:600; color:#333;} .business_item_wrapper .business_item_l .business_box02_l ul {margin-top:20px;} .business_item_wrapper .business_item_l .business_box02_l ul li {margin-bottom:20px; font-family: 'NotoSansKR', sans-serif; font-size:20px; color:#333; position:relative; padding-left:13px;} .business_item_wrapper .business_item_l .business_box02_l ul li:before {content: ''; position: absolute; top: 14px; left: 0px; width: 6px; height: 6px; background-color: #333; border-radius:6px;} .business_item_wrapper .business_item_l .business_box03_l {margin-top:30px;} .business_item_wrapper .business_item_l .business_box03_l p {font-family: 'NotoSansKR', sans-serif; font-size:24px; font-weight:600; color:#333;} .business_item_wrapper .business_item_l .business_box03_l ul {margin-top:20px;} .business_item_wrapper .business_item_l .business_box03_l ul li {margin-bottom:20px; font-family: 'NotoSansKR', sans-serif; font-size:20px; color:#333; position:relative; padding-left:13px;} .business_item_wrapper .business_item_l .business_box03_l ul li:before {content: ''; position: absolute; top: 14px; left: 0px; width: 6px; height: 6px; background-color: #333; border-radius:6px;} .business_item_wrapper .business_item_r {float:right; margin-top:50px; width:50%; overflow:hidden;} .business_item_r .business_box01_r {} .business_item_r .business_box01_r .business_box_img01 { width:100%; height:400px; background:rgba(0,0,0,0.1) url('/images/sub/business_item01.jpg')no-repeat center; background-size:cover; } /*width:700px; text-align:center;*/ .business_item_r .business_box02_r {margin-top:30px; overflow:hidden;} .business_item_r .business_box02_r .business_box_img02 {width:200px; height:300px; background:rgba(0,0,0,0.1) url('/images/sub/business_item02.jpg')no-repeat center; background-size:cover; float:left;} .business_item_r .business_box02_r .business_box_img03 {width:200px; height:300px; background:rgba(0,0,0,0.1) url('/images/sub/business_item03.jpg')no-repeat center; background-size:cover; float:left;} .business_item_r .business_box02_r .business_box_img04 {width:200px; height:300px; background:rgba(0,0,0,0.1) url('/images/sub/business_item04.jpg')no-repeat center; background-size:cover; float:left; margin-right:0px !important;} .business_item_r .business_box02_r .img02_content {margin-right:30px; width:calc((100% - 60px)/3);} .business_item_r .business_box03_r {clear:both; margin-top:30px;} .business_item_r .business_box03_r .business_box_img05 {width:700px; height:300px; background:rgba(0,0,0,0.1) url('/images/sub/business_item05.jpg')no-repeat center; background-size:cover; float:left;} .business_item_wrapper .business_item_l .business_box01_l p .mobile_on01 {display:none;} @media all and (max-width:1200px) { .business_item_wrapper {padding:0 20px;} } @media all and (max-width:999px) { .business_item_wrapper {padding:0 20px;} .business_item_wrapper .business_item_l {float:none; width:100%;} .business_item_wrapper .business_item_r {float:right; width:100%;} .business_item_r .business_box01_r .business_box_img01 {width:100%;} .business_item_r .business_box03_r .business_box_img05 {width:100%;} .business_item_wrapper .business_item_l .business_box01_l p {font-size:23px;} .business_item_wrapper .business_item_l .business_box03_l p {font-size:23px;} .business_item_wrapper .business_item_l .business_box01_l p > span {margin-left:25px;} .business_item_wrapper .business_item_l .business_box01_l p:after {left:138px;} .business_item_wrapper .business_item_l .business_box03_l ul li:before {top:11px;} .business_item_wrapper .business_item_l .business_box02_l ul li:before {top:11px;} .business_item_wrapper .business_item_l .business_box02_l ul li {font-size:18px;} .business_item_wrapper .business_item_l .business_box03_l ul li {font-size:18px;} } @media (max-width:720px){ .business_item_r .business_box01_r .business_box_img01 { height: 94vw; } .business_item_r .business_box02_r > .img02_content { height: 44vw; } .business_item_r .business_box03_r .business_box_img05 { height: 30vw; } } @media all and (max-width:680px) { .business_item_wrapper .business_item_l .business_box01_l p .mobile_on01 {display:block;} .business_item_wrapper .business_item_l .business_box01_l p {font-size:21px;} .business_item_wrapper .business_item_l .business_box01_l p:after {top:43px; left:0px;} .business_item_wrapper .business_item_l .business_box01_l p > span {margin-left:15px;} .business_item_wrapper .business_item_l .business_box03_l p {font-size:20px;} .business_item_wrapper .business_item_l .business_box02_l p {font-size:20px;} .business_item_wrapper .business_item_l .business_box02_l ul li {font-size:16px;} .business_item_wrapper .business_item_l .business_box03_l ul li {font-size:16px;} } /**/ .LeftTwo_RightOne_Type_221101 { margin-top: 50px; font-size: 20px; overflow: hidden; } .LeftTwo_RightOne_Type_221101 header { font-size: 24px; font-weight:600; margin-bottom: 20px; } .LeftTwo_RightOne_Type_221101 .left_box { float:left; width: calc(50% - 15px); margin-right: 15px; } /* width:50%; padding:20px; background: rgba(0,0,0,0.03); */ .LeftTwo_RightOne_Type_221101 .left_box .content_first { margin-bottom:15px; clear: both; overflow: hidden; } .LeftTwo_RightOne_Type_221101 .left_box .con_txt { float:left; width:calc(100% - 275px) } /*background:rgba(0,0,0,0.1);*/ /*calc(50% - 30px);*/ .LeftTwo_RightOne_Type_221101 .left_box .con_txt th, .LeftTwo_RightOne_Type_221101 .left_box .con_txt td { font-size:18px !important; text-align:center; } .LeftTwo_RightOne_Type_221101 .left_box .con_txt th { font-weight:500; } .LeftTwo_RightOne_Type_221101 .left_box .con_txt tr:last-child td { border-bottom:1px solid #ddd; } .LeftTwo_RightOne_Type_221101 .left_box .con_img { float:right; background:rgba(0,0,0,0.1); width: 250px; margin-left: 15px; height: 170px; } /*width:calc(50% - 15px)*/ .LeftTwo_RightOne_Type_221101 .left_box .img_one { background:url('/images/sub/sub_02_img1.jpg')no-repeat center; background-size: cover;} .LeftTwo_RightOne_Type_221101 .left_box .img_two { background:url('/images/sub/sub_02_img2.jpg')no-repeat center; background-size: cover;} /*.LeftTwo_RightOne_Type_221101 .left_box .con_txt td:nth-child(1 - 1) { text-align:center; }*/ /*.LeftTwo_RightOne_Type_221101 .txt_center { text-align:center; }*/ .LeftTwo_RightOne_Type_221101 .right_box { float:right; width: calc(50% - 15px); margin-left: 15px; } /*background: rgba(0,0,0,0.03); */ .LeftTwo_RightOne_Type_221101 .right_box .content_first { margin-bottom:15px; clear: both; overflow: hidden; } .LeftTwo_RightOne_Type_221101 .right_box .con_txt { float:left; width:calc(100% - 275px) } /*background:rgba(0,0,0,0.1);*/ .LeftTwo_RightOne_Type_221101 .right_box .con_txt th, .LeftTwo_RightOne_Type_221101 .right_box .con_txt td { font-size:18px !important; text-align:center; } .LeftTwo_RightOne_Type_221101 .right_box .con_txt th { font-weight:500; } .LeftTwo_RightOne_Type_221101 .right_box .con_txt tr:last-child td { border-bottom:1px solid #ddd; } .LeftTwo_RightOne_Type_221101 .right_box .con_img { float:right; background:red; width: 250px; margin-left: 15px; height: 170px; } /*width:calc(50% - 15px)*/ .LeftTwo_RightOne_Type_221101 .right_box .img_one { background:url('/images/sub/sub_02_img3.jpg')no-repeat center; background-size: contain;} .LeftTwo_RightOne_Type_221101 .right_box .img_two { background:url('/images/sub/sub_02_img4.jpg')no-repeat center; background-size: contain;} .LeftTwo_RightOne_Type_221101 .right_box2 { float:left; width: calc(50% - 15px); margin-left: unset; } .LeftTwo_RightOne_Type_221101 .right_box2 .content_first { margin-bottom:0px; clear: both; overflow: hidden; } .LeftTwo_RightOne_Type_221101 .right_box2 .con_txt { float:left; width:calc(100% - 275px) } .LeftTwo_RightOne_Type_221101 .right_box2 .con_txt th, .LeftTwo_RightOne_Type_221101 .right_box2 .con_txt td { font-size:18px !important; text-align:center; } .LeftTwo_RightOne_Type_221101 .right_box2 .con_txt th { font-weight:500; } .LeftTwo_RightOne_Type_221101 .right_box2 .con_txt tr:last-child td { border-bottom:1px solid #ddd; } .LeftTwo_RightOne_Type_221101 .right_box2 .con_img { background:red; width: 100%; margin-left: unset; height: unset; padding-top:50% } /*float:unset;*/ .LeftTwo_RightOne_Type_221101 .right_box2 .img_one { background:url('/images/sub/sub_02_img3.jpg')no-repeat center; background-size: cover; margin-bottom: 15px; } .LeftTwo_RightOne_Type_221101 .right_box2 .img_two { background:url('/images/sub/sub_02_img4.jpg')no-repeat center; background-size: cover; margin-bottom: 15px;} .color_hide { margin-bottom: 60px !important; } @media (max-width: 1200px) { .LeftTwo_RightOne_Type_221101 { margin: 0px 15px; } .LeftTwo_RightOne_Type_221101 .left_box .con_txt th, .LeftTwo_RightOne_Type_221101 .left_box .con_txt td { font-size:15px !important; } .color_hide { margin-bottom: 40px !important; } } @media (max-width: 1148px) { .LeftTwo_RightOne_Type_221101 .left_box { float: unset; width: 100%; margin-right:unset; } .LeftTwo_RightOne_Type_221101 .right_box { float: unset; width: 100%; margin-left:unset; } .LeftTwo_RightOne_Type_221101 .right_box2 { width:100%; } /*.LeftTwo_RightOne_Type_221101 .right_box2 .content_first { clear:unset; display: inline-block; float: left; }*/ .LeftTwo_RightOne_Type_221101 header { margin:15px 0; line-height: 22px;} /*margin:0; */ .right_box2 .con_img { background:red; width: 50%; float:left; margin-left: unset; height: unset; padding-top:50% } .LeftTwo_RightOne_Type_221101 .right_box2 .con_img { width: calc(50% - 7.5px); margin-right:15px; padding-top: 37%;} .LeftTwo_RightOne_Type_221101 .right_box2 .img_two { margin-right: 0 !important; } } @media (max-width: 570px) { .LeftTwo_RightOne_Type_221101 .left_box .con_txt { float: unset; width: 100%; } .LeftTwo_RightOne_Type_221101 .left_box .con_img { float: unset; width: 100%; margin-left: unset; height: 100vmin; } .LeftTwo_RightOne_Type_221101 .right_box .con_txt { float: unset; width: 100%; } .LeftTwo_RightOne_Type_221101 .right_box .con_img { float: unset; width: 100%; margin-left: unset; height: 100vmin; } .LeftTwo_RightOne_Type_221101 header { font-size: 20px; } .LeftTwo_RightOne_Type_221101 .right_box2 .con_img { width:100%; padding-top: 74%; margin-right:0;} .color_hide { margin-bottom: 10px !important; } } /* 인증서 갤러리 커스텀 UI 변경 20221102 */ .sl-wrapper .sl-close {right:43px !important; top:47px !important;} .sl-wrapper .sl-image .sl-caption {font-size:20px !important; bottom:-45px !important; background:none !important; left:-12px !important; display: flex !important; align-items: center;} .sl-wrapper .sl-image .sl-caption > span {font-weight:500; font-size:18px; margin-right:10px;} .sl-wrapper .sl-image .sl-caption > .bullet01 {color:rgba(204, 204, 204, 0.4); } .sl-wrapper .sl-image .sl-caption > .content01 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:17px; font-weight:300;} .sl-wrapper .sl-close {font-family:'NotoSansKR', sans-serif !important; font-size:5rem !important;} .sl-wrapper .sl-navigation button {font-family:'NotoSansKR', sans-serif !important;} .sl-wrapper .sl-counter {font-size:2.5rem !important;} .sl-wrapper .sl-counter .sl-current {color:#4bc4fd;} .sl-wrapper .sl-counter .bullet02 {color:rgba(204, 204, 204, 0.4);} .sl-wrapper .sl-navigation button.sl-prev {font-size:11rem !important;} .sl-wrapper .sl-navigation button.sl-next {font-size:11rem !important;} @media all and (max-width:999px) { .sl-wrapper .sl-counter {font-size:2.5rem !important;} .sl-wrapper .sl-close {font-size:4rem !important;} .sl-wrapper .sl-navigation button.sl-prev {font-size:6rem !important;} .sl-wrapper .sl-navigation button.sl-next {font-size:6rem !important;} .sl-wrapper .sl-image .sl-caption > .content01 {width:100%;} } @media all and (max-width:680px) { .sl-wrapper .sl-counter {left:11px !important;} .sl-wrapper .sl-close {top:42px !important; right:19px !important;} .sl-wrapper .sl-navigation button.sl-prev {left:0px !important;} .sl-wrapper .sl-navigation button.sl-next {right:0px !important;} .sl-wrapper .sl-image .sl-caption {font-size:16px !important;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 부트스트랩 온라인문의, 공지사항, 포토갤러리 게시판 버튼 색상 변경 */ .bbs_last_line {border-bottom: 2px solid #555 !important; } .bbs_button.write_btn {border:1px solid #555 !important; background: #555 !important; } .bbs_button.write_btn:hover, .bbs_button.reply_btn:hover, .bbs_button.modify_btn:hover, .bbs_button.delete_btn:hover, .bbs_button.list_btn:hover {background: #888888 !important; border: 1px solid #888888 !important; } .bbs_button.modify_btn {border: 1px solid #555555 !important; } .bbs_button.delete_btn {border: 1px solid #555555 !important; } .bbs_pagination .pages .on a {background: #999 !important; } .bbs_pagination .pages .m a:hover {background: #555555 !important; border: 1px solid #555555 !important; } .bbs_select:hover, .bbs_select:active, .bbs_select:focus {border: 1px solid #555555 !important; } .bbs1view1 #bbs_title {color:#555555 !important; } .button.submit {border: 1px solid #555555 !important; background-color: #555555 !important; } .button.submit:hover {border: 1px solid #888 !important; background-color: #888 !important; } .list1f1t3i1 .lst1 {border-top: 2px solid #555555 !important; } .search1select2 input:hover {border: 1px solid #555555 !important; } .dk_table {border-top: 2px solid #555555 !important; } .dk_table table tbody td {font-size:15px; !important; letter-spacing: -0.5px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 24-03-08 css 변경 */ /* sec_visual 시작 */ /* .sec_visual .swiper {width: 100%; height: 100%; } .sec_visual .swiper-slide {text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } .sec_visual .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover; } .sec_visual .swiper {margin-left: auto; margin-right: auto; } */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 공통적용 */ .sec {padding:100px 15px; } .sec .con-1200px {max-width:1200px; width:100%; margin:0 auto; } .sec .con-1000px {max-width:1000px; width:100%; margin:0 auto; } .sec .heading {text-align:center; } .sec .heading .tit-name {font-size:2.6em; font-weight:800; color:#222; letter-spacing:-0.2px; margin-bottom:4px; } .sec .heading .tit-name > .color-point {color:var(--main-color); } .sec .heading .tit-desc {font-size:1.3em; font-weight:500; color:#888; letter-spacing:-0.4px; margin-bottom:45px; } .sec .heading.bgcolor .tit-name {color:#fff; } .sec .heading.bgcolor .tit-desc {color:#fff; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .sec_visual {padding:0; } /* .sec_visual .main_visual {height:calc(100vh - 66px); } */ .sec_visual .main_visual .box {display: flex; justify-content: center; align-items: center; } .sec_visual .main_visual .box1 {background:url("../images/main/main_visual1.jpg") no-repeat top/cover; } .sec_visual .main_visual .box2 {background:url("../images/main/main_visual2.jpg") no-repeat top/cover; } .sec_visual .main_visual .box3 {background:url("../images/main/main_visual3.jpg") no-repeat top/cover; } .sec_visual .main_visual .swiper-slide.box {height:calc(100vh - var(--header-height)); } /* call-box */ .sec_visual .main_visual .box .call-box {width:100%; display:flex; align-items:center; justify-content: center; margin:24px auto 28px; } .sec_visual .main_visual .box .call-box > .wrap {display: flex; align-items: center; } .sec_visual .main_visual .box .call-box .icon {width: 47px; height: 47px; } .sec_visual .main_visual .box .call-box .icon > img {width:100%; display:block; } .sec_visual .main_visual .box .call-box .where {font-size:1.5em; font-weight:500; color:#fff; letter-spacing:-0.3px; margin: 0 25px 0 18px; } .sec_visual .main_visual .box .call-box .num {} .sec_visual .main_visual .box .call-box .num > a {font-size:4.0em; font-weight:800; color:#f8ff2b; letter-spacing:-2px; } /* bg-on-box */ .sec_visual .main_visual .box .bg-on-box {width:100%; max-width:1200px; display: flex; justify-content: space-between; flex-direction: column; align-items: center; padding:0 15px; } .sec_visual .main_visual .box .bg-on-box .txt {width:100%; } .sec_visual .main_visual .box .bg-on-box .txt > .sm {font-size:1.2em; font-weight:400; color:#fff; letter-spacing:-0.3px; margin-bottom:20px; } .sec_visual .main_visual .box .bg-on-box .txt > .big {font-size:2.4em; font-weight:700; color:#fff; letter-spacing:-0.5px; line-height:1.4; text-align:center; } .sec_visual .main_visual .box .bg-on-box .estimate {width: 100%; } .sec_visual .main_visual .box .bg-on-box .estimate > .tit {font-size:1.3em; font-weight:700; color:#fff; letter-spacing:-0.3px; margin-bottom:17px; text-align:center; } .sec_visual .main_visual .box .bg-on-box .estimate .fomr-wrap {margin: 0 auto; max-width: 875px; width: 100%; } #quote-form {display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; } #quote-form input {background-color: #fff; border: none; padding: 0px 15px; margin-bottom:10px; width:100%; border-radius: 4px; height:52px; } #quote-form input::placeholder {color: #888; font-size: 1.2em; font-weight:400; } /* placeholder의 색상을 변경하는 스타일 */ #quote-form .select-box-wrap {display:flex; column-gap:10px; } #quote-form select {width: 100%; height:52px; padding: 0px 15px; border-radius: 4px; background-color: #fff; background-image: url(../images/main/select_arrow.png); background-repeat: no-repeat; background-position: 94% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; font-size: 1.2em; font-weight:400; color: #888; } #quote-form #datepicker {padding: 0px 15px; border-radius: 4px; line-height:2.8; background-color: #fff; background-image: url(../images/main/ic_calendar.png); background-repeat: no-repeat; background-position: 94% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #quote-form .starting, #quote-form .destination {position:relative; display: flex; flex-direction: row; justify-content: space-between; } #quote-form .labelstart {margin-bottom:0; flex-grow: 1; } #quote-form input.btnAdressStart {width:auto; background-color:#333; color:#fff; position:absolute; right:0; border-top-left-radius: 0; border-bottom-left-radius: 0; } #quote-form input.btnAdressStart:hover {background-color:#888; color:#fff; transition: all 0.35s; } .agree-policy {margin:10px 0 36px 0; text-align:center; display:flex; align-items: center; justify-content: center; } .agree-policy #agree_value[type="checkbox"] {width: 18px; height: 18px; margin-top:-2px; } .agree-policy .personal-info {font-size: 0.95em; color:#fff; margin-left: 7px; margin-right: 10px; } .agree-policy .moreview {font-size: 0.95em; font-weight:500; background-color: #fff; color: #555; padding: 3px 7px 2px 6px; border-radius:3px; } .btn-wrap {text-align: center; } .btn-quote {border-radius:100px; font-size:1.1em; font-weight:600; background-color:#f27405; color: #fff; padding: 15px 52px; transition: all 0.35s; margin-bottom:0; border:none; } .btn-quote:hover {background-color:#888; } /* 메인비쥬얼 간편한 이사견적 #sec_visual.type2 */ .sec_visual.type2 .swiper-slide-active {animation: zoom 4s alternate; } @keyframes zoom { 0% { transform:scale(1.3); } /* 50% { transform:scale(1.05); } */ 100% { transform:scale(1); } } .sec_visual.type2 .swiper-pagination {bottom:50px; } .sec_visual.type2 .swiper-pagination-bullet {width: 80px; height: 6px; background-color: #e9e9e9; margin: 0 6px !important; border-radius: 0; } /* bg-on-box */ .sec_visual.type2 {position:relative; } .sec_visual.type2 .bg-on-box {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: absolute; z-index: 100; max-width: 1200px; width: 100%; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); } .sec_visual.type2 .bg-on-box .txt {margin-top:30px; } .sec_visual.type2 .bg-on-box .txt > .sm {font-size:1.2em; font-weight:400; color:#fff; letter-spacing:-0.3px; margin-bottom:20px; margin-left:3px; } .sec_visual.type2 .bg-on-box .txt > .big {font-size:2.4em; font-weight:800; color:#fff; letter-spacing:-0.5px; line-height:1.4; text-align:left; } .sec_visual.type2 .bg-on-box .estimate {max-width: 327px; width:100%; background-color:var(--main-color); border-radius:12px; padding: 23px 6px; } .sec_visual.type2 .bg-on-box .estimate > .tit {font-size:1.3em; font-weight:600; color:#fff; letter-spacing:-0.3px; margin-bottom:15px; text-align:center; } .sec_visual.type2 .bg-on-box .estimate .fomr-wrap {width:85%; margin: 0 auto; } .sec_visual.type2 #quote-form {grid-template-columns: 1fr; } .sec_visual.type2 #quote-form input {background-color: #fff; border: none; padding: 0px 15px; margin-bottom:8px; width: 100%; border-radius: 4px; line-height:2.8; height:44px; } .sec_visual.type2 #quote-form input::placeholder {color: #888; font-size: 1.0em; font-weight:400; } /* placeholder의 색상을 변경하는 스타일 */ .sec_visual.type2 #quote-form select {width: 100%; height: 44px; padding: 0px 15px; border-radius: 4px; line-height:2.8; background-color: #fff; background-image: url(../images/main/select_arrow.png); background-repeat: no-repeat; background-position: 94% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; margin-bottom:8px; font-size: 1.0em; font-weight:400; color: #888; } .sec_visual.type2 #quote-form #datepicker {width: 100%; padding: 0px 15px; border-radius: 4px; line-height:2.8; background-color: #fff; background-image: url(../images/main/ic_calendar.png); background-repeat: no-repeat; background-position: 94% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-top-right-radius:0; border-bottom-right-radius:0; } .sec_visual.type2 #quote-form .adress .starting, .sec_visual.type2 #quote-form .adress .destination {display: flex; flex-direction: row; justify-content: space-between; } .sec_visual.type2 #quote-form .labelstart {margin-bottom:0; flex-grow: 1; } .sec_visual.type2 #quote-form input.btnAdressStart {width:auto; border-top-left-radius: 0; border-bottom-left-radius: 0; background-color:#333; color:#fff; } .sec_visual.type2 #quote-form input.btnAdressStart:hover {background-color:#888; color:#fff; transition: all 0.35s; } .sec_visual.type2 #quote-form .btn-quote {border-radius:100px; font-size:1em; font-weight:600; background-color:#333; color: #fff; padding: 4px 15px; transition: all 0.35s; margin-bottom:0; } .sec_visual.type2 #quote-form .btn-quote:hover {border-radius:100px; font-size:1em; font-weight:600; background-color:#888; color: #fff; } .sec_visual.type2 #quote-form .agree-policy {display: flex; flex-direction: row; align-items: center; margin:5px 0 9px 0; } .sec_visual.type2 #quote-form .agree-policy #agree_value[type="checkbox"] {width: 18px; height: 18px; } .sec_visual.type2 #quote-form .agree-policy .personal-info {font-size: 0.95em; color:#fff; margin-left: 7px; margin-right: 10px; } .sec_visual.type2 #quote-form .agree-policy .moreview {font-size: 0.95em; font-weight:500; background-color: #fff; color: #555; padding: 3px 7px 2px 6px; border-radius:3px; } .sec_visual.type2 #quote-form .agree-policy .moreview:hover {background-color:#888; color:#fff; } /* main_professional 시작 */ .sec.main_professional {padding: 100px 15px 0 15px; } .main_professional .box-wrap {display: grid; grid-template-columns: 2fr 1fr; column-gap: 16px; } .main_professional .box-wrap .first-box {} .main_professional .box-wrap .second-box {} .main_professional .move-content {display:flex; flex-direction: row; column-gap:16px; } .main_professional .item {height:410px; border-radius:15px; border: 1px solid #e1e1e1; } .main_professional .item #sonCalender {height:100%; } .main_professional .first-box .service-bn {width:50%; background-color:var(--main-color); padding:37px; display:flex; flex-direction: column; justify-content: space-between; } .main_professional .first-box .service-bn .color-tit {font-size: 1.6em; font-weight:800; color: #f8ff35; letter-spacing:-0.4px; } .main_professional .first-box .service-bn .big-tit {font-size: 1.8em; font-weight:800; color: #fff; letter-spacing:-0.4px; line-height:1.3; margin:27px 0 27px 0; } .main_professional .first-box .service-bn .sm-tit {font-size: 1.2em; font-weight:400; color: #fff; letter-spacing:-0.4px; line-height:1.5; margin-bottom:27px; } .main_professional .first-box .service-bn a.btn-sub-equote {font-size: 1.46em; font-weight:600; color: #fff; border:1px solid #fff; display: block; padding: 10px 20px; text-align: center; transition: all 0.35s; } .main_professional .first-box .service-bn a.btn-sub-equote:hover {color:var(--main-color); background-color: #fff; } .main_professional .first-box .biz-info {position:relative; width:50%; background-color:#f3f3f3; padding:22px 26px; } .main_professional .first-box .biz-info .img-box {position:absolute; width:65%; left:50%; transform:translateX(-50%); } .main_professional .first-box .biz-info .img-box > img {width:100%; display:block; } .main_professional .first-box .biz-info .number {position:absolute; margin-top:10px; left:26px; bottom:22px; } .main_professional .first-box .biz-info .number > .tit {font-size: 1.5em; font-weight:700; color: #222; letter-spacing:-0.4px; } .main_professional .first-box .biz-info .number > .call {margin: 5px 0 6px 0; } .main_professional .first-box .biz-info .number > .call > a {font-size: 2.08em; font-weight:900; color:#1d5fe6; letter-spacing:-1.2px; display:block; line-height: 1.1; } .main_professional .first-box .biz-info .number > .time {display: inline-flex; } .main_professional .first-box .biz-info .number > .time > .tit {font-size: 1.06em; font-weight:400; color: #777; letter-spacing:-0.5px; margin-bottom:10px; margin-right: 8px; } .main_professional .first-box .biz-info .number > .time > .open-hour {font-size: 1.06em; font-weight:700; color: #222; letter-spacing:-0.5px; } .main_information {padding-top:0; padding-bottom:0; } /*이사하기 좋은날 & 손없는 날 달력*/ #movingExpress h2 { width: calc(100% - 18px); background: #fff; background-image: url(http://image3.ezbuilder.co.kr/70/h/1706253059/bullet_tit_circle.png); background-repeat: no-repeat; background-position: 0px 3px; font-size: 21px; font-weight: 600; padding-left: 18px; letter-spacing: -0.5px; color: #222; margin-bottom: 15px; } /* main_information 시작 */ /* .main_information .con-1200px {display:flex; flex-direction: row; column-gap: 16px; } .main_information .big-image-box {width:57.75%; border-radius: 8px; overflow: hidden; border: 1px solid #e1e1e1; } .main_information .tab-box {width:calc(100% - 57.75%); } .main_information .tab-box > ul {display: flex; flex-direction: column; height: 100%; border-radius: 8px; overflow: hidden; } .main_information .tab-box > ul > li.item {position:relative; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 30px; } .main_information .tab-box > ul > li.item::before {content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); } .main_information .tab-box > ul > li.box1 {background:url("../images/main/main_information_tab_01.jpg") no-repeat top/cover; } .main_information .tab-box > ul > li.box2 {background:url("../images/main/main_information_tab_02.jpg") no-repeat top/cover; } .main_information .tab-box > ul > li.box3 {background:url("../images/main/main_information_tab_03.jpg") no-repeat top/cover; } .main_information .tab-box > ul > li > .wrap {position:relative; width:100%; display: flex; justify-content: space-between; align-items:center; } .main_information .tab-box > ul > li .txt .main-tit {font-size: 1.6em; font-weight:800; color: #666; letter-spacing:-0.4px; margin-bottom:13px; } .main_information .tab-box > ul > li:hover .txt .main-tit {color: #222; } .main_information .tab-box > ul > li .txt .sub-tit {font-size: 1.2em; font-weight:400; color: #888; letter-spacing:-0.4px; } .main_information .tab-box > ul > li:hover .txt .sub-tit {color: #222; } .main_information .tab-box > ul > li a.btn-arrow {display:block; background-color:#afafaf; border-radius:100px; width:50px; height:50px; display: flex; align-items: center; justify-content: center; transition:all 0.35s; } .main_information .tab-box > ul > li:hover a.btn-arrow {background-color:#222; } .main_information .tab-box > u > li.item.active::before {content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); } */ /* .tab-box .item { opacity: 0.5; transition: opacity 0.3s ease; } */ /* .tab-box .item.active { opacity: 1; } */ /* main_move_info 시작 */ .sec.main_move_info {padding:50px 15px 0 15px; } .main_move_info .con-1200px {display:flex; flex-direction:row; column-gap:10px; } .main_move_info .box {border-radius:8px; display: flex; justify-content: space-between; align-items: center; padding:20px 25px; } .main_move_info .box.check-list {background-color:#d0e8ff; flex: 1; } .main_move_info .box.quote-list {background-color:#ffe6d5; flex: 1; } .main_move_info .box.check-list:hover {background-color:#bbdeff; } .main_move_info .box.quote-list:hover {background-color:#fbd2b7; } .main_move_info .box .txt-box .question {font-size: 1.4em; font-weight:700; color: #222; letter-spacing:-0.3px; margin-bottom:12px; } .main_move_info .box .txt-box .answer {font-size: 1.12em; font-weight:500; color: #666; letter-spacing:-0.5px; } .main_move_info .box.check-list .txt-box .question {color:#23486c; } .main_move_info .box.quote-list .txt-box .question {color:#713b12; } .main_move_info .box .icon-box {background-color: #fff; border-radius: 100px; width: 75px; height:75px;} .main_move_info .box .icon-box > img {width:100%; display:block; } /* main_service 시작 */ .main_service .move-type {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; column-gap:10px; } .main_service .move-type .biz-type {border-radius:10px; } .main_service .move-type a.item {border-radius:10px; padding:30px 10px; background-color:#eef0f5; } .main_service .move-type a.item:hover {background-color:#e7f3ff; } .main_service .move-type a.item .icon-box {background-color: #fff; border-radius: 100px; width: 118px; height: 118px; margin: 0 auto 25px; } .main_service .move-type a.item .icon-box > img {width:100%; display:block; } .main_service .move-type a.item .txt-box {text-align:center; } .main_service .move-type a.item .txt-box .name {font-size: 1.4em; font-weight:600; color: #222; letter-spacing:-0.4px; } /* main_photogallery 시작 */ .main_photogallery {padding-top:0; } /* main_real-time 시작 */ .main_real-time {position:relative; background:url("../images/main/main_realtime_bg.jpg") no-repeat top/cover; } .main_real-time.part2 {position:relative; background:url("../images/main/main_realtime_bg2.jpg") no-repeat top/cover; min-height: 800px; } .main_real-time .quote_wrap { } .main_real-time .quote_wrap .slider.autoplay {height: 383px; overflow: hidden; } .main_real-time .quote_wrap .slider.autoplay .list {display:flex; flex-direction: row; align-items: center; justify-content: space-around; background-color:#fff; border-radius:100px; padding:13px 75px; font-size:1.2em; font-weight:500; color:#333; letter-spacing: -0.8px; margin-bottom:13px; } .main_real-time .quote_wrap .slider.autoplay .list > div {text-align:center; } .main_real-time .quote_wrap .slider.autoplay .list .type {background-color:#0856a1; font-weight:500; color:#fff; border-radius:100px; padding:5px 10px; width:19%; } .main_real-time .quote_wrap .slider.autoplay .list .name {width:16%; } .main_real-time .quote_wrap .slider.autoplay .list .place {width:48%; text-align:left; white-space: nowrap; overflow: hidden; } .main_real-time .quote_wrap .slider.autoplay .list .place .arrow {margin:0 7px; display:inline-block; } .main_real-time .quote_wrap .slider.autoplay .list .date {width:15%; } /* 견적현황 탭박스 */ .tab-wrap {width: 100%; margin: 0 auto; font-size:16px; } .tab-box {width: 100%; margin: 0 auto; box-sizing: border-box; } .tab-box .header {border-radius: 5px; } .tab-box .header > ul {display:flex; margin:0; } .tab-box .header > ul > li {width: 33.3333%; border-right:1px solid #e1e1e1; } .tab-box .header > ul > li:last-child {border-right:none; } .tab-box .header > ul > li > div {display:block; padding:12px 0; background-color:#fff; text-align: center; font-size:1.1em; font-weight:400; } .tab-box .header > ul > li.active > div {background-color:var(--main-color); color:#fff; } .tab-box .body {margin-top:15px; } .tab-box .body > ul > li {display:none; } .tab-box .body > ul > li.active {display:block; } .tab-box .body > ul > li > img {width: 100%; display:block; } /* 견적현황 리스트박스 */ #express_main_lists {/* height:430px; min-height:440px; */} #express_main_lists table .tr_bg_express:last-child > td {border-bottom:none; } .estimated_status table { width:100%; } .estimated_status table th { background:transparent; line-height:3.5; color:#fff; text-shadow:0 0 5px rgba(0,0,0,0.4); font-size:1.0em; text-align:center; } .estimated_status table thead tr th {color:#bfbfbf; } .estimated_status table th.name { width:115px; } .estimated_status table th.serviceName { width:210px; } .estimated_status table th.adress { width:375px; } .estimated_status table th.scheduleDay { width:240px; } .estimated_status table th.condition { width:150px; } .estimated_status table td { text-align:center; background:transparent; line-height:3.5; color:#fff; border-bottom:1px solid #595959; font-size:1em; letter-spacing:-0.5px; vertical-align:middle; } .estimated_status table td.conditionWrap { position:relative; } /*background:green; */ .estimated_status table td .ready { margin-top:6px;border: 0; display:inline-block; background:#00a85f; width:80px; height:25px; border-radius:15px; line-height:25px; color:#fff; font-size:0.9em; } /**/ .estimated_status table td .complete {margin-top:7px;border: 0; display:inline-block; background:#ff6c00; width:80px; height:25px; border-radius:15px; line-height:25px; color:#fff; font-size:0.9em; } /**/ /* footer 다시 시작 */ footer .top-box {margin-bottom:11px; } footer .top-box .name {font-size:1.6em; font-weight:700; color:#fff; } footer .footer_wrap {max-width:1200px; width:100%; margin:0 auto;} footer .footer_wrap .company {display: flex; flex-direction: row; justify-content: space-between; } .footer-copy {font-size:0.9em; } /* 달력 */ /*이사하기 좋은날 & 손없는 날 달력*/ #no_son_calendar { width:100%; height:100%; } #no_son_calendar .banner { width:350px; height:100%; background-image:url({{source_url}}expressBanner.png); background-repeat:no-repeat; background-position:50% 50%; text-align:center; padding-top:42px; } /*background:blue; */ #no_son_calendar .banner p { color:#6cd4ff; font-size:20px; margin-bottom:18px; } #no_son_calendar .banner span { color:#fff; font-size:28px; } #no_son_calendar #carenders > table {width:100%; } #no_son_calendar #calendar > table {width:100%; padding: 8px 15px; } #no_son_calendar #calendar > table > tbody > tr:first-child > td {font-weight:700; color:var(--main-color); } #calendar > table > tbody > tr:not(:first-child) > td {padding:3px; } #no_son_calendar #calendar {width:100%; padding:7px 15px 0 15px; } .yearMonth {height:100%; margin:0 auto; position:relative; font-size:1.4em; display: flex; align-items: center; justify-content: center; } .yearMonthWrap { width:100%; padding:5px 0; text-align:center; color:#222; font-weight:700; border-bottom:1px solid #efefef; } .yearMonth .prevBtn {display: inline-block; margin-right: 10px; } .yearMonth .nextBtn {display: inline-block; margin-left: 10px; } /* .yearMonth .prevBtn { background-image:url(../images/main/btn_prev1.png); background-repeat:no-repeat; background-position:50% 50%; width:28px; height:28px; position:absolute; left:0px; top:50%; transform:translateY(-50%); } .yearMonth .nextBtn { background-image:url(../images/main/btn_next1.png); background-repeat:no-repeat; background-position:50% 50%; width:28px; height:28px; position:absolute; right:0px; top:50%; transform:translateY(-50%); } */ #carenders { width:100%; height:100%; text-align: center; position:relative; } #carenders th, #carenders td { width:14.28%; color:#878787; line-height:2.4; font-size: 1em; font-weight: 600; padding: 2px 8px; } #carenders th { height:42px; background:#f3f3f3; } #carenders .holyday { color:#ff292a; } #carenders .luckyDay { display:inline-block; width:30px; height:30px; background:{{bg_out_color1}}; color:#fff; border-radius:20px; line-height:30px; } #carenders .sunday { color:#ff292a; } #carenders .saturday { color:{{bg_out_color1}}; } #carenders table {width:100%; } .style8 {font-size:0.9em; width: 33px; height: 33px; font-weight: 500; background-color: var(--main-color); color: #fff; border-radius: 30px; display: flex; justify-content: center; align-items: center; } .style9 {font-size:0.9em; width: 33px; font-weight: 500; height: 33px; background-color: var(--main-color); color: #fff; border-radius: 30px; display: flex; justify-content: center; align-items: center; } .date_today_bg {background-color: #e2ff70; border-radius: 5px; } .color-info {text-align: right; padding:0 25px; display: flex; justify-content: flex-end; column-gap: 13px; position:absolute; bottom:18px; right:0; } .color-info .type {font-size:0.9em; font-weight:500; letter-spacing:-1px; display: flex; align-items: center; } .color-info .type .rec {width: 14px; height: 14px; display: inline-block; border-radius: 3px; margin-right: 3px; } .color-info .type .rec.gray {background-color:#e2ff70; } .color-info .type .rec.blue {background-color:var(--main-color); } #header .nav {font-size:1.8em; } /* 상단 메뉴바 */ #top-menu-bar {border-bottom:1px solid #ededed; } #top-menu-bar #menu_in {width: 100%; max-width: 1200px; display: flex; justify-content: space-between; align-items: center; height:var(--header-height); margin: 0 auto; } #top-menu-bar #logo a.img-box {display:block; } #top-menu-bar #logo a.img-box > img {width:100%; display:block; } #top-menu-bar .menu-navi {display: flex; } #top-menu-bar .menu-navi > li {line-height:var(--header-height); } #top-menu-bar .menu-navi > li > a {display: block; padding: 0 20px; width: 100%; font-weight: 500; font-size: 1.2em; color: #222; } #top-menu-bar .util-menu {position:unset; } .gnbM .util-menu {display:none; } .gnb-menu { position:relative; width: 100%; max-width: 710px; margin-left:-44px; } .gnb-menu > .menu-1 { position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); } .gnb-menu > .menu-1 > ul::after { content:""; display:block; clear:both; } .gnb-menu > .menu-1 > ul > li:first-child { float:left; } .gnb-menu > .menu-1 > ul > li:last-child { float:right; } .gnb-menu > .menu-2 { text-align:center; } /* .gnb-menu > .menu-2 > ul { max-width:800px; margin-left:180px; } */ .gnb-menu > .menu-2 > ul > li { width:calc(100% / 7); float:left; } .gnb-menu > .menu-2 li > a { display:block; font-size:1.1em; color:#555; text-align:center; font-weight:500; line-height: calc(var(--header-height) - 36px); } .gnb-menu > .menu-2 li:hover > a { color:var(--orange-color); } .gnb-menu > .menu-2 > ul > li > a { font-size:1.2em; color:black; font-weight: 500; text-align:center; line-height:var(--header-height); } .gnb-menu > .menu-2 > ul::after { content:""; display:block; clear:both; } .gnb-menu > .menu-2 li { position:relative; } .gnb-menu > .menu-2 ul ul { position:absolute; top:100%; z-index:10000; max-height:0; transition:max-height 0.5s; overflow-y:hidden; width:100%; padding-top:15px; } .gnb-menu:hover > .menu-2 ul ul { max-height:210px; } .gnb-menu:hover + .sub-menu-background { height:210px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; } .sub-menu-background { background-color:#fff; height:0; position:absolute; width:100%; top:var(--header-height); left:0; z-index:1000; transition:height 0.5s; } /* 스크롤하면 폰트 사이즈 변경 방지 */ .small,small {font-size: unset; } /* ================================ 반응형 css ================================= */ .on-768px {display:none; } .on-575px {display:none; } @media (max-width: 1399px) { #top-menu-bar {padding:0 15px; } .sub-visual .menu-name {padding: 0 15px; } footer .footer_wrap .company {flex-direction: column; } footer .footer_wrap .company .box-wrap {margin-bottom:16px; } footer .footer-info {margin-bottom: 25px; } } @media (max-width: 1199px) { .sec_visual.type2 .bg-on-box {padding:0 15px; } } @media (max-width: 1199px) { .navigation {max-width: 692px; } .sec_visual.type2 .bg-on-box { padding:0 15px;: } .main_professional .box-wrap {grid-template-columns:1fr; row-gap: 16px; column-gap: 0; } .main_professional .first-box .biz-info .img-box {min-width:276px; width:57%; right: 26px; left: auto; transform:translateX(0); top:22px; } #call-box .info-list .info-text {width:70%; } .main_service .move-type {grid-template-columns:1fr 1fr 1fr; row-gap:10px; } } @media(max-width:1023px) { .gallery-wrap .gallery-list .owl-carousel-item .img-frame {max-width:100%; } } @media(min-width:981px) { .navigation {display:none; } } @media(max-width:980px) { body.no-scroll {overflow:hidden; } .navigation {flex-direction: column; width: 100%; max-width: unset; } #top-menu-bar {padding: 0 10px; border-bottom: 1px solid #f1f1f1; } #top-menu-bar #menu_in {position:relative; } #top-menu-bar .gnb-menu {display:none; } .gnbPC .util-menu {display:none; } .gnbM {border-top:1px solid #e1e1e1; } .gnbM .util-menu {display:block; border-bottom:1px solid #e1e1e1; max-height:90px; } /* .gnbM .util-menu li {border-radius:5px; } */ .gnbM .util-menu li {height: auto; } .gnbM .util-menu li a {font-size: 15px; } } @media(max-width:768px) { .off-768px {display:none; } .on-768px {display:block; } body {font-size:14px; } .sec_visual.type2 .bg-on-box {flex-direction: column; } .sec .heading .tit-name {font-size:2.0em; } .sec .heading .tit-desc {margin-bottom:30px; } .sec_visual.type1 .main_visual .swiper-slide.box {height:115vh; } .sec_visual.type2 .main_visual .swiper-slide.box {height:115vh; } .sec_visual .main_visual .box1 {background:url("../images/main/mb_main_visual01.jpg") no-repeat top/cover; } .sec_visual .main_visual .box .call-box {flex-direction: column; margin: 20px 0 20px 0; } .sec_visual .main_visual .box .bg-on-box .estimate {width: 80%; } .sec_visual .main_visual .box .bg-on-box .txt > .big {font-size:1.6em; line-height: 1.3; } .sec_visual .main_visual .box .call-box .icon {width: 36px; height: 36px; } .sec_visual .main_visual .box .call-box .num > a {font-size:2.3em; letter-spacing: -1px; } #quote-form {grid-template-columns:1fr; } #quote-form input {height:48px; } #quote-form select {margin-bottom:8px; height:48px; } .main_professional .item {height:360px; } .main_professional .move-content {flex-direction: column; row-gap: 16px; } .main_professional .first-box .service-bn {width:100%; padding:25px; } .main_professional .first-box .service-bn a.btn-sub-equote {font-size: 1.2em; } .main_professional .first-box .biz-info {width:100%; } .main_professional .first-box .biz-info .img-box {width:52%; min-width:212px; } .main_professional .first-box .biz-info .number > .call > a {letter-spacing: -0.5px; } .main_service .move-type a.item:hover {background-color:#eef0f5; } .main_service .on-768px .move-type {display:unset; position: relative; } .main_service .on-768px .move-type .swiper-slide {background-color: #eef0f5; border-radius: 10px; overflow:hidden; padding: 20px 0 10px 0; } .main_service .on-768px .move-type .swiper-pagination {width: 100%; position: absolute; top:100%; margin-top:12px; padding:0 15px; min-width:320px; margin-left:20px; } .main_service .on-768px .move-type .swiper-pagination-bullet {margin:0 3px; } .main_service .on-768px .move-type .swiper-pagination-bullet-active {padding:0 8px; border-radius: 100px; background-color: #a5a5a5; } .main_real-time .quote_wrap .slider.autoplay {height:auto; } .main_real-time .quote_wrap .slider.autoplay .list {padding:13px 27px; column-gap: 7px; } .sec_visual.type2 #quote-form input {height:40px; } #express_main_lists {overflow-x: auto; } #express_main_lists::-webkit-scrollbar {display: none; } #express_main_lists > table > thead > tr > th.name {position: sticky; left: 0; z-index: 1; /* 다른 콘텐츠 위에 표시되도록 설정 */ background-color: rgba(0,0,0,0.8); } #express_main_lists > table > tbody > tr > td:nth-child(1) {position: sticky; left: 0; z-index: 1; /* 다른 콘텐츠 위에 표시되도록 설정 */ background-color: rgba(0,0,0,0.8); } .main_real-time.part2 {min-height: 761px; } .estimated_status table {min-width: 700px; } } @media(max-width:991px) { .sec_visual.type2 .box1 {background:url("../images/main/mb_type2_main_visual1.jpg") no-repeat top/cover; } .sec_visual.type2 .box2 {background:url("../images/main/mb_type2_main_visual2.jpg") no-repeat top/cover; } .sec_visual.type2 .box3 {background:url("../images/main/mb_type2_main_visual3.jpg") no-repeat top/cover; } .sec_visual.type2 .bg-on-box {flex-direction: column; align-items: center; } .sec_visual.type2 .bg-on-box .txt {margin-top:0; } .sec_visual.type2 .bg-on-box .txt > .sm {font-size: 1.0em; text-align:center; margin-bottom:15px; } .sec_visual.type2 .bg-on-box .txt > .big {font-size: 1.8em; text-align:center; margin-bottom: 20px; line-height: 1.3; } .main_move_info .con-1200px {flex-direction: column; row-gap:10px; } } @media(max-width:575px) { .off-575px {display:none; } .on-575px {display:block; } .sec .heading {text-align:left; } .main_move_info .box {padding: 20px 18px; } .main_move_info .box .icon-box {width: 85px; height: 85px; } .main_real-time .quote_wrap .slider.autoplay .list {flex-direction: column; align-items: flex-start; border-radius: 15px; row-gap: 7px; } .main_real-time .quote_wrap .slider.autoplay .list > div {text-align:left; } .main_real-time .quote_wrap .slider.autoplay .list .type {width:40%; text-align:center; } .main_real-time .quote_wrap .slider.autoplay .list .name {width:100%; } .main_real-time .quote_wrap .slider.autoplay .list .place {width:100%; } } @media(max-width:480px) { } @media(max-width:375px) { .main_professional .first-box .biz-info .img-box {left: 50%; transform: translateX(-50%); } }