/* =================================================================== */
/* Import Section
====================================================================== */
body {margin: 0;}
  
 @import url("font-awesome.css");
 @import url("magnified.css");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
 @import url(http://fonts.googleapis.com/css?family=Lato:400,300,700);
 @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     font-weight: bold;
 }
 body, h1, h2, h3, h4, h5, h6, .button, input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="email"], textarea, select {
     font-family: "Noto Sans",sans-serif;
     font-size:16px;
     line-height:20px;
     color:#333;
 }
 h1 {
     font-size: 28px;
     line-height: 50px;
 }
 
 h2 {
     font-size: 22px;
     line-height: 30px;
 }
 h3 {
     font-size: 16px;
     line-height: 30px;
 }
 h4 {
     font-size: 15px;
     line-height: 30px;
 }
 h5 {
     font-size: 12px;
     line-height: 24px;
 }
 h6 {
     font-size: 10px;
     line-height: 20px;
 }
 
 a {text-decoration: none ;}
 a:hover{
     text-decoration: none;
   -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
       -ms-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
   color:#555;
 }
 a:focus{
     outline: none;
     text-decoration: none;
 }
 .not-ie a {
   -webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
      -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
     -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
      -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
       transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
 }
 
 .content{
     padding:30px 0 60px;
     position: relative;
 }

 
 .f12 {font-size: 12px;}
 .f14 {font-size: 14px;}
 .f18{font-size: 18px;}
 .f20 {font-size: 20px;}
 .f24 {font-size: 24px;}
 .font-w400{font-weight: 400 !important;}


.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.textj{ text-align:justify !important;}
.textl{ text-align:left !important;}
.textr{ text-align:right !important;}
.textc{ text-align:center !important;}
.btnarea300{width:300px !important;}
.btnarea200{width:200px !important;}
.btnsize100{width:100px !important;}
.btnsize150{width:150px !important;}
.btnsize200{width:200px !important;}

.pl10{padding-left:10px !important;}
.pl20{padding-left:20px !important;}
.pl30{padding-left:30px !important;}
.pl40{padding-left:40px !important;}
.pl50{padding-left:50px !important;}
.pl60{padding-left:60px !important;}
.pl70{padding-left:70px !important;}
.pl80{padding-left:80px !important;}
.pl90{padding-left:90px !important;}
.pl100{padding-left:100px !important;}
.pl120{padding-left:120px !important;}
.pl140{padding-left:140px !important;}
.pl160{padding-left:160px !important;}
.pl180{padding-left:180px !important;}
.pl200{padding-left:200px !important;}
.pr10{padding-right:10px !important;}
.pr20{padding-right:20px !important;}

.w98h80{width:98% !important;height:80px !important;}
.w100h80{width:100% !important;height:80px !important;}
.w100{width:100% !important;}
.w45{width:46.25% !important;}
.w450 {width: 450px !important;}
.ifloat-l{float:left !important;}
.bluetxt{color:#0090ff !important;}
.textl{text-align:left !important;}
.tar{text-align:right !important;}
.tac{text-align:center !important;}
.tal{text-align:justify !important;}

.f_emerald {color: #56c7df !important;}
.f_emerald02 {color: #3fa4ba !important;}
.f_darkgray {color: #4d4d4d !important;}


.clearb{clear:both !important;}
.m0auto{margin:0 auto !important;}
.flex {display: flex;}
.flex-space-between {display: flex; justify-content: space-between;}

.block {display: block;}

a:hover, button:hover {color: #3fa4ba !important; transition: 0.3s ease-in-out;}
.pointer {cursor: pointer;}


.wrap{width:1920px;}
.sub_head_title{font-size: 40px; font-weight: 600; color: #fff; text-shadow: 0 0 10px rgb(0 0 0 / 60%);}
.site_route{width: 1000px; display: flex; justify-content: flex-end; align-items: center; margin: auto; padding-top: 1.5em;}
.site_route>span:nth-child(1)>a{display: inline-block; width: 15px; height: 15px; background-image: url(../../images/sub/home.png); background-repeat: no-repeat; background-position: center;}
.content_wrap_min{width: 1000px; margin: auto; padding: 4em 0;}
.content_wrap_min .sub_cont_title{font-size: 24px; font-weight: 800; color: #27489d; margin-bottom: 5em; display: block; text-align: center; position: relative;}
.content_wrap_min .sub_cont_title::after{content: ""; display: block; width: 8%; border: 2px solid #27489d; position: absolute; transform: translate(0,0); bottom: -45px; left: 46%;}
table{width: 100%; border-top: 1px solid #cbcbcbcb; border-bottom: 1px solid #cbcbcb; line-height: 1.5em;}
.useful_link_wrap .useful_link_li{display: block; margin: 5em 0;}
.useful_sub_title{font-size: 20px; font-weight: 600; color: #fff; border: 3px solid #27489d; width: 500px; border-radius: 24px; background-color: #27489d; display: flex; justify-content: center; margin: 0 auto 1.5em auto; }
.sub_title{font-size: 22px; font-weight: 800; color: #27489d; display: block;} 
.useful_text_wrap .table_title{display: block; font-weight: 600; color: #0f0f0f; padding-top: 1.5em;}
.useful_text_wrap .useful_sub_title, .useful_text_wrap .table_title{line-height: 1.5em;}
table {margin: 0.5em 0 0.8em 0; border-top: 1px solid #cbcbcb !important; border-bottom: 1px solid #cbcbcb !important;}
table tr th{font-weight: 600; vertical-align: middle; text-align: center; border-top: 1px solid #cbcbcb; border-right: 1px solid #cbcbcb; background-color: #cbcbcb;}
table tr strong{font-weight: 600;}
table tr:first-child td strong{font-size: 18px; font-weight: 600;}
table tr td{border-top: 1px solid #cbcbcb; padding: 0.5em 1em; line-height: 1.5em; vertical-align: middle;}
table tr:last-child td{border-bottom: 1px solid #cbcbcb;}
table tr td img{vertical-align: middle;}
th, td {padding: 15px 20px !important;}
p,span{word-break: keep-all; line-height: 1.5em; margin: 0;}
b{font-weight: bold !important;}
small{font-size: 14px;}
h2 {font-size: 40px; font-weight: bold; text-transform: uppercase; text-align: center; margin-bottom: 50px;}
textarea {resize: none;}


 
 /* =================================================================== */
 /* 2. HEADER
 ====================================================================== */
 
 #background{
     width: 100%;
     height: 100%;
 }
 #header {
     background: #fff none repeat scroll 0 0;
     transition: all 0.4s ease-in-out 0s;
     width: 100%;
     z-index: 999;
 }

 .content-header{width: 100%; z-index: 100; position: sticky; margin: 0 auto;}
 .content-header>.header_in{width: 100%;}
 .header_top{width: 1920px; height: 40px; background: #F5F7FA; display: flex; justify-content: center;}
 .header_top ul {display: flex; width: 1140px; height: inherit; justify-content: flex-end; align-items: center;}
 .header_top li, .header_top a{color: #999999;}

 .navi .logo{display: inline-block; height: 100px;}
 .navi .logo a{display: flex; height: inherit; align-items: center;}
 .navi .logo a img{}

 /* Navi */

 .gnb{width: 100%; height: 100px; background: #fff; display: flex; justify-content: center;}
 .navi{width: 1140px; height: inherit; display: flex; align-items: center; justify-content: space-around;}
 .navi_in{width: 74%; height: inherit; display: flex; justify-content: center; margin: 0; padding: 0;}
 .navi_in li{display: flex; align-items: center; text-align: center; width: 20%; line-height: 1.2em;}
 .navi_in li .main_menu{padding: 2.5em 0em; color: #000; font-weight: bold; text-align: center; position: relative; width: 100%; text-transform: uppercase;}
 .navi_in li .main_menu::after{content: ""; display: block; width: 0%; height: 3px; background-color: #fff; position: absolute; left: 0; bottom: 15px;}
 .navi_right {display: flex; align-items: center;}
 .navi_right a {display: inline-block;}
 .navi_right a img {}
 .navi a img:hover {opacity: 60%; transition: 0.3s ease-in-out;}

 
 /* =================================================================== */
 /* 3. SECTION
 ====================================================================== */
 
 .content {width: 1920px; overflow: hidden; padding: 80px 0; display: flex; flex-direction: column; align-items: center;}
 .btn, #contact input.btn {width: 110px !important; height: 40px !important; background: #3fa4ba; color: #fff; font-size: 15px; margin-top: 20px; border-radius: 5px; border: unset;}
 .btn:hover {background: #4bbed7 !important; color: #fff !important; transition: 0.3s ease-in-out;}
 a.btn {display: flex; justify-content: center; align-items: center;}

 /* Main Slide */
 .main_bxslider>div {display: flex; justify-content: center; align-items: center;}
 .main_text {width: 1140px; position: absolute; text-align: center; text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);}
 .main_text h1 {color: #fff; font-size: 54px; line-height: 0.7em;}
 .main_text p {color: #fff; font-size: 24px; line-height: 1.3em;}

 /* Content */
 #profor .profor_introduce {background: url(../images/profor.png) no-repeat; width: 1600px; height: 555px; background-size: contain; background-position: center; margin: 0 auto;}
 #portfolio {padding: 0 0 80px 0; display: flex; flex-direction: column; align-items: center;}
 #portfolio .text_item {position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.7); padding: 40px; text-align: center; line-height: 1.7em;}
 #portfolio .text_item p {color: #fff;}
 #portfolio .text_item p:first-child {font-size: 22px;}
 #portfolio .text_item p:last-child {font-size: 16px;}
 #business {background: #f2f2f2;}
 #business .business_in {width: 1140px;}
 #business .business_item {width: 270px; box-shadow: 0 0 10px rgba(175, 175, 175, 0.3);}
 #business .business_item .show-btn p:first-child {font-size: 18px;}
 #business .business_item .show-btn p:last-child {font-size: 15px;}
 #business .table-container {}
 #business .table_item {text-align: center;}
 #business .table_item td {background: rgba(255, 255, 255, 0.5);}
 #business .table_item .td_tal td {text-align: left;}
 /* #business .close-btn {width: 110px; height: 40px; font-size: 15px; border-radius: 5px; background-color: #FF9D00;} */
 #contact .contact_text p {font-size: 32px; font-weight: bold; letter-spacing: -0.5px;}
 #contact .contact_form {display: none; border: 1px solid #dddddd; border-radius: 10px; width: 40%; padding: 70px;}
 #contact .contact_form label {width: 100px; display: inline-block; font-weight: bold; color: #4d4d4d; vertical-align: middle;}
 #contact .contact_form select, .contact_form input, .contact_form textarea {font-family: 'NanumSquareNeo-Variable'; border: 1px solid #cbcbcb; border-radius: 3px; font-size: 15px; color: #4d4d4d; background: aliceblue; padding: 7px;}
 #contact .contact_form select, .contact_form input {vertical-align: middle; width: 350px;}
 #contact .contact_form textarea {vertical-align: top;}
 #contact input[type=file] {background: unset; border: unset; padding: unset;}
 #contact input[type=file]::file-selector-button {cursor: pointer; height: 30px; padding: 0 15px; background: #dddddd; border: unset !important; border-radius: 3px; font-weight: bold; font-size: 15px; color: #4d4d4d;}
 /* input[type='file'] {display: none;}
 input[type='file'] + label {height: 30px; background: #dddddd; display: flex !important; justify-content: center; align-items: center; border-radius: 3px; font-size: 15px;} */

 /* Hover Hidden 기능 */
 .hover-area {
     position: relative;
     width: 100%;
     height: 175px;
     background-color: #fff;
     text-align: center;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .hidden-text {
     display: flex;
     opacity: 0; /* 기본적으로 투명하게 설정 */
     visibility: hidden; /* 기본적으로 숨김 */
     position: absolute; /* 위치를 절대적으로 설정 */
     top: 0; /* hover-area와 같은 위치 */
     left: 0;
     width: 100%; /* 너비를 hover-area와 같게 설정 */
     height: 100%; /* 높이를 hover-area와 같게 설정 */
     text-align: center; /* 텍스트 중앙 정렬 */
     z-index: 1; /* 다른 요소 위에 표시 */
     background: #3fa4ba;
     color: #fff;
     padding: 20px;
     justify-content: center;
     align-items: center;
     transition: opacity 0.3s ease, visibility 0.3s ease; /* transition 추가 */
 }

 .hover-area:hover .hidden-text {
     opacity: 1; /* 마우스를 올리면 보이게 함 */
     visibility: visible; /* 마우스를 올리면 보이게 함 */
 }


 /* Show Close Btn */
 .table-container {
     display: none; /* 기본적으로 숨김 */
 }
 /* .close-btn {
     background-color: #ff4d4d;
     color: white;
     border: none;
     padding: 5px 10px;
     cursor: pointer;
     margin-bottom: 10px;
 } */

 .show-btn {
     width: 100%;
     height: 115px;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
     background: #fff;
     border-bottom: 1px solid #dddddd;
 }

 
 
 /* =================================================================== */
 /* 4. FOOTER
 ====================================================================== */
 
 .footer{width: 100%; height: 265px; font-size: 15px; display: flex; align-items: center; justify-content: center; background-color: #4d4d4d; margin: auto;}
 .footer .footer_in{width: 1140px; margin: auto;}
 .footer p, .footer a {color: #fff; font-weight: 200;}