@charset "utf-8"; #container { } #container .section { position:relative; /*padding:0 0 100px 0; */padding:0 0 20px 0; z-index:1; /*min-height:700px; */min-height:200px; } #container .section:after { clear:both; display:block; content:''; visibility:hidden } #container .section .section_con { position:relative; margin:0 auto; padding:0 50px; max-width:1400px } #container .section .section_con:after { clear:both; display:block; content:''; visibility:hidden } #container .section .section_con .img_wrap img { width:100% } #container .section .section_con img.img_pc { display:block } #container .section .section_con img.img_mob { display:none } #container .section_con ul.allocation { text-align:justify; overflow:hidden } #container .section_con ul.allocation:after { display:inline-block !important; width:100%; height:0; content:'' } #container .section_con ul.allocation li { position:relative; float:none !important; display:inline-block } #container .section_con ul.allocation li.clear { margin:0; padding:0; border:none; background:none } #container .section_con ul.allocation li .allocation_inner { } #container .section_con ul.column2 li { width:48% } #container .section_con ul.column3 li { width:32% } #container .section_con ul.column4 li { width:23% } #container .section_con ul.tpl_list { /*margin-bottom:100px*/ } #container .section_con ul.tpl_list li { /*height:370px*/ } #container .section_con ul.tpl_list li .allocation_inner h3 { font-size:18px; margin-bottom:20px } #container .section_con ul.tpl_list li .allocation_inner p.txt { font-size:14px; color:#777; line-height:1.6 } #container .section_con ul.tpl_list li .allocation_inner p.img { /*position:absolute; */ bottom:0; left:0 } #container .section_con ul.tpl_list li .allocation_inner p.img img { display:block; width:100% } #container .section_con ul.prcs_list li { text-align:center; background:url(../images/process_arrow.png) right 10px center no-repeat } #container .section_con ul.prcs_list li:hover { text-align:center; background:url(../images/process_arrow_on.png) right 10px center no-repeat } #container .section_con ul.prcs_list li.last { background:none } #container .section .section_con .con_box { clear:both; padding:30px 50px 10px 50px; border:3px solid #ccc; overflow:hidden } #container .section .section_con .con_box .left { float:left; width:50% } #container .section .section_con .con_box .right { float:right; width:50% } #container .section .section_con .con_box dl { position:relative; margin-bottom:15px; overflow:hidden } #container .section .section_con .con_box dl dt { clear:left; float:left; width:100px; color:#666 } #container .section .section_con .con_box dl dd { margin-left:100px; padding-right:20px; color:#888 } #container .sub_section1 { } #container .sub_section1 h2.main_tit { padding:80px 0 56px 0; font-weight:400; font-size:56px; line-height:1.2; color:#333 } #container .sub_section1 h2.main_tit span { font-weight:400; font-size:24px; line-height:1.2; color:#868686; vertical-align:text-top; } .mSection .inner { width:100%; max-width:1400px; margin:0 auto; padding:0 50px } #container .sub_section2 > .section_con > .section_title { max-width:100%; margin:0 auto; /*padding:120px 0 75px; */padding:0px 0 75px; text-align:center } #container .sub_section2 > .section_con > .section_title h2 { position:relative; font-size:42px; color:#121212; margin-bottom:20px; padding-top:20px } #container .sub_section2 > .section_con > .section_title h2:before { position:absolute; display:inline-block; width:80px; height:6px; top:0; left:50%; margin-left:-40px; content:''; background:#21bbb1 } #container .sub_section2 > .section_con > .section_title p { font-size:24px; color:#333 } #container .sub_section2 > .section_con > h3 { font-size:48px; margin-bottom:30px } #container .sub_section2 > .section_con p.main_desc { color:#777; line-height:2; text-align:justify; margin-bottom:120px } #container .sub_section2 > .section_con > ul { clear:both } #container .sub_section2 > .section_con > ul:after { clear:both; display:block; content:''; visibility:hidden } #container .sub_section2 > .section_con > ul > li { position:relative; float:left } #container .sub_section2 > .section_con > ul > li img { width:100% } #container .sub_section2 > .section_con > ul > li.right { float:right } #container .sub_section2 > .section_con > ul > li.list1 { width:50% } #container .sub_section2 > .section_con > ul > li.list2 { width:47% } #container .sub_section2 > .section_con > ul > li .text_effect { float:left; width:45% } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt { display:inline-block; font-size:36px; color:#21bbb1 } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt p { position:relative; margin-bottom:10px; height:1px;; background:#aaece6 } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt p span { position:absolute; display:inline-block; width:100%; height:1px } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt p span.color1 { background:#21bbb1 } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt p span.color2 { width:0; background:#aaece6 } #container .sub_section2 .txt_box { float:right; width:50%; padding-top:10px } #container .sub_section2 .txt_box p.desc { line-height:1.7; letter-spacing:-0.5px; text-align:justify; margin-bottom:30px } #container .sub_section2 .section_con .process_box { padding:30px; border:3px solid #ccc } #container .sub_section2 .section_con .process_box ul.prcs_list li p.img { /*height:70px; */ margin-bottom:10px } #container .sub_section2 .section_con .process_box ul.prcs_list li p.title { background-color:#21bbb1; color:#fff; height:44px; margin:10px auto; padding:6px 0 0; border-radius: 30px; width:80% } #container .sub_section2 .section_con .process_box ul.prcs_list li p.title2 { background-color:#ccc; color:#fff; height:44px; margin:10px 25%; padding:10px 0 0; border-radius: 10px; } #container .sub_section2 .section_con .process_box ul.prcs_list li p.txt { font-weight:600; line-height:1.5 } #container .sub_section3 .wrap_type1 { margin-top:200px; border:1px solid #dedede; overflow:hidden } #container .sub_section3 .wrap_type1 .left { float:left; width:45% } #container .sub_section3 .wrap_type1 .left img { display:block; width:100% } #container .sub_section3 .wrap_type1 .center { float:left; width:30%; padding-top:50px } #container .sub_section3 .wrap_type1 .right { float:right; width:22%; border-left:1px solid #dedede } #container .sub_section3 ul.text_effect { padding-left:15% } #container .sub_section3 ul.text_effect li { float:none !important } #container .sub_section3 ul.text_effect li .txt { display:inline-block; font-size:36px; color:#21bbb1; line-height:1.4 } #container .sub_section3 ul.text_effect li .txt p { position:relative; margin-bottom:10px; height:1px; background:#aaece6 } #container .sub_section3 ul.text_effect li .txt p span { position:absolute; display:inline-block; width:100%; height:1px } #container .sub_section3 ul.text_effect li .txt p span.color1 { background:#21bbb1 } #container .sub_section3 ul.text_effect li .txt p span.color2 { width:0; background:#aaece6 } #container .sub_section3 .wrap_type1 .right p.img { margin-bottom:75px } #container .sub_section3 .wrap_type1 .right p.img img { width:100% } #container .sub_section3 .wrap_type1 .right h3 { line-height:1; margin-bottom:34px; padding:0 30px } #container .sub_section3 .wrap_type1 .right h3 p { font-size:44px; color:#000; line-height:inherit; transition:all .5s ease } #container .sub_section3 .wrap_type1 .right h3 p:after { clear:both; display:block; content:''; visibility:hidden } #container .sub_section3 .wrap_type1 .right h3 p.tit1 { } #container .sub_section3 .wrap_type1 .right h3 p.tit2 { width:105%; margin-left:-5px } #container .sub_section3 .wrap_type1 .right h3 p.tit3 { width:110%; margin-left:-5px } #container .sub_section3 .wrap_type1 .right h3 p span { display:block; float:left; width:16%; text-align:center } #container .sub_section3 .wrap_type1 .right h3 p span.blind { display:none } #container .sub_section3 .wrap_type1 .center p.desc { color:#777; margin-top:30px; padding-left:15%; line-height:1.6; text-align:justify } #container .sub_section4 { padding-top:60px } /* 연혁 */ #container .sub_section5 > .section_con > h3 { font-size:48px; margin-bottom:30px } #container .sub_section5 .history { text-align:justify } #container .sub_section5 .history:after { display:inline-block; width:100%; height:0; content:'' } #container .sub_section5 .history > .history_box { display:inline-block; width:48%; margin-bottom:35px; overflow:hidden; vertical-align:text-top; } #container .sub_section5 .history > .history_box h3 { font-size:24px; font-weight:600; /*color:#f4bd00; */color:#21bbb1; padding-bottom:15px; border-bottom:1px solid #dedede; margin-bottom:20px } #container .sub_section5 .history > .history_box dl { margin:0; padding:0; overflow:hidden } #container .sub_section5 .history > .history_box dl dt { float:left; color:#999; width:70px; line-height:1.6; padding:5px 0 } #container .sub_section5 .history > .history_box dl dd { color:#555; margin-left:80px; padding:5px 0; line-height:1.6 } #container .sub_section5 .history > .history_box dl span.white { color:#fff !important } #container .sub_section5 .history > .con_box { clear:both; /*padding:30px 50px 10px 50px; */padding:30px 50px; border:3px solid #ccc; overflow:hidden } #container .sub_section5 .history > .con_box .left { float:left; width:50% } #container .sub_section5 .history > .con_box .right { float:right; width:50% } #container .sub_section5 .history > .con_box dl { position:relative; margin-bottom:15px; overflow:hidden } #container .sub_section5 .history > .con_box dl dt { clear:left; float:left; width:100px; color:#666 } #container .sub_section5 .history > .con_box dl dd { margin-left:100px; padding-right:20px; color:#888 } #container .section_con .left_header { float:left; width:17% } #container .section_con .left_header p.icon { position:relative; margin-top:40px; padding-top:35px } #container .section_con .left_header p.icon img { display:block } #container .section_con .left_header p.icon:after { position:absolute; top:0; left:0; display:block; width:20px; height:1px; content:''; background:#ccc } #container .section_con .left_header h2 { font-size:30px; font-weight:400; margin-bottom:30px } #container .section_con .left_header p.desc { color:#666; line-height:1.6 } #container .section_con .right_con { float:right; width:82%; max-width:1050px } #container .section_con .right_con > img { width:100% } #container .section_con .photo_slide { } #container .section_con .photo_slide .slide_wrap { position:relative; margin-bottom:30px } #container .section_con .photo_slide .slide_wrap .tit_box { position:absolute; width:140px; height:135px; padding:20px; top:0; right:0; color:#fff; background:#21bbb1; z-index:50 } #container .section_con .photo_slide .slide_wrap .tit_box h2 { font-size:22px; margin-bottom:10px } #container .section_con .photo_slide .slide_wrap .tit_box h3 { font-size:24px; font-weight:400 } #container .section_con .photo_slide .slide_wrap .photo_list { overflow:hidden } #container .section_con .photo_slide .slide_wrap .photo_list li { position:relative; float:left; cursor:pointer } #container .section_con .photo_slide .slide_wrap .photo_list li img { display:block } #container .section_con .photo_slide .slide_wrap .photo_list li a { display:none; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; z-index:10 } #container .section_con .photo_slide .slide_wrap .photo_list li a .mask { position:absolute; display:block; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:20 } #container .section_con .photo_slide .slide_wrap .photo_list li a img { display:inline-block; position:relative; text-align:center; z-index:30 } #container .section_con .photo_slide .paging { clear:both; margin:30px 0 100px 0; font-size:28px; color:#bbb; text-align:right } #container .section_con .photo_slide .paging a { display:inline-block; border:0px; } #container .section_con .photo_slide .paging a img { vertical-align:-3px } #container .section_con .photo_slide .paging span.current { color:#21bbb1 } #container .section_con .photo_slide .photo_swipe { position:relative; display:none; overflow:hidden } #container .section_con .photo_slide .photo_swipe ul { position:relative } #container .section_con .photo_slide .photo_swipe ul li { position:relative; float:left } #container .section_con .photo_slide .photo_swipe ul li img { display:block; width:100% } #container .section_con .photo_slide .photo_swipe ul li p { position:absolute; display:inline-block; bottom:0; left:0; padding:15px 25px; color:#333; background:#fff } #container .section_con .photo_slide .paging_m { clear:both; display:none; margin:30px 0 100px 0; font-size:28px; color:#bbb; text-align:center } #container .section_con .photo_slide .paging_m a { display:inline-block } #container .section_con .photo_slide .paging_m a img { vertical-align:-3px } #container .section_con .photo_slide .paging_m span.current { color:#21bbb1 } #container .section_con .map_list li .map_list_wrap { padding-bottom:15px; border-bottom:1px solid #eee; cursor:pointer } #container .section_con .map_list li:hover h3, #container .section_con .map_list li .map_list_wrap:hover p, #container .section_con .map_list li.on h3, #container .section_con .map_list li.on p, #container .section_con .map_list li:hover a, #container .section_con .map_list li.on a { color:#21bbb1 !important } #container .section_con .map_list li:hover p.tel, #container .section_con .map_list li.on p.tel { background:url(../images/map_phone_c.png) left center no-repeat !important } #container .section_con .map_list li:hover p.fax, #container .section_con .map_list li.on p.fax { background:url(../images/map_printer_c.png) left center no-repeat !important } #container .section_con .map_list li .map_list_wrap h3 { font-size:18px; font-weight:400; margin-bottom:20px } #container .section_con .map_list li .map_list_wrap p { color:#777 } #container .section_con .map_list li .map_list_wrap p.new { margin-bottom:5px } #container .section_con .map_list li .map_list_wrap p.old { margin-bottom:50px } #container .section_con .map_list li .map_list_wrap p.tel { margin-bottom:15px; padding-left:45px; background:url(../images/map_phone.png) left center no-repeat } #container .section_con .map_list li .map_list_wrap p.fax { padding-left:45px; background:url(../images/map_printer.png) left center no-repeat } #container .section_con .map_list li .map_list_wrap a.pointer { display:block; position:absolute; right:0; bottom:15px } #container .section_con .map_list li.map { display:none; margin-top:30px; width:100% } #container .section_con .map_list li.map .map_area { position:relative; width:100%; height:500px; overflow:hidden } #container .section_con .map_list li.map .map_area #map { height:100% } /* 서브 비주얼 */ #sub_visual { position:relative } #sub_visual .visual_wrap { position:relative; overflow:hidden } #sub_visual img { width:100%; transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); transition:all 8s ease } #sub_visual img.load { width:100%; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1) } #sub_visual .visual2, #sub_visual .visual3 { display:none } #sub_visual .visual_acc { position:relative; margin:0 auto; width:100%; max-width:1400px } #sub_visual .visual_tit { position:absolute } /*#sub_visual .visual_tit { top:150px; left:50%; margin-left:-150px } */ #sub_visual .visual_tit { top:250px; left:50%; margin-left:-100px } #sub_visual .visual_tit ul { position:relative; text-align:center } #sub_visual .visual_tit ul li .txt { display:inline-block; font-size:46px; line-height:1.5; color:#fff } #sub_visual .visual_tit ul li .txt p { position:relative; margin-bottom:10px; height:1px; background:#0000ff } #sub_visual .visual_tit ul li .txt p span { position:absolute; left:0; display:inline-block; width:100%; height:1px } #sub_visual .visual_tit ul li .txt p span.color1 { background:cyan } #sub_visual .visual_tit ul li .txt p span.color2 { width:0; background:#0000ff } /* Layer popup */ #img_popup_wrap { position:fixed; top:0; left:0; width:100%; height:100%; z-index:990; visibility:hidden } #mask { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity='80') } #imgPopup { position:fixed; top:50%; left:50%; width:60%; background:#fff; z-index:1000 } #imgPopup .img_wrap { position:relative; height:100% } #imgPopup .img_wrap ul { } #imgPopup .img_wrap ul li { display:none } #imgPopup .img_wrap ul li.on { display:block } #imgPopup .img_wrap ul li img { display:block; width:100% } #imgPopup .img_wrap p.tit { clear:both; line-height:50px; padding:0 30px } #img_popup_wrap a { position:absolute; z-index:1010 } #img_popup_wrap a.pop_close { top:20px; right:10% } #img_popup_wrap a.pop_prev { top:50%; left:10% } #img_popup_wrap a.pop_next { top:50%; right:10% } /* Media Queries */ /* 202511 :: 프로필 약력 추가 */ .advisor-profile-section {position: relative; background-color: #f7f7f7; padding: 120px 0; border-radius: 0 300px 0 0; } .advisor-profile-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 110px; padding: 0 16px; } .advisor-profile-section .txt-obj{position: absolute;left: 0; bottom: -68px; font-size: 128px; opacity: 0.05;} .advisor-profile-section .txt-obj span{color: #333; } /* 왼쪽 이미지 */ .advisor-profile-photo { position: relative; flex: 0 0 360px; max-width: 380px; margin: 0 auto; } .advisor-profile-photo::before { content: ""; position: absolute; inset: -10% 5% 0%; border-radius: 20px 20px 0 0; background: #e7e7e7;/* background: linear-gradient(135deg, #ffffff, #21bbb12b); */ /* box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08); */ z-index: 0; } /* .advisor-profile-photo::after { content: ""; position: absolute; top: 3%; right: -4%; width: 60px; height: 60px; border-radius: 50%; border: 4px solid #21bbb1; opacity: 0.7; } */ .advisor-profile-photo img { position: relative; z-index: 1; width: 100%; max-width: 320px; display: block; margin: 0 auto; } .advisor-profile-content { flex: 1; color: #222; } .advisor-profile-heading { margin-bottom: 30px; position: relative; } .advisor-profile-quote-mark { font-size: 40px; line-height: 1; color: #21bbb1; display: inline-block; margin-bottom: 8px; } .advisor-profile-quote-text { font-size: 26px; line-height: 1.6; font-weight: 500; } /* 오른쪽 */ .advisor-profile-label { font-size: 20px; color: #21bbb1; font-weight: 600; margin-bottom: 6px; } .advisor-profile-name { font-size: 44px; font-weight: 600; line-height: 1.5; margin-bottom: 36px; } .advisor-profile-name span { font-size: 22px; margin-left: 6px; font-weight: 400; } .advisor-profile-meta { font-size: 16px; color: #666; margin-bottom: 24px; } .advisor-profile-career-title { font-size: 24px; font-weight: 600; margin-bottom: 12px; } .advisor-profile-career.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; margin-top: 12px; } .advisor-profile-career.two-col ul { margin: 0; padding: 0; list-style: none; } .advisor-profile-career.two-col li { font-size: 18px; line-height: 1.8; color: #444; margin: 4px 0; word-break: keep-all; } .advisor-profile-career.two-col .year { font-weight: 600; display: inline-block; width: 80px; color: #222; } @media screen and (max-width: 1280px){ .advisor-profile-inner{gap: 30px;} } @media screen and (max-width: 1200px){ .advisor-profile-inner { flex-direction: column; text-align: center; } .advisor-profile-photo { max-width: 300px; } .advisor-profile-photo::before {inset: -10% 0% 0;} .advisor-profile-photo::after { width: 46px; height: 46px; right: -2%; } .advisor-profile-heading { margin-top: 10px; } .advisor-profile-quote-text { font-size: 20px; } .advisor-profile-content { width: 100%; } .advisor-profile-career { text-align: left; margin-top: 20px; } .advisor-profile-career.two-col ul { margin-bottom: 10px; } .advisor-profile-section .txt-obj{ bottom: -42px;font-size: 84px;} } @media screen and (max-width: 680px){ .advisor-profile-section{border-radius: 0 80px 0 0;} .advisor-profile-name { font-size: 34px; margin-bottom: 0;} .advisor-profile-career.two-col{gap: 0;} .advisor-profile-label{font-size: 16px;} .advisor-profile-career-title{font-size: 20px;} .advisor-profile-career.two-col li{font-size: 16px;} .advisor-profile-section .txt-obj { bottom: -22px; font-size: 44px;} .advisor-profile-career.two-col{ grid-template-columns: 1fr;} .advisor-profile-photo img{max-width: 260px;} .advisor-profile-photo::before { inset: -11% -1% 14%;} .advisor-profile-photo{ flex: 0 0 310px;} } @media screen and (max-width: 480px){ .advisor-profile-inner{padding: 0;} .advisor-profile-section { padding: 80px 16px; } .advisor-profile-quote-text { font-size: 18px; } .advisor-profile-name { font-size: 26px; } .advisor-profile-career li { font-size: 14px; } .advisor-profile-career li .year { width: 64px; } } @media screen and (max-width: 400px){ .advisor-profile-career.two-col .year{display: block;} } /* ----------------------------- 핸드폰 모양 실시간 상담 스타일 ----------------------------- */ #phone_wrap { position:fixed; top:218px; right:120px; width:237px; height:477px; background:url(../../img/phone.png) center top no-repeat; box-sizing:border-box; z-index:990; overflow:hidden; padding:50px 0 55px } #phone_wrap .phone_area { width:100%; height:100%; overflow-y:scroll; -ms-overflow-style:none } #phone_wrap .phone_area::-webkit-scrollbar { display:none; } #mainCounsel { padding:0 13px 55px 15px; box-sizing:border-box } #mainCounsel .title { padding:15px 0; text-align:center; background:#c1a24b } #mainCounsel .title h3 { font-size:16px; font-weight:600; color:#fff } #mainCounsel .formmail_title_bgcolor { font-family:inherit !important; font-weight:600; text-align:right; background:#fff !important } #mainCounsel .formmail_title_bgcolor font { color:#a2873b !important } #mainCounsel .formmail_cell_bgcolor { font-size:0 !important } #mainCounsel table { width:100%; margin-bottom:20px; table-layout:fixed } #mainCounsel table tbody td { padding:5px; border-bottom:1px solid #d5d5d5 } #mainCounsel table tbody td, #mainCounsel table tbody td font { font-size:12px !important } #mainCounsel table tbody tr td:first-child { width:47% !important } #mainCounsel table tbody td select { font-size:12px; max-width:90%; height:25px; border:1px solid #dedede } #mainCounsel table tbody td input[type=text] { max-width:90%; height:25px; border:1px solid #dedede } #mainCounsel table tbody td input[name^=phone_no] { width:34px; margin-left:2px } #mainCounsel table tbody td input[name^=phone_no]:first-child { margin-left:0 } #mainCounsel table tbody td textarea { max-width:90%; height:80px !important; border:1px solid #dedede } #mainCounsel .btn-area { text-align:center } #mainCounsel .btn-area > a { display:inline-block; padding:10px 20px; font-size:15px; color:#fff; background:#cba865; transition:all 0.3s ease } #mainCounsel .btn-area > a:hover { background:#a2873b } #mainCounsel .btn-close { position:absolute; display:block; bottom:12px; left:103px; width:32px; height:32px; font-size:0; text-indent:-9999em; border:2px solid #fff; border-radius:50%; box-sizing:border-box } #mainCounsel .btn-close > span { position:absolute; display:block; top:50%; left:50%; width:14px; height:2px; margin-left:-7px; margin-top:-1px; border-radius:2px; background:#fff } #mainCounsel .btn-close > span.line1 { transform:rotate(45deg) } #mainCounsel .btn-close > span.line2 { transform:rotate(-45deg) } #mainCounselMini { display:none; position:fixed; top:553px; right:20px; z-index:990 } #mainCounselMini img { display:block } @media screen and (max-width:1500px){ #container .section_con .photo_slide .slide_wrap .tit_box { position:static; top:inherit; right:inherit; width:auto; height:auto; color:#21bbb1; padding:80px 0 20px 0; background:none } #container .section_con .photo_slide .slide_wrap .tit_box h2, #container .section_con .photo_slide .slide_wrap .tit_box h3 { display:inline-block; font-size:40px } #container .section_con .photo_slide .slide_wrap .tit_box h2 { padding-right:10px } #container .section_con .photo_slide .slide_wrap .tit_box br { display:none } #container .section_con .photo_slide .slide_wrap .photo_list { display:none } #container .section_con .photo_slide .paging { display:none } #container .section_con .photo_slide .photo_swipe { display:block } #container .section_con .photo_slide .paging_m { display:block } } @media screen and (max-width:1280px){ #sub_visual .visual_tit ul li .txt { font-size:30px !important } #sub_visual .visual_tit { top:50%; margin-left:-100px; transform: translateY(-50%); } } @media screen and (max-width:1024px){ #header_wrap { height:105px !important; margin-bottom:0; background:#fff !important } #header_wrap .header_tit_bar { display:block !important } #header .header_utils { top:40px; right:120px } #header .header_utils ul { display:none } #header .header_utils .search_box { width:32px; border-bottom:none; background:url(../images/smart_search_sm.png) 0 0 no-repeat !important } #header .header_call_mnu { right:50px } /*#lnb { display:none } */ #nav_scroll { display:none } body.main #nav_scroll { display:block } #header .header_sitemap { position:absolute; top:105px; background:none } #header .header_sitemap .inner { padding-top:0 !important } #header .header_sitemap .inner > ul { display:block; width:100% !important; padding-top:0 !important } #header .header_sitemap .btn_close { display:none } #header .header_sitemap .inner > ul > li { float:left; width:25%; padding:0; overflow:visible } #header .header_sitemap .inner > ul > li > h2 { float:none; width:100% } #header .header_sitemap .inner > ul > li > h2 > a { display:block; width:100%; padding:35px 0; text-align:center; font-size:20px; font-weight:600; color:#fff; background:#999 } #header .header_sitemap .inner > ul > li > h2 > a.on { background:#21bbb1 !important } #header .header_sitemap .inner > ul > li > ul { display:none; position:absolute; left:0; float:none } #header .header_sitemap .inner > ul > li > ul > li { display:block !important; width:100% !important; padding:0 !important; border-left:none !important; overflow:hidden } #header .header_sitemap .inner > ul > li > ul > li > h3 { margin:0 !important } #header .header_sitemap .inner > ul > li > ul > li > h3 > a { display:block; padding:30px; color:#555 !important; border-bottom:1px solid #dedede; background:#fff } #header .header_sitemap .inner > ul > li > ul > li > h3 > a > span.more { display:block; float:right; width:35px; height:35px; margin-top:-10px; background:url(../images/sitemap_plus.png) 0 0 no-repeat; background-size:100% !important } #header .header_sitemap .inner > ul > li > ul > li > h3 > a > span.more.active { background:url(../images/sitemap_minus.png) 0 0 no-repeat !important; background-size:100% !important } #header .header_sitemap .inner > ul > li > ul > li > ul { display:none; float:none; width:100%; border-bottom:1px solid #dedede } #header .header_sitemap .inner > ul > li > ul > li > ul > li { padding:0 !important } #header .header_sitemap .inner > ul > li > ul > li > ul > li > a { display:block; font-size:13px; color:#666 !important; padding:15px 30px; background:#f4f4f4 } #main_visual ul li .visual1, #main_visual ul li .visual3 { display:none } #main_visual ul li .visual2 { display:block !important } #container .section .section_con img.img_mob { display:none } #container .section1 .section_con ul li { width:48%; margin-bottom:4% } #container .section1 .section_con ul li.full { width:100% } #container .section2 .section_con ul li { width:48% } #container .section2 .section_con ul li.last { display:none } #container .sub_section2 > .section_con > .section_title { /*max-width:80%*/max-width:90% } #container .sub_section2 > .section_con > .section_title h2 { font-size:36px; line-height:1.2 } #container .history > .history_box { display:block; width:100% !important } #container .history > .history_box h3 { font-size:20px !important } #container .section3 .section_con .left h2 p { font-size:36px } #container .section3 .section_con .left h2 p.tit2 { margin-left:-10px } #container .section3 .section_con .right .video img.play_icon { width:60px; height:60px; top:35%; left:40% } #container .section4 .section_con img.visual1, #container .section4 .section_con img.visual3 { display:none } #container .section4 .section_con img.visual2 { display:block } #container .section4 .section_con > div > h2 { font-size:42px } #container .section4 .section_con > div > p { line-height:1.8; margin-bottom:20px } #container .section5 ul:after { clear:both; display:block; content:''; visibility:hidden } #container .section5 ul li { position:relative; display:block; width:100%; margin-bottom:50px; padding:0; border:1px solid #dedede; background:#f7f7f7; box-sizing:border-box } #container .section5 ul li.last { margin-bottom:0 } #container .section5 ul li div { text-align:left; width:300px; margin:0; padding:40px } #container .section5 ul li div p.icon { position:absolute; top:40px; right:40px; margin:0 } #container .aside { padding-bottom:100px } #container .aside .section_con { padding:0 50px; border:none } #container .aside .section_con > ul { border-top:5px solid #eee } #container .aside .section_con > ul:after { clear:both; display:block; content:''; visibility:hidden } #container .aside .section_con > ul > li { display:block; width:100% } #container .aside .section_con > ul > li > h3 { margin:0; padding:0; border-bottom:1px solid #dedede } #container .aside .section_con > ul > li > h3 > a { display:block; width:100%; height:100%; padding:40px 0; background:url(../images/sitemap_plus.png) right 50% no-repeat } #container .aside .section_con > ul > li > h3 > a.on { background:url(../images/sitemap_minus.png) right 50% no-repeat } #container .aside .section_con > ul > li > ul.sub1 { display:none; clear:both; overflow:hidden } #container .aside .section_con > ul > li > ul.sub1 > li { float:none; width:100% } #container .aside .section_con > ul > li > ul.sub1 > li > h4 { margin-bottom:0 } #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a { display:block; padding:25px 0 25px 50px; font-size:15px; font-weight:400; background:url(../images/sitemap_plus.png) left 50% no-repeat; background-size:20px } #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a.on { background:url(../images/sitemap_minus.png) left 50% no-repeat; background-size:20px } #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a:hover { text-decoration:none } #container .aside .section_con > ul > li > ul > li > ul { display:none } #container .aside .section_con > ul > li > ul > li > ul > li { margin-bottom:0 !important } #container .aside .section_con > ul > li > ul > li > ul > li > a { display:block; padding:10px 0 10px 50px } #container .aside .section_con > ul > li > ul > li > ul > li > a:hover { text-decoration:underline } #container .aside .section_con > ul > li > ul.sub2 { display:none; float:none; width:100%; overflow:hidden } #container .aside .section_con > ul > li > ul.sub2 > li { float:none; width:100%; margin:0 } #container .aside .section_con > ul > li > ul.sub2 > li > h4 { margin-bottom:0 } #container .aside .section_con > ul > li > ul.sub2 > li > h4 > a { display:block; padding:25px 0 25px 50px; font-size:15px; font-weight:400; background:url(../images/sitemap_plus.png) left 50% no-repeat; background-size:20px } #container .aside .section_con > ul > li > ul.sub2 > li > h4 > a:hover { text-decoration:none } #container .aside .section_con > ul > li > ul.sub2 > li > ul > li { margin-bottom:0 } #container .aside .section_con > ul > li > ul.sub2 > li > ul > li > a { display:block; padding:10px 0 10px 50px } #container .aside .section_con > ul > li > ul.sub2 > li > ul > li > a:hover { text-decoration:underline } #container .aside .section_con > ul > li > ul.full { clear:both; float:none; width:100% } #sub_visual { margin:0 } #sub_visual .visual1, #sub_visual .visual3 { display:none } #sub_visual .visual2 { display:block } #container .no-padding .section_con { padding-left:0; padding-right:0 } #container .sub_section1 { padding-bottom:0 } #container .sub_section2 { margin-bottom:70px; padding-bottom:70px; border-bottom:0px solid #eee } #container .sub_section2 > .section_con > ul > li { float:none; width:100% !important } #container .sub_section2 > .section_con > ul > li.list1 { margin-bottom:50px } #container .sub_section2 > .section_con > ul > li .text_effect { float:none; width:100% } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt p { margin-bottom:0 } #container .sub_section2 > .section_con > ul.tpl_list { padding-top:30px } #container .sub_section2 > .section_con > ul.tpl_list li { width:48% !important; margin-bottom:50px } #container .sub_section2 .txt_box { float:none; width:100%; margin-top:75px } #container .sub_section2 .txt_box p.desc { margin-bottom:20px } #container .sub_section3 .wrap_type1 { margin-top:0; border:none } #container .sub_section3 .wrap_type1 .left { float:none; width:100% } #container .sub_section3 .wrap_type1 .center { float:none; width:100%; margin-bottom:50px } #container .sub_section3 .wrap_type1 .center p.desc { padding-left:0 !important } #container .sub_section3 .wrap_type1 .center ul.text_effect { padding-left:0 } #container .sub_section3 .wrap_type1 .right { float:none; width:100%; border:none } #container .sub_section3 ul.text_effect li .txt { font-size:30px } #container .sub_section3 ul.text_effect li .txt p { margin-bottom:0 } #container .sub_section3 .wrap_type1 .right h3 p { width:inherit !important; margin-left:0 !important } #container .sub_section3 .wrap_type1 .right h3 p.tit2 { display:none } #container .sub_section3 .wrap_type1 .right h3 p span.blind { display:inline-block !important } #container .sub_section3 .wrap_type1 .right h3 { margin-bottom:25px; padding:0 !important } #container .sub_section3 .wrap_type1 .right h3 p span { display:inline; float:none; width:inherit; padding-bottom:0 !important } #container .sub_section4 { padding-top:180px } #container .no-padding .section_con .left_header { float:none; width:inherit; max-width:inherit; padding:0 50px } #container .section_con .left_header { float:none; width:100%; max-width:inherit; margin-bottom:50px } #container .section_con .left_header p.icon { padding-top:0 } #container .section_con .left_header p.desc { font-size:24px; color:#555 } #container .section_con .left_header p.desc br { display:none } #container .section_con .left_header h2, #container .section_con .left_header p.icon:after { display:none } #container .section_con .right_con { float:none; width:100%; max-width:1024px } #container .section_con .photo_slide { padding:0 50px } #container .section_con .map_list li { width:100% !important; margin-bottom:50px; padding:0 50px; border-bottom:1px solid #eee; box-sizing:border-box } #container .section_con .map_list li .map_list_wrap { padding-bottom:50px; border-bottom:none } #container .section_con .map_list li .map_list_wrap h3 { font-size:34px } #container .section_con .map_list li .map_list_wrap p { font-size:24px } #container .section_con .map_list li .map_list_wrap a.pointer { bottom:40px; right:50px } #container .section_con .map_list li.map { margin-top:0; padding:0 !important } #container .section_con .map_list li.map .map_area { height:200px } #img_popup_wrap { display:none } } @media (max-width:640px) and (min-width:100px){ #container .section_con ul.column4 li { width:98% } #container .section .section_con { /*padding:0 30px !important*/padding:0 15px !important } #container .no-padding .section_con { width:inherit !important; padding-left:0 !important; padding-right:0 !important } #container .section .section_con img.img_mob { display:block } #container .section .section_con img.img_pc { display:none } #container .sub_section1 h2.main_tit { padding:0; font-size:24px } #container .sub_section1 h2.main_tit span { font-size:12px; } #container .sub_section2 > .section_con > .section_title { padding:60px 0; } #container .sub_section2 > .section_con > .section_title h2 { font-size:24px; margin-bottom:15px } #container .sub_section2 > .section_con > .section_title h2:before { width:40px; height:3px; margin-left:-20px } #container .sub_section2 > .section_con > .section_title p { font-size:12px } #sub_visual { margin:0 0 50px 0 } #sub_visual .visual1, #sub_visual .visual2 { display:none } #sub_visual .visual3 { display:block } /* #sub_visual .visual_tit { top:150px; margin-left:-90px } */ #sub_visual .visual_tit { /* top:150px; */ margin-left:-150px } #sub_visual .visual_tit ul li .txt { font-size:27px !important; line-height:1.4 !important } #sub_visual .visual_tit ul li .txt p { margin-bottom:5px !important } #container .sub_section1 h2.main_tit { margin-bottom:35px } #container .sub_section2 { margin-bottom:0px !important; padding-bottom:35px !important } #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt { font-size:24px !important } #container .sub_section2 .txt_box { margin-top:35px !important } #container .sub_section2 .txt_box p.desc { margin-bottom:15px !important } #container .section .section_con .con_box { padding:15px 25px } #container .section .section_con .con_box > div { float:none !important; width:100% !important } #container .section .section_con .con_box dl dt, #container .section .section_con .con_box dl dd { font-size:12px } #container .sub_section2 > .section_con > h3 { font-size:24px !important; margin-bottom:25px } #container .section_con ul.tpl_list { margin-bottom:0 } #container .sub_section2 > .section_con > ul.tpl_list li { width:100% !important; height:initial } #container .section_con ul.tpl_list li .allocation_inner p.img { position:static } #container .section_con ul.tpl_list li .allocation_inner p.txt { margin-bottom:30px } #container .sub_section2 > .section_con p.main_desc { margin-bottom:30px } #container .sub_section2 .section_con .process_box { padding:30px 0 } #container .section_con ul.prcs_list li { background:url(../images/process_arrow.png) right center no-repeat; background-size:16px } #container .section_con ul.prcs_list li:hover { background:url(../images/process_arrow_on.png) right center no-repeat; background-size:16px } #container .section_con ul.prcs_list li.last:hover { background:none } #container .section_con ul.prcs_list li p.txt { font-size:12px } #container .sub_section3 .wrap_type1 .center { margin-right:25px; padding-top:25px } #container .sub_section3 .wrap_type1 .right p.img { margin-bottom:25px } #container .sub_section3 ul.text_effect li .txt { font-size:24px } #container .sub_section3 .wrap_type1 .right h3 p span { font-size:24px; margin:0 !important } #container .sub_section3 .wrap_type1 .right h3 p { font-size:inherit } #container .sub_section4 { padding-top:40px } #container .no-padding .section_con .left_header { padding:0 30px } #container .section_con .left_header p.icon img { width:40px } #container .section_con .left_header p.desc { font-size:12px; line-height:1.6 } #container .section_con .right_con { margin-top:35px } #container .section_con .photo_slide { padding:0 } #container .section_con .photo_slide .slide_wrap .tit_box { padding:0 30px 15px 30px } #container .section_con .photo_slide .slide_wrap .tit_box h2, #container .section_con .photo_slide .slide_wrap .tit_box h3 { font-size:20px !important } #container .section_con .photo_slide .slide_wrap .tit_box h2 { padding-right:5px } #container .section_con .photo_slide .paging_m { font-size:18px; text-align:center; margin:40px 0 60px 0 } #container .section_con .photo_slide .paging_m a img { width:12px; vertical-align:-5px } #container .section_con .map_list li { margin-bottom:30px; padding:0 30px } #container .section_con .map_list li .map_list_wrap h3 { font-size:17px; margin-bottom:10px } #container .section_con .map_list li .map_list_wrap p { font-size:15px } #container .section_con .map_list li .map_list_wrap p.old { margin-bottom:10px } #container .section_con .map_list li .map_list_wrap p.tel, #container .section_con .map_list li .map_list_wrap p.fax { font-size:13px } #container .section_con .map_list li .map_list_wrap a.pointer { bottom:30px; right:30px } #container .section_con .map_list li .map_list_wrap { padding-bottom:25px } #container .sub_section5 > .section_con > h3 { font-size:24px !important; margin-bottom:25px } /* ----------------------------- 핸드폰 모양 실시간 상담 스타일 ----------------------------- */ #phone_wrap { display:none } } /*------------------------ 게시판 공통 스타일시트 ------------------------*/ #board_nav { display:none } /*------------------------ 공통 UI 스타일시트 ------------------------*/ /* 탭 */ .tab-primary { display:table; width:100%; border-collapse:collapse; table-layout:fixed } .tab-primary > li { display:table-cell; width:auto; height:50px; border:1px solid #d0d0d0; cursor:pointer } .tab-primary > li:hover { background:#f9f9f9 } .tab-primary > li a { display:block; width:100%; height:100%; font-size:18px; font-weight:600; color:#0c0c0c; line-height:50px; text-align:center } .tab-primary > li.selected { border-color:#0c0c0c; background:#0c0c0c } .tab-primary > li.selected a { color:#fff } .tab-submenu, .tab-category { margin-bottom:40px } .tab-category > li:first-child { display:none } /* 텍스트 에어리어 */ .area-primary { padding:20px; font-family:inherit; font-size:14px; color:#777; line-height:25px; border:1px solid #d8d8d8 } .area-agree { width:100%; height:200px } .area-content { width:100%; height:230px } .area-comment { width:100%; height:120px } /* 체크박스 */ .check-agree { margin-top:25px } .check-primary.check-inline { display:inline-block } /* .check-primary { position:relative } .check-primary input[type=checkbox] { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0) } .check-primary input[type=checkbox] + label { position:relative; display:inline-block; font-size:14px; font-weight:600; color:#777; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none } .check-primary input[type=checkbox] + label:before { display:inline-block; width:15px; height:15px; margin:-2px 8px 0 0; text-align:center; content:''; border:1px solid #d0d0d0; background:#fff; vertical-align:-3px } .check-primary input[type=checkbox]:checked + label:before { border-color:#0c0c0c } .check-primary input[type=checkbox]:checked + label:after { display:block; position:absolute; top:50%; left:5px; width:5px; height:5px; margin-top:-2px; content:''; background:#0c0c0c } */ /* 테이블 */ .tbl-basic { width:100%; border-top:3px solid #0c0c0c } .tbl-basic thead th { font-size:15px; font-weight:600; color:#333; text-align:center; padding:15px 0; border-bottom:1px solid #d8d8d8; background:#f7f7f7 } .tbl-basic tbody th { font-weight:600; color:#0c0c0c; text-align:left; padding:13px 0 13px 40px; background:#f7f7f7 } .tbl-basic tbody th, .tbl-basic tbody td { font-size:14px; line-height:1.6; border-bottom:1px solid #d8d8d8 } .tbl-basic tbody td { color:#777; padding:13px 25px } .tbl-basic tbody td a:hover { color:#0c0c0c; text-decoration:underline } .tbl-basic tbody td input.block { margin:4px 0 } .tbl-simple { width:100%; border-top:2px solid #333 } .tbl-simple th, .tbl-simple td { font-size:14px; padding:13px 15px; line-height:1.75 } .tbl-simple td:nth-child(2) p { font-size:13px; font-weight:600 } .tbl-simple td:nth-child(2) span { font-size:12px; color:#ababab } .tbl-simple th { color:#0c0c0c; text-align:center; padding-left:0; padding-right:0; border-bottom:1px solid #d0d0d0; background:#f7f7f7 } .tbl-simple td { color:#777; border-bottom:1px solid #d0d0d0 } .tbl-simple td .btn-link { display:inline-block; font-size:13px; font-weight:600; color:#333; padding:5px 8px; border:1px solid #e2e2e2; background:#fff } .tbl-simple td .btn-link:hover { border-color:#bbb } .tbl-simple td.td_on, .tbl-simple td.td_on a { color:#d40000 !important } .tbl-simple td.td_on, .tbl-simple td.td_on a em { color:#d40000 !important } .tbl-simple td strong { color:#d40000 } .tbl-board tbody tr:hover td { background:#f8f8f8 } tr.hide, td.hide { display:none } .tbl-transparent { width:100% } .tbl-transparent tbody th, .tbl-transparent tbody td { font-size:14px; color:#777; padding:5px 0; border:none; background:none } .tbl-transparent tbody th { font-weight:600; text-align:left } span.required { margin-left:5px; font-size:20px; color:#d80606; vertical-align:inherit } .td_center { text-align:center } /* 서식 진행 */ .btn_confirm { margin-top:30px; text-align:center } /* 입력 요소 */ .text-primary { height:35px; padding:0 10px; font-size:14px; font-weight:normal; color:#777; border:1px solid #d0d0d0; } .text-primary.half { width:50% } .text-primary.block { display:block; width:100% } .file-transparent { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0,0,0,0) } /* 셀렉트 박스 */ .combo-primary { display:inline-block; padding:0 10px; height:35px; font-size:15px; border:1px solid #d0d0d0; background:#fff; cursor:pointer; vertical-align:middle } /* 버튼 */ .btn { display:inline-block; padding:0 25px; height:35px; font-size:15px; font-weight:600; text-align:center; line-height:33px; border:1px solid #d0d0d0; background:transparent; cursor:pointer; vertical-align:middle } .btn.btn-grey { color:#2d2d2d; background:#f7f7f7 } .btn.btn-black { color:#fff; border-color:#2d2d2d; background:#2d2d2d } .btn.btn-black-o { color:#2d2d2d; border-color:#2d2d2d } .btn.btn-red { color:#fff; border-color:#9c0000; background:#9c0000 } .btn.btn-red-o { color:#d40000; border-color:#9c0000 } .btn.btn-white { color:#2d2d2d; border-color:#fff; background:#fff } .btn.btn-lg { font-size:17px; line-height:43px; height:45px; padding:0 35px } .btn.btn-xl { font-size:20px; line-height:48px; height:50px; padding:0 45px } /* 레이블 */ .lbl-chain { margin-right:20px } /* 참고사항 */ blockquote { margin:40px 0 0 0; padding:20px; border:1px solid #dedede; border-top:2px solid #0c0c0c; line-height:35px; text-align:center; display:none } blockquote h3 { display:inline-block; width:10%; font-size:15px; font-weight:600; color:#0c0c0c; margin-bottom:10px } blockquote h3:before { display:inline-block; width:16px; height:16px; font-size:13px; font-weight:600; color:#fff; text-align:center; line-height:16px; content:'!'; margin-right:8px; background:#0c0c0c } blockquote p { display:inline-block; font-size:14px; color:#666 } /* 페이지네이션 */ ol.pagination { margin-top:40px; font-size:0; text-align:center } ol.pagination > li { display:inline-block; font-size:14px; width:26px; height:26px; margin:0 2px; border:1px solid #d0d0d0; vertical-align:middle } ol.pagination > li:hover { background:#f6f6f6 } ol.pagination > li a { display:block; width:100%; height:100%; font-size:14px; font-weight:600; color:#777; line-height:24px } ol.pagination > li.current { border-color:#2d2d2d; background:#2d2d2d } ol.pagination > li.current a { color:#fff } .pg_wrap { margin-top:40px; font-size:0; text-align:center } .pg_wrap strong, .pg_wrap a { display:inline-block; font-size:14px; width:26px; height:26px; margin:0 2px; line-height:24px; border:1px solid #d0d0d0; vertical-align:middle } .pg_wrap a:hover { background:#f6f6f6 } .pg_wrap a { font-size:14px; font-weight:600; color:#777 } .pg_wrap .pg_current { color:#fff; border-color:#2d2d2d; background:#2d2d2d } .pg_wrap .pg_start, .pg_wrap .pg_end { font-size:0; text-indent:-9999em } .pg_wrap .pg_start:after { font-family:'FontAwesome'; font-size:14px; font-weight:normal; content:'\f100' } .pg_wrap .pg_end:after { font-family:'FontAwesome'; font-size:14px; font-weight:normal; content:'\f101' } @media screen and (max-width:991px){ .pt-mo-5 { padding-top: 3rem; } }