﻿
.slider .move-btn {display: none;}
.slider .slider-wrapper .slide img {width:100%;}
/*.slider .slider-dots {bottom: 5%!important; transform: translateY(-50%)!important;}*/


h3.title {font-size: 2.2rem; font-weight: bold;} 
p.subtitle {font-size: 1.8rem; line-height: 1.5; font-weight: 600;}
hr {width: 5%; margin: 15px auto; border-color:#000;}


/* ms + slide txt */
#section1 {width: 100%; margin: 0 auto 50px; position: relative; top: 0; left: 0; overflow: visible;} 
#section1 ul li.ms1-box { transition: all .3s ease-in-out; width: 100%; height: 385px; background-size: cover; background-repeat: no-repeat; text-align: center; position: relative; top: 0; left: 0;}
#section1 ul li:nth-child(1) {background: url(../Images/contents_bg_1.png) no-repeat center/cover;}
#section1 ul li:nth-child(2) {background: url(../Images/contents_bg_2.png) no-repeat center/cover;}
#section1 ul li:nth-child(3) {background: url(../Images/contents_bg_3.png) no-repeat center/cover;}
#section1 ul li:nth-child(4) {background: url(../Images/contents_bg_4.png) no-repeat center/cover;}
#section1 ul li.ms1-box a {display: block; width: 100%; height: 100%; color: #121212;}
#section1 ul li.ms1-box:hover { opacity:0.8;}
#section1 ul li.ms1-box div.ms-1 {position: absolute; top: 40px; left: 0; width: 100%; margin: 0 auto;}



/* ms 2 */
#section2 { width: 100%; overflow: hidden; background-color:#eee; padding:40px 0px; box-sizing: border-box; text-align:center;}
#section2 > div > div:nth-of-type(1) {margin: 0 0 50px;}
#section2 > div > div > h2 {font-size: 1.6em; border: 1px solid #121212; display: inline-block; padding: 10px 50px; font-weight: bold; }
#section2 a { color: #4e4e4f; transition: all .2s ease-in-out;}
#section2 a:hover li{font-weight:bold;}
#section2 .ms2-box { padding: 0px 2em 50px;}
#section2 .ms2-box h4 { float:left; font-size:2.5rem; color: #121212; font-weight:bold; }
#section2 .ms2-box h5 { float:right; font-weight:bold; margin:15px 0;}
#section2 ul { clear:both; margin-top:50px; position: relative; top: 0; left: 0; overflow: hidden;}
#section2 li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; top: 0;  margin-bottom: 5px; border-bottom:1px solid #d4d4d4; text-align:left;}
#section2 li > a {display: flex; justify-content: space-between; align-content: center;  padding: 5px 0;}
#section2 li p {color: #666; font-size: 1.1em;}
#section2 li p:nth-of-type(1) { width: 60%; display:block; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
#section2 li p:nth-of-type(2) { position:relative; right: 0; float: right; font-size: 14px;}
#section2 li:hover { background-color:rgba(255,255,255,0.5); transition:0.3s; border-radius:1px; }
.ms2-quick > li { border: 1px solid #d4d4d4 !important; padding: 0px!important; margin-bottom:15px; transition: all .2s ease-in-out; display: block!important;}
.ms2-quick > li > a {padding: 15px 10px!important;}
.ms2-quick > li > a > p:nth-of-type(1) {width: auto!important;}
.ms2-quick > li:hover { background: white;}

/* common */
.main-title { 
    font-family: 'Noto Sans KR', sans-serif; 
    padding: 7px 50px; 
    border: 2px solid #000;
    display: inline-block;
    font-size: 2.6rem; 
    margin-bottom:40px;
    text-align: center;
    letter-spacing: 1px;
}



/* responsive */
@media (max-width:1499px) {

}



@media (max-width:1199px) {

    /* */

    #section1 ul li.ms1-box {height: 25vw;}
    #section1 ul li.ms1-box div.ms-1 {top: 2em;}
    h3.title {font-size: 2rem;}
    p.subtitle {font-size: 1.4rem;}
    .ms-1 hr {margin: 8px auto;}

    #section2 > div > div > h2 {font-size: 1.4em; padding: 5px 2em;}
    #section2 .ms2-box h4 {font-size: 1.2em;}
    #section2 .ms2-box h5 {font-size: 1.5rem; margin:0; }


}

@media (max-width:991px) {
	#section1 {margin-top: 2em;}
	#section2 .ms2-box {padding: 0 1em;}
    #section2 .ms2-box h4 {font-size: 1em;}
	#section2 li p {font-size: 1em;}
}

@media (max-width:767px) {

    #section1 ul {flex-wrap: wrap;}
    #section1 ul li.ms1-box {width: 50%; height: 45vw;}
    h3.title {font-size: 1.5rem;}
    .ms-1 hr {margin: 8px auto;}
	
	#section2 {padding: 2em 0;}
	#section2 .ms2-box {padding-bottom: 1em;}
	
}


@media (max-width: 414px) {
    #section1 ul li.ms1-box div.ms-1 {top: 1em;}
	#section2 li p {font-size: .9em;}
}
