@charset "UTF-8";

/* 메인페이지 공통 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

@font-face {
    font-family: 'Eoe_YE_M';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Eoe_YE_M.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.fonnnnnt{
    font-family: 'Montserrat', sans-serif;
    font-family: 'Noto Sans KR', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Nanum Pen Script', cursive;
}

.row{max-width: 1200px; margin: 0 auto;}


.main_wrap{width: 100%; margin: 0 auto;}

.main_slide_optipn{width: 100%; margin: 0 auto; height: 706px; display: flex; align-items: center;}

.slick_slidebox{max-width: 1319px;width: 100%; height: 706px;}
.slick_slidebox > div{position: relative;}
.slick_slider{position: relative;}


.slick_textbox{position: absolute; top: 50%; transform: translateY(-50%); max-width: 941px; width: 100%; margin: 0 auto; left: 0;right: 0;}
.slick_text{}
.slick_text p{font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; color: #fff; padding-bottom: 20px;}
.slick_text h1{font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 34px; color: #fff; padding-bottom: 35px; position: relative; width: 863px;}
.slick_text h1::after{content: ""; background: url(../images/main/main00.png) 50% 50% no-repeat; width: 87px; height: 86px; display: block; position: absolute; top: -60px; right: 0; }
.slick_text span{font-size: 16px; font-family: 'Noto Sans KR', sans-serif; display: block; color: #fff; padding-bottom: 40px; font-weight: 300; line-height: 1.5;}
.slick_text span:nth-child(3){
    padding: 0;
}
.slick_text a{width: 140px; height: 40px; line-height: 38px; border: 1px solid rgba(255,255,255,0.7);display: block; text-align: center; color: #ffffff; font-size: 15.98px; font-family: 'Noto Sans KR', sans-serif;}
.slick_text a:hover{color: #111111; background: #fff; border-color: transparent;}


.slick-dots{max-width: 941px!important; width: 100%!important; margin: 0 auto!important;left: 0!important ;right: 0!important; text-align: left!important;}
.slick-dots li{width: 11px!important; height: 11px!important; border-radius: 50%; margin: 0px!important; margin-right: 13px!important; }
.slick-dots li button{width: 11px!important; height: 11px!important; border-radius: 50%; border: 0; background: #fff; opacity: 0.6; box-sizing: border-box; text-indent: -9999px;}


.slick-dots li.slick-active button{opacity: 1;}

.main_option_wrap{width:584px; height: 706px;}
.main_option01{width: 100%; height: 352px; background: #0089d2; display: flex; align-items: center; position: relative;}
.main_option01::after{background: url(../images/main/main_contact_bg.png) 50% 50% no-repeat; width: 216px; height: 263px; -webkit-background-size: cover; background-size: cover; position: absolute; bottom: 0; right: 0; content: ""; display: block; z-index: 1;}
.main_option02{width: 100%; height: 352px; background: #192226; display: flex; align-items: center;}

.main_option_txt{margin-left: 50px; width: 365px; z-index: 2;}
.main_op_title{display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.main_op_title h3{color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 22px; }
.main_op_title a{ font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; color: #fff; }
.main_op_title a:hover{opacity: 0.8;}

.option_table{width: 100%;}
.option_table tr{ /*display: flex; justify-content: space-between; */width: 100%; height: 34px;}
.option_table tr td:nth-child(1){ text-align: left;}
.option_table tr td:nth-child(2){ text-align: right;}

/*.option_table tr td:first-child{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff; display: block; width: 261.94px;}*/

.option_table tr td a{color: #fff; font-size: 16px;  font-family: 'Noto Sans KR', sans-serif; font-weight: 300; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 261.94px; display: block; padding-bottom: 4px; }
.option_table tr td a span{position: relative;}
.option_table tr td a span::after{width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0px; left: 0; right: 0; content: ""; display: none;}
.option_table tr td a:hover span::after{display: block;}
.option_table tr td p{ color: #fff; font-size: 14px;  font-family: 'Noto Sans KR', sans-serif; opacity: 0.7; font-weight: 300;}


.test{height: 2px; background-color: #000; display: inline-block;}

.main_cont_wrap{width: 100%; margin: 0 auto; background: #eceff0;}
.main_cont{padding: 90px 0;}
.main_cont ul{display: flex; align-items: center; justify-content: space-between;}
.main_cont ul li{transition: all 0.4s ease-out;}
.main_cont ul li a{position: relative; display: block; width: 100%; height: 100%;  }

.main_cont ul li:hover a .main_conbg{background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.01) 55%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.2) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001e5799', endColorstr='#8f181b6b', GradientType=0);
    /* IE6-9 */ }
.main_cont ul li:hover a .main_cont_txtbox p{padding-bottom: 43px;}
.main_cont ul li:hover a .main_cont_txtbox > span{opacity: 1;}
.main_cont ul li:hover a .main_cont_txtbox{bottom: 35px;}

.main_cont_txtbox{position: absolute; bottom: 33px; left: 35px; right: 0; margin: 0 auto; transition: all 0.4s ease-out; box-sizing: border-box; z-index: 3;}
.main_cont_txtbox p{line-height: 1.4em; color: #fff; font-family: 'Roboto', sans-serif; font-size: 22.06px; transition: all 0.4s ease-out; }
.main_cont_txtbox p > span{display: block; vertical-align: baseline;}
.main_cont_txtbox > span{font-family: 'Montserrat', sans-serif; color: #fff; font-size: 14.04px; transition: all 0.4s ease-out; opacity: 0; position: absolute; bottom: 5px; box-sizing: border-box;}
.main_cont_txtbox > span > span{display: inline-block; vertical-align: baseline;}

.main_conbg{position: absolute; top: 0; width: 100%; height: 100%; left: 0;right: 0; margin: 0 auto; display: block; transition: all 0.4s ease-out; }

.main_contact_wrap{width: 100%; margin: 0 auto;}
.main_cont_us{ display: flex; align-items: center; justify-content: space-between; padding: 95px 0;}

.main_us_cont > span.contac_more{ font-family: 'Montserrat', sans-serif; font-size: 14px; color: #111; position: absolute; top: 50px; right: 50px; display: block; }
.main_us_cont > span.contac_more > span{font-size: 18px; display: inline-block; vertical-align: middle;}


.main_us_cont:hover{background: #f8f8f8;}
.main_us_cont:hover > span.contac_more{color: #009ff4;}

.main_us{width: 760px; height: 287px; box-sizing: border-box; border: 1px solid #dbdbdb; overflow: hidden;}

.main_us_cont{display: flex; align-items: center;  justify-content: center; height: 287px; position: relative;}
.main_us_cont img{}
.main_us_txt{margin-left: 48px;}
.main_us_txt h3{font-size: 22px; padding-bottom: 24px;  font-family: 'Noto Sans KR', sans-serif; font-weight: 900; color: #111; }
.main_us_txt p{font-size: 16px;  font-family: 'Noto Sans KR', sans-serif; color: #111;}
.main_board_list{
    width: 100%;
}
.main_board_list .main_b_l{
    margin-bottom: 18px;
}
.main_board_list .main_b_l>a{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
span.main_li_t{
    width: 265px;
    font-size: 16px;
    font-weight: 200;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
span.main_li_d{
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}
.main_cont ul, .main_cont_us{
    width: 1580px;
    margin:  0 auto;
}


/*/////////////////////////반응형////////////////////////*/


@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1024px){
    
}

@media screen and (max-width:768px){
    
}

@media screen and (max-width:640px){
    
}

@media screen and (max-width:480px){
    
}

@media screen and (max-width:350px){
    
}