@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;700&display=swap');

/* Common **********************************************************************/ 
html,body {width:100%;}
html {overflow-y:scroll; box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
*{
-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)
}
body {word-break:break-all;-ms-word-break:break-all; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0; word-break:keep-all;}
fieldset,img {border:0px none; vertical-align:top;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
button {border:0 none; background-color:transparent; cursor:pointer;}
body { background:#fff;}
body,th,td,input,select,textarea,button {font-size:18px; line-height:1.7; font-family:'Josefin Sans', 'nanumsquare'; color:#000;} /* 기본폰트 세팅 */
input, select, textarea, button{vertical-align:middle; }
a:link,a:active,a:visited{color:#7d7d7d; text-decoration:none; border:0px;}
a:hover,a:focus{color:#333; text-decoration:none}

table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;}
summary, caption, legend, hr {width:0; height:0; font-size: ; line-height: ; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;}
caption {position:static;}
/* label hidden 泥섎━ */
.invisible, .hide{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;}
label.invisible{*position:Absolute;}


/* common */
.clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;}
.clfix {display:inline-block;}
.clfix {display:block;}
* html .clfix {height:1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/


.center{text-align:center;}
.inner {width:1400px; margin:0 auto;}
.pc {display:block;}
.tab {display:none;}
.mob {display:none;}
.pc_img {display:inline-block;}
.tab_img {display:none;}
.mob_img {display:none;}


/* === Main === */
#wrap {position:relative; width:100%; margin:0 auto; overflow:hidden;}

#header {width:100%; z-index: 10; text-align: center; position:fixed; left:0; top:0;}
#header h1 {position:absolute; left:5%; top:33px;}
#header h1 a {display:block; width:100%; height:100%;}
#header .gnb {font-size: 0; display:inline-block; margin-top: 40px;}
#header .gnb > li {display:inline-block; font-size:20px; margin-right: 90px; line-height:1; position:relative; font-weight: normal;}
#header .gnb > li:last-child {margin-right: 0;}
#header .gnb > li > a {color: #fff; display:block; width: 100%; height: 100%;}
#header .gnb > li:hover > a {color: #57ABFF; font-weight: bold;}
#header .gnb > li.on a {color: #57ABFF; font-weight: bold;}

#header .lang {position: absolute; right: 5%; top: 40px;}
#header .lang li {float: left; font-size: 20px; line-height: 1; margin-right: 15px; padding-right: 15px; position: relative;}
#header .lang li::after {content: ''; width: 1px; height: 10px; background: rgba(255,255,255,.5); position: absolute; right: 0; top: 3px;}
#header .lang li:last-child {margin-right: 0; padding-right: 0;}
#header .lang li:last-child::after {content:none;}
#header .lang li a {color: rgba(255,255,255,.5);}
#header .lang li:hover {font-weight: bold;}
#header .lang li:hover a {color: #fff;}
#header .lang li.on {font-weight: bold;}
#header .lang li.on a {color: #fff;}

.sub_header {position: absolute !important;}

.navi {display:none;}
.navi_btn {display:none;}

#section1 {width: 100%; height: 100%; position: relative;}
.main_visual {width: 100%; height: 100%; position: relative;}
.main_visual li {width: 100%; height: 100vh;}
.main_visual li.bg01 {background: url("../images/main/main_visual_01.jpg") no-repeat center center / cover;}
.main_visual li.bg02 {background: url("../images/main/main_visual_02.jpg") no-repeat center center / cover;}
.main_visual li.bg03 {background: url("../images/main/main_visual_03.jpg") no-repeat center center / cover;}

.main_visual .main_text {width: 100%; text-align: center; color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.main_visual .main_text span {font-size: 24px; line-height: 1; font-weight: bold; display: block; margin-bottom: 35px; }
.main_visual .main_text span b {font-size: 27px;}
.main_visual .main_text h2 {font-size: 65px; line-height: 95px; font-weight: normal; margin-bottom: 60px;}
.main_visual .main_text h2 b {font-weight: 900;}
.main_visual .main_text p {font-size: 30px; font-weight: bold;}

#section1 img.scroll {position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px;}


#section2 {width: 100%; height: 100%; background: url('../images/main/con2_bg.jpg') no-repeat center center / cover;}
#section2 .con2_txt > span {display: block; color: #57ABFF; font-size: 20px; font-weight: bold; line-height: 1; margin-bottom: 35px;}
#section2 .con2_txt > span b {font-size: 23px;}
#section2 .con2_txt h2 {font-size: 50px; line-height: 75px; font-weight: normal; margin-bottom: 40px; color: #fff;}
#section2 .con2_txt h2 b {font-weight: 900;}
#section2 .con2_txt p {font-size: 22px; line-height: 38px; color: #fff; margin-bottom: 100px;}
#section2 .con2_txt button {font-size: 0;}
#section2 .con2_txt button span {display: inline-block; font-size: 22px; line-height: 40px; font-weight: bold; color: #fff; margin-right: 30px;}


#section3 {width: 100%; height: 100%; background: url('../images/main/con3_bg.jpg') no-repeat center center / cover; position: relative;}
#section3::after {content: ''; width: 860px; height: 105px; position: absolute; right: 0; bottom: 0; background: url('../images/main/con3_txt.png') no-repeat;}
#section3 .inner {height: 100%; position: relative;}
#section3 .main_people_list {position: absolute; width: 100%; left: 0; bottom: 0;}
#section3 .main_people_list li {overflow: hidden; color: #fff;}
#section3 .main_people_list li .img_wrap {float: left; width: 36vw; max-width: 750px;}
#section3 .main_people_list li .img_wrap .tab_bg {display: none;}
#section3 .main_people_list li .img_wrap img {width: 100%;}
#section3 .main_people_list li .txt_wrap {float: right; width: calc(100% - 36vw); padding-left: 30px; padding-top: 7vw; min-width: 650px;}
#section3 .main_people_list li .txt_wrap > span {font-size: 20px; font-weight: bold; display: block; line-height: 1; margin-bottom: 45px;}
#section3 .main_people_list li .txt_wrap h2 {font-size: 52px; line-height: 76px; margin-bottom: 40px;}
#section3 .main_people_list li .txt_wrap p {font-size: 26px; line-height: 1; line-height: 1; margin-bottom: 130px;}
#section3 .main_people_list li .txt_wrap p b {font-weight: 900;}
#section3 .main_people_list li .txt_wrap button {font-size: 0;}
#section3 .main_people_list li .txt_wrap button span {display: inline-block; font-size: 22px; line-height: 40px; font-weight: bold; color: #fff; margin-right: 30px;}
#section3 .btn_wraps button {position: absolute; top: 50%; transform: translateY(-50%);}
#section3 .btn_wraps .p_prev_btn {left: -95px;}
#section3 .btn_wraps .p_next_btn {right: -95px;}


#section4 {width: 100%; height: 100%; background: url('../images/main/con4_bg.jpg') no-repeat center center / cover;}

#section4 .con_txt {float: left; width: 50%; padding-right: 60px; color: #fff; padding-top: 30px;}
#section4 .con_txt span {font-size: 20px; font-weight: bold; color: #57ABFF; line-height: 1; display: block; margin-bottom: 40px;}
#section4 .con_txt h2 {font-size: 50px; line-height: 1; margin-bottom: 50px;}
#section4 .con_txt > p {font-size: 22px; line-height: 1; margin-bottom: 70px;}

#section4 .con_txt .con_list {width: 100%; overflow: hidden; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 30px 0;}
#section4 .con_txt .con_list li {padding-left: 30px; float: left; width: 33.33%; border-right: 1px solid rgba(255,255,255,.4);}
#section4 .con_txt .con_list li:first-child {width: 100%; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 30px; margin-bottom: 30px; border-right: 0;}
#section4 .con_txt .con_list li:last-child {border-right: 0;}
#section4 .con_txt .con_list li em {font-size: 18px; line-height: 1; display: block; margin-bottom: 20px;}
#section4 .con_txt .con_list li p {font-size: 18px; line-height: 1; font-family: 'nanumsquare';}

#section4 .con_map {float: right; width: 50%; padding-left: 40px;}
#section4 .con_map .map {width: 100% !important; height: 560px !important;}

#footer {width: 100%; height: 280px !important;}
#footer .fp-tableCell {height: 280px !important;}
#footer .footer_top {background: #F4F4F4; height: 220px !important; padding: 50px 0;}
#footer .footer_top img.foot_logo {display: block; margin-bottom: 40px;}
#footer .footer_top ul {font-size: 0; margin-bottom: 10px;}
#footer .footer_top ul:last-of-type {margin-bottom: 0;}
#footer .footer_top ul li {font-size: 16px; font-family: 'nanumsquare'; color: #777; display: inline-block; margin-right: 40px;}
#footer .footer_top ul li:last-child {margin-right: 0;}
#footer .footer_top ul li b {font-weight: bold; margin-right: 15px; color: #000;}
#footer .footer_bot {background: #fff; height: 55px !important;}
#footer .footer_bot p {font-size: 15px; line-height: 55px; font-family: 'nanumsquare'; font-weight: bold;}


/* === Sub 01 === */
#sub_visual {width: 100%; height: 560px; text-align: center; color: #fff; padding-top: 220px;}
#sub_visual span {font-size: 24px; font-weight: bold; display: block; line-height: 1; margin-bottom: 40px;}
#sub_visual span b {font-size: 27px;}
#sub_visual h2 {font-size: 65px; font-weight: 900; line-height: 1;}

.subBg_01 {background: url("../images/sub/sub_visual_01.jpg") no-repeat center center / cover;}
.subBg_02 {background: url("../images/sub/sub_visual_02.jpg") no-repeat center center / cover;}
.subBg_03 {background: url("../images/sub/sub_visual_03.jpg") no-repeat center center / cover;}
.subBg_04 {background: url("../images/sub/sub_visual_04.jpg") no-repeat center center / cover;}

#sub_content {padding: 150px 0 180px;}

.about_wrap {width: 100%;}
.about_wrap img {width: 100%;}
.about_wrap h3 {font-size: 45px; font-weight: 900; line-height: 1; margin-bottom: 60px;}
.about_wrap h3 b {color: #0B6FD3; font-weight: 900; font-family: 'nanumsquare';}
.about_wrap p {font-size: 26px; line-height: 45px; margin-bottom: 40px;}
.about_wrap p b {font-weight: 900;}

.sub_01_txt {background: url("../images/sub/greet_txt.png") no-repeat center bottom; background-size: 83%;} 


/* === Sub 02 === */
.people_wrap .p_list li {float: left; width: 49%; margin-right: 2%; margin-top: 2%; background: #F5F5F5; position: relative; cursor: pointer;}
.people_wrap .p_list li:nth-child(2n) {margin-right: 0;}
.people_wrap .p_list li:nth-child(-n+2) {margin-top: 0;}
.people_wrap .p_list li > img {width: 100%;}
.people_wrap .p_list li .txt {position: absolute; left: 47%; top: 50%; transform: translateY(-50%);}
.people_wrap .p_list li .txt > span {font-size: 18px; color: #A0A0A0; line-height: 1; display: block; margin-bottom: 20px;}
.people_wrap .p_list li .txt h3 {font-size: 20px; font-weight: normal; line-height: 1; padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid #ccc;}
.people_wrap .p_list li .txt h3 b {font-size: 45px; font-weight: 900; margin-right: 15px;}
.people_wrap .p_list li .txt p {font-size: 18px; line-height: 30px; margin-bottom: 35px;}
.people_wrap .p_list li .txt button {font-size: 0;}
.people_wrap .p_list li .txt button span {font-size: 16px; line-height: 28px; font-weight: bold; display: inline-block; margin-right: 15px; color: #000;}
.people_wrap .p_list li:hover .txt button img {transform: translateX(10px); transition:0.3s ease-in-out;}


/* === Sub 02 popup === */
#popup {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); padding: 100px 0 200px; z-index: 999;}
#popup .pop_con {background: #fff; position: relative;}
#popup .pop_con button.close_btn {position: absolute; right: 40px; top: 40px; cursor: pointer; z-index: 1001;}
#popup .pop_con .pop_top {width: 100%; height: 585px; position: relative;}
#popup .pop_con .pop_top .blue_bg {width: 100%; height: 50%; position: absolute; bottom: 0; left: 0;}

#popup:nth-of-type(1) .pop_con .pop_top .blue_bg {background: #E2EBF5 url("../images/sub/pop_name01.png") no-repeat right bottom;}
#popup:nth-of-type(2) .pop_con .pop_top .blue_bg {background: #E2EBF5 url("../images/sub/pop_name02.png") no-repeat right bottom;}
#popup:nth-of-type(3) .pop_con .pop_top .blue_bg {background: #E2EBF5 url("../images/sub/pop_name03.png") no-repeat right bottom;}

#popup .pop_con .pop_top img {position: absolute; left: 100px; top: 70px;}
#popup .pop_con .pop_top .profile {position: relative; width: 100%; padding-left: 40%; padding-top: 135px; z-index: 1000;}
#popup .pop_con .pop_top .profile span {display: block; font-size: 20px; line-height: 1; margin-bottom: 25px;}
#popup .pop_con .pop_top .profile h5 {font-size: 22px; color: #A0A0A0; font-weight: normal; margin-bottom: 60px;}
#popup .pop_con .pop_top .profile h5 b {font-size: 55px; font-weight: 900; margin-right: 20px; color: #000;}
#popup .pop_con .pop_top .profile p {font-size: 24px; font-weight: bold; margin-bottom: 35px;}
#popup .pop_con .pop_top .profile .prof em {font-size: 20px; font-weight: 900; line-height: 1; padding-top: 3px; float: left; width: 100px;}
#popup .pop_con .pop_top .profile .prof ul {float: right; width: calc(100% - 100px); font-size: 0;}
#popup .pop_con .pop_top .profile .prof ul li {display: inline-block; font-size: 18px; line-height: 1; padding: 6px 10px 5px; background: #B5C3D1; margin-right: 10px; margin-top: 10px; font-family: 'nanumsquare';}
#popup .pop_con .pop_top .profile .prof ul li:nth-child(-n+2) {margin-top: 0;}

#popup .pop_con .pop_bot {width: 100%; display: flex;}
#popup .pop_con .pop_bot .left {width: 50%; padding: 80px 80px 100px;}

#popup .pop_con .pop_bot .prof_list {margin-bottom: 80px;}
#popup .pop_con .pop_bot .prof_list:last-child {margin-bottom: 0;}
#popup .pop_con .pop_bot .prof_list h6 {font-size: 35px; line-height: 1; font-weight: 900; margin-bottom: 30px;}
#popup .pop_con .pop_bot .prof_list ul li {font-size: 20px; line-height: 1; margin-bottom: 15px; padding-left: 20px; position: relative; font-family: 'nanumsquare';}
#popup .pop_con .pop_bot .prof_list ul li::before {content:''; width: 4px; height: 4px; background: #B8C8D8; position: absolute; left: 0; top: 5px;}
#popup .pop_con .pop_bot .prof_list ul li:last-child {margin-bottom: 0;}

#popup .pop_con .pop_bot .right {width: 50%; background: #F7F7F7; padding: 80px 80px 100px;}

#popup_wrap > section {display: none;}


/* === Sub 03 === */
.work_wrap .work {width: 100%; margin-bottom: 120px; border-top: 3px solid #0B6FD3;}
.work_wrap .work:last-child {margin-bottom: 0;}
.work_wrap .work h3 {font-size: 50px; font-weight: 900; line-height: 1; padding: 40px 0;}
.work_wrap .work h3 span {font-size: 30px; font-weight: bold; color: #0B6FD3; margin-right: 15px; display: inline-block; vertical-align: top;}
.work_wrap .work .gray_box {background: #F5F5F5; padding: 60px;}
.work_wrap .work .gray_box ul li {margin-bottom: 50px; font-family: 'nanumsquare';}
.work_wrap .work .gray_box ul li:last-child {margin-bottom: 0;}
.work_wrap .work .gray_box ul li b {font-size: 22px; font-weight: bold; display: block; margin-bottom: 10px;}
.work_wrap .work .gray_box ul li p {font-size: 20px; line-height: 38px;}



/* === Sub 04 === */
.contact_wrap .map_box {width: 100%; margin-bottom: 60px;}
.contact_wrap .map_box .map {width: 100% !important; height: 380px !important;}
.contact_wrap .contact {position: relative; padding-left: 30%;}
.contact_wrap .contact img {position: absolute; left: 0; top: 0;}
.contact_wrap .contact h4 {font-size: 30px; font-weight: 900; line-height: 1; margin-bottom: 20px; font-family: 'nanumsquare';}
.contact_wrap .contact span {font-size: 18px; line-height: 1; font-weight: 500; display: block; margin-bottom: 50px;}
.contact_wrap .contact ul {font-size: 0;}
.contact_wrap .contact ul li {font-size: 18px; line-height: 1; display: inline-block; padding-right: 50px; margin-right: 50px; position: relative;}
.contact_wrap .contact ul li::after {content:''; width: 1px; height: 12px; background: #D5D5D5; position: absolute; right: 0; top: 2px;}
.contact_wrap .contact ul li:last-child {margin-right: 0; padding-right: 0;}
.contact_wrap .contact ul li:last-child::after {content:none;}
.contact_wrap .contact ul li b {display: inline-block; font-weight: bold; margin-right: 20px;}
.contact_wrap .contact ul li p {display: inline-block; font-family: 'nanumsquare';}