@import url("common.css");


/*** css 공통 ***/
/* 텍스트 */
.title{font-size:var(--fs50); letter-spacing: -2.5px; font-weight: 700; line-height:120%; color:var(--black);}
.title.eng{letter-spacing: 0;}
.sub_tit{font-size:var(--fs20); letter-spacing: -0.75pt; line-height:150%; font-weight:500; color:var(--black);}
.txt{font-size:var(--fs18); letter-spacing:-0.5pt; line-height:165%; color:rgba(34,34,34,.5);}
.tbox{text-align:center; padding: 0 5% 30px; box-sizing:border-box;}
.tbox .txt{padding: 8px 0 0; line-height: 150%;}

/* 버튼 */
.moreBtn {position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; box-sizing:border-box; transition:all .3s linear; border:1px solid var(--main); background:var(--main); position:relative;}
.moreBtn:after {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--icon); font-size:18px; color:var(--white); content:"\e145";} 
.moreBtn:hover {color:var(--white); transition:all .3s linear;}
.moreBtn:hover:after {color:var(--main);}

/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:40px; height:40px; border:1px solid var(--border); border-radius:100%; transition:all .3s linear; position: absolute; z-index: 9999; background-color:var(--white);}
.slick-arrow:after {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--icon); font-size:16px; color:var(--basic); z-index:10; text-align:center;}
.slick-prev {left:50%; margin-left:-675px;}
.slick-prev:after {content:"\e5e0";left:3px;}
.slick-next {left:50%; margin-left:-550px;}
.slick-next:after {content:"\e5e1"; left:auto; right:0;}


/*** Visual ***/
#visual {position: relative; width:100%; height:900px; overflow: hidden; background:url(/uljutalk/images/main/visual_bg.jpg) top center no-repeat; background-size:cover;}
#visual .visual_in {width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll {width: 100%; height:900px;}
#visual .visual_in .roll .roll_in {position:relative; width:94%; height:100%;  max-width:1350px; margin-right:auto; margin-left:auto; display:flex; flex-wrap:wrap;}
#visual .visual_in .roll .v_txt {position: absolute; left: 0; top:55%; transform:translateY(-50%); z-index: 9999; margin-top:-120px;}
#visual .visual_in .roll .v_txt p {font-size:2.5rem; color:var(--black); letter-spacing:-2px !important; font-weight:600; line-height:150%; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0; margin-bottom:10px;}
#visual .visual_in .roll .v_txt p em {font-style:normal; font-weight:700;}
#visual .visual_in .roll .v_txt p br {display:none;}
#visual .visual_in .roll .v_txt h2 {position:relative; font-size:5rem; letter-spacing:-5px !important; font-weight:300; font-family:var(--eng); color:var(--sub2); line-height:115%; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0; margin-bottom:20px;}
#visual .visual_in .roll .v_txt h2 strong {font-weight:700; font-family:inherit; font-size:inherit;}
#visual .visual_in .roll .v_txt h2:before {position:absolute; content:""; left:0; top:0; width:81px; height:73px; background:url('/img/visual_mark.svg') top left no-repeat; z-index:10; background-size:cover;}
#visual .visual_in .roll .v_txt div {font-size:1.875rem; color:#fff; letter-spacing:-1px; line-height:150%; transition:all .6s 0.9s linear; transform:translateY(60px); opacity:0; background:var(--sub); border-radius:20px; padding:5px 15px; box-sizing:border-box;}
#visual .visual_in .roll .v_bg {position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; background-repeat:no-repeat; background-size:50% auto; background-position:center right; transform:translateY(50px); transition:all 1000ms .5s ease-out; opacity:0;}
/* #visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; background-repeat:no-repeat; background-size:50% auto;  border:1px solid red; background-position:center right; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}*/
#visual .visual_in .roll .v_bg .jarallax {position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe {position: absolute;}


@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}

/* 화살표 */
#visual .slick-arrow {opacity: 1; bottom:235px;}
#visual .slick-arrow:hover {border-color:var(--main);}
#visual .slick-arrow:hover:after {color:var(--main);}

/* Page */
#visual .slick-page {position:absolute; z-index:1010; box-sizing:border-box; left:50%; margin-left:-620px; bottom:250px; text-align:center; display:flex; align-items:center; justify-content:center; animation:fadeIn2 .6s 0.8s linear; animation-fill-mode:both;} /* opacity:0;  */
#visual .slick-page li {font-size:14px; color:rgba(0,0,0,0.4); line-height:1; font-weight:300; letter-spacing:0.5pt;}
#visual .slick-page li.cur {background:none; font-weight:700; color:var(--main); position:relative; width:auto; font-size:14px; padding:0; top:0;}
#visual .slick-page li.and {padding:0 6px; opacity:0.3;}

/* 효과 */
/*#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}*/
#visual .visual_in .roll.action .v_bg .bg{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt h2:before {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt div {transform:translateY(0); opacity:1;}


/** 퀵 바로가기 **/
#quick {position:relative;}
#quick .quick_in {position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:0 30px; margin-top:-123px;}
#quick .quick_in figure {position:relative; overflow:hidden; border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,0.06);}
#quick .quick_in figure:before {display:block; content:""; padding-bottom:100%; }
#quick .quick_in figure a {position:absolute; left:0; top:0; display:flex; flex-direction:column; background:var(--white); border-radius:20px; width:100%; height:100%; content:""; z-index:5; padding:40px; box-sizing:border-box;}
#quick .quick_in figure a:before {position:absolute; content:""; left:50%; top:50%; transform:translate(-50%, -50%); z-index:7; background:var(--main); border-radius:100%; width:0; height:0; opacity:0; transition:all 0.5s ease-out;}	/* 오버 색상 */
#quick .quick_in figure a:after {position:absolute; content:""; width:100%; height:100%; display:block; right:0; bottom:0; background-position:right 40px bottom 40px; background-repeat:no-repeat; z-index:15;}
#quick .quick_in figure h3 {line-height:130%; color:var(--black); font-size:1.375rem; font-weight:600; letter-spacing:-.7pt; z-index:20;}
#quick .quick_in figure a:hover:before {width:100%; height:100%; left:0; top:0; transform:translate(-50%, -50%); transform:scale(2.0); opacity:1;}
#quick .quick_in figure a:hover h3 {color:var(--white);}

#quick .quick_in figure:first-child a:after {background-image:url('/uljutalk/images/main/quick_icon01.png');}
#quick .quick_in figure:nth-child(2) a:after {background-image:url('/uljutalk/images/main/quick_icon02.png');}
#quick .quick_in figure:nth-child(3) a:after {background-image:url('/uljutalk/images/main/quick_icon03.png');}
#quick .quick_in figure:nth-child(4) a:after {background-image:url('/uljutalk/images/main/quick_icon04.png');}
#quick .quick_in figure:nth-child(5) a:after {background-image:url('/uljutalk/images/main/quick_icon05.png');}

#quick .quick_in figure:first-child a:hover:after {background-image:url('/uljutalk/images/main/quick_icon01.png');}
#quick .quick_in figure:nth-child(2) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon02.png');}
#quick .quick_in figure:nth-child(3) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon03.png');}
#quick .quick_in figure:nth-child(4) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon04.png');}
#quick .quick_in figure:nth-child(5) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon05.png');}

.board_con {position:relative; display:flex; flex-wrap:wrap; margin:50px auto 140px auto;}


/** 공지사항 **/
#notice {position:relative; border:1px solid var(--border); border-radius:20px; width:65.925%; box-sizing:border-box; margin-right:2.22%; padding:40px 40px 30px 40px;}
#notice h3 {line-height:1; font-size:2.188rem; font-weight:700; margin-bottom:15px; font-family:var(--eng); color:var(--black);}
#notice h3 strong {color:var(--main); line-height:1;}
#notice .list {}
#notice .list figure {border-bottom:1px dashed var(--border);}
#notice .list figure:last-child {border-bottom:none;}
#notice .list figure a {display:flex; align-items:center; padding:17px 0; width:100%;}
#notice .list figure a em {width:70px; border-radius:10rem; color:var(--main); border:1px solid var(--main); text-align:center; font-family:var(--eng); height:30px; line-height:30px; font-weight:600; font-size:14px; font-style:normal; margin-right:10px;}
#notice .list figure a p {width:calc(100% - 70px - 110px - 20px); color:var(--black); letter-spacing:-.35pt; font-size:var(--fs18); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#notice .list figure a span {position:relative; width:110px; font-size:14px; font-family:var(--eng); line-height:120%; color:rgba(89,87,87,0.7); box-sizing:border-box; text-align:right;}
#notice .list figure a span:before {display:inline-block; vertical-align:middle; width:18px; height:18px; font-size:18px; color:rgba(89,87,87,0.7); font-family:var(--icon); content:"\ebcc"; margin-right:5px;}
#notice .more {position:absolute; right:40px; top:37px; width:40px; height:40px; border-radius:100%; background:var(--main); border:1px solid var(--main); z-index:10; transition:all 0.5s ease-out;}
#notice .more:after {position:absolute; content:"\f3dd"; left:0; top:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--white); font-family:var(--icon); font-size:18px; z-index:15; transition:all 0.5s ease-out;}
#notice .more:hover {background:var(--white);}
#notice .more:hover:after {color:var(--main);}


/** 배너 **/
#banner {position: relative; width:calc(100% - 65.925% - 2.22%);} 
#banner > figure {position:relative; border-radius:20px; display:flex; height:100%; align-items:center;}
#banner > figure a {width:100%; box-sizing:border-box; display:flex; justify-content: center; flex-direction:column; padding:3vw 2.5vw; z-index:3;}
#banner > figure.poll {background:rgba(255,225,240,0.5);}
#banner > figure.qna {background:rgba(201,188,156,0.2);}
#banner > figure .txtArea {width:66%;}
#banner > figure h3 {font-size:1.375rem; font-weight:600; letter-spacing:-.5pt; margin-bottom:5px; color:var(--black);}
#banner > figure p {color:rgba(34,34,34,0.5); letter-spacing:-.35pt; font-size:var(--fs18); line-height:150%;}
#banner > figure:after {position:absolute; width:100%; height:100%; content:""; right:0; top:50%; transform:translateY(-50%); z-index:5; background-repeat:no-repeat; background-position:right 3vw center; z-index:1;}
#banner > figure.poll:after {background-image:url('/uljutalk/images/main/poll_icon.svg');}
#banner > figure.qna:after {background-image:url('/uljutalk/images/main/qna_icon.svg');}


#banner .inner {width:100%; height:100%;}
#banner .inner .banner_roll {width:100%; height:100%;position: relative; overflow:hidden; border-radius:20px; border:1px solid var(--border); box-sizing:border-box;}
#banner .inner .banner_roll .roll {width:100%; height:460px; position: relative; overflow:hidden; }
#banner .inner .banner_roll .roll img {max-width:100%; width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; display: block;}

#banner .p_btn {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    position:absolute;
    top:50%;
    left:10px;
    right:10px;
    transform:translateY(-50%);
    pointer-events:none;
}

#banner .p_btn span {
    display:inline-block;
    width:40px;
    height:40px;
    font-size:0;
    border:1px solid rgba(0,0,0,.15);
    border-radius:50%;
    background:#fff;
    position:relative;
    transition:all .3s linear;
    pointer-events:auto;
}

#banner .p_btn span:before {
    display:block;
    content:'';
    font-family:var(--icon);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:23px;
    color:var(--black);
    transition:all .3s linear;
}

#banner .p_btn .prev_arrow:before {
    content:'\e5cb';
}

#banner .p_btn .next_arrow:before {
    content:'\e5cc';
}

#banner .p_btn span:hover{background:var(--white); border:1px solid var(--main);}
#banner .p_btn span:hover:before {color:var(--main); }








/*******************************************************************************
    @media 1440px
*******************************************************************************/
@media all and (max-width:1440px){


/*** css 공통 ***/
/* 텍스트 */
.title br{display:none;}
.sub_tit br{display:none;}
.txt br{display:none;}


/* 화살표 */
.slick-prev {left:3%; margin-left:0;}
.slick-prev:after {left:3px;}
.slick-next {left:calc(3% + 125px); margin-left:0;}

/*** 번호 ***/
#visual .slick-page {left:calc(3% + 55px); margin-left:0; bottom:250px;} /* opacity:0;  */


}


/*******************************************************************************
    @media 1400px
*******************************************************************************/
@media all and (max-width:1400px){


/*** css 공통 ***/
/* 텍스트 */
.title br{display:none;}
.sub_tit br{display:none;}
.txt br{display:none;}


}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){


/** 퀵 바로가기 **/
#quick .quick_in {gap:0 20px; margin-top:-108px;}
#quick .quick_in figure a {padding:30px;}
#quick .quick_in figure a:after {background-position:right 30px bottom 30px; background-size:auto 55px;}

/** 배너 **/
#banner > figure p br {display:none;}

#banner .inner .banner_roll .slick-list {height:100%;}
#banner .inner .banner_roll .slick-list .slick-track{height:100%;}

#banner .inner .banner_roll .roll dt  {height:100%; }
#banner .inner .banner_roll .roll img {max-width:100%; height: 100%;}

#banner .p_btn span {width:40px; height:40px; }
#banner .p_btn span:before {font-size:23px;}


}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/*** Visual ***/
#visual {height:700px;}
#visual .visual_in .roll {height:700px;}
#visual .visual_in .roll .v_txt {top:62%;}
#visual .visual_in .roll .v_txt h2 {font-size:4rem; transform:translateY(50px);}
#visual .visual_in .roll .v_txt h2:before {width:70px; height:63px;}
#visual .visual_in .roll .v_txt p {font-size:2rem; transform:translateY(50px);}
#visual .visual_in .roll .v_txt p br {display:block;}
#visual .visual_in .roll .v_txt div {font-size:1.5rem; letter-spacing:-.5pt; transform:translateY(50px);}
#visual .visual_in .roll .v_bg .bg {transform:translateY(50px);}

/* 화살표 */
#visual .slick-arrow {bottom:135px;}

/*** 번호 ***/
#visual .slick-page {bottom:150px;} /* opacity:0;  */


/** 퀵 바로가기 **/
#quick .quick_in {gap:0 10px; margin-top:-80px;}
#quick .quick_in figure a {padding:25px 20px; border-radius:15px;}
#quick .quick_in figure a:after {background-position:right 20px bottom 25px; background-size:auto 45px;}
#quick .quick_in figure h3 {font-size:1.25rem; letter-spacing:-.5pt;}

.board_con {margin: 40px auto 100px auto;}

/** 공지사항 **/
#notice {border-radius:15px; padding:30px 25px 20px 25px; width:55%;}
#notice h3 {font-size:1.788rem;}
#notice .list figure a {padding:15px 0;}
#notice .list figure a em {width:70px; border-radius:10rem; height:30px; line-height:30px; font-size:13px;}
#notice .list figure a p {width:calc(100% - 70px - 20px);}
#notice .list figure a img.new-icon {max-height:16px;}
#notice .list figure a span {display:none; width:95px; font-size:13px; }
#notice .list figure a span:before {width:16px; height:16px; font-size:16px; margin-right:5px;}
#notice .more {right:25px; top:27px; width:35px; height:35px;}
#notice .more:after {font-size:16px;}


/** 배너 **/
#banner {width:calc(100% - 55% - 5%);} 
#banner > figure {border-radius:15px;}
#banner > figure:after {background-size:60px auto;}
#banner > figure .txtArea {width:60%;}
#banner > figure h3 {font-size:1.25rem;}

#banner .inner .banner_roll .roll {height:410px;}
#banner .p_btn span {width:40px; height:40px; }
#banner .p_btn span:before {font-size:20px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

.slick-arrow {width:35px; height: 35px;}
.slick-arrow:after {font-size:16px;}
.slick-prev {left:50%; margin-left:-80px;}
.slick-next {left:auto; right:50%; margin-right:-80px;}


/*** Visual ***/
#visual {height:100vh; }
#visual .visual_in .roll {width: 100%; height:100vh;}
#visual .visual_in .roll .roll_in {flex-direction:column; text-align:center;}
#visual .visual_in .roll .v_txt {top:270px; width:100%; margin-top:-60px; text-align:center;}
#visual .visual_in .roll .v_txt h2 {font-size:3.5rem; margin-bottom:15px;}
#visual .visual_in .roll .v_txt h2:before {left:50%; right:auto; width:59px; height:53px; margin-right:auto; margin-left:-29px;}
#visual .visual_in .roll .v_txt p {font-size:1.5rem;}
#visual .visual_in .roll .v_txt div {font-size:1.2rem; display:inline-block;}
#visual .visual_in .roll .v_bg {top:auto; bottom:0;}
#visual .visual_in .roll .v_bg .bg {background-size:auto 400px; background-position:center bottom 30%;}

#visual .slick-arrow {bottom:80px;}
#visual .slick-page {left: 50%; transform:translateX(-50%); bottom:90px;}


/** 퀵 바로가기 **/
#quick .quick_in {margin-top:0; grid-template-columns: repeat(1, 1fr); gap:0; padding:20px; border-radius:10px; background:var(--white); box-shadow:0 8px 15px rgba(0,0,0,0.05); box-sizing:border-box; margin-top:-60px; z-index:1500;}
#quick .quick_in figure {box-shadow:none; border-radius:0; border-bottom:1px dashed var(--border);}
#quick .quick_in figure:before {display:none;}
#quick .quick_in figure a {position:relative; display:flex; padding:15px 0; border-radius:0;}
#quick .quick_in figure h3 br {display:none;}
#quick .quick_in figure a:after {background-position:right center; background-size:auto 32px;} 
#quick .quick_in figure a:hover:before {display:none;}
#quick .quick_in figure a:hover h3 {color:var(--main);}

#quick .quick_in figure:first-child { border-top:1px dashed var(--border);}
#quick .quick_in figure:first-child a:hover:after {background-image:url('/uljutalk/images/main/quick_icon01.png');}
#quick .quick_in figure:nth-child(2) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon02.png');}
#quick .quick_in figure:nth-child(3) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon03.png');}
#quick .quick_in figure:nth-child(4) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon04.png');}
#quick .quick_in figure:nth-child(5) a:hover:after {background-image:url('/uljutalk/images/main/quick_icon05.png');}

.board_con {display:block; margin: 25px auto 80px auto;}

/** 공지사항 **/
#notice {width:100%; border-radius:10px; margin-bottom:25px; padding:30px 20px 15px 20px;}
#notice h3 {font-size:1.563rem; margin-bottom:10px;}
#notice .list figure a {padding:13px 0;}
#notice .list figure a em {width:60px; border-radius:10rem; height:26px; line-height:26px; font-size:12px;}
#notice .list figure a p {width:calc(100% - 60px - 20px);}
#notice .list figure a img.new-icon {max-height:14px;}
#notice .list figure a span {width:95px; font-size:13px; }
#notice .list figure a span:before {width:16px; height:16px; font-size:16px; margin-right:5px;}
#notice .more {right:20px; top:25px;}
#notice .more:after {font-size:16px;}

/** 배너 **/
#banner {width: 100%; gap:0 10px; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(2, 1fr);}  
#banner > figure {border-radius:10px;}
#banner > figure:after {background-size:45px auto; background-position:left 3vw center;}
#banner > figure a {width:100%; padding:0 3.5vw; height:80px;}
#banner > figure .txtArea {width:100%; padding-left:65px; box-sizing:border-box;}
#banner > figure h3 {font-size:1.25rem; margin-bottom:0;}
#banner > figure p {display:none;}

#banner .inner .banner_roll {border-radius:10px;}
#banner .inner .banner_roll .roll {width:100%; height:auto;}

#banner .p_btn span {width:35px; height:35px;}
#banner .p_btn span:before {font-size:23px;}


}


/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){

/*** Visual ***/
#visual {height:650px; }
#visual .visual_in .roll {height:650px;}
#visual .visual_in .roll .v_txt {top:240px; margin-top:-50px;}
#visual .visual_in .roll .v_txt h2 {font-size:3rem;}
#visual .visual_in .roll .v_txt h2:before {width:50px; height:45px; margin-left:-29px;}
#visual .visual_in .roll .v_txt p {font-size:1.5rem;}
#visual .visual_in .roll .v_txt div br {}
#visual .visual_in .roll .v_bg .bg {background-size:auto 300px; background-position:center bottom 25%;}

#visual .slick-arrow {bottom:80px;}
#visual .slick-page {bottom:90px;}


}