@charset "utf-8";
@import url(https://use.fontawesome.com/releases/v5.13.0/css/all.css);
@import url(https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css);
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap');
@import url('/public/Byeol/stylesheet.css');
@import url('/public/neo/stylesheet.css');
@import url('/public/core/stylesheet.css');
@import url('/public/textillate/style.css');
html {
    overflow-x: hidden;
    overflow-y: scroll;
}
.body-layout {
    background-color: #fff;
}
#site {
    padding-top: 0px;
}
/* 폰트 설정 */
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
button,
.subPage,
/*
#site {
    font-family: 'notokr', 'Rajdhani', "NanumGothic", "나눔고딕", 'NanumBarunGothic', 'Apple SD Neo Gothic', 'Malgun Gothic', 'Gulim', sans-serif, 'Nanum Myeongjo', serif;
} */

/* h1, h2, h3, h4, h5, h6, p { margin: 0px; } */
ol,
ul,
li {
    list-style: none;
    list-style-position: inside;
    padding: 0
}
.navbar .caret,
.navbar .divider-vertical,
.navbar ~ br,
.footer-social-layout,
.footer_copy .text-center > br,
.topmarginLay_a {
    display: none;
}

/*가로 100% 레이아웃 정의*/
.container_contents,
.intro-html-layout,
.intro-html-layout > div,
.footer_copy > div,
.sub-layout {
    width: 100%;
    padding: 0;
    margin: 0;
}
.intro-board-widget-layout,
.dh-board,
.dh-view-box,
.bbs-list-view-layout + .row,
#mailForm,
#insertForm {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}
.board_wrapper {
    margin-top: 0;
}
.search_wrap {
    margin-bottom: 0;
}
* {
    word-break: keep-all
}
a:hover {
    text-decoration: none
}
.li-dash > li,
.li-dot > li,
.li-dash >dd,
.li-dot > dd {
    padding-left: 17px;
    position: relative;
}
.li-dash > li:before,
.li-dot > li:before,
.li-dash > dd:before,
.li-dot > dd:before {
    content: '-';
    display: block;
    position: absolute;
    left: 5px;
    top: 0;
}
.li-dot > li:before,
.li-dot > dd:before {
    content: '';
    width: 5px;
    height: 2px;
    background: #ff4a51;
    /* border-radius: 50%; */
    top: 10px;
    left: 22px;
}

/* 불필요 항목 삭제 */
.navbar .caret {
    display: none;
}
.subContent ul {
    padding: 0
}

/* 상단 메뉴 */
.navbar-inverse {
    background: transparent;
    position: relative;
    margin-bottom: 0;
    border: 0;
    padding: 0;
}
.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
    margin: 0;
    padding: 0
}
.navbar>.container .navbar-brand {
    height: auto;
    padding: 5px 15px 15px;
    background: #fff;
}
.navbar>.container .navbar-brand img {
    max-width: 130px;
}
.navbar-inverse .navbar-nav > li > a {
    font-size: 20px;
    padding: 40px 27px 22px;
    color: #333;
    font-weight: 700;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: red;
}
.navbar-inverse .navbar-nav .dropdown.open .dropdown-toggle,
.navbar-inverse .navbar-nav .dropdown.open:hover .dropdown-toggle,
.navbar-inverse .navbar-nav .dropdown.open:focus .dropdown-toggle {
    background: none;
    color: red;
}
@media (max-width: 767px) {
    /*.navbar-inverse .navbar-toggle{border:1px solid #666;}*/
    .navbar-inverse .navbar-toggle {
        border: 0;
        padding: 9px 0;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #666;
        transition: ease-in-out .15s all;
        opacity: 1;
        position: relative;
    }
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background: none;
        border-color: #222;
    }
    .navbar-inverse .navbar-toggle:hover .icon-bar,
    .navbar-inverse .navbar-toggle:focus .icon-bar {
        background-color: #222;
    }
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: transparent;
    }
    .navbar-inverse.open .navbar-toggle > .icon-bar:nth-of-type(1) {
        transform: rotate(45deg);
        top: 6px;
    }
    .navbar-inverse.open .navbar-toggle > .icon-bar:nth-of-type(2) {
        opacity: 0;
    }
    .navbar-inverse.open .navbar-toggle > .icon-bar:nth-of-type(3) {
        transform: rotate(-45deg);
        top: -6px;
    }
}
@media (min-width: 768px) {
  .nav.navbar-nav li .dropdown-menu{
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
    border-radius: 0;
    border: 0;
    padding: 0;
    background: rgba(0,0,0,0.7);
    font-family: 'notokr';
}
.nav.navbar-nav li .dropdown-menu li a{
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    text-align: center;
}
.nav.navbar-nav li .dropdown-menu li:hover a{
    background: #e60c14;
}
/*    .navbar-inverse .navbar-nav .dropdown-menu {
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        border-radius: .25rem;
        border: 1px solid #d5d5d5;
        padding: 10px 0;
        -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, .125);
        font-family: 'notokr';
    }
    .navbar-inverse .navbar-nav .dropdown-menu>li>a {
        padding: 5px 20px;
    }
    .navbar-inverse .navbar-nav .dropdown-menu>li>a:hover,
    .navbar-inverse .navbar-nav .dropdown-menu>li>a:focus {
        background: none;
        font-weight: 600;
    }
  */
}
@media (min-width: 992px) {
    .navbar-inverse .navbar-right {
        margin-right: -30px;
        float: none !important;
    }
}

/* 하단 카피라이트 설정 시작*/
#site footer {
    margin-top: 0px;
    background-color: #afafaf;
    color: rgb(255, 255, 255);
}
#site footer .footer-link {
    padding: 15px 0;
    border-bottom: 1px solid #444
}
#site footer .footer-link ul {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0
}
#site footer .footer-link ul li {
    list-style: none;
    display: inline-block;
    font-size: 14px;
    margin-right: 15px;
    line-height: 26px
}
#site footer .footer-link ul li a {
    color: inherit
}
#site footer .footer-info {
    padding: 35px 80px;
}
#site footer .footer-info ul {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0;
    font-family: 'Nanum Gothic', sans-serif;
}
#site footer .footer-info ul li {
    list-style: none;
    display: inline-block;
    font-size: 14px;
    margin-right: 15px;
    line-height: 26px;
    font-weight: 300;
}
#site footer .footer-info ul li.text-right {
    float: right;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.02em;
}
@media(min-width:768px){
    
#main_wrapper{padding: 0 30px 0;}
#site footer{    margin: 0 30px 30px;}
.navbar-inverse{        padding: 10px 30px 0;}
}


/* 슬라이드 공통 */
.carousel-control {
    text-shadow: 0px 2px 6px rgba(0, 0, 0, .125);
    transition: ease-in-out .15s all;
}
.carousel-control.left .glyphicon::before {
    content: '\f053';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.carousel-control.right .glyphicon::before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.carousel-indicators li {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid #fff;
    margin: 0 8px;
    border-radius: 0;
    transition: ease-in-out .15s all;
}
.carousel-indicators li.active {
    width: 12px;
    height: 12px;
    background-color: #fff;
    margin: 0 8px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .125);
    transform: rotate(45deg);
}
#myCarousel {
    background: #000;
    /* height: 600px; */
    height: 42vw;
    overflow: hidden;
}
/* #myCarousel .carousel-video::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    background-image: url(/public/img/slide/tit_carousel.png);
    background-size: 9px;
    background-position: left top;
    opacity: .3;
    z-index: 1;
} */
#myCarousel .carousel-video > div {
    /* 	top: -210px; */
    top: 0;
    padding-bottom: 43.8%;
}
/* .menu_top {
    background: #fff;
    padding: 5px 0;
    overflow: hidden;} */
.menu_top ul {
    overflow: hidden;
    margin: 0;
    float: right;
    position: absolute;
    z-index: 1000;
    top: 5px;
    right: 4%;
}
.menu_top li {
    float: left;
    margin: 0 3px;
}
.menu_top li a {
    display: block;
    opacity: .7;
    transition: all ease .2s;
}
.menu_top li a img {
    max-width: 30px;
    border-radius: 50%;
}
.menu_top li a:hover{
    opacity: 1;
}

/*main*/
.main-business01 {
    /* background: #333; */
    padding: 70px 0 100px;
    text-align: center;
    color: #333;
    position: relative;
}
.main-business01:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(/public/img/slide/tit_carousel.png);
    background-size: 9px;
    background-position: left top;
    opacity: 1;
    z-index: 0;
}
.main_intro {
    font-size: 50px;
    letter-spacing: -0.034em;
    font-weight: 700;
    margin-bottom: 60px;
    margin-top: 20px;
    color: #111;
    font-family: 'NeoDunggeunmo';
}
.main_intro span {
    /* font-weight: 500; */
    display: inline-block;
    /* font-size: 60px; */
    margin: 0 6px;
    color: rgb(234, 37, 37);
}
.main_intro + p {
    font-size: 21px;
    line-height: 1.6;
    letter-spacing: -0.04em;
    font-family: 'Core Gothic E 5';
}
.main-business02 {
    padding: 0px 0 120px;
}
.main-business02 .col-md-4 {
    text-align: center;
    border-right: 1px dashed #ddd;
}
.main-business02 dl {
    margin: 30px 0 0;
    display: inline-block;
    font-family: 'Core Gothic E 5';
}
.main-business02 dl dt {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin-bottom: 5px;
    position: relative;
    /* font-family: 'Rajdhani',sans-serif; */
}
.main-business02 dl dt:before {
    content: "";
    height: 25px;
    width: 2px;
    background: #dc1c2b;
    position: absolute;
    left: 0;
    transform: rotate(15deg) translateY(-50%);
    top: 50%;
    display: none;
}
.main-business02 dl dt:after {
    content: "";
    height: 25px;
    width: 2px;
    background: #dc1c2b;
    position: absolute;
    right: 0;
    transform: rotate(15deg) translateY(-50%);
    top: 50%;
    display: none;
}
.main-business02 dl dd {
    font-size: 16px;
    letter-spacing: -0.06em;
    font-weight: 400;
    color:#333
}
.main-business02 a{display: block;}
.main_img {
    max-width: 250px;
    margin: 0 auto;
    padding: 0 55px;
    border-radius: 50%;
    /* box-shadow: 2px 2px 6px rgba(120, 120, 120, 0.2); */
}

/*sub*/
.subContent {
    padding: 0 0 150px;
}
.subContent .con {
    margin-bottom: 60px;
}
.subContent .con:last-child {
    margin-bottom: 0;
}
.subTitle {
    /* background: url(/public/img/sub/subTop01.jpg)no-repeat center / cover; */
    position: relative;
    height: 300px;
    /* margin-bottom: 80px; */
}
.subTitle h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-family: 'Rajdhani','Do Hyeon',sans-serif;
    text-align: center;
    position: absolute;
    left: 50%;
    color: #333;
    top: 50%;
    transform: translate(-50%,-50%);
    /* border-bottom: 4px solid red; */
    /* text-shadow: 0 0 10px rgba(0,0,0,0.4); */
}
/* .subTitle h2:after {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    box-shadow: 2px 2px 6px rgba(255,0,0,0.9);
    position: absolute;
    bottom: -4px;
    left: -2px;
} */
#about01 .subContent{padding-top: 100px;}
.about01-top{
    margin-bottom:70px;
    text-align:center;
}
.about_text01 {
    position: relative;
    display:inline-block;
    margin-bottom: 40px;
    /* margin-top: 40px; */
    min-width: 435px;
}
.about_text01 img{
    margin: 10px auto 30px;
    height: 80px;
}
.about_text01 .txt1{
    display: block;
    text-align: left;
    font-size: 16px;
    margin-left: 90px;
}
.about_text01 .txt2{
    font-family: 'UhBee HanByeol';
    font-size:38px;
}
.about_text01 .txt2.typing{
    display: inline-block;
    text-align: left;
    width: 445px;
    height: 1.75em;
}
.about_text01 .txt2.typing > .inner_txt{
    height: 1.2em;
    line-height: 1;
}
.about_text01 .txt2 strong{
    font-size:1.2em;
    color:#e60013;
    animation-name: star;
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes star{
	0%{
		opacity: 0.4;
		/*color: rgba(255, 200, 105, 0.1);*/
	}
	100%{
		opacity: 1;
		/*color: rgba(255, 200, 105, 0.15);*/
	}
}
.about01-top .small-quote{
    display: inline-block;
    padding-bottom: 3px;
    font-size: 20px;
    border-bottom: 2px solid #ffe529;
}
/* .about_text01 span {
    font-size: 16px;
    color: #333;
    top: 5px;
    display: block;
    text-align: center;
    font-weight: 700;
} */
.about_text01 p {
    font-size: 56px;
    letter-spacing: -0.08em;
    color: #000;
    font-weight: 200;
    position: relative;
    text-align: center;
    margin-top: 40px;
}
.about_text01 p strong {
    font-size: 120px;
    color: #ff0d21;
    font-weight: 300;
    margin-left: 20px;
    font-family: 'Rajdhani',sans-serif;
    display: inline-block;
    /* position: absolute; */
    line-height: 0.85em;
}
.about_list ul {
    margin-bottom: 0;
    overflow: hidden;
}
.about_list li {
    font-size: 20px;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.75;
    text-align: center;
    letter-spacing: -0.04em;
    font-family: 'Nanum Myeongjo';
    font-weight: 700;
    float: left;
}
.about_list li span {
    position: relative;
    line-height: 1.1em;
    width: 25px;
    color: #333;
    margin-right: 10px;
    margin-top: 0;
    font-weight: 700;
    font-size: 24px;
    display: inline-block;
    font-family: 'Rajdhani',sans-serif;
}


@media(min-width:1201px) {
    #about01 .right-con .col-md-3 {
        padding: 0;
    }
    #about01 .left-con.col-sm-3{padding:0}
    #about01 .right-con.col-sm-9{ padding-right: 140px;}
    #about01 .right-con.col-sm-3 {padding: 0;}
}
/* #about01 .right-con .col-md-3{
    background: #fff;
    border-right: 4px solid #fff7be;
}
#about01 .right-con .col-md-3:last-child{border-right: none;}
#about01 .right-con .row{    padding: 10px;
    background: #fff7be} */
#about01 .con3{max-width: 1170px;
    width: 100%;}
#about01 .right-con{font-family: "Core Gothic E 5";}
#about01 .right-con dt {
    padding: 8px 10px;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.034em;
    margin-bottom: 15px;
    text-align: left;
    border-bottom: 1px solid #f34046;
}

#about01 .right-con dd {
    font-size: 15px;
    letter-spacing: -0.1em;
    margin-bottom: 7px;
    line-height: 1.45em;
    font-weight: 500;
    padding-left: 15px;
    text-align: left;
}
#about01 .right-con dd:before{    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 7px;
    left: 0;}
#about01 .right-con + .clearfix{margin-bottom: 40px;}
.subContent .con h3 {
    margin: 0 0 80px;
    text-align: center;
    font-size: 48px;
    font-weight: 300;
    font-family: 'Rajdhani',sans-serif;
}
#about01 .con3 p {
    line-height: 1;
    font-size: 16px;
    margin-bottom: 20px;
    letter-spacing: -0.06em;
    font-weight: 500;
    color: #666;
}
#about01 .con3 p span {
    font-weight: 700;
    border-left: 3px solid #e60013;
    line-height: 0.8em;
    margin-right: 15px;
    padding-left: 5px;
    display: inline-block;
    letter-spacing: -0.034em;
    font-family: 'Rajdhani',sans-serif;
    font-size: 20px;
    color: #333;
}
#about01 .con3 .clearfix {
    margin-bottom: 40px;
    padding-bottom: 40px;
}

/*work*/
#board_data_blog2 .bottom {
    padding: 0;
}
#board_data_blog2 .bottom .info {
    display: none;
}
#board_data_blog2 .bottom .title {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 100%;
    transition: all ease .3s;
    padding: 0 50px;
    color: #fff;
}
#board_data_blog2 .inner .top a {
    height: 235px;
    overflow: hidden;
    position: relative;
}
#board_data_blog2 .inner:hover .top a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
}
#board_data_blog2 .inner .top a .thumb {
    height: 235px;
    transition: all ease .3s;
    background-size:contain;
}
#board_data_blog2 .inner:hover .top a .thumb {
    height: 255px;
}
#board_data_blog2 .inner:hover {
    border-color: #ddd
}
#board_data_blog2 .inner:hover .bottom .title {
    opacity: 1;
}

/*client*/
.client_logo a {
    display: block;
    position: relative;
}
.client_logo img {
    transition: all ease .3s;
    padding: 10px 30px;
    border: 1px solid #ddd;
}
.client_logo img.color_logo {
    opacity: 0;
    position: absolute;
}
.client_logo a:hover img.color_logo {
    opacity: 1;
}

/*with*/
/* #with01 .con .board_write_table.table {
    border-top: 2px solid #e60013;
    border-bottom: 1px solid #ddd;
} */
#with01 .con .board_write_table.table > tbody > tr > td,
#with01 .con .board_write_table.table > tbody > tr > th,
#with01 .con .board_write_table.table > tfoot > tr > td,
#with01 .con .board_write_table.table > tfoot > tr > th,
#with01 .con .board_write_table.table > thead > tr > td,
#with01 .con .board_write_table.table > thead > tr > th {
    padding: 2px 7px;
    vertical-align: middle;
    border-top: none;
    font-family: "Core Gothic E 5";
    letter-spacing: -0.04em;
}
#with01 .con .btn {
    padding: 14px 40px;
    font-size: 14px;
    font-weight: 500;
}
#with01 .con dl:first-child {
    margin: 0px 0 62px;
}
#with01 .con dl dt {
    font-size: 36px;
    font-weight: 700;
    line-height: 0.7em;
    margin-bottom: 15px;
    color: #333;
    font-family: 'Rajdhani',sans-serif;
    /* text-align: center; */
}
#with01 .con dl dd {
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
    /* text-align: center; */
    letter-spacing: -0.034em;
    padding-left: 32px;
    position: relative;
}
#with01 .con dl + dl dd{    margin-left: 4px;}
#with01 .con dl dd span {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-right: 14px;
    display: inline-block;
    position: absolute;
    left: 0;
}
.menu_top .container {
    position: relative;
}
#site footer .footer-info ul li strong {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
    display: block;
    font-family: 'Nanum Gothic', sans-serif;
}
/* #site footer .footer-info ul li:nth-child(4), #site footer .footer-info ul li:nth-child(5), #site footer .footer-info ul li:nth-child(6) {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Rajdhani',sans-serif;
    letter-spacing: 0.02em;
} */
.footer-info .container {
    width: 100%;
}
.navbar-inverse .container {
    width: 100%;
    padding: 5px 80px 0;
}
.navbar-header {
    width: 25%;
}
.navbar-collapse{float:right;}
.table_blog2 dd .inner .bottom .title a:hover, .table_blog2 dd .inner .title a:focus {
    color: #fff;
}
.board_data_view .header_wrap .title {
    font-size: 26px;
    letter-spacing: -0.06em;
}
.board_data_view .header_wrap {
    border-bottom: 1px solid #ddd;
}
.board_data_view {
    border-top: 1px solid #333;
}
/* .table_blog2 dd .inner {
    border: none;
} */
#with01 #item_agree .checkbox {
    margin-top: 0;
    padding: 12px 0;
}
#with01 .con1 .left-con{
    padding-left: 70px;
    padding-top: 40px;
}
#with01 .con1 .right-con {
    padding-top:40px;
    padding-left:100px;
}
#with01 .con1 .bottom-con{
    /* width: 60%; */
    padding-top:60px;
    border-radius: 2px;
}
#with01 .con1 .bottom-con h4{
    font-size: 40px;
    padding-bottom: 10px;
    border-bottom: 3px solid #ddd;
    margin-bottom: 20px;
    letter-spacing: -0.04em;
    font-family: 'Rajdhani',sans-serif;
}
#with01 .con1 .bottom-con form{
    margin:0 auto;
    width:800px;
    padding: 40px 40px 60px;
    background: #f4f4f4;
    max-width:100%;
}
.btn.btn-secondary {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000;
}
#with01 .con1 fieldset .text-center {
    text-align: right;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
    background: #000;
    border-color: #000;
}
.btn.btn-primary {
    background: #333;
    border-color: #333;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus {
    background: #fff;
    border: 1px solid #999;
}
.navbar-inverse .navbar-nav > li {
    font-family: 'Rajdhani',sans-serif;
}
#with01 .con dl dd span::after {content: '';width: 7px;height: 1px;background: #fff;position: absolute;bottom: 3px;margin-left: 3px;}
#with01 .con dl:first-child::after {content: '';display: none;width: 1px;height: 40px;background: rgba(0, 0, 0, 0.7);margin: 50px auto 50px 0;}
#about01 .con3 > div:first-child {
    border-top: 2px dotted #eee;
    padding-top: 100px;
}
.about_list {
    padding: 30px 0 60px;
}
.about_list li span::before {content: '';display: block;width: 10px;height: 1px;background: #999;bottom: 6px;position: absolute;left: 21px;}
/* .about_text01 span::after {
    content: '';
    display: block;
    background: #8e8e8e;
    width: 205px;
    height: 1px;
    margin: 2px auto;
} */

.color-wrap{    width: 100%;
    /* max-width: 1170px; */
    margin: 0 auto;}
.main-business02 .col-md-4:last-child {border-right: none;}
.color-wrap .left-con img{
    margin-left: -15px;
    height:300px;
}
.color-wrap .right-con{margin-top: 20px;}
.star-li{overflow: hidden;}
.star-li li{
    position: relative;
    float: left;
    margin-right: 25px;
    width: calc(100% / 4 - 19px);
    /* height: 170px; */
    text-align: center;
    letter-spacing: -0.05em;
}
.star-li li img{margin-bottom: 30px;}
.star-li .star_li04{margin-right: 0;}
/* .star-li li:before{
    content:'\f005';
    font-family: 'font awesome 5 free';
    z-index:0;
    position:absolute;
    left:50%;
    top:50%;
    font-size: 180px;
    transform:translate(-50%,-50%);
    color: #f34046;
    opacity: 0.5; 
} */
/* .star_li01{    background: url(/public/img/sub/about01.jpg)no-repeat center / cover;}
.star_li02{    background: url(/public/img/sub/about02.jpg)no-repeat center / cover;}
.star_li03{    background: url(/public/img/sub/about03.jpg)no-repeat center / cover;}
.star_li04{    background: url(/public/img/sub/about04.jpg)no-repeat center / cover;} */
.star-li li span{
    z-index:10;
    position:absolute;
    left:50%;
    top:50%;
    font-size: 14px;
    transform:translate(-50%,-50%);
    white-space: nowrap;
    line-height: 1;
    margin-top: 8px;
}

.star-li li span strong{
    display:block;
    font-size: 27px;
}
.work04-wrap h5{
    font-weight: 700;
    border-left: 3px solid #e60013;
    line-height: 0.8em;
    margin-right: 15px;
    padding-left: 5px;
    display: inline-block;
    letter-spacing: -0.034em;
    font-family: 'Rajdhani',sans-serif;
    font-size: 20px;
    color: #333;
}
.work04-wrap ul{
    margin-bottom:30px;
}
.history_area{position: relative;width: 1903px;padding-top: 80px;}
.history_area dl{position: absolute;}
.history_area dl dt{    font-size: 22px;
    font-weight: 700;
    color: #000;
    /*border-bottom: 1px solid;*/
    line-height: 1;
    display: inline-block;
    margin-bottom: 13px;
    padding-bottom: 3px;
    font-family: "Core Gothic E 5";}
.history_area dl dd{  padding-left: 14px;font-size: 13px;font-weight: 500;}
.history_area dl dd:before{    top: 7px;
    left: 0;
    border-radius: 50%;    width: 5px;
    height: 5px;
    background: #333;}
.history_area dl.his01{
    top: 386px;
/*     left: 227px; */
    left: 127px;
    }
.history_area dl.his02{
    top: 20px;
    left: 705px;
}
.history_area dl.his03{
    top: 661px;
    left: 980px;
}
.history_area dl.his04{
    bottom: 47px;
    left: 510px;
}
.history_area dl.his05{
    left: 1350px;
    bottom: 240px;
}
@media(max-width:767px){
    .history_area {padding:0 15px}
    .history_area img{width: 100%;max-width: 100%;}
    .history_area dl{position: static;margin-bottom: 30px;}
}
.subContent .con h3 .numbering{
    display:inline-block;
    margin-bottom: 15px;
    font-size:24px;
    font-weight:500;
    border-bottom: 3px solid #e60013;
    color: #e60013;
}
.subContent .con h3 small{
    display:block;
    margin-top: 15px;
    font-size: 18px;
    color:#666;
}
#work04 .con{
    padding-bottom:60px;
    border-bottom:1px dashed #ddd;
}
#work04 .con:last-child{
    border:none;
}
.client-li:after{
    content:'';
    display:block;
    clear:both;
}
.client-li li{
    float:left;
    width:20%;
}
.board_wrapper .reply_wrap {
    display: none;
}
.subTitle h2 .small-quote{  
    font-size: 17px;
    font-weight: 400;
    font-family: 'Core Gothic E 5';
    margin-top: 10px;
    display: block;
}
#work04 .subTitle h2 .small-quote{
    font-family: 'East Sea Dokdo', cursive;
    font-size: 30px;
    text-align: left;
    width: 480px;
    height: 33px;
}
#work02 .con2 img{border: 1px solid #ddd;
    margin-bottom: 10px;}
#work02 .con2 a{display: block;
    position: relative;}
#work02 .con2 p{ text-align: center;
    font-size: 18px;
    font-family: 'Core Gothic E 5';
    letter-spacing: -0.02em;
    opacity: 0;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all ease .3s;
    color: #fff;
    z-index: 10;}
#work02 .con2 a:after{content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.6);
    transition: all ease .3s;
    opacity: 0;
    z-index: 4;
    left: 0;
    top: 0;}
#work02 .con2 a:hover p{opacity: 1;}
#work02 .con2 a:hover::after{opacity: 1;}
@media(min-width:768px){
    .main-business02 .col-md-4{opacity: 0;}
    .main_on.fadeleft {
        animation-name: fadeInLeft;
    }
    .main_on.fadeup {
        animation-name: fadeInUp;
    }
    .main_on.faderight {
        animation-name: fadeInRight;
    }
    .main_on.fadein {
        animation-name: fadeIn;
    }
    .main_on{    animation-duration: 1s;
            animation-fill-mode: both;
            animation-delay: 0.2s;}
    #message #board_data_blog2 .col-sm-4{padding:0;margin: 0;}
}
#message #board_data_blog2 .inner .top a{    height: 256px;}
#message #board_data_blog2 .inner .top a .thumb{    height: 256px;}
#message .table_blog2 dd .inner{border:none}
#message #board_data_blog2 .inner .top a{    height: 256px;}
#message #board_data_blog2 .inner .top a .thumb{    height: 256px;}
#message .table_blog2 dd .inner{border:none}
#message .subTitle h2 .small-quote{
    font-family: 'East Sea Dokdo', cursive;
    font-size: 30px;
    text-align: left;
    width: 410px;
    -webkit-margin-start: 40px;
    height: 33px;
}

#item_name th:first-child, #item_email th:first-child{width: 19%;}
#item_name td + th, #item_email td + th{width: 10%;}
.board_data_view .header_wrap .info{display: none;}

/* 2020-08-03 */
#work04 .subTitle h2 .small-quote.typing-txt, .about_text01 .txt2.typing-txt, #message .subTitle h2 .small-quote.typing-txt{
    display: none;
}

.inner_txt{
    animation-name: fadeIn;
    animation-duration: 0.8s;
    animation-timing-function: ease-in;
}
@keyframes fadeIn{
	0%{
		opacity: 00;
		/*color: rgba(255, 200, 105, 0.1);*/
	}
	100%{
		opacity: 1;
		/*color: rgba(255, 200, 105, 0.15);*/
	}
}

@media(min-width:1201px){
    .work04_img{display: none;}
    #about01 .container{width: 1300px;}
}
@media(max-width:1200px){
    .work04_img{display: block;}
    .history_area{display: none;}
}

@media(max-width:767px){
    .navbar-inverse .container{
        padding:5px 15px;
    }
    .navbar-inverse .navbar-toggle{
        position: absolute;
        right: 10px;
        top: 40px;
    }
    .navbar-inverse .navbar-collapse{
        width:100%;
    }
    .navbar-inverse .navbar-nav > li > a{
        padding: 15px 30px 10px;
        font-size: 18px;
    }
    .main_intro{
        font-size:26px;
        margin: 0 0 20px;
    }
    .main_intro + p {
        font-size: 15px;
    }
    
    .main-business02 .col-md-4{
        opacity: 1;
        width:33.333%;
        float:left;
    }
    .main_img {
        padding:0;
    }
    .main-business02 dl dt{
        font-size:17px;
    }
    .main-business02 dl dd{
        font-size: 13px;
        letter-spacing: -0.1em;
    }
    #site footer .footer-info{
        padding:35px 0;
    }
    #site footer .footer-info ul li strong{
        font-size:20px;
    }
    .about01-top{
        margin-bottom:0;
    }
    .about_text01,
    .about_text01 .txt2.typing,
    #about01 .container{
        max-width:100%;
        min-width: auto;
    }
    .about_text01 img{
        height:60px;
    }
    .about_text01 .txt2{
        font-size:26px;
    }
    .about_text01 .txt2.typing{
        text-align:center;
    }
    .about_text01 .txt1{
        margin-left:20%;
    }
    .color-wrap .left-con img {
        height: 240px;
    }
    .star-li {
        margin: 0 -10px;
    }
    .star-li li{
        margin-right: 0;
        padding: 0 10px;
        width: calc(100% / 2 );
    }
    #about01 .con3{
        width:auto;
    }
    #about01 .con3 p span{
        display:block;
        margin-bottom:10px;
    }
    #message .subTitle h2 .small-quote,
    #work04 .subTitle h2 .small-quote{
        margin:10px auto;
        width:100%;
        text-align: center;
    }
    .subTitle h2{
        width:100%;
        padding:0 15px;
    }
    .history_area{
        max-width: 100%;
    }
    .history_area img{
        margin-bottom:20px;
    }
    .history_area dl dt{
        font-size:18px;
    }
    .subTitle{
        height:250px;
    }
    #message #board_data_blog2 .inner .top a,
    #message #board_data_blog2 .inner .top a .thumb,
    #board_data_blog2 .inner .top a .thumb,
    #board_data_blog2 .inner .top a {
        height: 155px;
        /* background-size: cover; */
    }
    #board_data_blog2 .bottom .title{
        padding:0 10px;
        width: calc(100% - 30px);
    }
    .table_blog2 dd .inner .bottom .title a{
        font-size:14px;
    }
    .board_data_view .header_wrap .title{
        font-size:22px;
    }
    .client-li li{
        width:50%;
    }
    .client_logo img{
        padding:10 25px;
    }
    .table_blog2{
        margin:0 -10px;
    }
    .table_blog2 dd{
        margin:0;
        padding:5px;
    }
    #message #board_data_blog2{
        margin:0;
    }
    #message #board_data_blog2 dd{
        padding:0;
    }
    #message #board_data_blog2 .inner .top a .thumb{
        background-size:cover;
    }
    #with01 .con1 .left-con,
    #with01 .con1 .right-con {
        padding-left: 15px;
    }
    #with01 .con1 .left-con img{
        height:220px;
    }
    #with01 .con dl dt{
        font-size:30px;
    }
    #with01 .con1 .bottom-con h4{
        font-size:30px;
    }
    #with01 .con1 .bottom-con form{
        padding:20px 20px 30px;
    }
    .menu_top li a img{    max-width: 25px;}
    .menu_top ul{    top: 12px;
        right: 6%;}
    .navbar>.container .navbar-brand img{    max-width: 110px;}
    .main-business01{padding: 80px 0 80px;}
    .main-business02{    padding: 0px 0 100px;}
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{    color: #333;}
    .navbar-inverse .navbar-collapse{float: none;
        width: auto;}
    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a{padding:5px 30px}
    #site footer .footer-info ul li span{display: block;}
    #site footer .footer-info ul li{    font-size: 13px;
        margin-right: 9px;}
    #site footer .footer-info ul li.text-right{    float: none;}
    #work04 .subTitle h2 .small-quote{width: 280px;    letter-spacing: -0.02em;}
    .subTitle h2 .small-quote{    font-size: 16px;    letter-spacing: -0.1em;}
    #message #board_data_blog2 .inner .top a, #message #board_data_blog2 .inner .top a .thumb, #board_data_blog2 .inner .top a .thumb, #board_data_blog2 .inner .top a{    height: 125px;}
    .search_wrap #search_kind, .search_wrap #search_query, .search_wrap #search_btn{display: none;}
    #client01 .subTitle, #with01 .subTitle{    height: 150px;}
    #with01 .con1 .left-con{padding-top: 0;
        margin-top: -10px;}
    #work04 .subTitle h2{font-weight: 500;}
    .table.table_responsive tbody tr th{    padding: 10px!important;}
    #with01 .con dl dd{    letter-spacing: -0.06em;}
    #with01 .con dl dd span{    margin-right: 10px;}
}