@charset"utf-8";


/*ž ���*/
.top_banner{width:100%;position:relative;}

.mo_banner{display:none;}
/*
.top_banner ul{position:relative;padding-bottom:49%;}
.top_banner .on_banner{opacity:1; transition: .3s ease-in-out 0.1s;position: absolute;    top: 0;    left: 0;    width: 100%;height:100%;}
.top_banner > li{opacity:0; transition: .3s ease-in-out 0.1s;}
.top_banner .video-banner{position: relative;    padding-bottom: 49%;    height: 0;    overflow: hidden;    max-width: 100%;background:#000;}
.top_banner .video-banner iframe{position: absolute;    top: 16%;    left: 0;    width: 100%;    height: 76%;}
.top_banner .video-banner video{position: absolute;    top: -5vh;    left: 0;    width: 100vw;}*/
.top_banner ul{position:relative;height:100vh}
.top_banner .on_banner{opacity:1; transition: .3s ease-in-out 0.1s;position: absolute;    top: 0;    left: 0;    width: 100%;height:100vh;}
.top_banner > li{opacity:0; transition: .3s ease-in-out 0.1s;}
.top_banner .on_banner a{display:flex}
.top_banner .video-banner{position: relative;       height: 100vh;  width:100%;  overflow: hidden; background:#000;}
.top_banner .video-banner iframe{position: absolute;      top: 17%;    left: 0;    width: 100%;    height: 76%;}
.top_banner .video-banner video{object-fit: cover;    width: 100vw;  /*  height: 100vh;  */  position: absolute;    top: 0;    left: 0;}
.top_banner li.on_banner img{object-fit: cover;    width: 100vw;    height: 100vh;    position: absolute;    top: 0;    left: 0;}

.banner_navi_area{position:absolute;padding-top:20px;bottom:0;left:0;width:100%;text-align:center;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);}
.navi_wrap{position:relative;padding-bottom:10px;}
.banner_navi_area .banner_navi{text-align:center;margin:0 auto;margin:0 0 10px 0;display:inline-flex;position:relative;}
.banner_navi_area .banner_navi p{display:inline-block;color:#fff;position:relative;cursor:pointer;font-size:1.2rem;font-weight:300;width:40px;text-align:left;}
.banner_navi_area .banner_navi p:after{display:inline-block;content:"";background:url(../img/index/top_navi_dot.png);width:21px;height:3px;position:absolute;bottom:4px;right:5px;}
.banner_navi_area .banner_navi p.last-tab{width:inherit;}
.banner_navi_area .banner_navi p.last-tab:after{display:none;}
.banner_navi_area .banner_navi p.on{color:#ffe600;font-size:1.1rem;font-weight:800}
.banner_navi_area .banner_navi p:hover{color:#ffe600;}
.banner_navi_area .banner_navi p.on:before{content:"";background:url("../img/index/navi_tab.png")no-repeat; width:8px;height:6px;position:absolute;top:-10px;left:0px;}
.banner_navi_area .arow_box{position:absolute;display:inline-block;bottom:10px;right:10px;z-index:3}
.banner_navi_area .arow_box p{display:inline-block;padding:10px;cursor:pointer;}
.banner_navi_area .arow_box p:hover{opacity:0.4;}
	/*�߰�*/
.banner_navi_area .banner_navi{position:Relative;}
	.banner_navi_area .banner_navi:hover p.on:before{display:none;}
	.banner_navi_area .banner_navi .bar{opacity:0}
	.banner_navi_area .banner_navi:hover .bar{opacity:1}
	.banner_navi_area .banner_navi .bar{background:url("../img/index/navi_tab.png")no-repeat; width:8px;height:6px;position:absolute;top:-10px;left:0px; text-align:center;}   
/*	.banner_navi_area .banner_navi p:hover ~ .bar{transition: 0.3s linear;}*/
.banner_navi_area .banner_navi p:nth-child(1):hover ~ .bar {    left: 0px;}
.banner_navi_area .banner_navi p:nth-child(2):hover ~ .bar {    left: 40px;}
.banner_navi_area .banner_navi p:nth-child(3):hover ~ .bar {    left: 80px;}
.banner_navi_area .banner_navi p:nth-child(4):hover ~ .bar {    left: 120px;}
.banner_navi_area .banner_navi p:nth-child(5):hover ~ .bar {    left:160px;}
.banner_navi_area .banner_navi p:nth-child(6):hover ~ .bar {    left: 200px;}
.banner_navi_area .banner_navi p:nth-child(7):hover ~ .bar {    left:240px;}
.banner_navi_area .banner_navi p:nth-child(8):hover ~ .bar {    left: 280px;}
.banner_navi_area .banner_navi p:nth-child(9):hover ~ .bar {    left: 320px;}
.banner_navi_area .banner_navi p:nth-child(10):hover ~ .bar {   left: 360px;}
.banner_navi_area .banner_navi p:nth-child(11):hover ~ .bar {    left: 400px;}
.banner_navi_area .banner_navi p:nth-child(12):hover ~ .bar {    left: 460px;}


/*�̵� ������*/
.mo_middle_banner{display:none;}
.index_content_wrap{background:#3f3f3f;padding:5px 0;letter-spacing: -0.5px;}
.index_box{padding:5px 0;}
.index_box .box{position:relative;}
.index_box.two_box{display:flex;}
.index_box.two_box .box{width:50%;}
.index_box.two_box .box:first-child{padding-right:5px;}
.index_box.two_box .box:nth-child(2){padding-left:5px;}
.index_box.one_box{}
.index_box .img_area{overflow:hidden;width:100%;padding:0}
.index_box .img_area img{transition: all .6s linear; width: 100%;}
.index_box .img_area:hover img{transform:scale(1.05);transition: all .6s linear;}
.index_box .txt_area .txt_inner{position:relative;}
.index_box .txt_area{position:absolute;top:5%;lefT:80px;width:calc(100% - 80px);}
.index_box.one_box .txt_area {top:20%}
.index_box.one_box .left_box .txt_area{text-align:left;}
.index_box.one_box .right_box .txt_area{left:inherit;right:80px;text-align:right}
.index_box .black_txt .txt_area p{color:#000;}
.index_box .white_txt .txt_area p{color:#fff;}
.index_box .txt_area p.big_title{font-size:3.5rem;font-weight:400}
.index_box .txt_area p.small_title{font-size:1.5rem;padding-top:10px;}
.index_box .txt_area p.deco{width:30px;transform: rotate(90deg);position:absolute;top:calc(5% + 10px);left:-30px;font-weight:600;letter-spacing:3px}
.index_box.one_box .right_box .txt_area p.deco{left:inherit;right:-30px}

.index_box .box .banner_btn{position:absolute;bottom:10%;width:50%;left:25%;display:inline-block;text-align:center;}
.index_box .box .banner_btn p.btn_txt {padding:10px 40px;font-size:1.3rem;font-weight:600;background:#ffe600;border-radius:30px;display:inline-block;color:#000}
.index_box .box .banner_btn p.btn_txt {padding:10px 40px;font-size:1.3rem;font-weight:600;background:#ffe600;border-radius:30px;display:inline-block;color:#000;overflow:hidden;position:relative;z-index:1;border:1px solid #ffe600}
.index_box .box .banner_btn p.btn_txt:after , .box .banner_btn p.btn_txt:before{position:absolute;height:15px;width:15px;border-radius:50%;background:#fff;content:"";top:50%;z-index:-1}
.index_box .box .banner_btn p.btn_txt:after{right:-20px;    transform: translate(50%, -50%);}
.index_box .box .banner_btn p.btn_txt:before{left:-20px;   transform: translate(-50%, -50%);}
.index_box .box .banner_btn p.btn_txt:hover:before{-webkit-animation: criss-cross-left 0.8s both;    animation: criss-cross-left 0.8s both;    -webkit-animation-direction: alternate;    animation-direction: alternate;}
.index_box .box .banner_btn p.btn_txt:hover:after{    -webkit-animation: criss-cross-right 0.8s both;    animation: criss-cross-right 0.8s both;    -webkit-animation-direction: alternate;    animation-direction: alternate;}
.index_box .box .banner_btn p.btn_txt:hover{color:#000;}
.index_box.one_box .banner_btn{margin-top:30px;display:inline-block;}
.index_box.one_box .banner_btn p.btn_txt {padding:10px 40px;font-size:1.3rem;font-weight:600;background:#ffe600;border-radius:30px;display:inline-block;color:#000;overflow:hidden;position:relative;z-index:1;border:1px solid #ffe600}
.index_box.one_box .banner_btn p.btn_txt:after , .index_box.one_box .banner_btn p.btn_txt:before{position:absolute;height:15px;width:15px;border-radius:50%;background:#fff;content:"";top:50%;z-index:-1}
.index_box.one_box .banner_btn p.btn_txt:after{right:-20px;    transform: translate(50%, -50%);}
.index_box.one_box .banner_btn p.btn_txt:before{left:-20px;   transform: translate(-50%, -50%);}
.index_box.one_box .banner_btn p.btn_txt:hover:before{-webkit-animation: criss-cross-left 0.8s both;    animation: criss-cross-left 0.8s both;    -webkit-animation-direction: alternate;    animation-direction: alternate;}
.index_box.one_box .banner_btn p.btn_txt:hover:after{    -webkit-animation: criss-cross-right 0.8s both;    animation: criss-cross-right 0.8s both;    -webkit-animation-direction: alternate;    animation-direction: alternate;}
.index_box.one_box .banner_btn p.btn_txt:hover{color:#000;}
.index_box.one_box .left_box .banner_btn{text-align:left;}
.index_box.one_box .right_box .banner_btn{text-align:right;}
.hidden_link{displaY:none;}


/*���� �˾� */
.main_pop_wrap{display:block;width:100%;z-index:10;text-align:center;height:48px;}
.main_pop_wrap .popup_wrap{}
.main_pop_wrap .mainpop_box{position:absolute;top:0;left:0;width:100%;}
.main_pop_wrap .popup_wrap.mainpop_box{z-index:10;position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.5);    z-index: 10;    text-align: center;    display: flex;    align-items: center;}
.main_pop_wrap .popup_wrap.mainpop_box .pop_layer{width:auto;margin:0 auto;display:inline-block;}
.main_pop_wrap.popup_wrap .pop_layer{/*animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;*/width:auto !important;max-width: 90%;}
.main_pop_wrap .pop_layer.down{/*animation: scaleUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;*/}
.main_pop_wrap .top_pop{background:#ffe600;padding:10px;color:#000;text-align:cetner;font-size:1.3rem;font-weight:700;border-radius:x 0 0 ;cursor:pointer;    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);}
.main_pop_wrap .top_pop .pop_close:before, .main_pop_wrap .top_pop .pop_close:after{width:18px;margin-left:-9px;}
.main_pop_wrap .top_pop .pop_close{width:18px}
.main_pop_wrap.popup_wrap .top_pop{ box-shadow: 0 0 0 0 rgba(0,0,0,0.0);}
.main_pop_wrap .top_pop .close_btn{z-index:21}
/*.main_pop_wrap .top_pop:hover p{padding-bottom:10px;transition:0.5s}*/
.main_pop_wrap .top_pop p{display:inline-block;width:calc(100% - 19px);transition:0.5s; transition: 0.5s;overflow: hidden;text-overflow: ellipsis;text-align: center;  white-space: nowrap;}
.main_pop_wrap .popup_wrap .top_pop p{ overflow: inherit;    text-overflow: inherit;padding: 5px;    white-space: inherit;}
.main_pop_wrap .pop_cont{overflow:hidden;height:0;width:100%;/*border:2px solid #ffe600*/}
.main_pop_wrap .popup_wrap .pop_cont{height:auto;}
/*.main_pop_wrap.popup_wrap .top_pop:hover p{padding-bottom:0;transition:0.5s}*/
.main_pop_wrap .pop_bottom{background:#000;color:#fff;padding:10px;}
.main_pop_wrap .pop_bottom span{font-weight:600;cursor:pointer;}




/***********************************************************������ ���� ***********************************************************/

/* ������ ��Ʈ��*/
@media screen and (max-width:1400px) {
/*2024-09-12(��)*/
.index_box .txt_area p.big_title{font-size:2.7rem}
.index_box .txt_area p.small_title{1.35rem}
.index_box .txt_area{left:40px;   width: calc(100% - 40px);}
.index_box.one_box .right_box .txt_area{right:40px;}

}

/*�����е�*/
@media screen and (max-width:1120px) {


.index_box .box .banner_btn{bottom:5%;}
.index_box .box .banner_btn p.btn_txt{padding:7px 20px}
.index_box.one_box .banner_btn p.btn_txt{padding:7px 20px}
.index_box .txt_area{left:40px;    width: calc(100% - 40px);}
.index_box.one_box .right_box .txt_area{right:40px}

.index_box .txt_area p.big_title{font-size:2.5rem}
.index_box .txt_area p.small_title{1.2rem}

}





/*�����е� ���� 820~ 768 */
@media screen and (max-width:840px) {

.top_banner{/*        margin-top: 72px;*/}/*2024-06-25(ȭ)*/

.top_banner ul{position:relative;padding-bottom:76%;height:auto;}
.top_banner .on_banner{position: absolute;    top: 0;    left: 0;    width: 100%;height:100%;}
.top_banner > li{opacity:0; transition: .3s ease-in-out 0.1s;}
.top_banner .video-banner{position: relative;    padding-bottom: 76%;    height: auto;    overflow: hidden;    max-width: 100%;background:#000;}
.top_banner .video-banner iframe{top:0;height:90%;; }
.top_banner .video-banner video{height:100%; top: 0;object-fit:inherit;height:auto;top:16%;}
.top_banner li.on_banner img{height:auto;}
.pc_banner{display:none;}
.mo_banner{display:block;}
.index_box.one_box .txt_area{top:10%}
.index_box .txt_area p.deco{width:20px;left:-20px;top:calc(5% + 5px);}
.index_box.one_box .right_box .txt_area p.deco{right:-20px}
.index_box .txt_area{left:20px;    width: calc(100% - 20px);}
.index_box.one_box .right_box .txt_area{right:20px}
.index_box .txt_area p.small_title{padding-top:0}







}
@media screen and (max-width:750px) {
.mo_middle_banner{display:block;}
.pc_middle_banner{display:none;}
.index_content_wrap{background:#fff;padding: 15px;}
.index_box{padding: 0;}
.index_box.two_box{display:block;}
.index_box.two_box .box{width:100%;margin-bottom: 15px;border-radius: 10px;overflow: hidden;border: 1px solid #eaeaea;}
.index_box.two_box .box:first-child{padding-right:0px;}
.index_box.two_box .box:nth-child(2){padding-left:0;}
.index_box .box .banner_btn{position:absolute;bottom:0%;width:100%;left:0%;height:100%;}
.index_box .box .banner_btn p.btn_txt{displaY:none;}
.index_box.one_box  > div{border-radius:10px;overflow:hidden;margin-bottom:15px;border: 1px solid #eaeaea;}
.index_box.one_box .banner_btn{position:absolute;bottom:0%;width:100%;left:0%;height:100%;}
.index_box.one_box .banner_btn p.btn_txt{displaY:none;}
.index_box .img_area:hover img{transform:scale(1);transition: all .6s linear;}
.hidden_link{position:absolute;bottom:0%;width:100%;left:0%;height:100%;displaY:block;z-index:2}
.index_box .txt_area{text-align:center;width:100%;left:inherit;}
.index_box.one_box .left_box .txt_area{text-align:center;top:5%;width:100%}
.index_box.one_box .right_box .txt_area{text-align:center;top:5%;width:100%;right:inherit;}
.index_box .txt_area p.deco{ position: relative;    text-align: center;    width: 100%;    transform: rotate(0deg);    left: inherit;    top: inherit;    padding-bottom: 3px;}
.index_box.one_box .right_box .txt_area p.deco{right:inherit;}
.index_box .txt_area p.big_title{font-size:2.5rem}
.index_box .txt_area p.small_title{padding-top:0px;}

}





/*����� */
@media screen and (max-width:600px) {
.main_pop_wrap{    height: 28px !important;}
.top_banner ul{padding-bottom:92%;}
.top_banner .video-banner{padding-bottom:92%;}
.top_banner .video-banner video{}
.banner_navi_area .banner_navi p{width:25px;}
.banner_navi_area .banner_navi p:after{width:11px;bottom:2px;height:4px;background-size:contain;}
.banner_navi_area .arow_box p{width:27px;}
.banner_navi_area .banner_navi p:nth-child(1):hover ~ .bar {    left: 0px;}
.banner_navi_area .banner_navi p:nth-child(2):hover ~ .bar {    left: 25px;}
.banner_navi_area .banner_navi p:nth-child(3):hover ~ .bar {    left: 50px;}
.banner_navi_area .banner_navi p:nth-child(4):hover ~ .bar {    left: 75px;}
.banner_navi_area .banner_navi p:nth-child(5):hover ~ .bar {    left:100px;}
.banner_navi_area .banner_navi p:nth-child(6):hover ~ .bar {    left: 125px;}
.banner_navi_area .banner_navi p:nth-child(7):hover ~ .bar {    left:150px;}
.banner_navi_area .banner_navi p:nth-child(8):hover ~ .bar {    left: 175px;}
.banner_navi_area .banner_navi p:nth-child(9):hover ~ .bar {    left: 200px;}
.banner_navi_area .banner_navi p:nth-child(10):hover ~ .bar {   left: 225px;}
.banner_navi_area .banner_navi p:nth-child(11):hover ~ .bar {    left: 250px;}
.banner_navi_area .banner_navi p:nth-child(12):hover ~ .bar {    left: 275px;}
.main_pop_wrap .top_pop{padding:5px;}

/*.index_content_wrap{padding:2.5px 0}*/




}



/*����� */
@media screen and (max-width:400px) {
.index_box .txt_area{top:2%;}
.index_box.one_box .left_box .txt_area{top:2%}
.index_box .txt_area p.big_title{font-size:2rem;}
.index_box .txt_area p.small_title{font-size:1.2rem}

}