@charset "UTF-8"; /*------------------------------------------------------------------- 공통 -------------------------------------------------------------------*/ body.fixed{position: fixed;} #sub{padding-top:11.8rem} /*------------------------------------------------------------------- slide_map -------------------------------------------------------------------*/ #slide_map{ display: none; opacity: 0; visibility: hidden; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; z-index: -999; width: 100vw; height: 100vh;/*display: none; opacity: 0; visibility: hidden; */ -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #slide_map::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.1);backdrop-filter:blur(6px);z-index:-1} #slide_map.on{display: flex; opacity: 1; visibility: visible; z-index: 999;} #slide_map .inner{width: 98%; max-width:160rem; height:calc(100% - 20rem);background-color: #fff;border-radius:2.4rem} #slide_map .inner .binds{position:relative;height: 100%;padding:8rem 6rem 6rem} #slide_map .inner .binds .t{position:absolute;left:0;top:0;width:100%;display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem; height:8rem; padding: 0 2rem} #slide_map .inner .binds .t .toputil_control{margin-left: auto;} #slide_map .inner .binds .t .toputil_control a, #slide_map .inner .binds .t .toputil_control button{display: none;} #slide_map .inner .binds .t .toputil_control .allmenu_btn_open{position:absolute;right:4rem;top:4rem;display: block;transition:all .4s} #slide_map .inner .binds .t .toputil_control .allmenu_btn_open:hover{transform:rotate(180deg)} #slide_map .inner .binds >ul{position:relative;display:flex;flex-wrap:wrap;overflow-y: auto; width: 100%;height:100%; max-height:100%; padding:0 1rem 3rem;gap:0 6rem} #slide_map .inner .binds >ul::-webkit-scrollbar{width:.6rem} #slide_map .inner .binds >ul::-webkit-scrollbar-thumb{background:#0073b1;border-radius:.3rem} #slide_map .inner .binds >ul::-webkit-scrollbar-track{background:transparent} #slide_map .inner .binds >ul >li{width:calc((100% - 18rem) / 4)} #slide_map .inner .binds >ul >li:nth-child(5){position:absolute;left:0;top:45.5rem} #slide_map .inner .binds >ul >li:nth-child(6){position:absolute;left:calc(((100% - 18rem) / 4) + 6rem);top:45.5rem} #slide_map .inner .binds >ul >li >a{position:relative;display:block;margin-bottom:1.2rem;padding:0 0 2rem 2rem;color:#151515;font-size:2rem;font-weight:700;border-bottom:2px solid #eee} #slide_map .inner .binds >ul >li >div .tmenu_ti{display: none;} #slide_map .inner .binds >ul >li >div > ul{padding:0 0 0 2rem} #slide_map .inner .binds >ul >li >div > ul > li{position:relative} #slide_map .inner .binds >ul >li >div > ul > li.has_sub > a{padding-right:3rem} #slide_map .inner .binds >ul >li >div > ul > li.has_sub > a::before{content:"";position:absolute;right:0;top:1.2rem;width:2rem;height:2rem;background:url(../../../images/site/kor/layout/icon_allm_arrow.svg) center / contain no-repeat;transition:all .3s} #slide_map .inner .binds >ul >li >div > ul > li.has_sub > a.open::before{transform:rotate(180deg);background-image:url(../../../images/site/kor/layout/icon_allm_arrow_blue.svg)} #slide_map .inner .binds >ul >li >div > ul > li > a.open{border-color:#0073B1;color:#0073B1;font-weight:600} #slide_map .inner .binds >ul >li >div > ul > li > a{display:block;padding:1.2rem 0;line-height:1.9rem;font-size:1.6rem;color:#353535;font-weight:500;border-bottom:1px solid #E5E5E5} #slide_map .inner .binds >ul >li >div > ul > li > ul{display:none;margin:.4rem 0;padding:1.2rem .8rem;border-bottom:1px solid #aaa} #slide_map .inner .binds >ul >li >div > ul > li > ul > li{position:relative;padding-left:1rem} #slide_map .inner .binds >ul >li >div > ul > li > ul > li + li{margin-top:.8rem} #slide_map .inner .binds >ul >li >div > ul > li > ul > li > a{display:block;font-size:1.5rem;line-height:1.8rem;color:#555;font-weight:400;transition:color .3s} #slide_map .inner .binds >ul >li >div > ul > li > ul > li > a::before{content:"·";position:absolute;left:0;top:0} #slide_map .inner .binds >ul >li >div > ul > li > ul > li > a:hover{color:#151515} #slide_map .inner .binds >ul >li >div > ul > li > ul > li > ul{display:none} /*------------------------------------------------------------------- header -------------------------------------------------------------------*/ #header{position:fixed; top: 0; left: 0;width: 100%;z-index:10} #header .header_top{padding:0 2rem;background:#0073B1;color:rgba(255,255,255,.8);font-size:1.5rem} #header .header_top .hTop_wrap{display:flex;align-items:center;justify-content:space-between;height:3.8rem} #header .header_top ul{display:flex} #header .header_top ul li{position:relative;margin-right:.8rem;padding-right:1.2rem} #header .header_top ul li::before{content:"·";position:absolute;right:0;top:0;color:rgba(255,255,255,.5);font-size:1.5rem} #header .header_top ul li:last-child{margin-right:0;padding-right:0} #header .header_top ul li:last-child::before{display:none} #header .header_top ul li a:hover, #header .header_top ul li a:focus{text-decoration:underline} #header .header_top .hTop_util{display:flex} #header .header_top .hTop_util .lang{position:relative;padding-right:1.2rem;border:0;background:transparent url(../../../images/site/kor/layout/icon_lang_arrow.svg) right center no-repeat;vertical-align:middle;cursor:pointer} #header .header_top .hTop_util .lang option{color:#151515} #header .header_wrap{position:relative;display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height: 8rem; padding: 0 2rem; background-color: #fff;border-bottom:1px solid #eee;transition:background .3s} #header #logo{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; position: relative; z-index: 1; height: 8rem; font-size: 10px;} #header #logo >a{display: block; width: 15em; height: 4.9em; text-indent: -9999px; background: url(../../../images/site/kor/layout/logo.png) no-repeat center center / 100% auto;} #header #nav{overflow: hidden; height: 8rem;width: 100%;position: absolute;left:0;top:0;background:rgba(255,255,255,0);} #header #nav #blind{display:none;position: absolute; top: 100%; left: 0; z-index: -1; width: 100vw; height: 0; background-color: #fff; box-shadow: 0 10px 10px rgba(0,0,0,0.05); border-top: 1px solid #EEE;} #header #nav #gnb{display: block;text-align:center; position: absolute; top: 0; left: 50%; width: 100%; height: 8rem;padding:0 11rem 0 20rem; transform: translateX(-50%)} #header #nav #gnb >ul{display:inline-flex;justify-content: center; align-items: flex-start;max-width:100%;height: 100%;transition:all .3s} #header #nav #gnb >ul >li{position:relative;width:auto;height: 100%;transition:all .3s} #header #nav #gnb >ul >li >a{position:relative;display:block;height: 100%;z-index:1} #header #nav #gnb >ul >li >a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:#0073B1;z-index:-1;transition:all .3s} #header #nav #gnb >ul >li >a.on::after{left:0;width:100%} #header #nav #gnb >ul >li >a >span{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%;font-size:2.1rem; color: #101C5C; font-weight: 700; transition: all 0.2s linear;margin:0 auto;padding:0 2rem;white-space:nowrap} #header #nav #gnb >ul >li >a.on >span{color: #0073B1;} #header #nav #gnb >ul >li >div.on{background:linear-gradient(180deg, rgba(0, 115, 177, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%)} #header #nav #gnb >ul >li >div{position:absolute;left:0;top:100%;width:100%;opacity: 0;overflow:hidden;border-right:1px solid #f5f5f5;padding:3.4rem 1rem} #header #nav #gnb >ul >li:first-child >div{border-left:1px solid #f5f5f5} #header #nav #gnb >ul >li >div >.tmenu_ti{display:none; position: relative; width: 36rem; height: 100%; padding: 4rem 6rem 4rem 0;} #header #nav #gnb >ul >li >div >.tmenu_ti strong{display: block; width: 100%; color: #151515; font-size: 3.2rem; font-weight: 700; line-height: 1.2;} #header #nav #gnb >ul >li >div >.tmenu_ti p{margin-top: 1.2rem; color: #555; font-size: 1.7rem; font-weight: 400; line-height: 1.2;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper{width: 100%; margin-top: 2rem;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper .swiper-wrapper{height: auto;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper .swiper-wrapper .swiper-slide{display: block; position: relative; width: 100%; height: 0; padding-top: 60%; border: 1px solid #eee;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper .swiper-wrapper .swiper-slide img{position: absolute; top: 0;left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper .s_paging{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.4rem; margin-top: 1.2rem;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper .s_paging .swiper-pagination-bullet{opacity: 1; display: block; width: 0.8rem; height: 0.8rem; margin: 0; background-color: #E3E4E8; border-radius: 2rem; transition: all 0.2s linear;} #header #nav #gnb >ul >li >div >.tmenu_ti .swiper .s_paging .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 2rem; background-color: #555;} #header #nav #gnb >ul >li >div >ul{overflow: hidden} #header #nav #gnb >ul >li >div >ul >li{position: relative; width:100%; position: relative;padding:.6rem 0; z-index: 1;} #header #nav #gnb >ul >li >div >ul >li.menu_none{display:none} #header #nav #gnb >ul >li >div >ul >li >a{ display: block; font-size: 1.7rem; font-weight: 600; color:#151515; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;word-break:keep-all; } #header #nav #gnb >ul >li >div >ul >li >a.on, #header #nav #gnb >ul >li >div >ul >li >a:hover, #header #nav #gnb >ul >li >div >ul >li >a:active{color: #0073B1;} #header #nav #gnb >ul >li >div >ul >li >ul{display:none;margin-top: 1.4rem;} #header #nav #gnb >ul >li >div >ul >li >ul >li{position: relative; padding-left: 0.8rem;} #header #nav #gnb >ul >li >div >ul >li >ul >li:not(:first-child){margin-top: 0.8rem;} #header #nav #gnb >ul >li >div >ul >li >ul >li >a{ color: #555; font-size: 1.6rem; font-weight: 400; line-height: 1.4; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #header #nav #gnb >ul >li >div >ul >li >ul >li >a.on, #header #nav #gnb >ul >li >div >ul >li >ul >li >a:hover, #header #nav #gnb >ul >li >div >ul >li >ul >li >a:active{text-decoration: underline; text-underline-position: under; color: #353535;} #header #nav #gnb >ul >li >div >ul >li >ul >li >a:before{content: ""; display: block; position: absolute; top: 0.85rem; left: 2px; width: 2px; height: 2px; background-color: #555; border-radius: 50%;} #header #nav #gnb >ul >li >div >ul >li >ul >li >a.on:before, #header #nav #gnb >ul >li >div >ul >li >ul >li >a:hover:before, #header #nav #gnb >ul >li >div >ul >li >ul >li >a:active:before{background-color: #353535;} #header #nav #gnb >ul >li >div >ul >li >ul >li >ul{display:none;} #header #nav #gnb >ul >li >div >ul >li >ul >li >ul >li >ul{display:none;} #header.on .header_wrap, #header.sch_on .header_wrap{box-shadow:none;background:#fff} #header.on #nav{background:rgba(255,255,255,1);box-shadow:0 0 .5rem rgba(0,0,0,.1)} #header.on #nav #gnb{border-bottom:1px solid #eee} #header.on #nav #gnb >ul >li{width:28rem} #header.on #nav #gnb >ul >li >div{visibility:visible} .toputil_control{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2.4rem;position: relative; z-index: 1; height: 8rem; font-size: 10px;} .toputil_control a, .toputil_control button{display: block; position: relative; width: 2.4em; height: 2.4em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; text-indent: -9999px; transition: all 0.2s linear;} /* .toputil_control a[data-icon="1"]{width: 7.4em; background-image: url(../../../images/site/kor/layout/header_img01.png);} .toputil_control a[data-icon="2"]{background-image: url(../../../images/site/kor/layout/header_img02.svg);} .toputil_control a[data-icon="2"]:hover{background-image: url(../../../images/site/kor/layout/header_img03.svg);} .toputil_control a[data-icon="3"]{background-image: url(../../../images/site/kor/layout/header_img04.svg);} .toputil_control a[data-icon="3"]:hover{background-image: url(../../../images/site/kor/layout/header_img05.svg);} */ .toputil_control a[data-icon="1"]{background-image: url(../../../images/site/kor/layout/header_img06.svg);} .toputil_control a[data-icon="1"]:hover{background-image: url(../../../images/site/kor/layout/header_img07.svg);} .toputil_control .allmenu_btn_open{text-indent: -9999px;} .toputil_control .allmenu_btn_open:before, .toputil_control .allmenu_btn_open:after{content: ""; display: block; position: absolute; top: 2px; right: 0; width: 100%; height: 2px; background-color: #151515; transition: all 0.2s linear;} .toputil_control .allmenu_btn_open:after{top: auto; bottom: 2px;} .toputil_control .allmenu_btn_open:hover:before, .toputil_control .allmenu_btn_open:hover:after{background-color: #0073B1;} .toputil_control .allmenu_btn_open span{display: block; width: 100%; height: 100%;} .toputil_control .allmenu_btn_open span:before{content: ""; display: block; position: absolute; top: 50%; right: 0; width: 100%; height: 2px; background-color: #151515; margin-top: -1px; transition: all 0.2s linear;} .toputil_control .allmenu_btn_open:hover span:before{width: calc(100% - 0.5rem); background-color: #0073B1;} .search_box{display:none;position:absolute;left:0;top:100%;width:100%;padding:6rem 0;background:#fff;border-top:1px solid #eee;z-index:1} .search_box::before{content:"";position:absolute;left:0;top:0;top:100%;width:100%;height:100vh;background:rgba(0,0,0,.6)} .search_box .inner{width:100%;max-width:calc(1600px + 4rem);margin:0 auto;padding:0 2rem} .search_box .search_wrap{display:flex;align-items:center;gap:0 2rem;width:100%;max-width:84.8rem;margin:0 auto} .search_box .search_wrap > *{flex:auto} .search_box .search_bar{display:flex;gap:1.2rem;align-items:center} .search_box input[type=text], .search_box select{width:100%;height:5.8rem;padding:0 2rem;border:1px solid #ddd;border-radius:10px;font-size:1.7rem;color:#151515;font-weight:500} .search_box select{padding-right:5rem;max-width:16rem;background:url(../../../images/site/kor/layout/icon_search_arrow.svg) right 2rem center no-repeat;background-size:2.4rem auto;text-overflow:ellipsis} .search_box .search_input{flex:auto;position:relative} .search_box .search_input input[type=text]{padding-right:5rem} .search_box .search_input .btn_submit{position:absolute;right:2rem;top:50%;width:2.4rem;height:2.4rem;transform:translateY(-50%);background:url(../../../images/site/kor/layout/icon_search.svg) center / contain no-repeat} .search_box input[type=text]::placeholder{color:#151515} .search_box input[type=text]::-webkit-input-placeholder{color:#151515} .search_box input[type=text]::-moz-placeholder{color:#151515} .search_box .btn_close{flex:none;flex-shrink:0;display:block;width:5.6rem;height:5.6rem;background:#0073B1;border-radius:.8rem;color:#fff;overflow:hidden} .search_box .btn_close::before{content:"";display:block;width:100%;height:100%;background:url(../../../images/site/kor/layout/icon_search_close.svg) center no-repeat;background-size:2.4rem auto;transition:all .3s} .search_box .btn_close:hover::before{transform:rotate(180deg)} .search_box button:focus{outline:auto;outline-color:#000} #slide_map.on .toputil_control .allmenu_btn_open:before {top:45%;transform:rotate(45deg)} #slide_map.on .toputil_control .allmenu_btn_open:after {bottom:45%;top:auto;transform:rotate(-45deg)} #slide_map.on .toputil_control .allmenu_btn_open span:before {width:0;background-color:transparent} #slide_map.on .toputil_control .allmenu_btn_open:before, #slide_map.on .toputil_control .allmenu_btn_open:after{background:#151515} /*------------------------------------------------------------------- visual -------------------------------------------------------------------*/ #visual{padding-top:7rem} #visual .inner{display: flex;flex-wrap: wrap;gap: 1rem 3rem;width: 100%;max-width: calc(1600px + 4rem);height: 100%;margin: 0 auto 2.4rem;padding: 0 2rem;} #visual .inner h2.title{display: block;margin-bottom: 2.5rem;font-size:7.2rem;color:#151515;font-weight:800;line-height: 1.2} #visual .inner h3{margin-right: auto; margin-bottom: 0;} #path{margin-bottom:2.4rem} #path .inner{display:flex;flex-wrap: wrap; justify-content: flex-start; align-items:center;gap:.8rem} #path .navi{position:relative;display:flex;flex-wrap: wrap; justify-content: flex-start; align-items:center;padding:1.2rem 1.6rem;font-size:1.5rem;background:#F6F6F6;border-radius:5rem;color:rgba(85,85,85,.8);z-index:2} #path .navi > li{position:relative;margin-right:2.4rem;line-height:1.8rem} #path .navi > li::before{content:"";position:absolute;left:-2rem;top:0;width:1.6rem;height:1.6rem;background:url(../../../images/site/kor/layout/icon_location_arrow2.svg) center no-repeat} #path .navi > li:last-child{margin-right:0} #path .navi > li:first-child::before{display:none} #path .navi > li > a{position:relative;display:block;color:#151515} #path .navi .home a{display:block;width:1.6rem;height:1.6rem;text-indent:-9999px;background:url(../../../images/site/kor/layout/icon_home.svg) center/contain no-repeat} #path .navi li ul {display: none;position: absolute;left: 0;top:calc(100% + 1.2rem);min-width:100%;background: #fff;padding:1.2rem;border-radius:.5rem;box-shadow:0 .6rem 1rem 0 rgba(0, 0, 0, .1);z-index: 2;border:1px solid #E6E8EA} #path .navi li ul > li + li{margin-top:.8rem;padding-top:.8rem;border-top:1px solid #E6E8EA} #path .navi li ul > li > a{display:block;font-size:1.4rem;color:#6D7882;white-space:nowrap;} #path .navi li ul > li > a:hover{text-decoration:underline} #path .navi a.has_sub{padding-right:3rem} #path .navi a.has_sub::after {content: "";position:absolute;right:0;top:.1rem;width:1.6rem;height:1.6rem;margin-left: 0.4rem;font-size: 0.7rem;transition: transform 0.3s;background:url(../../../images/site/kor/layout/icon_location_subArr.svg) center no-repeat;background-size:1rem auto} #path .navi a.has_sub.active::after {transform: rotate(-180deg);} .share{flex-shrink:0;display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;gap:.8rem} .share > li{position: relative;} .share > li > a{display:block;width:4rem;height:4rem;background-color:#F6F6F6;text-indent:-9999px;border-radius:50%;border:1px solid transparent;background-position:center;background-repeat:no-repeat;transition:all .2s} .share > li > a.sh{background-image: url(../../../images/site/kor/layout/icon_share.svg);} .share > li > a.print{background-image: url(../../../images/site/kor/layout/icon_print.svg);} .share > li > a.copy_url{background-image: url(../../../images/site/kor/layout/icon_copy.svg);} .share > li > a.sh + ul{opacity: 0; visibility: hidden; position: absolute; top: 100%; left: -1px; z-index: 1;margin-top:1rem;width: calc(100% + 2px); height: auto; border: 1px solid #E3E3E3;-webkit-transition: all 0.2s linear; transition: all 0.2s linear;} .share > li > a.sh.active + ul{opacity: 1; visibility: visible;} .share > li > a.sh + ul > li{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height:4rem; background-color: #fff;} .share > li > a.sh + ul > li:not(:first-child){border-top: 1px solid #E3E3E3;} .share > li > a.sh + ul > li > a{display: block;text-indent: -9999px; } .share > li > a.sh + ul > li > a > img{width:3rem;height:auto} .share > li > a.sh + ul > li.fb > a{background: #1877F2 url(../../../images/site/kor/layout/h_img03.svg) no-repeat center center / 100% auto; border-radius: 50%;} .share > li > a.sh + ul > li.nb > a{background: #54B848 url(../../../images/site/kor/layout/h_img04.svg) no-repeat center center / 100% auto; border-radius: 50%;} .share > li > a:hover{border-color:#0073B1} /*소개부분*/ #visual.cont_intro{} #visual.cont_intro .inner h2.title{margin-bottom: 0; padding-bottom: 2.4rem; color: #fff;} #visual.cont_intro .visual_box{display: none;} #visual.cont_intro #path .navi{background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px);} #visual.cont_intro #path .navi .home a{filter: brightness(1000%);} #visual.cont_intro #path .navi > li::before{background-image: url(../../../images/site/kor/layout/icon_location_arrow3.svg);} #visual.cont_intro #path .navi > li > a{color: #EEE;} #visual.cont_intro #path .navi a.has_sub::after{background-image: url(../../../images/site/kor/layout/icon_location_subArr2.svg);} #visual.cont_intro .share > li > a{background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); } #visual.cont_intro .share > li > a:hover{border-color: #fff;} #visual.cont_intro .share > li > a.copy_url{background-image: url(../../../images/site/kor/layout/icon_copy2.svg);} #visual.cont_intro .share > li > a.sh{background-image:url(../../../images/site/kor/layout/icon_share2.svg)} #visual.cont_intro .share > li > a.print{background-image: url(../../../images/site/kor/layout/icon_print2.svg);} /*------------------------------------------------------------------- container -------------------------------------------------------------------*/ .visual_box{position:relative;left:50%;transform:translateX(-50%);width:100vw;height:38rem;margin-bottom:10rem;overflow:hidden;} .visual_box img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) scale(1.2);width:100%;height:100%;object-fit:cover;z-index:0;transform: scale(1.2);animation: zoomDown 1s ease-in-out forwards;} .visual_box .inner{display:flex;align-items:flex-end;height:100%;width:100%;max-width: calc(1600px + 4rem); height: 100%; margin: 0 auto; padding: 0 2rem;} .visual_box .tab_menu{display:flex;flex-wrap:wrap;width:100%;z-index:1;background:rgba(0, 23, 64, .6);border-radius:1rem 1rem 0 0;overflow:hidden} .visual_box .tab_menu > li{flex:1} .visual_box .tab_menu > li > a{display:flex;align-items:center;justify-content:center;height:100%;padding:1.4rem;line-height:1.2;font-size:2.1rem;color:rgba(255, 255, 255, .7);text-align:center;transition:all .3s} .visual_box .tab_menu > li > a.active, .visual_box .tab_menu > li > a.active:hover{background:rgba(0, 11, 26, .6);color:#fff} .visual_box .tab_menu > li > a:hover{background:rgba(0, 11, 26, .3)} @keyframes zoomDown { 0% { transform:translate(-50%, -50%) scale(1.2); opacity: 0.8; } 100% { transform:translate(-50%, -50%) scale(1); opacity: 1; } } #sub #container{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; position:relative; width: 100%; max-width: calc(1440px + 4rem); margin: 0 auto; padding: 0 2rem; padding-bottom: 12rem;} #container #remote{width: 24rem;} #container #remote h2{width:100%; line-height:36px; padding:35px 0; font-size:30px; text-align:center; color:#fff; background: gray;} #container #remote #lnb ul{width:100%;} #container #remote #lnb ul li{border-bottom:1px solid #ebebeb;} #container #remote #lnb ul li a{position:relative; display:block; padding:17px 30px 17px 25px; text-decoration:none; font-size:16px;color:#222;} #container #remote #lnb ul li ul{display:none; padding:20px 25px; background:#f7f7f7; box-sizing:border-box;} #container #remote #lnb ul li ul li{margin-top:7px; border-bottom:0;} #container #remote #lnb ul li ul li:first-child{margin-top:0;} #container #remote #lnb ul li ul li a{position:relative; display:inline-block; line-height:19px; padding:0 0 0 12px; border:0; font-size:15px; color:#222;} #container #path {position:absolute; right:0; margin-right:0; height:60px; top:-60px; z-index:10; background:lightgray; width:100%; padding: 0 2rem;} #container #path:before{content:""; display:block; width:100%; height:100%; background:lightgray; position:absolute; right:-100%; top:0;} #container #path:after{content:""; display:block; width:100%; height:100%; background:lightgray; position: absolute; left:-100%; top:0; clear: both;} #container #path .navi {height:100%; line-height: 60px;} #container #path .navi:after {content:""; display:block; clear:both;} #container #path .navi li{float:left; height:100%;} #container #path .navi li.home {margin-right:25px;} #container #path .navi li.home a {height:100%; width:60px; overflow:hidden; text-indent:-9999px; padding:0; margin:0;border-left:1px solid rgba(255,255,255,0.2);border-right:1px solid rgba(255,255,255,0.2);} #container #content{position: relative; width: 100%;} #container #content h2.title{display: block; position:relative;margin-bottom:5rem; font-size:7.2rem; color:#151515;font-weight:800;line-height:1.3} #container #content #txt{height: auto; font-size: 1.6rem;} /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// alert 비밀번호 알람창 /////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .alert{display: none;flex-wrap: wrap;justify-content: center;align-content: center;align-items: center;position: fixed;top: 0;left: 0;z-index: 11;width: 100%;height: 100%;padding: 0 2rem;background-color: rgba(0,0,0,0.2);} .alert .alert_wrap{display: block;width: 100%;max-width: 45rem;padding: 4rem;background-color: #fff;border-radius: 2rem;box-shadow:3px 4px 10px 0 rgba(0, 0, 0, 0.14);z-index:1;} .alert .alert_wrap p{display: block; width: 100%; color: #2D2D2D; font-size: 1.8rem; font-weight: 500; line-height: 1.4; text-align: center;} .alert .alert_wrap p:before{content: ""; display: block; width: 6rem; height: 6rem; margin: 0 auto 2rem; background: url(../../../images/site/kor/skin/alert_img01.svg) no-repeat center center / 100% auto;} .alert .alert_wrap input{display: block;width: 100%;max-width: 20rem;height: auto !important;margin-top: 2rem;margin-left: auto;margin-right: auto;padding: 0.9rem 1rem;border: 1px solid #D8D8D8;line-height: 1.5;color: #151515;font-size: 1.5rem !important;border-radius: 6px;} .alert[data-popstyle="login"] .alert_wrap{z-index: 1;} .alert[data-popstyle="login"] .alert_wrap p:before{background-image: url(../../../images/site/kor/skin/alert_img03.svg);} .alert[data-popstyle="login"] .alert_wrap a[data-color="4"]{background-color: #0073B1; border: 1px solid #0073B1; color: #fff;} .alert[data-popstyle="login"] .alert_wrap a[data-color="4"]:hover{background-color: #101C5C; border-color: #101C5C;} @media screen and (max-width:1024px){ .alert .alert_wrap{padding: 3rem;} .alert .alert_wrap p:before{width: 5.5rem; height: 5.5rem; margin-bottom: 1.6rem;} .alert .alert_wrap input{margin-top: 1.6rem;} } @media screen and (max-width:640px){ .alert .alert_wrap{padding: 3rem 2rem;} } /*------------------------------------------------------------------- top -------------------------------------------------------------------*/ #btntop{display: block; position: fixed; bottom: 2rem; right: 2rem; z-index: 4; width: 6rem; height: 6rem; border: 1px solid #0073B1; background: #0073B1; text-indent: -9999px; box-shadow: 0 0.4rem 2rem 0 #CCE3FF; transition: background 0.2s linear;} #btntop:hover{background: #fff;} #btntop:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/layout/btntop_img01.svg) no-repeat center center / 100% auto; transition: all 0.2s linear;} #btntop:hover:before{background-image: url(../../../images/site/kor/layout/btntop_img02.svg);} #btntop.on{ -webkit-transition: all 0.1s linear; transition: all 0.1s linear; -webkit-transform: translateY(50%); transform: translateY(50%); } /*------------------------------------------------------------------- footer -------------------------------------------------------------------*/ #footer {position: relative; padding:2.4rem 0 8rem; background-color: #fff; border-top: 1px solid #ddd;} #footer .inner{width: 100%; max-width: calc(1600px + 4rem); margin: 0 auto; padding: 0 2rem;} #footer .foot_logo:before{content: ""; display: block; width:16.8em; height:4.3em; background: url(../../../images/site/kor/layout/logo_footer.svg) no-repeat center center / 100% auto;filter:grayscale(1);opacity:.3} #footer .foot_top{position:relative;display:flex;align-items:center;gap:0 8.6rem;width:100%} #footer .foot_top .tit_wrap{padding-right:11.2rem} #footer .foot_top .tit{font-size:1.6rem;font-weight:700;color:#151515} #footer .foot_top .foot_banner{width:calc(100% - 25.4rem);line-height:0} #footer .foot_top .foot_banner .swiper-slide a{display:block;text-align:center} #footer .foot_top .foot_banner .swiper-slide a img{display:inline-block;} #footer .foot_top .foot_banner .controls{display:flex;gap:0 .8rem;position:absolute;left:8rem;top:50%;transform:translateY(-50%)} #footer .foot_top .foot_banner .controls .btn{position:relative;width:4rem;height:4rem;border:1px solid #ddd;border-radius:100%;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;transition:all .3s} #footer .foot_top .foot_banner .controls .btn:hover{border-color:#0073B1} #footer .foot_top .foot_banner .controls .prev{background-image:url(../../../images/site/kor/layout/icon_footbanner_prev.svg)} #footer .foot_top .foot_banner .controls .next{background-image:url(../../../images/site/kor/layout/icon_footbanner_next.svg)} #footer .foot_bottom{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; gap:0 8.6rem;margin-top:2rem;padding-top:2rem;border-top:1px solid #eee;font-size: 10px;} #footer .inner .inner_l{display: block;} #footer .inner .inner_l .menu_link{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem 3.2rem;} #footer .inner .inner_l .menu_link li a{display: block; font-size: 1.9rem; color: #353535; font-weight: 600;} #footer .inner .inner_l .menu_link li a:hover{text-decoration: underline; text-underline-position: under;} #footer .inner .inner_l .menu_link li:first-child a{color: #0073B1;} #footer .inner .inner_l .info{display:flex;flex-wrap:wrap;} #footer .inner .inner_l .info li{position:relative;margin-right:.8rem;padding-right:.9rem;color: #555; font-size: 1.6rem; font-weight: 500;} #footer .inner .inner_l .info li::before{content:"";position:absolute;right:0;top:.5rem;width:1px;height:1.5rem;background:#ccc} #footer .inner .inner_l .info li:last-child{margin-right:0;padding-right:0} #footer .inner .inner_l .info li:last-child::before{display:none} #footer .inner .inner_l .copy{margin-top:1rem;line-height:1.8rem;font-size: 1.5rem; font-weight: 400; color: #919191;} #footer .inner .inner_r{margin-left: auto;} #footer .inner .inner_r .family_site{position: relative; width: 30rem;} #footer .inner .inner_r .family_site >a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; position: relative; width: 100%; padding: 1.6rem 5rem 1.6rem 2rem; font-size: 1.6rem; font-weight: 500; color: #000; background-color: #F5F7FC; border-radius: 0.8rem;} #footer .inner .inner_r .family_site >a:after{content: ""; display: block; position: absolute; top: 50%; right: 2rem; width: 1.6rem; height: 1.6rem; background: url(../../../images/site/kor/layout/footer_img02.svg) no-repeat center center / 100% auto; transform: translateY(-50%) rotate(0); transition: all 0.2s linear;} #footer .inner .inner_r .family_site >a.active:after{transform: translateY(-50%) rotate(-180deg);} #footer .inner .inner_r .family_site >ul{ opacity: 0; visibility: hidden; overflow-y: auto; position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: auto; max-height: 16rem; padding: 1rem 0; background-color: #fff; border: 1px solid #000; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #footer .inner .inner_r .family_site >a.active + ul{opacity: 1; visibility: visible;} #footer .inner .inner_r .family_site >ul >li:not(:first-child){margin-top: 0.4rem;} #footer .inner .inner_r .family_site >ul >li >a{display: inline-block; font-size: 1.5rem; padding: 0.5rem 2rem;color:#151515} #footer .inner .inner_r .family_site >ul >li >a:hover{text-decoration: underline; text-underline-position: under;} #footer .inner .inner_r .sns{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 0.8rem;} #footer .inner .inner_r .sns li{} #footer .inner .inner_r .sns li a{display: block; position: relative; width: 4rem; height: 4rem; text-indent: -9999px; background-color: #EEEFF3; border-radius: 50%; transition: all 0.2s linear;} #footer .inner .inner_r .sns li a:before{content: ""; display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: all 0.2s linear;} #footer .inner .inner_r .sns li a:hover{background-color: #A9B3B9;} #footer .inner .inner_r .sns li a:hover:before{filter: brightness(1000%);} #footer .inner .inner_r .sns li a[data-icon="1"]:before{background-image: url(../../../images/site/kor/layout/footer_img03.svg);} #footer .inner .inner_r .sns li a[data-icon="2"]:before{background-image: url(../../../images/site/kor/layout/footer_img04.svg);} #footer .inner .inner_r .sns li a[data-icon="3"]:before{background-image: url(../../../images/site/kor/layout/footer_img05.svg);} #footer .inner .inner_r .sns li a[data-icon="4"]:before{background-image: url(../../../images/site/kor/layout/footer_img06.svg);} #footer .inner .inner_r .sns li a[data-icon="5"]:before{background-image: url(../../../images/site/kor/layout/footer_img07.svg);} #footer .inner .inner_r .sns li a[data-icon="6"]:before{background-image: url(../../../images/site/kor/layout/footer_img08.svg);} @media screen and (max-width: 1650px){ #slide_map .inner .binds .t .toputil_control .allmenu_btn_open{right:0;top:2.4rem} #slide_map.on .toputil_control .allmenu_btn_open:before, #slide_map.on .toputil_control .allmenu_btn_open:after{background:#151515} } @media screen and (max-width:1600px){ #header #nav #gnb >ul >li >a >span{font-size:1.9rem} } @media screen and (max-width: 1440px){ #header #nav #gnb{padding:0 10rem 0 18rem} #header #nav #gnb >ul >li{width:13rem} #header #nav #gnb >ul >li >a >span{padding:0 2rem;font-size:1.8rem} #header #nav #gnb >ul >li >div{padding:1.4rem 1rem} #header #nav #gnb >ul >li >div >ul >li >a{font-size:1.6rem} #header.on #nav #gnb >ul >li{width:25rem} .toputil_control{gap: 2rem;} #footer .inner{gap:0 3rem; font-size: 9px;} #footer .foot_top, #footer .foot_bottom{gap:0 4rem} } @media screen and (max-width: 1300px){ #header #nav #gnb >ul >li >a >span{padding:0 1rem;font-size:1.7rem} #header #nav #gnb >ul >li >div{padding:1.4rem .5rem} #header #nav #gnb >ul >li >div >ul >li >a{font-size:1.5rem} } @media screen and (max-width: 1200px){ #header #logo{font-size: 9px;} #header #nav #gnb >ul >li >a >span{font-size:1.5rem} #header #nav #gnb >ul >li >div >ul >li >a{font-size:1.3rem} .toputil_control{gap:2rem;} .toputil_control a, .toputil_control button{width: 2.2rem; height: 2.2rem;} #footer{padding-bottom:4rem} #footer .foot_top .foot_banner{width:calc(100% - 21.8rem)} #footer .inner .inner_r{width:100%;margin-left:0} #footer .inner .inner_r .sns{justify-content:flex-start;margin-top:2rem} } @media screen and (max-width: 1024px){ #sub{padding-top:11.3rem;} #slide_map{width: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(2px);} #slide_map .inner{width:100%;max-width:43.3rem;height:100%;background-color: #fff; margin-left: auto;border-radius:0} .fixed #slide_map{display: block;} #slide_map .inner .binds{padding:6.4rem 0 2rem} #slide_map .inner .binds .t{height: 7.5rem;} #slide_map .inner .binds >ul{display:block;max-height:100%;gap:0;padding:0} #slide_map .inner .binds >ul >li{gap:2rem;width:100%} #slide_map .inner .binds >ul >li.has_sub > a::before{content:"";position:absolute;right:2rem;top:2.8rem;width:1.55rem;height:1.55rem;background:url(../../../images/site/kor/layout/icon_menu_plus.svg) center no-repeat;} #slide_map .inner .binds >ul >li.has_sub > a.show::before{background:url(../../../images/site/kor/layout/icon_menu_minus.svg) center no-repeat;} #slide_map .inner .binds >ul >li >a{width:100%;margin-bottom:0;font-size:2rem;padding:2rem;border-bottom:1px solid #eee} #slide_map .inner .binds >ul >li >a.show{color:#0073B1;border-color:#0073B1} #slide_map .inner .binds >ul >li >div{display:none;flex:auto} #slide_map .inner .binds >ul >li >div > ul{padding:2rem;background:#F6FAFF} #slide_map .inner .binds >ul >li >div > ul >li{width:100%} #slide_map .inner .binds >ul >li >div > ul >li + li{margin-top:2rem} #slide_map .inner .binds >ul >li >div > ul > li.has_sub > a::before{top:0} #slide_map .inner .binds >ul >li >div > ul > li > a{padding:0 0 0 1.6rem;border-bottom:0;font-size:1.8rem;font-weight:700;color:#252525} #slide_map .inner .binds >ul >li >div > ul > li > a::after{content:"ㆍ";position:absolute;left:0;top:0} #slide_map .inner .binds >ul >li >div > ul > li > ul{border-bottom:0;margin:0;padding:1.5rem 0 0} #slide_map .inner .binds >ul >li >div > ul > li > ul > li{padding-left:1.6rem} #slide_map .inner .binds >ul >li >div > ul > li > ul > li + li{margin-top:0} #slide_map .inner .binds >ul >li >div > ul > li > ul > li > a{padding:.9rem 0;font-weight:500;font-size:1.8rem} #slide_map .inner .binds >ul >li >div > ul > li > ul > li > a::before{display:none} #slide_map .inner .binds >ul >li:nth-child(5), #slide_map .inner .binds >ul >li:nth-child(6){position:static} #header .header_wrap{height: 7.5rem;} #header #logo{height: 7.5rem; font-size: 8px;} #header #nav #gnb{display: none;} .toputil_control{height: 7.5rem;} .toputil_control a, .toputil_control button{width: 2.4rem; height: 2.4rem;} .search_box{padding:3rem 0} .share > li > a.print{display:none} #visual{padding-top: 4rem;} #visual .inner h2.title{margin-bottom: 1.5rem;font-size: 5.5rem;} #container #remote{display: none;} #container #content{padding-left: 0; min-height: auto;} .visual_box{height:30rem; margin-bottom: 6rem;} .visual_box .tab_menu > li > a{font-size:1.8rem} #txt{min-height: 400px;} #visual .inner{margin-bottom: 1.4rem;} #txt h2.title{padding: 20px 0 10px 15px; margin: 0px 0 10px 0} #btntop{width: 5rem; height: 5rem;} #footer .inner .inner_r .family_site{width: 28rem;} #footer .inner .inner_r .sns li a{width: 3.8rem; height: 3.8rem;} } @media screen and (max-width: 840px){ .visual_box{margin-bottom:7rem} #footer{padding-top:1rem} #footer .inner .inner_l{width: 100%;} #footer .foot_top, #footer .foot_bottom{gap:2rem 0} #footer .foot_bottom{margin-top:1rem;padding-top:2rem} #footer .inner .inner_r{width: 100%;} #footer .inner .inner_r .family_site{position: absolute; top: 4rem; right: 2rem;} #footer .inner .inner_r .sns{justify-content: flex-start; margin-top: 0;} } @media screen and (max-width: 640px){ #sub{padding-top:10.8rem} #slide_map .inner .binds{padding-top:9.7rem} #slide_map .inner .binds .t{height: 7rem;} #slide_map .inner .binds .t .toputil_control a{display: block;} #slide_map .inner .binds .t .toputil_control a.search_btn{display: none;} /* #slide_map .inner .binds >ul >li{padding:3.2rem 2rem;gap:2.4rem} #slide_map .inner .binds >ul >li >a, #slide_map .inner .binds >ul >li >div{width:100%} #slide_map .inner{max-width: 44rem;} #slide_map .inner .binds >ul >li >div > ul > li > a{font-size:1.875rem} */ #header .header_wrap{height: 7rem;} #header #logo{height: 7rem; font-size: 7px;} .toputil_control{height: 7rem;} #header .toputil_control a{display: none;} #header .toputil_control a.search_btn, #header .toputil_control .allmenu_btn_open{display: block;} .search_box .search_wrap, .search_box .search_bar{gap:1rem} .search_box input[type=text], .search_box select{height:5rem;padding:0 1.2rem} .search_box select{max-width:inherit;min-width:10rem;width:20rem;padding-right:3.5rem;background-position:right 1rem center} .search_box .search_input .btn_submit{right:1.2rem} .search_box .search_input input[type=text]{padding-right:4rem} .search_box .btn_close{width:5rem;height:5rem} #path .navi > li:nth-child(3) >*{display: none;} #path .navi > li:nth-child(3)::after{content: "···"; display: block; margin: 0 0.25rem; font-size: 2rem;} #path .navi > li:last-child > a{display:block;} #path .navi > li:last-child::before{display: block;} #path .navi > li:last-child::after{display: none;} #visual{padding-top: 3rem;} #visual .inner h2.title{margin-bottom: 1rem;font-size: 4rem;} .visual_box{margin-bottom:4rem} .visual_box{height:25rem;} .visual_box .tab_menu > li{flex:none;width:33.3%} .visual_box .tab_menu > li > a{padding:1rem;font-size:1.8rem} #sub #container{padding-bottom: 10rem;} #btntop{width: 4.5rem; height: 4.5rem;} #footer .foot_top{gap:0 3rem} #footer .inner{font-size: 5px;} #footer .inner .inner_l .menu_link{gap: 0.6rem 2rem;} #footer .inner .inner_r .family_site{top: 4rem; width: 24rem;} #footer .inner .inner_r .sns li a{width: 3.6rem; height: 3.6rem;} } @media screen and (max-width:540px){ #footer .inner .inner_l .info{flex-direction:column} #footer .inner .inner_l .info li{margin-right:0;padding-right:0} #footer .inner .inner_l .info li::before{display:none} } @media screen and (max-width: 480px){ #sub #container{padding-bottom: 8rem;} } @media screen and (max-width: 420px){ #header .header_top{font-size:1.3rem} #header #logo{font-size: 6.5px;} #footer .inner{font-size: 4px;} #footer .inner .inner_r .family_site{top: 3.4rem; width: 20rem;} } @media print{ * {-webkit-print-color-adjust: exact;print-color-adjust: exact;} @page {size: A4; margin: 0.6cm;} html{overflow:auto !important; font-size: 6px;} #sub{padding-top:0 !important} #header, #footer, #visual .share, .visual_box, .modal_close, .btn_mprint{display:none} #visual{padding-top: 0;} .modal_footer{width:100%;margin:2rem 0 0 0} }