body, body, * {
    padding:0px; 
    margin:0px; 
    border:0px; 
    box-sizing: border-box; 
    font-family:나눔고딕,NanumGothic,Arial, Roboto, "Helvetica Neue",; 
	letter-spacing: -.03em;
    line-height:1.2;   
} 

.wrap {
    position: absolute; 
    left:0px; 
    top:0px; 
    right:0px; 
    bottom:0px;   
    color:#333;
    font-size: 18px;
}

/* header */
#headers{
    position: fixed;
    width: 100%;
    height:80px;    
    top: 0;
    left: 0;
    z-index: 10;
}

#headers.disabled .header{
    background-color:rgba(16,34,52, 1);
}

.header{
    width: 100%;
    height:100%;
    position:relative;
    background-color:rgba(16,34,52, 0.5);
    display:flex;
    justify-content: right;  
    align-items: center !important;    
}

.header .logo{
    /* background: url(../img/ild_logo.jpg) center center / contain no-repeat; */
    height: 45px;
    position: absolute;
    top: -23px;
    left: 0px;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    height: 60px;    
}

.header .logo a{
    text-decoration: none;
    cursor: pointer;
    color: #fff;
}

.header .menu{
    width:35vw;
    float:right;
}

.header .menu > ul > li{
    display: inline-block;
    width: 25%;
    /* text-align: right; */
    float: right;
}

.header .menu > ul > li > a{
    color: #fff;
    /* font-size: 18px; */
    text-decoration: none;
    opacity: 0.8;
}

.header .menu > ul > li > a:hover{
    color: gold;
    cursor: pointer;
}

.header .menu > ul > li.active{
    color: gold;
}

#header_box_pc{display: flex;}
#header_box_mobile{display: none;}

/* footer */
#footers{    
    /* margin-top:50px; */
    width: 100%;
}

.footer{
    width: 100%;
    /* float:left;     */
    background-color: #4F4F4F;
    font-size: 13px;
    font-weight: bold;
    color: #bbb;
    line-height: 20px;
    display:flex;
    justify-content: center;  
    align-items: center !important;    
}

.footer > .inner-box{
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer > .inner-box a{
    color: #94B6D6;
}

.footer .footer-left {
    flex-grow: 0;
    flex-basis: 20%;   
    text-align: left; 
    font-size: 2em;
    align-self: flex-start;
}

.footer .footer-right {
    flex-grow: 1;
    flex-basis: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   
}

.footer .strong{
    color: #AFAFAF;
}

.footer-right-box{    
    width: 100%;
    display: flex;
}

/* layout */
.inner-box .mobile_view{display:none !important;}
.inner-box .pc_view{display: flex !important;}
.inner-box{
    width:60vw;
    /* max-width:1180px;     */
    margin: 0 auto;
    text-align:center;
    position: relative;
}

.half-box{
    width:50%;
    display: flex;
}

.half-box > .half-box-left{
    flex-grow:  0;
    flex-basis: 50px;
}

.half-box > .half-box-right{
    flex-grow:  1;
}

.panel-padding{padding:100px 0px;}

/* main-page */
.main-img{
    background: url(../img/main.jpg) center center / cover no-repeat;
    width: 100%;
    height:750px;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: left;    
    padding-left:10vw;
    font-size: 1.2vw;
    color:#fff
}

.main-img .border{
    font-weight: bold;
    display: block;
    font-size: 3vw;
}

.point-title{
    font-size: 2em;
    text-align: center;
    line-height: 1.4;
    transform: translateY(30px);
    opacity: 0;
}

#main_text.visible .point-title{
    opacity: 1;
    transform: translateY(0);
    transition: all 1.1s;
}

.point-title .bold{
    font-weight: bold;
    padding-top:15px;
}

.main-contants-1{    
    width:100%;
    /* height:100px; */
    display: flex;
    /* border: 1px solid #DFDFDF; */
    margin-top:1.5vw;
    transform: translateY(30px);
    opacity: 0;
    justify-content:space-between;
}

#main_contants_1.visible .main-contants-1{
    opacity: 1;  
    transform: translateY(0);
    transition: all 1.1s;
}

.main-contants-1:first-child{
    margin-top:0px;
}

.main-contants-1 > .box{
    flex-grow: 0;
    width:19vw;
    height:15vw;
    background: #fff;
    box-shadow: 2px 2px 18px 0px #D4D4D4;
    border-radius: 10px;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    padding: 1vw;
}

.main-contants-1 > .box p{
    font-weight: bold;
    flex-grow: 0;
    flex-basis: 20%;
    justify-content: center;
    align-items: flex-end;
    display: flex; 
    font-size: 1.2em;
}

.main-contants-1 > .box > .icon{
    flex-grow:  0;
    /* flex-basis: 100px; */
    /* background-color: skyblue; */
    display: flex;    
    justify-content: center;  
    /* align-items: center;     */
    align-items: flex-end;
    font-size: 3em;
    /* color: #fff; */
    flex-basis: 30%;
}

.main-contants-1 > .box > .text{
    flex-grow:  0;
    text-align: left;
    line-height:1.8;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;   
    flex-basis: 40%;
    font-size: 1em;
    /* background-color: red;  */
}

.main-contants-2{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    transform: translateY(30px);
    opacity: 0;    
}

.main-contants-2.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 1.1s;
}

.main-contants-2 > p{
    font-weight: bold;
    font-size: 1.5em;
    width: 100%;
    text-align: center;
}

.main-contants-2 > .row{
    display: flex;
    justify-content:space-evenly;
    margin-top:2vw;
}

.main-contants-2 > .row > .sub-box{
    flex-grow: 0;
    width:16vw;
    height:16vw;
    border-radius: 8vw;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;    
}

.main-contants-2 > .row > .sub-box > p {
    flex-grow: 0;
    flex-basis: 35%;
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 1vw;
}

.main-contants-2 > .row > .sub-box > .title {
    flex-grow: 0;
    flex-basis: 30%;
    font-weight: bold;
    font-size: 1em;
    line-height:1.8;
}

.main-contants-2 > .row > .sub-box > .text {
    flex-grow: 0;
    flex-basis: 35%;
    text-align: left;
    line-height:1.4;
    font-size: 0.8em;
    /* padding:0 4vw; */
    text-align: center;
    padding: 0px 30px;
}

/* sub-page */ 
.company-main-img{
    background: url(../img/company.jpg) center center / cover no-repeat;
    width: 100%;
    height: 30vw;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: left;
    font-size: 1.2vw;
    color: #fff;
    padding-bottom: 5vw;
}


.business-main-img{
    background: url(../img/business.jpg) center center / cover no-repeat;
    width: 100%;
    height: 30vw;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: left;
    font-size: 1.2vw;
    color: #fff;
    padding-bottom: 5vw;
}


.solution-main-img{
    background: url(../img/solution.jpg) center center / cover no-repeat;
    width: 100%;
    height: 30vw;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: left;
    font-size: 1.2vw;
    color: #fff;
    padding-bottom: 5vw;
}

.service-main-img{
    background: url(../img/service.jpg) center center / cover no-repeat;
    width: 100%;
    height: 30vw;
    position: relative;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: left;
    font-size: 1.2vw;
    color: #fff;
    padding-bottom: 5vw;
}

.company-main-img .inner-box .title, .solution-main-img .inner-box .title ,.service-main-img .inner-box .title ,.business-main-img .inner-box .title{
    font-weight: bold;
    font-size: 2em;
    color:#fff
}

.company-main-img .inner-box .text, .solution-main-img .inner-box .text ,.service-main-img .inner-box .text ,.business-main-img .inner-box .text{
    line-height: 1.5;
    font-size: 1.5em;
    color:#fff
}


/* 추가 s */
img{
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

.color-b {
	color:#174C97;	
}
.color-o {
	color:#BB4409;	
}
.color-g {
	color:#377145;	
}
.color-p {
	color:#5A3892;	
}


.client-list{
	position: relative; 
	list-style: none; 
	border: 1px solid #ebebeb;
}


.client-list > li{
	padding: 1rem;
	padding-left: 1px !important;
	padding-right: 1px !important;
	margin-bottom: -1px;
	border-bottom: 1px solid #ebebeb;
	border-width: 1px 0;
	text-align: center
}

.service-list{
	position: relative; 
	list-style: none; 
	border: 1px solid #ebebeb;
}

.service-list > li{
	padding: 1rem;
	padding-left: 1px !important;
	padding-right: 1px !important;
	margin-bottom: -1px;
	border-bottom: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb; 
	border-width: 1px 0;
	text-align: center
}


.box-t1{
	width: 23%;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
}

.box-t1 .icon{
    padding: 20px 0px;
}

.box-t1 h4{
    padding: 0px 0px 10px 0px;
}

.box-t1 .text{
    text-align: center;
}


.box-t2{
	width: 30%;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	background: rgba(255,255,255,1.00);
	border-radius: 0.25rem;
}


.text-g  > li {
	list-style: none;
	font-size:1.5rem ;
	color:#7B7B7B;
	text-align: center;
	margin: 20px;
}

/* e */



.sub-contants{
    width:100%;
    /* margin-top:20px; */
    transform: translateY(30px);
    opacity: 0;
    display: flex;
}

#sub_contants_1.visible .sub-contants, #sub_contants_2.visible .sub-contants, #sub_contants_3.visible .sub-contants, #sub_contants_4.visible .sub-contants, #sub_contants_5.visible .sub-contants{
    opacity: 1;  
    transform: translateY(0);
    transition: all 1.1s;
}

.sub-contants > .company-img{
    flex-grow: 0;
    flex-basis: 20%;
}

.sub-contants > .company-text{
    flex-grow: 1;
    flex-basis: 80%;
    padding-left:3vw; 
    line-height: 2;   
}

.sub-contants > .contents-row > .solution-img{
    flex-grow: 0;
    flex-basis: 25%;
}

.sub-contants > .contents-row > .solution-text{
    flex-grow: 1;
    flex-basis: 75%;
    padding-left:3vw; 
    line-height: 2;   
}

.sub-contants > .contents-row > .solution-text > p{
    width:100%; 
    font-weight: 600;
    display: inline-block;
}

.sub-contants > .sub-title, .sub-contants > .company-text > .sub-title{
    font-size: 0.8em;   
    color:#555960;
    font-weight: bold;
    margin-bottom: 0.2vw;
    width: 100%;
}

.sub-contants > .title, .sub-contants > .company-text > .title{    
    font-size: 1.7em;   
    color:#417EAA;
    font-weight: bold;
    line-height: 1.3;
    width: 100%;
}

.sub-contants > .company-text > p{    
    line-height: 1.5;
}

.sub-contants > .contents-row {
    width:100%;
    display: flex;
    justify-content: space-between;
}

.sub-contants > .contents-row > .half-box{
    flex-grow: 0;
    width:29vw;
    /* height:10vw; */
    background: #fff;
    box-shadow: 2px 2px 18px 0px #D4D4D4;
    border-radius: 10px;
    /* font-size: 0.8vw; */
    display: flex;
    padding: 1vw;
}

.sub-contants > .contents-row > .half-box > .title-box{
    flex-flow: 0;
    flex-basis: 45%;
    display: flex;    
    flex-direction: column;
    justify-content: center;
    align-items: left;
    padding-left:1vw;
}

.sub-contants > .contents-row > .half-box > .text-box{
    flex-flow: 1;
    flex-basis: 55%;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
}

.sub-contants > .contents-row > .half-box > .text-box > ul > li{
    /* height: 1.5vw;
    min-height: 18px; */

    list-style: none;
    /* line-height: 2; */
    padding-left: 15px;
    /* list-style-image: url(../img/dot_gray.png); */
    background: url(../img/dot_gray.png) left 14px no-repeat;
    padding: 7px 0px 7px 15px;
    /* color:#818282; */
    font-size: 0.9em;
    
}

.sub-contants > .contents-row > .half-box > .title-box > .box-sub-title{
	letter-spacing: -.03em;
    font-size: 0.8em;   
    color:#999;
    font-weight: bold;
    margin-bottom: 0.2vw;
    display: flex;
    justify-content: left;
    align-items: center;
}

.sub-contants > .contents-row > .half-box > .title-box > .box-title{    
    font-size: 1.1em;  
    color:#000;
    font-weight: bold;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.sub-contants > .contents-row > .half-box2{
    flex-grow: 0;
    width:29vw;
    /* height:10vw; */
    /* background: #fff;
    box-shadow: 2px 2px 18px 0px #D4D4D4; */
    /* border-radius: 10px; */
    /* font-size: 0.8vw; */
    display: flex;
    /* padding: 1vw; */
    justify-content: space-between;
}

.sub-contants > .contents-row > .half-box2 > .title-box{
    flex-flow: 0;
    flex-basis: 20%;
    display: flex;    
    flex-direction: column;    
    justify-content: flex-start;
}

.sub-contants > .contents-row > .half-box2 > .text-box{
    flex-flow: 0;
    flex-basis: 77%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
}

.sub-contants > .contents-row > .half-box2 > .text-box > p{
    font-weight: bold;
    font-size: 1em;
    padding: 7px 0px;
}

.sub-contants > .contents-row > .half-box2 > .text-box > ul > li{
    list-style: none;
    /* line-height: 2; */
    padding-left: 15px;
    /* list-style-image: url(../img/dot_gray.png); */
    background: url(../img/dot_gray.png) left 14px no-repeat;
    padding: 7px 0px 7px 15px;
    color:#818282;
}
.sub-contants > .contents-row > .half-box2 > .title-box > .box-sub-title{
	letter-spacing: -.03em;
    font-size: 0.8em;   
    color:#999;
    font-weight: bold;
    margin-bottom: 0.2vw;
    display: flex;
    justify-content: left;
    align-items: center;
}

.sub-contants > .contents-row > .half-box2 > .title-box > .box-title{    
    width: 100%;
    text-align: right;
    padding: 3px 5px;
    border-radius: 5px;
    display: flex;
    flex-direction: row-reverse;
}

.sub-contants > .contents-row > .three-box {
    flex-grow: 0;
    width:17vw;
    /* height:10vw; */
     background: #fff; 
    /* box-shadow: 2px 2px 4px 5px #e3e3e3; */
    border-radius: 0.7rem;
    /* font-size: 0.8vw; */
    display: flex;
    padding: 8px; 
    flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.125);
	
}

.sub-contants > .contents-row > .three-box > .icon{
    width:100%;
    text-align: left;
}

.sub-contants > .contents-row > .three-box > .title{
    width:100%;
    text-align: left;
    padding:10px;
    font-size: 1em;
    font-weight: bold;
}

.sub-contants > .contents-row > .three-box > .text > ul > li{
    list-style: none;
    /* line-height: 2; */
    padding-left: 15px;
    /* list-style-image: url(../img/dot_gray.png); */
    background: url(../img/dot_gray.png) left 14px no-repeat;
    padding: 7px 0px 7px 15px;
}

.sub-contants > .contents-row > .three-box > .text > ul > li.sub{
    background:none;
    padding: 0px 0px 7px 15px;
    top: -3px;
    position: relative;
    font-size: 0.8em;
    /* line-height: 0.8; */
}

.sub-contants > .contents-row > .solution-text > ul > li{
    list-style: none;
    width: 50%;
    float: left;
    /* height: 34px; */
    padding-left: 30px;
    background: url(../img/dot_blue.png) left 7px no-repeat;
    display: flex;
    align-items: center;
    padding: 7px 0px 7px 30px;
}

.sub-contants > .contents-row > .monitor-box-left{
    flex-grow: 0;
    flex-basis: 35%;
}

.sub-contants > .contents-row > .monitor-box-right{
    flex-grow: 0;
    flex-basis: 60%;
    text-align: left;
}

.sub-contants > .contents-row > .monitor-box-right > p{
    font-weight: 600;
}

.sub-contants > .contents-row > .monitor-box-right > ul > li{
    list-style: none;
    /* line-height: 2; */
    padding-left: 15px;
    /* list-style-image: url(../img/dot_gray.png); */
    background: url(../img/dot_gray.png) left 14px no-repeat;
    padding: 7px 0px 7px 15px;
}

.sub-contants > .contents-row > .monitor-box-right > ul > li.sub{
    background:none;
    /* line-height: 0.8; */
}

.company-business-box{width:100%; display: flex; flex-direction: column;}
.company-business-box .company-business-inner-box{width:100%; display: flex; flex-direction: row;}
.company-business-box .company-business-inner-box .title{flex-grow: 0; flex-basis: 25%; font-size: 1.2em; font-weight: bold; border-right:1px solid #ddd; text-align: right; padding: 10px 30px 0 0;}
.company-business-box .company-business-inner-box .contents{flex-grow: 1; padding-left: 30px;}
.company-business-box .company-business-inner-box .contents ul{list-style: none;}
.company-business-box .company-business-inner-box .contents ul li{padding-bottom:15px;}
.company-business-box .company-business-inner-box .contents ul li:last-child{padding-bottom:0px;}
.company-business-box .company-business-inner-box .contents ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #A9D18E; /* Change the color */
    font-size:30px;
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    /* margin-left: -1em; Also needed for space (tweak if needed) */
}
.company-business-box .company-business-inner-box:last-child .contents ul li::before {
    color: #9DC3E6; /* Change the color */
}

.addr{
    margin-top:10px;
    color:#666;
    text-align: left;
}

.addr table tr{
    height:24px;
    font-size: 0.9em;
} 

.addr table .title{
    /* width:120px; */
    font-weight: bold;
} 

.app_table{
    width:100%;
    border: 1px solid #d4d4d4;
    border-collapse: collapse;
}

.app_table th{
    background-color: #0B4688;
    padding: 10px;
    border: 1px solid #d4d4d4;
    color: #fff; 
}

.app_table td{
    padding:10px;    
    text-align: left;
    border: 1px solid #d4d4d4;
    line-height: 1.5;
}

.googlemap-pc{display: block;}
.googlemap-mobile{display: none;}

.company-table{
    width:100%;
    border: 1px solid #d4d4d4;
    border-collapse: collapse;
    font-size: 0.9em;;
}
.company-table tr td{
    padding:10px;
    border: 1px solid #d4d4d4;
    line-height: 1.5;
}
.company-table .title{
    width:18%;
    background-color: #0B4688;
    border: 1px solid #d4d4d4;
    color: #fff; 
    text-align: center;
}
.company-table .contnetns{width:32%}



.service-table{
    width:100%;
    /* border: 1px solid #737a7e; */
    border-collapse: collapse;
    font-size: 0.9em;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
}

.service-table th{
	/* width:18%; */
    padding:15px 10px;
    border: 1px solid #fff;
    line-height: 1.5;
	background: #80898D;
	color: rgba(255,255,255,1.00);
	text-align: center;
}

.service-table tr td{
	/* margin: 10px; */
    padding:15px 10px;
    /* border: 1px solid #d4d4d4; */
    border: 1px solid #999;
    background-color: #fff;
    line-height: 1.5;
	text-align: left;
    color:#000;
}

.service-table tr td:last-child{
	border-right: 0px;
}

.service-table tr td:first-child{
	border-left: 0px;
}


.service-table .title-bg{
    background-color: #efefef;
    color:#000;
    border: 1px solid #999;
    font-weight: bold;
    text-align: center;
}


.year-row{
    width:100%;
    display: flex;
    justify-content: center;
    padding: 30px;
}
.year-row{padding:0px; display: flex;}
.year-row .year{
    font-size: 1.4em;
    color: #000;
    font-weight: bold;
    position: relative;
    top:-3px;
}
.year-row ul li{
    list-style: none;
    line-height: 1.5;
    padding-top:20px;
}
.year-row .left-box{
    flex-grow: 1; 
    flex-basis: 45%; 
    text-align: right; 
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding:0px 0px 30px 0px; 
}
.year-row .center-box{
    flex-grow: 0; 
    flex-basis: 10%; 
    /* text-align: center;  */
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.year-row .center-box .icon-box{
    width:24px;
    height:24px;
    border-radius: 12px;
    border: 6px solid #87A771;
    flex-grow: 0; 
    flex-basis: 24px;
}
.year-row .center-box .line-box{
    width:3px;
    background-color: #D5DCD0;
    flex-grow: 1;
}
.year-row .right-box{
    flex-grow: 1; 
    flex-basis: 45%; 
    text-align: left; 
    padding:0px 0px 30px 0px; 
}
.year-row:last-child .left-box, .year-row:last-child .right-box{padding: 0;}
.year-box{
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px 15px 15px;
}
.year-box .round{
    width: 10vw; 
    height: 10vw; 
    border-radius: 5vw; 
    /* background: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
    font-size: 1.8em;
}
.year-text-box{
    text-align: left;
    padding: 30px 30px 30px 50px;
    /* width: 30vw;  */
    display: flex;
    align-items: center;
}
.year-text-box ul li{height:26px;}


/* quick-bar */
.quick-bar{
    /* width:13vw;
    height:400px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* justify-content:space-between; */
    position: fixed;
    bottom:10vh;
    right:3vw;
    /* background-color: #fff; */
    /* background-color: red; */
    z-index:20;
    text-align: center;
    border:1px solid #d4d4d4;
    border-radius: 10px;       
    box-shadow: 2px 2px 18px 0px #D4D4D4; 
    background: #fff;
}

.quick-bar > div{
    /* padding:10px; */
    background-color: #fff;
    width: 100%;
}

.quick-bar .quick-bar-contents{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 0px;
    background: transparent;
}

.quick-bar .quick-row{
    display: flex;
    flex-grow: 1;
}

.quick-bar .quick-row > .icon{
    flex-grow: 0;
    /* width:30px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
}

.quick-bar .quick-row > .text{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    text-align: left;
    font-size:0.9em;
    line-height: 1.5;
    padding: 0px 15px 0px 0px;
}


.quick-bar > .title{
    
    background-color: skyblue;
    font-weight: bold;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}

.quick-bar > .button{
    color:#fff;
    padding:12px 0px;
    background: #6B7F9A;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    box-shadow: 2px 2px 18px 0px #D4D4D4;
}

.quick-bar > .button .bar {
    width: 20px;
    border-bottom: 2px solid #455263;
    height: 2px;
    margin: 0px auto 7px auto;
    padding: 0px;
}

.hr.bar {
    width: 57px;
    border-bottom: 5px solid skyblue;
    height: 5px;
    margin: 20px auto 20px 0;
    flex-grow: 0;
}

.hr.bar-small {
    width: 70%;
    border-bottom: 1px solid #EEEEEE;
    height: 2px;
    margin: 15px 0px 15px auto;
    padding: 0;
}

/* etc */
.dpoint{
    z-index:-999; 
    position: absolute; 
    top:500px; 
    width:0xp; 
    height:0px; 
    background-color:transparent
}
.sub_title{
    font-size: 3em;   
    color: #417EAA
}

.title-bg{
    padding: 0px 15px 15px 0px;
}

.half-box2-mobie-icon{    
    width: 20px;
    padding-right: 5px;
    box-sizing: content-box;
    display: none;
}


.block{display:block}
.dotte{ padding: 0px 5px; }
.bar{ padding: 0px 15px; }
.colume{flex-direction: column;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.strong-light{font-weight: 600;}
.strong{font-weight: bold;}
.highright{ background: #E3F2F9; padding: 4px; }
/* .row{margin:0px !important;} */

.w25{ width: 25%; }
.w21{ width: 21%; }
.w16{ width: 16%; }
.w100{ width: 100%; }

.font-red{ color:red; }
.font-blue{ color:blue; }
.font-big{ font-size: 7vw; }
.bg-white{ background:#fff; }
.bg-red{ background:red; }
.bg-gray{ background:#F1F1F1; }
.bg-dark-gray{ background:#80898D; }
.bg-skyblue{ background:#00AFD4; }
.bg-emerald{ background:#14C3B1; }
.bg-purple{ background:#623EB0; }
.bg-blue{background: #E8F0F3;}
.bg-title-01{background: #DBEAFF;}
.bg-title-02{background: #FFE7DB;}
.bg-title-03{background: #D4E9D9;}
.bg-title-04{background: #DFE5F5;}
.bg-company-01{
    background: #668DC5;
    border: 10px solid #DBEAFF;
}
.bg-company-02{
    background: #F1B293;
    border: 10px solid #FFE7DB;
}
.bg-company-03{
    background: #517057;
    border: 10px solid #D4E9D9;
}
.bg-company-04{
    background: #7482B2;
    border: 10px solid #DFE5F5;
}
.oh{ overflow:hidden; }
.bold{ font-weight: bold; }
.text-left{text-align:left}
.text-center{text-align:center !important;}
.flex-start{ justify-content: flex-start; }
.flex-end{ justify-content: flex-end; }

.w33{ width:33.3%}
.w50{ width:50%}

.pl15{ padding-left: 15px; }

.pd10{ padding: 10px 0px; }
.pd15{ padding: 15px 0px; }
.pd25{ padding: 25px 0px; }
.pd35{ padding: 35px 0px; }
.pd50{ padding: 50px 0px; }
.pd75{ padding: 75px 0px; }
.pd100{ padding: 100px 0px; }

.mt10{ margin-top: 10px; }
.mt15{ margin-top: 15px; }
.mt25{ margin-top: 25px; }
.mt35{ margin-top: 35px; }
.mt50{ margin-top: 50px; }
.mt75{ margin-top: 75px; }
.mt100{ margin-top: 100px; }
.mt2vw{ margin-top: 2vw; }

.mobile-menu-button {
    background: transparent;
    border-radius: 8px;
    font-size: 20px;
    color:#fff
}

.mobile-menu, .mobile-menu a{color:#fff}

@media screen and (max-width:1600px) {
    .wrap {
        font-size: 16px;
    }    

    /* .header .menu{width: 600px;} */

    .panel-padding{padding:80px 0px;}

    .year-box .round{
        width: 18vw; 
        height: 18vw; 
        border-radius: 14vw; 
    }
}

@media screen and (max-width:1300px) {
    .wrap {
        font-size: 14px;
    }     

    /* .header .menu{width: 500px;} */
    
    .panel-padding{padding:60px 0px;}

    .quick-bar{
        display: none;
    }

    .year-box .round{
        width: 16vw; 
        height: 16vw; 
        border-radius: 13vw; 
    }
}



/* 타블렛 */
@media screen and (max-width:1023px) {
    .wrap {
        font-size: 14px;
    }    

    /* .header .menu{width: 400px;} */

    .inner-box{
        width:80vw;
    }

    .main-contants-1 > .box{
        width:25.5vw;
    }

    .main-contants-2 > .row > .sub-box{
        width: 24vw;
        height: 24vw;
        border-radius: 12vw;
    }

    .sub-contants > .contents-row > .half-box{
        width:39vw;
    }

    .sub-contants > .contents-row > .half-box2{
        width:36vw;
    }

    .sub-contants > .contents-row > .three-box {
        width: 24vw;
    }

    .year-box .round{
        width: 20vw; 
        height: 20vw; 
        border-radius: 10vw; 
    }

    .panel-padding{padding:40px 0px;}

    .bar {
        padding: 0px 15px;
    }

    .flex-end{ justify-content: flex-start;  }
    
}

/* 모바일 */
@media screen and (max-width:767px) {

    /* header */
    #headers { height: 50px; }
    .header .menu > ul > li { width: 19vw; }
    .header .menu {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
    }

    .header .logo {
        top: 0px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    #header_box_pc{display: none;}
    #header_box_mobile{display: flex;}

    .navbar{
        margin-bottom:0px !important;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .navbar-nav>li>a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        font-weight: bold;
        font-size: 16px;
    }

    /* main */
    .main-img{ height: 350px; }
    .point-title { font-size: 1.2em; }
    .main-contants-1 > .box {
        width: 38.5vw;
        height:auto;
        padding: 10px;
    }
    .main-contants-1 > .box p { padding: 10px 0px 5px 0px; }
    .main-contants-2 > p { margin-bottom:15px; }

    /* footer */
    .footer > .inner-box { flex-direction: column; }
    .footer .bar{height:5px; display: block; opacity: 0;}
    .footer .footer-left { margin-bottom: 10px; flex-basis: auto; flex-grow: 0; width:100%; }
    .footer .footer-right { text-align: left; flex-basis: auto; flex-grow: 0; width:100%; }
    .footer .copyright{margin-top:5px;}
    /* .footer .panel-padding {padding:30px} */
    .footer-right-box{flex-direction: column;}
    .footer-right-box .pl15{padding-left: 0px;}

    .main-contants-2 > .row { flex-direction: column; }    
    .main-contants-2 > .row > .sub-box{        
        width: 100%;
        border-radius: 10px;
        background-color: #F6F6F6;
        display: flex; 
        flex-direction: row;
        align-items: center;
        height: auto;
        margin-bottom: 10px;
        padding: 15px 15px 15px 0px;
    }
    .main-contants-2 > .row > .sub-box > p {
        justify-content: center;
        align-items: center;
        flex-basis: 25%;
    }
    .main-contants-2 > .row > .sub-box > .title {
        flex-grow: 1;
        flex-basis: 65%;
        font-weight: bold;
        font-size: 0.8em;
        line-height: 1.2;
        text-align: left;
        display: flex;
        flex-direction: column;
        font-weight: normal;
    }

    .main-contants-2 > .row > .sub-box > .text {
        flex-grow: 1;
        flex-basis: 65%;
        text-align: left;
        line-height:1.4;
        font-size: 0.8em;
        padding:20px;
    }
    .main-contants-1 > .box > .icon{ flex-basis: 70px; }
    .main-contants-1 > .box p{ flex-basis: 30px; }

    /* layout */
    .panel-padding{padding:30px 0px;}
    .inner-box .mobile_view{ display: flex !important;}
    .inner-box .pc_view{display: none !important; }


    /* sub */
    .company-main-img, .business-main-img, .solution-main-img, .service-main-img { height: 250px; }
    .company-main-img .inner-box .title, .business-main-img .inner-box .title, .solution-main-img .inner-box .title, .service-main-img .inner-box .title { font-size: 4em; }
    .company-main-img .inner-box .text, .business-main-img .inner-box .text, .solution-main-img .inner-box .text, .service-main-img .inner-box .text { font-size: 2.5em; }
    .sub-contants > .company-img{display: none;}
    .sub-contants > .company-text{flex-basis:100%; padding-left:0}
    .sub-contants > .title, .sub-contants > .company-text > .title { font-size: 1.3em; }
    /* .addr table .title{ width:120px; }  */
    .sub-contants > .contents-row > .half-box {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }
    .sub-contants > .contents-row > .half-box > .title-box {
        padding-left: 0;
        justify-content: flex-start;
        flex-basis: auto;
    }
    .sub-contants > .contents-row > .half-box > .text-box {flex-basis: auto;}  
    
    .solution.contents-row{ flex-direction: column;}  
    .solution.contents-row .three-box{ width:100%; margin-top:10px;}  
    .solution.contents-row .three-box:first-child{ margin-top:0px;}  
    .googlemap-pc{display: none;}
    .googlemap-mobile{display: block;}
    .three-box > .icon > img {width:24px;}
    .sub-contants > .contents-row > .solution-img{display: none;}
    .sub-contants > .contents-row > .solution-text{flex-basis: 100%; padding-left:0;}
    .sub-contants > .contents-row > .solution-text > ul > li { padding: 7px 10px 7px 25px;}
    .sub-contants > .contents-row > .monitor-box-left{ display: none; flex-basis: auto;}
    .sub-contants > .contents-row > .monitor-box-right{ flex-basis: 100%;}
    .sub-contants > .contents-row > .half-box2 > .title-box { display: none; flex-basis: auto;}
    .sub-contants > .contents-row > .half-box2 > .text-box { flex-basis: 100%;}
    .sub-contants > .contents-row > .half-box2 > .text-box > p { display: flex; align-items: center;}
    #box_t1_contens, #box_t2_contens_1, #box_t2_contens_2{ flex-direction: column;}
    #box_t1_contens .box-t1,  #box_t2_contens_1 .box-t2,#box_t2_contens_2 .box-t2{ width: 100%; margin-top: 10px;}
    #box_t1_contens .box-t1 h3{ font-size: 20px;}
    .year-row{padding:0px;}
    .year-box{ align-items: flex-start; padding: 0px 30px 0px 0px;}
    .year-text-box{ padding: 0px 0px 10px 10px;}
    .year-text-box ul li {
        height: auto;
        padding-top: 5px;
    }
    .year-box .round {
        font-size: 1.4em;
    }
    .year-row .center-box{ flex-basis: 15%; }
    #box_business_contens_2{ margin-top: 0px; }
    #box_business_contens_1, #box_business_contens_2{ flex-direction: column;}
    #box_business_contens_1 .half-box, #box_business_contens_2 .half-box  {
        width: 100%;
        margin: 0px 0px 10px 0px;
    }
    #box_business_contens_1 ul, #box_business_contens_2 ul {
        margin-bottom:0px;
    }


    /* etc */
    .half-box2-mobie-icon{ display: inline-block; }
    .mt15{margin-top:5px}
    .mt25{margin-top:10px}
    .mt35{margin-top:15px}
    .mt50{margin-top:30px}
    .pd25 {padding: 15px 0px;}
    .flex-end{ justify-content: flex-start;  }
    .bg-company-01{
        background: #668DC5;
        border: 3px solid #DBEAFF;
    }
    .bg-company-02{
        background: #F1B293;
        border: 3px solid #FFE7DB;
    }
    .bg-company-03{
        background: #517057;
        border: 3px solid #D4E9D9;
    }
    .bg-company-04{
        background: #7482B2;
        border: 3px solid #DFE5F5;
    }
}