@charset "utf-8";

/* reset */
* { padding:0; margin:0 }
*, :after, :before { -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; }
html { overflow-y:scroll; height:100% }
body { font-family: 'Pretendard';, dotum, sans-serif; color:#222; height:100%; font-weight:300; font-size:0.85em }
a, a:link, a:visited { text-decoration:none; color:#222; -webkit-tap-highlight-color : transparent }


@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

.pc_ver { display:block !important }
.m_ver { display:none !important }

@media all and (max-width:1100px){
	.pc_ver { display:none !important }
	.m_ver { display:block !important }
}


.w_index {overflow:hidden; position:relative; width:100%; min-width:1024px; height:100vh; display:block;}

.m_index{display:none;}

.w_index .list {float:left; position:relative; width:100%; height:100vh;}
.w_index .list .bg {position:absolute; top:0; left:0; right:0; bottom:0; margin:0; opacity: 0; background:no-repeat center;  transition:all 1.2s;}
.w_index .list .bg00 {background-image:url('../img/intro.jpg'); }
.w_index .list .bg00 span{    background: rgba(0,0,0,0.5);    position: absolute;    width: 100%;    height: 100%;}
.w_index .list .bg01 {background-image:url('../img/intro.jpg'); }
.w_index .list .bg02 {background-image:url('../img/intro.jpg');}
.w_index .list .bg03 {background-image:url('../img/intro.jpg');}
.w_index .list .bg04 {background-image:url('../img/intro.jpg');}
.w_index .list .bg.on {opacity:1;}
.w_index .list > ul {overflow:hidden;}
.w_index .list > ul > li {position:relative; float:left; width: calc(100% /4 - 0px); height:100vh;}
.w_index .list > ul > li+li {border-left:1px solid rgba(255,255,255,0.23);}
.w_index .list > ul > li .intro_box {overflow:hidden; display:block; height:100vh; padding: 51% 10% 0 10%; text-align: center; transition:all .4s;}
.w_index .list > ul > li:hover .intro_box {opacity:0;}
.w_index .list strong {display:block; font-size:2.5rem; color:#fff; font-weight:700;}
.w_index .list .box_line {text-align:center; width:30px;height:1px;background:#fff;margin:20px auto;}
.w_index .list p {margin-top:0; font-size:20px; color:#fff; line-height:1.5;  letter-spacing:-0.07em;}

.w_index .list li .over {position:absolute; top:0; left:0; width:100%; height:100%; padding: 51% 10% 0 10%; text-align: center; opacity:0; transition:all .4s;}
.w_index .list li.s01 .over {background-image:url('../img/intro_img1.jpg');}
.w_index .list li.s02 .over {background-image:url('../img/intro_img2.jpg');}
.w_index .list li.s03 .over {background-image:url('../img/intro_img3.jpg');}
.w_index .list li.s04 .over {background-image:url('../img/intro_img4.jpg'); }
.w_index .list li:hover .over {opacity:1;}
.w_index .list li .title {position:relative;}
.w_index .list li .title strong {}
.w_index .list li .title span {position:absolute; bottom:5px; right:0; letter-spacing:0; font-weight:500; font-size:16px; color:#fff; vertical-align:baseline;}
.w_index .list .over ul {overflow:hidden; margin-top:35px; margin-left:-7px;}
.w_index .list .over li {display:inline-block; margin-bottom:5px; width: 100%;}
.w_index .list .over li a {display:block;  border:1px solid rgba(255,255,255,0.33); font-size:19px; color:#fff; line-height:60px; font-weight:700; background:url('../images/index/icon_arr02.png') no-repeat right 15px center; transition:all .4s;}
.w_index .list .s03 .over li {float:left; width:100%; padding-left:7px;}

.w_index .list .over li:hover a {background-color:rgba(255,255,255,0.22);}

.intro_box{position: absolute;    width: 100%;    height: 100%;    top:0;    display: flex;    flex-direction: column;    justify-content: center;    text-align: center;}
.intro_box strong {display:block; font-size:20px; color:#fff; font-weight:700;}
.intro_box .box_line {text-align:center; width:30px;height:1px;background:#fff;margin:20px auto;}
.intro_box p {margin-top:0; font-size:14px; color:#fff; line-height:1.5;  letter-spacing:-0.07em;}

@media all and (max-width:1750px){
    .w_index .list > ul > li .box {padding-left:8%;padding-right:8%;}
    .w_index .list li .over {padding-left:8%; padding-right:8%;}
    .inbox .inbox_div {width: 100%;        text-align: center;        margin: 0 auto;        max-width: 100%;    }
}
@media all and (max-width:1600px){
    .w_index .list > ul > li .box {padding-left:5%;padding-right:5%;}
    .w_index .list li .over {padding-left:5%; padding-right:5%;}
}

@media all and (max-width:1380px){
    .w_index .list strong {font-size:2.5rem;}
}
@media all and (max-width:1250px){
    .w_index .list strong {font-size:2rem;}
}

@media all and (max-width:1100px){
    .w_index {overflow:hidden; position:relative; width:100%; min-width:100%; height:100vh; display:block;}
	.w_index .list p {font-size: 20px;}
    .m_index{display:block;}
    .header{display:block;}
	.w_index .list li.s01 .over {background-image:none;}
	.w_index .list li.s02 .over {background-image:none;}
	.w_index .list li.s03 .over {background-image:none;}
	.w_index .list li.s04 .over {background-image:none; }
	.w_index .list .bg01 {background-image:url('../img/intro1_m.jpg');}
	.w_index .list .bg02 {background-image:url('../img/intro2_m.jpg');}
	.w_index .list .bg03 {background-image:url('../img/intro3_m.jpg');}
	.w_index .list .bg04 {background-image:url('../img/intro4_m.jpg');}
	.w_index .list > ul > li { float:none; width: 100%; height:25vh;border-bottom:1px solid rgba(255,255,255,0.23);}
	.w_index .list > ul > li .intro_box {height:50vh; padding: 4% 10% 0 10%;}
	.w_index .list li .over {padding: 4% 10% 0 10%;}

}

@media all and (max-width:900px){
	.w_index .list > ul > li .intro_box {height:50vh; padding: 13% 10% 0 10%;}
	.w_index .list li .over {padding: 13% 10% 0 10%;}

}

.custom-btn {width: 235px;  height: 55px;  color: #fff;  margin:30px auto; font-size:20px; letter-spacing:0px;  border-radius:0; font-weight: 800;  background: transparent;  cursor: pointer;  transition: all 0.3s ease;  position: relative; }

.btn-1 {  background: #11a789;  width: 235px;  height: 55px;  line-height: 55px;  padding: 0;  border: none;  }
.btn-1 span {  position: relative;  display: block;  width: 100%;  height: 100%; }
.btn-1:before,
.btn-1:after {  position: absolute;  content: "";  right: 0;  top: 0;   background:#11a789;  transition: all 0.3s ease;}
.btn-1:before {  height: 0%;  width: 2px;}
.btn-1:after {  width: 0%;  height: 2px;}
.btn-1:hover{   background: transparent;  box-shadow: none;}
.btn-1:hover:before {  height: 100%;}
.btn-1:hover:after {  width: 100%;}
.btn-1 span:hover{   color:#11a789;}
.btn-1 span:before,
.btn-1 span:after {  position: absolute;  content: "";  left: 0;  bottom: 0;   background:#11a789;  transition: all 0.3s ease;}
.btn-1 span:before {  width: 2px;  height: 0%;}
.btn-1 span:after {  width: 0%;  height: 2px;}
.btn-1 span:hover:before {  height: 100%;}
.btn-1 span:hover:after {  width: 100%;}
.btn-1 span i {float:right; padding-right:20px; font-size:40px; font-weight:100; line-height:47px; font-style:normal;}

.btn-2 {  background: #eb808e;  width: 235px;  height: 55px;  line-height: 55px;  padding: 0;  border: none;  }
.btn-2 span {  position: relative;  display: block;  width: 100%;  height: 100%; }
.btn-2:before,
.btn-2:after {  position: absolute;  content: "";  right: 0;  top: 0;   background:#eb808e;  transition: all 0.3s ease;}
.btn-2:before {  height: 0%;  width: 2px;}
.btn-2:after {  width: 0%;  height: 2px;}
.btn-2:hover{   background: transparent;  box-shadow: none;}
.btn-2:hover:before {  height: 100%;}
.btn-2:hover:after {  width: 100%;}
.btn-2 span:hover{   color:#eb808e;}
.btn-2 span:before,
.btn-2 span:after {  position: absolute;  content: "";  left: 0;  bottom: 0;   background:#eb808e;  transition: all 0.3s ease;}
.btn-2 span:before {  width: 2px;  height: 0%;}
.btn-2 span:after {  width: 0%;  height: 2px;}
.btn-2 span:hover:before {  height: 100%;}
.btn-2 span:hover:after {  width: 100%;}
.btn-2 span i {float:right; padding-right:20px; font-size:40px; font-weight:100; line-height:47px; font-style:normal;}


@media all and (max-width:1000px){
	.custom-btn {margin-top:20px; font-size:15px;}
}