@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:800px){
	.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; background-size:cover; transition:all 1.2s;}
.w_index .list .bg00 {background-image:url('../img/sub/sub_main.jpg'); }
.w_index .list .bg00 span{    background: rgba(0,0,0,0);    position: absolute;    width: 100%;    height: 100%;}
.w_index .list .bg.on {opacity:1;}
.w_index .list > ul {overflow:hidden;}
.w_index .list > ul > li {position:relative; float:left; width:100%; 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: 31% 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:3rem; 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 li .over {position:absolute; top:0; left:0; width:100%; height:100%; padding: 10% 10% 0 10%; opacity:1; transition:all .4s;}
.w_index .list li.s01 .over {background:rgba(0,0,0,0.1);}
.w_index .list li:hover .over {opacity:1;}
.w_index .list li .title {position:relative;text-align: center; }
.w_index .list li .title img {width:400px;}
.w_index .list .over ul {width:800px; margin:50px auto; overflow:hidden; }
.w_index .list .over li {background:rgba(255,255,255,0.3);display:block; margin-bottom:5px; }
.w_index .list .over li a { display:block; padding:5px;  border:1px solid rgba(255,255,255,0.33); font-size:19px; color:#444; line-height:60px; font-weight:700; background:url('../images/index/icon_arr02.png') no-repeat right 15px center; transition:all .4s;}

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

.w_index .list ul li p {width:320px; margin:0 auto;}
.w_index .list ul li p span {display:inline-block; text-align:left;}

@media all and (max-width:1100px){
    .w_index {overflow:hidden; position:relative; width:100%; min-width:100%; height:100vh; display:block;}
	.w_index .list li .title img {width:300px;}
	.w_index .list li .over {padding: 40% 10% 0 10%;}
	.w_index .list .over ul {width:100%; margin:50px auto; overflow:hidden; }
	.w_index .list .over li a {padding:2px; font-size:15px;}

}


@media all and (max-width:500px){
	.w_index .list li .title img {width:100%;}
	.w_index .list .over li a {font-size:13px;}
	.w_index .list ul li p {padding:0 20px;}

}