@charset "utf-8"; /* view */ .blue_txt {color:#004F96!important; font-weight:600} /* #bo_v{margin-bottom: 200px;} */ #bo_v_atc{} #bo_v_info > .title{width: 100%;margin: 20px auto;border-radius: 5px 5px 0 0;position: relative;top: 0;left: 0;} #bo_v_info > .title .tit {padding: 0 0 20px;border-bottom: 2px solid var(--color-main);font-size: 1.30em;font-weight: 700;} #bo_v_info > .info {display: flex;justify-content: space-between;padding: 0 10px;box-sizing: border-box;} #bo_v_info > .info > p {color: #6c757d;font-size: 16px;} #bo_v_btn {padding: 10px;} #bo_v_btn * {font-size: 16px;} #bo_v #bo_v_con{width: 100%;margin: 0 auto;padding: 40px 20px;border-top: 2px solid #000;margin-bottom: 0 !important;} #bo_v #bo_v_con img {display: inline-block;border-radius: 0 !important;} #bo_v_data{width: 100%;margin: 30px auto 0;font-size: 16px;} /* #bo_v_data ul li > div {display: flex !important;justify-content: space-between;flex-flow: row wrap;} #bo_v_data ul li.atchfile > div:first-child {width: 100%;padding: 10px 20px;background: #f5f5f5;color: #000;font-size: 16px;font-weight: 500;} #bo_v_data ul li.atchfile > div:last-child {width: 100%;padding: 10px 20px;border: 1px solid #f5f5f5;margin-bottom: 40px;} #bo_v_data ul li.atchfile > div > div {width: 100%; color: #939393} #bo_v_data ul li.atchfile > div > div a, #bo_v_data ul li.atchfile > div > div .date {color: #939393; font-size: 16px} */ #bo_v_link h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_link ul {margin:0;list-style:none} #bo_v_link li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px; -webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); -moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)} #bo_v_link li i {float:left;color:#b2b2b2;font-size: 2.35em !important;margin-right:20px} #bo_v_link a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000} #bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {text-decoration:underline;color:var(--color-main)} #bo_v_link .bo_v_link_cnt {color:#b2b2b2;font-size:0.92em} #bo_v_link li:hover {border-color:var(--color-main);color:var(--color-main)} #bo_v_link li:hover i {color:var(--color-main)} #bo_v_link li:hover .bo_v_link_cnt {color:var(--color-main)} #bo_v_file h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_v_file ul {margin:0;list-style:none} #bo_v_file li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px; -webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); -moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%); box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)} #bo_v_file li i {float:left;color:#b2b2b2;font-size:2.35em !important;margin-right:20px} #bo_v_file a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000} #bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active {text-decoration:underline;color: var(--color-main);} #bo_v_file img {float:left;margin:0 10px 0 0} #bo_v_file .bo_v_file_cnt {color:#b2b2b2;font-size:0.92em} #bo_v_file li:hover {border-color: var(--color-main);color: var(--color-main);} #bo_v_file li:hover i {color: var(--color-main);} #bo_v_file li:hover .bo_v_file_cnt {color: var(--color-main);} #bo_v_data li.prev_list, #bo_v_data li.next_list{padding: 10px; gap: 10px; align-items: center; color: #787878;} #bo_v_data li.prev_list .prev_tit{width: 50px;} #bo_v_data li.prev_list .prev_txt {overflow: hidden; width:calc(100% - 50px);} #bo_v_data li.prev_list .prev_txt .alink{width: 95%;} #bo_v_data li.prev_list .prev_txt .alink a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; width: 100%;} #bo_v_data li.next_list .next_tit{width: 50px;} #bo_v_data li.prev_list .next_txt {overflow: hidden; width:calc(100% - 50px);} #bo_v_data li.prev_list .next_txt .alink{width: 95%;} #bo_v_data li.prev_list .next_txt .alink a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; width: 100%;} #bo_v_data li.prev_list div:hover a, #bo_v_data li.next_list div:hover a{color: var(--color-main);} #bo_v_data li.prev_list div i, #bo_v_data li.next_list div i{color: #787878;} .d-none{display: block !important;flex-grow: 1 !important;} #bo_btn_top>div>div{padding: 0 !important;} #bo_btn_top>div>div .border-top{border-top: unset !important;} #bo_btn_top>div>div .btn {font-size: 16px;} #viewcomment #bo_vc {margin-top: 10px;} #viewcomment #bo_vc .cmt-btn {display: flex;justify-content: flex-end;padding: 10px 20px;} #viewcomment #bo_vc .cmt-btn ul > li {display: inline-block} #viewcomment #bo_vc .cmt-btn ul > li > a {color: #444444;font-size: 16px;font-weight: 500;} #viewcomment #bo_vc .cmt-btn ul > li > a:hover {color: var(--color-main);} #bo_vc_w #captcha {display: flex;justify-content: center;flex-wrap: wrap;margin-top: 20px;} #bo_vc_w #captcha #captcha_key {margin-right: 4px;font-size: 1.0em;} #bo_vc_w #captcha #captcha_mp3 {display: none;margin-right: 4px;} #bo_vc_w #captcha #captcha_audio {display: none;} #bo_vc_w #captcha #captcha_info {width: 100%;font-size: 16px;} #bo_vc_w #captcha.m_captcha #captcha_img {width: auto;margin: 0;height: 40px;} #bo_vc_w #captcha.m_captcha #captcha_key {height: 40px;} @media all and (max-width: 1200px){ #bo_v{margin-bottom: 150px;} } @media all and (max-width: 640px){ #bo_v_link li i, #bo_v_file li i {display: block;float:none;font-size:1.50em !important;margin-right: 0;} } /* list */ #bo_list_wrap{} #bo_list_wrap form{width: 100%;margin: 0 auto;} #bo_list_wrap form #bo_list{margin-top: 20px;margin-bottom: 100px;} #bo_list_wrap form #bo_list .list_head{height: 75px;background: var(--color-main);color: #fff;font-size: 1.10em;font-weight: 500;display:none} #bo_list_wrap form #bo_list .list_head a{color: var(--color-main) !important;} #bo_list_wrap form #bo_list .list_con{color: #666;display: flex;gap: 50px 25px;flex-wrap: wrap;} #bo_list_wrap form #bo_list .list_head li{height: 100%;} #bo_list_wrap form #bo_list .list_con li{padding: 22px 0;} #bo_list_wrap form #bo_list .list_con li:hover {background: #FAFAFA;} #bo_list_wrap form #bo_list .list_con li.notice{background: #F8F8F8;} #bo_list_wrap form #bo_list .list_head li, #bo_list_wrap form #bo_list .list_con li{display: flex;justify-content: space-between;align-items: center;/* padding: 0 10px; */text-align: center;width: calc(100% / 4 - 20px);padding: 0;position: relative;} #bo_list_wrap form #bo_list .list_head li:hover > a, #bo_list_wrap form #bo_list .list_con li:hover > a {background:#004F96; color:#fff;} #bo_list_wrap form #bo_list .list_con li > a{ border-radius:20px; overflow:hidden;box-shadow: 2px 2px 2px 2px rgb(215 215 215 / 20%);background:#fff} #bo_list_wrap form #bo_list .list_head li span, #bo_list_wrap form #bo_list .list_con li span {padding:10px 0; display:block} #bo_list_wrap form #bo_list .list_head li .num, #bo_list_wrap form #bo_list .list_con li .num {width: 120px;} #bo_list_wrap form #bo_list .list_head li .date, #bo_list_wrap form #bo_list .list_con li .date {width: 150px;} #bo_list_wrap form #bo_list .list_head li .hit, #bo_list_wrap form #bo_list .list_con li .hit {width: 120px;} #bo_list_wrap form #bo_list .list_head li .subject_wrap, #bo_list_wrap form #bo_list .list_con li .subject_wrap {width: calc(100% - 390px);display: flex;align-items: center;padding: 0 10px;} #bo_list_wrap form #bo_list .list_head li .subject_wrap p {display: block;width: 100% !important;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #bo_list_wrap form #bo_list .list_head li .subject_wrap label{margin: 0;} #bo_list_wrap form #bo_list .list_head li .subject_wrap label input{margin-right: 10px;} #bo_list_wrap form #bo_list .list_con li .num{color: #4D4D4D;} #bo_list_wrap form #bo_list .list_con li .subject_wrap .subject {width: 100%;cursor: pointer;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;color:#202020;font-weight:500;} #bo_list_wrap form #bo_list .list_con li:hover .subject_wrap .subject {color: #262262;} #bo_list_wrap form #bo_list .list_con li .subject_wrap p.edit{font-size: 16px;font-weight: 500;color: #fff !important;background: #333;margin-right: 10px;padding: 3px 6px;border-radius: 3px;cursor: pointer;} #bo_list_wrap form #bo_list .list_con li.notice .num {position: relative;} #bo_list_wrap form #bo_list .list_con li.notice .num::before {content: '';display: block;width: 24px;aspect-ratio: 1 / 1;margin: 0 auto;background: url(./img/ico-notice.png) center center / cover no-repeat;} #bo_list_wrap form #bo_list .list_con li.notice .subject_wrap p {color: #000;font-weight: 500;} #bo_list_wrap form #bo_list .list_con li.notice .subject_wrap p {color: #000;font-weight: 500;} #bo_list_wrap form #bo_list .list_con li #bo_btn_top>div> .btn {font-size: 16px;cursor: pointer;} #bo_btn_top {margin-top:30px;} #bo_list_wrap form #bo_list .list_con li:before {position: absolute;width: 45px;height: 34px;content: '';left: 10px;top: -15px;z-index: 10;background-repeat: no-repeat;} #bo_list_wrap form #bo_list .list_con li:nth-child(1):before {background-image: url(../../../img/sub/nation_icon01.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(2):before {background-image: url(../../../img/sub/nation_icon02.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(3):before {background-image: url(../../../img/sub/nation_icon03.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(4):before {background-image: url(../../../img/sub/nation_icon04.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(5):before {background-image: url(../../../img/sub/nation_icon05.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(6):before {background-image: url(../../../img/sub/nation_icon06.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(7):before {background-image: url(../../../img/sub/nation_icon07.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(8):before {background-image: url(../../../img/sub/nation_icon08.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(9):before {background-image: url(../../../img/sub/nation_icon09.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(10):before {background-image: url(../../../img/sub/nation_icon10.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(11):before {background-image: url(../../../img/sub/nation_icon11.png);} #bo_list_wrap form #bo_list .list_con li:nth-child(12):before {background-image: url(../../../img/sub/nation_icon12.png);} @media all and (max-width: 1024px){ #bo_list_wrap form #bo_list {margin-bottom: 60px;} #bo_list_wrap form #bo_list .list_head li .num, #bo_list_wrap form #bo_list .list_con li .num {width: 70px;} #bo_list_wrap form #bo_list .list_head li .date, #bo_list_wrap form #bo_list .list_con li .date {width: 120px;} #bo_list_wrap form #bo_list .list_head li .hit, #bo_list_wrap form #bo_list .list_con li .hit {width: 70px;} #bo_list_wrap form #bo_list .list_head li .subject_wrap, #bo_list_wrap form #bo_list .list_con li .subject_wrap {width: calc(100% - 260px);} #bo_list_wrap form #bo_list .list_con li .subject_wrap p.edit {font-size: 14px;} } @media all and (max-width:768px){ #bo_list_wrap form #bo_list .list_head {height: 45px;font-size: 16px;} #bo_list_wrap form #bo_list .list_con {font-size: 16px;} #bo_list_wrap form #bo_list .list_con li{padding: 16px 0;} #bo_list_wrap form #bo_list .list_con li.notice .num::before {width: 20px;} #bo_list_wrap form #bo_list .list_con li .subject_wrap .subject {font-size: 18px;} #bo_list_wrap form #bo_list .list_con li .subject_wrap p.edit {font-size: 12px;} #bo_list_wrap #bo_search form#fsearch {width: 70%;} #bo_list_wrap #bo_search form#fsearch select{width: 120px;} #bo_list_wrap #bo_search form#fsearch .sch_bar{width: calc(100% - 135px);} } @media all and (max-width: 640px){ #bo_btn_top>div> .btn {font-size: 14px;} #bo_list_wrap form #bo_list {border-top: 3px solid var(--color-main);} #bo_list_wrap form #bo_list .list_head {display: none;} #bo_list_wrap form #bo_list .list_con li {flex-wrap: wrap;justify-content: normal;gap: 5px 0;height: auto;text-align: left;} #bo_list_wrap form #bo_list .list_con li .num {display: none;} #bo_list_wrap form #bo_list .list_con li .subject_wrap {width: 100%;padding: 0;} #bo_list_wrap form #bo_list .list_con li .name {width: auto;margin: 0 20px 0 10px;} #bo_list_wrap form #bo_list .list_con li.notice .num {display: block;} #bo_list_wrap form #bo_list .list_con li.notice .num::before {margin: inherit;} #bo_list_wrap form #bo_list .list_con li .date, #bo_list_wrap form #bo_list .list_con li .hit {display: flex;align-items: center;gap: 0 7px;width: auto;margin-right: 12px;padding-right: 12px;font-size: 14px;position: relative;line-height: 1.0;} #bo_list_wrap form #bo_list .list_con li .date::before, #bo_list_wrap form #bo_list .list_con li .hit::before {content: attr(data-name);} #bo_list_wrap form #bo_list .list_con li .date::after{content: '';display: block;width: 1px;height: 10px;background: #666;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;} #bo_list_wrap #bo_search form#fsearch {width: 100%;} } @media all and (max-width: 480px){ #bo_list_wrap form #bo_list{border-top: 2px solid var(--color-main);} #bo_list_wrap form #bo_list .list_head {display: none;} #bo_list_wrap form #bo_list .list_con li {flex-wrap: wrap;justify-content: normal;height: auto;} #bo_list_wrap form #bo_list .list_con li .subject_wrap {width: 100%;} #bo_list_wrap form #bo_list .list_con li .name {width: auto;margin: 0 20px 0 10px;} #bo_list_wrap form #bo_list .list_con li .date {width: auto;} } @media all and (max-width:420px){ #bo_list_wrap #bo_search form#fsearch select{width: 100px;} #bo_list_wrap #bo_search form#fsearch .sch_bar{width: calc(100% - 115px);} } @media (max-width:1200px){ } @media (max-width:1000px){ .main .section6 .section_title {margin-bottom:30px;} .main .section6 .tab_title_wrap { flex-direction: column;margin-bottom:30px;} .main .section7 .loop_slide_wrap .loop_slide {width:400px;} .main .section6 .media_wrap {gap:20px;} .main .section6 .media_item, .main .section6 .media_list {gap:15px;} } @media (max-width:800px){ .main .section6 .media_wrap {flex-direction: column;} .main .section6 .media_main {width:100%} .main .section6 .media_list {width:100%} .main .section6 .media_item img {width:40%} } @media (max-width:768px){ .main .section6 .tab_menu {width:100%} .main .section6 .tab_btn {width:50%;} .main .section7 {padding:80px 0} .main .section7 .loop_slide_wrap .loop_slide {width:320px;} .main .section7 .loop_slide_wrap .loop_slide .txt_wrap p {font-size:15px;padding:0 20px;} .main .section7 .loop_slide_wrap .loop_slide .img_wrap {gap:15px;} .main .section7 .loop_slide_wrap .loop_slide .img_wrap span {padding: 5px 30px;} .main .section7 .loop_slide_wrap .loop_slide {gap:10px;} .main .section7 .link_btn a {margin-top:60px;} } /* 페이징 */ #bo_list_wrap .pagination li{width: auto; min-width: 30px;} .page-link{border: 0 !important; font-size: .90em; color: #7E7E7E; padding: 0 !important; height: 100%; line-height: 30px; text-align: center;} .page-link:hover{background: transparent !important;} .page-link:focus{box-shadow: none !important;} .page-item:first-child .page-link, .page-item:last-child .page-link{display: flex; justify-content: center; align-items: center;} .page-item:first-child .page-link:hover img{content: url('/img/pg_prev_btn_on.svg');} .page-item:last-child .page-link:hover img{content: url('/img/pg_next_btn_on.svg');} .page-link img{max-width: 100%;} .page-item.active .page-link{background-color: transparent !important;color: var(--color-main) !important;font-weight: 600;border: 1px solid #333 !important;border-radius: 50%;} /* 검색창 */ #bo_list_wrap #bo_search{margin-top: 50px;} #bo_list_wrap #bo_search form#fsearch {text-align:left;margin: 0 auto;overflow-y:auto;border-radius:0;} #bo_list_wrap #bo_search form#fsearch h3 {padding:15px;border-bottom:1px solid #e8e8e8} #bo_list_wrap #bo_search form#fsearch legend {background:red} #bo_list_wrap #bo_search form#fsearch form {display:block} #bo_list_wrap #bo_search form#fsearch select {float:left;margin-right:13px;border:0;width:150px;height:45px;border:1px solid #E6E6E6;border-radius:0;padding: 0 10px;color: #C5C5C5;font-size: .90em;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: url('/img/sch_arrow.svg') no-repeat 94% 50%;} #bo_list_wrap #bo_search form#fsearch select:focus{border: none !important; outline: none !important; box-shadow: none !important;color: #000; border-radius:0;} #bo_list_wrap #bo_search form#fsearch select option{color: #000;} #bo_list_wrap #bo_search form#fsearch .sch_bar {display:inline-block;float:left;border-radius:0;} #bo_list_wrap #bo_search form#fsearch .sch_input {width:calc(100% - 45px);height:45px;padding:0 10px;background-color:transparent;float:left;font-size: .90em;color: #000;font-weight: 400;border-radius: 0 !important;border:0!important} #bo_list_wrap #bo_search form#fsearch .sch_input:focus{border:none!important} #bo_list_wrap #bo_search form#fsearch .sch_input::placeholder{color: #C5C5C5;} #bo_list_wrap #bo_search form#fsearch .sch_btn {width: 45px;border-radius: 0;background-color: var(--color-main);background-image: url(/img/sch_btn.png);background-size: 20px;background-position: center;background-repeat: no-repeat;} #bo_list_wrap #bo_search form#fsearch .sch_btn:hover{background-color: var(--color1) !important;border-color: var(--color1) !important;} #bo_list_wrap #bo_search form#fsearch .bo_sch_cls {position:absolute;right:0;top:0;color:#b5b8bb;border:0;padding:12px 15px;font-size:16px;background:#fff} @media all and (max-width:768px){ #bo_list_wrap #bo_search form#fsearch {width: 70%;} #bo_list_wrap #bo_search form#fsearch select{width: 120px;} #bo_list_wrap #bo_search form#fsearch .sch_bar{width: calc(100% - 135px);} } @media all and (max-width:600px){ #bo_list_wrap #bo_search form#fsearch {width: 100%;} } @media all and (max-width:420px){ #bo_list_wrap #bo_search form#fsearch select{width: 100px;} #bo_list_wrap #bo_search form#fsearch .sch_bar{width: calc(100% - 115px);} } /* write */ #bo_w{margin-bottom: 200px;} #bo_w form{width: 100%;margin: 0 auto;} #bo_w form>ul li{display: flex;justify-content: space-between;align-items:center ;flex-flow: row wrap;margin-bottom: 20px;} #bo_w form>ul li:last-child{margin-bottom: 80px;} #bo_w form>ul li>label{display: flex;align-items: center;width: 70px;margin-bottom: 0;color: #000;font-size: 18px;font-weight: 700;} #bo_w form>ul li>label span{color: var(--color5);margin-left: 10px;display: block;font-weight: normal;} #bo_w form>ul li>div{width: calc(100% - 80px);display: flex;align-items: center;flex-flow: row wrap;margin: 0 !important;} #bo_w form>ul li>div>label{font-size: 1.0em; font-weight: normal; cursor: pointer; margin-right: 25px; display: flex; align-items: center; width: fit-content;} #bo_w form>ul li div input[type='text']{width: 100%;height: 50px;line-height: 50px;background: #fff;border-radius: 5px;border: 1px solid #D9D9D9;padding: 0 20px;font-size: var(--font-20);color: #000;} #bo_w form>ul li div>input:active, #bo_w form>ul li div>input:valid, #bo_w form>ul li div>input:focus{box-shadow: unset;} #bo_w form>ul li div.link_wrap{} #bo_w form>ul li div.link_wrap>div{width: 100%;} #bo_w form>ul li div.file_wrap{} #bo_w form .btn_wrap{display: flex;justify-content: space-between;align-items: center;flex-flow: row-reverse;margin-top: 80px;} #bo_w form .btn_wrap button, #bo_w form .btn_wrap a{display: block;height: 100%;padding: 14px 0;margin:0;font-size: 1.0em;text-align: center;font-weight: bold;border-radius: 5px !important;width: calc(50% - 10px);} .cke_sc{display: none !important;} @media all and (max-width:1199px){ #bo_w{margin-bottom: 150px;} #bo_w form>ul li>label{width: 110px;} #bo_w form>ul li>div{width: calc(100% - 120px);} } @media all and (max-width:768px){ #bo_w form>ul li>div>label{width: 50%;margin-right: 0;margin-bottom: 10px;} #bo_w form>ul li>div>.privacy_label{width: fit-content;margin-bottom: 0;} .sub-page .page-tit {margin-bottom:30px!important;} #bo_list_wrap form #bo_list .list_con li .date, #bo_list_wrap form #bo_list .list_con li .hit {display:none} } @media all and (max-width:640px){ #bo_w form>ul li {gap: 5px 0;margin-bottom: 15px;} #bo_w form>ul li>div>label{width: 50%;margin-right: 0;margin-bottom: 10px;} #bo_w form>ul li>label{width: 100%} #bo_w form>ul li>div{width: 100%} .form-row {margin-top:30px!important;} #bo_search form#fsearch .sch_bar {width:100%!important} #bo_list_wrap #bo_search form#fsearch .sch_input {width:100%!important} #sub-visual .inner {padding:80px 0} .sub-visual__img {min-height:200px} .sub-visual__img img {position:absolute; width:auto; height:100%} #bo_list_wrap #bo_search {margin-top:0} } .sub-page .tit {font-size:2.5em; text-align: center;} .sub-page .page-tit {margin-bottom:100px;} #bo_list_wrap form #bo_list .list_head li .subject_wrap, #bo_list_wrap form #bo_list .list_con li .subject_wrap {width:auto} .flex_wrap {display:flex; align-items: center;} #bo_list_wrap #bo_search form#fsearch .sch_input {width:300px} .input-group{display: flex;flex-wrap:nowrap;border:1px solid #C0C0C0} .form-row {justify-content: flex-end;} .flex_box {display: flex;justify-content: space-between;align-items: center;} .flex_box#bo_v_info > .title {width:auto; margin:0;display:flex;align-items: center;gap:10px;} .flex_box#bo_v_info > .title .tit {padding:10px 0} .flex_box#bo_v_info > .title .num {font-size: 1.30em;font-weight: 700;} #bo_v_btn .go_listpage {position: relative;top:30px;left: 50%;transform: translateX(-50%);width: 250px;border: 1px solid #262262;display: flex;align-items: center;justify-content: center;height: 70px;font-size: 1.25em;border-radius: 0;box-sizing: border-box;color: #262262;display:none} #bo_v_btn .go_listpage:hover {background: #262262;color:#fff;} /* 리스트 페이지 커스텀 */ .sub-page .inner {padding:150px 0} .main .inner {max-width:1400px;width:92%; margin:0 auto; padding:120px 0; position:relative} .section_title {width: 100%;display: flex;flex-direction: column;align-items: center;margin-bottom:100px;} .section_title span {color:#004F96; font-family:var(--font-Outfit);font-weight:bold;} /* .section_title h2 { font-size: 2.5em;text-align: center;font-weight: 600;margin-top:20px;} */ .section_title p{color:#333; font-size:0.9em;text-align:center} .section_title h3{font-size:1.5em; font-weight:bold} iframe {width: 100%;aspect-ratio: 16/9; } .section1 .section_title {margin-bottom:50px;} .section1 a.blue_bg {color:#fff!important} .circle_wrap {background: url(../../../img/sub/sub_nation_sec1_bg.png) no-repeat center center;width: 100%;background-size: contain;min-height: 450px;display: flex;justify-content: center;max-width: 1020px;position: relative;left: 50%;transform: translateX(-50%);align-items: center;margin-bottom:100px;} .circle_wrap li {display: flex;justify-content: center;align-items: center;text-align: center;position:relative; top:-20px;width:33%} .circle_wrap li p {font-size:1.5em} .circle_wrap li:nth-child(2) {top:50px;} .content_wrap span {text-align:center;display:block;font-size:1.5em} .section1 a.blue_bg {padding: 10px 65px;font-size: 1.5em;position: relative;margin-top: 70px;left: 50%;transform: translateX(-50%);display: inline-block;border-radius: 50px;} .section1 a.blue_bg:hover {color:#fff} .section2 .inner {display:flex} .section2 .left {width:20%} .section2 .left h2 {font-size:2.5em;margin-bottom:20px} .section2 .left span {font-size: 1.25em;} .section2 .right {width:80%} .section2 .right .list_wrap {display:flex; gap:30px;flex-direction: column;} .section2 .right .list_wrap li {display: flex;flex-direction: column;gap:20px;align-items: flex-start;} .section2 .right .list_wrap li:last-child > div{gap:0} .section2 .right .list_wrap li > div {display:flex; background: #fff;color:#333; padding:20px 30px; border-radius: 20px;flex-direction: column;gap: 20px;width:100%;} .section2 .right .list_wrap li h3 {font-size:1.5em; cursor: pointer; position: relative;padding:10px;} .section2 .right .list_wrap li p {font-size:1em;color:#111} .section2 .right .list_wrap li p span{color:#E21515} .section2 .right .list_wrap li .line_list {padding-left:15px; position:relative} .section2 .right .list_wrap li .line_list:before{position:absolute; content:''; width:5px ;height:1px ; background: #111;left:0; top:50%;transform: translateY(-50%);} .section3 {background:#F8F8F9 ;} .tab_content.active{display:block} .tab_btn {border: 0;cursor: pointer;color: #004F96;background: transparent;display: block;font-size: 1em;width: 260px;} .tab_btn.active {background: #004F96;color: #fff;border-color: #004F96;border-radius: 30px;} .media_wrap {display: flex;gap: 50px;} .media_main {flex: 2;max-width: 820px;width: 60%;} .media_list {flex: 1;display: flex;flex-direction: column;gap: 30px;width:40%; } .media_item {display: flex;gap: 20px;align-items: center;cursor: pointer;} .media_item p {font-size:0.9em} .btn_more {margin-top: 10px;background: #E21515;color: #fff;text-align: center;text-decoration: none;width: 220px;height: 60px;display: flex;justify-content: center;align-items: center;border-radius: 30px;} .link_btn {display: flex;align-items: center;justify-content: center;} .section4 {background: url('../../../img/main_sec7_bg.png') no-repeat center center;background-size: cover; padding:150px 0;overflow: hidden;} .section4 .section_title {margin-bottom:50px} .section4 .section_title h2 {margin-bottom:0} .section4 .loop_slide_wrap .loop_slide{ background: #CDDEEF;width: 450px;aspect-ratio: 1 / 1;height: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 25px;border-radius: 20px;} .section4 .loop_slide_wrap .loop_slide:nth-child(2n) {background: #EAEAEA;} .section4 .loop_slide_wrap .loop_slide .img_wrap {display: flex;flex-direction: column;align-items: center;gap: 30px;} .section4 .loop_slide_wrap .loop_slide .img_wrap img {width:auto} .section4 .loop_slide_wrap .loop_slide .img_wrap span{background: #004F96;color: #Fff;padding: 10px 30px;border-radius: 30px;font-size: 0.9em;} .section4 .loop_slide_wrap .loop_slide .txt_wrap p{font-size: 0.9em;padding: 0 50px;text-align: center;} .section4 .loop_slide_wrap .track {animation: loop 20s linear infinite;width: fit-content;gap: 20px;display:flex} .section4 .link_btn{width: 92%;max-width: 1400px;margin: 0 auto;} .section4 .link_btn a {display: flex;margin-top: 100px;background: #004F96;color: #fff;width: 220px;justify-content: center;align-items: center;height: 60px;border-radius: 30px; } @keyframes loop { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} } .section5 {background: #004F96 url(../../../img/sub/sub_nation_sec5_bg_img.png) no-repeat center 50%;background-size: auto;} .section5 .inner {padding:90px 0; display: flex;flex-direction: column;align-items: center;justify-content: space-between;} .section5 h2 {margin-bottom: 50px;font-size: 2.5em;color: #fff;} .section5 p {margin-bottom: 25px;font-size: 6.3em;font-weight: 900;color: #fff;display: flex;align-items: baseline;} .section5 p span {font-size: 48px;font-weight: 600;} .section5 .img_wrap {display:flex;gap:25px; } .img_wrap img {width:auto} .section7 {background:#F8F8F9} .section7 .inner {overflow: hidden;} .section7 .swiper-slide {transform: scale(0.7)!important;transition:.5s} .section7 .swiper-slide img {width:100%} .section7 .swiper-slide-active {transform: scale(1.3)!important;transition:.5s;margin-bottom: 130px;} .section7 .swiper-wrapper {align-items: flex-end;} .section7 .mySwiper {overflow: unset;} .section7 .swiper-btn-wrap{position: absolute;left: 50%;top: 50px;transform: translateX(-50%);width: 55%;z-index: 4;} .section7 .swiper-button-next:after, .section7 .swiper-button-prev:after {font-size:1.5em; color:#000} .section7 .swiper-button-next, .section7 .swiper-button-prev {background: #fff;width: 60px;aspect-ratio: 1 / 1;border-radius: 50%;height: auto;border:1px solid #E8E8E8} .section8 .box_wrap {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 25px 20px;} .section8 .box_wrap li {min-height:260px; background: #4F8BC0 url(../../../img/sub/sub_nation_sec8_icon01.png) no-repeat 95% 85%;background-size: auto;width: calc(50% - 10px);border-radius: 20px;color: #fff;box-sizing: border-box;padding: 40px 50px;display: flex;flex-direction: column;gap: 20px;} .section8 .box_wrap li:nth-child(2) {background: #004F96 url(../../../img/sub/sub_nation_sec8_icon02.png)no-repeat 95% 85%} .section8 .box_wrap li:nth-child(3) {background: #004F96 url(../../../img/sub/sub_nation_sec8_icon03.png)no-repeat 95% 85%} .section8 .box_wrap li:nth-child(4) {background: #4F8BC0 url(../../../img/sub/sub_nation_sec8_icon04.png)no-repeat 95% 85%} .section8 .box_wrap li:nth-child(5) {background: #4F8BC0 url(../../../img/sub/sub_nation_sec8_icon05.png)no-repeat 95% 85%} .section8 .box_wrap li:nth-child(6) {background: #004F96 url(../../../img/sub/sub_nation_sec8_icon06.png)no-repeat 95% 85%} .section8 .box_wrap li h4{font-size: 1.5em;} .section8 .box_wrap li p{font-size: 1.2em;width:80%} .section9 {background:#F8F8F9} .sec9_list {flex-direction: column;align-items: center;padding:150px 0;justify-content: center;} .sec9_list.round_wrap {gap:150px; position:relative} .sec9_list.round_wrap:before{content:'';position:absolute; left:50%; width:1px ; height:100%; background: #004F96;} .sec9_list .round_list {width:100%;} .sec9_list .round_list .txt_wrap {position:absolute; top:40%; left:50%; padding-left:180px} .sec9_list .round_list:nth-child(2n) .txt_wrap{text-align: right;left: unset;right: 50%;display: flex;justify-content: flex-end;flex-direction: column;align-items: flex-end;padding-right: 180px;padding-left: 0;} .sec9_list .round_list .txt_wrap span{font-size: 1em;} .sec9_list .round_list .round{max-width:220px} .sec9_list .round_list .txt_wrap p{font-size: 1.3em;font-weight: 500;margin-bottom: 20px;} .sec9_list .dot-left, .sec9_list .dot-right {position: absolute;left:50%;width: 8px;height: 8px;background: #004F96;border-radius: 50%;transform: translateX(-50%);z-index:0} .sec9_list .dot-left {top: 0;} .sec9_list .dot-right {bottom: 0;top:auto} @media(max-width:1200px){ .section5 .img_wrap img {width:calc(50% - 15px);} .section7 .swiper-slide-active {margin-bottom: 100px;} } @media(max-width:1000px){ .section4 .loop_slide_wrap .loop_slide {width:400px;} .section6 .media_wrap {gap:20px;} .section6 .media_item, .section6 .media_list {gap:15px;} .section7 .swiper-slide-active {margin-bottom: 80px;} } @media (max-width:800px){ body{font-size:18px} .sub-page .inner {padding:60px 0} .section6 .media_wrap {flex-direction: column;} .section6 .media_main {width:100%} .section6 .media_list {width:100%} .section6 .media_item img {width:40%} .section8 .sec8_txt_wrap h3 {font-size:40px;} } @media(max-width:768px){ .section1 .section_title {margin-bottom:0} .circle_wrap{min-height:350px;margin-bottom:30px} .content_wrap span {font-size:20px} .circle_wrap li:nth-child(2) {top:30px;} .section1 a.blue_bg {font-size:20px} .section2 .inner {flex-direction: column;gap:50px;} .section2 .inner .left {width:100%} .section2 .inner .right {width:100%} .section2 .right .list_wrap {gap:20px;} .section2 .right .list_wrap li {width:100%} #bo_list_wrap form #bo_list .list_head li, #bo_list_wrap form #bo_list .list_con li {width:calc(100% / 3 - 20px)} #bo_list_wrap form #bo_list .list_con li:before {top:0} .section6 .tab_btn {width:50%;} .section_title h2 img{width:80%} .section_title {margin-bottom:50px;} .section4 {padding:80px 0} .section4 .loop_slide_wrap .loop_slide {width:320px;} .section4 .loop_slide_wrap .loop_slide .txt_wrap p {font-size:15px;padding:0 20px;} .section4 .loop_slide_wrap .loop_slide .img_wrap {gap:15px;} .section4 .loop_slide_wrap .loop_slide .img_wrap span {padding: 5px 30px;} .section4 .loop_slide_wrap .loop_slide {gap:10px;} .section4 .link_btn a {margin-top:60px;} .section5 {background-size: 75%;} .section7 .swiper-button-next:after, .section7 .swiper-button-prev:after {font-size:1.3em; color:#000} .section7 .swiper-button-next, .section7 .swiper-button-prev {width:40px;} .section7 .swiper-btn-wrap {top:50%;width:100%; transform: translateY(-50%);left:0} .section7 .swiper-slide-active {transform: scale(1) !important;margin-bottom:0} .section7 .swiper-slide {transform: scale(1) !important;margin-bottom:0} .section8 .box_wrap {flex-direction: column;} .section8 .box_wrap li {width:100%} .sec9_list{padding:80px 0} .sec9_list .round_list {padding-left:20px;} .sec9_list .round_list .round {width:20%; max-width:20%} .sec9_list .round_list {width: 100%;display: flex;align-items: center;flex-direction: row;} .sec9_list .round_list .txt_wrap {width:calc(80% - 40px); position:relative;top:0;left:0;padding-left:0} .round_list .round img{width:40%} .sec9_list .round_list:nth-child(2n) .txt_wrap { text-align: left;right: 0;display: flex;padding-right: 0;align-items: flex-start;} .sec9_list.round_wrap:before {left:calc(10% + 20px)} .sec9_list .dot-left {left:calc(10% + 20px)} .sec9_list .dot-right {left:calc(10% + 20px)} .sec9_list.round_wrap {gap:80px} #bo_list_wrap form #bo_list .list_head li span, #bo_list_wrap form #bo_list .list_con li span {text-align: center;width:100%;} } @media(max-width:650px){ .section_title h3 {font-size:20px;} .circle_wrap {background:none;flex-direction: column;margin-top:20px;margin-bottom:0} .circle_wrap li {width: 70%;aspect-ratio: 1 / 1;display: flex;color: #fff;border-radius: 50%;top:0;} .circle_wrap li:before {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);content: '';background: #2B92D2;width: 100%;aspect-ratio: 1 / 1;border-radius: 50%;opacity: .3;border: 1px solid #00426b;} .circle_wrap li:nth-child(2):before { background: #004F96;} .circle_wrap li:nth-child(1){left:-65px} .circle_wrap li:nth-child(2){left: 65px;top: -37px;} .circle_wrap li:nth-child(3){left: -65px;top: -75px;} .section5 p {font-size:4.3em} } @media(max-width:500px){ .section5 .img_wrap {flex-direction: column;} .section5 .img_wrap img{width:100%} .section5 {background-size: 90%;background-position: center 37%;} .section8 .box_wrap li {background-size: 15%!important;} .section8 .box_wrap li p {font-size:18px;} #bo_list_wrap form #bo_list .list_con {gap:30px 10px;} #bo_list_wrap form #bo_list .list_head li, #bo_list_wrap form #bo_list .list_con li {width: calc(100% / 2 - 5px); } .section8 .box_wrap li {padding:40px 30px} .sec9_list .round_list .txt_wrap p {margin-bottom:10px} .sec9_list .round_list {gap:20px; padding-left:0; align-items: flex-start;} .sec9_list .round_list .round {width:15%; max-width:15%} .sec9_list.round_wrap:before {left:7.5%} .sec9_list .dot-left {left:7.5%} .sec9_list .dot-right {left:7.5%} .sec9_list.round_wrap {gap:30px} }