@charset "utf-8";
/* 프로젝트 : 오티아이 홈페이지 리뉴얼
    파일명 : style.css
    설명 : 메인 및 서브 css
    작성자 : 허규리
    작성일 : 2022.03.11
    버전 : 0.1
*/
  
/* 초기화 */
@font-face {
    font-family: 'Handletter';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Handletter.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 100;
    src: local('Apple SD Gothic Neo Thin'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/100_AppleSDGothicNeo-Thin.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/100_AppleSDGothicNeo-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 200;
    src: local('Apple SD Gothic Neo UltraLight'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/200_AppleSDGothicNeo-UltraLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/200_AppleSDGothicNeo-UltraLight.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 300;
    src: local('Apple SD Gothic Neo Light'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/300_AppleSDGothicNeo-Light.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/300_AppleSDGothicNeo-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 400;
    src: local('Apple SD Gothic Neo Medium'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/400_AppleSDGothicNeo-Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/400_AppleSDGothicNeo-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 500;
    src: local('Apple SD Gothic Neo Regular'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/500_AppleSDGothicNeo-Regular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/500_AppleSDGothicNeo-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 600;
    src: local('Apple SD Gothic Neo SemiBold'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/600_AppleSDGothicNeo-SemiBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/600_AppleSDGothicNeo-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 700;
    src: local('Apple SD Gothic Neo Bold'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/700_AppleSDGothicNeo-Bold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/700_AppleSDGothicNeo-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 800;
    src: local('Apple SD Gothic Neo ExtraBold'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/800_AppleSDGothicNeo-ExtraBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/800_AppleSDGothicNeo-ExtraBold.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 900;
    src: local('Apple SD Gothic Neo Heavy'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/900_AppleSDGothicNeo-Heavy.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/900_AppleSDGothicNeo-Heavy.otf') format('opentype');
}

/* 폰트어썸 아이콘 설정 */
.fa-face-smile, .fa-gear, .fa-arrow-right-to-bracket {font-size: 25px; color: #666;}
.fa-face-smile:hover {color: #e6471f;}
.fa-gear:hover {color: #e6471f;}
.fa-arrow-right-to-bracket:hover {color: #e6471f;}
.fa-bars {color: #fff;}

* {
    -webkit-text-size-adjust: none;
}

html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    color: #111;
    letter-spacing: -0.04em;
}

html, body {
    height: 100vh;
    font-size: 14px;
    font-family:"애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    margin:0 auto;
    padding: 0;
}

/* 크롬 이미지 흐림 이슈 설정 */
/* 1번 이미지 렌더링 방식 수정 2번 z축을 0으로 적용, 깊이감을 삭제 3번 뒷면을 보이지 않게 함으로써 입체감 삭제 */
img {image-rendering: -webkit-optimiz-contrast; transform: translateZ(0); backface-visibility: hidden;}

/*caption,summary,legend{visibility:hidden;font-size:0;line-height:0;width:0;height:0;overflow:hidden;}*/
caption, summary, legend {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 0px;
    height: 0px;
    text-indent: -9999px;
}

a, a:link, a:visited, a:active {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    border: none;
    line-height: 0;
    vertical-align: middle;
}


ul, ol {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
}

table { /*border-collapse:collapse;*/
    border-spacing: -0.04em;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

div, p, span, li, dt, dd, a, strong, em, td, th, label, input, select {
    font-size: 18px;
    font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    letter-spacing: 0.04em;
}

input {
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #dddddd;
    color: #111;
    background-color: #fff;
    font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    letter-spacing: -0.04em;
}

    input[type="checkbox"], input[type="radio"] {
        border: none;
        padding: 0px;
    }

select {
    color: #111;
    height: 31px;
    border: 1px solid #dddddd;
    margin: 0;
    padding: 4px;
    background-color: #fff;
}

input:read-only {
    border-color: #fff;
    background: #fafafa;
}

input[readonly="readonly"] {
    border-color: #fff;
    background: #fafafa;
}

input[readonly] {
    border-color: #fff;
    background: #fafafa;
}

input:disabled {
    border-color: #cccccc;
    color: #666;
}

input[disabled="disabled"] {
    border-color: #cccccc;
    color: #666;
}

input[disabled] {
    border-color: #cccccc;
    color: rgb(150, 144, 144);
}

input:-ms-input-placeholder {
    color: #d1d5d8;
}

input::-webkit-input-placeholder {
    color: #d1d5d8;
}

textarea:-ms-input-placeholder {
    color: #d1d5d8;
}

textarea::-webkit-input-placeholder {
    color: #d1d5d8;
}


.hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 0px;
    height: 0px;
    text-indent: -9999px;
}

/* 마진 및 패딩 정의 */
.mt0 {margin-top:0px !important}	.mr0 {margin-right:0px !important;}		.mb0 {margin-bottom:0px !important;}		.ml0 {margin-left:0px !important;}
.mt5 {margin-top:5px !important}	.mr5 {margin-right:5px !important;}		.mb5 {margin-bottom:5px !important;}		.ml5 {margin-left:5px !important;}
.mt10 {margin-top:10px !important}	.mr10 {margin-right:10px !important;}	.mb10 {margin-bottom:10px !important;}		.ml10 {margin-left:10px !important;}
.mt15 {margin-top:15px !important}	.mr15 {margin-right:15px !important;}	.mb15 {margin-bottom:15px !important;}		.ml15 {margin-left:15px !important;}
.mt20 {margin-top:20px !important}	.mr20 {margin-right:20px !important;}	.mb20 {margin-bottom:20px !important;}		.ml20 {margin-left:20px !important;}
.mt25 {margin-top:25px !important}	.mr25 {margin-right:25px !important;}	.mb25 {margin-bottom:25px !important;}		.ml25 {margin-left:25px !important;}
.mt30 {margin-top:30px !important}	.mr30 {margin-right:30px !important;}	.mb30 {margin-bottom:30px !important;}		.ml30 {margin-left:30px !important;}
.mt35 {margin-top:35px !important}	.mr35 {margin-right:35px !important;}	.mb35 {margin-bottom:35px !important;}		.ml35 {margin-left:35px !important;}
.mt40 {margin-top:40px !important}	.mr40 {margin-right:40px !important;}	.mb40 {margin-bottom:40px !important;}		.ml40 {margin-left:40px !important;}
.mt45 {margin-top:45px !important}	.mr45 {margin-right:45px !important;}	.mb45 {margin-bottom:45px !important;}		.ml45 {margin-left:45px !important;}
.mt50 {margin-top:50px !important}	.mr50 {margin-right:50px !important;}	.mb50 {margin-bottom:50px !important;}		.ml50 {margin-left:50px !important;}
.mt55 {margin-top:55px !important}	.mr55 {margin-right:55px !important;}	.mb55 {margin-bottom:55px !important;}		.ml55 {margin-left:55px !important;}
.mt60 {margin-top:60px !important}	.mr60 {margin-right:60px !important;}	.mb60 {margin-bottom:60px !important;}		.ml60 {margin-left:60px !important;}
.mt65 {margin-top:65px !important}	.mr65 {margin-right:65px !important;}	.mb65 {margin-bottom:65px !important;}		.ml65 {margin-left:65px !important;}
.mt70 {margin-top:70px !important}	.mr70 {margin-right:70px !important;}	.mb70 {margin-bottom:70px !important;}		.ml70 {margin-left:70px !important;}
.mt75 {margin-top:75px !important}	.mr75 {margin-right:75px !important;}	.mb75 {margin-bottom:75px !important;}		.ml75 {margin-left:75px !important;}
.mt80 {margin-top:80px !important}	.mr80 {margin-right:80px !important;}	.mb80 {margin-bottom:80px !important;}		.ml80 {margin-left:80px !important;}
.mt85 {margin-top:85px !important}	.mr85 {margin-right:85px !important;}	.mb85 {margin-bottom:85px !important;}		.ml85 {margin-left:85px !important;}
.mt90 {margin-top:90px !important}	.mr90 {margin-right:90px !important;}	.mb90 {margin-bottom:90px !important;}		.ml90 {margin-left:90px !important;}
.mt95 {margin-top:95px !important}	.mr95 {margin-right:95px !important;}	.mb95 {margin-bottom:95px !important;}		.ml95 {margin-left:95px !important;}
.mt100 {margin-top:100px !important}	.mr100 {margin-right:100px !important;}	.mb100 {margin-bottom:100px !important;}	.ml100 {margin-left:100px !important;}

.Pt0 {padding-top:0px !important;}		.pr0 {padding-right:0px !important;}	.pb0 {padding-bottom:0px !important;} 		.pl0 {padding-left:0px !important;}
.Pt5 {padding-top:5px !important;}		.pr5 {padding-right:5px !important;}	.pb5 {padding-bottom:5px !important;} 		.pl5 {padding-left:5px !important;}
.Pt10 {padding-top:10px !important;}	.pr10 {padding-right:10px !important;}	.pb10 {padding-bottom:10px !important;} 		.pl10 {padding-left:10px !important;}
.Pt15 {padding-top:15px !important;}	.pr15 {padding-right:15px !important;}	.pb15 {padding-bottom:15px !important;} 		.pl15 {padding-left:15px !important;}
.Pt20 {padding-top:20px !important;}	.pr20 {padding-right:20px !important;}	.pb20 {padding-bottom:20px !important;} 		.pl20 {padding-left:20px !important;}
.Pt25 {padding-top:25px !important;}	.pr25 {padding-right:25px !important;}	.pb25 {padding-bottom:25px !important;} 		.pl25 {padding-left:25px !important;}
.Pt30 {padding-top:30px !important;}	.pr30 {padding-right:30px !important;}	.pb30 {padding-bottom:30px !important;} 		.pl30 {padding-left:30px !important;}
.Pt35 {padding-top:35px !important;}	.pr35 {padding-right:35px !important;}	.pb35 {padding-bottom:35px !important;} 		.pl35 {padding-left:35px !important;}
.Pt40 {padding-top:40px !important;}	.pr40 {padding-right:40px !important;}	.pb40 {padding-bottom:40px !important;} 		.pl40 {padding-left:40px !important;}
.Pt45 {padding-top:45px !important;}	.pr45 {padding-right:45px !important;}	.pb45 {padding-bottom:45px !important;} 		.pl45 {padding-left:45px !important;}
.Pt50 {padding-top:50px !important;}	.pr50 {padding-right:50px !important;}	.pb50 {padding-bottom:50px !important;} 		.pl50 {padding-left:50px !important;}
.Pt55 {padding-top:55px !important;}	.pr55 {padding-right:55px !important;}	.pb55 {padding-bottom:55px !important;} 		.pl55 {padding-left:55px !important;}
.Pt60 {padding-top:60px !important;}	.pr60 {padding-right:60px !important;}	.pb60 {padding-bottom:60px !important;} 		.pl60 {padding-left:60px !important;}
.Pt65 {padding-top:65px !important;}	.pr65 {padding-right:65px !important;}	.pb65 {padding-bottom:65px !important;} 		.pl65 {padding-left:65px !important;}
.Pt70 {padding-top:70px !important;}	.pr70 {padding-right:70px !important;}	.pb70 {padding-bottom:70px !important;} 		.pl70 {padding-left:70px !important;}
.Pt75 {padding-top:75px !important;}	.pr75 {padding-right:75px !important;}	.pb75 {padding-bottom:75px !important;} 		.pl75 {padding-left:75px !important;}
.Pt80 {padding-top:80px !important;}	.pr80 {padding-right:80px !important;}	.pb80 {padding-bottom:80px !important;} 		.pl80 {padding-left:80px !important;}
.Pt85 {padding-top:85px !important;}	.pr85 {padding-right:85px !important;}	.pb85 {padding-bottom:85px !important;} 		.pl85 {padding-left:85px !important;}
.Pt90 {padding-top:90px !important;}	.pr90 {padding-right:90px !important;}	.pb90 {padding-bottom:90px !important;} 		.pl90 {padding-left:90px !important;}
.Pt95 {padding-top:95px !important;}	.pr95 {padding-right:95px !important;}	.pb95 {padding-bottom:95px !important;} 		.pl95 {padding-left:95px !important;}
.Pt100 {padding-top:100px !important;}	.pr100 {padding-right:100px !important;}	.pb100 {padding-bottom:100px !important;} 		.pl100 {padding-left:100px !important;}

/* 메인 스타일 */
.body_wrap {margin: 0 auto; box-sizing: border-box; display: flex; flex-flow: column;}  /* width: calc(100% - (2 * var(--offset))); max-width: var(--max_width);  */
.body-container {height: 100%; position: relative;}
.header_wrap {width:100%; display:block; text-align: center; background-color: #fff; position: fixed; top: 0; z-index: 99; border-bottom: 1px solid #ccc;} 
.main_container {overflow: hidden;}
/* 헤더  > 네비게이션바 시작 */
.navigationBar_wrap {position: relative; width: 162px; display: none;}
.navigationBar_wrap ul {display: flex; align-items: center; justify-content: space-between;}
.navigationBar_wrap ul li a {color: #111;}
/* 헤더 시작 */
.header_area {margin: 0 auto; display: flex; justify-content: space-between; align-items: center; align-content: space-around; flex-wrap: nowrap; flex-direction: row;}
.logoWreap {width:160px; height:51px; display: block; margin:0 auto; position:relative;}
.header_logo {display: block; width:159px; height:51px; margin:0 auto; background-image: url(../images/header_logo.png); background-size: contain; background-repeat: no-repeat; background-position: center; position:relative;}
.header_area > .menu_wrap {margin: 0 auto; width: 55%;}
.header_area > .menu_wrap ul {display: flex; justify-content: space-between; align-items: center;}
.header_area > .menu_wrap ul li a span {font-size: 20px; font-weight: 300;}
.menu_box {width: 100%;}
/* 수정 start */
/* .contents_container {margin-top: 76px;} */
.contents_container {margin-top: 90px;}
/* 수정 end */
#popular {display: none;}
/* MENU */
/* GNB */
#gnb {display: block;width: 1022px; margin: 0 auto; background: #fff;clear: both; overflow: hidden; position: relative;height: auto; line-height: 80px;}
#gnb.on #gnb_wrap {background: #fff;}
#gnb_wrap {width: 792px; margin: 0 auto;position: relative;}
#gnb_wrap {display: flex; justify-content: space-between; text-align: center;}
#gnb_wrap li {background-color: #fff;}
#gnb_wrap > li > a {color: #2c2c2c;display:block;width: 100%;text-align:center;font-size: 20px;font-weight: 700;margin-bottom: 15px; cursor: default;}
#gnb_wrap > li.on a {color: #2058d1; text-decoration: none;}
#gnb_wrap > li ul li a {color: #000;font-size: 18px;background: #fff;line-height: 40px;}
/* #gnb_wrap > li ul li a:hover, #gnb_wrap > li ul li a:active {text-decoration: underline;} */
#gnb_wrap > li ul li a:hover, #gnb_wrap > li ul li a:active {font-weight: bolder;}
#gnb_wrap > li.on ul li a {background: #fff;color: #000;}
#gnb_wrap li ul {position:absolute; background:#fff;}
#gnb_wrap li.on ul {top:auto;}

/*2뎁스*/
.sub_wrap {background: #fff;}
.gnbSub {position: inherit!important;width: 100%;display: block;z-index: 1;overflow: hidden; margin-top: 18px;}
.gnbSub {float: left;width: 198px;}
.gnbSub li {width: 100%;line-height: 1;}
.gnbSub li a {padding: 3px 0;display: block;text-align: center;color: #000;font-size: 18px;}
/* sitemap */
.sitemap_box {display:none; position: relative; right: 0; top: 0; background-color: #e6471f; border-radius: 8px; width: 40px; height: 44px;}
.site_map {position: absolute; top: -6px; right: 0; max-width: 0; transition: 0.5s ease; z-index: 1; background-color: #ccc; border-radius: 8px;}
.site_map ul {display: none; width: 350px;}
.site_map ul li a span {font-size: 14px;}
.burger-icon {cursor: pointer; display: inline-block; position: relative; z-index: 2; top: 8px; right: 0; user-select: none; width: auto;}
.burger-icon .burger-sticks {background: #fff; display: block; height: 2px; position: relative; transition: 0.2s ease-out; width: 24px;}
.burger-icon .burger-sticks::before, .burger-icon .burger-sticks::after {background: #fff; content: ''; display: block; height: 100%; position: relative; transition: all .2s ease-out; width: 100%;}
.burger-icon .burger-sticks::before {top: -10px;}
.burger-icon .burger-sticks::after {top: 10px;}
.burger-check {display: none;}
.burger-check:checked~.site_map {max-width: 350px;}
.burger-check:checked~.burger-icon .burger-sticks {background: transparent;}
.burger-check:checked~.burger-icon .burger-sticks:before {transform: rotate(45deg); top: 2px!important;}
.burger-check:checked~.burger-icon .burger-sticks:after {transform: rotate(-45deg);}
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before, .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after {top: 0;}

/* 메인 컨텐츠 속성 정의 */
.contents_container > div {display: flex; flex-direction: column; justify-content: space-between; text-align: center;}
.contents_A_wrap {position: relative;  width: 1440px; height: 350px; margin-top: 80px; margin: 0 auto;}
.contents_B_wrap {position: relative; width: 1440px; height: auto; margin-top: 80px; margin: 0 auto;}
.contents_C_wrap {position: relative; width: 1440px; flex-flow: row!important; height: auto; background-position: right; margin-top: 40px; margin: 0 auto;}
.contents_D_wrap {position: relative; width: 1440px; height: auto; padding-top: 80px; margin: 0 auto;}
.contents_E_wrap {height: auto; margin-top: 80px; width: 100%; background-color: #e6471f;}
.contents_F_wrap {position: relative; width: 1440px; height: auto; padding-top: 0px; margin: 0 auto;}
.contents_A_wrap_custom {position: relative; width: 1440px; height: 100vh; margin: 0 auto; justify-content: space-evenly !important;}
.contents_B_wrap_custom {position: relative; width: 1440px; height: 100vh; margin: 0 auto; justify-content: space-evenly !important; display: block !important; padding-top: 4em;}
.contents_C_wrap_custom {position: relative; width: 1440px; height: 100vh; margin: 0 auto; justify-content: center !important; align-items: center; display: block !important; padding-top: 4em;}
.contents_D_wrap_custom {position: relative; width: 1440px; height: 100vh; margin: 0 auto; display: block !important; padding-top: 4em;}

/* header main bg */
.m_banner_img {background: url(../images/header_bg.png)no-repeat; background-position: right 0%; width: 400px; height: 350px; display: block; position: absolute; top: 20%; right: 30%; z-index: -1; background-size: 100%; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; -webkit-animation: bgChange 10s ease-in-out infinite;}
.m_banner_text_box {position: absolute; top: 100px; left: 0;}
.m_banner_text_box > h1 {font-weight:900; margin: 0; font-size: 80px; background: linear-gradient(-180deg, #e6471f 0%, #0731d7c2 100%); color: transparent; -webkit-background-clip: text; -webkit-animation: hue 10s infinite linear; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic NeoEB", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 300; letter-spacing: -2px; line-height: 1em; text-align: left;}

/* 메인 컨텐츠 1 start */
/* .contents_A_wrap_custom .main_text {padding-left: 55px;} */
.main_bg {background: url(../images/main_bg.jpg)no-repeat; background-size: cover; background-position-x: 58%; width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; opacity: 0.6;}
/* .contents_A_wrap_custom .main_text {height: 65%;} */
.contents_A_wrap_custom .main_text > h2 {font-weight: 700; font-size: 5.268em; /* color: #16419E; */ word-break: keep-all; overflow-wrap: break-word;}
.contents_A_wrap_custom .main_text > h5 {font-size: 30px; /* color: #16419E; */ margin-top: 35px; word-break: keep-all; overflow-wrap: break-word; text-align: left;}
/* 공공정보화 사업 슬라이드 */
.contents_A_wrap_custom .swiper-container .swiper-wrapper {transition-timing-function: linear !important;}
.swiper-slide .publicWork_ico_01 {height: 150px; background: url(../images/publicWork_ico_01_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_02 {height: 150px; background: url(../images/publicWork_ico_02_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_03 {height: 150px; background: url(../images/publicWork_ico_03_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_04 {height: 150px; background: url(../images/publicWork_ico_04_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_05 {height: 150px; background: url(../images/publicWork_ico_05_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_06 {height: 150px; background: url(../images/publicWork_ico_06_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_07 {height: 150px; background: url(../images/publicWork_ico_07_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_08 {height: 150px; background: url(../images/publicWork_ico_08_r.png)no-repeat; background-position: center; background-size: contain;}
.swiper-slide .publicWork_ico_09 {height: 150px; background: url(../images/publicWork_ico_09_r.png)no-repeat; background-position: center; background-size: contain;}
/* 메인 컨텐츠 1 end */

/* 메인 컨텐츠 2~4 공통 start */
.scroll_wrap .title_wrap .title_blist {background: url(../images/title_blist.png)no-repeat; width: 55px; height: 4px; display: inline-block; margin-bottom: 10px;}
.scroll_wrap .title_wrap h2 {font-size: 34px; margin: 0; padding: 0; word-break: keep-all; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}
.scroll_wrap .title_wrap h3 {font-size: 18px; margin: 0; padding: 0; word-break: keep-all; margin-top: 15px; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}
/* 메인 컨텐츠 2~4 공통 end */

/* 메인 컨텐츠 2 start */
/* 메인 바로가기 아이콘 -- 삭제 */
.contents_B_wrap_custom ul.m_icon {width: 100%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-around; align-items: center;}
.contents_B_wrap_custom ul span.m_icon_01 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_01.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap_custom ul span.m_icon_02 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_02.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap_custom ul span.m_icon_03 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_03.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap_custom ul span.m_icon_04 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_04.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap_custom ul span.m_icon_05 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_05.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap_custom ul span.m_icon_06 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_06.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap_custom ul li{  display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin-top: 40px;}
.contents_B_wrap_custom ul li:hover {  -webkit-transform: translateY(8px);
    transform: translateY(8px);}
.contents_B_wrap_custom ul p {font-size: 1.5em; font-weight: 400; text-align: center;}

.contents_B_wrap_custom .bussiness_slide_container {display: flex; justify-content: space-between; margin-top: 4em;}
.contents_B_wrap_custom .bussiness_slide_01 {width: 362px; height: 280px; background: url(../images/contentC_bg.png)no-repeat; background-size: cover;}
.contents_B_wrap_custom .bussiness_slide_02 {width: 362px; height: 280px; background: url(../images/contentC_bg_02.png)no-repeat; background-size: cover; margin-left: 15px;}
.contents_B_wrap_custom .bussiness_slide_03 {width: 362px; height: 280px; background: url(../images/contentC_bg_03.png)no-repeat; background-size: cover; margin-left: 15px;}
.contents_B_wrap_custom .bussiness_slide {border-radius: 10%; padding: 30px; align-content: center; text-align: center; transition: all 0.5s ease-in-out}
.contents_B_wrap_custom .bussiness_slide h2 {font-size: 34px; color: #fff; margin: 0; padding: 0; transition: display 0.5s ease-in-out;}
.contents_B_wrap_custom .bussiness_slide .content_list {display: flex; flex-direction: row; justify-content: flex-start; margin-top: 10px; display: none; transition: display 0.5s ease-in-out;}
.contents_B_wrap_custom .bussiness_slide .content_list ul {width: 100%; text-align: left;}
.contents_B_wrap_custom .bussiness_slide .content_list ul li {color: #fff; line-height: 32px; font-size: 18px; margin: 0; padding: 0; word-break: keep-all;}
.contents_B_wrap_custom .bussiness_slide .content_list .list_right {padding-left: 40px;}
.contents_B_wrap_custom .bussiness_slide::before {filter: brightness(80%);}
.contents_B_wrap_custom .bussiness_slide:hover {background-position: right;}
.contents_B_wrap_custom .bussiness_slide:hover h2 {display: none;}
.contents_B_wrap_custom .bussiness_slide:hover .content_list {display: block; opacity: 1;}
/* 메인 컨텐츠 2 end */

/* 메인 컨텐츠 3 start */
/* .contents_C_wrap_custom .content_box {display: flex; justify-content: center; margin-top: 4em;}
.contents_C_wrap_custom .venn-diagram {position: relative; width: 440px; height: 420px;}
.contents_C_wrap_custom .circle {position: absolute; width: 240px; height: 240px; border-radius: 50%; text-align: center; line-height: 240px; font-weight: bold; border: 2px solid white; font-size: 18px;}
.contents_C_wrap_custom #circle1 {background-color: rgba(168, 216, 234, 0.3); left: 100px;}
.contents_C_wrap_custom #circle2 {background-color: rgba(246, 170, 28, 0.3); left: 10px; top: 150px;}
.contents_C_wrap_custom #circle3 {background-color: rgba(179, 226, 131, 0.3); left: 190px; top: 150px;} */
.contents_C_wrap_custom .shape_of_form {background-size: contain!important; background: url(../images/shape_of_form.png) no-repeat; background-position: center; height: 65%;}
.shape_of_form-m{background-size: contain!important; background: url(../images/shape_of_form-m.png) no-repeat; background-position: center; display: none;}
/* 메인 컨텐츠 3 end */

/* 메인 컨텐츠 4 start */

/* 메인 컨텐츠 4 end */

/* 메인 바로가기 아이콘 */
.contents_B_wrap ul.m_icon {width: 100%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.contents_B_wrap ul span.m_icon_01 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_01.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap ul span.m_icon_02 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_02.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap ul span.m_icon_03 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_03.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap ul span.m_icon_04 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_04.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap ul span.m_icon_05 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_05.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap ul span.m_icon_06 {margin:0 auto; cursor: pointer; display: block; width: 90px; height: 90px; background: url(../images/m_icon_06.png)no-repeat; background-size: cover; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden;}
.contents_B_wrap ul li{  display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin-top: 40px;}
.contents_B_wrap ul li:hover {  -webkit-transform: translateY(8px);
    transform: translateY(8px);}
.contents_B_wrap ul p {font-size: 1.5em; font-weight: 400; text-align: center;}

#name span {
    display: inline-block;
    vertical-align: baseline;
    transition: all .4s;
    opacity: 0;  
  }
  
  #name.on span {
    opacity: 1;
  }
.knowhowMark {display: contents; background: url(../images/icon_mark.png)no-repeat; width: 9px; height: 12px;}
/* wave text */
.point_txt {display: inline-block; font-size: 25px;}
.intro_txt_box {padding-top: 0px; width: 1440px; display:flex; flex-direction: row!important; align-items: center; justify-content: space-between; margin: 0 auto;}
.intro_A {margin-right: 15px; width: 49%; text-align: center; margin: 0; padding: 0;} /* background:rgba(224, 132, 132, 0.5); */
.wave_box {position: relative; width: 100%; height: 100px; top: 62px;}
.wave_1 {font-size: 10em;  font-weight: 900; position: absolute; transform: translate(54%,-80%); vertical-align: top; color: #c1d1d5; -webkit-text-stroke: #c1d1d5;}
.wave_2 {font-size: 10em;  font-weight: 900; position: absolute; transform: translate(54%,-80%); vertical-align: top; color: rgb(195 63 63 / 66%); animation: animate 4s ease-in-out infinite;}
.intro_txt {font-size: 25px; font-weight: 400;}
.intro_B { width: 49%; padding: 0px; font-size: 18px; font-weight:300; text-align: justify;} /* background:rgba(224, 132, 132, 0.5); */

/*  사업분야 컨텐츠  */
.contents_C_wrap {width: 1440px; margin-top: 80px;}
.contents_C_wrap .bussiness_slide_01 {width: 417px; height: 363px; background: url(../images/contentC_bg.png)no-repeat; background-size: cover; background-position: right;}
.contents_C_wrap .bussiness_slide_02 {width: 417px; height: 363px; background: url(../images/contentC_bg_02.png)no-repeat; background-size: cover; background-position: right; margin-left: 15px;}
.contents_C_wrap .bussiness_slide_03 {width: 417px; height: 363px; background: url(../images/contentC_bg_03.png)no-repeat; background-size: cover; background-position: right; margin-left: 15px;}
.contents_C_wrap .bussiness_slide {padding: 30px;}
.contents_C_wrap .bussiness_slide h2 {font-size: 34px; color: #fff; margin: 0; padding: 0;}
.contents_C_wrap .bussiness_slide h3 {font-size: 24px; color: #fff; margin: 0; padding: 0; margin-top: 15px; font-weight: 300;}
.contents_C_wrap .bussiness_slide .content_list {display: flex; flex-direction: row; justify-content: flex-start; margin-top: 10px;}
.contents_C_wrap .bussiness_slide .content_list ul {width: 100%;}
.contents_C_wrap .bussiness_slide .content_list ul li {color: #fff; line-height: 32px; font-size: 18px; margin: 0; padding: 0; word-break: keep-all;}
.contents_C_wrap .bussiness_slide .content_list .list_right {padding-left: 40px;}
.m_banner_text_box > h4 {font-size: 1.7em; color: #333; font-weight: 300; margin: 0; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}
.text_red {line-height:39px; color: #e6471f; font-size: 1em; font-weight: 700; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}
.text_blue {line-height:39px; color: #e6471f; font-size: 1em; font-weight: 700; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}

/* 공공정보화 사업 슬라이드 */

.title_wrap .title_blist {background: url(../images/title_blist.png)no-repeat; width: 55px; height: 4px; display: block; margin-bottom: 10px;}
.title_wrap h2 {font-size: 34px; margin: 0; padding: 0; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}
.title_wrap h3 {font-size: 18px; margin: 0; padding: 0; margin-top: 15px; font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;}
.contents_D_wrap .slide_auto {display: flex;}
.contents_D_wrap .slide_auto > div {width: 100%; margin-top: 40px; padding: 0;}
.slide_auto .publicWork_ico {height: 424px; background: url(../images/publicWork_ico.png)no-repeat; background-position: top; background-size: cover;}
.slide_auto .publicWork_ico_01 {height: 188px; background: url(../images/publicWork_ico_01.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_02 {height: 188px; background: url(../images/publicWork_ico_02.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_03 {height: 188px; background: url(../images/publicWork_ico_03.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_04 {height: 188px; background: url(../images/publicWork_ico_04.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_05 {height: 188px; background: url(../images/publicWork_ico_05.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_06 {height: 188px; background: url(../images/publicWork_ico_06.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_07 {height: 188px; background: url(../images/publicWork_ico_07.png)no-repeat; background-position: center; background-size: contain;}
.slide_auto .publicWork_ico_08 {height: 188px; background: url(../images/publicWork_ico_08.png)no-repeat; background-position: center; background-size: contain;}

/* 솔루션 배너 */
.solution_banner_bg {width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 30px;}
.soution_txt {width: 40%; font-size: 34px; color: #fff; font-weight: 600; word-break: keep-all;}
.solution_banner {width: 45%; display: flex; justify-content: space-between; align-items: center;}
.solution_banner > span.solutionA, .solution_banner > span.solutionB, .solution_banner > span.solutionC {display: inline-block; max-width: 128px; height: 152px; padding: 40px 15px; background-color: #fff; text-align: center; vertical-align: middle; border-radius: 6px; margin-top: 20px;}
.solution_banner > span > span { font-size: 20px; word-break: keep-all; line-height: 24px; font-weight: 700;}
/* 인재채용 배너 */
.employment_banner {display: flex; justify-content:space-around; align-items: center; text-align: center; margin-top: 40px; flex-wrap: wrap;}
.employment_banner > div {width:304px;}
.employment_banner  h2 {margin: 5px 0; padding: 0;}
.employment_banner .employmentA {background: url(../images/employ_icon01.png)no-repeat; width: 52px; height: 52px; display: block; background-size: contain; text-align: center; margin: 0 auto;}
.employment_banner .employmentB {background: url(../images/employ_icon02.png)no-repeat; width: 52px; height: 52px; display: block; background-size: contain; text-align: center; margin: 0 auto;}
.employment_banner .employmentC {background: url(../images/employ_icon03.png)no-repeat; width: 52px; height: 52px; display: block; background-size: contain; text-align: center; margin: 0 auto;}

/* 푸터 시작 */
.footer_wrap {margin: 80px auto 0px; padding-bottom: 80px; width: 1440px;}
.footer_wrap ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; padding: 10px 0; background-color: #666; align-items: center;}
.footer_wrap ul li {font-size: 14px;}
.footer_wrap ul li a {color: #fff; font-size: 14px;}
.footer_wrap p {padding: 20px; font-size: 14px; text-align: center; color: #fff; word-break: keep-all;}
.footer_wrap span {font-size: 14px;}
.footer_wrap .gw {font-size: 18px;}

#visit {background-color: #444; padding: 20px;}
#bo_list, #bo_v {position: static; padding-top: 100px; margin: 0 auto; width: 1440px!important; height: 100%; display: table;}
.ft_cnt {display: none;}
/* 그리드시스템 오버레이 시작 */	
/* 기본값 설정 */
:root {
    --offset: 64px; /*양쪽마진*/
    --max_width: 1040px; /*컨테이너폭*/
    --columns: 12; /*컬럼갯수*/
    --gutter: 16px; /*거터폭*/
    --baseline: 8px;
    --baseline-shift: 32px;
    --color: hsla(204, 80%, 72%, 0.25);
    }
    
    /* 모바일 적색 4그리드 360에 최적화, 컨테이너 320 */
    @media (max-width: 767px) {
    :root {
    --offset: 20px;
    --columns: 4;
    --color: hsla(0, 51%, 44%, 0.25);
    }
    }
    
    /* 태블릿 가로,세로 하늘색 8그리드, 640최적화 */
    @media all and (min-width: 768px) and (max-width: 1023px) {
    :root {
    --offset: 64px;
    --columns: 8;
    --color: hsla(204, 80%, 72%, 0.25);
    }
    }
    
    /* PC 보라색 12그리드 1024이상, 1152 최적화 */
    @media (min-width: 1024px) {
    :root {
    --offset: 64px;
    --columns: 12;
    --color: hsla(286, 51%, 44%, 0.25);
    }
    }
    /* 변수 설정 */
    :root {
    --repeating-width: calc(100% / var(--columns));
    --column-width: calc((100% / var(--columns)) - var(--gutter));
    --background-width: calc(100% + var(--gutter));
    --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) );
    --background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) );
    }

    html::before {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        width: calc(100% - (2 * var(--offset)) - var(--gutter));
        max-width: calc(var(--max_width) - var(--gutter));
        height: 100vh;
        content: '';
        background-size: var(--background-width) 100%;
        background-position: 0 var(--baseline-shift);
        z-index: 1000;
        pointer-events: none;
    }
    /* 그리드시스템 오버레이 끝 background-image: var(--background-columns), var(--background-baseline); */
    
/* main top particle style */
    canvas{display: block; vertical-align: bottom; margin: 0 auto!important;}
    #particles-js{ position:absolute;
        background-color: #ccc;
        width: 1024px;
        height: 470px;
        background-color: rgba(256, 256, 256, 0);
        background-image: url('');
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        top: 3%;
        right: 23%;
      }



      @-webkit-keyframes hue {
        from {
            -webkit-filter: hue-rotate(0deg);
        }
        to {
            -webkit-filter: hue-rotate(-360deg);
        }
    }
    
    /* @-webkit-keyframes bgChange {
        25% {background-position: 25% 5%;}
        50% {background-position: 50% 15%;}
        100% {background-position: 100% 0%;}
    } */
    
    @-webkit-keyframes move {
        25% {background-position: 25%;}
        50% {background-position: 50%;}
        100% {background-position: 100%;}
    }
    
    @-webkit-keyframes animate {
        0% {
            clip-path: polygon(35% 51%, 63% 65%, 84% 52%, 100% 70%, 100% 100%, 0 100%, 0% 70%, 16% 78%);
        }
        20% {
            clip-path: polygon(35% 51%, 62% 35%, 84% 52%, 100% 43%, 100% 100%, 0 100%, 0 55%, 16% 38%);
        }
        50% {
            clip-path: polygon(37% 20%, 62% 35%, 82% 24%, 100% 37%, 100% 100%, 0 100%, 0 17%, 16% 38%);
        }
        80% {
            clip-path: polygon(37% 20%, 59% 7%, 82% 24%, 100% 8%, 100% 100%, 0 100%, 0 17%, 17% 5%);
        }
        100% {
            clip-path: polygon(38% 0, 61% 0, 85% 0, 100% 0, 100% 100%, 0 100%, 0 0, 18% 0);
        }
    }
/***********  디바이스 해상도에 따라 미디어쿼리 조정  ***********/
/* PC 데스크탑에서 사용될 시트를 여기에 작성합니다. */
@media only screen and (mim-width: 2000px) {
    html, body {width: 1152px;}
    .body-container {margin: 20px 60px;}	
    .contents_B_wrap {width: 100%; margin-top: 80px;}
    .contents_D_wrap .slide_auto {width: 100%;}
    .m_banner_text_box {top:200px;}
    .m_banner_img {background-position: right -95%; background-size: 80%;}	
    .header_area > .header_logo {width: 172px; height: 62px; background-size: 100%;}
    .m_banner_text_box > h1 {font-size: 8em; font-weight:900;}
    .intro_txt_box {margin-top: 160px;}
    #bo_list, #bo_v {position: static; padding-top: 100px; margin: 0 auto; width: 1440px!important; height: 100%; display: table;}
}

/* PC 데스크탑에서 사용될 시트를 여기에 작성합니다. */
@media only screen and (min-width: 1208px){
    html, body {width: 100%;}	
    .contents_B_wrap {width: 1152px; margin-top: 180px;}
    .contents_D_wrap .slide_auto {width: 100%;}
    .m_banner_text_box {top: 50px;}
    .m_banner_img {background-position: right 0%; background-size: 75%;}	
    .header_area {width: 1440px!important;}
    .header_area > .header_logo {width: 145px; height: 46px; background-size: 100%;}
    .m_banner_text_box > h1 {font-size: 10em; font-weight:900;}
    .intro_txt_box {margin-top: 160px;}
    #bo_list, #bo_v {position: static; padding-top: 100px; margin: 0 auto; width: 1440px!important; height: 100%; display: table;}
}		
                                   

@media only screen and (max-width: 1023px) {
    /* 태블릿에서 사용될 시트를 여기에 작성합니다. */
    html, body {width: 100%;}
    .body-container {margin: 20px 60px;}
    .contents_B_wrap {width: 100%;}
    .contents_D_wrap .slide_auto {width: 100%;}
    .m_banner_text_box {top: 150px;}
    .m_banner_img {background-position: right 0%; background-size: 80%;}
    .wave_1 {transform: translate(0%,-70%); width: 100%;}
    .wave_2 {position: absolute; transform: translate(0%,-70%); width: 100%;}
    .header_wrap {width: 100%;}
    .solution_banner_bg {width: 100%;}
}

@media  only screen and (max-width:767px){
    /* 모바일에 사용될 시트를 여기에 작성합니다. */
    html,body {width: 100%; overflow-x: hidden;}
    div, p, span, li, dt, dd, a, strong, em, td, th, label, input, select {
        font-size: 14px;
    }
    .body_wrap {margin: 0px;}
    .body-container {margin:10px;}
    .header_wrap {width: 100%; padding-top: 0px; top: 0; position: relative; border-bottom: 0;}
    #gnb {display: none;}
    .header_area {width: 100%!important;}
    .sitemap_box {position: sticky; right: 20px; overflow: inherit;}
    .contents_container > div {width: 100%;}
    .contents_B_wrap ul.m_icon {flex-wrap: wrap; margin-top: 40px; width: 85%;}
    .m_banner_text_box {top: -36px;}
    .m_banner_text_box > h1 {font-size: 3.8em; font-weight:900;}
    .contents_B_wrap {width: 97%; margin-top: 120px;}
    .contents_A_wrap {height: 30px; margin: 20px;}
    .contents_C_wrap {background-size: cover; flex-flow: column!important; padding: 20px;}
    .contents_C_wrap .bussiness_slide_02, .contents_C_wrap .bussiness_slide_03 {margin: 0;}
    .contents_C_wrap .bussiness_slide_01, .contents_C_wrap .bussiness_slide_02 {margin-bottom: 15px;}
    .contents_C_wrap .bussiness_slide_01, .contents_C_wrap .bussiness_slide_02, .contents_C_wrap .bussiness_slide_03 {width: 100%; padding: 10px;}
    .contents_D_wrap {padding: 20px;}
    .employment_banner > div {margin-top: 20px; width: 100%; border: 1px solid #ccc; padding: 20px; border-radius: 6px; background-color: #fff;}
    .intro_txt_box {flex-direction: column; margin-top: 140px;}
    .intro_txt, .point_txt {font-size: 24px;}
    .intro_A {margin-right: 0;}
    .intro_A, .intro_B {width: 100%;}
    .intro_A {margin: 20px;}
    .intro_B {margin: 20px;}
    .intro_B {margin-top: 20px;}
    .wave_box {position: initial; display: block; width: 100%; height: 100px;}
    .wave_1 {font-size: 7em; transform: translate(-4%,-80%); width: 100%;}
    .wave_2 {font-size: 7em; position: absolute; transform: translate(-4%,-80%); width: 100%;}
    .solution_banner_bg {width: 100%; flex-direction: column; padding: 0px;}
    .solution_banner {flex-direction: column; width: 100%;}
    .solution_banner > span {width: 100%;}
    .solution_banner > span.solutionA, .solution_banner > span.solutionB, .solution_banner > span.solutionC {max-width: 80%; max-height: 128px; }
    .contents_D_wrap .slide_auto {flex-direction: column;}
    .m_banner_text_box > h4 {font-size: 24px;}
    .soution_txt {font-size: 24px; width:100%; padding: 20px; word-break: keep-all; text-align: center;}
    .contents_B_wrap ul p {font-size: 1em;}
    #ft {margin-top: 80px;}
    #bo_list {width: 100%!important;}
    .logoWreap {margin: 0;}
    /* .header_area {justify-content: space-between; padding: 30px 10px 0 10px;} */
    .navigationBar_wrap {display: none;}
    .contents_D_wrap .slide_auto > div {margin-top: 10px;}
    .employment_banner {background-color: #fafafa; padding: 10px;}
    .intro_txt_box {flex-direction: column!important;}
    .intro_txt_box > div {display: block; flex-direction: column!important;}
    .solutionC {margin-bottom: 20px;}
    #bo_list, #bo_v {width: 100%!important;}
    /* 추가 */
    .header_area {justify-content: space-between; padding: 10px 10px 20px;}
    .main_container {overflow-y: scroll;}
    .contents_container {margin-top: 0;}
    .contents_A_wrap_custom {height: 300px; margin: 100px 0; justify-content: space-between !important;}
    .contents_A_wrap_custom .main_text {padding-left: 0;}
    .contents_A_wrap_custom .main_text > h2 {font-weight: 700; font-size: 3em;}
    .contents_A_wrap_custom .main_text > h5 {font-size: 12px; width: 100%; margin-top: 15px;}
    .swiper-slide .publicWork_ico_01 {height: 100px;}
    .swiper-slide .publicWork_ico_02 {height: 100px;}
    .swiper-slide .publicWork_ico_03 {height: 100px;}
    .swiper-slide .publicWork_ico_04 {height: 100px;}
    .swiper-slide .publicWork_ico_05 {height: 100px;}
    .swiper-slide .publicWork_ico_06 {height: 100px;}
    .swiper-slide .publicWork_ico_07 {height: 100px;}
    .swiper-slide .publicWork_ico_08 {height: 100px;}
    .swiper-slide .publicWork_ico_09 {height: 100px;}
    .contents_B_wrap_custom {height: auto; background-size: cover; flex-flow: column !important; padding: 0; margin-bottom: 28%;}
    .contents_B_wrap_custom .bussiness_slide_container {flex-flow: column; align-items: center;}
    .contents_B_wrap_custom .bussiness_slide h2 {font-size: 30px;}
    .contents_B_wrap_custom .bussiness_slide_02, .contents_B_wrap_custom .bussiness_slide_03 {margin: 0;}
    .contents_B_wrap_custom .bussiness_slide_01, .contents_B_wrap_custom .bussiness_slide_02 {margin-bottom: 15px;}
    .contents_B_wrap_custom .bussiness_slide_01, .contents_B_wrap_custom .bussiness_slide_02, .contents_B_wrap_custom .bussiness_slide_03 {width: 80%;}
    .contents_B_wrap_custom .bussiness_slide .content_list ul li {width: 100%; line-height: 28px; font-size: 15px;}
    .contents_B_wrap_custom ul.m_icon {flex-wrap: wrap; justify-content: space-between; width: 85%;}
    .contents_B_wrap_custom ul p {font-size: 12px;}
    .contents_C_wrap_custom {height: auto; padding: 0; margin-bottom: 20%;}
    /* .contents_C_wrap_custom .content_box {margin-top: 0;}
    .contents_C_wrap_custom .venn-diagram {width: 26em;}
    .contents_C_wrap_custom .circle {width: 180px; height: 180px; line-height: 180px; font-size: 14px;}
    .contents_C_wrap_custom #circle1 {left: 90px; top: 20px;}
    .contents_C_wrap_custom #circle2 {left: 20px; top: 150px;}
    .contents_C_wrap_custom #circle3 {left: 170px; top: 150px;} */
    .shape_of_form {display: none;}
    .shape_of_form-m {display: block; height: 200px;}
    .contents_D_wrap_custom {height: auto; padding: 0; margin-bottom: 20%;}
    .footer_wrap {width: 100%;}
    .footer_wrap .gw {font-size: 14px;}
}

@media only screen and (max-width: 280px) {
	/* 갤럭시 폴더에 사용될 시트를 여기에 작성합니다. */
    .body-container {margin:10px;}
    .contents_C_wrap .bussiness_slide {padding: 15px;}
}

@media only screen and (min-resolution: 300dpi) {
    /* 고해상도 스크린의 반응형에 사용될 시트를 여기에 작성합니다. */
}