@charset "utf-8";

/* main */



.sub_only { display: none; }

main > section { position:relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }


.cursor { position: absolute; }


.flex_box > .half { width: 48.4375%; }
.plus_btn { display: block; width: 1.5rem; height: 1.5rem; position: relative; }
.plus_btn::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); background: #222; }
.plus_btn::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); background: #222; }

.m_sec_tit strong { font-size: 2rem; }
.title_wrap { height: 3.375rem; padding-bottom: 1rem; }


.section_top { position: relative; }
.section_top .main_title { font-size: 2.5rem; line-height: 1.2; }
.section_top .search_wrap { margin-top: 2.5rem; padding: 1.5rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.section_top .main_search_form { position: relative; padding: 0 1rem; height: 3rem; border: 2px solid #39a1ff; border-radius: 50px; }
.section_top .main_search_form input { width: 100%; max-width: calc(100% - 2rem); height: 100%; border: 0; outline: none; }
.section_top .main_search_form .search_btn { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); }
.section_top .search_tags b { width: 6rem; padding-top: .3rem; }
.section_top .search_tags ul { width: calc(100% - 6rem); gap: .625rem; }
.section_top .search_tags ul li { padding: .2rem 1rem; background: #ededed; border-radius: 50px; }
.section_top .search_tags ul li a { font-size: .8125rem; color: #888; white-space: nowrap; }
.arrows { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; background: #fff; border: 1px solid #eee; border-radius: 50%; transition: .3s; }
.arrows::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%) rotate(-135deg); width: .875rem; height: .875rem; border-top: 2px solid #666; border-right: 2px solid #666; transition: .3s; }
.arrows:hover { background: #39a1ff; border-color: #39a1ff; }
.arrows:hover::after { border-color: #fff; }
.section_top .main_banner .arrows.prev { left: 1.25rem; }
.section_top .main_banner .arrows.next { right: 0; transform: translate(-50%, -50%) rotate(180deg); }
.section_top .main_banner { position: relative; max-height: 500px; overflow: hidden; }
.section_top .main_banner li { text-align: center; } 
.section_top .main_banner li img { width: 100%; object-fit: cover; min-height: 28.75rem;  } 
.section_top .main_banner .dots { width: fit-content; position: absolute; left: 50%; transform: translateX(-50%); top: auto; bottom: 20px; z-index: 9; }


.section_login { margin-top: 1.5rem; }
.section_login > .inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--color_primary); opacity: .2; border-radius: 0; z-index: -1; }
.section_login > .inner { padding: 1.5rem 2rem; }
.section_login .login_wrap { width: 22.5rem; position: relative; z-index: 1; padding: 2rem; border-radius: 5px; }
.section_login .login_wrap::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .8; z-index: -2; }
.section_login .login_wrap input { width: calc(100% - 6.25rem); height: 2.5rem; background: #fff; border: 0; }
.section_login .login_wrap .login_btn { position: absolute; right: 2rem; top: 2rem; width: 5.625rem; height: 5.625rem; background: #fff; color: #555; }
.section_login .login_wrap .btns1 li { flex: 1; height: 1rem; position: relative; }
.section_login .login_wrap .btns1 li + li { border-left: 1px solid rgba(255, 255, 255, .5); }
.section_login .login_wrap .btns1 li a { color: #fff; }

.section_login .login_wrap .btns2 li { flex: 1; height: 44px; position: relative; text-align: center; }
.section_login .login_wrap .btns2 li svg { fill: var(--color_primary); transform: scale(50%) translateY(-3rem); }
.section_login .login_wrap .btns2 li + li { border-left: 1px solid #ccc; }
.section_login .login_wrap .btns2 li p { text-align: center; margin-top: 40px; color: #666; font-size: .94rem; }


.section_notice { padding: 4rem 0; }
.section_notice .inner { height: 13rem; }
.section_notice .m_sec_tit { width: 18.75rem;  }
.section_notice .notice_wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 66.6666%; padding: 10px; overflow: hidden; }
.section_notice .notice_wrap ul li { position: relative; height: 10rem; padding: 2rem 1.5rem; border: 1px solid #ddd; transition: .3s; }
.section_notice .notice_wrap ul li:hover { transform: translateY(-5px); box-shadow: 0 5px 7px rgba(0, 0, 0, .05); }
.section_notice .notice_wrap ul li .title { font-size: 1.125rem; font-weight: 500; }
.section_notice .notice_wrap ul li .date { position: absolute; right: 1.5rem; bottom: 1.5rem; color: #767676; }
.section_notice .arrows { position: static; }
.section_notice .arrows.prev { transform: rotate(0); margin-right: .625rem; }
.section_notice .arrows.next { transform: rotate(180deg); }


.section_border { width: 100%; height: 5px; background: var(--color_primary); opacity: .15; }
.section_contents { padding: 5rem 0; }
/*.section_contents::before { content: ""; position: absolute; left:7%; top: 10%; width: 8.75rem; height: 12.75rem; background: url('../images/m_sec1_deco.png') no-repeat 50% 50%; background-size: 100%; }*/
.section_contents::before { content: ""; position: absolute; left: -6rem; top: 10%; width: 15rem; height: 15rem; border: 3rem solid var(--color_primary); opacity: .2; border-radius: 50%; }
.section_contents::after { content: ""; position: absolute; right:7%; bottom: -30px; width: 18.75rem; height: 18.75rem; border: 3.5rem solid var(--color_primary); opacity: .1; border-radius: 50%; opacity: .1; }
.section_contents .tab_btn_wrap { gap: 2rem; }
.section_contents .tab_btn_wrap li a { opacity: .5; font-size: 2rem; transition: none; }
.section_contents .tab_btn_wrap li.active a { opacity: 1; font-weight: 500; }
.section_contents .tab_box_wrap .tab { position: relative; }
.section_contents .tab_box_wrap .tab .arrows { background: var(--color_primary); border-color: var(--color_primary); }
.section_contents .tab_box_wrap .tab .arrows::after { border-color: #fff; }
.section_contents .tab_box_wrap .tab .prev { top: 44%; left: -5rem; }
.section_contents .tab_box_wrap .tab .next { top: 44%; right: -5rem; transform: translateY(-50%) rotate(180deg); }

.section_contents .main_content { height: 37.5rem; overflow: hidden; }
.section_contents .content_list li {position: relative; overflow: hidden; }
.section_contents .content_list li .descript { max-width: 100%; position: absolute; left: 0; bottom: 0; padding: 1.5rem 2rem; }
.section_contents .content_list li::before { opacity: .7; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, #000); transition: .5s; }
.section_contents .content_list li::after { opacity: 0; content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, 0) rotate(0); font-size: 5rem; font-weight: 100; color: #fff; transition: .5s; }
/* .section_contents .content_list li:hover::before { opacity: .9; background: #2492d6;} 클릭이벤트를 위해 pointer-events: none;추가 */
.section_contents .content_list li:hover::before { opacity: .9; background: #2492d6; pointer-events: none; }
/* .section_contents .content_list li:hover::after { opacity: 1; transform: translate(-50%, -60%); } 클릭이벤트를 위해 pointer-events: none;추가*/
.section_contents .content_list li:hover::after { opacity: 1; transform: translate(-50%, -60%); pointer-events: none;}



.section_guide { padding: 5rem 0; }
.section_guide::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color_primary); opacity: .1; }
.section_guide .quarter { position: relative; background: #fff; height: 13rem; padding: 7.5rem 2.5rem 2.5rem; border-radius: 20px; background-repeat: no-repeat; background-position: 2.5rem 3rem; background-size: 50px; }



.section_btm { padding: 3rem 0; }
.section_btm .list_wrap { border-top: 1px solid #999; padding-top: 1.25rem; }
.section_btm .list_wrap li + li { margin-top: 5px; }
.section_btm .list_wrap li .title { width: calc(100% - 5rem); font-weight: 500; }
.section_btm .list_wrap li .date { width: 5rem; font-size: .875rem; color: #767676; }

.section_btm ul.info li { display: flex; }
.section_btm ul.info li b { width: 4.8rem; }
.section_btm .down_btn { position: relative; display: flex; flex-direction: column; justify-content: center; padding-left: 1rem; height: 6rem; border-bottom: 1px solid #ddd; background-repeat: no-repeat; background-position: right 1rem top 50%; background-size: 3rem; }





@media screen and (max-width: 1080px) {
	.section_contents .content_list li { height: auto !important; aspect-ratio: 4/3; }
}