/* 공통 */ .contents {width:100%; margin:0 auto; text-align:center; word-break:keep-all;} .container { width:1024px; margin: 0 auto; } .sub_top_name {color:#1E1E1E; font-size:24px; line-height:30px; font-weight:500; font-family:'Montserrat','Noto Sans KR', sans-serif;} .sub_top_tx1 {color:#2150b0; font-size:31px; line-height:38px; font-weight:bold; font-family:'Montserrat','Noto Sans KR', sans-serif;} .sub_top_tx2 {color:#1E1E1E; font-size:19px; line-height:24px; font-weight:500; font-family:'Montserrat','Noto Sans KR', sans-serif;} .sub_contact1 {color:#fff; font-size:18px; line-height:23px; font-weight:500; font-family:'Montserrat','Noto Sans KR', sans-serif;} .sub_contact2 {color:#fff; font-size:42px; line-height:51px; font-weight:500; font-family:'Montserrat','Noto Sans KR', sans-serif;} .subpage_title {color:#1E1E1E; font-size:35px; line-height:44px; font-weight:bold; font-family:'Montserrat','Noto Sans KR', sans-serif;} .subpage_title2 {color:#1E1E1E; font-size:26px; line-height:40px; font-weight:500;} .subpage_title3 {color:#1E1E1E; font-size:20px; letter-spacing:-1px; line-height:26px; font-weight:500; font-family:'Arial'; } .subpage_title3 span {color: #440a8b;} /* 서비스 영역 */ #damo-service {width:100%; padding-bottom:50px; margin-top:-120px;text-align:center; z-index:99998; } #damo-service h3 {color:#FFF; font-size:22px; line-height:30px; font-weight:400; padding:15px 0 10px 0; } #damo-service p {color:#FFF; opacity:0.85; word-break:keep-all;font-size:14px;line-height:20px; font-weight:300;} #damo-service i {display:block; padding-bottom:10px; width:232px; } #damo-service i img {width:100%; } #damo-service .service-box-01 {width:25%; display:table-cell; vertical-align:middle; background:#e3a600; } #damo-service .service-box-02 {width:25%; display:table-cell; vertical-align:middle; background:#8db138; } #damo-service .service-box-03 {width:25%; display:table-cell; vertical-align:middle; background:#2677df; } #damo-service .service-box-04 {width:25%; display:table-cell; vertical-align:middle; background:#c269ec;} #damo-service .service-box-05 {width:25%; display:table-cell; vertical-align:middle; background:#e3439d; } #damo-service .service-box-btn { color:#FFF; border:1px solid #FFF; font-size:11px; font-weight:600 !important; font-family:'Montserrat', sans-serif; padding:8px 10px; margin:0 auto;} #damo-service .service-box-btn:hover { border:1px solid #FFF; background:rgba(255,255,255,0.2); color:#FFF; } a.service-btn {display:block; width:100%; color:#FFF; padding:20px 10px 20px 10px ; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} a.service-btn:hover {color:#FFF; background-color:rgba(0,0,0,0.3); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} /* 공지사항 */ .swichtab-controller { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0; padding: 0; list-style: none;} .swichtab-controller li {width:50%; flex: 1 1 auto; border: #c6cacc 1px solid; border-width: 1px 1px 1px 0;} .swichtab-controller li:first-child { border-width: 1px;} .swichtab-controller li a { display: flex; font-size:16px; height: 38px; align-items: center; justify-content: center; flex: 1 1 auto; color: #70C1B3; text-decoration: none;} .swichtab-controller li.is-active { background-color: #c6cacc; color: #fff;} .swichtab-controller li.is-active a { background-color: #c6cacc; color: #fff;} .swichtab-contents { padding: 0px; border: #c6cacc 1px solid; border-width: 0 1px 1px 1px; overflow: hidden;} .swichtab-panel { display: none;} .swichtab-controller .title {float:left; width:90%;} .swichtab-controller .more {float:right; width:10%; padding:0 10px 0 0;} /* 공지사항 빠른상담 */ .notice-warp {width:100%; overflow:hidden; margin:0 auto; padding:0; } .main-notice {float:left; width:43%; text-align:left; margin:0 auto; padding:0;} .cus-quick {float:left; width:33%; border:1px solid #c6cacc; margin:0 0 0 10px;} .naver-warp {float:left; width:22%; margin:0 auto; padding:0;} .naver-warp .naver {width:100%; border:1px solid #c6cacc; margin:0 0px 6px 10px;} .naver-warp .naver img {width:100%; } .naver-warp .tel { width:100%; border:1px solid #c6cacc; margin:0 0 0 10px;} .naver-warp .tel img {width:13%; } .naver-warp .tel i { font-size:16px; color:#000000; padding:0 10px 0 0 } .naver-warp .tel h1 { width:100%; font-size:15px; font-weight:400; line-height:28px; background:#2677df; color:#ffffff} .naver-warp .tel h2 { width:100%; font-size:18px; font-weight:400; line-height:30px; letter-spacing: 3px;} .naver-warp .tel h3 { width:100%; font-size:16px; font-weight:500; letter-spacing: 3px;} .naver-warp .tel h4 { width:100%; font-size:16px; font-weight:500; letter-spacing: 2.5px;} .naver-warp .tel p { width:100%; font-size:11px; font-weight:400; line-height:21px; } /* 소개 영역 */ #introduce {width:100%; background:url('../images/intro_bg.jpg') center top no-repeat; background-attachment:fixed; padding:60px 10px; margin-top:30px;} #introduce h3 {color:#FFF; font-size:32px; padding-bottom:10px;} #introduce p {color:#FFF; font-size:20px; padding-bottom:20px; font-weight:400px;} #introduce .intro-box {width:100%; text-align:center;} /* 소개 버튼 디자인 */ a.intro-btn { color:#FFF; border:1px solid #FFF; padding:6px 25px; font-size:12px; } a.intro-btn:hover {color:#FFF; background-color:rgba(255,255,255,0.3); } /* 네이버톡톡 카카오 영역*/ .navertalk-warp {width:100%;overflow:hidden;margin:20px 0 0 0} .navertalk-warp img {width:100%;} .navertalk-warp .navertalk { width:197px; float:left } .navertalk-warp .kakao { position: relative; width:197px; float:left; margin-left:10px; } .navertalk-warp .kakao .cap { position: absolute;width:100%; top:60%; } .navertalk-warp .banner { width:610px; float:left; margin-left:10px; } /* 제품소개 영역 */ #product {padding:60px 20px;} #product h2 {color:#1E1E1E; font-size:36px; line-height:54px; font-weight:700; } #product p {padding-bottom:30px;} /* 고객센터 영역 */ #customer {background:url('http://127.0.0.1/damo/images/customer_bg.jpg') center bottom no-repeat; background-attachment:fixed; padding:50px 10px;} #customer:after {content:""; display:block; clear:both;} #customer h4 {color:#FFF; font-size:16px; padding-bottom:20px; font-weight:600; text-align:left;} #customer .cs-Slogan {width:35%; float:left; } #customer .cs-Slogan h4 {display:inline-block; float:left; width:80%;} #customer .cs-Slogan .more {display:inline-block; width:20%; float:right; padding-right:10px;} #customer .cs-Slogan .more a {color:#FFF; display:inline-block;} #customer .cs-Slogan .more a:hover {text-decoration: underline;} #customer .cs-Slogan .Slogan_list {width:100%;} #customer .cs-center {width:35%; float:left; padding-left:40px;} #customer .cs-center ul { padding:25px; background:rgba(255,255,255,0.85); text-align:left;} #customer .cs-center li {padding:5px 0 5px 10px; color:#333; font-size:13px; background:url('images/cs_icon_bg.png') no-repeat 0px 12px;} #customer .cs-center li.tel_num {color:#161E36; font-size:28px; font-weight:700; font-family:'Montserrat',sans-serif; padding-bottom:15px; background:none;} #customer .cs-center li.tel_num a {color:#161E36; } #customer .cs-center i {width:30px; text-align:center;} #customer .cs-icon {width:30%; float:left; padding-left:40px;} #customer .cs-icon ul {width:100%;} #customer .cs-icon ul li {width:33%; float:left; padding-top:35px; } #customer .icon-txt {display:block; color:#FFF; font-size:13px;} /* 공지사항 추출 */ .board_output td { color:#FFF !important; font-size:13px; height:28px; font-weight:400; vertical-align:top;} .board_output a { font-size:14px !important; font-weight:400; color:#FFF !important;} /* 하단 풋터 영역 */ #footer {width:100%;overflow:hidden; background:#555; padding:50px 0px 70px 0;} #footer .copyright { float:left; width:30%; display:inline-block; font-size:12px; line-height:18px;} #footer .copyright_sns { width:25%; display: inline-block; vertical-align:top;} #footer .copyright_sns ul {float:right;} #footer .copyright_sns ul li {display: inline-block; padding-right:6px;} #footer .copyright_sns ul li a {display:block; color:#FFF; width:50px; height:50px; border-radius:30px; background-color:rgba(255,255,255,.1); font-size:22px; padding-top:8px; text-align:center;} #footer .copyright_sns ul li a:hover {background-color:rgba(255,255,255,.3);} #footer .copyright_logo {width:100%;} #footer .copyright a {color:#CCC;} #footer .footer_util {width:100%;padding:20px 0 0 20px } #footer .footer_util li {display:inline-block; padding-right:2px;} #footer .footer_util li a {display:block; color:#BBB; font-size:11px; border:1px solid #A0A0A0; padding:3px 10px;} #footer .footer_util li a:hover {background:#A0A0A0; color:#FFF;} #footer .footer_copyright {float:left; width:70%; padding:4px 0;} #footer .footer_copyright li {color:#DDD; display:inline-block; padding:0 0 8px 0px;} #footer .copy_end {} @media all and (max-width: 480px) { .container { width:100%; margin: 0 auto;} /* 서비스 영역 */ #damo-service {width:100%; padding-bottom:0px; margin-top:0px;text-align:center; z-index:99998; } #damo-service h3 {color:#FFF; font-size:20px; line-height:30px; font-weight:400; padding:10px 0 0px 0; } #damo-service p {color:#FFF; opacity:0.85; word-break:keep-all;font-size:14px;line-height:18px; font-weight:300;} #damo-service i {display:block; padding-bottom:5px; width:100%; height:auto; text-align:center;margin:0 auto;} #damo-service i img {width:100%; } #damo-service .service-box-01 {width:50%; float:left; display:table-cell; vertical-align:middle; background:#e3a600; } #damo-service .service-box-02 {width:50%; float:left; display:table-cell; vertical-align:middle; background:#8db138; } #damo-service .service-box-03 {width:50%; float:left; display:table-cell; vertical-align:middle; background:#2677df; } #damo-service .service-box-04 {width:50%; float:left; display:table-cell; vertical-align:middle; background:#c269ec;} #damo-service .service-box-05 {width:50%; float:left; display:table-cell; vertical-align:middle; background:#e3439d;} a.service-btn {display:block; width:100%; color:#FFF; padding:10px 10px 10px 10px ; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} a.service-btn:hover {color:#FFF; background-color:rgba(0,0,0,0.3); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} /* 공지사항 빠른상담 */ .notice-warp {width:100%; overflow:hidden; margin:0 auto; padding:20px 0 0px 0; } .main-notice {float:left; width:100%; text-align:left; margin:0 auto; padding:0;} .cus-quick {float:left; width:100%; border:0px solid #c6cacc; border-bottom:1px solid #c6cacc; margin:0 0 0 0px;} .naver-warp {float:left; width:100%; margin:0 auto; padding:0;} .naver-warp .naver {width:100%; border:0px solid #c6cacc; border-bottom:1px solid #c6cacc; margin:0 0px 0px 0px; padding:10px 0 10px 0} .naver-warp .naver img {width:70%; } .naver-warp .tel { width:100%; overflow:hidden; border:0px solid #c6cacc; margin:0 0 0 0px;} .naver-warp .tel img {width:10%; margin:0 10px 0 0} .naver-warp .tel h3 { width:100%; font-size:20px; font-weight:400; line-height:50px; background:#f7f7f7; } .naver-warp .tel h2 { width:100%; font-size:26px; font-weight:500; line-height:60px; } .naver-warp .tel p { width:100%; font-size:14px; font-weight:400; line-height:30px; } /* 소개 영역 */ #introduce {width:100%; background:url('../images/intro_bg.jpg') center top no-repeat; background-attachment:fixed; padding:20px 0px; margin-top:0px;} #introduce h3 {color:#FFF; font-size:20px; padding-bottom:10px;} #introduce p { color:#FFF; font-size:16px; padding-bottom:10px; font-weight:400px;} #introduce .intro-box {width:100%; text-align:center;} /* 소개 버튼 디자인 */ a.intro-btn { color:#FFF; border:1px solid #FFF; padding:6px 25px; font-size:12px; } a.intro-btn:hover {color:#FFF; background-color:rgba(255,255,255,0.3); } /* 네이버톡톡 카카오 영역*/ .navertalk-warp {width:100%;overflow:hidden;margin:20px 0 0 0} .navertalk-warp img {width:100%;} .navertalk-warp .navertalk { width:50%; float:left } .navertalk-warp .kakao { position: relative; width:50%; float:right; margin-left:0px; } .navertalk-warp .kakao .cap { position: absolute;width:100%; top:60%; } .navertalk-warp .banner { width:100%; float:left; margin-left:0px; } /* 하단 풋터 영역 */ #footer {width:100%;overflow:hidden; background:#555; padding:20px 10px 20px 10px;} #footer .copyright { float:left; width:100%; display:inline-block; font-size:12px; line-height:18px;} #footer .copyright_sns { width:25%; display: inline-block; vertical-align:top;} #footer .copyright_sns ul {float:right;} #footer .copyright_sns ul li {display: inline-block; padding-right:6px;} #footer .copyright_sns ul li a {display:block; color:#FFF; width:50px; height:50px; border-radius:30px; background-color:rgba(255,255,255,.1); font-size:22px; padding-top:8px; text-align:center;} #footer .copyright_sns ul li a:hover {background-color:rgba(255,255,255,.3);} #footer .copyright_logo {width:100%;} #footer .copyright a {color:#CCC;} #footer .footer_util {width:100%;padding:20px 0 0 0px } #footer .footer_util li {display:inline-block; padding-right:2px;} #footer .footer_util li a {display:block; color:#BBB; font-size:11px; border:1px solid #A0A0A0; padding:3px 10px;} #footer .footer_util li a:hover {background:#A0A0A0; color:#FFF;} #footer .footer_copyright {float:left; width:100%; padding:10px 0;} #footer .footer_copyright li {color:#DDD; display:inline-block; padding:0 0px 4px 0px;} #footer .copy_end {} }