@charset "utf-8";

/* ¼­ºêÆäÀÌÁö À̹ÌÁö (°øÅë) */
#container > .inner img.img_tab, #container > .inner img.img_mob {display:none}

/* ¸¶½ºÅ© ·¹À̾î */
#mask {position:absolute; top:0; left:0; width:100%; height:100%; background:#000;    opacity:.8; filter:alpha(opacity='80')}
/* ¼­ºêÆäÀÌÁö °øÅë */
#container > .inner .title_area {padding:60px 0 40px 0; overflow:hidden}
#container > .inner .title_area .title h2 {font-size:36px; font-weight:600; line-height:1.1; color:#333; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #eee}
#container > .inner .title_area .title p {color:#999}
#container > .inner .location {margin-bottom:15px}
#container > .inner .location ul li {display:inline-block; font-size:12px; color:#888}
#container > .inner .location ul li.divider {margin:0 5px}
#container > .inner .location ul li.current {color:#333; font-weight:600}
#container > .inner .location ul li img {vertical-align:-2px}
#container > .inner ul.top_tab {clear:both; margin:15px 0 40px 0; border-left:1px solid #ddd; overflow:hidden}
#container > .inner ul.top_tab li {float:left; width:20%}
#container > .inner ul.top_tab li a {display:block; width:100%; height:40px; text-align:center; line-height:40px; border:1px solid #ddd; border-left:none; background:#f9f9f9}
#container > .inner ul.top_tab li:first a {border-left:1px solid #ddd}
#container > .inner ul.top_tab li.on a, #container > .inner ul.top_tab li a:hover {color:#fff; border-color:#333; background:#333}
/* ȸ»ç¼Ò°³ */
#container > .inner .greeting > ul {clear:both}
#container > .inner .greeting > ul > li {position:relative; float:left}
#container > .inner .greeting > ul > li.list1 {width:45%}
#container > .inner .greeting > ul > li.list2 {width:50%}
#container > .inner .greeting > ul > li.right {float:right}
#container > .inner .greeting > ul > li img {display:block; width:100%}
#container > .inner .greeting > ul > li .text_effect {float:left; width:50%}
#container > .inner .greeting > ul > li .full {width:100% !important; margin-bottom:40px}
#container > .inner .greeting > ul > li .text_effect > li > .txt {display:inline-block; font-size:26px; color:#f4bd00}
#container > .inner .greeting > ul > li .text_effect > li > .txt p {position:relative; margin-bottom:10px; height:1px; background:#ffde6f}
#container > .inner .greeting > ul > li .text_effect > li > .txt p span {position:absolute; display:inline-block; width:100%; height:1px}
#container > .inner .greeting > ul > li .text_effect > li > .txt p span.color1 {background:#f4bd00}
#container > .inner .greeting > ul > li .text_effect > li > .txt p span.color2 {background:#ffde6f}
#container > .inner .greeting .txt_box {float:right; width:47%}
#container > .inner .greeting .txt_box p.desc {line-height:1.7; letter-spacing:-0.5px; text-align:justify; margin-bottom:30px}
#container > .inner .greeting .txt_box.full {float:none; width:100% !important}

/* ¿¬Çõ */
#container > .inner .history {text-align:justify}
#container > .inner .history:after {display:inline-block; width:100%; height:0; content:''}
#container > .inner .history > .history_box {display:inline-block; width:48%; margin-bottom:35px; overflow:hidden}
#container > .inner .history > .history_box h3 {font-size:24px; font-weight:600; color:#f4bd00; padding-bottom:15px; border-bottom:1px solid #dedede; margin-bottom:20px}
#container > .inner .history > .history_box dl {margin:0; padding:0; overflow:hidden}
#container > .inner .history > .history_box dl dt {float:left; color:#999; width:70px; line-height:1.6; padding:5px 0}
#container > .inner .history > .history_box dl dd {color:#555; margin-left:80px; padding:5px 0; line-height:1.6}
#container > .inner .history > .history_box dl span.white {color:#fff !important}
#container > .inner .history > .con_box {clear:both; padding:30px 50px 10px 50px; border:3px solid #ccc; overflow:hidden}
#container > .inner .history > .con_box .left {float:left; width:50%}
#container > .inner .history > .con_box .right {float:right; width:50%}
#container > .inner .history > .con_box dl {position:relative; margin-bottom:15px; overflow:hidden}
#container > .inner .history > .con_box dl dt {clear:left; float:left; width:100px; color:#666}
#container > .inner .history > .con_box dl dd {margin-left:100px; padding-right:20px; color:#888}
/* ·¹À̾î Æ˾÷ */
#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%}
/* ã¾Æ¿À½Ã´Â ±æ */
#container > .inner .company .photo_slide {}
#container > .inner .company .photo_slide .slide_wrap {position:relative; margin-bottom:30px}
#container > .inner .company .photo_slide .slide_wrap .tit_box {position:absolute; width:140px; padding:20px; top:0; right:0; color:#fff; background:#f4bd00; z-index:50}
#container > .inner .company .photo_slide .slide_wrap .tit_box h2 {font-size:18px; line-height:1.2; margin-bottom:10px}
#container > .inner .company .photo_slide .slide_wrap .photo_list {overflow:hidden}
#container > .inner .company .photo_slide .slide_wrap .photo_list li {position:relative; float:left; cursor:pointer}
#container > .inner .company .photo_slide .slide_wrap .photo_list li.p_1 {width:52.6%}
#container > .inner .company .photo_slide .slide_wrap .photo_list li.p_2 {width:47.4%}
#container > .inner .company .photo_slide .slide_wrap .photo_list li.p_3, #container > .inner .company .photo_slide .slide_wrap .photo_list li.p_4 {width:23.7%}
#container > .inner .company .photo_slide .slide_wrap .photo_list li > img {display:block; width:100%}
#container > .inner .company .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 > .inner .company .photo_slide .slide_wrap .photo_list li a .mask {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:20}
#container > .inner .company .photo_slide .slide_wrap .photo_list li a img {display:inline-block; position:relative; text-align:center; z-index:30}
#container > .inner .company .photo_slide .photo_swipe {display:none; position:relative; overflow:hidden}
#container > .inner .company .photo_slide .photo_swipe ul {position:relative; width:1000%}
#container > .inner .company .photo_slide .photo_swipe ul li {position:relative; float:left}
#container > .inner .company .photo_slide .photo_swipe ul li img {display:block; width:100%}
#container > .inner .company .photo_slide .photo_swipe ul li p {position:absolute; display:inline-block; bottom:0; left:0; padding:15px 25px; color:#333; background:#fff}
#container > .inner .company .photo_slide .paging {clear:both; margin:30px 0 100px 0; font-size:28px; color:#bbb; text-align:right}
#container > .inner .company .photo_slide .paging a {display:inline-block}
#container > .inner .company .photo_slide .paging a img {vertical-align:-3px}
#container > .inner .company .photo_slide .paging span.current {color:#f4bd00}
#container > .inner .company .photo_slide .paging_m {clear:both; display:none; margin:30px 0 100px 0; font-size:28px; color:#bbb; text-align:center}
#container > .inner .company .photo_slide .paging_m a {display:inline-block}
#container > .inner .company .photo_slide .paging_m a img {vertical-align:-3px}
#container > .inner .company .photo_slide .paging_m span.current {color:#f4bd00}
#container > .inner .company .map_list .map_list_wrap {padding-bottom:15px; border-bottom:1px solid #eee; cursor:pointer}
#container > .inner .company .map_list li.map {display:none; width:100%; margin-top:30px}
#container > .inner .company .map_list li.map .map_area {position:relative; width:100%; height:500px; overflow:hidden}
#container > .inner .company .map_list li.map .map_area #map {height:100%}
#container > .inner .company .map_list li .map_list_wrap h3 {font-size:18px; font-weight:400; color:#444; margin-bottom:20px}
#container > .inner .company .map_list li .map_list_wrap p {color:#777}
#container > .inner .company .map_list li .map_list_wrap p.new {margin-bottom:5px}
#container > .inner .company .map_list li .map_list_wrap p.old {margin-bottom:50px}
#container > .inner .company .map_list li .map_list_wrap p.tel {margin-bottom:15px; padding-left:45px; background:url(../img/map_phone.png) left center no-repeat}
#container > .inner .company .map_list li .map_list_wrap p.fax {padding-left:45px; background:url(../img/map_printer.png) left center no-repeat}
#container > .inner .company .map_list li:hover p.tel, #container > .inner .company .map_list li.on p.tel {background:url(../img/map_phone_c.png) left center no-repeat}
#container > .inner .company .map_list li:hover p.fax, #container > .inner .company .map_list li.on p.fax {background:url(../img/map_printer_c.png) left center no-repeat}
#container > .inner .company .map_list li:hover h3, #container > .inner .company .map_list li .map_list_wrap:hover p, #container > .inner .company .map_list li.on h3, #container > .inner .company .map_list li.on p, #container > .inner .company .map_list li:hover a, #container > .inner .company .map_list li.on a {color:#f4bd00 !important}
#container > .inner .company .map_list li .map_list_wrap a.pointer {display:block; position:absolute; right:0; bottom:15px}
/* »ç¾÷¼Ò°³ */
#container > .inner .business ul.tpl_list {margin-bottom:100px}
#container > .inner .business ul.tpl_list li {position:relative; height:300px; vertical-align:top}
#container > .inner .business ul.tpl_list li .allocation_inner h3 {font-size:16px; margin-bottom:20px}
#container > .inner .business ul.tpl_list li .allocation_inner p.txt {color:#777; line-height:1.6}
#container > .inner .business ul.tpl_list li .allocation_inner p.img {position:absolute; bottom:0; left:0}
#container > .inner .business ul.tpl_list li .allocation_inner p.img img {display:block; width:100%}
#container > .inner .business p.main_desc {color:#777; line-height:2; text-align:justify; margin-bottom:80px}
#container > .inner .business .process_box {padding:30px; border:3px solid #ccc}
#container > .inner .business .process_box ul.prcs_list li {text-align:center; background:url(../img/process_arrow.png) right 10px center no-repeat}
#container > .inner .business .process_box ul.prcs_list li.last {background:none}
#container > .inner .business .process_box ul.prcs_list li p.img {height:70px; margin-bottom:10px}
#container > .inner .business .process_box ul.prcs_list li p.txt {font-weight:600; font-size:12px; line-height:1.5}
#container > .inner .business .wrap_type1 {margin-top:100px; border:1px solid #dedede; overflow:hidden}
#container > .inner .business .wrap_type1 .left {float:left; width:45%}
#container > .inner .business .wrap_type1 img {display:block; width:100%}
#container > .inner .business .wrap_type1 .center {float:left; width:30%; padding-top:50px}
#container > .inner .business .wrap_type1 .center ul.text_effect {padding-left:15%}
#container > .inner .business .wrap_type1 .center ul.text_effect li {float:none !important}
#container > .inner .business .wrap_type1 .center ul.text_effect li .txt {display:inline-block; font-size:28px; color:#f4bd00; line-height:1.4}
#container > .inner .business .wrap_type1 .center ul.text_effect li .txt p {position:relative; margin-bottom:10px; height:1px; background:#ffde6f}
#container > .inner .business .wrap_type1 .center ul.text_effect li .txt p span {position:absolute; display:inline-block; height:1px}
#container > .inner .business .wrap_type1 .center ul.text_effect li .txt p span.color1 {background:#f4bd00}
#container > .inner .business .wrap_type1 .center ul.text_effect li .txt p span.color2 {background:#ffde6f}
#container > .inner .business .wrap_type1 .center p.desc {color:#777; line-height:1.6; text-align:justify; margin-top:30px; padding-left:15%}
#container > .inner .business .wrap_type1 .right {float:right; width:22%; border-left:1px solid #dedede}
#container > .inner .business .wrap_type1 .right p.img {margin-bottom:70px}
#container > .inner .business .wrap_type1 .right p.img img {width:100%}
#container > .inner .business .wrap_type1 .right h3 {line-height:1; margin-bottom:34px; padding:0 30px}
#container > .inner .business .wrap_type1 .right h3 p {font-size:26px; color:#000; line-height:inherit; transition:all 0.5s ease}
#container > .inner .business .wrap_type1 .right h3 p:after {clear:both; display:block; content:''}
#container > .inner .business .wrap_type1 .right h3 p.tit2 {width:105%; margin-left:-5px}
#container > .inner .business .wrap_type1 .right h3 p.tit3 {width:110%; margin-left:-5px}
#container > .inner .business .wrap_type1 .right h3 p span {display:block; float:left; width:16%; text-align:center}
#container > .inner .business .wrap_type1 .right h3 p span.blind {display:none}
.business img{max-width:100%;height:auto}

/* ¿ìÃø ¹è³Ê */
#aside .latest_box {background:#fff !important; box-shadow:1px 1px 2px 0 rgba(0,0,0,0.12)}

/* ¹Ìµð¾î Äõ¸® */
@media screen and (max-width:1740px) {
 #aside {display:none}
}
@media screen and (max-width:1366px) {
 #container > .inner .greeting > ul > li .text_effect {width:45%}
 #container > .inner .greeting > ul > li .text_effect > li > .txt {font-size:18px; font-weight:600}
 #container > .inner .greeting .txt_box {width:52%}
}
@media screen and (max-width:1280px) {
 #container > .inner .greeting > ul > li {clear:both; float:none; width:100% !important}
 #container > .inner .greeting > ul > li.list1 {margin-bottom:45px}
 #container > .inner .greeting > ul > li .text_effect {float:none; width:100%}
 #container > .inner .greeting > ul > li .text_effect > li > .txt {font-size:36px; font-weight:400}
 #container > .inner .greeting .txt_box {float:none; width:100%; margin-top:45px; font-size:13px}
 #container > .inner .greeting .txt_box p.desc {margin-bottom:15px}
 #container > .inner .business .wrap_type1 {margin-top:0; border:none}
 #container > .inner .business .wrap_type1 .left {float:none; width:100%}
 #container > .inner .business .wrap_type1 .center {float:none; width:100%; margin-bottom:50px}
 #container > .inner .business .wrap_type1 .center ul.text_effect {padding-left:0}
 #container > .inner .business .wrap_type1 .center ul.text_effect li .txt {font-size:30px}
 #container > .inner .business .wrap_type1 .center ul.text_effect li .txt p {margin-bottom:0}
 #container > .inner .business .wrap_type1 .center p.desc {padding-left:0 !important}
 #container > .inner .business .wrap_type1 .right {float:none; width:100%; border:none}
 #container > .inner .business .wrap_type1 .right h3 {margin-bottom:25px; padding:0 !important}
 #container > .inner .business .wrap_type1 .right h3 p {font-size:44px; width:inherit !important; margin-left:0 !important}
 #container > .inner .business .wrap_type1 .right h3 p.tit2 {display:none}
 #container > .inner .business .wrap_type1 .right h3 p span {display:inline; float:none; width:inherit; padding-bottom:0 !important}
 #container > .inner .business .wrap_type1 .right h3 p span.blind {display:inline !important}
}
@media screen and (max-width:1024px) {
 #container > .inner .location {display:none}
 #container > .inner .company .map_list li {width:100% !important; margin-bottom:50px; border-bottom:1px solid #eee}
 #container > .inner .company .map_list li.map {margin-top:0; padding:0 !important}
 #container > .inner .company .map_list li.map .map_area {height:200px}
 #container > .inner .company .map_list li .map_list_wrap h3 {font-size:34px}
 #container > .inner .company .map_list li .map_list_wrap p {font-size:24px}
 #container > .inner .business ul.tpl_list {padding-top:30px}
 #container > .inner .business ul.tpl_list li {width:48% !important; height:380px; margin-bottom:50px}
}
@media screen and (max-width:768px) {
 #container > .inner .company .photo_slide .slide_wrap .tit_box {display:none}
 #container > .inner .company .photo_slide .slide_wrap .photo_list {display:none}
 #container > .inner .company .photo_slide .paging {display:none}
 #container > .inner .company .photo_slide .photo_swipe {display:block !important}
 #container > .inner .company .photo_slide .paging_m {display:block !important}
}
@media screen and (max-width:640px) {
 #container > .inner .title_area .title h2 {font-size:22px}
 #container > .inner .title_area .title p {font-size:12px}
 #container > .inner ul.top_tab {border-left:none}
 #container > .inner ul.top_tab li {width:48%; margin:0 1% 2% 1%; border-left:1px solid #ddd}
 #container > .inner ul.top_tab li a {font-size:12px}

 #container > .inner .section {padding-bottom:35px !important}
 #container > .inner .section h2.sub_tit {font-size:20px; margin-bottom:15px}
 #container > .inner .section h2.sub_tit:after {width:30px}
 #container > .inner .greeting > ul > li .text_effect > li > .txt {font-size:24px !important}
 #container > .inner .greeting .txt_box {margin-top:35px !important}
 #container > .inner .greeting .txt_box p.desc {font-size:13px}
 #container > .inner .history > .history_box {display:block; width:100% !important}
 #container > .inner .history > .history_box h3 {font-size:20px !important}
 #container > .inner .history > .con_box {padding:15px 25px}
 #container > .inner .history > .con_box .left, #container > .inner .history > .con_box .right {float:none; width:100% !important}
 #container > .inner .history > .con_box dl dt, #container > .inner .history > .con_box dl dd {font-size:12px}
 #container > .inner .company .map_list li .map_list_wrap {padding-bottom:25px}
 #container > .inner .company .map_list li .map_list_wrap h3 {font-size:17px !important; margin-bottom:10px}
 #container > .inner .company .map_list li .map_list_wrap p {font-size:15px !important}
 #container > .inner .company .map_list li .map_list_wrap p.old {margin-bottom:10px}
 #container > .inner .company .map_list li .map_list_wrap p.tel, #container > .inner .company .map_list li .map_list_wrap p.fax {font-size:13px !important}
 #container > .inner .company .map_list li .map_list_wrap a.pointer {bottom:20px; right:0}
 #container > .inner .business ul.tpl_list {margin-bottom:30px}
 #container > .inner .business ul.tpl_list li {width:100% !important; height:initial}
 #container > .inner .business ul.tpl_list li p.img {position:static !important; margin-top:30px}
 #container > .inner .business .process_box {padding:30px 0}
 #container > .inner .business .process_box ul.prcs_list li {background:url(../img/process_arrow.png) right center no-repeat; background-size:16px}
 #container > .inner .business .wrap_type1 .center ul.text_effect li .txt {font-size:24px}
 #container > .inner .business .wrap_type1 .right p.img {margin-bottom:25px}
 #container > .inner .business .wrap_type1 .right h3 p {font-size:inherit}
 #container > .inner .business .wrap_type1 .right h3 p span {font-size:24px}

#container > .inner img.img_mob {display:block !important}
#container > .inner img.img_pc, #container > .inner img.img_tab {display:none !important}
}