html {
scroll-behavior: smooth;
}
#allWrap{position:relative;width:100%;height:100%;overflow:hidden;}
#header{position:relative; width:100%; height:90px; z-index:8; transition:.2s ease-out;}
#header.bgWhite{background:#fff; border-bottom:1px solid #f3f3f3;}
#header .headDiv{position:relative; width: 100%; text-align:center; height:100%;}
#header.bgWhite a{color:#222;}
#header.bgWhite #gnb .twoD a{color:#777;}
#header a.logo-top{max-width:317px; height:45px; overflow:hidden;}
#header.bgWhite a.logo-top img{height:100%; display:block; position:relative; top:0;}
#header.bgWhite .btn-menu>div{background:#02005e;}
#header.bgWhite .util_l li a{color: #333;}
.cs-logo{position:absolute;left: 30px; z-index:1; top:20px; -webkit-transition:all .3s; -moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.cs-logo h1 a{display:inline-block; padding:0; vertical-align:middle; color: #fff; text-align: left; font-size: 16px; line-height: 20px;font-weight:500;letter-spacing: -0.5pt;}
.cs-logo h1 a small{font-weight:300;}
.cs-logo img{height:100%;}
.cs-logo .logo-w{top:0; transition:all 0.8s ease; position:relative;}
/* 상단 고정 */
.hdWrap{width:100%; position:fixed; height:90px; top:0; z-index:100; transition:all 0.8s ease;}
.hdWrap.scrollFx{width:100%; position:fixed; background:#fff; top:0; box-shadow:0 0 10px rgba(0,0,0,0.2);}
.hdWrap.scrollFx #gnb .oneD{color:#222; }
.hdWrap.scrollFx a.logo-top{max-width:271px; height:40px; overflow:hidden;}
.hdWrap.scrollFx a.logo-top img{height:100%; display:block; position:relative; top:0;}
.hdWrap.scrollFx .btn-menu>div{background:#02005e !important;}
.hdWrap.scrollFx #header .util_l li a{color: #333;}
/* 로그인_pc */
#header.open .util{display:none;}
#header .util{position:absolute;top:0;right:100px;z-index:101;}
#header .util_l{display:flex;}
#header .util li{position:relative;}
#header .util_l > li + li:before{content:'';display:inline-block;width:1px;height:8px;background:#b2b2b2;margin:0 8px;}
#header .util_l li.language:before{display:none;}
#header .util_l li a{font-weight: 400; line-height:90px; font-size:16px; font-weight:600; letter-spacing:.3px;color:#222; transition:all .3s;}
#header .util_l li a i {padding: 0 5px 0 0}
#header .util_l li a:hover {opacity: 1;}
#header .util .lang_l{background:#fff;position:absolute;top:calc(100% - 18px);left:18px;border:1px solid #d1d1d1;box-sizing:border-box;right:0;padding:12px 0;display:none;}
#header .util li.language > a{display:inline-block;padding-right:50px;background:url(/img/common/language_i.jpg) no-repeat right center;}
#header .util_l .lang_l a{line-height:1.5;display:block;text-align:center;color:#acacac;letter-spacing:.5px;}
#header .util_l .lang_l li.on a{color:#222;text-decoration:underline;}
#header .util_l .lang_l li + li{margin-top:5px;}
#header .util li.language{padding-left:20px;}
/*햄버거메뉴*/
#header .btn-menu{position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; vertical-align: middle; padding: 30px 30px 0 0; width:90px; height:90px; cursor:pointer;}
#header .btn-menu>div{width:30px; height:2px; margin: 0 0 6px; background:#fff;}
#header .btn-menu>div:first-child{width: 25px;}
#header .btn-menu>div:last-child{width: 20px;}
#header .btn-menu:after{content:''; display:block; clear:both;}
/*PC메뉴*/
#gnb{display:inline-block; vertical-align:middle; background: none !important;}
#gnb.on{}
#gnb .oneD{display: flex; align-items: center; justify-content: center; height:90px; float:left; font-size:18px; font-weight:600; color:#222; line-height:1.3; text-align:center; width:150px; word-break: keep-all;}
#gnb .oneD p{word-break: keep-all;}
#gnb .oneD.fcBlack{color:#000;}
#gnb.on .oneD{}
#gnb .oneD.on{/* color:#c9f31d; */}
/*#gnb .oneD.wd01{width:160px;}
#gnb .oneD.wd02{width:160px;}
#gnb .oneD.wd03{width:160px;}
#gnb .oneD.wd04{width:160px;}
#gnb .oneD.wd05{width:160px;}
#gnb .oneD.wd06{width:160px;}
#gnb .oneD.wd07{width:160px;}*/
#gnb .oneD.wd05{width:200px;}
#gnb .twoD{display:none; position:absolute; height:300px; top:90px; padding:5px 10px; z-index:100; border-top:1px solid #f5f5f5;}
#gnb .twoD.on{background:#f9f9f9; border-top:1px solid #cf455e;}
#gnb .twoD.one{left:0; width:150px;}
#gnb .twoD.two{left:150px; width:150px;}
#gnb .twoD.thr{left:300px; width:150px;}
#gnb .twoD.fou{left:600px; width:150px;}
#gnb .twoD.fiv{left:750px; width:200px;}
#gnb .twoD.six{left:450px; width:150px;}
#gnb .twoD.sev{left:950px; width:150px;}
#gnb .twoD a{display:block; padding: 10px 0; font-weight: 500; font-size:16px; line-height: 1.2; color:#777 !important; letter-spacing: -0.5px; font-weight: 500 !important; word-break: keep-all; border-bottom: 1px solid #eee; transition:all 0.4s ease;}
#gnb .twoD a:first-child{padding-top: 10px;}
#gnb .twoD a:hover{color: #333 !important; border-color: #bbb;}
#gnb .twoD a b{color:#333;}
#gnb .twoD.on a{color:#7e7e7e; font-weight:normal; transition:all 0.4s ease;}
#gnb .twoD.on a.on{font-weight: 600; color: #333;}
#gnb .thrD{}
#gnb .thrD p.thrD_tit{display: block; padding: 10px 0; font-weight: 500; font-size: 16px; line-height: 1.2; color: #777 !important; letter-spacing: -0.5px; font-weight: 500 !important; word-break: keep-all; border-bottom: 1px solid #eee; cursor: pointer; transition: all 0.4s ease;}
#gnb .thrD .thrD_list{display: none; background: #fff; border: 1px solid #eee; border-radius: 6px;}
#gnb .thrD .thrD_list a{font-size: 14px; color: #333; border: 0;}
#gnb .thrD.active p.thrD_tit{border: 0;}
/* #gnb .thrD{}
#gnb .thrD h2{padding: 10px 0 5px; font-weight: 600; font-size: 16px; color: #222;}
#gnb .thrD h2 small{display: block; font-size: 12px; color: #cf455e;} */
#header .twoDbg{display:none; position:absolute; top:90px; left:0; width:100%; height: 300px; margin:auto; background:#fff; z-index:2;border-bottom:2px solid #f5f5f5;border-top:1px solid #f5f5f5}
/*우측-전체메뉴*/
.allmenu{display:none; position:absolute; left:0; top:0; width:100%; background:#252525; z-index:9999;}
.allmenu h1{padding: 20px 0 0 30px;}
.allmenu h1 a{display:inline-block; width:317px; height:45px; text-indent:-9999px; background:url("/images/common/logo_w.png") no-repeat; background-size:cover;}
.allmenu .btn_x{position:absolute; right:41px; top:31px; width:26px; height:26px; transform:rotate(45deg); cursor:pointer;}
.allmenu .btn_x:before{display:block; content:""; width:100%; height:3px; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.allmenu .btn_x:after{display:block; content:""; width:3px; height:100%; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.allmenu .allmenuwrap{max-width:1600px; width:100%; margin: 20px auto 220px; padding: 0 40px;}
.allmenu .allmenuwrap .boxwrap{display:flex; padding:40px 20px; border-bottom:1px solid rgba(255,255,255,0.1);}
.allmenu .allmenuwrap .boxwrap:last-child{border-bottom: 0;}
.allmenu .allmenuwrap .boxwrap>h2{width:300px; font-size:22px; font-weight: 500; color:#fff;}
.allmenu .allmenuwrap .boxwrap>ul{display:flex; flex-wrap: wrap; width:calc(100% - 300px);}
.allmenu .allmenuwrap .boxwrap>ul>li{width:20%; position:relative; box-sizing:border-box; padding-left:15px; padding-bottom:10px;}
.allmenu .allmenuwrap .boxwrap>ul>li:before{display:block; content:""; width:5px; height:5px; border-radius: 50%; position:absolute; left:0; top:7px; transition:all 0.4s ease;}
.allmenu .allmenuwrap .boxwrap:nth-child(1) > ul > li:before{background:#ca1c3b;}
.allmenu .allmenuwrap .boxwrap:nth-child(2) > ul > li:before{background:#fd9226;}
.allmenu .allmenuwrap .boxwrap:nth-child(3) > ul > li:before{background:#19a598;}
.allmenu .allmenuwrap .boxwrap:nth-child(4) > ul > li:before{background:#1773e0;}
.allmenu .allmenuwrap .boxwrap:nth-child(5) > ul > li:before{background:#cf455e;}
.allmenu .allmenuwrap .boxwrap:nth-child(6) > ul > li:before{background:#8d2de9;}
.allmenu .allmenuwrap .boxwrap:nth-child(7) > ul > li:before{background:#00c2ff;}
.allmenu .allmenuwrap .boxwrap:nth-child(8) > ul > li:before{background:#a3d900;}
.allmenu .allmenuwrap .boxwrap>ul>li>a{font-size:18px; color:#fff; font-weight:300; opacity: .8; transition:all 0.4s ease;}
.allmenu .allmenuwrap .boxwrap>ul>li:hover > a{opacity: 1; padding-left: 5px;}
.allmenu .allmenuwrap .boxwrap>ul>li>ul{margin-top:10px;}
.allmenu .allmenuwrap .boxwrap>ul>li>ul>li{}
.allmenu .allmenuwrap .boxwrap>ul>li>ul>li>a{font-size:15px; color:rgba(255,255,255,0.5); font-weight:300;}
#header{opacity:0; height:0px;}
#header.in-view{opacity:1; height:90px;}
/*모바일메뉴*/
.mobileMenu{display:none; position: absolute; top: 0; right: 0; align-items: flex-end; vertical-align: middle; text-align: center; line-height: 70px; width:70px; height:70px; cursor:pointer;}
.mobileMenu > div{width:23px; height:2px; margin: 0 auto 5px; background:#fff;}
.mobileMenu:after{content:''; display:block; clear:both;}
.mobileMenu .mMenuOver{display:none}
.mobileMenu img{width: 30px;}
.mobileMenu img.mMenuOver{display:none}
.mobileMenu span {display:block; width:100%; height:1px; background:#fff; margin:5px 0;}
.hdWrap.scrollFx .mobileMenu>div{background:#fff !important;}
/*로그인_모바일*/
.menu_top_box{position: absolute; top: 18px; left: 94px; font-size:15px;line-height:15px;letter-spacing:-.4px;}
.menu_top_box .left_link{display:flex;}
.menu_top_box .left_link a {display:block; padding: 5px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; color: rgba(255,255,255,.7)!important;}
.menu_top_box .left_link li {list-style-type: none; opacity: .5px;}
.menu_top_box .left_link li + li{margin-left: 8px;}
.menu_top_box .left_link li .menu_box_btn {font-weight:normal !important;font-size: 13px;}
#gnbM{display:none; position:absolute; top:0; right:-320px; width:300px; background:#222; z-index:999999999999999999; box-shadow: none;}
#gnbM .mUtil{padding:0 20px; height:65px; line-height:65px; font-size:17px;letter-spacing:0;position:relative;}
#gnbM .mUtil a{color:#fff;font-weight: bold;}
#gnbM .mUtil span{margin:0 6px; color:#817ab7}
#gnbM .mobileMenuXbt .btn_x{position:absolute; top:15px;right:15px;width:23px;height:23px;transform:rotate(45deg);cursor:pointer;}
#gnbM .mobileMenuXbt .btn_x:before{display:block;content:"";width:100%;height:2px;background:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
#gnbM .mobileMenuXbt .btn_x:after{display:block;content:"";width:2px;height:100%;background:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
#gnbM .gnbDiv a{display:block}
#gnbM .gnbDiv .one{padding:15px;font-size: 16px;color: #fff;border-bottom: 1px solid rgba(255,255,255,.2);font-weight: normal;background-size: 18px 18px;}
#gnbM .gnbDiv .one.on{color:#fff; background-size:18px 18px;}
#gnbM .gnbDiv .two{padding:10px 15px;background:#ca1c3b;}
#gnbM .gnbDiv .two .twoD{font-size: 15px;font-weight: 500; color: #fff;padding: 7px 5px;}
#gnbM .gnbDiv .two .thr{padding:15px 15px 5px; background:#f7f7f7}
#gnbM .gnbDiv .two .thr .thrD{font-size:13px; color:#777; margin-bottom:10px}
.dimdBg{display:none; position:absolute; top:0; left:0; width:100%; height:; background:rgba(0,0,0,0.5); z-index:999;}
#gnbM .mLang{background:#9b9b9b;height:40px;}
#gnbM .mLang:after{content:'';display:block;clear:both;}
#gnbM .mLang .i_lang{display:block;text-align:center;width:40px;height:100%;line-height:40px;float:left;}
#gnbM .mLang .i_lang img{max-width:80%;}
#gnbM .mLang a{width:80px;height:100%;float:left;display:block;border-left:1px solid #ddd;line-height:40px;color:#fff;text-align: center;font-size: 13px;}
#gnbM .quickDiv {padding:10px;margin-top: 5px;}
#gnbM .quickDiv::after{display: block;clear: both;content: '';}
#gnbM .quickDiv a{border:1px solid #76cc90;background: rgba(255,255,255,0.2);padding:10px; text-align:center;color:#fff;display: inline-block;width: 49%;margin-right: 2%;margin-bottom: 2%;float: left;font-size: 16px;}
#gnbM .quickDiv a.nt7{width: 100%;margin-right: 0;}
#gnbM .quickDiv a:nth-of-type(2n){margin-right: 0;}
#gnbM .quickDiv a i{font-size:0.9em;}
@media (max-width: 1820px){
#header a.logo-top{max-width: 270px; height: 38px;}
#gnb .twoD{padding: 5px 10px;}
}
@media (max-width: 1600px){
.hdWrap{height: 70px;}
.cs-logo{top: 15px;}
#header.in-view{height: 70px;}
#header .util{right: 80px;}
#header .util_l li a{line-height: 70px;}
.hdWrap.scrollFx{height: 70px;}
#gnb{display:none;}
#header .btn-menu{display:none;}
.mobileMenu{display: inline-block; z-index:9999;}
#gnbM{display:block;}
}
@media (max-width: 700px){
.cs-logo{top: 18px; left: 15px;}
#header a.logo-top{max-width: 220px; height: 31px;}
#header .util{display: none;}
}
@media (max-width: 500px){
.hdWrap{height: 60px;}
.hdWrap.scrollFx{height: 60px;}
#header.in-view{height: 60px;}
.cs-logo{top: 16px;}
#header a.logo-top{max-width: 192px; height: 27px;}
.mobileMenu{width: 60px; height: 60px; line-height: 60px;}
.mobileMenu img{width: 26px;}
}
canvas{position: absolute; top: 0; left: 0; width: 100%; z-index: -1; filter: blur(30px);
-webkit-filter: blur(30px); opacity: .6;}
/* 공통 */
.red{color: #ca1c3b;}
.green{color: #19a598;}
.yellow{color: #fd9226;}
.blue{color: #1773e0;}
/* 메인 비주얼 */
#mVisual{min-height: 100vh; box-sizing: border-box;}
#mVisual .txt_box{position: relative; width: 560px; margin: 150px 0 120px 14%;}
#mVisual .txt_box > div{width: 100%; display: flex; justify-content: space-between; align-items: center;}
#mVisual .txt_box > div + div{margin-top: 10px;}
#mVisual .txt_box > div h1{font-family: "Urbanist"; font-weight: 800; font-size: 70px; text-align: justify; color: #222;}
#mVisual .txt_box > div.txt02 h1{letter-spacing: 1px;}
#mVisual .txt_box > div span.red{color: #cf455e;}
#mVisual .txt_box > div span.yellow{color: #fd9226;}
#mVisual .txt_box > div span.green{color: #19a598;}
#mVisual .txt_box > div img.tit_dott{width: 133px; height: auto;}
#mVisual .txt_box > div.txt01 h1{display: flex; justify-content: space-between; width: 100%; }
#mVisual .txt_box > div.txt01 h1 span{display: inline-block;}
#mVisual .txt_box > div.logo_box{justify-content: flex-start; margin-top: 50px;}
#mVisual .txt_box > div.logo_box img{width: 90px; height: auto;}
#mVisual .txt_box > div.logo_box .line{display: block; width: 1px; height: 104px; margin: 0 24px; background: #000;}
#mVisual .txt_box .desc{margin-top: 28px; font-size: 17px; line-height: 1.7; color: #444; word-break: keep-all;}
#mVisual .deco_wr .deco{position: absolute; transition:all 0.4s ease;}
#mVisual .deco_wr .deco img{transition:all 0.4s ease;}
#mVisual .deco_wr .deco01{top: 140px; left: -2%;}
#mVisual .deco_wr .deco01 > img{display: block;}
#mVisual .deco_wr .deco01 > img.deco_img1{animation: up_down 6s .5s infinite ease;}
#mVisual .deco_wr .deco01 > img.deco_img2{margin-top: -180px; animation: up_down 6s infinite ease;}
#mVisual .deco_wr .deco02{top: 370px; right: 27%; animation: up_down 3s infinite ease;}
#mVisual .deco_wr .deco03{top: 150px; right: -2%; animation:spin_ain 30s infinite linear;}
@media (max-width: 1600px){
#mVisual .deco_wr .deco01 > img{width: 190px;}
#mVisual .deco_wr .deco01 > img.deco_img2{margin-top: -150px;}
#mVisual .deco_wr .deco02{width: 140px;}
#mVisual .deco_wr .deco03{width: 200px;}
#mVisual .txt_box{width: 477px;}
#mVisual .txt_box > div h1{font-size: 60px;}
#mVisual .txt_box > div img.tit_dott{width: 105px;}
#mVisual .txt_box > div.logo_box img{width: 76px;}
#mVisual .txt_box > div.logo_box .line{height: 88px; margin: 0 20px;}
#mVisual .txt_box .desc{font-size: 16px;}
}
@media (max-width: 1400px){
#mVisual .deco_wr .deco01 > img{width: 140px;}
#mVisual .deco_wr .deco01 > img.deco_img2{margin-top: -200px;}
#mVisual .deco_wr .deco02{top: 280px; width: 120px;}
#mVisual .deco_wr .deco03{width: 160px;}
#mVisual .txt_box{width: 400px; margin: 120px 0 100px 14%;}
#mVisual .txt_box > div h1{font-size: 50px;}
#mVisual .txt_box > div img.tit_dott{width: 86px;}
#mVisual .txt_box > div.logo_box{margin-top: 40px;}
#mVisual .txt_box > div.logo_box img{width: 64px;}
#mVisual .txt_box > div.logo_box .line{height: 74px;}
#mVisual .txt_box .desc{margin-top: 22px; font-size: 15px;}
}
@media (max-width: 1040px){
canvas{display: none;}
#mVisual .deco_wr .deco01{top: 130px;}
#mVisual .deco_wr .deco01 > img{width: 90px;}
#mVisual .deco_wr .deco01 > img.deco_img2{margin-top: -120px;}
#mVisual .deco_wr .deco02{top: 280px; right: 17%; width: 60px;}
#mVisual .deco_wr .deco03{top: 110px; width: 100px;}
#mVisual{display: flex; align-items: center;}
#mVisual .txt_box{width: 324px; margin: 90px 0 80px 14%;}
#mVisual .txt_box > div h1{font-size: 40px;}
#mVisual .txt_box > div img.tit_dott{width: 86px;}
#mVisual .txt_box > div.logo_box img{width: 56px;}
#mVisual .txt_box > div.logo_box .line{height: 64px; margin: 0 16px;}
#mVisual .txt_box .desc{font-size: 14px;}
}
@media (max-width: 740px){
#mVisual .deco_wr .deco01 > img{width: 80px;}
#mVisual .deco_wr .deco01 > img.deco_img2{margin-top: -98px;}
#mVisual .deco_wr .deco02{top: 214px; right: 10%; width: 44px;}
#mVisual .deco_wr .deco03{top: 100px; width: 76px;}
#mVisual .txt_box{width: 278px; margin: 70px auto 70px;}
#mVisual .txt_box > div h1{font-size: 34px;}
#mVisual .txt_box > div img.tit_dott{width: 65px;}
#mVisual .txt_box > div.logo_box{margin-top: 30px;}
#mVisual .txt_box > div.logo_box img{width: 48px;}
#mVisual .txt_box > div.logo_box .line{height: 56px;}
#mVisual .txt_box .desc{margin-top: 18px; font-size: 13px;}
}
@media (max-width: 500px){
#mVisual{min-height: 0;}
}
/* 비디오 박스 */
#Vid{position: relative; margin-top: 0; padding: 0 50px; z-index: 5;}
#Vid .video_box{position: relative; overflow: hidden; width: 100%; height: 496px; margin: 0 auto; border-radius: 50px; overflow: hidden; z-index: -1; transition: all 1s;}
#Vid .video_box .video{height: auto; width: 100%;}
@media (max-width: 1400px){
#Vid .video_box{height: auto !important;}
}
@media (max-width: 1040px){
#Vid{margin-top: 0; padding: 0 30px;}
#Vid .video_box{height: auto; border-radius: 35px;}
}
@media (max-width: 500px){
#Vid{display: none; padding: 0 20px;}
#Vid .video_box{border-radius: 20px;}
}
/* 센터소개 */
#About{position: relative; /*position: relative; padding-top: 80px; background: #fff6f6; */}
#About .item_wr{}
#About .item{position: relative; width:100%; height:100vh; padding: 160px 0 0 24%; transition: background-color 0.3s;}
#About .item img.mobile_img{display: none;}
#About .item .cont{margin-top: 100px;}
#About .item .cont .tit{font-family: 'Pretendard'; font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -0.5px; color: #222; word-break: keep-all;}
#About .item .cont .tit b{font-family: 'Paperlogy'; font-weight: 700; font-size: 48px;}
#About .item .cont .sub{font-family: 'Pretendard'; font-size: 26px; line-height: 1.5; font-weight: 400; margin: 30px 0 80px; letter-spacing: -0.5px; color: #333; word-break: keep-all;}
#About .img_box{position: relative; margin-top: 150px;}
#About .img_box > img{position: absolute; transition:all 0.4s ease;}
#About .img_box .img01{top: 180px; left: -6%; opacity: 0;}
#About .img_box .img02{top: 303px; right: 21%; opacity: 0;}
#About .img_box .img03{top: 0; right: 6%; opacity: 0;}
#About .img_box.fixed > img{position: fixed;}
#About .img_box.fixed .img01{top: 300px; left: -6%;}
#About .img_box.fixed .img02{top: 423px; right: 21%;}
#About .img_box.fixed .img03{top: 120px; right: 6%;}
#About .img_box.in-view .img01{-webkit-animation: rotate-in-2-bl-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: rotate-in-2-bl-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity: 1;}
#About .img_box.in-view .img02{-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity: 1;}
#About .img_box.in-view .img03{-webkit-animation: rotate-in-2-br-ccw 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: rotate-in-2-br-ccw 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; opacity: 1;}
#About .ani_wr{position: relative; width: 100%; z-index: 1;}
#About .ani_wr.fixed{}
#About .ani_wr img{width: 100%;}
#About .ani_wr .anibox{position: absolute;}
/* ani-1 : 큐브 */
#About .ani_wr .anibox.ani-1 {top: 100px; left: 3%; transform: scale(0.8);}
#About .ani_wr.fixed .anibox.ani-1{position: fixed; top: 100px; left: 3%;}
#About .ani_wr .ani-cube {
perspective: 20000px;
height: 100px;
width: 100px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(40deg) rotateZ(360deg);
-webkit-animation: ani-cube-1 20s linear infinite;
animation: ani-cube-1 20s linear infinite;
}
#About .ani_wr .ani-cube .cube-face {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
}
#About .ani_wr .ani-cube .cube-face.face_front {
background-color: #3496d2;
transform: translate3d(0px, 0px, 50px);
z-index: 10;
}
#About .ani_wr .ani-cube .cube-face.face_right {
background-color: #6fb9e8;
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 8;
}
#About .ani_wr .ani-cube .cube-face.face_left {
background-color: #6fb9e8;
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 9;
}
#About .ani_wr .ani-cube .cube-face.face_top {
background-color: #4cace8;
transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 11;
}
#About .ani_wr .ani-cube .cube-face.face_bottom {
background-color: #4cace8;
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 5;
}
#About .ani_wr .ani-cube .cube-face.face_back {
background-color: #3496d2;
transform: translate3d(0px, 0px, -50px);
z-index: 1;
}
@-webkit-keyframes ani-cube-1 {
to {
transform: rotateX(-30deg) rotateY(40deg) rotateZ(0);
}
}
@keyframes ani-cube-1 {
to {
transform: rotateX(-30deg) rotateY(40deg) rotateZ(0);
}
}
/* ani-2 : 비행기 */
#About .ani_wr .anibox.ani-2{top: 660px; left: 8%; width: 220px; height: 220px;}
#About .ani_wr.fixed .anibox.ani-2{position: fixed; top: 660px; left: 8%;}
#About .ani_wr .anibox.ani-2 .ani {position: relative; max-height: 30vw; max-width: 30vw; max-height: 220px; max-width: 220px;}
#About .ani_wr .anibox.ani-2 .ani svg {
height: 100%;
width: 100%;
}
#About .ani_wr .anibox.ani-2 .ani svg #followPath {
fill: none;
stroke: #3496d2;
stroke-width: 8;
stroke-dasharray: 2870px;
stroke-dashoffset: 2870px;
-webkit-animation: drawPath 6s linear infinite;
animation: drawPath 6s linear infinite;
}
#About .ani_wr .anibox.ani-2 .ani svg #dashedPath {
fill: none;
stroke: #fff;
stroke-width: 14;
stroke-dasharray: 50px;
}
#About .ani_wr .anibox.ani-2 .ani svg #airplain {
fill: #3496d2;
transform: translate(-10px, -45px);
}
@-webkit-keyframes drawPath {
0% {
opacity: 1;
stroke-dashoffset: 2870px;
}
53% {
opacity: 1;
stroke-dashoffset: 0;
}
78% {
opacity: 0;
}
100% {
opacity: 0;
stroke-dashoffset: 0;
}
}
@keyframes drawPath {
0% {
opacity: 1;
stroke-dashoffset: 2870px;
}
53% {
opacity: 1;
stroke-dashoffset: 0;
}
78% {
opacity: 0;
}
100% {
opacity: 0;
stroke-dashoffset: 0;
}
}
/* ani-3 : 돌아가는 원 */
#About .ani_wr .anibox.ani-3{top: 650px; right: 7%; width: 200px; height: 200px; animation:spin_ain 40s infinite linear;}
#About .ani_wr.fixed .anibox.ani-3{position: fixed; top: 650px; right: 7%; z-index: 1;}
#About .ani_wr .anibox.ani-3 img{width: 100%;}
@media (max-width: 1820px){
#About .item{padding: 100px 0 0 22%;}
#About .img_box{margin-top: 100px;}
#About .img_box .img01{width: 360px;}
#About .img_box .img02{top: 248px; right: 18%; width: 280px;}
#About .img_box .img03{right: 4%; width: 450px;}
#About .img_box.fixed .img02{top: 376px; right: 18%;}
#About .img_box.fixed .img03{right: 4%;}
#About .item .cont .tit{font-size: 28px;}
#About .item .cont .tit b{font-size: 44px;}
#About .item .cont .sub{margin: 20px 0 80px; font-size: 22px;}
}
@media (max-width: 1400px){
#About .img_box{margin-top: 70px;}
#About .img_box .img01{top: 140px; width: 270px;}
#About .img_box .img02{top: 198px; width: 220px;}
#About .img_box .img03{width: 350px;}
#About .img_box.fixed .img02{top: 320px;}
#About .ani_wr .anibox.ani-1{top: 70px; transform: scale(0.5);}
#About .ani_wr .anibox.ani-2{top: 380px; left: 3%; transform: scale(0.7);}
#About .ani_wr .anibox.ani-3{top: 300px; right: 5.5%; width: 120px; height: 120px;}
#About .ani_wr.fixed .anibox.ani-1{top: 226px;}
#About .ani_wr.fixed .anibox.ani-2{top: 534px; left: 3%;}
#About .ani_wr.fixed .anibox.ani-3{top: 412px; right: 5.5%;}
#About .item{padding: 50px 0 0 20%;}
#About .item .cont .tit b{font-size: 36px;}
#About .item .cont .sub{font-size: 20px;}
#About .item .cont .tit{font-size: 22px;}
#About .item .cont .tit b{font-size: 32px;}
#About .item .cont .sub{font-size: 18px;}
}
@media (max-width: 1200px){
#About .img_box{margin-top: 0; z-index: 1;}
#About .img_box .img01{width: 180px;}
#About .img_box .img02{top: 164px; right: 16.5%; width: 140px;}
#About .img_box .img03{top: 38px; width: 220px;}
#About .img_box.fixed .img01{top: 238px;}
#About .img_box.fixed .img02{top: 245px; right: 16.5%;}
#About .ani_wr{z-index: 2;}
#About .ani_wr .anibox.ani-1{transform: scale(0.3);}
#About .ani_wr .anibox.ani-2{top: 254px; left: -2%; transform: scale(0.4);}
#About .ani_wr .anibox.ani-3{top: 227px; right: 5.5%; width: 80px; height: 80px; }
#About .ani_wr.fixed .anibox.ani-1{top: 174px;}
#About .ani_wr.fixed .anibox.ani-2{top: 348px; left: -2%; }
#About .ani_wr.fixed .anibox.ani-3{top: 310px; right: 5.5%;}
#About .item{height: 400px; padding: 50px 0 0 18%;}
#About .item01{background: #fff0f0;}
#About .item02{background: #fff1e4;}
#About .item03{background: #f4faff;}
#About .item .item_txt{position: relative; z-index: 2;}
#About .item .cont{margin-top: 50px;}
#About .item .cont .tit{font-size: 18px;}
#About .item .cont .tit b{font-size: 26px;}
#About .item .cont .sub{margin: 10px 0 0; font-size: 17px;}
}
@media (max-width: 1040px){
#About .img_box .img01{display: none;}
#About .img_box .img02{top: 185px; right: 19.5%;}
#About .img_box .img03{top: 62px;}
#About .img_box.fixed .img02{right: 19.5%;}
#About .ani_wr .anibox.ani-1{top: 0; left: auto; right: 3%;}
#About .ani_wr .anibox.ani-2{display: none;}
#About .ani_wr .anibox.ani-3{top: 265px; right: 7%; width: 60px; height: 60px;}
#About .ani_wr.fixed .anibox.ani-1{top: 62px; left: auto; right: 3%;}
#About .ani_wr.fixed .anibox.ani-3{top: 326px; right: 7%;}
#About .item{padding: 50px 0 0 40px;}
}
@media (max-width: 640px){
#About .img_box .img02{top: 164px; right: 126px; width: 105px;}
#About .img_box .img03{right: 30px; width: 180px;}
#About .img_box.fixed .img02{top: 223px; right: 126px;}
#About .img_box.fixed .img03{right: 30px;}
#About .ani_wr .anibox.ani-3{top: 215px; right: 6%;}
#About .ani_wr.fixed .anibox.ani-3{top; 275px; right: 6%;}
#About .item .cont .tit{font-size: 16px;}
#About .item .cont .tit b{font-size: 24px;}
#About .item .cont .sub{font-size: 16px; padding-right: 240px;}
#About .item .cont .sub br{display: none;}
}
@media (max-width: 500px){
#About .img_box{display: none;}
#About .ani_wr{display: none;}
#About .item{height: auto; padding: 40px 20px;}
#About .item img.mobile_img{display: block; width: 100%;}
#About .item .cont{position: relative; margin: -80px 20px 0 -1px; padding: 10px 20px 10px 10px; border-radius: 0 20px 0 0;}
#About .item01 .cont{background: #fff0f0;}
#About .item02{display: none;}
#About .item02 .cont{background: #fff1e4;}
#About .item03 .cont{background: #f4faff;}
#About .item .cont .tit{margin-top: 15px;}
#About .item .cont .tit b{font-size: 22px;}
#About .item .cont .tit b br{display: none;}
#About .item .cont .sub{padding-right: 0;}
#About .item .flex_wr img.mobile_img{opacity: 0; transform: translateY(40px); transition:all 0.4s ease;}
#About .item .flex_wr.in-view img.mobile_img{opacity: 1; transform: translateY(0);}
#About .item .flex_wr .cont{opacity: 0; transform: translateY(40px); transition:all 0.4s 0.2s ease;}
#About .item .flex_wr.in-view .cont{opacity: 1; transform: translateY(0);}
}
/* section01 : 수치화 */
#mNumber{position: relative; padding: 100px 0; background: #fff; z-index: 5;}
#mNumber .num_box_wr{display: flex; justify-content: space-between; width: 100%; max-width: 1650px; margin: 0 auto;}
#mNumber .num_box_wr .num_box{position: relative; display: flex; flex-direction: column; align-items: center; width: 33.333333%;}
#mNumber .num_box_wr .num_box::before{content:''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 2px; height: 80px; background: #eee;}
#mNumber .num_box_wr .num_box:first-child::before{display: none;}
#mNumber .num_box_wr .num_box p.tit{position: relative; margin-bottom: 45px; padding-left: 30px; font-weight: 500; font-size: 23px; letter-spacing: -0.5px; color: #222; word-break: keep-all;}
#mNumber .num_box_wr .num_box p.tit::before{content:''; position: absolute; top: 8px; left: 0; display: block; width: 8px; height: 8px; border-radius: 50%;}
#mNumber .num_box_wr .num_box.box01 p.tit::before{background: #ca1c3b; box-shadow: 0 0 0 7px rgba(202,28,59,.2);}
#mNumber .num_box_wr .num_box.box02 p.tit::before{background: #1773e0; box-shadow: 0 0 0 7px rgba(23,115,224,.2);}
#mNumber .num_box_wr .num_box.box03 p.tit::before{background: #fd9226; box-shadow: 0 0 0 7px rgba(253,146,38,.2);}
#mNumber .num_box_wr .num_box.box04 p.tit::before{background: #19a598; box-shadow: 0 0 0 7px rgba(25,165,152,.2);}
#mNumber .num_box_wr .num_box .num_wr{position: relative; width: 100%; z-index: 1;}
#mNumber .num_box_wr .num_box .num_wr .num_txt{display: flex; align-items: flex-end; justify-content: center;}
#mNumber .num_box_wr .num_box .num_wr h3.num{font-weight: 700; font-size: 80px; text-align: center; color: #222;}
#mNumber .num_box_wr .num_box .num_wr span{font-weight: 500; font-size: 22px; color: #555; margin-left: 10px; padding-bottom: 10px;}
@media (max-width: 1600px){
#mNumber{padding: 70px 0;}
#mNumber .num_box_wr .num_box{padding: 0 20px;}
#mNumber .num_box_wr .num_box p.tit{height: 40px; margin-bottom: 30px; font-size: 20px;}
#mNumber .num_box_wr .num_box p.tit::before{top: 6px;}
#mNumber .num_box_wr .num_box .num_wr h3.num{font-size: 70px;}
}
@media (max-width: 1200px){
#mNumber .num_box_wr .num_box p.tit{margin-bottom: 10px; font-size: 18px;}
#mNumber .num_box_wr .num_box .num_wr h3.num{font-size: 50px;}
}
@media (max-width: 1040px){
#mNumber{padding: 40px 0;}
#mNumber .num_box_wr{flex-wrap: wrap; justify-content: center;}
#mNumber .num_box_wr .num_box{width: 50%; padding: 30px 20px;}
#mNumber .num_box_wr .num_box.box04::before{display: none;}
}
@media (max-width: 740px){
#mNumber .num_box_wr .num_box p.tit{margin-bottom: 0; font-size: 16px; text-align: center;}
#mNumber .num_box_wr .num_box .num_wr h3.num{padding-bottom: 3px; font-size: 40px;}
}
@media (max-width: 480px){
#mNumber{padding: 20px 10px;}
/* #mNumber .num_box_wr .num_box{width: 100%;} */
#mNumber .num_box_wr .num_box{/* align-items: flex-start; */ padding: 25px 15px;}
#mNumber .num_box_wr .num_box::before{content:''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 40%; height: 1px; background: #eee;}
#mNumber .num_box_wr .num_box.box02::before{display: none;}
#mNumber .num_box_wr .num_box p.tit{padding-left: 15px; /* text-align: left; */}
#mNumber .num_box_wr .num_box p.tit::before{width: 4px; height: 4px;}
#mNumber .num_box_wr .num_box.box01{width: 100%;}
#mNumber .num_box_wr .num_box.box01 p.tit::before{box-shadow: 0 0 0 5px rgba(202,28,59,.2);}
#mNumber .num_box_wr .num_box.box02 p.tit::before{box-shadow: 0 0 0 5px rgba(23, 115, 224,.2);}
#mNumber .num_box_wr .num_box.box03 p.tit::before{box-shadow: 0 0 0 5px rgba(253, 146, 38, .2);}
#mNumber .num_box_wr .num_box.box04 p.tit::before{box-shadow: 0 0 0 5px rgba(25,165,152,.2);}
#mNumber .num_box_wr .num_box .num_wr .num_txt{/* justify-content: flex-start; */ margin: 5px 0 0 15px;}
#mNumber .num_box_wr .num_box .num_wr h3.num{font-size: 26px;}
#mNumber .num_box_wr .num_box .num_wr span{margin-left: 5px; transform: translateY(5px); font-size: 16px;}
}
/* IB/IBEC */
#mEdu{position: relative; width: 100%; padding: 80px 0; z-index: 1; background: #fff; z-index: 5;}
#mEdu .flex_box{display: flex; justify-content: space-between; gap: 32px; width: 100%; max-width: 1800px; margin: 0 auto; }
#mEdu .flex_box > div{width: 50%; border-radius: 64px;}
#mEdu .flex_box > div .tit_box{position: relative; width: 276px; margin-left: 12%; padding: 10px 20px 30px; border-radius: 0 0 46px 46px; background: #fff; }
#mEdu .flex_box > div .tit_box::before{content:''; position: absolute; top: -2px; left: -45px; display: block; width: 63px; height: 47px; background: url('../images/main/Edu_white_box.png') no-repeat 50% 50%/contain; }
#mEdu .flex_box > div .tit_box h3{font-weight: 700; font-size: 78px; text-align: center; word-break: keep-all;}
#mEdu .flex_box > div .tit_box::after{content:''; position: absolute; top: -2px; right: -45px; display: block; width: 63px; height: 47px; background: url('../images/main/Edu_white_box.png') no-repeat 50% 50%/contain; transform: scaleX(-1);}
#mEdu .flex_box > div .txt_box{padding: 50px 74px 80px;}
#mEdu .flex_box > div .txt_box h4{font-weight: 700; font-size: 40px; line-height: 1.4; word-break: keep-all;}
#mEdu .flex_box > div .txt_box h4 span{font-weight: 800;}
#mEdu .flex_box > div .txt_box ul.circle_txt{display: flex; margin-top: 60px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li{font-weight: 700; font-size: 18px; text-align: center; line-height: 1.4; color: #666; word-break: keep-all;}
#mEdu .flex_box > div .txt_box ul.circle_txt li + li{margin-left: -10px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li b{font-size: 24px; color: #222;}
#mEdu .flex_box > div .txt_box p.cont{display: block; margin-top: 40px; font-family: 'Pretendard'; font-weight: 500; font-size: 24px; line-height: 1.5; letter-spacing: -0.5px; color: #333; word-break: keep-all;}
#mEdu .flex_box .left{background: url('../images/main/Edu_box_BG01.png') no-repeat 130% 70px/428px; background-color: #fbedf0;}
#mEdu .flex_box .left .txt_box ul.circle_txt li{width: 110px; height: 110px; border: 1px solid rgba(202,28,59,.3); border-radius: 50%;}
#mEdu .flex_box .left .txt_box ul.circle_txt li b{line-height: 110px;}
#mEdu .flex_box .right{background: url('../images/main/Edu_box_BG02.png') no-repeat 145% 70px/428px; background-color: #e3f4f2;}
#mEdu .flex_box .right .txt_box ul.circle_txt li{width: 286px; height: 110px; padding-top: 12px; border: 1px solid rgba(25,165,152,.7); border-radius: 100px; }
@media (max-width: 1820px){
#mEdu{padding: 70px 40px; }
#mEdu .flex_box > div .txt_box{padding: 40px 50px 60px;}
#mEdu .flex_box > div .tit_box h3{font-size: 68px;}
#mEdu .flex_box > div .txt_box h4{font-size: 34px;}
#mEdu .flex_box > div .txt_box ul.circle_txt{margin-top: 30px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li{font-size: 16px; line-height: 1.3;}
#mEdu .flex_box > div .txt_box ul.circle_txt li b{font-size: 20px;}
#mEdu .flex_box > div .txt_box p.cont{margin-top: 30px; font-size: 20px;}
#mEdu .flex_box .left{background-position: 115% 70px; background-size: 300px;}
#mEdu .flex_box .left .txt_box ul.circle_txt li{width: 90px; height: 90px;}
#mEdu .flex_box .left .txt_box ul.circle_txt li b{line-height: 90px;}
#mEdu .flex_box .right{background-position: 125% 70px; background-size: 300px;}
#mEdu .flex_box .right .txt_box ul.circle_txt li{height: 90px;}
}
@media (max-width: 1400px){
#mEdu .flex_box > div{border-radius: 35px;}
#mEdu .flex_box > div .tit_box{width: 234px; padding: 5px 20px 20px; border-radius: 0 0 35px 35px;}
#mEdu .flex_box > div .tit_box h3{font-size: 50px;}
#mEdu .flex_box > div .txt_box h4{font-size: 28px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li{font-size: 14px;}
#mEdu .flex_box .left{background-size: 240px;}
#mEdu .flex_box .right{background-position: 118% 69px; background-size: 240px;}
#mEdu .flex_box .right .txt_box ul.circle_txt li{width: 240px; height: 80px; padding-top: 10px;}
}
@media (max-width: 1200px){
#mEdu .flex_box{display: block;}
#mEdu .flex_box > div{width: 100%; margin-bottom: 40px;}
#mEdu .flex_box > div .tit_box{width: 30%; margin: 0 auto;}
#mEdu .flex_box > div .tit_box::after{top: -2px; right: -32px; width: 47px; height: 37px;}
#mEdu .flex_box > div .tit_box::before{top: -2px; left: -32px; width: 47px; height: 37px;}
#mEdu .flex_box > div .tit_box h3{font-size: 40px;}
#mEdu .flex_box > div .txt_box{padding: 20px 40px 40px;}
#mEdu .flex_box > div .txt_box h4{text-align: center; font-size: 24px;}
#mEdu .flex_box > div .txt_box ul.circle_txt{justify-content: center; margin-top: 20px;}
#mEdu .flex_box > div .txt_box p.cont{font-size: 18px; text-align: center;}
}
@media (max-width: 1040px){
#mEdu .flex_box .left .txt_box ul.circle_txt li{width: 80px; height: 80px; }
#mEdu .flex_box .left .txt_box ul.circle_txt li b{line-height: 80px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li b{font-size: 17px;}
}
@media (max-width: 600px){
#mEdu{padding: 20px;}
#mEdu .flex_box > div{border-radius: 25px;}
#mEdu .flex_box > div .tit_box{width: 50%; padding: 5px 15px 12px; border-radius: 0 0 25px 25px;}
#mEdu .flex_box > div .tit_box h3{font-size: 32px;}
#mEdu .flex_box > div .txt_box h4{font-size: 20px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li{font-size: 12px;}
#mEdu .flex_box > div .txt_box ul.circle_txt li b{font-size: 15px;}
#mEdu .flex_box .right .txt_box ul.circle_txt li{height: 70px;}
}
@media (max-width: 480px){
#mEdu .flex_box > div .txt_box{padding: 20px 20px 40px;}
#mEdu .flex_box .left{background-image: none;}
#mEdu .flex_box .right{background-image: none;}
#mEdu .flex_box .right .txt_box ul.circle_txt{flex-wrap: wrap;}
#mEdu .flex_box .right .txt_box ul.circle_txt li{width: 100%;}
#mEdu .flex_box .right .txt_box ul.circle_txt li + li{margin-left: 0; margin-top: 8px;}
#mEdu .flex_box > div .txt_box p.cont{margin-top: 20px; font-size: 17px;}
}
/* 교육프로그램 */
#mGall{position:relative; width:100%; margin:0 auto; padding: 70px 0 120px; background: #fff; z-index: 2;}
#mGall .m-tit{width: 100%; padding:20px 0 0 0;}
#mGall .m-tit h2{padding-left: 180px; font-weight: 700; font-size: 54px; letter-spacing: -0.4px; color:#222;}
#mGall .flex_box{display: flex; justify-content: space-between;}
#mGall .gall-cont{position: relative; display: flex; justify-content: flex-end; width: 1600px; height: 500px; margin-top: 70px;}
#mGall .gall-cont::before{content:''; position: absolute; bottom: -100px; right: 0; display: block; width: 110%; height: 367px; background: #f4faff; border-radius: 367px 0 0 367px;}
#mGall .gall-cont .g-con{width: 100%; max-width:1600px;}
#mGall .m-gall{position:relative; width: 100%;}
#mGall .m-gall .slick-list{display:block; margin-top:20px;}
#mGall .m-gall .slick-active{margin-top:0;}
#mGall .m-gall .slick-active + .slick-active{margin-top:60px;}
#mGall .m-gall .slick-active + .slick-active + .slick-active{margin-top:0;}
#mGall .m-gall .slick-active + .slick-active + .slick-active + .slick-active{margin-top:60px;}
#mGall .g-control{position: relative; display: block; margin-right: 40px; padding: 100px 0 0 60px; z-index:10;}
#mGall .g-control .g-arrow{position:relative; margin:0; padding:0; border:0; transition:.3s; background: none; color: #222;}
#mGall .g-control .g-arrow button{display: block; width: 78px; height: 78px; background: none; border: 0; border-radius: 0; opacity: .3; transition:all 0.4s ease;}
#mGall .g-control .g-arrow button img{-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); transition:all 0.4s ease;}
#mGall .g-control .g-arrow button p{margin-top: 15px; font-weight: 600; font-size: 12px; letter-spacing: 1px; transition:all 0.4s ease;}
#mGall .g-control .g-arrow button.btn-prev{border-right: 1px solid #bbbbbb;}
#mGall .g-control .g-arrow button.btn-next{border-left: 1px solid #bbbbbb; margin-left: 77px;}
#mGall .m-gall .item{position:relative; /* width: 100%; max-width: 500px; */ margin-right: 35px; overflow: hidden; transition:.6s;}
#mGall .m-gall .item a > span{display:block;}
#mGall .m-gall .item a .item-img{position:relative; display:block; width:100%; height: 320px; overflow:hidden; border-radius: 25px; margin: 0; padding: 0; transition:all 0.4s ease;}
#mGall .m-gall .item a .item-img img{position: absolute; bottom: 0; left: 0; right: 0; top: 0; width:100%; height: auto; opacity:0; opacity:1; transition: transform 2s ease;}
#mGall .m-gall .item a .item-img .link_wr{position: absolute; top: -5px; right: -5px; width: 130px; height: 130px; background: url('../images/main/Prog_white.png') no-repeat 0 0/contain; z-index: 1; transition:all 0.4s ease;}
#mGall .m-gall .item a .item-img .link_wr .arrow_box{position: absolute; top: 24px; right: 24px; display: block; width: 54px; height: 54px; border: 1px solid #ca1c3b; border-radius: 50%; z-index: 1; transition:all 0.4s ease;}
#mGall .m-gall .item a .item-img .link_wr .arrow_box::before{content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 20px; height: 20px; background: url('../images/main/Prog_link.png') no-repeat 0 0/contain; transition:all 0.4s ease;}
#mGall .m-gall .item a .item-cont{margin-top: 30px; width:100%; opacity:.9;}
#mGall .m-gall .item a>*{display:block; letter-spacing:-.3px;}
#mGall .m-gall .item a .item-cont p.s_tit{display:block; font-weight: 700; font-size: 22px; letter-spacing: -0.5px; color: #19a598; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#mGall .m-gall .item a .item-cont h3.ca-tit{display:block; margin-top: 10px; font-weight: 700; font-size: 26px; letter-spacing: -0.5px; color: #222; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#mGall .m-tit{opacity:0; transform:translate(-40px, 0);}
#mGall.in-view .m-tit{opacity:1; transform:translate(0, 0); transition:all 1s 0.4s ease;}
#mGall .gall-cont{opacity:0; transform:translate(40px, 0);}
#mGall.in-view .gall-cont{opacity:1; transform:translate(0, 0); transition:all 1s 0.4s ease;}
/* ani-4 : 선 큐브 애니메이션 */
#mGall .ani.ani-4 {position: absolute; left: 0; top: -44px; transform: translate(50%, 50%) scale(0.8);}
#mGall .ani-cube.ani-cube-4 {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(47deg);
-webkit-animation: ani-cube-4 20s cubic-bezier(0.7, 0, 0.7, 1) infinite;
animation: ani-cube-4 20s cubic-bezier(0.7, 0, 0.7, 1) infinite;
}
#mGall .ani-cube.ani-cube-4 .cube-face.face_front, #mGall .ani-cube.ani-cube-4 .cube-face.face_right, #mGall .ani-cube.ani-cube-4 .cube-face.face_left, #mGall .ani-cube.ani-cube-4 .cube-face.face_top, #mGall .ani-cube.ani-cube-4 .cube-face.face_bottom, #mGall .ani-cube.ani-cube-4 .cube-face.face_back {
border: 2px solid #f29900;
border-radius: 2px;
background-color: transparent;
box-shadow: inset 0 0 0 2px #f29900, 0 0 0 2px #f29900;
}
#mGall .ani-cube {
perspective: 20000px;
height: 100px;
width: 100px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(40deg) rotateZ(360deg);
-webkit-animation: ani-cube-1 20s linear infinite;
animation: ani-cube-1 20s linear infinite;
}
#mGall .ani-cube .cube-face {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
}
#mGall .ani-cube .cube-face.face_front {
background-color: #f29900;
transform: translate3d(0px, 0px, 50px);
z-index: 10;
}
#mGall .ani-cube .cube-face.face_right {
background-color: #f29900;
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 8;
}
#mGall .ani-cube .cube-face.face_left {
background-color: #f29900;
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 9;
}
#mGall .ani-cube .cube-face.face_top {
background-color: #f29900;
transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 11;
}
#mGall .ani-cube .cube-face.face_bottom {
background-color: #f29900;
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 50px);
z-index: 5;
}
#mGall .ani-cube .cube-face.face_back {
background-color: #f29900;
transform: translate3d(0px, 0px, -50px);
z-index: 1;
}
@-webkit-keyframes ani-cube-4 {
0% {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(47deg);
}
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
transform: scale(0.8) rotateX(-63deg) rotateY(-23deg) rotateZ(47deg);
}
10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(47deg);
}
100% {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(407deg);
}
}
@keyframes ani-cube-4 {
0% {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(47deg);
}
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
transform: scale(0.8) rotateX(-63deg) rotateY(-23deg) rotateZ(47deg);
}
10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(47deg);
}
100% {
transform: scale(0.6) rotateX(-63deg) rotateY(13deg) rotateZ(407deg);
}
}
@media (min-width: 740px){
#mGall .m-gall .item a:hover .item-img img{transform: translate(0, -40%);}
}
@media (min-width: 500px){
#mGall .g-control .g-arrow button:hover{opacity:1;}
#mGall .g-control .g-arrow button:hover img{-webkit-filter: none; filter: none;}
#mGall .g-control .g-arrow button:hover p{color: #f29900;}
#mGall .g-control .g-arrow button.btn-prev:hover,
#mGall .g-control .g-arrow button.btn-next:hover{border-color: #f29900;}
#mGall .m-gall .item a:hover .item-img .link_wr .arrow_box{background: #ca1c3b;}
#mGall .m-gall .item a:hover .item-img .link_wr .arrow_box::before{background-image: url('../images/main/Prog_link_hover.png');}
}
@media (max-width: 1600px){
#mGall{padding: 40px 0;}
#mGall .ani.ani-4{top: -58px; left: -25px; transform: translate(50%, 50%) scale(0.5);}
#mGall .m-tit h2{padding-left: 122px; font-size: 46px;}
#mGall .g-control{padding: 60px 0 0 60px;}
#mGall .g-control .g-arrow button{height: 60px;}
#mGall .g-control .g-arrow button img{width: 38px;}
#mGall .gall-cont{width: 1200px; margin-top: 40px;}
#mGall .gall-cont::before{bottom: 0; height: 300px;}
#mGall .gall-cont .g-con{max-width: 1200px;}
#mGall .m-gall .item a .item-img{height: 256px; border-radius: 20px;}
#mGall .m-gall .item a .item-img .link_wr{width: 88px; height: 88px;}
#mGall .m-gall .item a .item-img .link_wr .arrow_box{top: 18px; right: 18px; width: 35px; height: 35px;}
#mGall .m-gall .item a .item-img .link_wr .arrow_box::before{width: 12px; height: 12px;}
#mGall .m-gall .item a .item-cont{margin-top: 20px;}
#mGall .m-gall .item a .item-cont p.s_tit{font-size: 18px;}
#mGall .m-gall .item a .item-cont h3.ca-tit{font-size: 22px;}
}
@media (max-width: 1200px){
#mGall .g-control{margin-right: 20px; padding: 50px 0 0 20px;}
#mGall .g-control .g-arrow button{height: 45px;}
#mGall .g-control .g-arrow button img{width: 28px;}
#mGall .g-control .g-arrow button p{margin-top: 10px; font-size: 11px;}
#mGall .gall-cont{width: 700px;}
#mGall .gall-cont .g-con{max-width: 700px;}
#mGall .m-gall .item a .item-cont p.s_tit{font-size: 16px;}
#mGall .m-gall .item a .item-cont h3.ca-tit{font-size: 18px;}
}
@media (max-width: 1040px){
#mGall .m-tit h2{font-size: 36px;}
}
@media (max-width: 740px){
#mGall{padding: 0;}
#mGall .ani.ani-4{top: -80px; left: -55px; transform: translate(50%, 50%) scale(0.3);}
#mGall .m-tit{padding: 5px 0 0 0;}
#mGall .m-tit h2{padding-left: 78px; font-size: 28px;}
#mGall .flex_box{display: block;}
#mGall .g-control{position: absolute; top: 0; right: 0; margin: 0; padding: 0;}
#mGall .g-control .g-arrow{display: flex;}
#mGall .g-control .g-arrow button.btn-next{margin-left: 0; border-left: 0;}
#mGall .gall-cont{width: 100%; margin-top: 20px;}
#mGall .m-gall .item{margin: 0 10px;}
#mGall .m-gall .slick-active{margin-top:0;}
#mGall .m-gall .slick-active + .slick-active{margin-top:0;}
#mGall .m-gall .slick-active + .slick-active + .slick-active{margin-top:0;}
#mGall .m-gall .slick-active + .slick-active + .slick-active + .slick-active{margin-top:0;}
}
@media (max-width: 500px){
#mGall .m-gall{width: 100%;}
#mGall .gall-cont{width: 100%; height: 420px;}
#mGall .gall-cont::before{border-radius: 0;}
#mGall .gall-cont .g-con{max-width: none;}
}
@media (max-width: 400px){
#mGall .ani.ani-4{top: -85px; left: -68px; transform: translate(50%, 50%) scale(0.25);}
#mGall .m-tit{padding: 4px 0 0 0;}
#mGall .m-tit h2{padding-left: 58px; font-size: 24px;}
#mGall .g-control .g-arrow button{width: 50px; height: 30px;}
#mGall .g-control .g-arrow button img{width: 22px;}
#mGall .g-control .g-arrow button p{display: none; }
#mGall .m-gall .item a .item-img .link_wr{width: 78px; height: 78px;}
#mGall .m-gall .item a .item-img .link_wr .arrow_box{width: 28px; height: 28px;}
#mGall .m-gall .item a .item-img .link_wr .arrow_box::before{width: 10px; height: 10px;}
#mGall .gall-cont{margin-top: 10px;}
}
/* section06 : Notice */
#mComm{position: relative; width: 100%; padding: 100px 0; background: #fff; z-index: 2; transition:all 0.4s ease;}
#mComm .flex_wr{display: flex; width: 100%; max-width: 1800px; margin: 0 auto;}
#mComm .tit_wr{display: flex; flex-direction: column; justify-content: space-between; width: 600px; transition:all 0.4s ease;}
#mComm .tit_wr .m-tit{}
#mComm .tit_wr .m-tit .tit_box{display: flex;}
#mComm .tit_wr .m-tit .tit_box h2{font-weight: 700; margin-right: 10px; padding-top: 15px; font-size: 92px; letter-spacing: 0.8px; color: #222; transition:all 0.4s ease;}
#mComm .tit_wr .m-tit p{margin-top: 30px; font-weight: 500; font-size: 28px; letter-spacing: -0.4px; color: #333; transition:all 0.4s ease;}
#mComm .tit_wr .main-tab{width: 250px; margin-bottom: 140px;}
#mComm .tit_wr .main-tab li{position: relative; padding: 18px 20px; border-bottom: 2px solid #cdcdcd; cursor: pointer; transition:all 0.4s ease;}
#mComm .tit_wr .main-tab li::before{content:''; position: absolute; top: 7px; left: 5px; display: block; width: 7px; height: 7px; border-radius: 50%; background: #19a598; opacity: 0;}
#mComm .tit_wr .main-tab li span{font-weight: 600; font-size: 30px; letter-spacing: -0.4px; color: #999; transition:all 0.4s ease;}
#mComm .tit_wr .main-tab li.active{border-color: #f29900;}
#mComm .tit_wr .main-tab li.active::before{opacity: 1;}
#mComm .tit_wr .main-tab li.active span{color: #222;}
#mComm .list_wr{position: relative; width: calc(100% - 600px); padding-top: 70px; transition:all 0.4s ease;}
#mComm .list_wr .main-tabcontent{position: relative; min-height: 500px; display: none;}
#mComm .list_wr a.v_more{position: absolute; top: -60px; right: 0; display: flex; align-items: center; justify-content: space-between; width: 210px; height: 46px; padding: 5px; border-radius: 50px; border: 1px solid #19a598;}
#mComm .list_wr a.v_more span{display: inline-block; padding-left: 15px; font-weight: 500; font-size: 17px; color: #222; transition:all 0.4s ease;}
#mComm .list_wr a.v_more .arrow{width: 65px; height: 34px; background: #19a598; border-radius: 50px; text-align: center; line-height: 34px;}
#mComm .list_wr a.v_more .arrow img{display: inline-block;}
#mComm .list_wr ul.list_box{display: flex; flex-wrap: wrap; transition:all 0.4s ease;}
#mComm .list_wr ul.list_box li{position: relative; width: 100%; border-bottom: 1px solid #cdcdcd; transition:all 0.4s ease;}
#mComm .list_wr ul.list_box li.empty_li{padding: 40px; font-size: 16px; text-align: center; color: #555;}
#mComm .list_wr ul.list_box li:first-child{border-top: 1px solid #cdcdcd;}
#mComm .list_wr ul.list_box li a{position: relative; display: flex; width: 100%; padding: 30px 25px 40px; transition:all 0.4s ease;}
#mComm .list_wr ul.list_box li a .date{width: 170px; padding-right: 15px;}
#mComm .list_wr ul.list_box li a .date .year{margin-bottom: 10px; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; line-height: 1; color: #19a598; word-break: keep-all;}
#mComm .list_wr ul.list_box li a .date .m-d{font-weight: 800; font-size: 32px; letter-spacing: -0.5px; line-height: 1; color: #222; word-break: keep-all;}
#mComm .list_wr ul.list_box li a .txt_wr{width: calc(100% - 170px); padding-right: 50px;}
#mComm .list_wr ul.list_box li a .txt_wr h4.tit{font-weight: 700; font-size: 26px; letter-spacing: -0.5px; line-height: 1.4; color: #222; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#mComm .list_wr ul.list_box li a .txt_wr p.cont{margin-top: 20px; font-family: 'Pretendard'; font-weight: 500; font-size: 20px; letter-spacing: -0.5px; line-height: 1.5; color: #555; word-break: keep-all; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#mComm .list_wr ul.list_box li a .link_wr{position: absolute; top: 25px; right: 25px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #f29900; text-align: center; line-height: 40px; transition:all 0.4s ease;}
#mComm .list_wr ul.list_box li a .link_wr img{display: inline-block; transition:all 0.4s ease;}
/* ani-5 : 삼각형 애니메이션 */
#mComm .tit_wr .m-tit .tit_box #logo{display: inline-block; position: relative; top: 0; margin-top: -24px; width: 100px; height: 108px;}
#mComm .tit_wr .m-tit .tit_box #logo polygon {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#mComm .tit_wr .m-tit .tit_box #logo polygon:nth-of-type(1) {
-webkit-animation-name: one;
animation-name: one;
}
#mComm .tit_wr .m-tit .tit_box #logo polygon:nth-of-type(2) {
-webkit-animation-name: two;
animation-name: two;
}
#mComm .tit_wr .m-tit .tit_box #logo polygon:nth-of-type(3) {
-webkit-animation-name: three;
animation-name: three;
}
@-webkit-keyframes one {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(-6px, -4px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
75% {
transform: translate3d(-6px, 4px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes one {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(-6px, -4px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
75% {
transform: translate3d(-6px, 4px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes two {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(6px, -4px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
75% {
transform: translate3d(0, -6px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes two {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(6px, -4px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
75% {
transform: translate3d(0, -6px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes three {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(0, 6px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
75% {
transform: translate3d(6px, 4px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes three {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(0, 6px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
75% {
transform: translate3d(6px, 4px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@media (min-width: 1040px){
#mComm .list_wr a.v_more:hover span{padding-left: 20px;}
#mComm .tit_wr .main-tab li:hover{border-color: #f29900;}
#mComm .tit_wr .main-tab li:hover::before{opacity: 1;}
#mComm .tit_wr .main-tab li:hover span{color: #222;}
#mComm .list_wr ul.list_box li:hover a .link_wr{background: #f29900;}
#mComm .list_wr ul.list_box li:hover a .link_wr img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
}
@media (max-width: 1840px){
#mComm{padding: 100px 40px;}
}
@media (max-width: 1600px){
#mComm{padding: 70px 40px 50px;}
#mComm .tit_wr{width: 420px;}
#mComm .tit_wr .m-tit .tit_box h2{font-size: 68px;}
#mComm .tit_wr .m-tit p{font-size: 24px;}
#mComm .tit_wr .m-tit .tit_box #logo{transform: scale(0.8);}
#mComm .tit_wr .main-tab li{padding: 15px 20px;}
#mComm .tit_wr .main-tab li span{font-size: 26px;}
#mComm .list_wr{width: calc(100% - 420px);}
#mComm .list_wr ul.list_box li a{padding: 20px 25px 30px;}
#mComm .list_wr ul.list_box li a .date{width: 140px;}
#mComm .list_wr ul.list_box li a .date .year{font-size: 18px;}
#mComm .list_wr ul.list_box li a .date .m-d{font-size: 26px;}
#mComm .list_wr ul.list_box li a .txt_wr{width: calc(100% - 140px);}
#mComm .list_wr ul.list_box li a .txt_wr h4.tit{font-size: 22px;}
#mComm .list_wr ul.list_box li a .txt_wr p.cont{margin-top: 10px; font-size: 18px;}
#mComm .list_wr ul.list_box li a .link_wr{right: 20px;}
#mComm .list_wr a.v_more{width: 198px; height: 44px;}
#mComm .list_wr a.v_more span{font-size: 14px;}
#mComm .list_wr a.v_more .arrow{height: 32px; line-height: 32px;}
#mComm .list_wr a.v_more .arrow img{width: 24px;}
}
@media (max-width: 1040px){
#mComm .flex_wr{display: block;}
#mComm .tit_wr{width: 100%;}
#mComm .tit_wr .m-tit .tit_box h2{font-size: 42px;}
#mComm .tit_wr .main-tab{width: 100%; display: flex; margin-top: 20px; margin-bottom: 0; /* justify-content: center; */}
#mComm .tit_wr .m-tit p{margin-top: 0; font-size: 22px;}
#mComm .tit_wr .main-tab li span{font-size: 24px;}
#mComm .tit_wr .m-tit .tit_box #logo{right: 30px; transform: scale(0.5);}
#mComm .list_wr{width: 100%;}
#mComm .list_wr .main-tabcontent{min-height: 0;}
#mComm .list_wr ul.list_box li a{padding: 15px 20px 25px;}
#mComm .list_wr ul.list_box li a .txt_wr h4.tit{font-size: 20px;}
#mComm .list_wr ul.list_box li a .txt_wr p.cont{margin-top: 5px; font-size: 16px;}
#mComm .list_wr a.v_more{width: 178px; height: 40px;}
#mComm .list_wr a.v_more span{padding-left: 10px; font-size: 12px;}
#mComm .list_wr a.v_more .arrow{width: 56px; height: 28px; line-height: 28px;}
#mComm .list_wr a.v_more .arrow img{width: 22px;}
}
@media (max-width: 740px){
#mComm{padding: 40px 20px;}
#mComm .tit_wr .m-tit .tit_box h2{font-size: 30px;}
#mComm .tit_wr .m-tit p{font-size: 18px;}
#mComm .tit_wr .main-tab{justify-content: center;}
#mComm .tit_wr .main-tab li{padding: 10px 20px;}
#mComm .tit_wr .main-tab li::before{top: 8px; left: 10px; width: 4px; height: 4px;}
#mComm .tit_wr .main-tab li span{font-size: 20px;}
#mComm .list_wr{padding-top: 80px;}
#mComm .list_wr ul.list_box li a{padding: 15px 15px 25px;}
#mComm .list_wr ul.list_box li a .date{width: 80px;}
#mComm .list_wr ul.list_box li a .date .year{margin-bottom: 5px; font-size: 16px;}
#mComm .list_wr ul.list_box li a .date .m-d{font-size: 18px;}
#mComm .list_wr ul.list_box li a .txt_wr{width: calc(100% - 80px); padding-right: 36px;}
#mComm .list_wr ul.list_box li a .txt_wr h4.tit{font-size: 17px;}
#mComm .list_wr ul.list_box li a .txt_wr p.cont{font-size: 15px;}
#mComm .list_wr ul.list_box li a .link_wr{top: 18px; right: 10px; width: 30px; height: 30px; line-height: 30px;}
#mComm .list_wr ul.list_box li a .link_wr img{width: 10px;}
}
@media (max-width: 500px){
#mComm .tit_wr .m-tit .tit_box{align-items: flex-start;}
#mComm .tit_wr .m-tit .tit_box #logo{height: 80px; margin-top: -18px;}
#mComm .tit_wr .main-tab li span{font-size: 18px;}
#mComm .list_wr{padding-top: 62px;}
#mComm .list_wr a.v_more{top: -48px; width: 142px; height: 34px;}
#mComm .list_wr a.v_more span{padding-left: 6px; font-size: 11px;}
#mComm .list_wr a.v_more .arrow{width: 46px; height: 24px; line-height: 24px;}
#mComm .list_wr ul.list_box li a{padding: 15px 5px 25px;}
#mComm .list_wr ul.list_box li a .txt_wr{padding-right: 22px;}
#mComm .list_wr ul.list_box li a .link_wr{top: 12px; right: 5px; width: 25px; height: 25px; line-height: 25px;}
#mComm .list_wr ul.list_box li a .link_wr img{width: 8px;}
/* #mComm .list_wr a.v_more{position: relative; top: 0; margin: 0 auto 20px;} */
}
@media (max-width: 350px){
#mComm .tit_wr .main-tab li{padding: 10px;}
#mComm .tit_wr .main-tab li::before{left: 3px;}
#mComm .tit_wr .main-tab li span{font-size: 17px;}
}
/* section07 : 파트너 로고 */
#mPart{position: relative; width: 100%; padding: 40px 0; background: #fff; z-index: 2; transition:all 0.4s ease;}
#mPart ul.logo_list{display: flex; align-items: center; justify-content: center; gap: 30px;}
#mPart ul.logo_list li{}
@media (max-width: 1200px){
#mPart ul.logo_list{gap: 20px;}
#mPart ul.logo_list li:nth-child(1) a img{height: 40px;}
#mPart ul.logo_list li:nth-child(2) a img{height: 34px;}
#mPart ul.logo_list li:nth-child(3) a img{height: 52px;}
#mPart ul.logo_list li:nth-child(4) a img{height: 48px;}
}
@media (max-width: 1040px){
#mPart{padding: 20px;}
#mPart ul.logo_list{flex-wrap: wrap; gap: 10px;}
#mPart ul.logo_list li:nth-child(1) a img{height: 34px;}
#mPart ul.logo_list li:nth-child(2) a img{height: 28px;}
#mPart ul.logo_list li:nth-child(3) a img{height: 40px;}
#mPart ul.logo_list li:nth-child(4) a img{height: 36px;}
}
/* 애니메이션 */
.spin_ain {animation:spin_ain 10s infinite linear;}
@keyframes spin_ain {
0{transform: rotate(0)}
50%{transform:rotate(180deg)}
100%{transform:rotate(360deg)}
}
.up_down {animation: up_down 10s infinite linear;}
@keyframes up_down {
0{transform: translateY(0)}
50%{transform: translateY(30px)}
100%{transform: translateY(0)}
}
.scale_ani{animation: scale_ani 10s infinite linear;}
@keyframes scale_ani {
0{transform: scale(1)}
50%{transform: scale(0.9)}
100%{transform: scale(1)}
}
.left_ani{animation: left_ani 10s infinite linear;}
@keyframes left_ani {
0{transform: rotate(0deg)}
50%{transform: rotate(40deg)}
100%{transform: rotate(0deg)}
}
.right_ani{animation: right_ani 10s infinite linear;}
@keyframes right_ani {
0{transform: rotate(0deg)}
50%{transform: rotate(-40deg)}
100%{transform: rotate(0deg)}
}
.rotate-in-2-br-ccw {
-webkit-animation: rotate-in-2-br-ccw 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-in-2-br-ccw 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-in-2-br-ccw {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@keyframes rotate-in-2-br-ccw {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
.rotate-in-2-bl-cw {
-webkit-animation: rotate-in-2-bl-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: rotate-in-2-bl-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes rotate-in-2-bl-cw {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 1;
}
}
@keyframes rotate-in-2-bl-cw {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 1;
}
}
.scale-in-center {
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
/* Footer */
#footer{position: relative; z-index: 5;}
#footer > div {width: 100%; background: #fff; font-size: 17px; font-weight:500; border-top: 1px solid #fae8eb;}
#footer > div > div{max-width: 1800px; margin: 0 auto; background: url('/images/common/logo.png') 100% 70px no-repeat; padding: 70px 0 100px;}
#footer > div > div .f_name{font-size: 22px; font-weight: 500; line-height: 32px; color: #fff; word-break: keep-all;}
#footer > div > div .address{word-break: keep-all;}
#footer > div > div ul.ad_sub{overflow: hidden; display: flex; gap: 40px; width: 100%; font-weight: 500; font-size: 20px; text-align: left; color: #888; line-height: 32px; }
#footer > div > div ul.ad_sub a{color: #888; }
#footer > div > div ul.ad_sub b{font-weight: 700; color: #222;}
#footer span.company_info{display: block; margin-bottom: 20px; font-family: 'Paperlogy', sans-serif; font-size: 16px; color: #888; line-height: 1.4;}
#footer .bott_wr{/* display: flex; justify-content: space-between; */ margin-top: 40px;}
#footer .bott_wr .copy{font-family: 'Noto Sans KR'; font-weight: 400; font-size: 18px; color: #aaa; margin-top:28px; word-break: keep-all;}
#footer .bott_wr a{font-family: 'Pretendard'; color: #222;}
#footer .bott_wr .link_wr{display: flex; align-items: flex-end; gap: 15px; font-size: 20px; margin-top: 20px;}
@media (max-width: 1800px){
#footer > div{padding: 0 40px;}
}
@media (max-width: 1600px){
#footer > div > div{padding: 40px 0 50px; background: url('/images/common/logo.png') 100% 40px no-repeat;}
#footer > div > div ul.ad_sub{gap: 25px; font-size: 17px;}
#footer .bott_wr .link_wr{font-size: 17px;}
#footer .bott_wr .copy{font-size: 16px;}
}
@media (max-width: 1200px){
#footer > div > div{height: auto; padding-bottom: 100px; text-align: center; background: url('/images/common/logo.png') 50% 90% no-repeat; background-size: 200px;}
#footer > div > div .f_name{font-size: 20px;}
#footer > div > div ul.ad_sub{width: 100%; font-size: 15px; margin: 10px 0 15px; line-height: 24px; gap: 15px;}
#footer > div > div ul.ad_sub{display: flex; flex-wrap: wrap; justify-content: center; text-align: left; margin: 0 auto; }
#footer > div > div ul.ad_sub li{float: none; text-align: left;}
#footer .bott_wr{display: block; margin-top: 0;}
#footer .bott_wr .link_wr{justify-content: center; flex-wrap: wrap; font-size: 15px;}
#footer .bott_wr .copy{font-size: 14px;}
#footer .bott_wr a img{width: 15px;}
}
@media (max-width:1000px){
#footer > div > div .f_name{font-size: 18px; transition: all .4s;}
#footer > div > div ul.ad_sub{font-size: 14px; transition: all .4s;}
#footer .bott_wr .copy{font-size: 12px; transition: all .4s;}
}
@media (max-width:500px){
#footer > div{padding: 0 20px;}
#footer > div > div{background-size: 160px; padding: 30px 0 85px; background-position: 50% 95%;}
#footer > div > div ul.ad_sub{gap: 10px; text-align: center;}
#footer > div > div ul.ad_sub li{width: 100%; text-align: center;}
#footer .bott_wr .copy{margin-top: 15px;}
#footer .bott_wr .link_wr{margin-right: 10px;}
#footer .bott_wr .link_wr li a{font-size: 12px !important;}
}
/* 퀵메뉴 */
#quick_menu{position: fixed; bottom: 120px; right: 20px; z-index: 7;}
#quick_menu .quick_wr #quick{font-size: 19px!important; border-radius: 50%; border: 0 !important; background: #333 !important; color: #fff!important; width:89px!important; height:89px!important; -webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s; z-index: 9999;}
#quick_menu .quick_wr #quick img{}
#quick_menu .quick_wr #quick img.close{display: none;}
#quick_menu .quick_wr #quick img.list{}
#quick_menu .quick_wr #quick span{display: block; width: 100%; margin-top: 0; font-family: "Urbanist"; font-weight: 600; font-size: 14px; color: #fff;}
#quick_menu .quick_wr ul.quick_list{position: absolute; bottom: 98px; right: -5px; z-index: -1; transition:all .6s ease;}
#quick_menu .quick_wr ul.quick_list li{position: relative;}
#quick_menu .quick_wr ul.quick_list li + li{margin-top: 10px;}
#quick_menu .quick_wr ul.quick_list li::before{content:''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: block; width: 1px; height: 10px; background: #333;}
#quick_menu .quick_wr ul.quick_list li a{position: relative; overflow: hidden; display: block; width: 100px; height: 100px; border-radius: 50%; text-align: center;}
#quick_menu .quick_wr ul.quick_list li a::before{content:''; position: absolute; bottom: -5px; left: 0; display: block; width: 100%; height: 44px; background: rgba(255,255,255,.2);}
#quick_menu .quick_wr ul.quick_list li.quick01 a{padding-top: 16px; background: #fd9226;}
#quick_menu .quick_wr ul.quick_list li.quick02 a{padding-top: 13px; background: #1773e0;}
#quick_menu .quick_wr ul.quick_list li a img{display: inline-block; margin-bottom: 15px;}
#quick_menu .quick_wr ul.quick_list li a span{display: block; font-family: 'Paperlogy'; font-weight: 600; font-size: 16px; color: #fff;}
#quick_menu .quick_wr ul.quick_list.hidden{opacity: 0; transform: translateY(400px);}
#quick_menu .quick_wr #quick.hidden img.close{display: inline-block;}
#quick_menu .quick_wr #quick.hidden img.list{display: none;}
@media (max-width:1040px){
#quick_menu{bottom: 96px;}
#quick_menu .quick_wr ul.quick_list{bottom: 80px;}
#quick_menu .quick_wr ul.quick_list li a{width: 80px; height: 80px;}
#quick_menu .quick_wr ul.quick_list li.quick01 a{padding-top: 13px;}
#quick_menu .quick_wr ul.quick_list li a::before{height: 38px;}
#quick_menu .quick_wr ul.quick_list li img{width: 30px;}
#quick_menu .quick_wr ul.quick_list li a span{font-size: 14px; transform: translateY(-5px);}
#quick_menu .quick_wr #quick{width: 70px !important; height: 70px !important;}
#quick_menu .quick_wr #quick span{font-size: 11px;}
#quick_menu .quick_wr #quick img.close{width: 20px; vertical-align: top;}
#quick_menu .quick_wr #quick.hidden img.list{width: 18px; vertical-align: top;}
}
@media (max-width:500px){
#quick_menu{bottom: 76px; right: 10px;}
#quick_menu .quick_wr ul.quick_list{bottom: 55px; right: 0;}
#quick_menu .quick_wr ul.quick_list li + li{margin-top: 5px;}
#quick_menu .quick_wr ul.quick_list li a{width: 50px; height: 50px;}
#quick_menu .quick_wr ul.quick_list li.quick01 a,
#quick_menu .quick_wr ul.quick_list li.quick02 a{padding-top: 0;}
#quick_menu .quick_wr ul.quick_list li a::before{display: none;}
#quick_menu .quick_wr ul.quick_list li a img{display: none;}
#quick_menu .quick_wr ul.quick_list li a span{font-size: 12px; line-height: 50px; transform: translateY(0);}
#quick_menu .quick_wr #quick{width: 50px !important; height: 50px !important;}
#quick_menu .quick_wr #quick span{font-size: 11px;}
#quick_menu .quick_wr #quick img.close{display: none !important;}
#quick_menu .quick_wr #quick img.list{display: none;}
}
/* 탑 버튼 */
#top_btn{font-size: 19px!important; border-radius: 50%; border: 0 !important; background: #333 !important; color: #fff!important; width:89px!important; height:89px!important; -webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;}
#top_btn img{display: block; width: 23px; margin: 0 auto; padding-top: 20px;}
#top_btn span{display: block; width: 100%; margin-top: -8px; font-family: 'Righteous'; font-size: 14px; color: #fff;}
@media (max-width: 1040px){
#top_btn{width: 70px !important; height: 70px !important;}
#top_btn img{width: 18px; padding-top: 15px;}
}
@media (max-width: 500px){
#top_btn{right: 10px !important; width: 50px !important; height: 50px !important;}
#top_btn img{display: none;}
#top_btn span{margin-top: 0; font-size: 12px;}
}