/********************************************* ****************** 공통사용 ******************* *********************************************/ html,body {width:100%; height: 100%; color: #454545; font-family:NanumGothic; font-size:16px; line-height:150%; } body {overflow-y:scroll;} a { color: #454545; } a:focus { color: #454545; } a:active, a:hover { color: #454545; } img { width:100%; } #wrapper{min-height: 100%; position: relative; width:100%;overflow-x:hidden;} .paragraph_title { font-size:32px; font-weight:500; color:#333333; clear:both; } .paragraph_explanation { clear:both; padding-top:20px; font-size:16px; } .division_title { background:url(../images/division_title_icon.png) no-repeat left top; padding-left:30px; text-align:left; font-size:16pt; } .division_text { padding-top:16px; text-align:left; font-size:16px; } .round_gray_bg { -webkit-border-radius: 8px; -moz-border-radius: 8px; background:#f9f9f9; } .bt { border-top:1px solid #d4d4d4 } .bl { border-left:1px solid #d4d4d4 } .br { border-right:1px solid #d4d4d4 } .bb { border-bottom:1px solid #d4d4d4 } .contents { margin-top:0px !important; } /*--------------------------------------------- 탑 메뉴 ---------------------------------------------*/ #top { width:100%; height:80px; background:#f9f9f9;position:absolute; z-index:3;} #top #top_container { max-width:1000px; min-width:751px; margin:0 auto; padding:0px 50px; } #top #top_container #logo { display:inline-block; float:left; padding-top: 24px; } #top #top_container #logo img { width:130px !important;} #top #top_container #top_nav_1000 { display:none; } #top #top_container #top_nav_800 { display:inline-block; float:right; width:519px; padding-top: 30px; } #top #top_container #top_nav_800 ul { clear:both; } #top #top_container #top_nav_800 ul li { display:inline-block; float:right; width:25%; text-align:left; padding-left:8%; } #top #top_container #top_nav_800 ul li:first-child { padding-right:0%; } #top #top_container #top_nav_800 ul li a { color:#666666; font-size:18px; font-family:NanumGothicBold; } #top #top_container #top_nav_720 { display:none; } #top #top_container #top_nav_360 { display:none; } #sub_1000_box { display : none; } #sub_1000_fixed_box { display : none; } #sub_800_box { width:100%; height:40px; background:#0C4DA2; position:absolute; z-index:2;margin-top: 80px; display:none; } #sub_800_box #sub_800_container { max-width:1000px; min-width:751px; margin:0 auto; padding-top:10px; } #sub_800_box #sub_800_container #sub_nav_800 { float:right;} #sub_800_box #sub_800_container #sub_nav_800 .sub_nav_step01 { clear:both; float:right; display:none; } #sub_800_box #sub_800_container #sub_nav_800 #sub_nav_800_01 { margin-right:46%; width:380px; } #sub_800_box #sub_800_container #sub_nav_800 #sub_nav_800_02 { margin-right:81%; width:250px; } #sub_800_box #sub_800_container #sub_nav_800 #sub_nav_800_03 { margin-right:-6%; width:500px; } #sub_800_box #sub_800_container #sub_nav_800 .sub_nav_step01 .sub_nav_step01_li { display:inline-block; float:left; text-align:left; padding-left:8%; } #sub_800_box #sub_800_container #sub_nav_800 .sub_nav_step01 .sub_nav_step01_li a { color:#ffffff; font-weight:500; } #sub_800_box #sub_800_container #sub_nav_800 .sub_nav_step01 .sub_nav_step01_li a.on { color:#ffff00; font-weight:bold; } #sub_800_fixed_box { width:100%; height:40px; background:#0C4DA2;margin-top: 80px; } #sub_800_fixed_box #sub_800_fixed_container { max-width:1000px; min-width:751px; margin:0 auto; padding-top:10px; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed { float:right;} #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed .sub_nav_fixed_step01 { clear:both; float:right; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed #sub_nav_fixed_800_01 { margin-right:46%; width:380px; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed #sub_nav_fixed_800_02 { margin-right:81%; width:250px; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed #sub_nav_fixed_800_03 { margin-right:-6%; width:500px; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed .sub_nav_fixed_step01 .sub_nav_fixed_step01_li { display:inline-block; float:left; text-align:left; padding-left:8%; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed .sub_nav_fixed_step01 .sub_nav_fixed_step01_li a { color:#ffffff; font-weight:500; } #sub_800_fixed_box #sub_800_fixed_container #sub_nav_800_fixed .sub_nav_fixed_step01 .sub_nav_fixed_step01_li a.on { color:#ffff00; font-weight:bold; } #sub_720_box { display : none; } #sub_360_box { display : none; } /*--------------------------------------------- 메인 사진 ---------------------------------------------*/ @media screen and (min-width:751px) and (max-width:1000px) { #top_bg { clear:both; margin-top:80px; } #top_bg #top_bg_img_400 { display:none; } #top_bg #top_bg_img_750 { display:none; } #top_bg #top_bg_img_800 { display:block; } #top_bg #top_bg_img_1000 { display:none; } } /*--------------------------------------------- YOTTA 소개 ---------------------------------------------*/ #yotta_intro { height:86px; background:#f9f9f9; } #yotta_intro #yotta_intro_container { max-width:1000px; min-width:751px; margin:0 auto; padding:0px 50px; } #yotta_intro #yotta_intro_container #intro_logo { width:20%; display:inline-block; float:left; padding-top: 28px; text-align:center; } #yotta_intro #yotta_intro_container #intro_logo img { width:116px !important;} #yotta_intro { height:86px; background:#f9f9f9; } #yotta_intro #yotta_intro_container #intro_text { width:80%; display:inline-block; float:right; padding-top: 18px; text-align:left; } /*--------------------------------------------- YOTTA 서비스 ---------------------------------------------*/ #yotta_service { clear:both; padding-top:40px; } #yotta_service #yotta_service_title { width:100%; height:40px; background:url(../images/yotta_service_title.png) no-repeat center; text-align:center; color:#ffffff; padding-top: 6px; } #yotta_service #yotta_service_icon { width:100%; padding:40px 0px; } #yotta_service #yotta_service_icon li { width:25%; float:left; text-align:center; padding:0% 5%; text-align:center; } #yotta_service #yotta_service_bottom { width:100%; height:1px; background:url(../images/yotta_service_bottom.png) no-repeat center; text-align:center; } /*--------------------------------------------- 인사말 ---------------------------------------------*/ #greeting { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #greeting #greeting_box { clear:both; padding-top:40px; } #greeting #greeting_box #greeting_partner { width:50%; float:left; text-align:center; padding:0% 3%; } #greeting #greeting_box #greeting_ceo { width:50%; float:left;text-align:center; padding:0% 3%; } /*--------------------------------------------- 시스템진단 ---------------------------------------------*/ #system_diagnosis { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #system_diagnosis #diagnosis_box { clear:both; padding-top:40px; } #system_diagnosis #diagnosis_box #diagnosis_schedule { width:50%; float:left; text-align:center; padding:0px 10px; } #system_diagnosis #diagnosis_box #diagnosis_improvement_task { width:50%; float:left; text-align:center; padding:0px 10px; } /*--------------------------------------------- 사업소개 ---------------------------------------------*/ #business_intro { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #business_intro #business_intro_img { padding-top:40px; text-align:center; } #business_intro #business_intro_img img { width:380px !important; } #business_intro #business_intro_box { clear:both; padding-top:40px; } #business_intro #business_intro_box .business_intro_list { float:left; width:50%; padding-bottom:36px; } #business_intro #business_intro_box .business_intro_list:nth-child(odd) { padding-right:5%; clear:both; } #business_intro #business_intro_box .business_intro_list:nth-child(even) { padding-left:5%; } /*--------------------------------------------- 주요 사업 – ILM ---------------------------------------------*/ #business_ilm { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #business_ilm #business_ilm_point { -webkit-border-radius: 8px; -moz-border-radius: 8px; background:#f9f9f9; padding:16px; text-align:center; width:80%; margin:0px auto; margin-top:40px; } #business_ilm #business_ilm_img { padding-top:40px; text-align:center; } #business_ilm #business_ilm_img img { width:80% !important; } #business_ilm #business_ilm_box { clear:both; padding-top:40px; } #business_ilm #business_ilm_box .business_ilm_contents { float:left; width:40%; margin:0% 5%; padding:20px; background:#f9f9f9; } #business_ilm #business_ilm_box .business_ilm_contents .business_ilm_text { padding-top:10px; padding-left:10px; font-size:14px; } /*--------------------------------------------- 주요 사업 – 개인정보 ---------------------------------------------*/ #business_personal { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #business_personal #legislation { padding-top:40px; } #business_personal #legislation #legislation_title { width:100%; background:url(../images/yotta_service_bottom.png) no-repeat center; text-align:center; } #business_personal #legislation #legislation_title span { display:inline-block; background:#ffffff; padding:8px 18px; font-weight:600; font-size:16pt; } #business_personal #legislation #legislation_strong_text { clear:both; text-align:center; color:#ff0000; padding:16px 0px; font-weight:600; font-size:18pt; } #business_personal #legislation #legislation_enforcement_contents { clear:both; padding-top:20px; } #business_personal #legislation #legislation_enforcement_contents .legislation_enforcement_text { width:21%; margin:0% 2%; float:left; -webkit-border-radius: 8px; -moz-border-radius: 8px; background:#f9f9f9; text-align:center; padding:10px; font-size:14px; } #business_personal #legislation #legislation_arrow_img { z-index:2; position:relative; margin:0 auto; padding-top:10px; text-align:center; } #business_personal #legislation #legislation_arrow_img img {width:164px !important;} #business_personal #legislation #legislation_result_contents { -webkit-border-radius: 16px; -moz-border-radius: 16px; background:#f9f9f9; margin-top:-30px; padding:46px 30px 30px 30px; } #business_personal #legislation #legislation_result_contents #legislation_result_title { font-size:18pt; } #business_personal #legislation #legislation_result_contents .legislation_result_step { padding-top:30px; } #business_personal #legislation #legislation_result_contents .legislation_result_step .legislation_result_text { font-size:16px; padding-left:24px; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents { width:50%; float:left; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents:nth-child(odd) { padding-right:30px; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents:nth-child(even) { padding-left:30px; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_orange { width:100%; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_orange th { background:#ffd1ae; border:none; padding:12px 0px; font-size:18px; font-weight:bold; color:#033333; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_orange td { background:#ffffff; border:none; padding:12px 12px; font-size:18px; font-weight:500; color:#ea8539; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_green { width:100%; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_green th { background:#d6edd6; border:none; padding:12px 0px; font-size:18px; font-weight:bold; color:#033333; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_green td { background:#ffffff; border:none; padding:12px 12px; font-size:18px; font-weight:500; color:#98ca98; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .legislation_table_title { padding-bottom:10px; text-align:center; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .general_table { width:100%; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .general_table th { background:#e8f3fd; padding:8px 0px; font-size:16px; font-weight:bold; } #business_personal #legislation #legislation_result_contents .legislation_result_step .half_contents .general_table td { background:#ffffff; padding:12px 12px; font-size:16px; font-weight:500; } /*--------------------------------------------- 주요 사업 – Outsourcing Service ---------------------------------------------*/ #business_outsourcing { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #business_outsourcing #business_outsourcing_img { padding:40px; text-align:center; } #business_outsourcing #business_outsourcing_img img { width:460px !important; } #business_outsourcing #business_outsourcing_box { -webkit-border-radius: 16px; -moz-border-radius: 16px; background:#f9f9f9; padding:30px 50px; width:90%; margin:0 auto; } #business_outsourcing #business_outsourcing_box #business_outsourcing_keypoint { width:100%; border-bottom:1px solid #cccccc; } #business_outsourcing #business_outsourcing_box #business_outsourcing_keypoint #business_outsourcing_keypoint_blue { padding-bottom:16px; color:#2c8fba; font-weight:600; font-size:18px; text-align:center; } #business_outsourcing #business_outsourcing_box #business_outsourcing_keypoint #business_outsourcing_keypoint_red { padding-bottom:16px; color:#e65336; font-weight:600; font-size:18px; text-align:center; } #business_outsourcing #business_outsourcing_box #business_outsourcing_keypoint #business_outsourcing_keypoint_orange { padding-bottom:16px; color:#f3b546; font-weight:600; font-size:18px; text-align:center; } #business_outsourcing #business_outsourcing_box #business_outsourcing_contents { padding-top:20px; } #business_outsourcing #business_outsourcing_box #business_outsourcing_contents .business_outsourcing_contents_list { float:left; width:50%; font-size:16px; padding-bottom:24px; padding-left:20px; } #business_outsourcing #business_outsourcing_box #business_outsourcing_contents .business_outsourcing_contents_list:nth-child(odd) { clear:both; padding-right:5%; } #business_outsourcing #business_outsourcing_box #business_outsourcing_contents .business_outsourcing_contents_list:nth-child(even) { padding-left:5%; } #business_outsourcing #business_outsourcing_box #business_outsourcing_contents .business_outsourcing_contents_list .business_outsourcing_text { padding-top:5px; } /*--------------------------------------------- 주요 사업 – 자체 솔루션 ---------------------------------------------*/ #business_solution { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #business_solution .yellow_box { display:inline-block; background:#ffff00; color:#ff0000; font-size:14px; font-style: italic; padding:4px 8px; font-weight:bold; } #business_solution #business_solution_box {padding-top:40px;} #business_solution #business_solution_box #business_solution_constitution { float:left; width:50%; padding:0px 20px; } #business_solution #business_solution_box #business_solution_contents { float:left; width:50%; padding:0px 20px; } #business_solution #business_solution_box #business_solution_contents #business_solution_contents_title { border-bottom:1px solid #999999; padding-bottom:3px; } #business_solution #business_solution_box #business_solution_contents .business_solution_contents_text {-webkit-border-radius: 8px; -moz-border-radius: 8px; margin-top:10px; padding:10px 10px 10px 74px; } #business_solution #business_solution_box #business_solution_contents #business_solution_contents_blue { background:#e8f3fd url(../images/business_solution_keypoint_blue.png) no-repeat left center; } #business_solution #business_solution_box #business_solution_contents #business_outsourcing_contents_red { background:#ffdada url(../images/business_solution_keypoint_red.png) no-repeat left center; } #business_solution #business_solution_box #business_solution_contents #business_solution_contents_orange { background:#fdf8e8 url(../images/business_solution_keypoint_orange.png) no-repeat left center; } #business_solution #business_solution_strong { -webkit-border-radius: 8px; -moz-border-radius: 8px; background:#e65336; color:#ffffff; padding:8px 14px; font-weight:bold; margin-top:10px; text-align:center; font-size:18px; } /*--------------------------------------------- 주요 사업 – 구축 실적 ---------------------------------------------*/ #business_history { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #business_history #business_history_box {padding-top:40px;} @media screen and (min-width:751px) and (max-width:850px) { #business_history #business_history_box #business_history01 { display:none; } #business_history #business_history_box #business_history02 { display:table; } } @media screen and (min-width:851px) { #business_history #business_history_box #business_history01 { display:table; } #business_history #business_history_box #business_history02 { display:none; } } #business_history #business_history_box .general_table { width:100%; } #business_history #business_history_box .general_table th { background:#e8f3fd; padding:8px 0px; font-size:16px; font-weight:bold; text-align:center; vertical-align:middle; border:1px solid #cccccc; } #business_history #business_history_box .general_table td { background:#ffffff; padding:12px 12px; font-size:16px; font-weight:500; text-align:left; vertical-align:top; border:1px solid #cccccc; } /*--------------------------------------------- 회사 위치 ---------------------------------------------*/ #company_location { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #company_location #company_location_box { -webkit-border-radius: 16px; -moz-border-radius: 16px; background:#f9f9f9; padding:30px; margin-top:20px; } #company_location #company_location_box p { padding-bottom:20px; } #company_location #company_location_box p .division_title { display : inline-block; } #company_location #company_location_box p .division_title:nth-child(2) { margin-left:30px; } /*--------------------------------------------- Staff 소개 ---------------------------------------------*/ #staff_member { max-width:1000px; min-width:751px; margin:0 auto; padding:60px 50px 0px 50px; } #staff_member #staff_member_box { padding-top:30px; } #staff_member #staff_member_box .staff_member_list { width:25%; padding:0% 2%; float:left; padding-bottom:30px; } #staff_member #staff_member_box .staff_member_list:nth-child(5) { clear:both; } #staff_member #staff_member_box .staff_member_list .staff_img { text-align:center; } #staff_member #staff_member_box .staff_member_list .staff_img img { width:130px !important; } #staff_member #staff_member_box .staff_member_list .staff_name { text-align:center; font-weight:bold; } #staff_member #staff_member_box .staff_member_list .staff_text { text-align:left; width:160px; margin:0 auto; font-size:14px; } /*--------------------------------------------- footer ---------------------------------------------*/ #footer { background:#f9f9f9; width:100%; clear:both; margin-top:60px;} #footer #footer_container { max-width:1000px; min-width:751px; margin:0 auto; padding:20px 50px; text-align:center; font-size:16px; } #footer #footer_container img { width:207px !important; vertical-align:middle; display:block; margin: 0 auto; padding:3px 0px 7px 0px; }