@charset "utf-8";
html, body {width:100%; background-color:#fff; font-weight:400;  font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; color:#666;}
body,th,td,input,select,textarea,button,
a {font-weight:400; font-size:100%; font-family:'Noto Sans KR', sans-serif; color:#666; text-decoration:none;}
body {min-width:1253px;}
body.on {overflow:hidden;}


/* layout 
--------------------------------------------------------------------------------------------------------- */
#wrapper {overflow:hidden; padding-bottom:74px; width:100%;}
#wrapper a {transition:.3s;}
.inner {margin:0 auto; width:1100px;}

/* header
------------------------------------------------------ */
#header {width:100%; background-color:#fff;}

/* -------- 상단유틸 -------- */
.header-utils {overflow:hidden; width:100%; background:#efefef;}
.header-utils h3 {float:left;}
.header-utils h3 a {display:block; font:normal 12px/35px 'Malgun Gothic', sans-serif; color:#444; letter-spacing:-0.5px;}
.header-utils h3 a strong {font-weight:bold; color:#1764ab;}
.header-utils .utils {float:right;}
.header-utils .utils dd {float:left; margin-left:17px;}
.header-utils .utils dd a {display:block; font:normal 12px/35px 'Malgun Gothic', sans-serif; color:#444; letter-spacing:-0.5px;}
.header-utils .utils dd:nth-of-type(3) a {font-weight:bold; color:#1764ab;}

/* -------- 상단 bottom -------- */
.header-bottom {overflow:hidden; height:87px;}
/* logo */
.header-bottom .logo {float:left; margin-top:23px;}
.header-bottom .logo a {display:block;}
/* gnb */
#gnb {float:left; padding-left:26px; width:calc(100% - 126px); box-sizing:border-box;}
#gnb li {display:inline-block; vertical-align:middle;}
#gnb li a {position:relative; display:inline-block; vertical-align:middle; padding:37px 14px 34px; line-height:1; color:#222; letter-spacing:-1.25px;}
#gnb li a:before {content:''; position:absolute; top:50%; left:0; margin-top:-6px; width:1px; height:16px; background:#ccc;}
#gnb li:first-child a:before {display:none;}
#gnb li a img {margin-left:4px;}
#gnb li:hover a {color:#3977ca;}
/* menu btn */
.header-bottom .menu-btn {float:right; margin-top:23px; width:44.2px; text-align:center; cursor:pointer;}
.header-bottom .menu-btn span {position:relative; left:0; display:block; margin:4px auto; width:19px; height:3px; border-radius:1px; background:#2b75c6; transition:.3s;}
.header-bottom .menu-btn strong {display:block; margin-top:9px; font-weight:300; font-size:12px; line-height:1; color:#444;}
.header-bottom .menu-btn.on span:nth-child(1) {width:27px; transform:translateY(7px) rotate(45deg);}
.header-bottom .menu-btn.on span:nth-child(3) {width:27px; transform:translateY(-7px) rotate(-45deg);}
.header-bottom .menu-btn:hover span:nth-child(1) {left:-5px;}
.header-bottom .menu-btn:hover span:nth-child(3) {left:-2px;}
.header-bottom .menu-btn.on:hover span:nth-child(1) ,
.header-bottom .menu-btn.on:hover span:nth-child(3) {left:0;}
/* all menu */
.all-menu {display:none; position:fixed; top:122px; left:0; z-index:9999; width:100%; height:calc(100% - 122px); background:#f0f0f0;}
.all-menu .inner {overflow:hidden;}
.all-menu .all-menu-box {float:left; margin-top:65px; width:20%;}
.all-menu .all-menu-box:nth-child(6) {clear:both;}
.all-menu .all-menu-box h3 {display:block; margin-bottom:22px;}
.all-menu .all-menu-box h3 a {font-weight:300; font-size:20px; line-height:1; color:#333;}
.all-menu .all-menu-box ul {margin-bottom:20px;}
.all-menu .all-menu-box ul a {display:block; font-weight:300; font-size:15px; line-height:25px; color:#777;}


/* footer
------------------------------------------------------ */
#footer {width:100%;}

/* -------- 사이트맵 -------- */
.site-map {position:relative; padding-top:30px; width:100%; border-top:1px solid #dfdfdf;}
.site-map:before {content:''; position:absolute; bottom:300px; left:50%; margin-left:-550px; width:1100px; height:1px; background:#dfdfdf;}
.site-map .inner {overflow:hidden;}
.site-map .site-map-box {float:left; margin:20px 0; padding:7px 0 0 20px; width:20%; height:263px; box-sizing:border-box; border-left:1px dashed #dedede}
.site-map .site-map-box:first-child {padding-left:0; border:0 none;}
.site-map .site-map-box:nth-child(6) {clear:both; padding-left:0; border:0 none;}
.site-map .site-map-box h3 {display:block; margin-bottom:10px;}
.site-map .site-map-box h3 a {font-weight:400; font-size:18px; line-height:1; color:#333;}
.site-map .site-map-box li a {font-weight:300; font-size:14px; line-height:24px; color:#777;}
.site-map .site-map-box p {margin-top:25px;}
.site-map .site-map-box a:hover {text-decoration:underline; color:#3977ca;}
/* -------- 하단유틸 -------- */
.footer-utils {clear:both; padding:11px 0; width:100%; border-top:1px solid #e0e0e0; background:#f0f0f0;}
.footer-utils .utils {overflow:hidden; display:inline-block;}
.footer-utils .utils li {float:left;}
.footer-utils .utils li a {display:block; padding:0 23px; font-size:16px; line-height:38px; color:#9a9a9a}
.footer-utils .utils li:first-child a {padding-left:0;}
.footer-utils .utils li:hover a {color:#3977ca;}
/* 패밀리사이트 */
.footer-utils .family-site {position:relative; float:right; padding:0 0 0 16px; width:200px; height:38px; box-sizing:border-box; border:1px solid #d8d8d8; background:#fff url('../images/common/family_site_arrow.png') no-repeat 173px 15px;}
.footer-utils .family-site.on {background:#fff url('../images/common/family_site_arrow_on.png') no-repeat 173px 15px;}
.footer-utils .family-site h3 {font-weight:400; font-size:14px; line-height:36px; color:#777; cursor:pointer;}
.footer-utils .family-site ul {display:none; position:absolute; top:37px; left:0; z-index:22; padding:9px 0; width:100%; background:#fff;}
.footer-utils .family-site ul a {display:block; padding:0 15px; font-size:14px; line-height:30px; color:#777;}
.footer-utils .family-site ul li:hover a {background:#4992e1; color:#fff;}
/* -------- 하단주소 -------- */
.address-wrap {clear:both; padding:50px 0 35px; background:#484848;}
.address-wrap .inner {overflow:hidden;}
.address-wrap .foot-logo {float:left; margin-right:50px;}
.address-wrap address {float:left; font-style:normal;}
.address-wrap address span {float:left; margin-right:26px; font-weight:300; font-size:16px; line-height:28px; color:#858585;}
.address-wrap address span:nth-child(3),
.address-wrap address span:nth-child(5),
.address-wrap address span:nth-child(7),
.address-wrap address span:nth-child(8) {clear:both;}
/* -------- 배너 -------- */
.foot-banner-wrap {clear:both; padding:12px 0 0 219px; font-size:0;}
.foot-banner-wrap li {display:inline-block; margin-right:30px; vertical-align:middle;}


/* contents
--------------------------------------------------------------------------------------------------------- */
#contents {clear:both; width:100%;}

/* 메인비주얼
------------------------------------------------------ */
.mian-visual {width:100%; height:650px;}
.mian-visual .item {width:100%; height:650px;}
.mian-visual .item a {display:block; width:100%; height:100%; background-size:cover;}
/* 버튼 */
.mian-visual .owl-dots {position:absolute; bottom:97px; left:50%; transform:translateX(-50%);}
.mian-visual .owl-dot {margin:0 4px; padding:0; width:12px; height:12px; border:1px solid #5d5f61; border-radius:50%; box-sizing:border-box; background:none;}
.mian-visual .owl-dot.active {width:32px; border-radius:6px; background:#5d5f61;}

/* 도메인검색
------------------------------------------------------ */
.domain-search {margin-top:-62px; width:100%;}
.domain-search .serach-box {position:relative; margin-left:21.35416666666667%; padding:23px 0; width:calc(100% - 21.35416666666667%); background:#468cd7;}
.domain-search .serach-box .search-obj {position:absolute; left:-44px; top:-62px;}
.domain-search .serach-box .inner {position:relative; overflow:hidden; padding-left:70px; margin:0; box-sizing:border-box;}
.domain-search .serach-box label {float:left; font-size:42px; line-height:54px; letter-spacing:2px; color:#fff; vertical-align:top;}
.domain-search .serach-box input[type="text"] {float:right; padding:0 35px; width:878px; height:54px; border:0 none; box-sizing:border-box; border-radius:2px; background:#fff; font-weight:300; font-size:24px; color:#888; vertical-align:top;}
.domain-search .serach-box .search-btn {position:absolute; top:9px; right:18px; display:block; width:34px; height:34px; background:url('../images/main/search_icon.png') no-repeat 0 0; font-size:0;}

@media screen and (max-width: 1416px) { 
	.domain-search .serach-box {float:right; margin-left:0; width:1151px;}
}

/* -------- 퀵 -------- */
.domain-search.quick {display:none; position:fixed; bottom:0; left:0; z-index:5555; width:100%;}
.domain-search.quick.on {display:block;}
.domain-search.quick .serach-box {margin-left:0; padding:15px 0; width:100%;}
.domain-search.quick .serach-box .inner {margin:0 auto; padding:0 40px;}
.domain-search.quick .serach-box .search-btn {right:58px;}
.domain-search.quick .serach-box label {font-size:38px; line-height:45px;}
.domain-search.quick .serach-box input[type="text"] {padding:0 25px; height:45px; font-size:20px;}
.domain-search.quick .serach-box .search-btn {width:28px; height:28px; background:url('../images/main/quick_search_icon.png') no-repeat 0 0;}


/* 타이틀
------------------------------------------------------ */
.conts-slogan-line {margin:75px auto 20px; padding:0; width:1px; height:30px; background:#468cd7;}
.conts-slogan {font-weight:300; font-size:54px; line-height:1; color:#2c2c2c; text-align:center; letter-spacing:-3px}
.conts-slogan strong {font-weight:300; color:#217ccf;}
.conts-slogan + p {margin:18px 0 70px; font-weight:300; font-size:24px; line-height:1; text-align:center; letter-spacing:-0.75px}


/* 서비스안내
------------------------------------------------------ */
/* -------- tab -------- */
.service-tab {margin-bottom:46px; text-align:center;}
.service-tab li {display:inline-block; margin:0 20px; vertical-align:top;}
.service-tab li a {display:block; padding:0 7px 10px; border-bottom:2px solid #fff; font-weight:300; font-size:22px; line-height:1; letter-spacing:-0.5px;}
.service-tab li.on a,
.service-tab li:hover a {border-bottom-color:#3c79cb; color:#3977ca;}
/* -------- list -------- */
.service-list {overflow:hidden; position:relative; width:100%; height:0;}
.service-list.on {overflow:visible; height:auto;}
.service-list .inner {position:relative; left:10px; margin-bottom:-345px; width:1123px;}
.service-list .owl-stage-outer {overflow:hidden; padding:7px 0 89px 3px;}
.service-list .servie-box .item {display:inline-block; width:260px; height:370px; border-radius:5px; box-shadow:7px 7px 13px 3px rgba(0,0,0,0.1); background:#fff; text-align:center; vertical-align:top; transition:transform .3s;}
.service-list .servie-box .owl-item a {position:relative; display:block; padding:44px 0 0; width:100%; height:100%; box-sizing:border-box; font-size:0;}
.service-list .servie-box .owl-item a img {position:relative; top:0; display:inline-block; transition:.3s; transition-delay:.0;}
.service-list .servie-box .owl-item a strong,
.service-list .servie-box .owl-item a span {display:block; letter-spacing:-0.5px; transition:.3s;}
/* title */
.service-list .servie-box .owl-item a .title {position:relative; top:0; margin:25px 0 8px; font-weight:400; font-size:20px; line-height:1; transition-delay:.10s;}
.service-list .servie-box .owl-item:nth-child(4n+1) a .title {color:#0096ce;}
.service-list .servie-box .owl-item:nth-child(4n+2) a .title {color:#0c81cb;}
.service-list .servie-box .owl-item:nth-child(4n+3) a .title {color:#2260c7;}
.service-list .servie-box .owl-item:nth-child(4n+4) a .title {color:#3445c4;}
/* detail */
.service-list .servie-box .item a .detail {position:relative; top:0; padding:0 10px; box-sizing:border-box; font-size:14px; line-height:18px; color:#666; transition-delay:.15s; white-space:normal; word-break:keep-all;}
/* more btn */
.service-list .servie-box .owl-item a .more {position:absolute; bottom:-19px; left:50%; display:block;  margin-left:-21.5px; width:43px; height:43px; border-radius:50%; background-color:#0096ce; background-image:url('../images/main/service_more.png'); background-position:center center; background-repeat:no-repeat; transition-delay:.20s;}
.service-list .servie-box .owl-item:nth-child(4n+1) a .more {background-color:#0096ce;}
.service-list .servie-box .owl-item:nth-child(4n+2) a .more {background-color:#0c81cb;}
.service-list .servie-box .owl-item:nth-child(4n+3) a .more {background-color:#2260c7;}
.service-list .servie-box .owl-item:nth-child(4n+4) a .more {background-color:#3446c4;}
/* arrow */
.service-list  .owl-dots {display:none;}
.service-list  .owl-prev,
.service-list  .owl-next {position:absolute; top:86px; left:50%; width:62px; height:62px;border-radius:50%; cursor:pointer; font-size:0; transition:.3s;}
.service-list  .owl-prev {margin-left:-715px; background:#fff url('../images/main/service_prev.png') no-repeat 17px center;}
.service-list  .owl-next {margin-left:638px; background:#fff url('../images/main/service_next.png') no-repeat 23px center;}
.service-list  .owl-prev:hover {background:#3977ca url('../images/main/service_prev_on.png') no-repeat 17px center;}
.service-list  .owl-next:hover {background:#3977ca url('../images/main/service_next_on.png') no-repeat 23px center;}
/* hover */
.service-list .servie-box .item:hover a img ,
.service-list .servie-box .item:hover a .title ,
.service-list .servie-box .item:hover a .detail {top:-10px;}
.service-list .servie-box .item:hover a .more {bottom:-9px;}
/* bg */
.service-list .service-list-bg {display:block; width:100%; height:340px; background:#efefef;}

@media screen and (max-width: 1416px) { 
	.service-list  .owl-prev {margin-left:-637px;}
	.service-list  .owl-next {margin-left:554px;}
}


/* 홈페이지제작
------------------------------------------------------ */
.homepage-list {position:relative; margin:0 auto 35px; padding-bottom:80px; width:1080px; height:248px;}
.homepage-list .owl-item {overflow:hidden; position:relative; display:inline-block; width:210px; height:248px; box-sizing:border-box; background:#000; text-align:center; vertical-align:top;}
.homepage-list .owl-item a {display:block; font-size:0;}
.homepage-list .owl-item a img {width:208px; height:208px; border:1px solid #ebebeb; opacity:1 !important;}
.homepage-list .owl-item a span {display:block; padding-top:18px; background:#fff; font-weight:300; font-size:17px; line-height:20px; color:#2c2c2c;}
.homepage-list .hover-wrap {position:absolute; bottom:100%; left:0; z-index:555; display:block; padding-top:135px; width:100%; height:210px; box-sizing:border-box; font-weight:100; font-size:16px; line-height:1; color:#fff; text-align:center; transition:.3s;}
.homepage-list .hover-wrap:before {content:''; position:absolute; top:68px; left:103px; width:1px; height:50px; background:#fff;}
.homepage-list .hover-wrap:after {content:''; position:absolute; top:94px; left:78px; width:50px; height:1px; background:#fff;}
/* hover */
.homepage-list .owl-item:hover a img {opacity:.5 !important; transition:.3s; -webkit-filter: blur(1.6px); filter: blur(1.6px);}
.homepage-list .owl-item:hover .hover-wrap {bottom:38px;}
/* arrow */
.homepage-list  .owl-dots {display:none;}
.homepage-list  .owl-prev,
.homepage-list  .owl-next {position:absolute; bottom:0; left:50%; width:46px; height:46px; border:1px solid #b7b7b7; box-sizing:border-box; cursor:pointer; font-size:0;}
.homepage-list  .owl-prev {margin-left:-45px; background:#fff url('../images/main/button_prev.png') no-repeat center center;}
.homepage-list  .owl-next {background:#fff url('../images/main/button_next.png') no-repeat center center;}


/* 이벤트 배너
------------------------------------------------------ */
.event-banner-wrap {position:relative; width:100%; text-align:center;}
.event-banner {position:relative; font-size:0;}
.event-banner a {display:inline-block;}
.event-banner a img {display:inline-block;}
.event-banner a:before {content:''; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:150px; background:#b5c6e5;}
.event-banner a img {position:relative; z-index:2222;}


/* 고객센터
------------------------------------------------------ */
.customer-wrap {width:100%;}

.customer-wrap .customer-box {padding:68px 0 0; width:100%; border-bottom:1px solid #dfdfdf; background:#f2f2f2;}
.customer-wrap .inner {overflow:hidden;}

.customer-wrap .inner > div {float:left;}
.customer-info1 {width:522px;}
.customer-info1 .tel-num {overflow:hidden; margin-bottom:45px; width:100%;}
.customer-info1 .tel-num h3 {position:relative; float:left; display:inline-block; padding-top:16px; font:800 54px/1 'NanumSquare'; color:#3977ca; letter-spacing:-1px;}
.customer-info1 .tel-num h3 span {position:absolute; top:0; right:-9px; font:400 15px/1 'Noto Sans KR'; color:#333; letter-spacing:18px;}

.customer-info1 dl {display:inline-block; margin:17px 0 0 15px;}
.customer-info1 dl dt,
.customer-info1 dl dd {float:left; font-size:16px; line-height:24px; color:#222;}
.customer-info1 dl dt {clear:both; width:47px;}
.customer-info1 dl dt:nth-of-type(1) {letter-spacing:14px; white-space:nowrap;}
/* quick number */
.customer-info1 .quick-num {float:left; width:207px;}
.customer-info1 .quick-num li {display:block; margin-bottom:7px; font-size:14px; line-height:18px;}
.customer-info1 .quick-num span {display:inline-block; margin-right:10px; width:18px; height:18px; border:1px solid #b7b7b7; box-sizing:border-box; background:#fff; font-weight:500; font-size:13px; line-height:16px; color:#303439; text-align:center; vertical-align:top;}

.customer-info2 {margin-top:16px; width:578px;}
/* 고객평가 */
.customer-info2 .grade {overflow:hidden; margin-bottom:30px;}
.customer-info2 .grade > dl {float:left;}
.customer-info2 .grade > dt,
.customer-info2 .grade dd {font-size:16px; line-height:24px;}
.customer-info2 .grade dd span {color:#333;}
.customer-info2 .grade dd strong {font-weight:500;}
.customer-info2 .grade > p {overflow:hidden; float:left; margin-left:25px;}
.customer-info2 .grade > p strong {float:left; margin-right:17px; font:800 52px/1 'NanumSquare'; color:#333; letter-spacing:-4px;}
/* 상담 */
.customer-info2 .consult {clear:both; overflow:hidden;}
.customer-info2 .consult li {float:left; padding-bottom:1px; box-sizing:border-box; font-size:13px; line-height:20px; letter-spacing:-0.5px;}
.customer-info2 .consult li:nth-child(1) {padding-left:63px; width:208px; background:url('../images/main/consult_icon01.png') no-repeat 0 center;}
.customer-info2 .consult li:nth-child(2) {padding-left:50px; width:203px; background:url('../images/main/consult_icon02.png') no-repeat 0 center;}
.customer-info2 .consult li:nth-child(3) {padding-left:56px; width:164px; background:url('../images/main/consult_icon03.png') no-repeat 0 center;}
.customer-info2 .consult li strong {display:block; margin-bottom:3px; font-weight:500; font-size:16px;}
.customer-info2 .consult li:nth-child(1) strong {color:#3977ca;}
.customer-info2 .consult li:nth-child(2) strong {color:#36b044;}
.customer-info2 .consult li:nth-child(3) strong {color:#381e1f;}
/* 세금계산서 / 최근결제내역 */
.customer-info2 .receipt {clear:both; overflow:hidden; margin-top:43px;}
.customer-info2 .receipt li {float:left; width:285px; height:45px; border:1px solid #dedede; box-sizing:border-box; background:#fff; text-align:center;}
.customer-info2 .receipt li:last-child {float:right;}
.customer-info2 .receipt li a {display:block; font-size:15px; line-height:43px; letter-spacing:-1px;}
.customer-info2 .receipt li a strong {font-weight:400; color:#3977ca;}
.customer-info2 .receipt li a strong:before {content:''; display:inline-block; margin-right:4px; width:11px; height:10px; background:url('../images/main/receipt_bullet.png') no-repeat 0 0;}

.board-wrap {clear:both; margin-top:63px; width:100%; border-top:1px solid #dfdfdf; text-align:center; font-size:0;}
.board-wrap > div {display:inline-block; padding:30px 27px 27px; width:550px; box-sizing:border-box; text-align:left;}
.board-wrap .notice-wrap {padding-left:0; border-right:1px solid #dfdfdf;}
.board-wrap > div h3 {display:inline-block; vertical-align:top;}
.board-wrap > div h3:after {content:''; display:inline-block; margin-left:10px; width:21px; height:21px; border:1px solid #b7b7b7; box-sizing:border-box; border-radius:50%; 
background:#fff url('../images/main/board_wrap_arrow.png') no-repeat center center; vertical-align:top;}
.board-wrap > div h3 a {display:inline-block; font-weight:500; font-size:18px; line-height:21px; color:#333;}
.board-wrap ul {overflow:hidden; position:relative; display:inline-block; padding-left:17px; height:21px; box-sizing:border-box; vertical-align:top;}
.board-wrap .notice-wrap ul {width:calc(100% - 98px);}
.board-wrap .service-help-wrap ul {width:calc(100% - 131px;)}
.board-wrap ul li a {overflow:hidden; display:inline-block; font-weight:300; font-size:16px; line-height:21px; text-overflow:ellipsis; white-space:nowrap;}
.board-wrap .notice-wrap ul li a {max-width:calc(97% - 80px);}
.board-wrap .notice-wrap ul span {float:right; font-weight:300; font-size:16px; line-height:21px;}


/* 파트너
------------------------------------------------------ */
.partner-wrap {padding:106px 0 115px; width:100%; text-align:center;}
.partner-wrap h2 {display:inline-block; margin-bottom:55px; font-weight:300; font-size:40px; line-height:1; color:#444; letter-spacing:-1px;}
.partner-wrap h2 em {position:relative; font-style:normal;}
.partner-wrap h2 em:before {content:''; position:absolute; top:-2px; left:50%; margin-left:-2.5px; width:5px; height:5px; border-radius:50%; background:#e91d1d;}
/* 배너 */
.partner-wrap .owl-carousel {width:100%; font-size:0; box-sizing:border-box;}
.partner-wrap .owl-item {display:inline-block;}
.partner-wrap .owl-item img {border:1px solid #e8e8e8; width:157px;}