@charset "utf-8"; 



.main .layout { max-width:1400px; } .section { position: relative; } /* 메인팝업 */.main_pop { position: absolute; right:0; bottom:0; width:54rem; z-index: 1; transition: all .5s; } .main_pop .main_pop_tit { display: flex; justify-content: space-between; align-items: center; position: relative; height: 5.5rem; padding : 0 3rem; background : rgba(63,88, 121, 80%); border-top-left-radius:2.4rem; } .main_pop .main_pop_tit .main_pop_btn { display: flex; justify-content: center; align-items: center; position: absolute; top:0; right:0; width:5.5rem; height: 5.5rem; background: #3F5879; } .main_pop .main_pop_tit .main_pop_btn i { color:#fff; font-size:2rem; transition: all .5s; flex-shrink: 0; } .main_pop .main_pop_tit strong { transition: all .5s; } .main_pop .main_pop_tit strong i { margin-right:1rem; color:#fff; font-size:2rem; } .main_pop .main_pop_tit strong em { color:#FFFFFF; font-weight: 800; font-size:2rem; } .main_pop .main_pop_tit strong span { color:#fff; font-weight: 400; font-size: 1.8rem; opacity: .8; } .main_pop .main_pop_banner { position: relative; height:28rem; } .main_pop .main_pop_banner div { height: 100%; } .main_pop .main_pop_banner .mpb_wrap .mpb_slide .swiper-slide a { display: block; height: 100%; } .main_pop .main_pop_banner .mpb_wrap .mpb_slide .swiper-slide a:after { display: none; } .main_pop .main_pop_banner .mpb_wrap .mpb_slide .swiper-slide a img { width:100%; height: 100%; object-fit: cover; } .main_pop .main_pop_control { display: flex; justify-content: space-between; align-items: center; position: absolute; right:7rem; bottom:0; height: 5.5rem; z-index: 1; } .main_pop .main_pop_control .main_pop_arr { display: flex; align-items: center; position: relative; } .main_pop .main_pop_control .main_pop_arr button i { color:#fff; font-size:1.8rem; } .main_pop .main_pop_control .main_pop_arr .play_btn { display: flex; align-items: center; margin:0 1rem; } .main_pop .main_pop_control .main_pop_arr .play_btn button.play { display: none; } .main_pop .main_pop_control .main_pop_arr .play_btn button.stop { display: none; } .main_pop .main_pop_control .main_pop_arr .play_btn button.play.on { display: inline-block; } .main_pop .main_pop_control .main_pop_arr .play_btn button.stop.on { display: inline-block; } /* 메인팝업 on */.main_pop.on .main_pop_tit .main_pop_btn { margin-left:1rem; } .main_pop.on .main_pop_tit .main_pop_btn i { transform: rotate(180deg); } /* section01 */.section01 { display: flex; align-items: center; height: 63rem; background: url(/images2/main_visual.jpg) no-repeat center center/cover; overflow: hidden; } .section01 .layout { width:100%; } .section01 .layout .visual_tit strong { display: block; color:#fff; font-weight: 200; font-size:5.6rem; line-height: 6.3rem; text-shadow: 0 .3rem .6rem rgba(0,0,0,0.16); } .section01 .layout .visual_tit strong em:first-of-type { background: -webkit-linear-gradient(30deg, #72A1FF 0%, #AAE5FF 60%, #A5CFFF 100%); font-weight: 600; font-size:5.6rem; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; } .section01 .layout .visual_tit strong em:last-of-type { background: -webkit-linear-gradient(100deg, #5498FF 0%, #AAE5FF 60%, #A5D5FF 100%); font-weight: 600; font-size:5.6rem; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; } .section01 .layout .visual_tit strong span { font-weight: 600; } .section01 .layout .visual_tit p { margin-top:1.5rem; color:#fff; font-weight: 400; font-size:2.2rem; } .section01 .layout .visual_tit p span { font-weight: 700; } /* section02 */.section02 { position: relative; padding:8.8rem 0 11.1rem 0; } .section02:before { position: absolute; top:2.8rem; left:0; width:38.2rem; height: 23.6rem; background: url(/images/section02_before.png) no-repeat center center/cover; content:""; } .section02 .layout { position: relative; } .section02 .layout .quick_menu { display: flex; } .section02 .layout .quick_menu .quick_menu_tit { display: flex; flex-direction: column; margin-right: 9.8rem; flex-shrink: 0; } .section02 .layout .quick_menu .quick_menu_tit span { display: block; margin-bottom:1.6rem; color:#f91e09; font-weight: 800; font-size:1.6rem; line-height: 1; } .section02 .layout .quick_menu .quick_menu_tit strong { display: block; color:#222222; font-weight: 700; font-size:4rem; line-height: 1; } .section02 .layout .quick_menu .quick_menu_list { width:100%; } .section02 .layout .quick_menu .quick_menu_list ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .section02 .layout .quick_menu .quick_menu_list ul li { display: flex; justify-content: center; } .section02 .layout .quick_menu .quick_menu_list ul li a { display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: center; } .section02 .layout .quick_menu .quick_menu_list ul li a[target="_blank"]:after { display: none; } .section02 .layout .quick_menu .quick_menu_list ul li a .icon { display: flex; justify-content: center; align-items: center; position: relative; width:8.8rem; height: 8.8rem; border-radius: 1.6rem; background: #F5F7FB; overflow: hidden; } .section02 .layout .quick_menu .quick_menu_list ul li a:hover .icon { background: linear-gradient( 45deg, #54DCFF, #3E7FFF ); box-shadow: .2rem .5rem 2rem rgba(84, 141, 255, 20%); } .section02 .layout .quick_menu .quick_menu_list ul li a:hover .icon:before { position: absolute; top:50%; left:50%; width:8.4rem; height: 8.4rem; border-radius: 1.4rem; background: #fff; content:""; transform: translate(-50%, -50%); overflow: hidden; } .section02 .layout .quick_menu .quick_menu_list ul li a .icon img { position: relative; width:4rem; } .section02 .layout .quick_menu .quick_menu_list ul li a em { display: block; margin-top: 2rem; color:#222222; font-weight: 500; font-size: 1.8rem; line-height: 2.3rem; text-align: center; } .section02 .layout .quick_menu .quick_menu_list ul li a:hover em { font-weight: 700; } /* section03 */.section03 { padding:12rem 0 0 0; background:linear-gradient(to bottom, #EEF3FE, #fff); overflow: hidden; } .section03 .layout .introduction .introduction_tit { text-align: center; } .section03 .layout .introduction .introduction_tit .sm_tit { display: block; margin-bottom:2.4rem; color:#f91e09; font-weight: 800; font-size: 1.6rem; line-height: 1;  } .section03 .layout .introduction .introduction_tit .tit { display: block; margin-bottom:6rem; color:#222; font-weight:700; font-size: 4rem; line-height: 5.3rem; } .section03 .layout .introduction .introduction_tit .tit span { display: block; font-size: 3.2rem; line-height: 4.2rem; } .section03 .layout .introduction .introduction_tit .tit em { color:#f91e09; } .section03 .layout .introduction .introduction_more { display: flex; margin:0 -3.6rem; margin-top:6rem; margin-bottom:14rem; } .section03 .layout .introduction .introduction_more .box { width:calc(50% - 7.2rem); padding:7rem 5rem; margin:0 3.6rem; } .section03 .layout .introduction .introduction_more .box:first-of-type { background: url(/images2/introduction_more_bg01.jpg) no-repeat center center/cover; } .section03 .layout .introduction .introduction_more .box:nth-of-type(2) { background: url(/images2/introduction_more_bg02.jpg) no-repeat center center/cover; } .section03 .layout .introduction .introduction_more .box strong { display: block; margin-bottom:2.4rem; color:#FFFFFF; font-weight: 700; font-size:2.8rem; line-height: 3.5rem; } .section03 .layout .introduction .introduction_more .box p { color:#D7DFEB; font-weight: 500; font-size:1.8rem; line-height: 2.9rem; } .section03 .layout .introduction .introduction_more .box em { display: flex; justify-content: center; align-items: center; width:15.1rem; height: 4.8rem; padding:0 2.4rem; margin-top:6rem; border:1px solid #FFFFFF; border-radius: 2.6rem; transition: all .3s; } .section03 .layout .introduction .introduction_more .box em span { color:#fff; font-weight: 400; font-size:1.6rem; } .section03 .layout .introduction .introduction_more .box em i { margin-left:.8rem; color:#fff; font-weight: 400; font-size:1.8rem; } .section03 .layout .introduction .introduction_more .box:hover em { background: #fff; } .section03 .layout .introduction .introduction_more .box:hover em span { color:#222222; } .section03 .layout .introduction .introduction_more .box:hover em i { color:#f91e09; } .section03 .layout .introduction .introduction_product { display: flex; align-items: center; position: relative; height: 73.5rem; margin-top:14rem; } .section03 .layout .introduction .introduction_product:before { display: block; position: absolute; top:0; left:-18rem; width:calc(100vw + 18rem); height: 100%; border-radius: 6rem 0 0 6rem; background: url(/images2/introduction_product_bg.jpg) no-repeat center center/cover; content:""; overflow: hidden; } .section03 .layout .introduction .introduction_product .introduction_product_tit { position: relative; margin-right: 14.2rem; flex-shrink: 0; transform: translateY(-2rem); } .section03 .layout .introduction .introduction_product .introduction_product_tit span { display: block; margin-bottom:1.6rem; color:#BCD3FF; font-weight: 800; font-size:1.6rem; line-height: 2rem;  } .section03 .layout .introduction .introduction_product .introduction_product_tit strong { display: block; margin-bottom:2.4rem; color:#FFFFFF; font-weight: 700; font-size:4rem; line-height: 5rem; } .section03 .layout .introduction .introduction_product .introduction_product_tit p { color:#D5DFF2; font-weight: 400; font-size:1.8rem; line-height: 2.9rem; } .section03 .layout .introduction .introduction_product_slide_wrap { width:100%; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box { height: auto; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box.on a { height: 40rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box.on a span { visibility: visible; opacity: 1; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a { display: block; display: flex; flex-direction: column; justify-content: flex-end; position: relative; height: 31.5rem; padding:4rem; transition: all .5s; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a[target="_blank"]:after { display: none; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide { align-items: flex-end; height: 40rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a img { display: block; position: absolute; top:0; left:0; width:100%; height: 100%; z-index: -1; object-fit: cover; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a strong { display: block; color:#fff; font-weight: 700; font-size:2.4rem;  } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a:hover { height: 40rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a span { display: flex; justify-content: center; align-items: center; width:3.2rem; height: 3.2rem; margin-bottom:1.6rem; border-radius:50%; background: #f91e09; color:#fff; visibility: hidden; opacity: 0; transition: all .5s; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a span i { font-weight: 400; font-size:1.6rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a:hover span { visibility: visible; opacity: 1; } .section03 .layout .introduction .introduction_sl_control { position: absolute; bottom:16rem; left:0; width:8.8rem; } .section03 .layout .introduction .introduction_sl_control button { width:4rem; height: 4rem; margin-left:.4rem; border:1px solid #fff; border-radius: 50%; } .section03 .layout .introduction .introduction_sl_control button:first-of-type { margin-left:0; } .section03 .layout .introduction .introduction_sl_control button i { color:#fff; font-size:1.8rem; } 

/* section04 */
.section04 { position: relative; padding:12rem 0 16rem 0; } .section04:before { position: absolute; top:0; right:0; width:81.8rem; height: 42.4rem; background: url(/images/section04_before.png) no-repeat center center/cover; content:""; } 
.section04 .layout .support .support_tit { text-align: center; } 
.section04 .layout .support .support_tit .sm_tit { display: block; margin-bottom:2.4rem; color:#f91e09; font-weight: 800; font-size: 1.6rem; line-height: 1;  } 


.section04 .layout .support .support_tit .tit { display: block; margin-bottom:6rem; color:#222; font-weight:700; font-size: 4rem; line-height: 5.3rem; } 

.section04 .layout .support .support_tit .tit span { display: block; font-size: 3.2rem; line-height: 4.2rem; } .section04 .layout .support .support_tit .tit em { color:#f91e09; } 

.section04 .layout .support .support_more { display: flex; margin-top:6rem; flex-wrap: wrap; } .section04 .layout .support .support_more a { display: flex; flex-direction: column; justify-content: center; position: relative; width:50%; height: 24rem; padding:0 7.2rem; } 

.section04 .layout .support .support_more a:before { display: block; position: absolute; top:0; left:0; width:100%; content:""; } 

.section04 .layout .support .support_more a:first-of-type { background: url(/images/img_online.jpg) no-repeat center center/cover; } 

.section04 .layout .support .support_more a:nth-of-type(2) { background: url(/images/img_list.jpg) no-repeat center center/cover; } 

.section04 .layout .support .support_more a .icon { display: block; width:4rem; margin-bottom:1.6rem; } 

.section04 .layout .support .support_more a strong { display: block; margin-bottom:.8rem; color:#fff; font-weight: 700; font-size:2.4rem; } 

.section04 .layout .support .support_more a p { color:#D5DFF2; font-weight: 400; font-size:1.8rem;  } 
.section04 .layout .support .support_more a i { display: flex; justify-content: center; align-items: center; position: absolute; top:50%; right:7.2rem; width:4rem; height: 4rem; border:1px solid #fff; border-radius: 50%; color:#fff; font-size:1.8rem; flex-shrink: 0; transform: translateY(-50%); transition: all .3s; } 
.section04 .layout .support .support_more a:hover i { background: #fff; color:#222222; }




/* section05 */.section05 { padding:9rem 0 9.8rem 0; background: url(/images2/section05_bg.jpg) no-repeat center center/cover; } .section05 .layout .counseling { display: flex; justify-content: space-between; align-items: center; } .section05 .layout .counseling .counseling_tit { display: flex; flex-direction: column; flex-shrink: 0; } .section05 .layout .counseling .counseling_tit span { display: block; margin-bottom:2.4rem; color:#f91e09; font-weight: 800; font-size:1.6rem; line-height: 1; } .section05 .layout .counseling .counseling_tit strong { display: block; color:#222222; font-weight: 700; font-size:3.2rem; line-height: 4rem; } .section05 .layout .counseling .counseling_more { display: flex; width:72rem; margin:0 -2rem; } .section05 .layout .counseling .counseling_more a { display: flex; justify-content: space-around; align-items: center; width:calc(50% - 4rem); height: 10.4rem; padding:2rem 2.4rem; margin:0 2rem; border-radius: .8rem; overflow: hidden; } .section05 .layout .counseling .counseling_more a:hover>i { animation: btn_arr .6s linear infinite; } .section05 .layout .counseling .counseling_more a:first-of-type { background:#f91e09; } .section05 .layout .counseling .counseling_more a:nth-of-type(2) { background:#5D6E9A; } .section05 .layout .counseling .counseling_more a .icon { display: flex; justify-content: center; align-items: center; width:6.4rem; height: 6.4rem; border-radius: 50%; flex-shrink: 0; } .section05 .layout .counseling .counseling_more a:first-of-type .icon { background:#4479E5; } .section05 .layout .counseling .counseling_more a:nth-of-type(2) .icon { background:#435174; } .section05 .layout .counseling .counseling_more a .icon i { color:#fff; font-size:2.2rem; } .section05 .layout .counseling .counseling_more a strong { color:#fff; font-weight: 700; font-size:2rem; } .section05 .layout .counseling .counseling_more a .more { color:#fff; font-size: 2.2rem; } /* section06 */.section06 {  } .section06 .layout .news { display: flex; } .section06 .layout .news .news_tit { display: flex; flex-direction: column; margin-right: 9.8rem; margin-right: 14rem; flex-shrink: 0; } .section06 .layout .news .news_tit span { display: block; margin-bottom:1.6rem; color:#f91e09; font-weight: 800; font-size:1.6rem; line-height: 1; } .section06 .layout .news .news_tit strong { display: block; color:#222222; font-weight: 700; font-size:4rem; line-height: 5rem; } .section06 .layout .news .news_list_wrap { position: relative; width:calc(100% - 28rem); } .section06 .layout .news .news_list_wrap .news_menu_btn { display: flex; justify-content: center; align-items: center; position: absolute; width:11.3rem; height: 4.8rem; border-radius: 2.4rem; background: #F4F6FB; overflow: hidden; } .section06 .layout .news .news_list_wrap .news_menu_btn:before { display: block; position: absolute; top:0; left:50%; width:0; height: 100%; background:#222222; content:""; transform: translateX(-50%); opacity: 0; transition: all .3s; } .section06 .layout .news .news_list_wrap .news_menu_btn span { position: relative; color:#77829A; font-weight:500; font-size:1.8rem;  } .section06 .layout .news .news_list_wrap .news_menu_btn.on:before { width:100%; opacity: 1; } .section06 .layout .news .news_list_wrap .news_menu_btn.on span { color:#fff; font-weight: 700; } .section06 .layout .news .news_list_wrap .news_menu_btn#news01 { top:10rem; left:-28rem; } .section06 .layout .news .news_list_wrap .news_menu_btn#news02 { top:16rem; left:-28rem; } .section06 .layout .news .news_list_wrap .news_list { display: none; position: relative; border-top:1px solid #222222; } .section06 .layout .news .news_list_wrap .news_list .more { display: flex; align-items: center; position: absolute; top:-4rem; right:0; } .section06 .layout .news .news_list_wrap .news_list .more span { color:#222; font-weight: 700; font-size:1.6rem;  } .section06 .layout .news .news_list_wrap .news_list .more i { margin-right:.6rem; color:#222; font-size: 2rem; transition: all .5s; } .section06 .layout .news .news_list_wrap .news_list .more:hover i { transform: rotate(180deg); } .section06 .layout .news .news_list_wrap .news_list:first-of-type { display: block; } .section06 .layout .news .news_list_wrap .news_list .inner a { display: flex; align-items: center; position: relative; height: 13.9rem; padding:0 3.5rem; border-bottom:1px solid #D4D8DE; } .section06 .layout .news .news_list_wrap .news_list .inner a .day { display: flex; flex-direction: column; justify-content: center; position: absolute; top:50%; left:3.5rem; text-align: center; transform: translateY(-50%); } .section06 .layout .news .news_list_wrap .news_list .inner a .day em { font-weight: 500; font-size:1.6rem;  } .section06 .layout .news .news_list_wrap .news_list .inner a .day span { display: block; color:#222222; font-weight: 800; font-size:4.5rem; line-height: 1; } .section06 .layout .news .news_list_wrap .news_list .inner a .inner { width:100%; padding:0 6rem 0 15rem; } .section06 .layout .news .news_list_wrap .news_list .inner a .inner span { display: block; margin-bottom:1.6rem; color:#f91e09; font-weight: 500; font-size:1.8rem; line-height: 2.7rem;  } .section06 .layout .news .news_list_wrap .news_list .inner a .inner strong { display: block; color:#222; font-weight: 700; font-size:2.2rem; line-height: 3.2rem;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section06 .layout .news .news_list_wrap .news_list .inner a i { display: flex; justify-content: center; align-items: center; position: absolute; top:50%; right:3.5rem; width:4rem; height: 4rem; border-radius: 50%; background: #F8F8F8; color:#ACACAC; font-size:2rem; transition: all .3s; transform: translateY(-50%); } .section06 .layout .news .news_list_wrap .news_list .inner a:hover i { background: #f91e09; color:#fff; } .section06 .layout .announcement { display: flex; position: relative; margin-top:14rem; } .section06 .layout .announcement .announcement_tit { display: flex; flex-direction: column; margin-right: 14rem; flex-shrink: 0; } .section06 .layout .announcement .announcement_tit span { display: block; margin-bottom:1.6rem; color:#f91e09; font-weight: 800; font-size:1.6rem; line-height: 1; } .section06 .layout .announcement .announcement_tit strong { display: block; color:#222222; font-weight: 700; font-size:4rem; line-height: 5rem; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide { height: auto; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box { display: flex; flex-direction: column; position: relative; padding:5rem; border-radius: .8rem;height:auto; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:after { display: none; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:before { display: block; position: absolute; right:0; bottom:0; width:29.9rem; height: 13.6rem; z-index: -1; content:""; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:first-of-type { background: #DFEAFF; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(2) { background: #E8F6FB; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(3) { background: #E9F2FF; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(4) { background: #F5F5FF; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(5) { background: #FFF8EC; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(6) { background: #FFF3F1; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:first-of-type:before { background: url(/images/menu01.png) no-repeat center center/cover; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(2):before { background: url(/images/menu01.png) no-repeat center center/cover; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(3):before { background: url(/images/menu01.png) no-repeat center center/cover; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(4):before { background: url(/images/menu01.png) no-repeat center center/cover; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(5):before { background: url(/images/menu01.png) no-repeat center center/cover; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(6):before { background: url(/images/menu01.png) no-repeat center center/cover; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box strong { color:#48546E; font-weight: 700; font-size:3.2rem; line-height: 4.6rem; margin-bottom:.8rem; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box strong span { color:#2753AA; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:first-of-type strong span { color:#14377D; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(2) strong span { color:#0089AC; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(3) strong span { color:#5481DC; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(4) strong span { color:#4B4BD1; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(5) strong span { color:#D29C33; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:nth-of-type(6) strong span { color:#C21212; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box p { margin:.8rem 0 2.9rem 0; color:#4A505D; font-weight: 500; font-size:1.8rem;  } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box em { display: flex; justify-content: center; align-items: center; width:13.7rem; height: 4rem; margin-top:auto; border:1px solid #FFFFFF; border-radius: 2.6rem; background: #272727; transition: all .3s; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box em span { color:#fff; font-weight: 400; font-size:1.6rem; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box em i { margin-left:.8rem; color:#fff; font-weight: 400; font-size:1.8rem; } .section06 .layout .announcement .announcement_sl_control { display: flex; position: absolute; bottom:3.5rem; left:0; } .section06 .layout .announcement .announcement_slide_wrap .announcement_slide .box:hover em i { animation: btn_arr .6s linear infinite; } .section06 .layout .announcement .announcement_sl_control button { display: flex; justify-content: center; align-items: center; width:4rem; height: 4rem; margin-left:.8rem; border:1px solid #E2E7EF; border-radius: 50%; } .section06 .layout .announcement .announcement_sl_control button:first-of-type { margin-left:0; } .section06 .layout .announcement .announcement_sl_control button i { color:#222222; font-size:1.8rem; } .section06 .layout .announcement .announcement_slide_wrap .announcement_sl_dots { display: flex; justify-content: center; margin-top:2.4rem; } .section06 .layout .announcement .announcement_slide_wrap .announcement_sl_dots span { width:.8rem; height: .8rem; margin:0 .4rem; border:1px solid #C5C9CF; border-radius: 50%; background: #fff; opacity: 1; } .section06 .layout .announcement .announcement_slide_wrap .announcement_sl_dots span.swiper-pagination-bullet-active { background: #222; border-color:#222; } @keyframes btn_arr {  0% { transform: translateX(0); }  50% { transform: translateX(1rem); }  100% { transform: translateX(0); }  }/* 반응형 */@media (max-width:1760px) {.section02:before { display: none; } .section03 .layout .introduction .introduction_product:before { left:50%; width:100vw; transform: translateX(-50%); }  }@media (max-width:1400px) {.section03 .layout .introduction .introduction_product { padding:0 3rem; } .section03 .layout .introduction .introduction_product:before { left: 0; width: calc(100% + 2rem); transform: none; } .section03 .layout .introduction .introduction_sl_control { left:3rem; } .section04:before { display: none; }  }@media (max-width:1280px) {.section05 .layout .counseling .counseling_tit { margin-right: 2rem; } .section05 .layout .counseling .counseling_more { flex-direction: column; width:36rem; margin:0; } .section05 .layout .counseling .counseling_more a { width:100%; margin:2rem 0 0 0; }  }@media (max-width:1024px) {.section02 .layout .quick_menu .quick_menu_tit { margin-right: 6rem; } .section02 .layout .quick_menu .quick_menu_list ul { margin:-2rem 0 0 0; } .section02 .layout .quick_menu .quick_menu_list ul li { width:25%; margin:2rem 0 0 0; } .section03 .layout .introduction .introduction_more { margin:0 -2rem; } .section03 .layout .introduction .introduction_more .box { width:calc(50% - 4rem); margin:0 2rem; } .section03 .layout .introduction .introduction_product .introduction_product_tit { margin-right: 10rem; } .section06 .layout .announcement { display: block; } .section06 .layout .announcement .announcement_tit { margin: 0 0 4rem 0; } .section06 .layout .announcement .announcement_sl_control { top:3.7rem; right:0; bottom:auto; left:auto; }  }@media (max-width:840px) {.section01 { height: 77rem; } .section01 .layout .visual .visual_tit { transform: translateY(-12rem); }  }@media (max-width:767px) {.section02 .layout .quick_menu { flex-direction: column; } .section02 .layout .quick_menu .quick_menu_tit { margin:0 0 4rem 0; } .section03 .layout .introduction .introduction_product .introduction_product_tit { margin-right: 8rem; transform: translateY(-5.5rem); } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide { height: auto; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a { height: 40rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a:hover { height: 40rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box.on a { height: 40rem; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a span { opacity: 1; visibility: visible; } .section03 .layout .introduction .introduction_more { flex-direction: column; margin:0; } .section03 .layout .introduction .introduction_more .box { width:100%; margin:2rem 0 0 0; } .section03 .layout .introduction .introduction_more .box:first-of-type { margin-top:0; } .section03 .layout .introduction .introduction_sl_control { bottom:22rem; } .section04 .layout .support .support_more a { width:100%; padding:0 3rem; } .section04 .layout .support .support_more a i { display: none; } .section05 .layout .counseling { flex-direction: column; align-items: flex-start; } .section05 .layout .counseling .counseling_more { flex-direction: row; width:100%; margin:4rem -1rem 0 -1rem; } .section05 .layout .counseling .counseling_more a { margin:0 1rem; } .section06 .layout .news { flex-direction: column; } .section06 .layout .news .news_list_wrap { width:100%; margin-top:2rem; } .section06 .layout .news .news_list_wrap .news_menu_btn#news01 { top: -7rem; right: 12rem; left:auto; } .section06 .layout .news .news_list_wrap .news_menu_btn#news02 { top: -7rem; right: 0; left:auto; } .section06 .layout .news .news_list_wrap .news_list .more { display: none; } .section06 .layout .news .news_list_wrap .news_list .inner a .inner { padding:0 6rem 0 10rem; }  }@media (max-width:640px) {.section01 { height: 585px; } .section01 { background: url(/images2/main_visual_mo.jpg) no-repeat center center/cover; } .section01 .layout .visual_tit strong { font-size:4.5rem; } .section01 .layout .visual_tit strong em { font-size:4.5rem !important; } .section02 .layout .quick_menu .quick_menu_list ul { justify-content: flex-start; width: calc(100% + 60px); margin:-36px 0 0 0; transform: translateX(-30px); } .section02 .layout .quick_menu .quick_menu_list ul li { width:33.333%; margin:36px 0 0 0; } .section02 .layout .quick_menu .quick_menu_list ul li a em { font-size:2rem; } .section02 .layout .quick_menu .quick_menu_list ul li a .icon { width:72px; height: 72px; border-radius: 16px; } .section02 .layout .quick_menu .quick_menu_list ul li a .icon img { width:32px; height: 32px; } .section02 .layout .quick_menu .quick_menu_list ul li a:hover .icon:before { width:68px; height: 68px; border-radius: 16px; } .section03 .layout .introduction .introduction_product { flex-direction: column; justify-content: center; align-items: flex-start; height: auto; padding: 14rem 3rem; } .section03 .layout .introduction .introduction_product:before { width:calc(100% + 3rem); } .section03 .layout .introduction .introduction_product .introduction_product_tit { margin-bottom:4rem; transform: translateY(0); } .section03 .layout .introduction .introduction_product .introduction_product_tit p br { display: none; } .section03 .layout .introduction .introduction_tit .tit { font-size:3.4rem;line-height: 4.4rem; }.section03 .layout .introduction .introduction_tit .tit span { display: inline; font-size: 4rem; } .section03 .layout .introduction .introduction_more .box { display: flex; flex-direction: column; justify-content: center; padding:45px 30px; } .section03 .layout .introduction .introduction_more .box em { width:124px; height: 39px; border-radius: 26px; } .section03 .layout .introduction .introduction_more .box em span { font-size:13px; } .section03 .layout .introduction .introduction_product .introduction_product_tit strong { font-size:32px; } .section03 .layout .introduction .introduction_product .introduction_product_tit p { display:none; } .section03 .layout .introduction .introduction_more .box em i { font-size:15px; } .section03 .layout .introduction .introduction_more .box strong { font-size:22px; } .section03 .layout .introduction .introduction_more .box p { font-size:16px; } .section03 .layout .introduction .introduction_sl_control button { width:42px; height: 42px; } .section03 .layout .introduction .introduction_sl_control { top:10.2rem; right:3rem; bottom:auto; left:auto; width:91px; } .section03 .layout .introduction .introduction_product { padding:6rem 3rem; } .section03 .layout .introduction .introduction_product .introduction_product_tit span { font-size:14px; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a span { width:32px; height: 32px; margin-bottom:10px; } .section03 .layout .introduction .introduction_product_slide_wrap .introduction_product_slide .box a strong { font-size:20px; } .section04 .layout .support .support_tit .tit span { display: inline; font-size:4rem; } .section04 .layout .support .support_more a .icon { width:40px; height: 40px; margin-bottom:20px; } .section04 .layout .support .support_more a strong { margin-bottom:11px; font-size:22px; } .section04 .layout .support .support_more a p { font-size:16px; } .section05 .layout .counseling .counseling_tit { justify-content: center; width:100%; margin-right: 0; } .section05 .layout .counseling .counseling_tit strong { text-align: center; } .section05 .layout .counseling .counseling_tit span { text-align: center; } .section05 .layout .counseling .counseling_more { flex-direction: column; width:100%; margin:4rem auto 0; } .section05 .layout .counseling .counseling_more a { justify-content: flex-start; width:100%; padding:20px 24px; margin:2rem 0 0 0; } .section05 .layout .counseling .counseling_more a:first-of-type { margin-top:0; } .section05 .layout .counseling .counseling_more a .icon { width:40px; height: 40px; margin-right:10px; } .section05 .layout .counseling .counseling_more a .more { margin-left:auto; font-size:22px; } .section05 .layout .counseling .counseling_more a strong { font-size:16px; } .section06 .layout .news .news_tit { margin-right:0; } .section06 .layout .news .news_list_wrap .news_list .inner a .inner { padding:0 0 0 10rem; } .section06 .layout .news .news_list_wrap .news_list .inner a .day span { font-size:32px; } .section06 .layout .news .news_list_wrap .news_list .inner a .day em { font-size:14px; } .section06 .layout .news .news_list_wrap .news_list .inner a .inner span { font-size:14px; } .section06 .layout .news .news_list_wrap .news_list .inner a .inner strong { font-size:16px; } .section06 .layout .news .news_list_wrap .news_list .inner a i { display: none; } .section06 .layout .announcement .announcement_sl_control button { width:42px; height: 42px; } .section06 .layout .announcement .announcement_sl_control button i { font-size:20px; } .section06 .layout .announcement .announcement_sl_control { top:3rem; }  }@media (max-width:420px) {.main_pop { width:100%; } .main_pop .main_pop_tit strong i { font-size:16px; } .main_pop .main_pop_tit strong em { margin-right:10px; font-size:15px; } .main_pop .main_pop_tit strong span { font-size:13px; } .main_pop .main_pop_banner { height: auto; } .section03 .layout .introduction .introduction_more .box p br { display: none; } .section05 .layout .counseling .counseling_more { width:100%; } .section06 .layout .news .news_list_wrap { margin-top:8rem; } .section06 .layout .news .news_list_wrap .news_menu_btn#news01 { right:auto; left:0; } .section06 .layout .news .news_list_wrap .news_menu_btn#news02 { right:auto; left:12.5rem; }  }






/* /html/css/layout.css */
#wrap { position: relative; overflow: hidden; } .layout { position: relative; max-width: 1280px; margin: 0 auto; } body.fix { overflow: hidden; } /* 검정배경 */.blind { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; background: #000; opacity: 0; } body.on .blind { display: block; opacity: 0.5; } body.fix .blind { display: block; opacity: 0.5; } body.active .blind { display: block; opacity: 0.5; } body.pop .blind { display: block; opacity: 0.5; z-index: 11;} /* 헤더 */#header { position: fixed; left:50%; width:100%; z-index: 10; transform: translateX(-50%); } #header .header_wrap { position: relative; max-width:1920px; height: 10.3rem; margin:0 auto; } #header .header_wrap .layout { display: flex; justify-content: space-between; align-items: center; width:100%; max-width:1400px; height: 100%; } #header .logo { width:9.8rem; flex-shrink: 0; } #header .logo a { display: block; } #header .logo a img:last-of-type { display: none; } #header #gnb { width:100%; max-width:1000px; height: 100%; margin:0 auto; } #header #gnb>ul { display: flex; justify-content: space-between; width:100%; height: 100%; } #header #gnb>ul>li { width: 100%; } #header #gnb>ul>li>a { display: flex; justify-content: center; align-items: center; position: relative; height: 100%; } #header #gnb>ul>li>a>span { display: flex; align-items: center; position: relative; height: 100%; color:#fff; font-weight: 700; font-size:1.8rem; } #header #gnb>ul>li>a:hover>span { color:#f91e09 !important; } #header #gnb>ul>li .sub { display: flex; justify-content: center; position: absolute; bottom: 0; left: 50%; width: 100%; transform: translate(-50%, 100%); visibility: hidden; opacity: 0; overflow: hidden; } #header #gnb>ul>li .sub:before { display: block; position: absolute; bottom:-5rem; left:0; width:42.8rem; height: 23.6rem; background:url(/html/images/layout/nav_bg_before.png) no-repeat center center/cover; content:""; opacity: 0; visibility: hidden; transition: all .5s .5s; } #header #gnb>ul>li .sub.on:before { bottom:0; opacity: 1; visibility: visible; } #header #gnb>ul>li .sub.on { visibility: visible; opacity: 1; } #header #gnb>ul>li .sub>.inner { display: flex; width:auto; width:100%; max-width:1400px; padding:5.5rem 0; margin:0 auto; } #header #gnb>ul>li .sub>.inner>ul { display: flex; position: relative; width:100%; margin:-2rem -2rem 0 -2rem; flex-wrap: wrap; transition: all .5s ease-in-out; transform: translateX(-2rem); opacity:0; visibility: hidden; } #header #gnb>ul>li .sub.on>.inner>ul { transform: translateX(0); opacity: 1; visibility: visible; } #header #gnb>ul>li .sub>.inner>ul>li { width:calc(25% - 4rem); margin:2rem 2rem 0 2rem; } #header #gnb>ul>li .sub>.inner>ul>li>a { display: flex; justify-content: space-between; align-items: center; height: 6rem; padding:0 2.4rem; border-radius: .8rem; background: #F9FAFB; } #header #gnb>ul>li .sub>.inner>ul>li>a[target="_blank"] i { display: none; }#header #gnb>ul>li .sub>.inner>ul>li>a[target="_blank"]::after { color:#aaa;font-size:1.6rem; }#header #gnb>ul>li .sub>.inner>ul>li>a>span { color:#3D3D3D; font-weight: 500; font-size:1.8rem; } #header #gnb>ul>li .sub>.inner>ul>li>a>i { color:#AAAAAA; font-size:1.8rem; } #header #gnb>ul>li .sub>.inner>ul>li>a:hover { background: #f91e09; } #header #gnb>ul>li .sub>.inner>ul>li>a:hover>span { color:#fff; } #header #gnb>ul>li .sub>.inner>ul>li>a:hover>i { color:#fff; } #header #gnb>ul>li .sub>.inner>ul>li>a:hover[target="_blank"]::after { color:#fff; }#header #gnb>ul>li .sub>.inner>ul>li>ul { padding:1.6rem 2.4rem; } #header #gnb>ul>li .sub>.inner>ul>li>ul>li { margin-top:1rem; } #header #gnb>ul>li .sub>.inner>ul>li>ul>li>a { position: relative; }#header #gnb>ul>li .sub>.inner>ul>li>ul>li>a>span { color:#9E9E9E; font-weight: 500; font-size:1.6rem;display: block;line-height: 2rem; } #header #gnb>ul>li .sub>.inner>ul>li>ul>li>a[target="_blank"]::after { color:#9E9E9E;font-size:1.4rem; position: absolute;top: 0.35rem;right: 0;}#header #gnb>ul>li .sub>.inner>ul>li>ul>li>a:hover>span { color:#f91e09; } #header #gnb>ul>li .sub>.inner>ul>li>ul>li>a:hover[target="_blank"]::after { color:#f91e09; } #header #gnb>ul>li .sub>.inner>ul>li>ul>li:first-of-type { margin-top:0; } #header #gnb>ul>li .sub>.inner .sub_quick { width:32rem; margin-right:8rem; flex-shrink: 0; transition: all .5s ease-in-out; transform: translateX(2rem); opacity:0; visibility: hidden; } #header #gnb>ul>li .sub.on>.inner .sub_quick { transform: translateX(0); opacity: 1; visibility: visible; } #header #gnb>ul>li .sub>.inner .sub_quick .sub_quick_title { display: flex; flex-direction: column; justify-content: center; position: relative; width:100%; margin-bottom:2.5rem; } #header #gnb>ul>li .sub>.inner .sub_quick .sub_quick_title span { color:#f91e09; font-weight: 500; font-size:1.6rem; } #header #gnb>ul>li .sub>.inner .sub_quick .sub_quick_title strong { display: block; margin-top:.8rem; color:#3D3D3D; font-weight:700; font-size:4rem; } #header .header_btn_wrap { display: flex; align-items: center; flex-shrink: 0; } #header .header_btn_wrap button { display: flex; justify-content: center; align-items: center; line-height: 1; } #header .header_btn_wrap button:first-of-type { margin-left:0; } #header .header_btn_wrap .search i { color:#fff; font-size:2.4rem; } #header .header_btn_wrap .search i:last-of-type { display: none; color:#3D3D3D; font-size:3.5rem; } #header .header_btn_wrap .blank_btn { display: flex; justify-content: center; align-items: center; height: 4rem; padding:0 2.8rem; margin-right:3.2rem; border-radius: 2rem; background: #f91e09; color:#fff; flex-shrink: 0; } #header .header_btn_wrap .blank_btn span { color:#fff; font-size:1.6rem; } #header .header_btn_wrap .blank_btn i { margin-left:.6rem; color:#fff; font-size: 1.8rem; } /* 네비게이션 배경, 점 */#header #gnb .nav_bg { position: absolute; top: 10.3rem; left: 50%; width: 100vw; height: 0; z-index: -1; background: #fff; transition: all .3s; transform: translateX(-50%); box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 4%); } #header #gnb .nav_dot { position: absolute; bottom: -.45rem; width:.9rem; height: .9rem; z-index: 1; background-color: #f91e09; content: ""; opacity: 0; transition: all .3s; transform: translateX(-50%); animation: rotatedot 1s linear infinite; } #header #gnb .nav_dot.on { opacity: 1; } @keyframes rotatedot {     100% { transform: translateX(-50%) rotate(360deg); } }/* 검색박스 */.search_wrap { position: absolute; top:10.3rem; left:50%; width:0; z-index: 4; padding:8rem 0; background: #fff; opacity: 0; visibility: hidden; transform: translateX(-50%); overflow: hidden; transition: all .5s; } .search_wrap.on { width:100%; opacity: 1; visibility: visible; } .search_wrap.on:before { bottom:0; opacity: 1; visibility: visible; transition: all .5s 1s; } .search_wrap .layout strong { display: block; margin-bottom:2.9rem; color:#f91e09; font-weight: 800; font-size: 3.2rem; font-family: "OUTFIT"; text-align: center; opacity: .7; opacity: 0; visibility: hidden; transform: translateY(-3rem); } .search_wrap.on .layout strong { transform: translateY(0); opacity: 1; visibility: visible; transition: all 1s .5s; } .search_wrap .layout .search_input { display: flex; max-width:63.5rem; margin:0 auto; opacity: 0; visibility: hidden; transform: translateY(3rem); } .search_wrap.on .layout .search_input { transform: translateY(0); opacity: 1; visibility: visible; transition: all 1s .5s; } .search_wrap .layout .search_input .input_box { width:100%; margin-right: 1.6rem; } .search_wrap .layout .search_input .input_box .reset { top:2.4rem !important; } .search_wrap .layout .search_input .input_box input { height: 6rem; border-radius: .4rem; border-color:#E3E3E3; } .search_wrap .layout .search_input .input_box input::placeholder { font-style: normal; }.search_wrap .layout .search_input>button { display: flex; justify-content: center; align-items: center; width:13rem; height: 6rem; border-radius: .4rem; background: #f91e09; flex-shrink: 0; } .search_wrap .layout .search_input>button span { margin-right: 1rem; color:#fff; font-weight: 700; font-size:2rem; } .search_wrap .layout .search_input>button i { color:#fff; font-size:2.2rem; } body.scrolled .search_wrap { position: fixed; } /* 헤더 호버 */body.hover #header { background: #fff !important; } body.hover #header:before { position: absolute; bottom:0; left:0; width:100%; height: 1px; content:""; border-bottom:1px solid #e3e3e3; } body.hover #header #gnb>ul>li>a>span { color:#3D3D3D; } body.hover #header #gnb>ul>li.active>a>span { color:#f91e09; }body.hover #header .logo a img:first-of-type { display: none !important; } body.hover #header .logo a img:last-of-type { display: block !important; } body.hover #header .header_btn_wrap .search { display: flex; } body.hover #header .header_btn_wrap .search i { color:#3d3d3d; } body.hover #header .all_menu .bar { background-color:#3D3D3D; } body.hover.active #header { background: #fff; } body.hover.active #header .all_menu .bar { background: #3d3d3d; } body.hover.active #header .header_btn_wrap .search i { color:#3D3D3D; } body.hover.active #header .header_btn_wrap .search i:first-of-type { display: none; } body.hover.active #header .header_btn_wrap .search i:last-of-type { display: block; } body.hover.scrolled #header .all_menu .bar { background: #3d3d3d; } body.hover.scrolled #header .header_btn_wrap .search i { color:#3D3D3D; } body.hover.fix #header:before { display: none; } body.sub #header { transition: none; } /* 전체메뉴 버튼 */#header .all_menu { position: relative; width: 2.4rem; height: 2rem; margin-left: 3.2rem; font-size: 0; overflow: hidden; } #header .all_menu .bar { display: inline-block; position: absolute; left: 50%; width: 100%; height: 2px; background-color: #fff; transform: translateX(-50%); transition: .3s; } #header .all_menu .bar:nth-child(1) { top: 0; } #header .all_menu .bar:nth-child(2) { top: calc(50% - .1rem); left:60%; width:80%; } #header .all_menu .bar:nth-child(3) { bottom: 0; } #header .all_menu.on .bar:nth-child(1) { top: calc(50% - .1rem); transform: translateX(-50%) rotate(45deg); } #header .all_menu.on .bar:nth-child(2) { left:70%; transform: translateX(50%); } #header .all_menu.on .bar:nth-child(3) { bottom: calc(50% - .1rem); transform: translateX(-50%) rotate(-45deg); } /* 서브 레이아웃 */.sub_visual { display: flex; justify-content: center; align-items: center; position: relative; height: 52rem; } .sub_visual .bg { position: absolute; top:0; left:0; width:100%; height: 100%; overflow: hidden; } .sub_visual .bg:before { display: block; width:100%; height: 100%; content:""; transform: scale(1.2); transition: all 2s; } .sub_visual.on .bg:before { transform: scale(1); opacity: 1; } .sub_visual.vs01 .bg:before { background: url(/html/images/layout/sub_visual01.jpg) no-repeat center center/cover; } .sub_visual.vs02 .bg:before { background: url(/html/images/layout/sub_visual02.jpg) no-repeat center center/cover; } .sub_visual.vs03 .bg:before { background: url(/html/images/layout/sub_visual03.jpg) no-repeat center center/cover; } .sub_visual.vs04 .bg:before { background: url(/html/images/layout/sub_visual04.jpg) no-repeat center center/cover; } .sub_visual.vs05 .bg:before { background: url(/html/images/layout/sub_visual05.jpg) no-repeat center center/cover; } .sub_visual.vs06 .bg:before { background: url(/html/images/layout/sub_visual06.jpg) no-repeat center center/cover; } .sub_visual.vs07 .bg:before { background: url(/html/images/layout/sub_visual07.jpg) no-repeat center center/cover; } .sub_visual>.layout { display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height: 100%; } .sub_visual>.layout>span { display: block; margin:4.5rem 0 1rem 0; color:#7EA9FF; font-weight: 800; font-size:1.5rem; line-height: 1;  opacity: 0; transform: translateY(-2rem); transition: all .5s .3s; } .sub_visual>.layout>h2 { color: #fff; font-weight: 500; font-size: 4.8rem; line-height: 1; opacity: 0; transform: translateY(2rem); transition: all .5s .3s; } .sub_visual.on>.layout>span { transform: translateY(0); opacity: 1; } .sub_visual.on>.layout>h2 { transform: translateY(0); opacity: 1; } /* 서브바 */.snb { position: absolute; position: absolute; bottom:0; left:0; width:100%; } .snb .layout { display: flex; justify-content: space-between; } .snb:before { display: block; position: absolute; top:0; left:0; width:100%; height: 100%; content:""; border-width: 1px 0 0 0; border-color:#fff; opacity: .2; border-style: solid; } .snb .layout .snb_wrap { display: flex; align-items: center; } .snb .layout .snb_wrap>a, .snb .snb_wrap>div>button { display: flex; justify-content: center; align-items: center; position: relative; height: 5.8rem; } .snb .layout .snb_wrap>a { width:6.5rem;flex-shrink: 0; } .snb .layout .snb_wrap>a:before { position: absolute; top:0; right:0; width:100%; height: 100%; content:""; border-width:0 1px 0 1px; opacity: .4; border-color:#fff; border-style: solid; } .snb .layout .snb_wrap>a i { color: #fff; font-size:1.8rem; } .snb .layout .snb_wrap .snb_select { position: relative; max-width: 30rem; min-width: 24rem; } .snb .layout .snb_wrap .snb_select:before { position: absolute; top:0; right:0; right:0; width:1px; height: 100%; content:""; border-left:1px solid #fff; opacity: .4; } .snb .layout .snb_wrap .snb_select .select_active { justify-content: flex-start; justify-content: space-between; position: relative; width: 100%; min-width: 22rem; padding:0 2.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snb .layout .snb_wrap .snb_select .select_active span { color: #fff; font-weight: 500; font-size: 1.7rem; } .snb .layout .snb_wrap .snb_select .select_active.exists_list::before { position: absolute; top: 50%; right: 1.4rem; color: #fff; font-size: 1.8rem; font-family: 'remixicon'; content: "\ea4d"; transform: translateY(-50%); transition: .24s; } .snb .layout .snb_wrap .snb_select .select_active.exists_list.on::before { transform: translateY(-50%) rotate(180deg); } .snb .layout .snb_wrap .select_list { display: none; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; padding:2rem 2.5rem; transform: translateY(100%); box-shadow: .2rem .5rem 2rem rgba(84, 141, 255, 16%); } .snb .layout .snb_wrap .select_list:before { display: block; position: absolute; top:0; left:0; width:100%; height: 100%; border:1px solid #D2E4FF; background:#fff; content:""; } .snb .layout .snb_wrap .select_list>li { position: relative; margin-top:.75rem; } .snb .layout .snb_wrap .select_list>li:first-of-type { margin-top:0; }.snb .layout .snb_wrap .select_list>li>a { display: flex; justify-content: space-between; align-items: center; } .snb .layout .snb_wrap .select_list>li>a>span { display: block; color:#222; font-weight: 400; font-size: 1.7rem; } .snb .layout .snb_wrap .select_list>li>a:hover>span { color:#f91e09; text-decoration: underline; } .snb .layout .snb_screen { display: flex; } .snb .layout .snb_screen .text_size { display: flex; align-items: center; position: relative; height: 5.8rem; padding:2rem; } .snb .layout .snb_screen .text_size:before { position: absolute; top:0; left:0; width:100%; height: 100%; content:""; border-width:0 1px 0 1px; opacity: .4; border-color:#fff; border-style: solid; } .snb .layout .snb_screen .text_size>span { position: relative; margin-right: 1rem; color:#fff; font-weight: 400; font-size:1.7rem; } .snb .layout .snb_screen .text_size .text_size_btn { position: relative; } .snb .layout .snb_screen .text_size .text_size_btn button { width:2.2rem; height: 2.2rem; border-radius: .2rem; background: #222222; } .snb .layout .snb_screen .text_size .text_size_btn button i { color:#fff; font-size:1.7rem; } .snb .layout .snb_screen .print_btn { position: relative; } .snb .layout .snb_screen .print_btn:before { position: absolute; top:0; right:0; width:1px; height: 100%; content:""; border-width:0 1px 0 0; opacity: .4; border-color:#fff; border-style: solid; } .snb .layout .snb_screen .print_btn a { display: flex; align-items: center; height: 5.8rem; padding:0 2rem; } .snb .layout .snb_screen .print_btn a span { margin-right: .6rem; color:#fff; font-weight: 400; font-size:1.7rem; } .snb .layout .snb_screen .print_btn a i { color:#fff; font-size:1.8rem; } @media (max-width:1024px){    .snb .layout .snb_screen { display: none; }    .snb .layout .snb_wrap { width: 100%; }    .snb .layout .snb_wrap .snb_select .select_active { min-width: auto; }    .snb .layout .snb_wrap .snb_select { min-width: auto; width: 100%; max-width: 100%; }}@media (max-width: 768px){    .snb .layout { padding:0; }    .snb .layout .snb_wrap .snb_select:nth-of-type(3) { display: none; }}@media (max-width:420px){    .snb .layout .snb_wrap { width:100%; }    .snb .layout .snb_wrap .snb_select { max-width:none;width:100%; }}/* 서브 콘텐츠 */#content_wrap { padding:10rem 0 12rem 0; overflow: hidden; } #txt { position: relative; } #txt .user_control { top:-12rem; z-index: 1; border:1px solid #9e9e9e; border-radius: .4rem; background: #fff; color:#3d3d3d; } #sub_tit { display: flex; justify-content: center; position: relative; margin: 0 0 8rem 0; } #sub_tit h3 { margin:0 auto; color:#3D3D3D; font-weight: 700; font-size:4rem; line-height: 1; } #sub_tit .subpage_btn { display: flex; align-items: center; position: absolute; top:50%; transform: translateY(-50%); } #sub_tit .subpage_btn i { display: flex; justify-content: center; align-items: center; width:3.6rem; height: 3.6rem; border-radius: 50%; background: #D4D8DE; color:#fff; font-size:2rem; } #sub_tit .subpage_btn span { color:#D4D8DE; font-weight: 700; font-size:3rem; } #sub_tit .subpage_btn.prev { left:0; } #sub_tit .subpage_btn.next { right:0; } #sub_tit .subpage_btn.prev span { margin-left:1rem; } #sub_tit .subpage_btn.next span { margin-right:1rem; } #sub_tit .subpage_btn:hover span { color:#222222; } #sub_tit .subpage_btn:hover i { background: #444444; } @media (max-width:640px){#sub_tit .subpage_btn { display: none; } }/* 탭메뉴 */.tab_menu { position:relative; margin-bottom:8rem; overflow: hidden; } .tab_menu ul { display: flex; justify-content: space-between; border-radius: .4rem; overflow:hidden; } .tab_menu ul li { position: relative; width:100%; border:1px solid #D8D8D8; border-left:0; } .tab_menu ul li:first-of-type { border-left:1px solid #D8D8D8; border-top-left-radius: .4rem; border-bottom-left-radius: .4rem; } .tab_menu ul li:last-of-type { border-bottom-right-radius: .4rem; border-top-right-radius: .4rem; } .tab_menu ul li.before { border-right:0; } .tab_menu ul li a { display: flex; justify-content: center; align-items: center; height: 100%; padding:1.97rem 2rem; word-break: keep-all; } .tab_menu ul li a span { position: relative; color:#686C78; font-weight: 500; font-size: 2rem; text-align: center; } .tab_menu ul li.on { position:relative; border:1px solid #2753AA; border-radius: .4rem; background-color:#2753AA; } .tab_menu ul li.on a span { color:#fff; } .tab_menu_btn { display:none; position: relative; width:100%; padding: 2.5rem 2rem; background:#2753AA; color:#fff; font-weight: 700; font-size:2rem; transition:all .3s; } .tab_menu_btn:after { position: absolute; top: 50%; right: 2.5rem; color: #fff; font-size: 2.2rem; font-family: "xeicon"; content: '\e943'; transform:translateY(-50%); } .tab_menu_btn.on:after { transform:translateY(-50%) rotate(180deg); } .tab_menu ul li.on:before { display: block; position: absolute; top:-1px; left:50%; width:105%; height: 1px; z-index: -1; background:#D8D8D8; content:""; transform: translateX(-50%); } .tab_menu ul li.on:after { display: block; position: absolute; bottom:-1px; left:50%; width:105%; height: 1px; z-index: -1; background:#D8D8D8; content:""; transform: translateX(-50%); } @media all and (min-width:768px){.tab_menu>ul { display: flex !important; } }@media (max-width:767px){.tab_menu_btn { display:block; } .tab_menu ul { margin:1px 0 0 0; border-radius: 0; } .tab_menu ul li { display: block; margin:0; border:1px solid #D2D4DA !important; border-radius: 0 !important; border-bottom:0 !important; } .tab_menu ul li:last-of-type { border-bottom:1px solid #D2D4DA !important; } .tab_menu ul li.on { border:1px solid #2753AA !important; } .tab_menu ul li a { min-width:100%; padding:1.8rem 2rem; } .tab_menu>ul { display:none; } .tab_menu ul:before { display: none; } .tab_menu ul:after { display: none; } }/* 카테고리메뉴 */.category_menu { position: relative; background: #fff;margin-bottom:5rem;width: 100%; display: flex;justify-content: flex-start;border-bottom:1px solid #D4D8DE;overflow-y: auto; }.category_menu.fixed { position: fixed;z-index: 1;width:100%; top:10.3rem;left:0; } .category_menu ul { display: flex; position: relative;width: 100%; justify-content: center; max-width: 80rem; margin:0 auto; }.category_menu.full ul { justify-content: flex-start;max-width: 100%; } .category_menu ul li { position: relative; } .category_menu ul li a { padding: 2.1rem 2rem;display: flex;min-width: 16rem; text-align: center;align-items: center;height: 100%;justify-content: center; }.category_menu ul li:before { position: absolute; bottom: 0; left: 50%; width: 0; height:.2rem; background: #2753AA; content: ""; transform: translateX(-50%); opacity: 0; transition: all .5s;} .category_menu ul li.on:before { width:100%;opacity: 1; }.category_menu ul li a span {  color: #686C78; font-weight: 500; font-size: 1.7rem; display: block; line-height: 2.4rem;} .category_menu ul li:first-of-type { margin-left: 0; } .category_menu ul li.on a span { color: #2753AA; font-weight: 700; } .category_board .board_cont { display: none; }.category_board .board_cont.on { display: block; }@media (max-width:640px){.category_menu ul li a{ padding:2rem; }}@media (max-width:480px){.category_menu.full { overflow-x: auto; }.category_menu.full ul { justify-content: left;margin:0 auto; }}/* 탭버튼 리스트 */.tab_btn_list { margin-bottom:8.4rem; } .tab_btn_list .inner { margin:-.8rem; } .tab_btn_list .inner button.on { background: #3D3D3D; } .tab_btn_list .inner button.on span { color:#fff; font-weight:700; } .tab_btn_list .inner button { padding:1.5rem 3rem; margin:.8rem; background: #F5F6F8; } .tab_btn_list .inner button span { color:#3D3D3D; font-weight: 400; font-size: 1.8rem; } .tab_btn_list .mlinktab_btn { display: none; position: relative; padding: 1.5rem 2rem; background: #3D3D3D; } .tab_btn_list .mlinktab_btn span { color:#fff; font-weight: 400; font-size: 1.8rem; } .tab_btn_list .mlinktab_btn:before { position: absolute; top:50%; right:2rem; color:#fff; font-size:2rem; font-family: "remixicon"; content:"\ea4e"; transform: translateY(-50%); } .tab_btn_list .mlinktab_btn.on:before { transform: translateY(-50%) rotate(180deg); } @media(max-width:640px){.tab_btn_list .inner { display: none; margin-top:1rem; } .tab_btn_list .mlinktab_btn { display: block; width:100%; } .tab_btn_list .inner { margin:1rem 0 0 0; } .tab_btn_list .inner button { display: block; width:100%; margin:0; border-top:1px solid #fff; } .tab_btn_list .inner button:first-of-type { border-top:0; } }






/* 반응형 시작 */@media (max-width:1920px){#header .header_wrap .layout { padding:0 2rem; } }@media (max-width:1400px){.layout { padding:0 2rem; } #header #gnb>ul>li .sub>.inner { padding:5.5rem 2rem; } #header #gnb>ul>li .sub>.inner .sub_quick { margin-right: 4rem; } #header #gnb>ul>li .sub>.inner>ul>li { width: calc(25% - 2rem); margin:1rem 1rem 0 1rem; } }@media (max-width:1280px){.search_wrap:before { display: none; } }@media (max-width: 1024px){#header #gnb { display: none !important; } }@media (max-width: 767px){.sub_visual { height: 55rem; } #footer .layout .inner .foot_info { padding:5rem 0; } #footer .layout .inner .foot_info address ul { flex-direction: column; } #footer .layout .inner .foot_info address ul li { margin-left:0; } #footer .layout .inner .foot_info .foot_logo { position: relative; top:auto; left:auto; margin-bottom:2rem; } }@media (max-width:640px){#header .header_wrap .layout { padding:0 2rem; } .layout { padding:0 2rem; } }@media (max-width: 480px){#header .logo { width:12rem; } #header .header_btn_wrap .blank_btn { height: 3.5rem; padding:0 1.5rem; margin-right: 2rem; } #header .header_btn_wrap .blank_btn span { font-size:1.4rem; } #header .header_btn_wrap .all_menu { margin-left:2rem; } #footer .layout .inner .select_box { position: relative; top:auto; right:auto; width:100%; margin-bottom:4rem; } .mobile_wrap { width: 100%; } #footer .layout .inner .foot_info address p.copy br { display: block; }}








root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* /html/css/nice-select.css */
.nice-select {  -webkit-tap-highlight-color: transparent;  background-color: #fff;  border-radius: 5px;  border: solid 1px #e8e8e8;  box-sizing: border-box;  clear: both;  cursor: pointer;  display: block;  float: left;  font-family: inherit;  font-size: 14px;  font-weight: normal;  height: 42px;  line-height: 40px;  outline: none;  padding-left: 18px;  padding-right: 30px;  position: relative;  text-align: left !important;  -webkit-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;          user-select: none;  white-space: nowrap;  width: auto; }  .nice-select:hover {    border-color: #dbdbdb; }  .nice-select:active, .nice-select.open, .nice-select:focus {    border-color: #999; }  .nice-select:after {    border-bottom: 2px solid #999;    border-right: 2px solid #999;    content: '';    display: block;    height: 5px;    margin-top: -4px;    pointer-events: none;    position: absolute;    right: 12px;    top: 50%;    -webkit-transition: all 0.15s ease-in-out;    transition: all 0.15s ease-in-out;    width: 5px; }  .nice-select.open:after {    -webkit-transform: rotate(-135deg);        -ms-transform: rotate(-135deg);            transform: rotate(-135deg); }  .nice-select.open .list {    opacity: 1;    pointer-events: auto;    -webkit-transform: scale(1) translateY(0);        -ms-transform: scale(1) translateY(0);            transform: scale(1) translateY(0); }  .nice-select.disabled {    border-color: #ededed;    color: #999;    pointer-events: none; }    .nice-select.disabled:after {      border-color: #cccccc; }  .nice-select.wide {    width: 100%; }    .nice-select.wide .list {      left: 0 !important;      right: 0 !important; }  .nice-select.right {    float: right; }    .nice-select.right .list {      left: auto;      right: 0; }  .nice-select.small {    font-size: 12px;    height: 36px;    line-height: 34px; }    .nice-select.small:after {      height: 4px;      width: 4px; }    .nice-select.small .option {      line-height: 34px;      min-height: 34px; }  .nice-select .list {    background-color: #fff;    border-radius: 5px;    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);    box-sizing: border-box;    margin-top: 4px;    opacity: 0;    overflow: hidden;    padding: 0;    pointer-events: none;    position: absolute;    top: 100%;    left: 0;    -webkit-transform-origin: 50% 0;        -ms-transform-origin: 50% 0;            transform-origin: 50% 0;    -webkit-transform: scale(0.75) translateY(-21px);        -ms-transform: scale(0.75) translateY(-21px);            transform: scale(0.75) translateY(-21px);    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;    z-index: 9; }    .nice-select .list:hover .option:not(:hover) {      background-color: transparent !important; }  .nice-select .option {    cursor: pointer;    font-weight: 400;    line-height: 40px;    list-style: none;    min-height: 40px;    outline: none;    padding-left: 18px;    padding-right: 29px;    text-align: left;    -webkit-transition: all 0.2s;    transition: all 0.2s; }    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {      background-color: #FFF3EC;}    .nice-select .option.selected {      font-weight: bold; }    .nice-select .option.disabled {      background-color: transparent;      color: #999;      cursor: default; }.no-csspointerevents .nice-select .list {  display: none; }.no-csspointerevents .nice-select.open .list {  display: block; }








/* /html/css/common.css */
/*mx-ksw*/* { box-sizing:border-box; } *::after, *::before { box-sizing: border-box; } 
a { transition:background .1s; } /*reset*/html { height: 100%; padding: 0; margin: 0; font-size: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; overflow: hidden; overflow-y: auto; } 

body { height: 100%; padding: 0; margin: 0; font-weight: 300; font-size: 1.6rem; line-height: 180%; font-family: "SUIT", sans-serif; } 

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,strong,b { 
padding:0; margin:0; color:#4b4b4b; font-weight:400; } 
	
	
ul,ol,li,dl,dt,dd { list-style: none; padding: 0; margin: 0; } h1,h2,h3,h4,h5,h6 { font-weight:600; } label { display:inline-block; cursor:pointer; } input,textarea,select,button,table { color:#fff; } strong,b { font-weight:700; } img,fieldset { max-width:100%; height:auto; border:0; vertical-align:top; } th { font-weight:normal; } li { list-style:none; } i,em,address { font-style:normal; } a { text-decoration:none; } a:link,a:visited { color:#fff; } a:hover,a:focus { color:#000; } a[target="_blank"]::after { display: inline-block; position: relative; margin-left:.5rem; vertical-align: 0;line-height: 1; } 

/*
a.no_blank::after { display: none; } article,aside,dialog,footer,header,section,footer,nav,figure,main { display:block; padding:0; margin:0; } button, input[type="submit"] { cursor:pointer; } button { padding:0; background-color:transparent; line-height:100%; border-width:0; } legend { position:fixed; top:-1px; left:-1px; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; } caption { width:1px; height:0; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); } button { background-color:transparent; } input[type="text"], input[type="password"] { height:4.4rem; padding:0 1.65rem; border:1px solid #D4D8DE; background:#fff; color:#3D3D3D; font-weight: 400; font-size:1.8rem; vertical-align:middle; } input[type="text"]::placeholder, input[type="password"]::placeholder { color:#9E9E9E; font-weight: 400;font-style: normal; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border:1px solid #3d3d3d; outline:0; } select { min-width: 8rem; height:4rem; padding:0 2rem 0 .5rem !important; border:1px solid #d2d2d2; background:#fff url(/html/images/common/select_arr.svg) right 1rem center no-repeat; color:#444; line-height:4rem; -webkit-appearance:none; -moz-appearance:none; appearance:none; vertical-align:middle; } select::-ms-expand { display:none; /* 화살표 없애기 for IE10, 11*/ }