#idx_wrapper{ height: 100vh; z-index: 4;}
/* 메인슬라이더 */
#visual{position:relative; width:60%; height:100vh; float: left; overflow:hidden;}
body.on #visual{position: fixed;}
a{cursor:pointer}

#visual .sliderbx{ z-index:1;width:100% !important; height:100vh; position:absolute;}
#visual .sliderbx li{ width:100% !important; height:100%; position: relative;}
#visual .sliderbx li::after{
    position:absolute;
    top: 0;
    left: 0;
    content: '';
    display: inline-block;
    background: #444;
    opacity: 0.6;
    width: 100%;
    height: 100%;
}
#visual .sliderbx li.mv01{background:url(../img/main/mvisual01.jpg); background-repeat:no-repeat; background-position: center; background-size:cover; }
#visual .sliderbx li.mv02{ background:url(../img/main/mvisual02.jpg); background-repeat:no-repeat; background-position: left; background-size:cover;}
#visual .sliderbx li.mv03{ background:url(../img/main/mvisual03.jpg); background-repeat:no-repeat; background-position: center; background-size:cover; }
#visual .sliderbx li.mv04{background:url(../img/main/mvisual04.jpg); background-repeat:no-repeat; background-position: center; background-size:cover; }
#visual .sliderbx li.mv05{ background:url(../img/main/mvisual05.jpg); background-repeat:no-repeat; background-position: center; background-size:cover;}
#visual .sliderbx li.mv06{ background:url(../img/main/mvisual06.jpg); background-repeat:no-repeat; background-position: center; background-size:cover; }
#visual .sliderbx li.mv07{ background:url(../img/main/mvisual07.jpg); background-repeat:no-repeat; background-position: center; background-size:cover; }
#visual .txt{position:absolute; top:50%; left:50%; z-index:2; transform:translate(-50%, -50%); color:#fff;}
#visual .txt > h3{font-size:3em; font-weight:400; line-height:1em;}
#visual .txt > h2{font-size:4em; font-weight:600; line-height:1em; padding: 20px 0 0;}
#visual .txt > p{display:block; padding:20px 0 0; font-size:18px; font-weight:300; line-height: 1.5em;}
#visual .txt > p > span{ position: relative; z-index: 1;}
/*#visual .txt > p > span::after{ position: absolute; content: ''; top: -5px; left: -15px; width: calc(100% + 30px); height: calc(20px + 10px); background: #1b2d5a; z-index: -1; padding: 5px; border-radius: 30px;}*/

#visual .area_bn_wrap{position:absolute; width:1400px; height:100%; left: 50%; transform: translateX(-50%); z-index: 14;}
#visual .area_bn_wrap .area_bn{position:absolute; top:50%; right:0; transform:translateY(-50%); box-shadow: 4.589px 6.553px 22.75px 12.25px rgba(0, 0, 0, 0.3); z-index: 13; width: 560px;}
#visual .area_bn_wrap .area_bn .area_img{width:100%; height:auto;}
#visual .area_bn_wrap .area_bn .area_img img{width:100%; height:100%;}
#visual .area_bn_wrap .area_bn a{position:relative; display:block; padding:27px 25px; box-sizing:border-box; background:#fff; font-size:15px; font-weight:400; color:#333;}
#visual .area_bn_wrap .area_bn a > i{position:absolute; right:0; bottom:0; display:block; width:75px; height:75px; background:#1C2D5A url(../img/main/icon_arrow.svg)no-repeat center; background-size:7px 12px;}

#visual .bx-controls{}
#visual div.bx-pager{z-index:50; position:absolute; top:50%; left:50px; transform:translateY(-50%);}
#visual div.bx-pager div{margin:0 0 30px;}
#visual div.bx-pager div:last-child{margin:0;}
#visual div.bx-pager div a{position:relative; font-size:12px; font-weight:400; color:#fff; transition:all 0.3s ease; opacity:0.4;}
#visual div.bx-pager div a.active{opacity:1; font-weight:600;}
/*#visual div.bx-pager div a:after{content:''; position:absolute; left:50%; bottom:-25px; width:5px; height:5px; background:#fff; border-radius:50%; transform:translateX(-50%); opacity:0.4;}*/
#visual div.bx-pager div a:before{content:'0'; display:inline; width:auto; height:auto;}
#visual div.bx-pager div:last-child a:after{display:none;}

#visual .bx-controls-direction{display:none;}
.scrolldown{position:absolute; bottom:30px; right:0; transform: translate(0px, -50px) rotate(-90deg); z-index:52; font-weight:500; color:#fff; text-align:center;
    -webkit-animation: floating 4s -1s ease-out infinite;
    animation: floating 4s -1s ease-out infinite; 
}
@keyframes floating {
	50%{
		transform:translate(0px, -100px) rotate(-90deg);
        opacity: 0.5
	}
	0, 100%{
		transform:translate(0px, -50px) rotate(-90deg);
        opacity: 0.6;
	}
}

.scrolldown a{position:relative; display:block; position:relative; padding:39px 5px; box-sizing:border-box;}
.scrolldown a > i{position:relative; font-style:normal; font-weight:200; font-size:12px; color:#fff;}
.scrolldown a > i:before{content:""; position:absolute; top:5px; left:-30px; width:14px; height:9px; margin-top:-4.5px; background:url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%; background-size:cover; transform: rotate(90deg);}
.scrolldown a:before{display:none; content:""; position:absolute; top:50%; left:35px; width:14px; height:9px; margin-top:-4.5px; background:url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%; background-size:cover;}



@media (max-width: 1600px) {
	.inr{width:1050px;}
	#visual .area_bn_wrap{width:1050px;}
    #visual .area_bn_wrap .area_bn{width:560px; left:50%; transform:translate(-50%, -10%); margin: 0 auto;}
	#visual .bx-controls{left:calc(50% - 500px); left:-webkit-calc(50% - 500px);}
    #visual .txt > h2{
        font-size: 3.5em;
    }
	.scrolldown{}
	.line .left{left:calc(50% - 500px); left:-webkit-calc(50% - 500px);}
	.line .right{right:calc(50% - 500px); right:-webkit-calc(50% - 500px);}

	/* #visual .txt{min-width:1050px;} */
/*	#visual .txt{top:43%; text-align:center; transform:translate(-50%, -100%);}*/
	#visual .txt > h3{font-size:1.8em; line-height: 1.3em;}
}

@media (max-width: 1500px) {
	.inr{width:90%;}
	#visual .area_bn_wrap{width:90%;}
	#visual .bx-controls{left:calc(50% - 40%); left:-webkit-calc(50% - 40%);}
	.scrolldown{}
	.line .left{left:calc(50% - 40%); left:-webkit-calc(50% - 40%);}
	.line .right{right:calc(50% - 40%); right:-webkit-calc(50% - 40%);}

	#visual .txt{ }
}

@media (max-width: 1400px) {
	.inr{width:100%;}
	#visual .line{display:none;}
	.scrolldown{}
	#visual .bx-controls{left:200px;}
	#visual .txt{ left: 80px; transform: translate(0,-50%);}
    
    #visual div.bx-pager{
        top: unset;
        bottom: 100px;
        left: 80px;
        transform: unset;
    }
    #visual div.bx-pager div {
        margin: 0 25px 0 0;
        display: inline-block;
    }
    
}

@media (max-width: 1400px) {
/*
	#visual .txt > h3{font-size:3.4em;}
	#visual .txt > h2{font-size:5.8em;}
*/
/*	#visual .txt > p{font-size:16px;}*/
    
}
@media (max-width:1100px){
    #visual .txt > h2{
        font-size: 3em;
    }
}
@media (max-width: 1024px){
	#visual .txt{min-width: 40%;}
	#visual .txt > h3{font-size:1.5em; line-height: 1.3em;}
	#visual .txt > h2{ }
/*	#visual .txt > p{font-size:15px;}*/
}

@media (max-width:900px){
	#visual .txt{min-width:50%; padding:0}
	#visual .area_bn_wrap .area_bn a{padding:22px 20px;}
	#visual .area_bn_wrap .area_bn a > i{width:67px; height:67px;}
	.scrolldown a{padding:32px 5px;}
	#visual .bx-controls{width:150px; height:86px;}
	#visual div.bx-pager div{margin:0 27px 0 0; display: inline;}
}

@media (max-width:768px){
    #visual{
        width: 100%;
    }
    body.on #visual{
        position:relative;
    }
    #visual .txt{
        left: 50px;
    }
    #visual div.bx-pager{
        left: 50px;
    }
	#visual .area_bn_wrap .area_bn{width:560px; left:50%; transform:translate(-50%, -10%); margin: 0 auto;}
	.scrolldown{width:70px; height:70px;
    transform: translate(0px, 0px) rotate(0deg);}

    
    @keyframes floating {
        50%{
            transform:translate(0px, -50px) rotate(0deg);
            opacity: 0.5
        }
        0, 100%{
            transform:translate(0px, 0px) rotate(0deg);
            opacity: 0.6;
        }
    }

	.scrolldown a > i{display:none;}
	.scrolldown a{height:100%; padding:5px;}
	.scrolldown a:before{display:block; left:50%; margin-left:-7px;}
	#visual .bx-controls{left:70px; height:70px;}
	#visual div.bx-pager div a{width:6px; height:6px;}
	#visual div.bx-pager div a:after{width:26px; height:26px; margin-top:-10px; margin-left:-10px;}
    
    #visual .sliderbx li::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #333;
        opacity: 0.4;
        content: '';
        transition: all 3s;
    }
    #visual .sliderbx li.mv01,
    #visual .sliderbx li.mv02,
    #visual .sliderbx li.mv03{
        background-position: 80% top;
    }
}

@media (max-width:500px){
	#visual .txt{min-width:70%; left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);}
    #visual .sliderbx li.mv01{ background-position: center; background-size:cover; }
    #visual .sliderbx li.mv02{ background-position: center; background-size:cover;}
    #visual .sliderbx li.mv03{ background-position: center; background-size:cover; }
    #visual .sliderbx li.mv04{ background-position: center; background-size:cover; }
    #visual .sliderbx li.mv05{ background-position: center; background-size:cover;}
    #visual .sliderbx li.mv06{ background-position: center; background-size:cover; }
    #visual .sliderbx li.mv07{ background-position: center; background-size:cover; }
	#visual .txt > h3{font-size:1.5em;}
	#visual .txt > h2{font-size:2em;}
	#visual .txt > p{word-break:keep-all; font-size: 15px;}
	#visual .area_bn_wrap .area_bn{width:90%;}
	#visual .area_bn_wrap .area_bn a{padding:19px;}
	#visual .area_bn_wrap .area_bn a > i{width:59px; height:59px;}
	.scrolldown{
        width:60px; height:60px;
        right: unset;
        left: 50%;
        transform: translate(-50%, 0px) rotate(0deg);
    }
    @keyframes floating {
        50%{
            transform:translate(-50%, -50px) rotate(0deg);
            opacity: 0.5
        }
        0, 100%{
            transform:translate(-50%, 0px) rotate(0deg);
            opacity: 0.6;
        }
    }
	#visual .bx-controls{left:60px; width:100px; height:60px;}
    #visual div.bx-pager{
        left: 50%;
        bottom: 20%;
        transform: translate(-50%,-50%);
    }
	#visual div.bx-pager div{margin:0 20px 0 0;}
	#visual div.bx-pager div a{width:5px; height:5px;}
	#visual div.bx-pager div a:after{width:24px; height:24px; margin-top:-9px;}
    
    
}

@media (max-width:450px){
	#visual .txt{min-width:85%; text-align: center; }
    #visual .txt > p > span{ display: table; margin: 15px auto 0;}
/*
	#visual .txt > h3{font-size:1.2em;}
	#visual .txt > h2{font-size:2.5em;}
	#visual .txt > p{font-size:14px; padding:5px 0 0;}
*/
/*	#visual .area_bn_wrap .area_bn{width:190px;}*/
	#visual .area_bn_wrap .area_bn a{padding:15px; font-size:14px;}
	#visual .area_bn_wrap .area_bn a > i{width:51px; height:51px;}

}

#content{clear: both; position:relative; background: #fff; z-index: 5;}

/* 제품소개 */
#area_product{position:relative;}
#area_product .inr{z-index:1;}
#area_product .list{}
#area_product .list li{float:left; width:calc(100% / 3);  width:-webkit-calc(100% / 3); height:390px; background:transparent; box-sizing:border-box; transition:all 0.3s ease;}
#area_product .list li > a{display:block; padding:70px 50px; box-sizing:border-box;}
#area_product .list li > a > em{font-style:normal; font-size:14px; font-weight:bold; color:#1C2D5A; line-height:1.5em; transition:all 0.3s ease;}
#area_product .list li > a > h2{display:block; padding:1px 0 6px; font-size:19px; font-weight:500; color:#333; line-height:1.5em; transition:all 0.3s ease;}
#area_product .list li > a > .area_icon{width:31px; height:31px; transition:all 0.3s ease;}
#area_product .list li:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01.svg)no-repeat center; background-size:cover;}
#area_product .list li:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02.svg)no-repeat center; background-size:cover;}
#area_product .list li:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03.svg)no-repeat center; background-size:cover;}
#area_product .list li > a > span{display:block; padding:120px 0 0; font-style:normal; font-size:15px; font-weight:400; color:#999; line-height:1.5em; transition:all 0.3s ease;}
#area_product .list li:hover{background:url(../img/main/product_on01.jpg)no-repeat center; background-size:cover;}
#area_product .list li:hover > a > em{color:#fff;}
#area_product .list li:hover > a > h2{color:#fff;}
#area_product .list li:hover > a > span{color:#fff;}
#area_product .list li:hover:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01_on.svg)no-repeat center; background-size:cover;}
#area_product .list li:hover:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02_on.svg)no-repeat center; background-size:cover;}
#area_product .list li:hover:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03_on.svg)no-repeat center; background-size:cover;}


@media (max-width: 1024px) {
	#area_product .list li{height:320px;}
	#area_product .list li > a{padding:50px;}
	#area_product .list li > a > span{padding:80px 0 0;}
}
@media (max-width: 900px) {
	#area_product .list li > a{padding:40px;}
}
@media (max-width: 768px) {
	#area_product .list li{width:100%; height:auto; background:#fff; border-bottom:1px solid rgba(0,0,0,0.05);}
}
@media (max-width: 550px) {
	#area_product .list li > a{padding:30px;}
	#area_product .list li > a > span{padding:40px 0 0;}
}
@media (max-width: 400px) {
	#area_product .list li > a{padding:20px;}
}

/*회사소개*/
#area_company{position:relative; float: right; width:40%; height: auto; padding: 200px 80px; text-align: left; top: 0; right: 0; 
    background:#1c43af; box-sizing: border-box;}
#area_company .area_txt{padding:100px 65px; box-sizing:border-box; width:1400px; color:#333; background: #fff; margin: 0 auto;}
#area_company .area_txt>span{display:block; font-size:20px; font-weight:500; color:#333; text-align: center;}
#area_company .area_txt>h3{display:block; padding:10px 0 25px; font-size:40px; font-weight:bold; color:#333; text-align: center;}

#area_company .area_txt p{font-size:16px; font-weight:400; color:#333; line-height:1.7em; word-break:keep-all;}
#area_company .area_btn{display:inline-block; padding:27px 0px; box-sizing:border-box; font-size:15px; font-weight:400; color:#333; }
#area_company .area_btn > i{position:absolute; right:0; bottom:0; display:block; width:75px; height:75px; background:#1C2D5A url(../img/main/icon_arrow.svg)no-repeat center; background-size:7px 12px;}


#area_company .lt_more{
}
#area_company .lt_more a{
}

/* tab  */
.tabs{margin:40px auto 0; width:auto; display: table;}
.tabs:after{content:''; display:block; clear:both;}
.tabs li{float:left; margin:0 10px 0 0; padding:0 11px; height: 40px; line-height: 40px;  background:#ddd; box-sizing:border-box; border-radius:50px; transition:all 0.3s ease 0s; cursor:pointer; text-align:center;}
.tabs li span{font-size:14px; font-weight:300; line-height:1.3em;}
.tabs li.active{background:#EA5A4F; color:#fff; box-shadow: 0px 3px 7.36px 0.64px rgba(25, 36, 72, 0.32);}
.tabs li.active span{color: #fff;}
.tabs li:hover{background:#EA5A4F; color:#fff;}

.tab_content:after{content:''; display:block; clear:both;}

@media (max-width: 1600px) {
	#area_company .area_img{width:calc(50% + 500px); width:-webkit-calc(50% + 500px);}
	#area_company .area_txt{width:calc(100% - 166px); width:-webkit-calc(100% - 166px);}
	#area_company .area_btn{width:calc(50% - 500px); width:-webkit-calc(50% - 500px);}
}
@media (max-width: 1500px) {
	#area_company .area_img{width:95%;}
	#area_company .area_txt{width:calc(100% - 15%); width:-webkit-calc(100% - 15%); min-height:355px; padding:66px 50px;}
	#area_company .area_txt p br{display:none;}
	#area_company .area_btn{width:240px; border-top:none;}
}
@media (max-width: 1400px) {
    
    #area_company{
    }
	#area_company .area_img{width:100%;}
	#area_company .area_txt{padding:66px 50px;}
}
@media (max-width: 1400px) {
    #area_company .area_tit{ width: 90%;}
	#area_company .area_txt{width:100%; padding:53px 50px; position: relative;}
}
@media (max-width: 1100px){
    #area_company{
        padding: 150px 50px;
    }
}
@media (max-width: 1024px) {
	#area_company .area_txt{padding:50px 40px;}
	#area_company .area_btn{width:22%; padding:27px 20px; padding-left: 0;}
}
@media (max-width: 850px) {
	#area_company .area_txt{padding:40px;}
	#area_company .area_txt h3{font-size:35px;}
	#area_company .area_btn{width:33.33%;}
}

@media (max-width: 768px) {
    #area_company{
        width: 100%;
        padding: 100px 50px;
    }
	#area_company .area_img{height:0; padding-bottom:50%;}
	#area_company .area_txt{position:relative; width:100%; padding:50px 40px;min-height:auto;}
	#area_company .area_txt p {margin:0 0 0;}
	#area_company .area_btn{width:33.33%; top:unset; border-bottom:1px solid rgba(0,0,0,0.05);}
	#area_company .area_txt p br{display:block;}
	#area_company .area_btn > i{bottom:-1px; height:76px; border-bottom:1px solid #1f2756;}
}
@media (max-width: 650px){
	#area_company .area_btn{width:200px; padding:21px 20px 40px 0;}
	#area_company .area_btn > i{width:64px; height:64px;}
    #area_company .area_tit h3{
        font-size: 33px;
    }
}
@media (max-width: 550px){
    #area_company{
    }
	#area_company .area_txt{padding:40px 30px;}
	#area_company .area_txt h3{padding:10px 0 15px; font-size:30px;}
	#area_company .area_txt p{font-size:15px;}
	#area_company .area_txt p br{display:none;}
    
    .tabs{
        width: 51%;
    }
    .tabs li{
        margin: 0 10px 20px 0;
    }
    .tabs li:nth-child(3n){
        margin-right: 0;
    }
}
@media (max-width: 500px){
    #area_company {
        padding: 80px 30px;
    }
    .area_location > h2{
        font-size: 22px;
    }
}
@media (max-width: 450px){
	#area_company .area_txt h3{font-size:28px;}
}
@media (max-width: 400px){
	#area_company .area_txt{padding:30px 20px;}
	#area_company .area_txt h3{font-size:25px;}
    
    .tabs{
        width: 61%;
    }
    .tabs li{
        margin: 0 8px 20px 0;
    }
}


.fa-angle-right{
    margin-left: 10px;
    font-size: 18px;
}


/* 제품소개 */
.tab_content .list{ width: 100%; margin: 40px auto 0; display: table;}
.tab_content .list li{
    float:left; 
    width: calc(100%/2 - 20px);
    margin: 0 40px 20px 0;
    background:transparent; box-sizing:border-box; transition:all 0.3s ease; }
.tab_content .list li:nth-child(2n){
    margin-right: 0;
    position: relative;
    top: 100px;
}
.tab_content .list li > a{display:block; box-sizing:border-box; transform: translateY(0); transition: all 1s;}
.tab_content .list li:hover > a{
    transform: translateY(-15px); transition: all 1s;
}


.tab_content .list li .img_wrap{
    height: auto;
    overflow: hidden;
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}
.tab_content .list li img {
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: all 1s;
    opacity: 0.6;
}

.tab_content .list li:hover img {
    transform: scale(1.05);
    transition: all 1s;
    opacity: 1;
}
.tab_content .list li em{
        display: block;
    padding: 15px 0 0;
    line-height: 1em;
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    color: #5654A2;
}
.tab_content .list li h2{
    font-size: 20px;
    font-weight: 300;
    padding: 20px 10px;
}
.tab_content .list li h2>span{
    font-weight: 400;
}

.tab_content .list li > a > .area_icon{font-size:31px; transition:all 0.3s ease;}
/*
.tab_content .list li:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01.svg)no-repeat center; background-size:cover;}
.tab_content .list li:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02.svg)no-repeat center; background-size:cover;}
.tab_content .list li:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03.svg)no-repeat center; background-size:cover;}
*/
.tab_content .list li > a > img{
    width: 100%;
    opacity: 0.6;
    transition: all 2s;
}
.tab_content .list li:hover > a > img{
    opacity: 1;
    transition: all 2s;
}
.tab_content .list li > a > span{display:block; padding:11.5px 0 0; font-style:normal; font-size:15px; font-weight:400; color:#999; line-height:1.5em; transition:all 0.3s ease;}
/*.tab_content .list li:hover{background:url(../img/main/product_on01.jpg)no-repeat center; background-size:cover;}*/
/*
.tab_content .list li:hover > a > em{color:#fff;padding:40px 0 0;}
.tab_content .list li:hover > a > h2{color:#fff;}
.tab_content .list li:hover > a > span{color:#fff;}
*/
/*
.tab_content .list li:hover:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01_on.svg)no-repeat center; background-size:cover;}
.tab_content .list li:hover:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02_on.svg)no-repeat center; background-size:cover;}
.tab_content .list li:hover:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03_on.svg)no-repeat center; background-size:cover;}
*/
@media (max-width:1400px){
    .tab_content .list li h2{
        font-size: 15px;
        padding: 20px 0;
    }
}
@media (max-width: 1100px){
    .tab_content .list li{
        width: calc(100%/2 - 10px);
        margin: 0 20px 20px 0;
    }
}
@media (max-width: 1024px) {
	.tab_content .list li{}
	.tab_content .list li > a{}
	.tab_content .list li > a > span{padding:30px 0 0;}
    
    .tab_content .list li > a > img{
        opacity: 1;
    }
}
@media (max-width: 900px) {
	.tab_content .list li > a{padding:0;}
}
@media (max-width: 768px) {
	.tab_content .list li{width:calc(50% - 10px); height:auto;}
    .tab_content .list li > a > span{
        padding: 30px 0;
    }
    .tab_content .list li h2{
        font-size: 18px;
    }
    .tab_content .list li img{
        opacity: 1;
    }
}
@media (max-width: 550px) {
    .tab_content .list li{
    }
	.tab_content .list li > a{padding:0;}
	.tab_content .list li > a > span{padding:20px 0 30px;}
    
}
@media (max-widtH: 500px){
    .tab_content .list li h2 {
        font-size: 15px;
        padding: 20px 0 0;
    }

}
@media (max-width: 400px) {
    .tab_content .list{
/*        margin: 0 auto;*/
    }
    .tab_content .list li{
    }
	.tab_content .list li > a{padding:0;}
}


#gall_board{width:100%; padding: 100px 0; background: #ebebed; overflow: hidden;}
.area_gall{width: 100%;}

#area_board{width:100%; padding: 100px 0; background:#fff;}
#area_board .line.gray{z-index:0;}
#area_board .line.gray i:first-child{border-right:none;}
.area_board:after{content:''; display:block; clear:both; }
#area_board .area_btn{ border: 1px solid #eee; padding: 15px 30px; border-radius: 30px; margin: 40px 0 0; display: inline-block; color: #999;
}

#area_board .area_btn:hover{
    font-weight: 600;
    color: #444
}
#area_board .img_wrap img{
    width:100%;
    height: auto;
}

.area_location {
    color: #fff;
}

.greet {
    text-align: center;
}
.greet > em {
    color: #aaa;
    display: block;
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
}

.greet > h2 {
    color: #444;
    padding: 0;
    display: block;
    font-size: 29px;
    font-weight: bold;
    line-height: 1.5em;
}
.greet > .img_wrap{
    margin: 40px 0 0;
}
.greet > .area_icon {
    color: #444;
}

.greet .info_location span {
    color: #444;
}

.area_location .info_location em,
.area_location .info_location b {
    color: #444;
}
@media (max-width: 1600px) {
	.area_notice{width:calc(100% - 334px); width:-webkit-calc(100% - 334px);}
	.area_location{margin:80px 0 0; height:auto;}
	.area_location > a{padding:34px 40px;}
}
@media (max-width: 1500px) {
	.area_notice{width:calc(100% - 33.33%); width:-webkit-calc(100% - 33.33%);}
	.area_location{margin:80px 0 0;}
	.area_location > a{padding:60px 40px;}
}
@media (max-width: 1400px){
    #gall_board{
        padding: 53px 50px;
    }
}
@media (max-width: 1400px){
    #area_board{
        padding: 53px 0;
    }
    #gall_board{
        margin: 0;
    }

}
@media (max-width:850px){
}
@media (max-width: 768px) {
	.area_notice{width:100%;}
	.area_notice .area_btn > i{width:75px; height:74px;}
	.news_text{width:100%;}
}
@media (max-width: 650px) {
	.area_notice .area_btn > i{width:64px; height:64px;}
}
@media (max-width: 550px) {
    .greet > h2 {
        font-size: 20px;
        padding: 0 0 20px;
    }
    .greet > em{
        font-size: 20px;
        line-height: 1.3em;
    }
    .greet > .img_wrap{
        margin: 40px 0;
    }
}
@media (max-width:500px){
}
@media (max-width: 400px) {
    
}


#contants_wrap {
    width: 100%;
    height: auto;
    background: url(../img/main/yn_logo.png) no-repeat 90% top/20%, #fff;
    padding: 200px 0 160px;
    transition: all 3s;
    -webkit-animation: floating2 8s -1s ease-out infinite;
    animation: floating2 8s -1s ease-out infinite; 
}
#contants_wrap .con_text{
    font-family: 'Noto Sans KR';
}
    @keyframes floating2 {
    50%{
        background-position: 90% center;
    }
    0, 100%{
        background-position: 90% top;
    }
}
.bg_wrap{
    position:relative;
    width: 100%;
    height: auto;
    background:url(../img/main/contacts_bg.jpg); 
    background-repeat:no-repeat; background-position: center; background-size:cover;
}
.bg_wrap::after{
    content: '';
    display: inline-block;
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.6;
}
#contants_wrap h2{
    color: #444;
    font-size: 40px;
    line-height: 1.5em;
    display: block;
    margin: 0 0 40px;
}
#contants_wrap em{
    color: #444;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5em;
    display: block;
    font-style: normal;
}
#contants_wrap em.sub_tit{
    margin: 0 0 40px;
    color: #2a62ff;
}
#contants_wrap b{
    color: #2a62ff;
    font-weight: 600;
}
#contants_wrap .color_point{
    color: #222;
	font-size:1.20em
}
#contants_wrap .lt_more{
    margin: 40px 0 0;
    display: table;
    float: right;
}
#contants_wrap .lt_more a{
    color: #888;
}

@media (max-width:1400px){
    #contants_wrap {
        padding: 160px 80px;
        box-sizing: border-box;
    }
}
@media (max-width:1100px){
    #contants_wrap{
        padding: 150px 80px;
    }
    #contants_wrap h2{
        font-size: 35px;
    }
}
@media (max-width:768px){
    #contants_wrap{
        padding: 100px 50px;
        background: url(../img/main/yn_logo.png) no-repeat 90% top/30%, #fff;
    }
}
@media (max-width:500px){
    #contants_wrap{
        padding: 80px 30px;
        background: url(../img/main/yn_logo.png) no-repeat 100% top/30%, #fff;
    }
    #contants_wrap h2 {
        font-size: 30px;
    }
    #contants_wrap em{
        word-break: break-all;
    }
}
/*서비스*/
.area_location {
    position: relative;
    margin: 0 0 0;
    float: left;
    width: 100%;
    transition: all 0.3s ease;
    text-align: left;
}

.area_location em {
    font-style: normal;
    font-size: 15px;
    font-weight: 300;
    transition: all 0.3s ease;
}

.area_location h2 {
    display: block;
    padding: 20px 0 0;
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    line-height: 1.5em;
    transition: all 0.3s ease;
}

.area_location .area_icon {
    font-size: 31px;
    transition: all 0.3s ease;
}

.area_location .info_location {
    padding: 40px 0 0;
    text-align: left;
    overflow: hidden;
}

.area_location .info_location span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.area_location .info_location em {
    display: block;
    padding: 5px 0 0;
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    color: #555;
}

.area_location {
    color: #fff;
}

.area_location > em {
    color: #89c4f7;
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.area_location > h2 {
    color: #fff;
    padding: 20px 0;
}

.area_location > .area_icon {
    color: #fff;
}

.area_location .info_location span {
    color: #fff;
}

.area_location .info_location em,
.area_location .info_location b {
    color: #fff;
}

.area_location .info_location > ul > li {
    width: calc(100%/3);
    float: left;
    text-align: center;
    display: table;
    height: 250px;
}

.area_location .info_location > ul > li:last-child {
    margin: 0 0 0;
}

.area_location .info_location > ul > li > img {
    height: 95px;
    margin: 2.5px;
    transform: scale(1);
    transition: all 1s;
}

.area_location .info_location > ul > li:hover > img {
    transform: scale(1.05);
    transition: all 1s;
}

.area_location .info_location > ul > li:nth-child(1) > img,
.area_location .info_location > ul > li:nth-child(3) > img {
    width: 95px;
    height: auto;
}

.area_location .info_location > ul > li > em {
    display: block;
    padding: 5px 0 0;
    line-height: 1.4em;
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #E0E6F5;
}

.area_location .info_location > ul > li > b {
    display: block;
    font-size: 25px;
    font-weight: 600;
    color: #444;
}

.area_location .info_location > ul > li > h2 {
    color: #444;
    font-size: 17px;
    font-weight: 500;
}


@media (max-width:850px) {
    .area_location > h2 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    
    .area_location > h2 {
        font-size: 32px;
    }
    .area_location {
        margin: 0;
        width: 100%;
        height: auto;
    }

    .area_location .area_icon {}


    .area_location .info_location {
        padding: 40px 40px 0;
    }

    .area_location .info_location > ul > li {
        width: calc(100%/2);
        height: 250px;
        display: inline-block;
    }
}

@media (max-width: 650px) {
}

@media (max-width: 550px) {

    .area_location > a {
        padding: 50px 30px;
    }

    .area_location > a .info_location {
        padding: 60px 0 0;
    }
}

@media (max-width:500px) {
    .area_location > h2 {
        padding: 40px 0 0;
        font-size: 30px;
    }
    .area_location .info_location {
        padding: 40px 30px 0;
    }
}

@media (max-width: 400px) {
    .area_location > a {
        padding: 40px 20px;
    }
}


/*hoverBOX*/
.block_over{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0.9; z-index:2;}
.block_over .drawborder{display:block; background:#2a62ff; position: absolute;}
.block_over .drawborder-top{width: 0%; height: 10px; left: 0; top: 0; transition-delay: 0s;}
.block_over .drawborder-left{width: 10px; height: 0%; top: 0; right: 0; transition-delay: 0s;}
.block_over .drawborder-bottom{width: 0%; height: 10px; right: 0; bottom: 0; transition-delay: 0s;}
.block_over .drawborder-right{width: 10px; height: 0; left: 0; bottom: 0; transition-delay: 0s;}
.block_over:hover .drawborder{transition: all 0.25s;}
.block_over:hover .drawborder-top{width: 100%; transition-delay: 0s;}
.block_over:hover .drawborder-left{height: 100%; transition-delay: 0.1s;}
.block_over:hover .drawborder-bottom{width: 100%; transition-delay: 0.2s;}
.block_over:hover .drawborder-right{height: 100%; transition-delay: 0.3s;}