/*°øÅë*/
@font-face {
    font-family: 'Pretendard';
    src: url("/font/Pretendard-Bold.woff") format('woff');
    font-weight: 700;
}
@font-face {
    font-family: 'Pretendard';
    src: url("/font/Pretendard-Regular.woff") format('woff');
    font-weight: 500;
}
@font-face {
    font-family: 'Pretendard';
    src: url("/font/Pretendard-Light.woff") format('woff');
    font-weight: 300;
}
html, body {font-family: 'Pretendard', sans-serif, '¸¼Àº°íµñ', 'µ¸¿ò' ,arial; font-size: 17px; color: #333; line-height: 1.618em !important; position: relative; width: 100%; height: 100%;}
.maxBox{width: 1200px; margin: 0 auto;}

/*ÄÜÅÙÃ÷*/
.redesignCont .area{padding: 40px 0; box-sizing: border-box;}
.redesignCont .area01 .box{display: grid; grid-template-columns: auto 340px; gap: 20px;}

.redesignCont .area01 .box .box01{display: inline-grid; gap: 20px; grid-template-rows: 380px auto;}
.redesignCont .area01 .box .box01 .slider{background: #555; position: relative; border-radius: 30px 30px 0 30px; overflow: hidden;}
.redesignCont .area01 .box .box01 .slider .slides{display: flex; transition: transform 0.5s ease-in-out; }
.redesignCont .area01 .box .box01 .slider .slides .slide{min-width: 100%; height: 100%; position: relative;}
.redesignCont .area01 .box .box01 .slider .slides .slide img{width: 100%; height: 100%;}
.redesignCont .area01 .box .box01 .slider .slides .slide .overlay{color: #fff; padding: 50px; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.redesignCont .area01 .box .box01 .slider .slides .slide .overlay h2{font-size: 42px; font-weight: 700; line-height: 52px;}
.redesignCont .area01 .box .box01 .slider .slides .slide .overlay p{margin-top: 10px; font-weight: 300;}
.redesignCont .area01 .box .box01 .slider .slides .slide .overlay p b{font-weight: 700;}
.redesignCont .area01 .box .box01 .slider .slides .slide .overlay .btn{margin-top: 30px; padding: 10px 50px; background: rgba(255,255,255,0.0); color: #fff; border: 1px solid white; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 17px; font-family: 'Pretendard', sans-serif, '¸¼Àº°íµñ', 'µ¸¿ò' ,arial;}
.redesignCont .area01 .box .box01 .slider .controls{position: absolute; bottom: 0; right: 0; display: flex; align-items: center; padding: 15px 25px; background: #fff; border-radius: 30px 0 0 30px; box-sizing: border-box; gap: 5px;}
.redesignCont .area01 .box .box01 .slider .controls::before{content: ""; background: url(/mini/images/banner/bgBottom.png)no-repeat left bottom; position: absolute; left: -17px; bottom: 0; width: 44px; height: 36px;}
.redesignCont .area01 .box .box01 .slider .controls::after{content: ""; background: url(/mini/images/banner/bgTop.png)no-repeat right top; position: absolute; right: 0; top: -30px; width: 46px; height: 53px;}
.redesignCont .area01 .box .box01 .slider .controls .counter{font-size: 20px; color: #555; font-weight: 300; margin-right: 20px;}
.redesignCont .area01 .box .box01 .slider .controls .counter b{font-weight: 700; color: #0066cc; display: inline-block; width: 12px;}
.redesignCont .area01 .box .box01 .slider .controls button{width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd; background: #F9F9F9; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; color: #555;}
.redesignCont .area01 .box .box01 .slider .controls .circleBtn {font-size: 17px;}

.redesignCont .area01 .box .box01 .quick{display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.redesignCont .area01 .box .box01 .quick> li> a{display: inline-flex; gap: 20px; justify-content: center; align-items: center;}
.redesignCont .area01 .box .box01 .quick> li> a> div p{font-size: 22px; font-weight: 700; margin-bottom: 5px; line-height: 1.4em;}
.redesignCont .area01 .box .box01 .quick> li> a> div span{font-size: 15px; color: #555555;}

.redesignCont .area01 .box .box02{display: grid; gap: 20px; grid-template-rows: 306px auto;}
.redesignCont .area01 .box .box02 a{background: #333; border-radius: 30px; color: #fff; padding: 30px; box-sizing: border-box;}
.redesignCont .area01 .box .box02 a:nth-child(1){background-color: #2B51CC !important; background: url(/mini/images/box02Bg01.png)no-repeat left -70px bottom -30px;}
.redesignCont .area01 .box .box02 a:nth-child(2){background-color: #09A787 !important; background: url(/mini/images/box02Bg02.png)no-repeat left -226px bottom -80px;}
.redesignCont .area01 .box .box02 a p.tit{font-size: 25px; font-weight: 700; line-height: 32px; margin-bottom: 10px;}
.redesignCont .area01 .box .box02 a p.ment{font-size: 15px; line-height: 20px; font-weight: 300;}
.redesignCont .area02{background: #F1F6F9;}
.redesignCont .area02 .maxBox{position: relative;}
.redesignCont .area02 .tabMenu ul{display: inline-flex; gap: 25px; margin-bottom: 30px;}
.redesignCont .area02 .tabMenu ul li{font-size: 27px; color: #555; font-weight: 700; cursor: pointer;}
.redesignCont .area02 .tabMenu ul li.active{color: #000; position: relative;}
.redesignCont .area02 .tabMenu ul li.active::after{content: ""; position: absolute; right: -12px; top: -7px; width: 7px; height: 7px; background: #007FF4; border-radius: 10px;}
.redesignCont .area02 .tabCont .tabContent{display: none; position: relative; }
.redesignCont .area02 .tabCont .tabContent.active{display: grid;}
.redesignCont .moreBtn{font-size: 15px; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; gap: 5px; position: absolute; right: 0; top: -56px;}
.redesignCont .area02 .tabCont ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 34px;}
.redesignCont .area02 .tabCont ul li{background-color: #fff !important; border-radius: 30px; padding: 30px; box-sizing: border-box; display: block; transition: transform 0.5s ease}
.redesignCont .area02 .tabCont ul li:hover{background-color: #007FF4 !important; color: #fff; transform: translateY(-10px);}
.redesignCont .area02 .tabCont ul li.nBox{background: url(/mini/images/notice.png)no-repeat right 30px bottom 20px;}
.redesignCont .area02 .tabCont ul li.rBox{background: url(/mini/images/rule.png)no-repeat right 30px bottom 30px;}
.redesignCont .area02 .tabCont ul li.BoxNone{color: #ccc; display: flex; justify-content: center; align-items: center; font-size: 15px;}
.redesignCont .area02 .tabCont ul li.BoxNone:hover{background-color: #fff !important; color: #ccc; transform: none;}
.redesignCont .area02 .tabCont ul li mark{display: block; font-size: 13px; font-weight: 700; background: initial; color: #007FF4;}
.redesignCont .area02 .tabCont ul li:hover mark, .redesignCont .area02 .tabCont ul li:hover p, .redesignCont .area02 .tabCont ul li:hover time{color: #fff;}
.redesignCont .area02 .tabCont ul li strong{font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 310px; display: block;}
.redesignCont .area02 .tabCont ul li p, .redesignCont .area02 .tabCont ul li time{font-size: 15px; color: #555;}
.redesignCont .area02 .tabCont ul li p{margin: 7px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 310px; line-height: 24px; height: 48px;}
.redesignCont .area02 .tabCont ul li a{display: block; background: #007FF4; color: #fff; font-weight: 700; padding: 5px 10px; box-sizing: border-box; border-radius: 10px; font-size: 15px; width: 110px; text-align: center; margin-top: 40px;}
.redesignCont .area02 .tabCont ul li:hover a{background: #fff; color: #007FF4;}

/*ǪÅÍ*/
footer{background: #333A46; font-size: 17px; }
footer .list{border-bottom: 1px solid #515967;}
footer .list ul{display: inline-flex; gap: 30px; padding: 20px 0; box-sizing: border-box;}
footer .list ul> li> a{color: #B0B3B9;}
footer .list ul> li:first-child> a{color: #fff; font-weight: 700;}
footer .cont{padding: 20px 0; box-sizing: border-box; color: #B0B3B9; font-size: 15px; font-weight: 300;}
footer .cont div{margin-top: 10px; position: relative;}
footer .cont div dl dd{font-weight: 700; display: inline-flex; color: #fff;}
footer .cont div dl dt{display: inline-flex;}
footer .cont div span{position: absolute; right: 0; bottom: 0;}

 /*ÀÔÁÖ½Åû*/
.appliRedesign{margin-bottom: 15px;}
.appliRedesign ol{border-top: 2px solid #555;}
.appliRedesign ol> li{border-bottom: 1px dashed #ddd; padding: 20px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 2fr; gap: 30px;}
.appliRedesign ol> li:last-child{border-bottom: 1px solid #ddd;}
.appliRedesign ol> li:nth-child(odd){background: #f9f9f9;}
.appliRedesign ol> li .imgBox{height: 195px; position: relative;}
.appliRedesign ol> li .imgBox> img{width: 100%; height: 100%; border-radius: 10px; border: 1px solid #ddd;}
.appliRedesign ol> li .imgBox> a{position: absolute; right: 10px; bottom: 10px; border-radius: 5px; font-size: 13px; color: #555; cursor: pointer; background: none; margin: 0; padding: 0; line-height: 0;}
.appliRedesign ol> li .imgBox> a> img{border-radius: 0;}
.appliRedesign ol> li .imgBox> .layerContent a{text-align: center;}
.appliRedesign ol> li .textBox div{padding-bottom: 10px; border-bottom: 1px dashed #777; box-sizing: border-box; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
.appliRedesign ol> li .textBox div> p{font-size: 20px; font-weight: bold;}
.appliRedesign ol> li .textBox div> a{background: #0066cc; color: #fff; font-size: 15px; padding: 3px 15px; box-sizing: border-box; border-radius: 5px; }
.appliRedesign ol> li .textBox dl{box-sizing: border-box; display: inline-flex; font-size: 15px; display: flex;}
.appliRedesign ol> li .textBox dl dd{font-weight: bold; padding-right: 20px; width: 40px;}
.appliRedesign ol> li .textBox dl.dl02 dt{width: 60px;}

/*tablet °¡·Î*/
@media all and (max-width:1400px) {
}


/*tablet ¼¼·Î*/
@media screen and (max-width:1240px) {    
    .maxBox{width: calc(100% - 5%); margin: 0 auto;}

    /*ÄÜÅÙÃ÷*/
    .redesignCont .area01 .box{display: grid; grid-template-columns: initial; gap: 30px;}

    .redesignCont .area01 .box .box01 .slider .slides .slide img{min-height: 400px;}
    .redesignCont .area01 .box .box01 .quick> li> a{gap: 10px;}
    .redesignCont .area01 .box .box01 .quick> li> a> div p{margin-bottom: 0;}
    .redesignCont .area01 .box .box01 .quick> li> a> div span{font-size: 13px;}

    .redesignCont .area01 .box .box02{grid-template-rows: initial; grid-template-columns: 1fr 1fr;}
    .redesignCont .area01 .box .box02 a{position: relative; z-index: 0;}
    .redesignCont .area01 .box .box02 a:nth-child(1), .redesignCont .area01 .box .box02 a:nth-child(2){background: initial;}
    .redesignCont .area01 .box .box02 a:nth-child(1)::before{background: url(/mini/images/box02Bg01.png)no-repeat right -170px bottom -54px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.3; z-index: -1; content: ""; border-radius: 30px;}
    .redesignCont .area01 .box .box02 a:nth-child(2)::before{background: url(/mini/images/box02Bg02.png)no-repeat right -80px bottom -70px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.3; z-index: -1; content: ""; border-radius: 30px;}

    .redesignCont .area02 .tabCont ul{grid-template-columns: repeat(2, 1fr);}
    .redesignCont .area02 .tabCont ul li:last-child{display: none;}
    .redesignCont .area02 .tabCont ul li strong{width: 280px;}
    .redesignCont .area02 .tabCont ul li p{width: 280px;}    

}


/*mobile*/
@media screen and (max-width:767px) {
    .maxBox{width: calc(100% - 5%); margin: 0 auto;}

    /*ÄÜÅÙÃ÷*/
    .redesignCont .area{padding: 20px 0;}
    .redesignCont .area01 .box{display: grid; grid-template-columns: initial; gap: 20px;}

    .redesignCont .area01 .box .box01{grid-template-rows: 270px auto;}
    .redesignCont .area01 .box .box01 .slider .slides .slide .overlay{padding: 30px;}
    .redesignCont .area01 .box .box01 .slider .slides .slide .overlay h2{font-size: 22px; line-height: 28px;}
    .redesignCont .area01 .box .box01 .slider .slides .slide .overlay p{font-size: 15px; line-height: 20px;}
    .redesignCont .area01 .box .box01 .slider .slides .slide .overlay .btn{font-size: 15px; padding: 10px 30px; margin-left: 0; margin-top: 20px;}
    .redesignCont .area01 .box .box01 .slider .controls{padding: 15px; gap: 0;}
    .redesignCont .area01 .box .box01 .slider .controls .counter{font-size: 15px; margin-right: 0; z-index: 1;}
    .redesignCont .area01 .box .box01 .slider .controls button{width: 36px; height: 36px; z-index: 1;}
    .redesignCont .area01 .box .box01 .quick{gap: 15px;}
    .redesignCont .area01 .box .box01 .quick> li{border: 1px solid #ddd; background: #f9f9f9; padding: 15px; box-sizing: border-box; border-radius: 20px;}
    .redesignCont .area01 .box .box01 .quick> li> a{display: block; text-align: center;}
    .redesignCont .area01 .box .box01 .quick> li> a img{width: 50px; height: 50px;}
    .redesignCont .area01 .box .box01 .quick> li> a> div p{font-size: 17px;}
    .redesignCont .area01 .box .box01 .quick> li> a> div span{display: none;}
    .redesignCont .area01 .box .box02{grid-template-columns: initial; gap: 10px;}
    .redesignCont .area01 .box .box02 a{padding: 20px 30px;}
    .redesignCont .area01 .box .box02 a p.tit{font-size: 22px; line-height: 28px; margin-bottom: 20px;}
    
    .redesignCont .area02 .tabMenu ul{margin-bottom: 15px; gap: 15px;}
    .redesignCont .area02 .tabMenu ul li{font-size: 22px;}
    .redesignCont .area02 .tabCont ul{display: block; gap: 15px;}
    .redesignCont .area02 .tabCont ul li{padding: 20px 30px; margin-bottom: 10px;}
    .redesignCont .area02 .tabCont ul li:last-child{margin-bottom: 0;}
    .redesignCont .area02 .tabCont ul li:hover{transform: none;}
    .redesignCont .area02 .tabCont ul li.BoxNone{display: none;}
	.redesignCont .moreBtn{font-size: 13px; top: -42px;}

    /*ǪÅÍ*/
    footer .list ul{display: block; padding: 10px 0;}
    footer .list ul li{display: inline-block; font-size: 15px; margin-right: 10px;}
    footer .cont{font-size: 13px; padding: 10px 0;}
    footer .cont div span{position: initial;}
    
   	/*ÀÔÁÖ½Åû*/
	.appliRedesign ol> li{display: block;}
	.appliRedesign ol> li .imgBox{margin-bottom: 15px; height: 150px;}
	.appliRedesign ol> li .textBox div{display: block; text-align: center;}
	.appliRedesign ol> li .textBox div> p{margin-bottom: 10px;}
	.appliRedesign ol> li .textBox div> a{font-size: 15px; padding: 7px 15px;}

}