@charset "utf-8";

/*
font-family: 'S-CoreDream'; font-weight:400;
font-family: 'S-CoreDream'; font-weight:500;
font-family: 'S-CoreDream'; font-weight:700;
font-family: 'Jalnan'; font-weight:400;
*/


/* **** Common Reset **** */
*{margin:0;padding:0;list-style:none;font-size:14px;font-weight:400;font-family: "S-CoreDream", sans-serif;box-sizing: border-box;letter-spacing: -1.5px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5{margin:0;padding:0;word-wrap:break-word;word-break:break-all;}
li,p,span,strong,a{font-size:inherit;color:inherit;font-family:inherit;}
body, html{width:100%;height:100%;}
body{overflow-x:hidden;background: #e8fffa;}
body.hide{overflow:hidden;}
input,select,img{vertical-align:middle;}
img{border:0;max-width:100%;max-height:100%;}
table{border-collapse:collapse;width:100%;}
table caption{position: absolute;top: 0px;left: 0px;overflow: hidden;display: block !important;width: 0px !important;height: 0px !important;margin: 0 !important;font-size: 0 !important;line-height: 0 !important;}
button,input,optgroup,select,textarea{margin:0;padding:0;border:1px solid;box-sizing:border-box;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;vertical-align:middle}
button,input,select{display:inline-block}
button,input{overflow:visible}
input[type=search],input[type=text]{-webkit-border-radius:0;-webkit-appearance:none}
input[type=search]{outline-offset:-2px;-webkit-appearance:none}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=file]{border:none}
input[type=file]::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;-moz-appearance:button;border:1px solid #bbb;background:#e0e0e0;box-shadow:none}
input[type=checkbox],input[type=radio]{padding:0;border:none}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{overflow:visible;border-color:transparent;background-color:transparent;cursor:pointer}
textarea{display:block;overflow:auto;resize:vertical}
input[disabled]{background-color:#ebebeb}
select:disabled{background-color:#ebebeb}
select{border:0;position:relative;background: url(../images/common/select.png) no-repeat right 10px center;padding: 0 30px 0 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-appearance: none;appearance: none;}
select::-ms-expand { display: none;}
address,cite,dfn,em,i{font-style:normal}


[hidden]{display:none!important}

.clear{clear:both;}
.clearfix::after{content:"";display:block;clear:both;}
.blind {position: absolute;top: 0px;left: 0px;overflow: hidden;display: inline-block !important;width: 1px !important;height: 1px !important;margin: 0 !important;font-size: 0 !important;line-height: 0 !important;}
a{display:inline-block;text-decoration:none;}

.skip-nav a {position:absolute; left:-3000%;}
.skip-nav a:focus { display:block; left:0; top:0; z-index:10000000000; width:100%; height:30px; line-height:30px; background:#ee2a32; color:#fff; text-align:center;}

.mt0{margin-top: 0px !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}

.txl{text-align:left !important;}
.txc{text-align:center !important;}
.txr{text-align: right !important;}

.t-br, .m-br, .xs-br {display: none;}
.space-2char {
  letter-spacing: 0.8em;
  margin-right: -0.8em;
}

.visual{width: 100%;height: 495px;background: url(../images/main_bg.png) center no-repeat #fff;background-size: cover;position: relative;box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.07);}
.logo{position: absolute;top: 40px;left: 75px;}
.logo.right{position: absolute;top: 60px;left:auto;right: 75px;text-align: right;}
.visual .title-wrap{text-align: center;display:flex;flex-direction: column;align-items:center;justify-content:center;height:100%;gap:40px}
.year{position: relative;display:flex;align-items:center;justify-content:center;width:calc(100%);max-width:920px;height:90px;line-height:1.2;background:#f39600;font-size: 36px;font-family: "OneMobileGothic Title";color: #ffffff;border-radius: 90px;padding: 25px 50px}


.title-wrap {text-align: center;}
.title{margin-top: 80px}
.title > h2{display: inline-block;position: relative;font-size: 70px;font-family: "Jalnan";color: #2a2a2a;word-break: keep-all;position: relative;line-height: 1.15;
        filter:drop-shadow(3px 0 0 #fff)
    drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 -3px 0 #fff);}
.title > h2 span {color: #11888b;}


main{padding-top: 90px;padding-bottom:100px;width:100%;max-width: 1380px;margin: 0 auto;}
.tab-nav {position: relative;}
.tab-nav.t1 {margin-top: -140px;}
.tab-nav.t2 {margin-top: 50px;}
.tab-nav > ul{display: flex;justify-content: center;gap: 28px;}
.tab-nav > ul > li{width: calc(100% / 5); max-width:182px}

.tab-nav > ul > li a {word-break: keep-all;white-space: nowrap;}

.tab-nav.t1 > ul > li a {display: flex;align-items: center;justify-content: center;height: 90px;border: 2px solid #2f9395;border-radius: 12px;background-color: #fff;color: #2f9395;font-size: 30px;cursor: pointer;transition: all 0.2s ease;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.02);text-align: center;font-family: 'OneMobileGothic Title';}
.tab-nav.t1 > ul > li a.active {background-color: #2f9395;color: #ffffff;position: relative;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);border-color: #2f9395;}

.tab-nav.t2 > ul > li a {display: flex;align-items: center;justify-content: center;height: 60px;border: 1px solid #2f9395;border-radius: 60px;background-color: #fff;color: #2f9395;font-size: 30px;cursor: pointer;transition: all 0.2s ease;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.02);text-align: center;font-family: 'Jalnan';}
.tab-nav.t2 > ul > li a.active {background-color: #f39600;color: #ffffff;position: relative;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);border-color: #f39600;}


.cont-wrap{margin-top:50px;}
.cont-wrap > ul{display:flex;flex-wrap: wrap;gap: 30px;}
.cont-wrap li {width: calc((100% - 45px * 2) / 4);border-radius: 16px;overflow: visible;position: relative;margin-bottom:45px}
.cont-wrap li a {position: relative;display: block;height: 100%;color: #333;overflow: visible;border-radius: 30px;display: flex;flex-direction: column}

.cont-wrap li a:hover .card-sub{color:#2f9395}
.cont-wrap li a:hover .card-title{color:#1f8082;}
.cont-wrap li a:hover .card-btn{color:#fff;background: #2f9395;border-color:#2f9395;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05)}
/*260420*/
.cont-wrap li a:hover .card-btn::after{background:url(../images/go_on.png) no-repeat;}

/* 카드 상단 이미지 영역 */

.card-img {display: flex;object-fit: cover;overflow: hidden!important;}
.card-img  img {width: 100%;height: 100%;object-fit: cover;display: block;}
.cont-wrap li a:hover .card-img{}
.cont-wrap li a:hover .card-img::after{content:"";position:absolute;inset:0;border: 1px solid #2f9395;box-sizing: border-box;overflow: hidden;border-radius: 16px;box-shadow: 0 6px 20px rgba(0,0,0,0.1);}

/* 카드 텍스트 내용 */
.card-content {position:absolute;top:20px;left:0;text-align: center;display: flex;flex-direction: column;height: 100%;width:100%;text-align: center;align-items:center;justify-content: space-between;}/*260420*/
.card-sub {font-size: 20px;color: #686868;margin-bottom: 18px;font-weight: 500;}
.card-title {font-size: 36px;font-weight: 700;color: #222;line-height: 1.3;margin-top: 10px;font-family: 'Jalnan';position: relative;  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff);}
/*260420 수정*/.card-info {text-align: left;font-size: 16px;line-height: 1.5;display: flex;flex-direction: column;height: 100%;}/*260420*/
.card-info > div{display:flex;font-size: 16px;color: #444;margin-bottom:15px;letter-spacing: -0.5px;}
/*260420 수정*/.card-info span {flex: 0 0 auto;background: #f1e6f8;color: #444444;width: 79px;height: 27px;border-radius: 20px;margin-right: 10px;font-weight: 500;font-size: 16px;display: flex;align-items: center;justify-content: center;margin-top: -1px;}

/*260420*/
/* 자세히보기 버튼 */
/*260420 align self 추가*/
.card-btn {margin-top: -20px;background: #fff;border:solid 1px #e7e7e7;height: 42px;border-radius: 50px;display: flex;align-items: center;justify-content: center;align-self:end;gap: 0 10px;margin: 25px auto 0;font-size: 18px;color: #222;font-weight: 500;flex-shrink: 0;padding: 0 45px}/*260420*/
.card-btn::after{content:"";background:url(../images/go_off.png) no-repeat;width: 11px;height: 18px;}

footer{text-align: center;background-color: #825c56;padding: 40px;color: #fff;line-height: 1.8!important;}
footer ul li{font-size:18px;font-weight: 500;}


@media screen and (max-width: 1500px){
    main{padding-left: 20px;padding-right:20px;}



        .title > h2{font-size:60px;}
        .year {font-size :26px;height:auto;width:auto;padding: 15px 30px}
}
@media screen and (max-width: 1280px){
.visual{background: url(../images/main_bg_t.png) center no-repeat #fff;}
    .logo {top: 20px;left: 20px;}
    .logo.right {top: 20px;left:auto;right: 20px;}
    .logo img {width: 70%}
    .year {font-size: 24px;}

    .title {margin-top:0}
    .title > h2{font-size:50px;}

    .tab-nav > ul > li a{font-size:20px;}
    .cont-wrap li{width:calc((100% - 60px) / 3);}
        .t-br {display: block;}
}
@media screen and (max-width: 1024px){
.visual .title-wrap {gap: 20px}
.year {font-size: 24px; padding: 15px; min-height: auto}
    .tab-nav > ul{gap:10px;}
    .tab-nav > ul > li a{height: 60px;}
    .card-btn {padding: 0 15px; font-size: 15px}
}
@media screen and (max-width: 860px){
    .m-br {display: block;}
    .title > h2 {text-indent:-10px;}
.tab-nav.t1 > ul > li a, .tab-nav.t2 > ul > li a{font-size: 20px;}
}
@media screen and (max-width: 768px){
.visual{background: url(../images/main_bg_m.png) center no-repeat #fff;}
    .year {font-size: 20px; padding: 15px 30px}
    .title p {font-size: 40px}

    .title-wrap > p{font-size:22px;}
    .tab-nav.t1 {
    margin-top: -125px;
}
    .tab-nav > ul{flex-wrap:wrap;gap: 5px;}

.tab-nav.t1 > ul > li a {height: auto; padding: 15px}
    .tab-nav.t2 > ul > li a{border-radius:10px;}
    .cont-wrap li{width:calc((100% - 30px) / 2);}
    .card-title {font-size: 28px;}
}
@media screen and (max-width: 540px){
        /* .cont-wrap li{width:100%;} */
        /* .cont-wrap li{width:calc((100% - 30px) / 2);} */
}
@media screen and (max-width: 500px){

    .xs-br {display: block;}
}


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

    .year{font-size:16px;font-weight: 400;}
    .tab-nav > ul > li a{font-size:16px;}
             .cont-wrap li{width:100%;}

}