@charset 'utf-8';
.page-content { padding: 0 0 150px; font-size: 17px;}
.page-content p { margin: 0; word-break: keep-all;}
.page-content article:not(:last-of-type) { padding: 0 0 80px;}
.page-content article h3 { padding: 0 0 20px; font-size: 20px;}
.greeting span { display: block;}
.greeting p {padding: 0 0 25px; }
.greeting .p1 { padding: 0 0 30px; font-size: 30px; line-height: 1.266;  font-weight: 500;}
.greeting  b { color: #06308f; font-weight: 500;}
.greeting .sing { padding-top: 20px; text-align: right;}


@media(max-width:576px){
    .page-content {  font-size: 15px;}
}


@media (max-width:991px){
    .greeting .p1  { font-size: 28px; ;}   
}
@media (max-width:768px){
    .greeting .p1  { font-size: 26px; ;}   
    .greeting p {padding: 0 0 20px; }
}
@media (max-width:576px){
    .greeting .p1  { font-size: 22px; ;}   
    .greeting p {padding: 0 0 20px; }
}
@media (max-width:480px){
    .greeting br { display: none;}
}



.root_daum_roughmap { width: 100%;}
.root_daum_roughmap .map_border { display: none;}
.root_daum_roughmap .cont { display: none;}
.location .con1 > .map { border: 1px solid var(--grayE1);}
.location dl { display: flex; flex-wrap:wrap; margin: 50px 0 0; font-size: 16px; border-top: 2px solid #0a3281;}
.location dl dt,
.location dl dd { padding: 10px ; border-right: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf;}
.location dl dt { width: 120px; background: #f9f9f9; font-weight: 500; text-align: center;}
.location dl dd { width: calc(50% - 120px); background: #fff;   }
.location dl dd:nth-of-type(even) { border-right: none;}
.location dl dt span { display: inline-block;}

@media (max-width:991px){
    .location .add { font-size: 28px; }
    .location .tel { font-size: 22px;}
}
@media (max-width:768px){
    .location .add { padding: 40px 0 10px; font-size: 22px; }
    .location .tel { padding: 0 0 40px; font-size: 20px;}
    .location dl dt,
    .location dl dd { padding: 12px 20px  }
    .location dl dt { width: 160px}
    .location dl dd { width: calc(100% - 160px);}
    .location dl dd { border-right: none;}
}

@media(max-width:576px){
    .location .add { padding: 30px 0 10px; font-size: 20px; }
    .location .tel { padding: 0 0 30px; font-size: 18px;}
    .location dl { font-size: 15px;}
    .location dl dt ,
    .location dl dd { padding: 10px  }
    .location dl dt { width: 100px}
    .location dl dd { width: calc(100% - 100px);}
}

.history{
    .his_wrap{
        position: relative;        
        &:after{
            content:'';
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 1px;
            height: 100%;
            background: var(--grayE1)
        } 
        .flex{          
            &+.flex{
                margin-top: 5rem;
            }
        }      
    }
    .his {
        .years {
            position: relative;
            margin-bottom: 3rem;
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 0.9;            
            &:after {
                content: "";
                z-index: 2;
                display: block;
                position: absolute;
                left: -3rem;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 2.1rem; height: 2.1rem;
                border: 0.4rem solid #16375e;
                border-radius: 50%;
                background: #fff;
            }
        }
         
        .list {
            display: flex;            
            flex-wrap:wrap;
            margin: 0;
            dt,dd {
                margin-bottom: 1rem; 
                &:last-of-type {
                    margin-bottom: 0;
                }
                @media(width<=600px){
                    margin-bottom: .5rem; 
                }
            }
            dt {
                position: relative;
                width: 7rem;
                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 0.9rem;
                    height: 0.9rem;
                    z-index: 2;
                    left: -3rem;
                    top: 0.9rem;
                    transform: translateX(-50%);
                    background: #006fc0;
                    border-radius: 50%;
                }
            }
            dd {
               width: calc(100% - 7rem);
               word-break: keep-all;
            }
        }  
    } 
    @media(width>600px){
        .flex{
            .his{
                width: 50%;                  
            }
              
            &:nth-of-type(odd){                
                text-align: right;                
                .his {
                    padding: 0 3rem 0 0;
                    .years {
                        &:after {
                            transform: translate(50%, -50%);
                            right: -3rem;
                            left: inherit
                        }
                    }
                    .list {
                        flex-direction: row-reverse;
                        dt{
                            &:after{
                                left:inherit;
                                right: -3rem;
                                transform: translateX(50%);
                            }
                        }
                    }
                }
            }
            &:nth-of-type(even){
                flex-direction: row-reverse;
                .his{
                    padding: 0 0 0 3rem;
                }
            }
        }
    }
    @media(width<=600px){
        .flex{        
            position: relative;
            z-index: 2;
            padding: 5rem;
            border: 1px solid var(--grayE1);
            background: var(--white);
            .years {
                font-size: 2.5rem;
                &:after{
                    left: -2rem;
                    width: 1.5rem;
                    height: 1.5rem;
                   
                }
            }
            .his .list dt{
                &:after{
                    left: -2rem;
                    top: .7rem;
                    width: 0.7rem;
                    height: 0.7rem;
                    transform: translateX(-50%);
                }
            }
        }  
    }

}

.prod{
    &.controller_all .list{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap:4rem 3rem;
        li {
            text-align: center;            
            .img {
                padding: 4rem 1rem;
                background: var(--grayF5);
                border: 1px solid var(--border-color);            
                img {
                    transition: .3s;
                }
            }
            p{
                padding: 2rem 0 .5rem;
                font-size: 2rem;
                font-weight: 500;
                line-height: 1.2;                
                color: var(--font-color11);
            }
            span{                
                font-size: 1.6rem;                
                color: var(--font-color55);
            }
            &:hover{
                .img img {
                    transform: scale(1.05);
                }
            }
        }
        @media(width<=768px){
            gap:4rem 2rem;
            grid-template-columns: repeat(2,1fr);
        }
        @media(width<=576px){
            gap:3rem 1.5rem;
            li {
                p {
                    font-size: 1.8rem;
                }
            }
        }
        @media(width<=440px){
            grid-template-columns: 1fr;
            li {
                img {
                    max-width: 30rem;
                }
                p {
                    font-size: 1.8rem;
                }
            }
        }
    }
    .prod_img {        
        padding: 5rem 2rem;
        margin-bottom: 7rem;
        text-align: center;
        background: var(--grayF5);
        border: 1px solid var(--border-color);
        &.flex {
            display: flex;
            justify-content: center;
            @media(width<=540px){
                gap:4rem;                
                flex-direction: column;
            }
        }        
    }    
    .tit {
        position: relative;
        padding: 0 0 0 2rem;
        margin-bottom: 2rem;
        text-align: left;
        line-height: 0.9;
        font-size: 2.2rem;
        font-weight: 500;
        &:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 1rem;
            height: 100%;
            background: var(--primary-color);
            ;
        }
    }
    .detail{
        margin-bottom: 7rem;
    }
    
    .spec {
        overflow-x: auto;
        table {
            width: 100%;
            min-width:44rem;            
            th,td {
                padding: 1rem;            
                text-align: center;
                border: 1px solid var(--border-color);                
            }   
            th {
                font-weight: 400;
                background: var(--grayF5);
            }
            thead {
                th {
                    font-weight: 500;
                    color: var(--white);
                    background: var(--secondary-color);
                }
            }
            &.table2{
               
                th { text-align: center;}
                td { text-align: left;}
            }
            
        }
    }
    .art{
        &+.art {
            margin-top: 5rem;
            padding-top: 5rem;
            border-top: 1px solid var(--border-color);
        }
    }
}