File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@charset "UTF-8";
/*본문바로가기*/
.skip a { position:absolute; background:rgba(0,0,0,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#90000000); width:100%; height:40px; text-align:center; font-size:0.9em; color:#fff; z-index:100; line-height:40px; top:-40px; opacity:0; }
.inner { width:1400px; margin:0 auto; }
/*header*/
.header { width:100%; height:115px; z-index:99; color:#333; background:rgba(255,255,255,0.8); border-bottom:1px solid #ededed; box-shadow:0 0 15px 0 rgba(0,0,0,0.08); padding:20px 0; }
.header .inner { position:relative; height:100%; }
.header h1 { text-transform:uppercase; font-weight:900; position:absolute; top:50%; left:50%; transform:translate(-50%, -70%); }
.header h1 a { width:300px; height:16px; display:inline-block; background:url(/images/user/logo.svg) 50% 50% no-repeat; background-size:contain; }
.header h1 a img { display:none; }
.header ul { display:flex; }
.header ul li { }
.header ul li a,
.header ul li p { color:#777; font-size:0.9em; position:relative;transition:all 0.3s; display:inline-block; }
.header ul li a:hover,
.header ul li p:hover { color:#333; }
.header ul li a::before { content:''; width:0; height:1px; background:#333; display:inline-block; transition:all 0.3s; position:absolute; bottom:0; left:50%; transform:translateX(-50%); }
.header ul li a:hover::before { width:100%; }
.header ul li::after { content:''; width:2px; height:2px; background:#333; display:inline-block; border-radius:5px; margin:0 10px 3px; }
.header ul li:last-child::after { display:none; }
.header_list { width:100%; display:flex; justify-content:space-between; }
.header .header_bottom { float:right; margin-top:15px; display:flex; }
.header .info { border:1px solid #ccc; padding:3px 15px; height:32px; border-radius:100px; font-size:0.9em; color:#333; margin-right:5px; transition:all 0.3s;}
.header .info:hover { background:#333; color:#fff; border:1px solid #0916b2; }
.header .total_search { border:1px solid #ccc; width:32px; height:32px; border-radius:50px !important; font-size:1.1em; transition:all 0.3s; }
.header .total_search:hover { border:1px solid #333; }
/*main container*/
.main_container { width:100%; height:100%; }
.main_container .header { position:absolute; top:0; left:0; background:transparent; color:#fff; transition:background 0.5s; border-bottom:1px solid rgba(255,255,255,.2); box-shadow:none; }
.main_container .header h1 a { background:url(/images/user/logo_fff.svg) 50% 50% no-repeat; background-size:contain; }
.main_container .header ul li a, .main_container .header ul li p { color:#fff; }
.main_container .header ul li::after { background:#fff;}
.main_container .header .info { color:#fff; border:1px solid #fff;}
.main_container .header:hover { background-color:rgba(255,255,255,1); backdrop-filter:blur(10px); }
.main_container .header:hover h1 a { background:url(/images/user/logo.svg) 50% 50% no-repeat; background-size:contain; }
.main_container .header:hover ul li a,
.main_container .header:hover ul li p { color:#727272; }
.main_container .header:hover ul li a:hover { color:#333; }
.main_container .header:hover ul li::after { background:#333;}
.main_container .header:hover .info { color:#333; border:1px solid #333;}
.main_container .header .info:hover { background:#333; color:#fff; border:1px solid #333; }
.main_container .header .total_search { background:transparent; color:#fff; }
.main_container .header:hover .total_search { border:1px solid #333; color:#333;}
.main_container .header:hover .total_search:hover { background:#333; color:#fff; }
/*main top slide*/
.main_slide { width:100%; height:100vh; opacity:1; }
.main_slide .swiper-slide { width:100%; height:100vh; color:#fff; position:relative; }
.main_slide .swiper-slide .inner { position:relative; z-index:1; }
.main_slide .swiper-slide .bg_box { position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; z-index:0; }
.main_slide .swiper-pagination { bottom:5em; animation: textDown 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation-delay:1s; }
.main_slide .swiper-pagination span { background: #fff; opacity:0.5; border:1px solid #333; width:10px; height:10px; }
.main_slide .swiper-pagination .swiper-pagination-bullet-active { width:80px; border-radius:50px; opacity:1;}
.main_slide .inner { height:100%; display: flex; flex-direction:column; align-items:center; justify-content:center; }
.main_slide .swiper-slide em { display:block; font-size:1.3em; text-transform: capitalize; font-weight:900;}
.main_slide .swiper-slide strong {display:block; margin:40px 0; font-size:2.3em;}
.main_slide .swiper-slide p {display:block; text-align:center; font-size:1.3em; line-height:1.8em; margin-bottom:40px; }
.main_slide .swiper-slide button { padding:13px 40px; border-radius:50px; font-weight:600;transition:background 0.3s !important; }
.main_slide .swiper-slide button:hover { background:#1524cc; color:#fff; }
.main_slide .swiper-slide-active em { animation:textshow 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; }
.main_slide .swiper-slide-active strong {animation:textDown 0.5s ease-in-out both; animation-delay: .2s;}
.main_slide .swiper-slide-active p {animation:textDown 0.5s ease-in-out both;animation-delay: .4s;}
.main_slide .swiper-slide-active button { animation:textDown 0.5s ease-in-out both; animation-delay: .6s; }
.main_slide .slide_wrap { width:100%; height:100%; }
.main_slide .swiper-wrapper { width:100%; height:100%; }
.main_slide .swiper-slide { width:100%; height:100%; }
.swiper-button-prev, .swiper-button-next { color:#fff; }
@-webkit-keyframes textDown {
0% { opacity:0; transform:translateY(-50%); } 100% { opacity:1; transform:translateY(0%); }
}
@keyframes textshow {
0% { letter-spacing:1em; opacity:0; }
40% { opacity:0.6; }
100% { letter-spacing:0; opacity:1; }
}
/*main content*/
.main_content { position:relative; z-index:9; }
.main_content .inner { position:relative; z-index:9; }
.main_content > .bg_box { position:absolute; bottom:0; background-size:contain; width:100%; height:50%; z-index:-1; }
.main_content h2 { font-size:2em; text-transform:capitalize; font-weight:900; line-height:1.6em; letter-spacing:-1px; }
.main_wrap { margin-top:0; }
.main_content .title_wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom:40px; }
.main_content .title_wrap .showmore { color:#1524cc; font-weight:900; border:none; padding:0; font-size:1.1em; display: flex; align-items: center; background:none; opacity:0; animation:fadeOut 0.5s both;}
.main_content .title_wrap .showmore span { margin-left:5px; margin-top:5px; font-size:0.7em; display:inline-block; transition:all 0.3s;}
.main_content .title_wrap .showmore:hover span { transform:translateX(10px); }
.title_wrap h2 { animation:fadeOut .5s both;}
.title_wrap.active h2 { animation:zoomIn 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.title_wrap.active .showmore { animation:zoomIn 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; animation-delay:0.2s; }
/*article*/
.article_list ul { width:calc(100% + 80px); display: flex; flex-wrap:wrap; margin:-40px -40px 0; }
.article_list ul li { width:calc(33.333% - 80px); margin:40px; }
.article_list ul li .bg_box { width:100%; height:0; padding-bottom:60%; margin-bottom:30px; border-radius:15px; display:block; transition:box-shadow 0.5s, transform 0.5s; position:relative;}
.article_list ul li .bg_box:hover { box-shadow:0 0 30px 0 rgba(34,86,203,0.5); transform:scale(1.01); }
.article_list ul li .category { color:#052c9b; font-weight:900; margin:0 0 15px; display: block; }
.article_list ul li .title { width:100%; display:block; font-size:1.2em; font-weight:600; margin-bottom:20px; }
.article_list ul li .by { color:#727272; }
.article_list ul li .text { margin-top:15px; }
.article_list ul li .text a { -webkit-line-clamp:3; }
.article_list ul li.on { opacity:0.3 ;}
.article_list ul li .time { color:#727272; background:url(/images/user/icon_time.svg) 0% 50% no-repeat; background-size:15px 15px; padding-left:20px; }
a.writer { padding:0 4px; line-height:1.5em; color:#000; position:relative; border:1px solid #333; border-radius:4px; font-size:0.9em; margin-right:5px; transition:all 0.3s; }
a.writer:hover { background:#052c9b; color:#fff; border:1px solid #052c9b; }
.article_list.videos ul li .video_box::after { content:''; width:100%; height:100%; display:block; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); }
.article_list.videos ul li .video_box .btn_video { width:100px; height:100px; background:url(/images/user/video.png) 60% 60% no-repeat #fff; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:2; border-radius:100px; transition:all 0.3s; }
.article_list.videos ul li .video_box .btn_video:hover { transform:scale(1.05) translate(-50%,-50%); box-shadow:0 0 15px 0 rgba(0,0,0,0.5); }
.main_wrap ul li { animation:fadeOut .5s both; }
.main_wrap.active li { animation:zoomIn 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.main_wrap.active li:nth-child(1) { animation-delay:0.1s; }
.main_wrap.active li:nth-child(2) { animation-delay:0.2s; }
.main_wrap.active li:nth-child(3) { animation-delay:0.3s; }
/* hot click */
.hotClick { background:#fff; z-index:9; width:100%; position:relative; padding:40px; box-shadow:0 0 40px 0 rgba(1,7,144,0.2); border-radius:15px; }
.hotClick .title_wrap { margin-bottom:20px; }
.hotClick .title_wrap h2 { }
.hotClick ol { display:flex; flex-wrap:wrap; margin:-3px; }
.hotClick ol li { margin:3px; opacity:0; transform:translateY(50%); transition:all 0.5s; animation:fadeOut .5s both; }
.hotClick ol li a { padding:7px 16px; font-weight:600; font-size:1em; border:2px solid #0916b2; border-radius:50px; color:#0916b2; background:#fff; transition:all 0.3s; display:inline-block; box-shadow:0 0 10px 0 rgba(9,22,178,0.2); }
.hotClick ol li a:hover { background:#0916b2; color:#fff; box-shadow:0 0 15px 0 rgba(9,22,178,0.5); }
.hotClick ol li a::before { content:'#'; }
.hotClick.active ol li { animation:zoomUp 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.hotClick.active ol li:nth-child(1) { animation-delay:0.1s; }
.hotClick.active ol li:nth-child(2) { animation-delay:0.2s; }
.hotClick.active ol li:nth-child(3) { animation-delay:0.3s; }
.hotClick.active ol li:nth-child(4) { animation-delay:0.4s; }
.hotClick.active ol li:nth-child(5) { animation-delay:0.5s; }
.hotClick.active ol li:nth-child(6) { animation-delay:0.6s; }
.hotClick.active ol li:nth-child(7) { animation-delay:0.7s; }
.hotClick.active ol li:nth-child(8) { animation-delay:0.8s; }
.hotClick.active ol li:nth-child(9) { animation-delay:0.9s; }
.hotClick.active ol li:nth-child(10) { animation-delay:1s; }
/* banner */
.banner.main_wrap { }
.banner ul { display: flex; justify-content: space-between; }
.banner ul li { width:calc(50% - 30px); }
.banner ul li a { width:100%; color:#fff; font-size:1.8em; line-height:1.4em; font-weight:600; display:block; border-radius:15px; position:relative; animation:fadeOut .5s both;}
.banner ul li a .bg_box { padding:1.5em; height:170px; border-radius:15px; }
.banner ul li a > img { position:absolute; right:1em; z-index:3; animation:fadeOut .5s both; }
.banner ul li:nth-child(1) img { bottom:-1em; }
.banner ul li:nth-child(2) img { bottom:-1em; }
.banner ul li:nth-child(2) .title_wrap.active h2 { animation-delay:0.2s; }
.banner.active li a { animation:zoomIn 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.banner.active li:nth-child(2) a { animation-delay:0.1s; }
.banner.active li a > img { animation:zoomIn 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; animation-delay:0.3s; }
/* news */
.notice.main_wrap { margin-bottom:120px;}
.news_slide { width:100%; padding-bottom:150px; animation:fadeOut .5s both; }
.news_slide .swiper-slide { width:calc(25% - 30px); }
.news_slide .swiper-slide a { width:100%; display:block; font-weight:600; font-size:1.2em; line-height: 1.6em; margin-bottom:30px; }
.news_slide .swiper-slide em { color:#727272; }
.news_slide .swiper-button-prev, .news_slide .swiper-button-next { top:auto; bottom:5px; color:#333; }
.news_slide .swiper-button-prev::after, .news_slide .swiper-button-next::after { font-size:1.2em; }
.news_slide .swiper-button-prev { transform:translateX(-200%); left:auto; }
.news_slide .swiper-button-next { }
.news_slide .swiper-pagination-progressbar { top:auto; bottom:80px; height:2px; background:#ddd; width:1400px; }
.news_slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#333; }
.notice.active .news_slide { animation:fadeLeft 1.5s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.bg_wave { opacity:0; pointer-events:none; z-index:0; }
/* footer */
.footer { width:100%; padding:50px 0; background:#fafafa; position:relative; }
.footer_content { display:flex; justify-content:space-between; }
.footer_left { width:calc(100% - 250px); }
.footer_logo ul { display: flex; align-items: center; border-bottom:1px solid #ddd; margin-bottom:20px; padding-bottom:20px; }
.footer_logo a { text-transform:uppercase; font-weight:900; }
.footer_logo a img { height:15px; }
.footer_logo ul li:last-child::before { width:1px; height:15px; background:#ccc; content:''; display:inline-block; margin:0 13px; }
.footer_logo ul li:last-child img { height:18px; }
.footer_text { color:#727272; font-size:0.9em; line-height:1.7em; }
.footer_text strong { margin-bottom:5px; display: block; color:#333; }
/* skip top */
.skip_top { width:50px; height:50px; border-radius:100px; background:#0032c3; position:relative;border:none; opacity:0; position:fixed; bottom:30px; right:30px; overflow:hidden;z-index:9; transform: translateY(50%); transition:all 0.3s; }
.skip_top::before, .skip_top::after { content:''; width:14px; height:15px; background:url(/images/user/skip_top.svg) 50% 50% no-repeat; background-size:contain;position:absolute; display:inline-block; left:50%; transform: translate(-50%, -50%); pointer-events: none; }
.skip_top::before { top:50%; }
.skip_top::after { top:150%; }
.skip_top:hover { box-shadow: 0 0 30px 0 rgb(34 86 203 / 80%); border:1px solid #001d70; }
.skip_top:hover::before { top:-150%;transition:all 0.5s; }
.skip_top:hover::after { top:50%;transition:all 0.5s; }
.skip_top.float { position:fixed; transform: translateY(0%); opacity:1; }
.skip_top.fix { position:absolute; bottom:auto; top:-25px; }
@keyframes skip { from { opacity:0; transform: translate(-50%, -50%); } 20% { opacity:0; transform: translate(-50%, 250%); } 50% { opacity:1; transform: translate(-50%, -50%); } to { transform: translate(-50%, -50%); } }
/* sns */
.sns { margin-top:43px; }
.sns ul { display:flex; }
.sns li { width:30px; height:30px; overflow:hidden; margin-left:15px; transition:transform 0.3s; background-image:url(/images/user/sns_logo.svg); background-size:180px 60px !important; background-repeat:no-repeat;}
.sns li:hover { transform:scale(1.1);}
.sns li a { width:100%; height:100%; text-indent:-5000px; display: inline-block; }
.sns .insta { background-position: 0 100%; }
.sns .facebook { background-position:20% 100%; }
.sns .naver { background-position:40% 100%; }
.sns .youtube { background-position:60% 100%; }
.sns .rss { background-position:80% 100%; }
.sns .insta:hover { background-position:0 0%; }
.sns .facebook:hover { background-position:20% 0%; }
.sns .naver:hover { background-position:40% 0%; }
.sns .youtube:hover { background-position:60% 0%; }
.sns .rss:hover { background-position:80% 0%; }
.share button { width:30px; height:30px; border:none; transition:transform 0.3s; margin-left:10px; }
.share button:hover { transform:scale(1.1);}
.share .btn_print { background-image:url(/images/user/icon_print.svg); background-position:50% 100%; background-repeat:no-repeat; background-size:60px 60px; }
.share .btn_print:hover { background-position:50% 0%; }
.share .twitter, .share .facebook { background-image:url(/images/user/sns_logo.svg); background-size:180px 60px !important; background-repeat:no-repeat; }
.share .twitter { background-position:100% 100%; }
.share .twitter:hover { background-position:100% 0%; }
.share .facebook { background-position:20% 100%; }
.share .facebook:hover { background-position:20% 0%; }
/*******************************************************************************************************************************************/
/*************************************************************** subpage ***************************************************************/
/*******************************************************************************************************************************************/
.sub_container { margin-bottom:100px; background:rgba(255,255,255,1); }
.sub_title_top { display:flex; justify-content: space-between; padding:20px 0; }
/* breadcrumb */
.breadcrumb { }
.breadcrumb ul { display:flex; justify-content:flex-start; }
.breadcrumb li { display:flex; align-items:center; font-size:0.9em; }
.breadcrumb li a { color:#777;line-height: 1.4em; }
.breadcrumb li img { width:8px; height:8px; }
.breadcrumb li.next { margin:0 10px; opacity:0.6; font-size:0.6em; margin-top:2px; }
.breadcrumb li:last-child strong { color:#333; font-weight:900; max-width:150px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sub_title */
.sub_title { text-align:center; margin:20px 0 70px; }
.sub_title .title { margin-top:20px; }
.sub_title em { color:#727272; font-size:1em; font-weight:900; text-transform:capitalize; }
.sub_title h2 { font-size:2.4em; font-weight:900; margin-bottom:20px; }
/*bg img type sub title*/
.sub_title.visual_type { padding:20px 0 80px; margin:0 0 70px; position:relative; }
.sub_title.visual_type em { color:#ccc; }
.sub_title.visual_type em img { display:inline-block; margin:20px 0 80px; height:12px; } /*ablout 로고 이미지*/
.sub_title.visual_type h2 { color:#fff; }
.sub_title.visual_type .breadcrumb li:last-child strong, .sub_title.visual_type .breadcrumb li a, .sub_title.visual_type .breadcrumb li.next { color:#fff; }
.sub_title.visual_type .breadcrumb li { opacity:0.6; }
.sub_title.visual_type .breadcrumb li:last-child { opacity:1; }
.sub_title.visual_type .breadcrumb li a:hover { color:#fff !important; }
.sub_title.visual_type .breadcrumb li a::after { background:#fff; }
.sub_title.visual_type .inner { position:relative; z-index:1; }
.sub_title.visual_type::after { content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); -webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px); position:absolute; top:0; left:0;}
/*작가정보 type*/
.sub_title.gray_type { background:#f4f4f4; margin:0 0 70px; padding-bottom:70px; }
.sub_title.gray_type h2 { margin-top:30px; display:block; }
.sub_title.gray_type .title { display:flex; justify-content:center; margin-top:0; flex-direction:column; align-items: center; }
.sub_title.gray_type .writer_info { flex-direction:row; width:auto; }
.sub_title.gray_type .writer_info .writer_pic { margin-bottom:0; }
.sub_title.gray_type .writer_info .writer_text { margin-left:30px; text-align:left; }
.sub_title.gray_type .writer_info .writer_text strong { display:inline-block; }
.sub_title.gray_type .writer_info .writer_text em { display:block; }
.sub_title.gray_type .title strong { padding:5px 15px; border:1px solid #333; border-radius:50px; display:inline-block; font-weight:900; font-size:1.2em; margin-top:10px; }
/*게시판 하단*/
.bottom_wrap { display:flex; padding-top:50px; position:relative; }
.bottom_wrap > div { display:flex; flex-wrap:wrap; }
.bottom_wrap.center { justify-content: center; }
.bottom_wrap.between { justify-content:space-between; }
.bottom_wrap.right { justify-content:flex-end; }
.bottom_wrap button { margin:2px; }
/*article detail view*/
.article_header { text-align:center; }
.article_header strong { font-size:1.3em; display:block; }
.article_header strong a { color:#0032c3; text-transform:capitalize; font-weight:900; }
.article_header h2 { font-size:2.4em; font-weight:900; margin:30px 0; }
.article_header em { font-weight:400; display:block;}
.article_header .header_img { width:100%; margin-top:50px; }
.article_header .header_img img { width:100%; }
/*기사컨텐츠*/
.article_view { position:relative; display:flex; flex-direction:row-reverse; justify-content:space-between; padding:50px 0; }
.writer_info { width:200px; display:flex; flex-direction:column; align-items:center; }
.writer_info .writer_pic { width:130px; height:130px; border-radius:130px; margin-bottom:30px; overflow:hidden; box-shadow:5px 5px 15px 0 rgba(0,0,0,0.5); }
.writer_info strong { font-size:1.8em; }
.writer_info em { color:#727272; font-weight:500; margin-top:10px; }
.writer_info button { margin-top:20px; }
/*기사내용*/
.article_content { width:calc(100% - 300px); font-size:1.2em; line-height:2em; opacity:0; transform:translateY(100px); transition:all 0.5s; transition-delay:0.2s; }
.article_content .share { margin-top:50px; }
.article_content figcaption { font-size:0.8em; line-height:1.6em; }
.article_view .writer_info { opacity:0; transform:translateY(100px); transition:all 0.5s; }
.article_view.active .article_content { opacity:1; transform:translateY(0px); }
.article_view.active .writer_info { opacity:1; transform:translateY(0px); }
.related { background:#222; margin:70px 0 -100px; padding:100px 0; position:relative; text-align:center; opacity:0; }
.related h2 { color:#fff; margin-bottom:50px; font-size:2em; font-weight:900; text-align:left; transform: translateY(100px); opacity:0; transition:all 0.5s; }
.related ul { width:calc(100% + 80px); display: flex; flex-wrap:wrap; margin:-40px; text-align:left; }
.related ul li { width:calc(25% - 80px); margin:40px;transform: translateY(50%); opacity:0; transition:all 0.5s; }
.related ul li .bg_box { width:100%; height:0; padding-bottom:60%; margin-bottom:30px; border-radius:15px; display:block; transition:box-shadow 0.5s;}
.related ul li .bg_box:hover { box-shadow:0 0 30px 0 rgba(0,0,0,0.8); }
.related ul li .category { color:#ff6a30; font-weight:900; margin:0 0 10px; display: block; }
.related ul li .title { width:100%; display:block; color:#fff; font-size:1.2em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.related ul li.on { opacity:0.3 ;}
.related .btn_list { position:absolute; top:40px; text-transform:uppercase; width:80px; height:80px; border:1px solid #222; border-radius:100px; box-shadow:5px 5px 10px 0 rgba(0,0,0,0.6); transition:all 0.5s; font-weight:900;opacity:0; }
.related .btn_list:hover { box-shadow:0 0 20px 0 rgba(0,0,0,0.8); }
.related.active { opacity:1; }
.related.active h2 { opacity:1;transform:translateY(0); }
.related.active .btn_list { opacity:1; top:-40px; }
.related.active ul li { opacity:1;transform:translateY(0); }
.related.active ul li:nth-child(2) { transition-delay:0.2s; }
.related.active ul li:nth-child(2) { transition-delay:0.3s; }
.related.active ul li:nth-child(3) { transition-delay:0.4s; }
.related.active ul li:nth-child(4) { transition-delay:0.5s; }
.article_wrap { padding:40px 0; display:inline-block; }
.article_wrap:last-child { margin-bottom:0; }
.article_list .article_wrap ul { margin:20px -40px 0; }
.article_wrap .title_wrap { position:relative; margin-bottom:0; display:block; animation:fadeOut 1s both;}
.article_wrap .title_wrap li { animation:fadeOut 1s both; }
.article_wrap .title_wrap .title { padding-right:20px; background:#fff; position:relative; z-index:1; display:inline-block;}
.article_wrap .title_wrap .category { font-size:2em; font-weight:900; display:inline-block; color:#0032c3; padding-bottom:2px;}
.article_wrap .title_wrap::after { width:100%; height:1px; background:#ddd; content:''; display:block; position:absolute; top:13px; left:0; z-index:0; }
.article_wrap li { animation:fadeOut .5s both; }
.article_wrap.active .title_wrap { animation:fadeLeft 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.article_wrap.active li { animation:zoomIn 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.article_wrap.active li:nth-child(1) { animation-delay:0.1s; }
.article_wrap.active li:nth-child(2) { animation-delay:0.2s; }
.article_wrap.active li:nth-child(3) { animation-delay:0.3s; }
.article_wrap.active li:nth-child(4) { animation-delay:0.4s; }
.article_wrap.active li:nth-child(5) { animation-delay:0.5s; }
.article_wrap.active li:nth-child(6) { animation-delay:0.6s; }
.article_wrap.active li:nth-child(7) { animation-delay:0.7s; }
.article_wrap.active li:nth-child(8) { animation-delay:0.8s; }
.article_wrap.active li:nth-child(9) { animation-delay:0.9s; }
.article_wrap.active li:nth-child(10) { animation-delay:1s; }
.article_wrap.active li:nth-child(11) { animation-delay:1.1s; }
.article_wrap.active li:nth-child(12) { animation-delay:1.2s; }
.move { width:100%; height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:50px;}
.move .swiper-wrapper { display:flex; width:1400px; }
.move .swiper-slide { width:auto; height:100%; }
.move .swiper-slide:last-child { margin-right:0; }
.move .swiper-slide.active a { color:#0032c3; }
.move .swiper-slide a { font-weight:900; font-size:1.3em; line-height:60px; transition:all 0.3s; position:relative; }
.move .swiper-slide a:hover { color:#0032c3; }
.move .swiper-slide a::after { content:''; width:0; height:1px; background:#0032c3; display:inline-block; transition:all 0.3s; position:absolute; bottom:0; left:50%; transform:translateX(-50%); }
.move .swiper-slide a:hover::after { width:100%; }
.move.fix { border-bottom:1px solid #222; position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); -webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px); box-shadow:0 5px 5px 0 rgba(0,0,0,0.1); z-index:9; margin-bottom:0; transition:background 0.3s; }
.move.fix .swiper-slide a { color:#999; }
.move.fix .swiper-slide a:hover { color:#0032c3; }
.move.fix .swiper-slide.active a { color:#fff; }
.move.fix .swiper-slide.active a::after { background:#fff; }
.move.fix .swiper-slide a:hover { color:#fff; }
.move.fix .swiper-slide a::after { background:#fff; }
.fixed-menu { margin-top:-30px; }
.fixed-menu.fix .article_list { padding-top:110px; }
/*add dot*/
.dot li::after, .dot > div::after { width:3px; height:3px; border-radius:3px; display:inline-block; content:''; background:#666; margin:0 15px 5px; }
.dot li:last-child::after, .dot > div:last-child::after { display:none; }
/*tab*/
.wrap-tab-container { width:100%; }
.wrap-tab-list { display:flex; justify-content:center; align-items:center; margin-bottom:50px; }
.wrap-tab-list li { }
.wrap-tab-list li::after { width:3px; height:3px; border-radius:3px; display:inline-block; content:''; background:#666; margin:0 15px 5px; }
.wrap-tab-list li:last-child::after { display:none; }
.wrap-tab-list button { border:none; background:none; padding:0; font-size:1.2em; font-weight:600; border-radius:0; transition:0.3s; position:relative; }
.wrap-tab-list button::after { width:0; height:1px; background:#333; content:''; display:inline-block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); transition:all 0.3s; }
.wrap-tab-list li.active button::after { width:100%; }
.wrap-tab-list button:hover::after { width:100% }
/*tab 내용이 두개일 경우*/
.round_tab { display:flex; justify-content:center; align-items:center; }
.round_tab .wrap-tab-list { padding:3px; border-radius:50px; border:1px solid #dbdbdb; box-shadow:inset 0 0 8px -1px rgb(0 0 0 / 20%); }
.round_tab .wrap-tab-list li::after, .round_tab .wrap-tab-list button::after { display:none; }
.round_tab .wrap-tab-list li { display:inline-block; }
.round_tab .wrap-tab-list li button { padding:8px 40px; border-radius:50px; }
.round_tab .wrap-tab-list li:last-child button { }
.round_tab .wrap-tab-list li.active button { background:#0032c3; color:#fff; }
.wrap-tab-contents { width:100%; }
/*toggle*/
.toggle { border-top:2px solid #333; }
.toggle > li { border-bottom:1px solid #ededed; }
.toggle_tit a { padding:35px 25px; display:block; font-size:1.5em; font-weight:900; position:relative; transition:all 0.5s;}
.toggle_tit a:hover { background:#e5e5e5; }
.toggle_tit a::after, .toggle_tit a::before { content:''; display:block; width:15px; height:2px; background:#333; position:absolute; right:25px; top:50%; transform:translateY(-50%) rotate(0deg); transition:all 0.3s; }
.toggle_tit a::before { transform:translateY(-50%) rotate(90deg); }
.toggle_tit.active a::before { transform:translateY(-50%) rotate(0deg); }
.toggle_tit.active a { background:#f4f4f4; font-size:2.2em; padding:35px 25px 0 30px; }
.toggle_box { display:none; background:#f4f4f4; padding:30px; }
/*Archive*/
/*년도별*/
.list_year ul { display:flex; flex-wrap:wrap; margin:-15px; }
.list_year li { width:calc(16.6666% - 30px); margin:15px; background:#fff; text-align:center; box-shadow:10px 10px 20px 0 rgba(0,0,0,0.1); transition:all 0.5s; border-radius:10px;}
.list_year li:hover { box-shadow:10px 10px 30px 0 rgba(0,0,0,0.3); }
.list_year li a { width:100%; height:100%; display: block; padding:20px; position:relative; }
.list_year li .cover { width:100%; padding-bottom:8em;border-radius:5px; }
.list_year li .text { margin-top:20px; }
.list_year li strong { display:block; font-size:1.1em; font-weight:600; }
.list_year li p { display:inline-block; font-size:0.9em; font-weight:400; padding:0px 10px; border-radius:50px; background:#0032c3; color:#fff; margin:10px 0;}
.list_year li em { display:block; font-size:0.8em; color:#727272; letter-spacing:1px; }
/*주제별*/
.list_topic ul { display:flex; flex-wrap: wrap; margin:-10px; }
.list_topic li { margin:10px; width:calc(33.333% - 20px); }
.list_topic li a { font-size:1.6em; font-weight:900; transition:all 0.3s; padding:40px 0 40px 30px; border:1px solid #dfdfdf; display:block; border-radius:15px; box-shadow:5px 5px 20px 0 rgba(0,0,0,0.2); position:relative; background:#fff; }
.list_topic li a span { font-size:0.6em; position:absolute; top:50%; right:30px; transform:translateY(-50%); transition:all 0.3s; }
.list_topic li a:hover { background:#0032c3; color:#fff; border:1px solid #0032c3; box-shadow:0 0 20px 0 rgba(0,0,0,0.5); }
.list_topic li a:hover span { transform:translate(10px, -50%); }
/*about*/
.content_wrap { margin-bottom:100px; padding:0 70px;}
.content_wrap h3 { font-size:2.4em; font-weight:900; margin-bottom:50px; transform:translateY(100%); opacity:0; transition:all 0.5s; }
.content_wrap h3.visible { opacity:1; transform: translateY(0); }
.about_text { padding-top:20px; font-size:1.2em; margin-bottom:10px; line-height:1.8em; display:flex; }
.about_text .logo { width:40%; display: flex; justify-content: center; align-items: center; background:#f4f4f4; animation:fadeup 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.about_text img { height:50px; }
.about_text .text { padding-left:70px; width:calc(60% - 70px); }
.about_text .text p { display:block; margin-bottom:15px; animation:fadeup 1s cubic-bezier(0.5, 0.7, 0.4, 1.000) both; }
.about_text .text p:nth-child(1) { animation-delay:0.3s; }
.about_text .text p:nth-child(2) { animation-delay:0.4s; }
.about_text .text p:nth-child(3) { animation-delay:0.5s; }
.about_text .text p:nth-child(4) { animation-delay:0.6s; margin-bottom:0; }
/*연혁*/
.history { position:relative; padding:130px 0; background:rgba(255,255,255,1); }
.history_content { position:relative; z-index:1; }
.history h3 { text-align:center;position:relative; z-index:1;}
.history ul { position:relative; padding:30px 0; }
.history ul::after { width:3px; height:0%; content:''; display:inline-block; background:#0032c3; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:1;transition:all 0.5s; }
.history ul li { width:100%; position:relative; padding:0 calc(50% + 50px) 0 0; text-align:right; margin:50px 0; z-index:3; }
.history ul li:nth-child(2n) { padding:0 0 0 calc(50% + 50px); text-align:left; }
.history ul li .history_wrap { text-align:left; padding:25px; background:#fff; display: inline-block; border-radius:15px; transform:translate(-50%, -10px); opacity:0; transition:all 0.5s; box-shadow:5px 5px 15px 0 rgb(0 0 0 / 20%); border:2px solid #0032c3; position:relative; }
.history ul li .history_wrap::after { width:50px; height:1px; background:#0032c3; content:''; display:inline-block; position:absolute; top:20px; right:-50px; }
.history ul li:nth-child(2n) .history_wrap::after { right:auto; left:-50px; }
.history ul li .history_wrap .date { color:#0032c3; font-weight:900; letter-spacing:-1px; font-size:1.3em; display:block; margin-bottom:5px; }
.history ul li .history_wrap p { font-size:1.2em; }
.history ul li:nth-child(2n) .history_wrap { transform:translate(50%, -10px); }
.history ul li::after { width:10px; height:10px; content:''; display:inline-block; border:3px solid #0032c3; border-radius:50px; background:#fff; position:absolute; top:5px; left:50%; transform: translate(-50%, 50px); opacity:0; transition:all 0.5s; }
.history.visible ul::after { height:100%; }
.history ul li.visible::after { transform: translate(-50%, 0); opacity:1; }
.history ul li.visible .history_wrap { opacity:1; transform:translate(0, -10px); transition-delay:0.2s; }
.history_bg { position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; background:#f4f4f4; display:block; }
.bg_text { position:absolute; top:100px; left:0; z-index:0; width:100%; font-size:10em; text-align:center; font-weight:900; color:rgba(244,244,244,1); text-transform:uppercase; }
/*편집인*/
.editor_info ul { display:flex; flex-wrap:wrap; margin:0 -30px; }
.editor_info ul li { width:calc(50% - 30px); display:flex; justify-content:flex-start; align-items:center; margin:15px; padding:30px 30px 40px; border-radius:20px; border:1px solid #e4e6e9; box-shadow:5px 5px 20px 0 rgba(106,151,231,0.2); transform:translateY(50%); opacity:0; transition:all 0.5s;}
.editor_info ul li.visible { opacity:1; transform: translateY(0); }
.editor_info ul li strong { font-size:1.5em; font-weight:600; display:block; margin-bottom:15px; }
.editor_info ul li p { display:flex; flex-direction:column; font-size:1.1em; line-height:1.8em; }
.editor_info ul li p em::before { content:''; display:inline-block; width:4px; height:4px; background:#333; border-radius:4px; margin:0 10px 4px 0; }
.editor_pic { width:130px; height:130px; border-radius:200px; margin-right:30px; box-shadow:5px 5px 20px 0 rgba(117,158,231,0.3); }
/*지도*/
.about_map { background:#f4f4f4; margin-bottom:-100px; padding:100px; }
.about_map .inner { padding:0 70px; }
.office_box { margin-bottom:50px; transform:translateY(50%); opacity:0; transition:all 0.5s; }
.office_box.visible { opacity:1; transform: translateY(0); }
.office_box:last-child { margin-bottom:0; }
.office { width:100%; display:flex; justify-content:space-between; border:1px solid #dfdfdf; background:#fff; transition:box-shadow 0.3s; }
.office:hover { border:1px solid #ddd; box-shadow:0 0 40px 0 rgba(0,0,0,0.2); }
.office_map { width:70%; height:400px; }
.office_map .map { width:100%; height:100%; }
.office_text { width:30%; padding:50px; }
.office_text strong { font-size:1.5em; display:inline-block; border-radius:50px; padding:8px 15px; margin-bottom:20px; color:#fff; background:#0032c3; }
.office_text p { font-size:1.1em; }
.office_text dl { display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:15px; }
.office_text dl dt { width:50px; font-weight:600; padding:3px 0; }
.office_text dl dd { width:calc(100% - 50px); padding:3px 0; }
#mapP { background:url(/images/user/map1.jpg) 50% 50% no-repeat; }
#mapS { background:url(/images/user/map2.jpg) 50% 50% no-repeat; }
/*로그인*/
.login_wrap { width:100%; height:100vh; display:flex; justify-content:center; flex-direction:column; align-items:center; background:url(/images/user/bg_login.jpg) 50% 50% no-repeat; background-size:cover; }
.login_wrap::after { content:''; display:block; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; backdrop-filter: blur(15px); background:rgba(0,0,0,0.5); animation:fadeInforLogin .7s ease-in-out both; animation-delay:0.3s; }
.login_content { width:430px; position:relative; z-index:2; }
.login { width:100%; background:rgba(255,255,255,1); border-radius:30px; text-align:center; padding:40px 25px 25px; opacity:0; backdrop-filter: blur(10px); animation:fadeupInforLogin 1s both; transition:0.5s; }
.login li { width:100%; margin-top:10px; }
.login_input { display:flex; align-items:center; border:1px solid #ccc; background:#fff; justify-content:space-between; border-radius:5px; transition:all 0.3s;}
.login_input:hover { box-shadow:0 0 10px 0 rgba(0,0,0,0.2); border-color:#999; }
.login li .login_input label { width:50px; height:45px; display:flex; justify-content:center; align-items:center; }
.login li:nth-child(1) .login_input label { background:url(/images/user/icon_login1.svg) 50% 50% no-repeat; background-size:20px 20px; }
.login li:nth-child(2) .login_input label { background:url(/images/user/icon_login2.svg) 50% 50% no-repeat; background-size:20px 20px; }
.login li .inputText { width:calc(100% - 50px); border:none; border-radius:0; border-radius:0 5px 5px 0; }
.login li .inputText:hover { border:none; box-shadow:none; }
.login li:last-child { margin-top:20px; }
.login li ul { display:flex; justify-content:flex-start; align-items:center; }
.login li ul li { width:auto; margin-top:0; display:flex; align-items:center; }
.login li ul li::after { content:''; display:inline-block; width:1px; height:14px; background:#ccc; margin:0 15px; }
.login li ul li:last-child { margin-top:0; }
.login li ul li:last-child::after { display:none; }
.login li .check { margin:0 3px 0 0; }
.login li .check label { display:flex; align-items:center; }
.login_wrap h1 { margin-bottom:30px; }
.login_wrap h1 img { height:15px; }
.login_wrap .bottom_content { position:fixed; bottom:0; left:0; width:100%; padding:50px 0; text-align:center; z-index:2; }
.login_wrap .bottom_content ul { display:flex; justify-content:center; align-items:center; margin-bottom:10px; }
.login_wrap .bottom_content ul li, .login_wrap .bottom_content .text strong, .login_wrap .bottom_content .text p { animation:fadeupInforLogin 0.7s ease-in-out both; }
.login_wrap .bottom_content ul li { animation-delay:0.2s; }
.login_wrap .bottom_content ul li:last-child { animation-delay:0.3s; }
.login_wrap .bottom_content ul li:last-child::before { width:1px; height:15px; background:#ccc; content:''; display:inline-block; margin:0 13px; }
.login_wrap .bottom_content ul li:last-child img { height:18px; }
.login_wrap .bottom_content a { text-transform:uppercase; font-weight:900; }
.login_wrap .bottom_content a img { height:15px; }
.login_wrap .bottom_content .text { color:rgba(255,255,255,0.6); font-size:0.9em; }
.login_wrap .bottom_content .text strong { display:block; animation-delay:0.4s; font-weight:400; font-size:1.1em; color:#fff; }
.login_wrap .bottom_content .text p { animation-delay:0.5s; line-height:1.6em; }
.login_wrap .bottom_content .text p:last-child { animation-delay:0.6s; }
.loginbg { width:100%; height:100vh; position:fixed; top:0; left:0; z-index:0; }
.loginbg .bg_box { width:100%; height:100vh; }
@keyframes fadeupInforLogin { 0% { transform:translateY(10%); opacity:0; } 100% {transform:translateY(-10%); opacity:1; } }
@keyframes fadeupInforLoginText { 0% { transform:translateY(50%); opacity:0; } 100% {transform:translateY(0%); opacity:0.6; } }
/* .benefit { width:100%; margin-top:40px; text-align:left; }
.benefit > p { margin-bottom:20px; }
.benefit ul { display:flex; justify-content:center; flex-direction:column; border-top:2px solid #666;}
.benefit li { display:flex; align-items:flex-start; width:100%; border-bottom:1px solid #e1e1e1; padding:25px 0; }
.benefit li:last-child { margin-bottom:0; }
.benefit li .img { width:110px; text-align:center; margin-right: 10px; }
.benefit li img { height:40px; }
.benefit li .text { text-align:left; }
.benefit li .text strong { display:block; font-size:1.2em; font-weight:600; color:#333; margin-bottom:7px; }
.benefit li .text p { font-size:0.9em; } */
@keyframes zoomIn {
0% { transform:scale(.6); opacity:0; }
50% { transform:scale(1.05); }
100% {transform:scale(1); opacity:1; }
}
@keyframes zoomUp {
0% { transform:translateY(50%) scale(.6); opacity:0; }
50% { transform:translateY(-10%) scale(1.05); }
100% {transform:translateY(0) scale(1); opacity:1; }
}
@keyframes fadeOut {
0% { transform:translateY(0%); opacity:1; }
100% { transform:translateY(50%); opacity:0; }
}
@keyframes fadeup {
0% { transform:translateY(50%); opacity:0; }
50% { transform:translateY(-5%); }
100% { transform:translateY(0); opacity:1; }
}
@keyframes fadeLeft {
0% { transform:translateX(50%); opacity:0; }
50% { transform:translateX(-1%) }
100% { transform:translateX(0); opacity:1; }
}
@keyframes fadeRight {
0% { transform:translateX(-50%); opacity:0; }
50% { transform:translateX(1%) }
100% { transform:translateX(0); opacity:1; }
}