@charset "UTF-8"; .new_layerpopup_cover { position: fixed; left: 0; top: 0; z-index: 999998; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .new_layerpopup { position: fixed; left: 50%; top: 50%; z-index: 999999; width: 420px; /*height: 650px;*/ padding: 0; transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 10px; background-color: #aaa; color: #222; } .new_layerpopup > ul { position: relative; padding: 10px 10px 0 10px; margin: 0; list-style: none; } .new_layerpopup > ul li { float: left; display: block !important; padding: 0; margin: 0; list-style: none; } .new_layerpopup > ul div { display: block !important; } .new_layerpopup a { position: relative; display: block; width: 400px; height: 565px; background-color: #fff; overflow: hidden; } .new_layerpopup a:focus:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px dashed red; box-sizing: border-box; content: ""; } .new_layerpopup a img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; border: 0 none; } .new_layerpopup p { position: relative; clear: both; width: 100%; height: 65px; padding: 17px 20px 0 20px; margin: 0; line-height: 31px; box-sizing: border-box; text-align: left; } .new_layerpopup p:after { display: block; clear: both; content: ""; } .new_layerpopup p > * { vertical-align: top; } .new_layerpopup p input { width: 23px; height: 31px; margin: 0; } .new_layerpopup p label { display: inline-block; padding: 0 0 0 0.5em; margin: 0; } .new_layerpopup p button { float: right; width: 135px; height: 31px; padding: 0; margin: 0; border: 0 none; border-radius: 10px; background-color: #333; color: #fff; font-weight: normal; } .new_layerpopup p button:focus, .new_layerpopup p button:hover, .new_layerpopup p button:active { background-color: #fff; color: #000; } .new_layerpopup .slick-prev { position: absolute; left: 0; right: auto; top: 50%; bottom: auto; width: 55px; height: 55px; line-height: 55px; padding: 0; margin: -27px 0 0 0; border: 0 none; background: transparent; text-align: left; text-indent: -999px; overflow: hidden; color: #000; font-family: serif; font-weight: bolder; font-size: 40px; z-index: 9999; border-radius: 100%; } .new_layerpopup .slick-prev:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; text-indent: 0; text-shadow: 0 0 2px black, 1px 1px 0 rgba(255, 255, 255, 0.5); content: "<"; } .new_layerpopup .slick-prev:focus, .new_layerpopup .slick-prev:hover, .new_layerpopup .slick-prev:active { background-color: transparent; color: #0c4da2; } .new_layerpopup .slick-next { position: absolute; left: auto; right: 0; top: 50%; bottom: auto; width: 55px; height: 55px; line-height: 55px; padding: 0; margin: -27px 0 0 0; border: 0 none; background: transparent; text-align: left; text-indent: -999px; overflow: hidden; color: #000; font-family: serif; font-weight: bolder; font-size: 40px; z-index: 9999; border-radius: 100%; } .new_layerpopup .slick-next:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; text-indent: 0; text-shadow: 0 0 2px black, 1px 1px 0 rgba(255, 255, 255, 0.5); content: ">"; } .new_layerpopup .slick-next:focus, .new_layerpopup .slick-next:hover, .new_layerpopup .slick-next:active { background-color: transparent; color: #0c4da2; } .new_layerpopup .slick-dots { position: absolute; left: 50%; bottom: 0; padding: 0; margin: 0; list-style: none; transform: translate(-50%, 0); } .new_layerpopup .slick-dots li { display: none !important; padding: 0; margin: 0; list-style: none; } .new_layerpopup .slick-dots li.slick-active { display: block !important; } .new_layerpopup .slick-dots li button { width: 65px; height: 42px; padding: 0; margin: 0; border: 0 none; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; font-weight: normal; cursor: default; } .new_layerpopup .play_stop { position: absolute; left: 10px; bottom: 0; width: 65px; height: 42px; padding: 0; margin: 0; border: 0 none;background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 18px; font-weight: normal; font-family: serif; } .slick-list { padding: 0; margin: 0; overflow: hidden; } .slick-track:after { display: block; clear: both; content: ""; } @media all and (max-width: 500px) { .new_layerpopup { width: 100%; height: auto; } .new_layerpopup a { position: relative; width: 100%; height: 0; padding-top: 141.25%; } .new_layerpopup a img { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; margin: 0; transform: translate(-50%, -50%); } } @media all and (max-width: 500px) { .new_layerpopup p button { width: auto; padding: 0 10px; } } @media all and (max-width: 320px) { .new_layerpopup p { padding-left: 20px; padding-right: 20px; } } /* *:focus { outline: 3px solid red; } */ /* header */ .top_menu { background-color: #343f5b; } .top_menu .top_wrap .left ul li { border: 0 none; } .top_menu .top_wrap .left ul li a { color: #fff; } .top_menu .top_wrap .left ul li a:focus, .top_menu .top_wrap .left ul li a:hover, .top_menu .top_wrap .left ul li a:active { background-color: #fff; color: #000; } .site_main .logo { top: 53px; } .site_main .logo a { width: 222px; height: 54px; background: url(../image/new_header_logo.png) no-repeat center center / contain; } .site_main .logo a img { display: none; } .site_main .menu .ld1 { margin-right: 80px; } .site_main .top_menu .top_wrap { width: auto; max-width: 1420px; padding: 0 10px; margin: 0 auto; } .site_main .top_menu .top_wrap .left { position: relative; left: auto; top: auto; right: auto; bottom: auto; float: none; max-width: 1400px; margin: 0 auto; } .site_main .top_menu .top_wrap .left ul { position: absolute; right: 0; top: 54px; } .site_main .top_menu .top_wrap .left ul li { margin: 0 !important; } .site_main .top_menu .top_wrap .left ul li a { display: flex; align-items: center; gap: 10px; height: 50px; line-height: 1; border: 3px solid #3965bd; box-sizing: border-box; font-size: 16px; color: #273969; } .site_main .top_menu .top_wrap .left ul li a:before { content: url(../image/new_header_icon_01.png); } .site_main .top_menu .top_wrap .left ul li a:focus, .site_main .top_menu .top_wrap .left ul li a:hover, .site_main .top_menu .top_wrap .left ul li a:active { border-color: #5fa4e4; background-color: #5fa4e4; color: #fff; } /*2025.03.04 sns추가*/ .sns{margin-left:100px; display: inline-block; height: 40px; position: absolute} .sns a:before{content:''; display: inline-block; width:30px; height: 30px; position: absolute; border-radius:6px} .sns a:first-child:before{background: url(/design/homepage/ncuc_www/images/main/icon_youtube.svg) no-repeat 0 50%; top: 5px; left: -190px; background-size:100% } .sns a:last-child:before{background: url(/design/homepage/ncuc_www/images/main/icon_blog.svg) no-repeat 0 50%; top: 5px; left: -150px; background-size:100% } .mobile_contents{display: none} @media all and (max-width: 1200px) { .site_main .top_menu { background-color: #4e4d4d; } .site_main .top_menu .top_wrap { padding: 0; } .site_main .top_menu .top_wrap .left ul { position: static; } .site_main .top_menu .top_wrap .left ul li a { border: 0 none; background: #222; color: #fff; } .site_main .top_menu .top_wrap .left ul li a:before { content: none; } .site_main .top_menu .top_wrap .right .daily_users { display: none; } .site_main .menu .ld1 { margin: 0; } /*2025.03.04 sns추가*/ .mobile_contents{display: block} .pc_contents{display: none !important;} .sns{width: calc(100% - 60px); height: 55px; margin: 0; box-sizing: border-box; display: flex;justify-content: flex-end;align-items: center;} .sns a{width: 40px; height: 30px; display: block; position: inherit} .sns a:first-child:before{background: url(/design/homepage/ncuc_www/images/main/icon_youtube.svg) no-repeat 0 50%; top: 0; right:40px; left: inherit; background-size:100%} .sns a:last-child:before{background: url(/design/homepage/ncuc_www/images/main/icon_blog.svg) no-repeat 0 50%; top: 0; right: 0; left: inherit; background-size:100%} } .top_menu .top_wrap .right .daily_users { display: inline-flex; align-items: center; height: 29px; padding: 0 20px; border-radius: 29px; background-color: #121212; color: #fff; font-size: 14px; } .top_menu .top_wrap .right span a { color: #fff; } .header .kakao_chatbot { position: fixed; left: 50%; top: 86%; z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%); } .header .kakao_chatbot a{position: absolute; right: -10px;top: 50%;display: block;width: 74px;height: 74px;border-radius: 10px;background: #FAE101 url(../image/icon_quick04.png) no-repeat top center / cover; /* text-indent: -9999px; */ overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); font-size: 12px; text-align: center; font-weight:700;} .header .kakao_chatbot a span{/* bottom: 3px; position: absolute; display: inline-block; width: 100%; left: 0; letter-spacing: -1px;*/ overflow:hidden; position:absolute; clip:rect(0,0,0,0); width:1px;height:1px;font-size:1px;line-height:0;} .header .kakao_chatbot a:focus, .header .kakao_chatbot a:hover, .header .kakao_chatbot a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3); } /*24.08.01. 퀴메뉴 추가*/ .quick_faq { position: fixed; left: 50%; top: calc(86% - 84px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_faq a{ position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #e7e6e4 url(../image/icon_quick02.png) no-repeat top center / cover; /* text-indent: -9999px; */ overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); font-size: 12px; text-align: center; font-weight:700;} .quick_faq a span{overflow:hidden; position:absolute; clip:rect(0,0,0,0); width:1px;height:1px;font-size:1px;line-height:0;} .quick_faq a:focus, .quick_faq a:hover, .quick_faq a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .quick_praise { position: fixed; left: 50%; top: calc(86% - 168px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_praise a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #e7e6e4 url(../image/icon_quick03.png) no-repeat top center / cover;font-weight:700; /* text-indent: -9999px; */ overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); font-size: 12px; text-align: center;} .quick_praise a span{overflow:hidden; position:absolute; clip:rect(0,0,0,0); width:1px;height:1px;font-size:1px;line-height:0;} .quick_praise a:focus, .quick_praise a:hover, .quick_praise a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .quick_program { position: fixed; left: 50%; top: calc(86% - 252px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_program a span{overflow:hidden; position:absolute; clip:rect(0,0,0,0); width:1px;height:1px;font-size:1px;line-height:0; font-weight:bold} .quick_program a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #e7e6e4 url(../image/icon_quick01.png) no-repeat top center / cover;font-weight:700; /* text-indent: -9999px; */ overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); font-size: 12px; text-align: center;} .quick_program a:focus, .quick_program a:hover, .quick_program a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .realtime_jjLine { position: fixed; left: 50%; top: calc(86% - 84px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .realtime_jjLine a span{bottom: 3px; position: absolute; display: inline-block; width: 100%; left: 0; letter-spacing: -1px; font-weight:bold} .realtime_jjLine a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background:#e7e6e4 url(../image/icon_jjLine.jpg) no-repeat top center / 60px; /* text-indent: -9999px;*/ overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-size: 12px; text-align: center;} .realtime_jjLine a:focus, .realtime_jjLine a:hover, .realtime_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .time_jjLine { position: fixed; left: 50%; top: calc(86% - 336px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .time_jjLine a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #e7e6e4 url(../image/icon_time.jpg) no-repeat top center / 60px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-size: 12px; text-align: center;} .time_jjLine a span{bottom: 3px; position: absolute; display: inline-block; width: 100%; left: 0; letter-spacing: -1px; font-weight:bold} .time_jjLine a:focus, .time_jjLine a:hover, .time_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .lost_jjLine { position: fixed; left: 50%; top: calc(86% - 252px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .lost_jjLine a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #e7e6e4 url(../image/icon_lost.jpg) no-repeat top center / 60px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-size: 12px; text-align: center;} .lost_jjLine a span{bottom: 3px; position: absolute; display: inline-block; width: 100%; left: 0; letter-spacing: -1px; font-weight:bold} .lost_jjLine a:focus, .lost_jjLine a:hover, .lost_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .certi_jjLine { position: fixed; left: 50%; top: calc(86% - 168px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .certi_jjLine a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #e7e6e4 url(../image/icon_certi.jpg) no-repeat top center / 60px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-size: 12px; text-align: center;} .certi_jjLine a span{bottom: 3px; position: absolute; display: inline-block; width: 100%; left: 0; letter-spacing: -1px; font-weight:bold} .certi_jjLine a:focus, .certi_jjLine a:hover, .certi_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .quick_joy { position: fixed; left: 50%; top: calc(86% - 336px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_joy a { position: absolute; right: -10px; top: 50%; display: block; width: 74px; height: 74px; border-radius: 10px; background: #fff url(../image/aquajoy-.svg) no-repeat center center / 100%; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);} .quick_joy a:focus, .quick_joy a:hover, .quick_joy a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} /* 진접선 */ .site_jj_line .header #GNB ul li.cd1c2 .lb1 { left: 200px; } .site_jj_line .header #GNB ul li.cd1c3 .lb1 { left: 400px; } .site_jj_line .header #GNB ul li.cd1c4 .lb1 { left: 600px; } .site_jj_line .header #GNB ul li.cd1c5 .lb1 { left: 800px; } .site_jj_line .header #GNB ul li.cd1c6 .lb1 { left: 1000px; } @media all and (max-width: 1024px) { .site_jj_line .header #GNB ul li .lb1 { left: auto !important; } } @media all and (max-width: 1200px) { .site_main .logo, .logo { left: 10px; top: 0; } .logo a { display: flex; align-items: center; justify-content: center; width: 150px; height: 55px; padding: 0; background: none; } .site_main .logo a { display: flex; align-items: center; justify-content: center; width: 150px; height: 55px; padding: 0; } .logo a img { display: block; } .top_menu .top_wrap .right { background: transparent; } .header .kakao_chatbot { position: fixed; left: 50%; top: 86%; z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%); } .header .kakao_chatbot a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../image/icon_quick04.png) no-repeat center center / cover; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); font-weight:700;} .header .kakao_chatbot a:focus, .header .kakao_chatbot a:hover, .header .kakao_chatbot a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3); } /*24.08.01. 퀵메뉴 추가*/ .quick_faq { position: fixed; left: 50%; top: calc(86% - 70px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_faq a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../image/icon_quick02.png) no-repeat center center / cover; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-weight:700;} .quick_faq a:focus, .quick_faq a:hover, .quick_faq a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .quick_praise { position: fixed; left: 50%; top: calc(86% - 140px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_praise a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../image/icon_quick03.png) no-repeat center center / cover; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-weight:700;} .quick_praise a:focus, .quick_praise a:hover, .quick_praise a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .quick_program { position: fixed; left: 50%; top: calc(86% - 210px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_program a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../image/icon_quick01.png) no-repeat center center / cover; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);font-weight:700;} .quick_program a:focus, .quick_program a:hover, .quick_program a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} /* 진접선 퀵메뉴*/ .realtime_jjLine { position: fixed; left: 50%; top: calc(86% - 70px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .realtime_jjLine a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../images/main/icon_jjLine.jpg) no-repeat center center / 100%; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);} .realtime_jjLine a:focus, .realtime_jjLine a:hover, .realtime_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .time_jjLine { position: fixed; left: 50%; top: calc(86% - 280px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .time_jjLine a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../images/main/icon_time.jpg) no-repeat center center / 100%; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);} .time_jjLine a:focus, .time_jjLine a:hover, .time_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .lost_jjLine { position: fixed; left: 50%; top: calc(86% - 210px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .lost_jjLine a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../images/main/icon_lost.jpg) no-repeat center center / 100%; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);} .lost_jjLine a:focus, .lost_jjLine a:hover, .lost_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .certi_jjLine { position: fixed; left: 50%; top: calc(86% - 140px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .certi_jjLine a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: url(../images/main/icon_certi.jpg) no-repeat center center / 100%; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);} .certi_jjLine a:focus, .certi_jjLine a:hover, .certi_jjLine a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} .quick_joy { position: fixed; left: 50%; top: calc(86% - 280px); z-index: 9; width: 100%; max-width: 1550px; transform: translate(-50%, -50%);} .quick_joy a { position: absolute; right: 10px; top: 50%; display: block; width: 60px; height: 60px; border-radius: 10px; background: #fff url(../image/aquajoy.svg) no-repeat center center / 75%; text-indent: -9999px; overflow: hidden; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);} .quick_joy a:focus, .quick_joy a:hover, .quick_joy a:active { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3);} } /* footer */ footer { background-color: #353b55; color: #fff; } footer aside { max-width: 1400px; margin: 0 auto; border-bottom: 0 none; } footer aside .algin_box { width: auto; padding-left: 333px; } footer .click_box span { position: relative; } footer .click_box span + span:before { position: absolute; left: 0; top: 50%; width: 1px; height: 15px; margin-top: -7px; background-color: #fff; content: ""; } footer .click_box span a { color: #fff; font-size: 15px; } footer .click_box span:first-child a { color: #f7a134; } footer aside .algin_box .family_box { display: none; } footer .footer_logo { position: relative; width: auto; max-width: 1400px; margin: 0 auto; border-bottom: 0 none; } footer .footer_logo p { top: -30px; width: 226px; height: 55px; background: no-repeat center center / contain; } .site_main footer .footer_logo p { background-image: url(../image/new_footer_logo.png) !important; } #footer .wa { right: 0; top: -35px; } footer .foot_in { width: auto; max-width: 1400px; padding: 0 0 40px 333px; margin: 0 auto; box-sizing: border-box; color: #fff; } @media all and (max-width: 1400px) { footer aside .algin_box { padding: 0 10px; } footer .footer_logo p { position: static; margin: 10px; } #footer .wa { right: 10px; top: 0; } footer .foot_in { padding: 10px 120px 40px 10px; } } @media all and (max-width: 768px) { footer .click_box { display: flex; flex-wrap: wrap; } footer .click_box span { flex: 1 1 auto; } footer .click_box span a { padding: 0; } footer .foot_in { padding-right: 10px; } } @media all and (max-width: 425px) { footer .click_box span { flex: 1 1 30%; display: block !important; } footer .click_box span:nth-child(1), footer .click_box span:nth-child(2) { flex: 1 1 50%; } footer .click_box span:nth-child(3):before { content: none; } footer .footer_logo p { width: 150px; } } /* main */ #container.main_new *, #container.main_new *:before, #container.main_new *:after { padding: 0; margin: 0; list-style: none; box-sizing: border-box; } #container.main_new #section:after { display: block; clear: both; content: ""; } #container.main_new .new_section_1 { margin: 0; background-color: #1565b0; color: #fff; } #container.main_new .new_area_1 { display: flex; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; } #container.main_new .new_main_visual { flex: 1 1 calc(100% * 1050 / 1400); } #container.main_new .new_main_visual h2 { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; } #container.main_new .new_main_visual .list { position: relative; height: 0; padding-top: calc(100% * (750 / 1050)); z-index:998 } #container.main_new .new_main_visual .list .list_align { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #container.main_new .new_main_visual .list .list_align div { display: block; width: 100%; height: 100%; } #container.main_new .new_main_visual .list .list_align .slick-track:after { display: block; clear: both; content: ""; } #container.main_new .new_main_visual .list .list_align .item { float: left; } #container.main_new .new_main_visual .list .list_align .item { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 10px solid #efefef; background: no-repeat center center / cover; height:100%} #container.main_new .new_main_visual .list .list_align .item_1 { background-image: url(../images/main/main_visual01.jpg); } #container.main_new .new_main_visual .list .list_align .item_2 { background-image: url(../images/main/main_visual02.jpg); } #container.main_new .new_main_visual .list .list_align .item_3 { background-image: url(../images/main/main_visual03.jpg); } #container.main_new .new_main_visual .list .list_align .item_4 { background-image: url(../images/main/main_visual04.jpg); } #container.main_new .new_main_visual .list .list_align .item_5 { background-image: url(../images/main/main_visual05.jpg); } #container.main_new .new_main_visual .list .list_align .item_6 { background-image: url(../images/main/main_visual06.jpg); } #container.main_new .new_main_visual .list .list_align .item_7 { background-image: url(../images/main/main_visual07.jpg); } #container.main_new .new_main_visual .list .list_align .item_8 { background-image: url(../images/main/main_visual08.jpg); } #container.main_new .new_main_visual .list .list_align .item_9 { background-image: url(../images/main/main_visual09.jpg); } #container.main_new .new_main_visual .list .list_align .item_10 { background-image: url(../images/main/main_visual10.jpg); } #container.main_new .new_main_visual .list .list_align .item_11 { background-image: url(../images/main/main_visual11.jpg); } #container.main_new .new_main_visual .list .list_align .item_12 { background-image: url(../images/main/main_visual12.jpg); } #container.main_new .new_main_visual .list .list_align .item_13 { background-image: url(../images/main/main_visual13.jpg); } #container.main_new .new_main_visual .list .list_align .item_14 { background-image: url(../images/main/main_visual14.jpg); } #container.main_new .new_main_visual .list .list_align .item_15 { background-image: url(../images/main/main_visual15.jpg); } #container.main_new .new_main_visual .list .list_align .item_16 { background-image: url(../images/main/main_visual16.jpg); } #container.main_new .new_main_visual .list .list_align .item_17 { background-image: url(../images/main/main_visual17.jpg); } #container.main_new .new_main_visual .list .list_align .item_18 { background-image: url(../images/main/main_visual18.jpg); } #container.main_new .new_main_visual .list .list_align .item_19 { background-image: url(../images/main/main_visual19.jpg); } #container.main_new .new_main_visual .list .list_align .item_20 { background-image: url(../images/main/main_visual20.jpg); } #container.main_new .new_main_visual .list .list_align .item > span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; } #container.main_new .new_main_visual .list .list_align .item > span > span { display: block; padding: 0 0.6em; background-color: #212121; color: #fff; font-size: 40px; } #container.main_new .new_main_visual .list .list_align .item > span > span:nth-child(2n) { background-color: #020202; } #container.main_new .new_main_visual .list .list_align .item > strong { display: block; line-height: 1.75; font-size: 55px; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5); } #container.main_new .new_main_visual .list .slick-prev { position: absolute; left: -10px; right: auto; top: 50%; bottom: auto; z-index: 1003; width: 61px; height: 61px; margin-top: -30px; border-radius: 50%; background: #fff; font-family: serif; font-size: 40px; font-weight: bold; color: #464646; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.3); text-indent: -9999px; overflow: hidden; } #container.main_new .new_main_visual .list .slick-prev:after { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: 0; content: "<"; } #container.main_new .new_main_visual .list .slick-prev:focus, #container.main_new .new_main_visual .list .slick-prev:hover, #container.main_new .new_main_visual .list .slick-prev:active { background-color: #464646; color: #fff; } #container.main_new .new_main_visual .list .slick-next { position: absolute; left: auto; right: -10px; top: 50%; bottom: auto; z-index: 1003; width: 61px; height: 61px; margin-top: -30px; border-radius: 50%; background: #fff; font-family: serif; font-size: 40px; font-weight: bold; color: #464646; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.3); text-indent: -9999px; overflow: hidden; } #container.main_new .new_main_visual .list .slick-next:after { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: 0; content: ">"; } #container.main_new .new_main_visual .list .slick-next:focus, #container.main_new .new_main_visual .list .slick-next:hover, #container.main_new .new_main_visual .list .slick-next:active { background-color: #464646; color: #fff; } #container.main_new .new_main_visual .list .slick-dots { display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; left: 0; bottom: calc(100% * 70 / 750); z-index: 1003; width: 100%; } #container.main_new .new_main_visual .list .slick-dots button { width: 15px; height: 15px; border: 4px solid #fff; border-radius: 50%; background-color: #fff; text-indent: -9999px; overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5); } #container.main_new .new_main_visual .list .slick-dots .slick-active button { background-color: #247fd4; } #container.main_new .new_main_visual .list .slick-dots button.slick-startstop { width: 20px; height: 20px; border: 0 none; border-radius: 3px; background-color: #fff; text-indent: 0; color: #666; font-size: 12px; font-family: serif; } #container.main_new .new_links { flex: 1 1 calc(100% * 350 / 1400); position: relative; } #container.main_new .new_links h2 { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; } #container.main_new .new_links > ul { display: flex; flex-direction: column; height: 100%; } #container.main_new .new_links > ul > li { flex: 1; position: relative; } #container.main_new .new_links > ul > li > a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; align-content: center; gap: 0 10px; height: 100%; padding: 0 60px; font-size: 24px; color: #fff; } #container.main_new .new_links > ul > li > a:focus, #container.main_new .new_links > ul > li > a:hover, #container.main_new .new_links > ul > li > a:active { background-color: #fff !important; color: #0c4da2 !important; } #container.main_new .new_links > ul > li:nth-child(1) > a { background-color: #5fa4e4; } #container.main_new .new_links > ul > li:nth-child(2) > a { background-color: #247fd4; } #container.main_new .new_links > ul > li:nth-child(3) > a { background-color: #0b6dc7; } #container.main_new .new_links > ul > li > a:before { flex: none; display: block; width: 100%; height: 110px; background: no-repeat center center; content: ""; } #container.main_new .new_links > ul > li:nth-child(1) > a:before { background-image: url(../image/new_main_new_links_1.png); } #container.main_new .new_links > ul > li:nth-child(2) > a:before { background-image: url(../image/new_main_new_links_2.png); } #container.main_new .new_links > ul > li:nth-child(3) > a:before { background-image: url(../image/new_main_new_links_3.png); } #container.main_new .new_links > ul > li > a:after { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; border-radius: 50%; background-color: #2a3b53; font-size: 20px; font-weight: bold; font-family: serif; color: #fff; content: ">"; } #container.main_new .new_links > ul > li > a.active { position: relative; z-index: 4; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } #container.main_new .new_links > ul > li > ul { display: none; } #container.main_new .new_links > ul > li > ul.active { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 0; top: 100%; z-index: 3; width: 100%; padding: 39px 18px 26px; background-color: #1362ab; } #container.main_new .new_links > ul > li > ul.active:before { position: absolute; left: 50%; top: 0; width: 50px; height: 19px; line-height: 18px; margin-left: -25px; border-radius: 0 0 19px 19px; background-color: #fff; text-align: center; font-family: serif; font-size: 12px; color: #282828; content: "▼"; } #container.main_new .new_links > ul > li > ul > li > a { display: flex; align-items: center; position: relative; height: 54px; line-height: 1.1; padding: 0 50px 0 22px; border-radius: 10px; background-color: #fff; color: #2a3b53; font-size: 20px; } #container.main_new .new_links > ul > li > ul > li > a:after { position: absolute; right: 29px; top: 50%; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-top: -9px; border-radius: 50%; background-color: #afc3d4; color: #fff; font-size: 16px; font-family: serif; content: "+"; } #container.main_new .new_links > ul > li > ul > li > a:focus, #container.main_new .new_links > ul > li > ul > li > a:hover, #container.main_new .new_links > ul > li > ul > li > a:active { background-color: #0077e6; color: #fff; } #container.main_new .new_links > ul > li > ul > li > a:focus:after, #container.main_new .new_links > ul > li > ul > li > a:hover:after, #container.main_new .new_links > ul > li > ul > li > a:active:after { background-color: #485563; color: #fff; } #container.main_new .new_section_2 { padding: 90px 0; background-color: #f5f5f5; } #container.main_new .new_area_2 { max-width: 1420px; padding: 0 10px; margin: 0 auto; } #container.main_new .board { position: relative; height: 520px; } #container.main_new .board h2 { float: left; display: flex; flex-direction: column; justify-content: space-between; width: 400px; height: 90px; line-height: 1; color: #393939; font-size: 50px; font-weight: normal; } #container.main_new .board h2 > span { flex: 1; display: block; } #container.main_new .board h2 > span:first-child { font-size: 18px; font-weight: normal; } #container.main_new .board h2 em { font-style: normal; font-weight: bold; } #container.main_new .board .lists {} #container.main_new .board .lists:after { display: block; clear: both; content: ""; } #container.main_new .board .lists h3 { float: left; display: flex; align-items: flex-end; height: 90px; line-height: 1.5; padding-bottom: 5px; margin: 0 35px; } #container.main_new .board .lists h3 a { font-size: 18px; color: #393939; font-weight: 600; } #container.main_new .board .lists h3 a.active { color: #07904f; } #container.main_new .board .lists .list { display: none; } #container.main_new .board .lists .list.active { display: block; position: absolute; left: 0; top: 160px; width: 100%; height: calc(100% - 160px); } #container.main_new .board .lists .list .more { position: absolute; right: 0; top: -97px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 9px 0 15px; border: 1px solid #dadfe6; border-radius: 38px; background-color: #fff; font-size: 18px; } #container.main_new .board .lists .list .more:after { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background-color: #afc3d4; font-family: serif; font-size: 20px; color: #fff; content: "+"; } #container.main_new .board .lists .list .more:focus, #container.main_new .board .lists .list .more:hover, #container.main_new .board .lists .list .more:active { border-color: #333; background-color: #666; color: #fff; } #container.main_new .board .lists .list ul { display: flex; gap: 19px; height: 100%; } #container.main_new .board .lists .list ul li { flex: 1 1 20%; height: 100%; } #container.main_new .board .lists .list ul li a { display: flex; flex-direction: column; justify-content: space-between; position: relative; height: 100%; padding: 80px 30px 30px; border: 1px solid #e5e5e5; background-color: #fff; } #container.main_new .board .lists .list ul li a:focus, #container.main_new .board .lists .list ul li a:hover, #container.main_new .board .lists .list ul li a:active { background-color: #0b6dc7; color: #fff; } #container.main_new .board .lists .list ul li a br { display: none; } #container.main_new .board .lists .list ul li a .category { position: absolute; left: -1px; top: -1px; line-height: 41px; padding: 0 22px; background-color: #07904f; color: #fff; font-size: 14px; } #container.main_new .board .lists .list ul li a .title { display: block; height: 90px; line-height: 30px; font-size: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } #container.main_new .board .lists .list ul li a .title { display: -webkit-box; -webkit-line-clamp : 3; -webkit-box-orient : vertical; } #container.main_new .board .lists .list ul li a .content { display: block; height: 75px; line-height: 25px; font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; } #container.main_new .board .lists .list ul li a .content { display: -webkit-box; -webkit-line-clamp : 3; -webkit-box-orient : vertical; } #container.main_new .board .lists .list ul li a .date { font-size: 16px; opacity: 0.75; } @media all and (max-width: 1024px) { #container.main_new .new_section_1 { margin-bottom: 0; } #container.main_new .new_main_visual { flex: 1 1 100%; } #container.main_new .new_links { flex: 1 1 100%; } #container.main_new .new_links > ul { flex-direction: row; } #container.main_new .new_links > ul > li > a { justify-content: center; height: 200px; padding: 0; } #container.main_new .new_links > ul > li > a:before { height: 100px; } #container.main_new .new_links > ul > li > ul.active { left: -50%; width: 200%; } #container.main_new .new_section_2 { padding: 40px 0; } #container.main_new .board { height: 400px; } #container.main_new .board .lists .list ul li a { padding: 40px 10px 10px 10px; } #container.main_new .board .lists .list ul li a .category { line-height: 35px; padding: 0 15px; } #container.main_new .board .lists .list ul li a .title { height: 75px; line-height: 25px; font-size: 18px; } #container.main_new .board .lists .list ul li a .content { height: 60px; line-height: 20px; font-size: 14px; } } @media all and (max-width: 768px) { #container.main_new .new_main_visual .list .list_align .item > span > span { font-size: 20px; } #container.main_new .new_main_visual .list .list_align .item > strong { font-size: 25px; } #container.main_new .new_main_visual .list .slick-prev { left: 0; width: 30px; height: 30px; font-size: 20px; } #container.main_new .new_main_visual .list .slick-next { right: 0; width: 30px; height: 30px; font-size: 20px; } #container.main_new .new_main_visual .list .slick-dots { gap: 0; justify-content: space-evenly; } #container.main_new .new_main_visual .list .slick-dots button { width: 10px; height: 10px; border-width: 0; background-color: #fff; } #container.main_new .new_main_visual .list .slick-dots .slick-active button { } #container.main_new .new_links > ul > li > a { font-size: 18px; } #container.main_new .new_links > ul > li > ul.active { left: -70%; width: 240%; } #container.main_new .board { height: 600px; } /* #container.main_new .board h2 { flex-direction: row; justify-content: flex-start; gap: 20px; float: none; width: auto; height: auto; } #container.main_new .board h2 > span { flex: 0 1 auto; } */ #container.main_new .board h2 { float: none; width: auto; } #container.main_new .board .lists h3 { height: 40px; } #container.main_new .board .lists h3:first-child { margin-left: 0; } #container.main_new .board .lists .list.active { top: 145px; height: calc(100% - 155px); } #container.main_new .board .lists .list ul { flex-wrap: wrap; gap: 10px; } #container.main_new .board .lists .list ul li { flex: 1 1 40%; height: 50%; } #container.main_new .board .lists .list .more { top: -50px; } } @media all and (max-width: 425px) { #container.main_new .new_main_visual .list .list_align .item { border-width: 5px; } #container.main_new .new_links > ul { flex-direction: column; } #container.main_new .new_links > ul > li > a { flex-wrap: nowrap; justify-content: space-between; height: 80px; padding: 0 10%; } #container.main_new .new_links > ul > li > a:before { width: 50px; height: 50px; background-size: contain; } #container.main_new .new_links > ul > li > ul.active { position: relative; left: auto; top: auto; width: 100%; padding: 30px 10px 15px; } #container.main_new .board { height: auto; } #container.main_new .board h2 { height: 70px; font-size: 35px; } #container.main_new .board .lists { position: relative; padding-top: 70px; } #container.main_new .board .lists h3 { position: absolute; left: 100px; top: 0; height: 60px; margin: 0; } #container.main_new .board .lists h3:first-child { left: 0; } #container.main_new .board .lists .list.active { position: static; height: auto; } #container.main_new .board .lists .list .more { top: 25px; height: 30px; padding: 0 5px 0 10px; font-size: 14px; } #container.main_new .board .lists .list .more:after { width: 18px; height: 18px; font-size: 16px; } #container.main_new .board .lists .list ul { height: auto; padding: 20px 10px; border: 1px solid #e5e5e5; background-color: #fff; } #container.main_new .board .lists .list ul li { flex: 1 1 100%; height: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #container.main_new .board .lists .list ul li a { padding: 0 0 0 15px; border: 0 none; background-color: transparent; } #container.main_new .board .lists .list ul li a:before { position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 2px; background-color: #3b3b3b; content: ""; } #container.main_new .board .lists .list ul li a .category { display: none; } #container.main_new .board .lists .list ul li a .title { display: block; height: auto; line-height: 1.2; font-size: 17px; font-weight: 400; } #container.main_new .board .lists .list ul li a .content { display: none; } #container.main_new .board .lists .list ul li a .date { display: none; } }