@charset "utf-8";
/* CSS Document */
/* 20141117 작성자 송지수 */

/* 헤더 */
#header {display:inline-block; vertical-align:middle; position:fixed; left:0; top:0; z-index:9; width:100%; height:1px;}
#header .h_logo {display:inline-block; vertical-align:middle; float:left; width:160px; height:60px; margin:30px 90px; text-align:center;}
#header .h_logo a {display:inline-block; vertical-align:middle; width:100%; height:100%; background:url("../images/common/logo.png") center center no-repeat;}
#header .h_logo a {display:inline-block; vertical-align:middle; width:100%; height:100%; background:url("../images/common/logo.png") center center no-repeat;}
#header .h_topmenu {display:inline-block; vertical-align:middle; float:right; height:40px; margin-top:50px; margin-right:25px; text-shadow:0 1px 3px rgba(0, 0, 0, 0.2);}
#header .h_topmenu li {display:inline; float:left; margin:0 10px;}
#header .h_topmenu a {display:inline-block; vertical-align:middle; height:30px; padding:0 15px; font:15px NanumGothic; color:#fff; letter-spacing:-1px; line-height:30px; border:#fff solid 1px; border-radius:20px; opacity:0.6;}
#header .h_topmenu a:hover {opacity:0.9;}
#header .h_topmenu .icon {display:none; vertical-align:middle; width:100%; height:20px; background:url("../images/common/icon_arrow_down.png") center top no-repeat;}
#header .h_topmenu a:hover .icon {background-position:center bottom;}
#header .h_topmenu .ht_advice {width:74px;}
#header .h_navi {display:inline-block; vertical-align:middle; position:absolute; right:57px; top:134px; width:20px;}
#header .h_navi li {display:inline-block; vertical-align:middle; width:20px; height:20px;}
#header .h_navi a {display:inline-block; vertical-align:middle; width:20px; height:20px; background:url("../images/common/paging.png") left bottom no-repeat;}
#header .h_navi a.on {background-position:left top;}

#header.color .h_logo a {background:url("../images/common/logo_c.png") no-repeat;}
#header.color .h_topmenu {text-shadow:0 1px 3px rgba(0, 0, 0, 0.1);}
#header.color .h_topmenu a {color:#3553ba; border:#3553ba solid 1px;}
#header.color .h_topmenu .icon {background:url("../images/common/icon_arrow_down_c.png") center top no-repeat}
#header.color .h_topmenu a:hover .icon {background-position:center bottom;}
#header.color .h_navi a {background-position:right bottom;}
#header.color .h_navi a.on {background-position:right top;}


/* 네비 */
#nav {display:inline-block; vertical-align:middle; position:fixed; left:0; top:0; z-index:99; width:60px; height:100%; text-align:left; background:#28292e; box-shadow:1px 0 1px rgba(0, 0, 0, 0.25);}
#nav li {display:inline-block; vertical-align:middle; width:60px; height:60px;}
#nav li.on {width:65px; background:url("../images/common/icon_menu_on.png") right center no-repeat;}
#nav a {display:inline-block; vertical-align:middle; position:relative; overflow:hidden; width:60px; height:100%; transition:0.2s;}
#nav li:hover a {width:220px; height:100%; border-radius:0 10px 10px 0; box-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
#nav .icon {display:inline-block; vertical-align:middle; width:60px; height:60px; background:url("../images/common/icon_menu.png") no-repeat; background-size:180px auto; transition:0.25s; background:url("../images/common/icon_menu_ie.png") no-repeat \9;}
#nav .on .icon {background-color:#3553ba; background-color:rgba(53, 83, 186, 0.9);}
#nav li:hover .icon {background-color:#3553ba; background-color:rgba(53, 83, 186, 0.9);}
#nav .txt {display:inline-block; vertical-align:middle; position:absolute; left:60px; top:0; width:160px; height:60px; background-color:#3553ba; background-color:rgba(53, 83, 186, 0.9); font:14px NanumGothicBold; color:#fff; letter-spacing:-1px; line-height:60px; text-indent:20px; text-shadow:0 1px 1px rgba(0, 0, 0, 0.15); opacity:0; transition:0.25s;}
#nav li:hover .txt {opacity:1;}
#nav .n_home .icon {background-position:0px 0px;}
#nav .n_display .icon {background-position:0px -60px;}
#nav .n_mobile .icon {background-position:0px -120px;}
#nav .n_media .icon {background-position:0px -180px;}
#nav .n_sns .icon {background-position:0px -240px;}
#nav .n_keyword .icon {background-position:0px -300px;}
#nav li:hover .n_home .icon, #nav li.on .n_home .icon {background-position:-60px 0px;}
#nav li:hover .n_display .icon, #nav li.on .n_display .icon {background-position:-60px -60px;}
#nav li:hover .n_mobile .icon, #nav li.on .n_mobile .icon {background-position:-60px -120px;}
#nav li:hover .n_media .icon, #nav li.on .n_media .icon {background-position:-60px -180px;}
#nav li:hover .n_sns .icon, #nav li.on .n_sns .icon {background-position:-60px -240px;}
#nav li:hover .n_keyword .icon, #nav li.on .n_keyword .icon {background-position:-60px -300px;}

/* 컨텐츠 */
#contents {margin-left:60px; background:#fff;}
#contents .title.big {margin:95px auto 60px auto; opacity:0.8; text-shadow:0 1px 3px rgba(0, 0, 0, 0.2);}

#contents .c_visual {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; height:800px; background:url("../images/common/bg_visual_m.jpg") center no-repeat; background-size:cover;}
#contents .c_visual .cv_txt {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:190px; width:700px; height:350px; margin-left:-350px; background:url("../images/common/slogan_main.png") center no-repeat;}
#contents .c_visual .cv_btn {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:700px; width:50px; height:50px; margin-left:-25px; background:url("../images/common/btn_down.png") center top no-repeat;}
#contents .c_visual .cv_btn:hover {background-position:center bottom;}
#contents .c_visual .cv_btn a {display:inline-block; vertical-align:middle; width:100%; height:100%;}
#contents .c_visual .cv_btn2 {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:550px; z-index:99; width:80px; height:80px; margin-left:-40px; background:#3553ba url("../images/common/btn_down2.png") center top no-repeat; opacity:0.9; transition:0.2s;}
#contents .c_visual .cv_btn2:hover {top:560px; opacity:1;}
#contents .c_visual .cv_btn2 a {display:inline-block; vertical-align:middle; width:100%; height:100%;}

#contents .c_visual.display {height:600px; background:url("../images/common/bg_visual_s_display.jpg") center no-repeat; background-size:cover;}
#contents .c_visual.display .cv_txt {top:180px; height:200px; background:url("../images/common/slogan_sub_display.png") center no-repeat;}
#contents .c_visual.mobile {height:600px; background:url("../images/common/bg_visual_s_mobile.jpg") center no-repeat; background-size:cover;}
#contents .c_visual.mobile .cv_txt {top:180px; height:200px; background:url("../images/common/slogan_sub_mobile.png") center no-repeat;}
#contents .c_visual.media {height:600px; background:url("../images/common/bg_visual_s_media.jpg") center no-repeat; background-size:cover;}
#contents .c_visual.media .cv_txt {top:180px; height:200px; background:url("../images/common/slogan_sub_media.png") center no-repeat;}
#contents .c_visual.sns {height:600px; background:url("../images/common/bg_visual_s_sns.jpg") center no-repeat; background-size:cover;}
#contents .c_visual.sns .cv_txt {top:180px; height:200px; background:url("../images/common/slogan_sub_sns.png") center no-repeat;}
#contents .c_visual.keyword {height:600px; background:url("../images/common/bg_visual_s_keyword.jpg") center no-repeat; background-size:cover;}
#contents .c_visual.keyword .cv_txt {top:180px; height:200px; background:url("../images/common/slogan_sub_keyword.png") center no-repeat;}

#contents .c_slogan {display:inline-block; vertical-align:middle; float:left; width:100%; height:400px; background:#fff;}
#contents .c_slogan .cs_slogan {display:inline-block; vertical-align:middle; width:280px; height:70px; background:url("../images/common/slogan_sub.png") center no-repeat;}
#contents .c_slogan .cf {color:#525f97;}

#contents .c_service {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; height:800px; background:url("../images/common/bg_service.jpg") center no-repeat; background-size:cover;}
#contents .c_service ul {display:inline-block; vertical-align:middle; width:900px; margin-top:20px; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2);}
#contents .c_service li {display:inline; float:left; width:300px; height:260px; background:url("../images/common/line_diagonal_r.png") center top no-repeat;}
#contents .c_service .icon {display:inline-block; vertical-align:middle; overflow:hidden; width:100px; height:100px; border-radius:50px; background:url("../images/common/icon_menu.png") no-repeat; background-color:#3553ba; background-color:rgba(53, 83, 186, 0.8); transition:0.2s;}
#contents .c_service li:hover .icon {background-color:#fff; background-color:rgba(255, 255, 255, 0.8);}
#contents .c_service .cs_display .icon {background-position:-130px -130px;}
#contents .c_service .cs_mobile .icon {background-position:-130px -250px;}
#contents .c_service .cs_media .icon {background-position:-130px -370px;}
#contents .c_service .cs_sns .icon {background-position:-130px -490px;}
#contents .c_service .cs_keyword .icon {background-position:-130px -610px;}
#contents .c_service li:hover .cs_display .icon {background-position:-250px -130px;}
#contents .c_service li:hover .cs_mobile .icon {background-position:-250px -250px;}
#contents .c_service li:hover .cs_media .icon {background-position:-250px -370px;}
#contents .c_service li:hover .cs_sns .icon {background-position:-250px -490px;}
#contents .c_service li:hover .cs_keyword .icon {background-position:-250px -610px;}
#contents .c_service .txt {display:inline-block; vertical-align:middle; width:100%; height:45px; font:16px NanumGothicBold; color:#5d7eef; letter-spacing:-1px; line-height:45px; transition:0.2s;}
#contents .c_service li:hover .txt {color:#fff;}

#contents .c_advantage {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; height:800px; background:url("../images/common/bg_advantage.jpg") center no-repeat; background-size:cover;}
#contents .c_advantage .line {display:inline-block; vertical-align:middle; width:50px; height:50px; background:url("../images/common/line_diagonal_l.png") center no-repeat;}

#contents .c_location {display:inline-block; vertical-align:middle; float:left; position:relative; width:50%; height:400px; background:url("../images/common/bg_location.jpg") center no-repeat; background-size:cover;}
#contents .c_location a {display:inline-block; vertical-align:middle; width:100%; height:100%;}
#contents .c_location .icon {display:inline-block; vertical-align:middle; width:100%; margin-top:100px; padding-top:70px; background:url("../images/common/icon_location.png") center top no-repeat; text-align:center;}
#contents .c_location .cl_btn {display:inline-block; vertical-align:middle; width:30px; height:30px; margin-top:20px; background:url("../images/common/icon_arrow_right.png") center center no-repeat;}

#contents .c_sns {display:inline-block; vertical-align:middle; float:left; position:relative; width:50%; height:400px; background:url("../images/common/bg_sns.jpg") center no-repeat; background-size:cover;}
#contents .c_sns ul {display:inline-block; vertical-align:middle; width:70%; margin:95px 15% 0 15%;}
#contents .c_sns li {display:inline; float:left; position:relative; width:33.333333%; height:150px; text-align:center;}
#contents .c_sns a {display:inline-block; vertical-align:middle; width:110px; height:150px; background:url("../images/common/btn_sns.png") no-repeat;}
#contents .c_sns a.cs_yellow {background-position:0px 0px;}
#contents .c_sns a.cs_facebook {background-position:-110px 0px;}
#contents .c_sns a.cs_blog {background-position:-220px 0px;}
#contents .c_sns a:hover.cs_yellow {background-position:0px -150px;}
#contents .c_sns a:hover.cs_facebook {background-position:-110px -150px;}
#contents .c_sns a:hover.cs_blog {background-position:-220px -150px;}

#contents .c_partner {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; background:#fff;}
#contents .c_partner ul {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_partner li {display:inline; float:left; position:relative; overflow:hidden; width:16.666666%; height:150px;}
#contents .c_partner .cp_box {height:100%; border-top:#e2e2e2 solid 1px; border-left:#e2e2e2 solid 1px; line-height:150px;}
#contents .c_partner .cp_box img {display:inline-block; vertical-align:middle; max-width:100%;}
#contents .c_partner .cp_over {display:inline-block; vertical-align:middle; position:absolute; left:0; top:150px; width:100%; height:100%; background:#3553ba; line-height:0px; opacity:0; transition:0.25s;}
#contents .c_partner li:hover .cp_over {display:inline-block; top:0px; opacity:0.85;}
#contents .c_partner .cp_over strong {display:inline-block; vertical-align:middle; width:100%; height:30px; margin-top:50px; font:22px NanumGothicBold; color:#fff; letter-spacing:-1px; line-height:30px;}
#contents .c_partner .cp_over a {display:inline-block; vertical-align:middle; width:100%; height:20px; font:12px NanumGothic; color:#b6bfdf; letter-spacing:0px; line-height:20px;}

#contents .c_advice {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; height:1000px; background:#425aad;}
#contents .c_advice .ca_form {display:inline-block; vertical-align:middle; width:780px; text-align:left;}
#contents .c_advice .ca_form ul {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_advice .ca_form li {display:inline-block; float:left; width:100%;}
#contents .c_advice .ca_form li.div2 {width:50%;}
#contents .c_advice .ca_form .caf_box {display:block; vertical-align:middle; overflow:hidden; border-radius:5px; background:#3e55a6; box-shadow:inset 1px 1px 1px rgba(0, 0, 0, 0.15);}
#contents .c_advice .ca_form .caf_box:hover {background:#fff;}
#contents .c_advice .ca_form .caf_box .caf_icon {display:inline-block; vertical-align:middle; float:left; width:50px; height:50px; border-radius:5px 0 0 5px; background:url("../images/common/icon_advice.png") no-repeat; background-color:#3b51a1; box-shadow:inset 1px 1px 1px rgba(0, 0, 0, 0.15);}
#contents .c_advice .ca_form .caf_box:hover .caf_icon {background-color:#fff;}
#contents .c_advice .ca_form .caf_box.contents .caf_icon {height:200px;}
#contents .c_advice .ca_form .caf_box .caf_icon.name {background-position:0px 0px;}
#contents .c_advice .ca_form .caf_box .caf_icon.company {background-position:0px -50px;}
#contents .c_advice .ca_form .caf_box .caf_icon.phone {background-position:0px -100px;}
#contents .c_advice .ca_form .caf_box .caf_icon.email {background-position:0px -150px;}
#contents .c_advice .ca_form .caf_box .caf_icon.contents {background-position:0px -200px;}
#contents .c_advice .ca_form .caf_box .caf_input {display:block; height:50px; margin-left:50px;}
#contents .c_advice .ca_form .caf_box .caf_input input {display:inline-block; vertical-align:middle; width:100%; height:50px; margin:0; padding:0; border:none; background:none; font:15px NanumGothic; color:#8497d8; letter-spacing:0px; line-height:50px; text-indent:15px;}
#contents .c_advice .ca_form .caf_box:hover .caf_input input {color:#425aad;}
#contents .c_advice .ca_form .caf_box .caf_text {display:block; height:200px; margin-left:50px;}
#contents .c_advice .ca_form .caf_box .caf_text textarea {display:inline-block; vertical-align:middle; overflow:auto; width:98%; height:174px; margin:0; padding:13px 0 13px 2%; border:none; background:none; font:15px NanumGothic; color:#8497d8; letter-spacing:0px; line-height:24px;}
#contents .c_advice .ca_form .caf_box:hover .caf_text textarea {color:#425aad;}
#contents .c_advice .ca_form .caf_wrap {display:block; vertical-align:middle; padding:10px;}
#contents .c_advice .ca_form .caf_option ul {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_advice .ca_form .caf_option li {display:inline-block; float:left; width:33.333333%; padding:8px 0;}
#contents .c_advice .ca_form .caf_option input {display:inline-block; vertical-align:middle; margin:0 8px;}
#contents .c_advice .ca_form .caf_option label:hover {color:#fff; cursor:pointer;}

#contents .c_page {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; background:#fff;}

#contents .c_display {display:inline-block; vertical-align:middle; width:100%;}
#contents .c_display li {display:inline-block; vertical-align:middle; width:100%; padding:65px 0; border-bottom:#dedede solid 1px;}
#contents .c_display li.start {border-top:#dedede solid 1px;}
#contents .c_display li:hover {background:#3553ba;}
#contents .c_display li:hover .cm {color:#fff;}
#contents .c_display li:hover .ca {color:#8497d8;}
#contents .c_display li a {display:inline-block; vertical-align:middle; width:100%; height:100%; cursor:pointer;}

#map_canvas { display:inline-block; vertical-align:middle; width:920px; height:400px; border:#fff solid 10px; border-radius:30px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);}

/* 팝업레이어 */
.popup_box {display:none; position:relative; width:auto; padding:30px; border:5px solid #fff; background-color:#fff; opacity:0; box-shadow:0 0 150px rgba(0, 0, 0, 0.3);}
.popup_box:hover {box-shadow:0 0 150px rgba(53, 83, 186, 1);}
.popup_wrap {display:inline-block; vertical-align:middle; width:760px;}
.popup_btn {display:inline-block; vertical-align:middle; position:absolute; right:-5px; top:-5px; width:40px; height:40px; background:#3553ba; font:16px NanumGothic; color:#fff; letter-spacing:-1px; line-height:40px; text-align:center; cursor:pointer;}
.popup_btn:hover {background:#fafafa; color:#3553ba;}
.popup {display:inline-block; vertical-align:middle; position:absolute; z-index:99; box-shadow:3px 3px 5px rgba(0, 0, 0, 0.1);}
.popup .popup_btn {right:0px; top:0px;}


/* 푸터 */
#footer {margin-left:60px; background:#37393e;}
#footer .wrap {height:200px;}
#footer .f_wrap {display:inline-block; vertical-align:middle; width:100%;}
#footer .f_logo {display:inline-block; vertical-align:middle; width:330px; height:60px; margin-right:10px; background:url("../images/common/logo_f.png") no-repeat;}
#footer .f_menu {display:inline-block; vertical-align:middle; height:50px; margin-top:10px;}
#footer .f_menu li {display:inline; float:left; background:url("../images/common/line_14px.png") center left no-repeat;}
#footer .f_menu li.start {background:none;}
#footer .f_menu a {display:inline-block; vertical-align:middle; height:50px; padding:0 20px; font:15px NanumGothicBold; color:#fff; letter-spacing:-1px; line-height:50px;}
#footer .f_menu a:hover {color:#607ec9;}
#footer .f_info {display:inline-block; vertical-align:middle; height:30px; margin-top:10px;}
#footer .f_info li {display:inline; float:left; background:url("../images/common/line_11px.png") center left no-repeat; padding:0 15px; font:12px NanumGothic; color:#797d86; letter-spacing:0; line-height:30px;}
#footer .f_info li a {color:#797d86;}
#footer .f_info li a:hover {color:#fff;}
#footer .f_info li.start {background:none;}
#footer .f_copyright {display:inline-block; vertical-align:bottom; height:30px; font:10px NanumGothic; color:#fff; letter-spacing:0; line-height:30px;}
#footer .f_copyright strong {font:10px NanumGothic; color:#607ec9; letter-spacing:0; line-height:30px;}