/* 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: "Montserrat", 'Pretendard'; color:#000; letter-spacing: -0.5px;} /* 기본폰트 세팅 */ 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%; height: 90px; z-index: 10; text-align: center; position:fixed; left:0; top:0; background: rgba(0,8,20,0.34);} #header h1 {position:absolute; left:3%; top:15px; width: 216px; height: 60px;} #header h1 img {display:block; width:100%; height:100%;} #header .gnb {font-size: 0; display:inline-block; text-align: center;} #header .gnb > li {display:inline-block; font-size: 20px; height: 90px; line-height: 90px; margin-right: 70px; 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 .login_box {position: absolute; right: 3%; top: 29px; display: flex;} #header .login_box li {font-size: 18px; line-height: 32px; margin-right: 10px;} #header .login_box li:first-child::after {content:'·'; color: #fff; padding-left: 11px;} #header .login_box li:first-child.scrolled::after {color: #000;} #header .login_box li:last-child {margin-right: 0;} #header .login_box li a {color: #fff;} #header .login_box li img {width: 32px;} .navi {display:none;} .navi_btn {display:none;} #quick_btn {position: fixed; right: 3%; top: 50%; transform: translateY(-50%); z-index: 99;} #quick_btn ul li {width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.2);} #quick_btn ul li:last-child {margin-bottom: 0;} #quick_btn ul li img {width: 100%;} #quick_btn .q_plus {width: 60px; margin-top: 10px; display: block; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.2); display: none;} #quick_btn .top_btn {width: 60px; height: 60px; margin-top: 10px; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.2);} #quick_btn .top_btn img {width: 100%;} #main_visual {width: 100%; height: 100vh; position: relative; overflow: hidden;} #main_visual .video_wrap video {width: 100%; height: 100%; object-fit: cover;} #main_visual .inner {position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%;} #main_visual .inner .title {position: absolute; width: 100%; bottom: 150px; text-align: center; color: #fff;} #main_visual .inner .title h2 {font-size: 64px; line-height: 1; margin-bottom: 30px; font-weight: 300; text-shadow: 0 3px 6px rgba(0,0,0,.16);} #main_visual .inner .title p {font-size: 24px; line-height: 1; color:#fff; text-shadow: 0 3px 6px rgba(0,0,0,.16);} #main_visual .inner .scroll {position: absolute; left: 0; bottom: 0;} .inner_b {width: 100%; padding: 0 3%; position: relative;} .title {text-align: center;} .title span {display: block; font-size: 20px; font-weight: bold; line-height: 1; color: #017CC6; margin-bottom: 30px;} .title h2 {font-size: 50px; line-height: 70px; font-weight: 300;} .title h2 b {font-weight: bold;} .title p {font-size: 24px; line-height: 40px; color: #555; margin-top: 30px;} #con1 {margin-top: 250px; display: flex; align-items: center; position: relative;} #con1::before {content: ''; width: 772px; height: 1040px; position: absolute; right: 0; top: 0; background: url(../images/con1_bg.png) no-repeat; background-size: 772px 1040px; z-index: -1;} #con1 > img {width: 42%; border-radius: 20px;} #con1 .title {width: 100%; text-align: left; margin-left: 120px;} #con2 {margin-top: 250px; position: relative; min-height: 850px; background: url(../images/con2_bg.jpg) no-repeat center center / cover; background-size: 100% 60%; background-position: bottom;} #con2 .title {text-align: left;} #con2 .sl_wrap {width: 100%; position: absolute; left: 0; top: 150px;} #con2 .sl_box {width: 60%; margin-left: 40%;} #con2 .solution_list li {width: 40%;} #con2 .solution_list li img {width: 100%; border-radius: 20px;} #con2 .solution_list li .txt_box {display: flex; color: #fff; margin-top: 35px;} #con2 .solution_list li .txt_box span {font-size: 18px; line-height: 30px; margin-right: 50px; position: relative;} #con2 .solution_list li .txt_box span::after {content:''; width: 24px; height: 1px; position: absolute; top: 14px; right: -35px; background: #fff;} #con2 .solution_list li .txt_box .tit h3 {font-size: 32px; line-height: 1; margin-bottom: 15px;} #con2 .solution_list li .txt_box .tit p {font-size: 20px; line-height: 32px;} #con2 .sl_wrap .sl_pg {width: 1400px; position: absolute; left: 50%; transform: translateX(-50%); top: 40%; display: flex; align-items: center;} #con2 .sl_wrap .sl_pg .sl_prev, #con2 .sl_wrap .sl_pg .sl_next {width: 50px; cursor: pointer;} #con2 .sl_wrap .sl_pg .sl_prev img, #con2 .sl_wrap .sl_pg .sl_next img {width: 100%;} #con2 .sl_wrap .sl_pg .sl_pagination {color: rgba(255,255,255,.5); width: auto; margin: 0 30px;} #con2 .sl_wrap .sl_pg .sl_pagination .swiper-pagination-current {font-size: 40px; font-weight: bold; color: rgba(255,255,255,1); margin-right: 4px;} #con2 .sl_wrap .sl_pg .sl_pagination .swiper-pagination-total {font-size: 28px; margin-left: 4px; font-weight: 500;} #con3 {margin: 250px 0; text-align: center;} #con3 .inner {position: relative;} #con3 h3 {font-size: 60px; line-height: 85px; font-weight: 300; margin-bottom: 220px; position: relative; display: inline-block;} #con3 h3 b {font-weight: bold;} #con3 h3::before {content:''; position: absolute; left: -60px; top: -35px; background: url(../images/t_bg_01.png) no-repeat; width: 90px; height: 70px; background-size: 90px 70px;} #con3 h3::after {content:''; position: absolute; right: -120px; bottom: -20px; background: url(../images/t_bg_02.png) no-repeat; width: 90px; height: 70px; background-size: 90px 70px;} #con3 .txt_box {position: relative;} #con3 .txt_box::before {content:''; width: 1px; height: 80px; position: absolute; left: 50%; top: -150px; background: #d0d0d0;} #con3 .txt_box p {font-size: 22px; line-height: 38px; margin-bottom: 45px;} #con3 .txt_box p b {font-weight: bold;} #con3 .txt_box p:last-child {margin-bottom: 0;} #con3 .people_list {width: 100%; position: absolute; top: 230px; left: 0; display: flex; justify-content: space-between;} #con3 .people_list li {width: 28%;} #con3 .people_list li img {width: 100%; border-radius: 20px;} #con3 .people_list li .name {display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 10px;} #con3 .people_list li .name p {font-size: 18px;} #con3 .people_list li .name p b {font-size: 24px;} #con3 .people_list li .name span {font-size: 18px; font-weight: 500; color: #017CC6;} #con3 .blue_box {width: 100%; margin-top: 200px; background: #017CC6; padding: 80px 0;} #con3 .blue_box ul {display: flex; justify-content: space-between;} #con3 .blue_box ul li {width: 33.33%; text-align: center; border-right: 1px solid rgba(255,255,255,.3);} #con3 .blue_box ul li:last-child {border-right: 0;} #con3 .blue_box ul li img {width: 60px;} #con3 .blue_box ul li p {font-size: 24px; font-weight: 500; line-height: 1; margin-top: 40px; color: #fff;} #con4 {position: relative; margin-bottom: 250px;} #con4::before {content: ''; background: url(../images/con4_bg.png) no-repeat; width: 965px; height: 150px; background-size: 965px 150px; position: absolute; left: 3%; top: -25%; z-index: -1;} #con4 .inner h3 {font-size: 30px; line-height: 1; margin-bottom: 35px;} #con4 .inner > p {font-size: 22px; line-height: 38px; color: #555; margin-bottom: 60px;} #con4 .inner ul {margin-bottom: 60px;} #con4 .inner ul li {display: flex; align-items: center; margin-bottom: 15px;} #con4 .inner ul li:last-child {margin-bottom: 0;} #con4 .inner ul li span {font-size: 24px; font-weight: bold; position: relative; margin-right: 70px; width: 32px;} #con4 .inner ul li:nth-child(1) span {color: #57B3EA;} #con4 .inner ul li:nth-child(2) span {color: #309FE2;} #con4 .inner ul li:nth-child(3) span {color: #017CC6;} #con4 .inner ul li span::after {content: ''; width: 30px; height: 1px; background: #dedede; position: absolute; right: -50px; top: 20px;} #con4 .inner ul li p {font-size: 20px;} #con4 > img {position: absolute; right: 3%; top: 0; width: 44%; border-radius: 20px;} #con5 {margin-bottom: 250px;} #con5 .inner img {display: block; width: 100%; margin: 60px 0 50px; border-radius: 20px;} #con5 .inner .c5_list {display: flex; justify-content: space-between;} #con5 .inner .c5_list li {width: 24%; padding: 60px 0; background: #F7F7F7; border-radius: 20px; text-align: center;} #con5 .inner .c5_list li:nth-child(2n) {background: #fff; border: 1px solid #DEDEDE;} #con5 .inner .c5_list li p {font-size: 18px; line-height: 30px; font-weight: 300;} #con5 .inner .c5_list li p b {font-weight: bold;} #con6 {background: #F5F5F5; padding: 150px 0 200px;} #con6 .c6_list {display: flex; justify-content: space-between; margin-top: 70px;} #con6 .c6_list li {width: 32%; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.06);} #con6 .c6_list li img {width: 100%;} #con6 .c6_list li h3 {font-size: 24px; line-height: 1; margin-top: 45px; padding: 0 40px;} #con6 .c6_list li p {font-size: 18px; line-height: 30px; margin-top: 20px; padding: 0 40px 50px; color: #555;} #con7 {margin-top: 250px;} #con7 .green_box {width: 94%; margin: 0 auto; background: url(../images/con7_bg.jpg) no-repeat center center / cover; margin-top: 100px;} #con7 .green_box .txt {padding: 100px 0 70px;} #con7 .green_box .txt > p {font-size: 26px; line-height: 46px; font-weight: 300; margin-bottom: 45px; color: #fff;} #con7 .green_box .txt > p:last-child {margin-bottom: 0;} #con7 .green_box .txt .signal {display: flex; align-items: center;} #con7 .green_box .txt .signal p {font-size: 26px; color: #fff; margin-right: 10px;} #con7 .green_box .txt .signal img {width: 84px;} #con7 .green_box .inner {position: relative;} #con7 .green_box .inner > img {width: 36%; position: absolute; right: 0; bottom: 0;} #con8 {margin: 180px 0;} #con8 .inner {display: flex; justify-content: space-between;} #con8 .inner .txt {width: calc(50% - 80px);} #con8 .inner .txt .title {text-align: left; margin-bottom: 60px;} #con8 .inner .txt .c8_list li {width: 100%; height: 70px; background: #F7F7F7; margin-bottom: 10px; border-radius: 35px; display: flex; padding: 0 60px; font-size: 22px; line-height: 70px;} #con8 .inner .txt .c8_list li:last-child {margin-bottom: 0;} #con8 .inner .txt .c8_list li span {color: #017CC6; width: 118px; font-weight: bold; min-width: 158px; flex-shrink: 0;} #con8 .inner .txt .c8_list li p {width: 100%} #con8 .inner > img {width: 50%; border-radius: 20px; } .check_sec {background: url(../images/con9_bg.jpg) no-repeat center center / cover; background-size: 100% 58%; background-position: bottom; padding-bottom: 150px;} .check_sec .inner {display: flex; flex-direction: row-reverse; justify-content: space-between;} .check_sec .inner .txt {width: calc(50% - 80px);} .check_sec .inner .txt .title {text-align: left; margin-bottom: 110px;} .check_list li {display: flex; align-items: center; margin-bottom: 25px;} .check_list li:last-child {margin-bottom: 0;} .check_list li img {width: 40px; margin-right: 20px;} .check_list li p {font-size: 24px;} .check_sec .inner > img {width: 50%; border-radius: 20px;} #con10 {background: #002053; padding: 150px 0 200px;} #con10 .title {margin-bottom: 70px;} #con10 .title h2, #con10 .title p {color: #fff;} .sp_wrap {position: relative; padding-bottom: 100px;} .special_list li {width: 52%; position: relative; opacity: 0.5;} .special_list li img {width: 100%; border-radius: 20px;} .special_list li .txt {display:none;} .special_list li .txt h3 {font-size: 30px; line-height: 1; margin-bottom: 24px;} .special_list li .txt p {font-size: 20px; line-height: 32px; color: #555;} .special_list li.swiper-slide-active {opacity: 1;} .special_list li.swiper-slide-active .txt {display: block; width: 60%; border-radius: 20px; background: #fff; padding: 50px 60px; position: absolute; left: 40px; bottom: -100px; box-shadow: 0 0 10px rgba(0,0,0,.16);} .sp_wrap .sp_pg {position: absolute; right: 20%; bottom: 0; display: flex; align-items: center;} .sp_wrap .sp_pg .sp_prev, .sp_wrap .sp_pg .sp_next {width: 50px; cursor: pointer;} .sp_wrap .sp_pg .sp_prev img, .sp_wrap .sp_pg .sp_next img {width: 100%;} .sp_wrap .sp_pg .sp_pagination {color: rgba(255,255,255,.5); width: auto; margin: 0 30px;} .sp_wrap .sp_pg .sp_pagination .swiper-pagination-current {font-size: 40px; font-weight: bold; color: rgba(255,255,255,1); margin-right: 4px;} .sp_wrap .sp_pg .sp_pagination .swiper-pagination-total {font-size: 28px; margin-left: 4px; font-weight: 500;} #con11 {padding: 150px 0 200px; background: url(../images/con11_bg.jpg) no-repeat center center / cover;} #con11 .title {margin-bottom: 70px;} #con11 .title h2 , #con11 .title p {color: #fff;} .im_full_wrap {position: relative;} .im_wrap {width: 1400px; overflow: hidden;} .im_wrap .implant_list li > div span {position: absolute; left: 0; top: 0; display: block; width: 90px; height: 34px; font-size: 16px; font-weight: bold; text-align: center; line-height: 34px;} .im_wrap .implant_list li .before {position: relative;} .im_wrap .implant_list li .before > img {width: 100%;} .im_wrap .implant_list li .before span {background: #D0D0D0; color: #000;} .im_wrap .implant_list li .after {position: relative; overflow: hidden;} .im_wrap .implant_list li .after > img {width: 100%; filter: blur(5px); -webkit-filter: blur(5px);} .im_wrap .implant_list li .after span {background: #017CC6; color: #fff;} .im_wrap .implant_list li .after .blur {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .im_wrap .implant_list li .txt {margin-top: 25px;} .im_wrap .implant_list li .txt h3 {color: #fff; font-size: 24px; line-height: 1; font-weight: 300; margin-bottom: 15px;} .im_wrap .implant_list li .txt h3 b {font-weight: bold;} .im_wrap .implant_list li .txt p {font-size: 14px; line-height: 1; color: #989898;} .im_pg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .im_pg .im_prev {width: 50px; height: 50px; cursor: pointer; position: absolute; left: -80px; top: 50%; transform: translateY(-50%);} .im_pg .im_next {width: 50px; height: 50px; cursor: pointer; position: absolute; right: -80px; top: 50%; transform: translateY(-50%);} .im_pg .im_prev img, .im_pg .im_next img {width: 100%;} #con12 {margin-top: 250px;} #con12 .title {margin-bottom: 100px;} #con12 .c12_box {display: flex; justify-content: space-between;} #con12 .c12_box .txt {width: calc(50% - 80px);} #con12 .c12_box .txt h3 {font-size: 40px; margin-bottom: 35px; color: #017CC6;} #con12 .c12_box .txt p {font-size: 24px; line-height: 40px; color: #555;} #con12 .c12_box .txt .c12_list {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 50px;} #con12 .c12_box .txt .c12_list li {border-radius: 20px; width: 32%; background: #F7F7F7; margin-top: 2%; text-align: center; padding: 25px 0;} #con12 .c12_box .txt .c12_list li:nth-child(-n+3) {margin-top: 0;} #con12 .c12_box .txt .c12_list li:nth-child(2n) {border: 1px solid #DEDEDE; background: #fff;} #con12 .c12_box .txt .c12_list li img {width: 40px;} #con12 .c12_box .txt .c12_list li p {font-size: 18px; line-height: 26px; margin-top: 24px;} #con12 .c12_box > img {width: 50%; border-radius: 20px;} #con13 {margin: 180px 0;} #con13 .title {margin-bottom: 70px;} #con13 .c13_list {display: flex; justify-content: space-between;} #con13 .c13_list li {width: 32%; border: 1px solid #DEDEDE; border-radius: 20px; overflow: hidden;} #con13 .c13_list li img {width: 100%;} #con13 .c13_list li .txt {background: #F7F7F7; padding: 40px 40px 50px;} #con13 .c13_list li .txt h3 {font-size: 24px; line-height: 1; margin-bottom: 25px;} #con13 .c13_list li .txt p {font-size: 18px; line-height: 30px; color: #555;} #con14 {background: #F7F7F7; padding: 150px 0 200px;} #con14 .title {margin-bottom: 70px;} #con14 img {width: 100%; border-radius: 20px;} #con14 .c14_list {display: flex; justify-content: space-between; margin-top: 50px;} #con14 .c14_list li {width: 32%; background: #fff; border-radius: 20px; padding: 50px 50px 60px;} #con14 .c14_list li h3 {font-size: 24px; line-height: 1; color: #017CC6;} #con14 .c14_list li p {font-size: 18px; line-height: 1; color: #555; margin-top: 25px;} #con14 .c14_list li p b {font-weight: bold; color: #000;} #con14 .inner > p {font-size: 24px; color: #555; text-align: center; margin-top: 60px;} #con15 {margin-top: 250px;} #con15 .title {margin-bottom: 100px;} #con15 .c15_box {display: flex; justify-content: space-between;} #con15 .c15_box .txt {width: calc(50% - 80px);} #con15 .c15_box .txt h3 {font-size: 40px; margin-bottom: 30px; color: #017CC6;} #con15 .c15_box .txt p {font-size: 24px; line-height: 40px; color: #555;} #con15 .c15_box .num_list {margin-top: 40px;} #con15 .c15_box .num_list li {display: flex; align-items: center; margin-bottom: 20px;} #con15 .c15_box .num_list li:last-child {margin-bottom: 0;} #con15 .c15_box .num_list li span {display: block; width: 42px; height: 42px; background: #017CC6; border-radius: 50%; text-align: center; line-height: 42px; color: #fff;} #con15 .c15_box .num_list li p {color: #000; padding-left: 20px;} #con15 .c15_box > img {width: 50%; border-radius: 20px;} #con16 {margin-top: 180px; padding-bottom: 200px; background: url(../images/con16_bg.jpg) no-repeat center center / cover; background-size: 100% 60%; background-position: bottom;} #con16 .title {margin-bottom: 70px;} #con16 .inner > img {width: 100%; border-radius: 20px;} #con16 .c16_list {display: flex; justify-content: space-between; margin-top: 60px;} #con16 .c16_list li {width: 15.3%; height: 0; padding-bottom: 15.3%; text-align: center; border: 1px solid #fff; border-radius: 50%;} #con16 .c16_list li span {width: 110px; height: 36px; border-radius: 18px; background: #017CC6; display: block; text-align: center; font-size: 16px; line-height: 36px; margin: 0 auto; color: #fff; font-weight: 500; margin-top: -10px;} #con16 .c16_list li:nth-child(2n) span {background: #6FB4DE;} #con16 .c16_list li img {width: 60px; display: block; margin: 0 auto; margin-top: 25px;} #con16 .c16_list li p {font-size: 20px; line-height: 1; margin-top: 25px; color: #fff;} #con17 {margin-top: 250px;} #con17 .title {margin-bottom: 70px;} #con17 .inner > img {border-radius: 20px; width: 100%;} #con18 {margin-top: 180px; background: #002053; padding: 150px 0 200px;} #con18 .title {margin-bottom: 70px;} #con18 .title h2 , #con18 .title p {color: #fff;} #con18 ul {display: flex; justify-content: space-between;} #con18 ul li {width: 30%; text-align: center; position: relative;} #con18 ul li::after {content: ''; width: 14px; height: 26px; background: url(../images/arrow.png) no-repeat; position: absolute; right: -45px; top: 200px; background-size: 14px 26px;} #con18 ul li:last-child::after {content: none;} #con18 ul li img {width: 100%;} #con18 ul li span {width: 110px; height: 36px; border-radius: 18px; background: #017CC6; display: block; text-align: center; font-size: 16px; line-height: 36px; margin: 0 auto; color: #fff; font-weight: 500; margin-top: 50px;} #con18 ul li h3 {font-size: 30px; margin: 25px 0 20px; color: #fff;} #con18 ul li p {font-size: 22px; line-height: 38px; color: #fff; font-weight: 300;} #con19 {margin-top: 180px;} #con19.check_sec {background-size: 100% 67%; background-position: bottom; padding-bottom: 150px;} #con20 {margin: 250px 0;} #con20 .title {margin-bottom: 70px;} #con20 .inner > img {width: 100%; border-radius: 20px;} #con20 .c20_list {margin-top: 80px; display: flex; justify-content: space-between;} #con20 .c20_list > li {width: 49%; background: #F7F7F7; border-radius: 20px; padding: 70px 60px 80px; position: relative;} #con20 .c20_list > li h3 {font-size: 38px; line-height: 1; color: #017CC6; margin-bottom: 20px;} #con20 .c20_list > li p {font-size: 22px; line-height: 38px; color: #555; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #D0D0D0;} #con20 .c20_list > li > img {position: absolute; top: 50px; right: 60px; width: 125px;} .bullet li {font-size: 22px; margin-bottom: 15px; padding-left: 15px; position: relative;} .bullet li:last-child {margin-bottom: 0;} .bullet li::before {content:''; width: 4px; height: 4px; background: #017CC6; position: absolute; left: 0; top: 17px; border-radius: 50%;} #con21 {background: url(../images/con21_bg.jpg) no-repeat center center / cover; padding: 150px 0 200px;} #con21 .title {margin-bottom: 70px;} #con21 .title h2 , #con21 .title p {color: #fff;} #con21 .c21_box {display: flex; justify-content: space-between; align-items: center;} #con21 .c21_box > img {width: 50%; border-radius: 20px;} #con21 .c21_box ul {width: calc(50% - 80px);} #con21 .c21_box ul li {padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.2);} #con21 .c21_box ul li:last-child {padding-bottom: 0; margin-bottom: 0; border-bottom: 0;} #con21 .c21_box ul li span {display: block; font-size: 30px; font-weight: bold; line-height: 1; color: #1698E6; margin-bottom: 20px;} #con21 .c21_box ul li p {font-size: 22px; color: #fff;} #con22 {margin: 250px 0;} #con22 .inner {display: flex; justify-content: space-between;} #con22 .inner .title {text-align: left;} #con22 .inner .c22_wrap {width: 68%; display: flex; justify-content: space-between;} #con22 .inner .c22_list {flex-wrap: wrap; width: 49%; flex-direction: column;} #con22 .inner .c22_list li {width: 100%; border: 1px solid #DEDEDE; border-radius: 20px; overflow: hidden; margin-bottom: 20px;} #con22 .inner .c22_list li img {width: 100%;} #con22 .inner .c22_list li .txt {background: #F7F7F7; padding: 40px 40px 50px;} #con22 .inner .c22_list li .txt h3 {font-size: 24px; line-height: 1; margin-bottom: 25px;} #con22 .inner .c22_list li .txt p {font-size: 18px; line-height: 30px; color: #555;} #con22 .inner .c22_list:first-child {margin-top: 80px;} #con23 {padding: 120px 0; background: url(../images/con23_bg.jpg) no-repeat center center / cover; margin-bottom: 200px; text-align: center;} #con23 .inner img {width: 100px;} #con23 .inner h2 {font-size: 45px; line-height: 65px; font-weight: 300; margin: 60px 0 50px; color: #fff;} #con23 .inner h2 b {font-weight: bold;} #con23 .inner p {font-size: 24px; color: #fff;} #con24 .title {margin-bottom: 70px;} #con24 .c24_box {display: flex; justify-content: space-between; position: relative;} #con24 .c24_box .c24_wrap {width: 50%; overflow: hidden; border-radius: 0 20px 0 0; position: absolute; left: 0; top: 0;} #con24 .c24_box .c24_wrap .c24_list li {width: 100%;} #con24 .c24_box .c24_wrap .c24_list li img {width: 100%;} #con24 .c24_box .inner {padding-left: 780px;} #con24 .c24_box .inner > div {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #DEDEDE;} #con24 .c24_box .inner > div:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: 0;} #con24 .c24_box .inner > div h3 {font-size: 24px; line-height: 1; margin-bottom: 25px;} #con24 .c24_box .inner > div > p {font-size: 18px; margin-bottom: 15px;} #con24 .c24_box .inner > div strong {font-size: 40px; font-weight: 500; line-height: 1; color: #017CC6;} #con24 .c24_box .inner > .r_01 p {font-size: 22px; font-weight: 600;} #con24 .c24_box .inner > .r_02 ul li {display: flex; margin-bottom: 20px;} #con24 .c24_box .inner > .r_02 ul li span {font-size: 18px; line-height: 1; font-weight: 500; width: 100px; margin-right: 25px; border-right: 1px solid #ddd;} #con24 .c24_box .inner > .r_02 ul li p {font-size: 18px; line-height: 1;} #con24 .c24_box .inner > .r_02 ul li p b {color: #017CC6;} #con24 .c24_box .inner > .r_02 > p {font-size: 18px; line-height: 30px; color: #555; margin-top: 25px;} #con24 .c24_box .inner > .r_02 .map_box {width: 100%; border: 1px solid #dedede; border-radius: 20px; overflow: hidden;} #daumRoughmapContainer1740771312844 {width: 100%; height: 280px;} .root_daum_roughmap .wrap_map {height: 280px !important;} .root_daum_roughmap .map_border {display: none;} #con24 .c24_box .inner .footer p {font-size: 16px; line-height: 26px; color: #555;} /* === Sub === */ #sub_visual {width: 100%; height: 500px; background: url(../images/sub_visual.jpg) no-repeat center center / cover; padding: 200px 0;} #sub_visual .title p {font-size: 26px; line-height: 1; margin-bottom: 30px; color: #fff;} #sub_visual .title h2 {font-size: 70px; line-height: 1; color: #fff; font-weight: bold;} #sub_visual.bg02 {background: url(../images/sub_visual_02.jpg) no-repeat center center / cover;} /* 로그인 */ #login_wrap {width: 100%; margin: 120px 0 200px;} #login_wrap .l_tit {text-align: center; margin-bottom: 60px;} #login_wrap .l_tit h3 {font-size: 50px; font-weight: 300; line-height: 1;} #login_wrap .l_tit h3 b {font-weight: bold;} #login_wrap .l_tit p {font-size: 22px; margin-top: 20px;} #login_wrap .login_box {width: 600px; background: #f7f7f7; border-radius: 20px; margin: 0 auto; padding: 50px 30px 60px;} #login_wrap .login_box input {width: 100%; height: 50px; border: 1px solid #ddd; padding-left: 20px; font-size: 16px; color: #000; margin-bottom: 5px;} #login_wrap .login_box input:last-of-type {margin-bottom: 20px;} #login_wrap .login_box input::placeholder {color: #888;} #login_wrap .login_box .login_btn {display:block; width: 100%; height: 50px; background: #017CC6; border-radius: 8px; color: #fff;} #login_wrap .login_box .findpw {font-size: 16px; text-align: left; margin-top: 15px;} #login_wrap .login_box .findpw a {color: #000;} #login_wrap .login_box .j_btn {font-size: 16px; display: block; margin-top: 15px; font-weight: 500; float: right;} #login_wrap .login_box .j_btn a {color: #017CC6;} #login_wrap .join_box {width: 800px; background: #f7f7f7; border-radius: 20px; margin: 0 auto; padding: 50px 30px 60px;} #login_wrap .join_box .join li {margin-bottom: 25px;} #login_wrap .join_box .join li p {font-size: 16px; font-weight: 500; margin-bottom: 5px;} #login_wrap .join_box .join li p b {color: #017CC6;} #login_wrap .join_box .join li > input {width: 100%; height: 50px; border: 1px solid #ddd; padding-left: 20px; font-size: 16px; color: #000; margin-bottom: 5px;} #login_wrap .join_box .join li > input::placeholder {color: 888;} #login_wrap .join_box .join li .pw_span {font-size: 14px; line-height: 1; color: #666;} #login_wrap .join_box .join li.agree .tit {display: flex; margin-bottom: 5px; align-items: center;} #login_wrap .join_box .join li.agree .tit input {display: block; margin-right: 8px; margin-top: -4px;} #login_wrap .join_box .join li.agree textarea {width: 100%; height: 150px; border: 1px solid #ddd; padding: 15px; font-size: 14px; line-height: 24px;} #login_wrap .join_box .join_btn {display:block; width: 300px; height: 50px; background: #017CC6; border-radius: 8px; color: #fff; font-size: bold; margin: 0 auto; margin-top: 40px;} #login_wrap .join_box .mypage li {border-bottom: 1px solid #ddd; padding-bottom: 20px;} #login_wrap .join_box .mypage li:nth-of-type(2) {border-bottom: 0; padding-bottom: 0;} #login_wrap .join_box .mypage li:last-child {margin-bottom: 0;} #login_wrap .join_box .mypage li strong.my_data {font-size: 18px; font-family: 'Pretendard'; font-weight: 500;} #login_wrap .join_box .withdrawal {font-size: 14px; display: block; font-weight: 500; float: right; color: #888; margin-top: 15px;} #login_wrap .join_box .edit_btn {display:block; width: 300px; height: 50px; background: #017CC6; border-radius: 8px; color: #fff; font-size: bold; margin: 0 auto; margin-top: 60px;} .admin_member_list .admin_tbl {width: 100%; border-top: 2px solid #017CC6;} .admin_member_list .admin_tbl th {background: #eaeff6; font-size: 16px; padding: 12px 0;} .admin_member_list .admin_tbl td {text-align: center; font-size: 16px; padding: 12px 0; border-bottom: 1px solid #ddd;} .admin_member_list .admin_tbl td .admin_wd {font-size: 14px; width: 100px; height: 34px; text-align: center; background: #333; color: #fff; font-weight: 500; border-radius: 8px;}