@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:#376074; 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:#376074; 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:#376074; } .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:#376074; } .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: #376074; 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:#376074; 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:#376074; } 

.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:#376074; 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:#376074; } .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:#376074; 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:#376074; 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: #376074; 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:#376074; 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;} 









/* 반응형 시작 */@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
}


.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; }