:root { --primary-color: #69985a; --secondary-color: #fbf2eb; --text-color: #222; --background-color: #f8f9fb; --border-color: #eee; --hover-color: #5666a0; } .color_text {color: var(--primary-color)!important} /* admin */ #admin_bar {background: #222; position: fixed; top: 0; left: 0; width: 100%; height: 25px; z-index: 19999; color: #fff; display: flex; justify-content: flex-end; align-items: center; padding-right: 50px} #admin_bar a {color: #b7afaf; display: inline-block; padding-left: 20px;} /*레이아웃 설정*/ .full_container{width:100%;} .full_container .inner_container, .container {max-width:1300px; width:95%; margin:0 auto; position:relative;} .mobile_only {display:none} /*폰트*/ .merona{font-family: 'Binggrae Melona', sans-serif;} /*****header*****/ /* [LDH 25.11.21] 추가*/ .top-menu {background: #323649;} .top-menu > * {display: flex; justify-content: flex-end; align-items: center; height: 40px;} .top-menu ul {display: flex; gap: 20px; margin-top: -9px;} .top-menu ul li {position: relative;} .top-menu ul li:first-child:after {content:''; position:absolute; width:1px; height:14px; background:rgba(255,255,255,0.4); right:-10px; top:50%; transform:translateY(-50%);} .top-menu ul li a {font-size: 14px; color: #fff;} .top-menu ul li a:hover {opacity: 0.8;} .header{/*border-bottom:1px solid #eee;*/ width:100%; background:#fff; position:relative; z-index: 199;} .header .header_inner{display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; height:100px;} .header .header_inner .logo a{max-width: 80px; display: block;} .header .header_inner .logo a img {max-width: 100%;} .header .header_inner .main_menu{width: 740px; margin-right:150px; display: flex; justify-content: space-between} .header .header_inner .main_menu li{display:inline-block; position: relative; } .header .header_inner .main_menu li a{font-size:18px; color:#222; font-weight:700; position:relative} #menu_dept{position: absolute; z-index:1; top:100px; width: 100%; background: #fff; border-top: 1px solid #eee; border-bottom:1px solid #eee; display:none; min-height:390px;} #menu_dept.admin_top{top:140px;} #menu_dept > div{display:flex; flex-flow:row wrap; justify-content:flex-end} #menu_dept > div > ul{width:900px; margin-right:50px;display: flex; justify-content: space-between;} #menu_dept > div > ul > li{display:inline-block; width: 100%; vertical-align:top} #menu_dept > div > ul > li ul li:first-child{padding-top:30px} #menu_dept > div > ul > li ul li{padding-bottom:20px} #menu_dept > div > ul > li ul li a{font-size:16px; color:#222; font-weight:700; display:block; text-transform:uppercase; text-align: center;} #menu_dept > div > ul > li ul li a:hover{color:var(--primary-color); font-weight:700} #menu_dept > div > ul > li ul li ul li{padding-bottom:10px;} #menu_dept > div > ul > li ul li ul li a{font-size:18px; color:#666; font-weight:500;} #menu_dept > div > ul > li ul li ul li:first-child{padding-top:10px;} #menu_dept.active {display:block} .active_menu{color:var(--primary-color)!important;} .active_menu:after{/*content:''; position:absolute; width:95px; height:4px; background:var(--primary-color); bottom:-38px; left:-24%*/ content: ''; position: absolute; width: 100%; height: 4px; background: var(--primary-color); bottom: -36px; left: 50%; transform: translateX(-50%);} /* main sub menu */ .header .header_inner .main_menu li .sub_menu { display: none; position: absolute; width: 200px; background: #fff; padding: 60px 20px 20px; top: 24px; left: 50%; margin-left: -100px;} .header .header_inner .main_menu li .sub_menu:after {content:''; position:absolute; top:38px; left:0; width:100%; height: 4px; background:var(--primary-color)} .header .header_inner .main_menu li .sub_menu li a {font-size: 15px; font-weight: 500} .header .header_inner .main_menu li:hover .sub_menu {display: flex; align-items: flex-start; gap: 10px; flex-direction: column;} .header .header_inner .main_menu li .sub_menu li a.active_menu:after {content:none} .header .header_inner .main_menu li.header_active .sub_menu li a {color:#222 !important} .header .header_inner .main_menu li.header_active .sub_menu li a:hover {color: var(--primary-color)!important;} .header .header_inner .main_menu li.header_active .sub_menu li a:after {content:none !important} .header .header_inner .main_menu .sub_menu li.header_active a:after {content:none !important} .header .header_inner .main_menu .sub_menu li.header_active a {color:#222 !important} .header .header_inner .main_menu .sub_menu li.header_active a:hover {color: var(--primary-color)!important;} .header .header_inner .main_menu .sub_menu_depth3 {display: flex; flex-direction: column; gap: 10px; padding-top: 10px;} .header .header_inner .main_menu li .sub_menu .sub_menu_depth3 li a {font-size: 16px; color:#666 } .header .header_inner .main_menu li .sub_menu .sub_menu_depth3 li a:hover {color: var(--primary-color)!important;} .header .header_inner .main_menu li:hover .sub_menu.none_visible{display:none;} /*hamburger menu*/ .header_hamburder_menu { position: absolute; right: 0; top: 40px;} .navbar-toggle {cursor: pointer;color: #000;} .header_hamburder_menu.active {position: fixed; right: 10px; top: 20px;} .hamburger { font: inherit; display: inline-block; overflow: visible; margin: 0; padding: 0; line-height:1em; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity,filter; text-transform: none; color: inherit; border: 0; } .hamburger-box { position: relative; display: inline-block; width: 20px;height: 20px; } .hamburger-inner:after, .hamburger-inner:before { display: block; content: ""; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { width: 100%; height: 3px; border-radius: 0; } .hamburger-inner { margin-top: 1px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; transition-timing-function: ease; transition-duration: .10s; transition-property: transform; border-radius: 4px; background-color: #000; -webkit-transition: all 0.15s;-moz-transition: all 0.15s;-o-transition: all 0.15s;-ms-transition: all 0.15s;transition: all 0.15s;} .header_hamburder_menu:hover .hamburger-inner, .header_hamburder_menu:hover .hamburger-inner:after, .header_hamburder_menu:hover .hamburger-inner:before {background-color:var(--primary-color) } .hamburger-inner:before { top: 7px; transition-property: transform,opacity;} .hamburger-inner:after { bottom: -14px; } .navbar-toggle.active .hamburger-inner { transform: translate3d(0,5px,0) rotate(45deg); -webkit-transform:translate3d(0,5px,0) rotate(45deg); -ms-transform:translate3d(0,5px,0) rotate(45deg);} .navbar-toggle.active .hamburger-inner:before { transform: rotate(-45deg) translate3d(0px,0px,0); -webkit-transform:rotate(-45deg) translate3d(0px,0px,0); -ms-transform:rotate(-45deg) translate3d(0px,0px,0); opacity: 0;} .navbar-toggle.active .hamburger-inner:after { transform: translate3d(0,-16px,0) rotate(-90deg); -webkit-transform: translate3d(0,-16px,0) rotate(-90deg); -ms-transform: translate3d(0,-16px,0) rotate(-90deg); bottom:-16px;} /*.mobile_menu_contents {position: fixed; top: 0; left: 100%; width: 100%; height: 100%; background: #222935; -webkit-transition: all 0.35s;-moz-transition: all 0.35s;-o-transition: all 0.35s;-ms-transition: all 0.35s;transition: all 0.35s;overflow-y: auto;z-index: 1999;} .mobile_menu_contents.active {left:0;}*/ .navbar-toggle.active .hamburger-inner, .navbar-toggle.active .hamburger-inner:after, .navbar-toggle.active .hamburger-inner:before {background-color: #000; -webkit-transition: all 0.15s;-moz-transition: all 0.15s;-o-transition: all 0.15s;-ms-transition: all 0.15s;transition: all 0.15s;} .navbar-toggle.active:hover .hamburger-inner, .navbar-toggle.active:hover .hamburger-inner:after, .navbar-toggle.active:hover .hamburger-inner:before { background-color: var(--primary-color);} .navbar-toggle.active_menu:after{display:none!important} /***** 모바일 메뉴 시작 ******/ .header_hamburger_menu { display:none; position: fixed; right: 20px; top: 40px; transform-origin: center; transition: all 0.35s; } .mobile_menu_inner_wrap {position: absolute; width: 100%; top: 80px; padding: 50px 30px 0; height: 70vh; overflow-y: auto;} .header_hamburger_menu .hamburger { font: inherit; display: inline-block; overflow: visible; margin: 0; padding: 0; line-height:1em; cursor: pointer; transition-timing-function: linear; transition-duration: .35s; transition-property: opacity,filter; text-transform: none; color: inherit; border: 0; } .header_hamburger_menu .hamburger-box { position: relative; display: inline-block; width: 28px;height: 20px; } .header_hamburger_menu .hamburger-inner:after, .header_hamburger_menu .hamburger-inner:before { display: block; content: ""; } .header_hamburger_menu .hamburger-inner, .header_hamburger_menu .hamburger-inner:after, .header_hamburger_menu .hamburger-inner:before { width: 100%; height: 3px; border-radius: 0; } .header_hamburger_menu .hamburger-inner { margin-top: 1px; } .header_hamburger_menu .hamburger-inner, .header_hamburger_menu .hamburger-inner:after, .header_hamburger_menu .hamburger-inner:before { position: absolute; transition-timing-function: ease; transition-duration: .10s; transition-property: transform; border-radius: 4px; background-color: #222;} .header_hamburger_menu .hamburger-inner:before {top: 8px; transition-property: transform,opacity;} .header_hamburger_menu .hamburger-inner:after {bottom: -16px; } .header_hamburger_menu .navbar-toggle {cursor: pointer;color: #fff;} .header_hamburger_menu.open { transform: rotate(180deg);} .header_hamburger_menu .navbar-toggle.open .hamburger-inner { transform: translate3d(0,6px,0) rotate(45deg);} .header_hamburger_menu .navbar-toggle.open .hamburger-inner:before {transform: rotate(-45deg) translate3d(0px,0px,0); opacity: 0;} .header_hamburger_menu .navbar-toggle.open .hamburger-inner:after {transform: translate3d(0,-16px,0) rotate(-90deg);} .header_hamburger_menu .navbar-toggle.open .hamburger-inner, .header_hamburger_menu .navbar-toggle.open .hamburger-inner:after, .header_hamburger_menu .navbar-toggle.open .hamburger-inner:before {background-color: #fff;} .mobile_menu_contents { position: fixed; top: 0; left: 100%; width: 100%; height: 100%; z-index: 1999;} .mobile_menu_contents.open {left:0;} #mobile_menu_box .gnb_dep1 { margin-top: 0; padding-left:0} #mobile_menu_box .gnb_dep1>li { opacity:0; transform: translateY(50px); transition: all 0.35s ease-out; transition-timing-function: ease; border-bottom: 1px solid rgba(255,255,255,.3);} #mobile_menu_box .gnb_dep1>li.visible {opacity:1; transform: translateY(0);} #mobile_menu_box .gnb_dep1>li>a {font-size: 25px; padding: 15px 0 15px 30px; height: auto; color: #fff; line-height: 1em; position: relative; display: block;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children .plus {position: absolute; top: 50%; transform: translateY(-50%); transition: transform 0.3s; right: 25px;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children.open .plus { transform: translateY(-50%) rotate(-180deg);} #mobile_menu_box .gnb_dep1>li.menu-item-has-children .plus .plus_add {display: block; width: 20px; height: 2px; position: relative; background: #fff;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children .plus .plus_add:after {content: ""; background: #fff; width: 100%; height: 2px; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children.open .plus .plus_add:after {transform: translateY(-50%) rotate(0);} #mobile_menu_box .sub_menu { width: 100%; line-height: 1em; float: none; margin: 0; padding: 10px 10px 30px 25px;left:0 !important; display:none;} #mobile_menu_box .sub_menu>li { padding: 10px;} #mobile_menu_box .sub_menu>li>a { font-size: 16px; color: #fff; font-weight: 500;} .mobile-container-overlay { position: fixed; top: -120.5vh; right: -120.5vh; width: 250vh; height: 250vh; border-radius: 50%; background: var(--primary-color); transition: .2s; z-index: 0; transform: scale(0); z-index: 10;} .mobile-container-overlay.open {animation: checked-overlay .8s both;} .mobile-container-overlay.close { animation: not-checked-overlay .4s both; } .mobile_menu_contents .mobile_menu_copyright {color: #fff; position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 12px; opacity:0; transition: all 0.35s ease-out; transition-delay:1s;} .mobile_menu_contents.open .mobile_menu_copyright {opacity:1; } .mobile_menu_logo {display: none} @keyframes checked-overlay { 0% { transform: scale(0); } 90% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes not-checked-overlay { 0% { transform: scale(1); } 100% { transform: scale(0); } } @media only screen and ( max-width: 980px ) { /* 모바일 메뉴 Break Point */ .header_hamburger_menu {display:block;z-index: 19999; top: 35px;} .admin_top .header_hamburger_menu {top: 75px;} .header .logo {display: none} .mobile_menu_logo {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 90px; z-index: 1999;} .admin_top .mobile_menu_logo {height: 130px;} .mobile_menu_logo > a { display: block; width: 85px; height: 90px; background: url(../img/main/logotype.svg) no-repeat center; background-size: 80% !important; transition: 0.35s ease;} .mobile_menu_logo.open > a {filter: grayscale(1) brightness(3); background: url(../img/main/logotype-footer.svg) no-repeat center;} } @media only screen and ( max-width: 767px ) { .header_hamburger_menu { top: 20px;} } /***** 모바일 메뉴 끝 ******/ /*****main*****/ .main_slider{position:relative} .main_slider .main_slider_wrap .main_slider_inner{/*height:800px;*/ margin:0 25px;} /*.main_slider .main_slider_wrap .main_slider_inner.slider1{background:url(../img/main/main_slider.jpg) no-repeat center; background-size:cover} .main_slider .main_slider_wrap .main_slider_inner.slider2{background:url(../img/main/main_slider2.jpg) no-repeat center; background-size:cover}*/ .main_slider .main_slider_wrap .main_slider_inner > img{margin:0 auto; display:block; max-width:1300px; width:100%; border-radius:10px;} .main_slider .main_slider_wrap .main_slider_inner{position:relative} .main_slider .main_slider_wrap .main_slider_inner .slider_text{position:absolute; width:100%; height:100%; top:0; left:0; display:flex; justify-content: center; align-items: center;} .main_slider .main_slider_wrap .main_slider_inner .slider_text div{text-align:center; display:table-cell; vertical-align:middle;} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1{font-size:55px; font-weight:900; color:var(--text-color); line-height:1.3em; letter-spacing:-1px} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1 span{font-size:30px; font-weight:300} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1:after{content:''; width:1px; height:40px; background:var(--text-color); display:block; margin:20px auto 15px} .main_slider .main_slider_wrap .main_slider_inner .slider_text div p{font-size:22px; color:var(--text-color); font-weight:500; letter-spacing:-1px} .main_slider .slick-prev, .main_slider .slick-next{z-index:4; width:22px; height:42px; border-radius:5px;} .main_slider .slick-prev{left:80px!important;} .main_slider .slick-next{right:80px!important;} .main_slider .slick-prev:before, .main_slider .slick-next:before{content:''; display:block; width:100%; height:100%; background-size:cover; opacity:1;} .main_slider .slick-prev:before{background:url(../img/main/left_arrow.png) no-repeat center;} .main_slider .slick-next:before{background:url(../img/main/right_arrow.png) no-repeat center;} .main_slider .slick-prev:hover, .main_slider .slick-next:hover{box-shadow: 0 0 0 14px transparent; animation: pulse .5s} .main_slider .slick-prev:hover:before, .main_slider .slick-next:hover:before{opacity:.7;} @keyframes pulse {from {box-shadow: 0 0 0 0 #fff}} /*.main_slider .arrow_wrap{position:absolute; width:100%; left:0; top:0} .main_slider .arrow_wrap > div span{color:#fff; position:absolute; top:400px; cursor:pointer} .main_slider .arrow_wrap > div span:hover{opacity:0.8} .main_slider .arrow_wrap > div span.right_arrow{right:0} .main_slider .arrow_wrap > div span.left_arrow{left:0}*/ /*.main_link_menu{margin-top:-130px}*/ .main_link_menu .main_link_menu_inner{display:flex; flex-flow:row nowrap; align-items:stretch;} .main_link_menu .main_link_menu_inner div{width:20%; padding:50px 10px 80px; border-radius:20px; position:relative; cursor:pointer; transition:0.2s ease;} .main_link_menu .main_link_menu_inner div:hover{transform:translateY(20px); overflow:hidden;} .main_link_menu .main_link_menu_inner div:after{content:''; display:block; width:1px; height:40%; position:absolute; background:var(--primary-color); opacity:.2; right:-2px; top:50%; transform:translateY(-50%);} .main_link_menu .main_link_menu_inner div:last-child:after{display:none;} /*.main_link_menu .main_link_menu_inner div:hover{background:#4d6196}*/ .main_link_menu .main_link_menu_inner div p{text-align:center; position: relative;} .main_link_menu .main_link_menu_inner div p + p{font-size:18px; color:#222; font-weight:600; letter-spacing:-1px; padding-top:15px} .main_link_menu .main_link_menu_inner div p + p + p {font-size:15px; font-weight:600; color:rgba(255,255,255,0.5); width:100%; position:absolute; bottom:50px; left:0; padding: 0;height: 22px;} .main_link_menu .main_link_menu_inner div p span {position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; opacity:1; transition: 0.3s; color:#444;} .main_link_menu .main_link_menu_inner div:hover p .front {transform: rotateX(180deg); opacity:0} .main_link_menu .main_link_menu_inner div p .back { transform: rotateX(-180deg); opacity:0} .main_link_menu .main_link_menu_inner div:hover p .back {transform: rotateX(0); opacity:1; color:#fff} .main_link_menu .main_link_menu_inner div .bg {position: absolute; width: 100%; height: 0; bottom: 0; left: 0; background: var(--secondary-color); transition: 0.3s;} .main_link_menu .main_link_menu_inner div:hover .bg { height: 100%;} .main_link_menu .main_link_menu_inner div:hover .icons {position:relative; animation:ballani 1s ease-in-out Infinite;} @keyframes ballani { 0% { top:0; } 50% { top:-10px;; } 100% { top:0; } } .main_section{padding:80px 0 100px} .main_section .main_section_wrap{display:flex; flex-flow:row nowrap; align-items:stretch} .main_section .main_section_wrap .main_section_inner{width:100%; min-height:445px; display: flex; flex-direction: column;} .main_section .main_section_wrap .main_section_inner + .main_section_inner{margin-left:2.4%} .main_section .main_section_wrap .main_section_inner h2{font-size:25px; font-weight:900; color:#000; letter-spacing:-1px; padding-bottom:15px} .main_section .main_section_wrap .main_section_inner .tab_title{display:flex; width:100%; overflow:hidden; border-top-right-radius:10px; border-top-left-radius:10px} .main_section .main_section_wrap .main_section_inner .tab_title li {list-style: none; float: left; width: 50%; height:60px; line-height:60px; cursor: pointer; text-align: center; background:#f8f9fb; font-size:18px; font-weight:600; color:#222; transition: all 0.2s;} .main_section .main_section_wrap .main_section_inner .tab_title li:hover {box-shadow: inset 0 0 0 36px #e3e5e8;} .main_section .main_section_wrap .main_section_inner .tab_title li.current {background-color: var(--primary-color); color:#fff; } .main_section .main_section_wrap .main_section_inner .tab_title li.current:hover {box-shadow: inset 0 0 0 36px #5666a0;} .main_section .main_section_wrap .main_section_inner .tab-content{display: none} .main_section .main_section_wrap .main_section_inner .tab-content.current{display: inherit} .main_section .main_section_wrap .main_section_inner .tab-content .main_map{width:100%; height:320px} .main_section .main_section_wrap .main_section_inner .tab-content > p{font-size:17px; color:#666; font-weight:400; background:#f8f9fb; padding:20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; letter-spacing:-1px} .main_section .main_section_wrap .main_section_inner .tab-content > p span{font-size:20px; color:#000; font-weight:800} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address {height: 250px; border-bottom: 1px solid #ddd} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address > div {width:100%; height:100%} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p {font-size: 17px; color: #666; font-weight: 500; letter-spacing: -0.5px; word-break:keep-all; padding-top: 5px;} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p span {font-size: 20px; color: #000; font-weight: 800;} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p {padding-top: 20px;} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p + p {padding-top:0} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p + p + p {font-size: 16px; color: var(--text-color); padding-top: 10px} .main_section .main_section_wrap .main_section_inner .main_form_wrap{background:#f8f9fb; border-radius:10px; padding:40px; flex: 1;} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table{border-spacing:0; width:100%} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th{font-size:16px; font-weight:600; color:#222; width:12%; text-align:left; padding-right:10px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th.col2{padding-left:10px; width:14%} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr td{width:auto} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr td input{width:100%; padding:12px; border-radius:5px; border:1px solid #eee; font-size:17px; color:#666; font-weight:500} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr td textarea{width:100%; padding:10px; border-radius:5px; border:1px solid #eee; height:90px; overflow:auto} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr + tr th{padding-top:15px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr + tr td{padding-top:15px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr + tr + tr th{vertical-align:top; padding-top:30px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div{padding-top:20px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div br{display:none} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div .label{font-size:17px; font-weight:800; color:#222; padding-right:15px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div .privacy_btn{display:inline-block; border-radius:30px; background:#efefef; font-size:15px; color:#666; font-weight:500; height:30px; line-height:30px; padding:0 20px; letter-spacing:-1px; cursor:pointer; transition: all 0.2s;} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div .privacy_btn:hover {transform: scale(1.05); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} .checks {position: relative; display:inline-block} .checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .checks input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:15px; font-weight:500; color:#555;} .checks input[type="radio"] + label:before { content: ''; position: absolute; left:12px; top: 6px; width: 10px; height: 10px; text-align: center; background: #fff; border: 2px solid #ddd; border-radius: 100%;} .checks input[type="radio"]:checked + label:before { background: #E9ECEE; border-color: #adb8c0; } .checks input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 6px; left: 12px; width: 10px; height: 10px; background: var(--primary-color); border-radius: 100%;} .main_section .main_section_wrap .main_section_inner .main_form_wrap form input[type="submit"]{border:none; width:100%; height:55px; border-radius:10px; background:var(--primary-color); color:#fff; font-size:18px; font-weight:600; text-align:center; box-shadow: 0px 5px 0px 0px #3b5c30; margin-top:27px; margin-bottom: 5px; transition: all 0.2s;} .main_section .main_section_wrap .main_section_inner .main_form_wrap form input[type="submit"]:hover { margin-top:32px; margin-bottom: 0px; box-shadow: 0px 0px 0px 0px var(--primary-color);} /*개인정보 팝업*/ .pvc_popup{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1999;} .pvc_popup .inner_wrap{z-index: 2001; width: 98%; max-width: 700px; background: #fff; max-height: 80vh; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .pvc_popup .inner_wrap .f_sitemap_wrap{overflow-y:scroll; max-height:67vh;} /*scollbar*/ .pvc_popup .inner_wrap .f_sitemap_wrap::-webkit-scrollbar-track{background-color: #eeeeee; height:15px;} .pvc_popup .inner_wrap .f_sitemap_wrap::-webkit-scrollbar{width: 10px; background-color: #F5F5F5; height:15px;} .pvc_popup .inner_wrap .f_sitemap_wrap::-webkit-scrollbar-thumb {background-color: var(--primary-color); background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent);height:15px;} /*scollbar*/ .pvc_popup .inner_wrap .f_sitemap_wrap .f_sitemap_wrap_inner{flex-wrap:wrap; padding:30px;} .pvc_popup .inner_wrap > p{text-transform: uppercase; color: var(--primary-color); font-size: 22px; font-weight: 800; padding: 10px 30px; border-bottom: 1px solid #eee;} .pvc_popup .inner_wrap .sitemap_close{position: absolute; right: 15px; top: 16px; font-size: 18px; line-height: 1em; color: #b6b9bb; cursor: pointer;} .pvc_popup .inner_wrap .f_sitemap_wrap .f_sitemap_wrap_inner p{font-size:14px; color:#999} .pvc_popup .inner_wrap .f_sitemap_wrap .f_sitemap_wrap_inner p + p{padding-top:20px;} .pvc_popup .sitemap_bg{position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.2); width: 100%; height: 100%; z-index: 2000;} /*팝업 신청 완료*/ .apply_end_popup{position:fixed; width:100%; height:100%; left:0; top:0;} .apply_end_popup .inner_wrap{width:95%; max-width:400px; background:#fff; border-radius:25px; padding:50px; position:absolute; left:50%; top:50%;-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index:2; -webkit-box-shadow: 0px 6px 13px -2px rgba(0,0,0,0.29);-moz-box-shadow: 0px 6px 13px -2px rgba(0,0,0,0.29);box-shadow: 0px 6px 13px -2px rgba(0,0,0,0.29);} .apply_end_popup .inner_wrap p{text-align:center;} .apply_end_popup .inner_wrap button{width:220px; height:45px; color:#fff; font-size:17px; text-align:center; line-height:45px; border-radius:10px;background: #2582ff; background: -moz-linear-gradient(left, #2582ff 0%, #53cbf1 60%, #53cbf1 90%, #4cbcfe 100%); background: -webkit-linear-gradient(left, #2582ff 0%,#53cbf1 60%,#53cbf1 90%,#4cbcfe 100%); background: linear-gradient(to right, #2582ff 0%,#53cbf1 60%,#53cbf1 90%,#4cbcfe 100%); border:none; margin:25px auto 0; display:block;} .apply_end_popup .apply_popup_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;} /*바디에 스크롤 막기*/ .not_scroll{ overflow: hidden; width: 100%;} .not_scroll .cont { position: relative;} /*****main 추가 2023.06.29*****/ .main_theme{padding-top:80px;} .main_theme > div{display:flex;} .main_theme .title_left{width:30%; padding-right:20px;} .main_theme .title_left h2{font-size: 36px; font-weight: 800; line-height: 1.3; padding-top:20px;} .main_theme .title_left p{padding-top:30px;} .main_theme .title_left p span{font-size:18px; color:var(--primary-color); font-weight:500; padding-right:5px;} .main_theme .title_left p span:last-child{padding-right:0;} .main_theme .image_right{display:flex; width:70%; gap:3.5%;} .main_theme .image_right .box{border-radius:10px; background:url(../img/main/main-banner01.png) no-repeat center / cover; width:48.25%; min-height:365px; min-height: 200px; overflow:hidden; position:relative; transition:.3s all;} .main_theme .image_right .box:hover{-webkit-box-shadow: 0px 10px 25px 5px rgba(48,68,71,0.18); -moz-box-shadow: 0px 10px 25px 5px rgba(48,68,71,0.18); box-shadow: 0px 10px 25px 5px rgba(48,68,71,0.18); transform:translateY(-10px);} .main_theme .image_right .box a{padding:30px; display:block; width:100%; height:100%; position:relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;} .main_theme .image_right .box a:after{content:''; display:block; width:361px; height:296px; /*background:url('../img/main/main_boximg01.png') no-repeat center; background-size:cover;*/ position:absolute; right:-45px; bottom:-60px;} .main_theme .image_right .box + .box a:after{width:370px; height:347px;} .main_theme .image_right .box + .box{background:#ffb01c; background:url(../img/main/main-banner02.png) no-repeat center / cover;} .main_theme .image_right .box h3{color:#fff; font-size:28px; font-weight:800; padding-bottom:10px; position:relative; z-index:2; text-shadow: 0px 2px 2px rgba(0,0,0,0.09);} .main_theme .image_right .box p{font-size:20px; color:#fff; font-weight:600; position:relative; z-index:2;} .main_theme .image_right .box p span{display:inline-block; width:2px; height:15px; margin:0 10px; background:#fff; opacity:.5;} /*****footer*****/ .footer_area{background:#000; padding:80px 0; overflow:hidden} .footer_area .footer_area_inner{position:relative; overflow:hidden} .footer_area .footer_area_inner > div{float:left} .footer_area .footer_area_inner .f_logo{padding-right:60px} .footer_area .footer_area_inner .f_logo a {max-width: 80px; display:block;} .footer_area .footer_area_inner .f_logo a img{max-width:100%} .footer_area .footer_area_inner .footer_info p{font-size:15px; font-weight:400; color:rgba(255,255,255,0.7)} .footer_area .footer_area_inner .footer_info p + p{font-size:13px; color:rgba(255,255,255,0.5); font-weight:500; padding-top:30px} .footer_area .footer_area_inner .footer_link{position:absolute; right:0; top:0} .footer_area .footer_area_inner .footer_link ul li{display:inline-block} .footer_area .footer_area_inner .footer_link ul li + li{margin-left:10px} /* [LDH 25.11.06] 퀵메뉴 추가 */ .quick_btn {position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: 120px; height: 280px; display: grid; grid-template-rows: 1fr 0.85fr; overflow: hidden; border-radius: 10px;} .quick_btn > * {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; transition: all 0.2s;} .quick_btn > * span {display: block; font-size: 14px; color: #fff; font-weight: 500;} .quick_btn .call {background: #8556d2;} .quick_btn .talk {background: #3eaf44;} .quick_btn .talk:hover {background: #3ebd44;} .quick_btn .call:hover {background: #8f5ede;} .quick_btn .icon {display: block; width: 30px; height: 30px; background: white;} .quick_btn .call .icon {mask: url('../img/sub/icon-call.svg') no-repeat center / contain; -webkit-mask: url('../img/sub/icon-call.svg') no-repeat center / contain;} .quick_btn .talk .icon {mask: url('../img/sub/naver-talk.svg') no-repeat center / contain; -webkit-mask: url('../img/sub/naver-talk.svg') no-repeat center / contain;} /*****미디어쿼리*****/ @media screen and (max-width: 1600px) { /*main*/ /*.main_slider .main_slider_wrap .main_slider_inner{height:680px}*/ .main_slider .arrow_wrap > div span{top:340px} /*main 추가*/ .main_slider .main_slider_wrap .main_slider_inner{margin:0 0.2%;} .main_slider .main_slider_wrap .main_slider_inner > img{max-width:1280px;} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1{font-size:3.4vw} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1 span{font-size:3vw} .main_slider .slick-prev{left:50px!important;} .main_slider .slick-next{right:50px!important;} } @media screen and (max-width: 1440px) { /*main 추가*/ .main_slider .main_slider_wrap .main_slider_inner > img{max-width:1024px;} } @media screen and (max-width: 1366px) { /*header*/ .header .header_inner .main_menu{width:54vw; margin-right:10vw} #menu_dept > div > ul { width: 62vw; margin-right: 2vw;} /*main*/ .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div{white-space:nowrap} } @media screen and (max-width: 1280px) { /*header*/ .header .header_inner .main_menu li a{font-size:17px} #menu_dept > div > ul > li ul li a{font-size:17px} #menu_dept > div > ul > li ul li ul li a{font-size:15px;} /*main*/ /*.main_slider .main_slider_wrap .main_slider_inner{height:580px}*/ .main_slider .arrow_wrap > div span{top:290px} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1:after{height:34px; margin:20px auto 15px} .main_slider .main_slider_wrap .main_slider_inner .slider_text div p{font-size:16px} .main_section .main_section_wrap .main_section_inner h2{font-size:20px} .main_section .main_section_wrap .main_section_inner .tab_title li{font-size:15px} .main_section .main_section_wrap .main_section_inner .tab-content > p{font-size:14px} .main_section .main_section_wrap .main_section_inner .tab-content > p span{font-size:17px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th{font-size:14px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div .label{font-size:14px; padding-right:6px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div .privacy_btn{font-size:11px; padding:0 12px} .checks input[type="radio"] + label{font-size:11px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form input[type="submit"]{font-size:15px} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p {font-size: 15px;} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p span {font-size: 15px;} .main_section .main_section_wrap .main_section_inner .main_form_wrap .main-address + div p + p + p {font-size: 14px;} .main_theme .title_left h2{font-size:2.8vw; padding-top: 1.4vw;} .main_theme .title_left p{padding-top:2.5vw;} .main_theme .title_left p span{font-size:1.5vw;} .main_theme .image_right .box{min-height:28.516vw; min-height: 16.516vw;} .main_theme .image_right .box a{padding:2.2vw;} .main_theme .image_right .box h3{font-size:2.2vw; padding-bottom:1vw;} .main_theme .image_right .box p{font-size:1.5vw;} .main_theme .image_right .box p span{height: 1.2vw; margin: 0 0.8vw;} .main_theme .image_right .box a:after{width: 28.204vw; height: 23.125vw; right: -3vw; bottom: -3vw;} .main_theme .image_right .box + .box a:after{width: 28.907vw; height: 27.11vw;} /*footer*/ .footer_area .footer_area_inner .f_logo{width:160px; padding-right:30px} .footer_area .footer_area_inner .footer_info p{font-size:13px} .footer_area .footer_area_inner .footer_info p + p{font-size:11px} .footer_area .footer_area_inner .footer_link{width:220px} .footer_area .footer_area_inner .footer_link ul{display:flex; flex-flow:nowrap; justify-content:space-between} .footer_area .footer_area_inner .footer_link ul li a img{width:100%} .footer_area .footer_area_inner .footer_link ul li + li{margin-left:5px} } @media screen and (max-width: 1024px) { .header .header_inner .main_menu li a{font-size:15px} #menu_dept > div > ul > li ul li a{font-size:14px} #menu_dept > div > ul > li ul li ul li a { font-size: 13px;} /*main*/ .main_link_menu .main_link_menu_inner div p + p{font-size:17px} .main_link_menu .main_link_menu_inner div p + p + p{font-size:13px} /*main 추가*/ .main_slider .main_slider_wrap .main_slider_inner > img{max-width:810px;} .main_slider .slick-prev{left:10px!important;} .main_slider .slick-next{right:10px!important;} } @media screen and (min-width: 981px) { /*header*/ .mobile_menu, .left_gnbWrap{display:none} /*main*/ .main_link_menu .main_link_menu_inner div p + p br{display:none} } @media screen and (max-width: 980px) { /* 모바일 메뉴 Break Point */ /*header*/ .header .header_inner {height: 90px;position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1;} .admin_top.header .header_inner {height:130px;} #wrapper {padding-top: 90px;} .header .header_inner .main_menu, #menu_dept{display:none} .header_hamburder_menu{display:none} #menu_dept{display:none!important} /*main*/ /*.main_slider .main_slider_wrap .main_slider_inner{height:500px}*/ .main_slider .main_slider_wrap .main_slider_inner .slider_text div p{font-size:14px} .main_slider .arrow_wrap > div span{top:250px} .main_slider .arrow_wrap > div span img{width:15px} /*.main_slider .main_slider_wrap .main_slider_inner .slider_text div{padding-bottom:100px}*/ /*.main_link_menu{margin-top:-100px}*/ .main_link_menu .main_link_menu_inner div{padding:20px 10px 50px} .main_link_menu .main_link_menu_inner div p + p{font-size:14px; padding-top:10px} .main_link_menu .main_link_menu_inner div p + p + p{bottom:20px} .main_link_menu .main_link_menu_inner div p img{max-width:75px; width:100%} .main_section{padding:60px 0 80px} .main_section .main_section_wrap .main_section_inner .tab-content .main_map{height:324px} .main_section .main_section_wrap .main_section_inner .main_form_wrap{padding:25px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th{width:20%} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th.col2{width:22%} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div br{display:block} .main_theme{padding-top:60px;} .checks{margin-top:10px} /*footer*/ .footer_area{padding:60px 0} .footer_area .footer_area_inner .f_logo{width:auto} .footer_area .footer_area_inner{padding-bottom:60px} .footer_area .footer_area_inner > div{float:none} .footer_area .footer_area_inner .footer_info p{padding-top:30px; word-break:keep-all} .footer_area .footer_area_inner .footer_info p + p{padding-top:20px} .footer_area .footer_area_inner .footer_info p span{display:block; font-size:0; height:0} .footer_area .footer_area_inner .footer_link{top:auto; bottom:0} /* [LDH 25.11.06] 퀵메뉴 추가 */ .quick_btn {width: 60px; height: 120px; grid-template-rows: repeat(2, 1fr);} .quick_btn > * span:not(.icon) {display: none;} } @media screen and (max-width: 810px) { /*main 추가*/ .main_slider .main_slider_wrap .main_slider_inner > img{border-radius:0;} } @media screen and (max-width: 767px) { .header .header_inner {height: 60px;} #wrapper {padding-top: 60px;} .mobile_menu_logo {height:60px;} .mobile_menu_logo > a {width:65px; height:60px;} .admin_top.header .header_inner {height:100px;} .admin_top .mobile_menu_logo {height:100px;} .admin_top .header_hamburger_menu {top: 60px;} /*main*/ .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1 span{font-size:4vw} .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1{font-size:6.5vw} .main_link_menu .main_link_menu_inner{flex-flow:wrap} .main_link_menu .main_link_menu_inner div{padding:20px 10px 45px} .main_link_menu .main_link_menu_inner div:nth-of-type(1), .main_link_menu .main_link_menu_inner div:nth-of-type(2), .main_link_menu .main_link_menu_inner div:nth-of-type(3){border-bottom:1px solid rgba(255,255,255,0.2)} .main_link_menu .main_link_menu_inner div:nth-of-type(4){border-left:0} .main_link_menu .main_link_menu_inner div:nth-of-type(5):after{content:''; position:absolute; width:1px ; height:100%; background:rgba(255,255,255,0.2); right:-1px; top:0} .main_link_menu .main_link_menu_inner div{width:33.333%} .main_link_menu .main_link_menu_inner div:nth-of-type(3):after{display:none;} .main_link_menu .main_link_menu_inner div:last-child:after{display:block; right: auto; left:0} .main_link_menu .main_link_menu_inner div p + p{font-size:13px; padding-top:5px} .main_link_menu .main_link_menu_inner div p + p + p{font-size:12px} .main_section .main_section_wrap{flex-flow:wrap} .main_section .main_section_wrap .main_section_inner{width:100%; min-height:auto} .main_section .main_section_wrap .main_section_inner + .main_section_inner{margin-left:0; margin-top:40px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr{display:block} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th{display:block; width:100%} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr th.col2{padding-left:0; width:100%} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr + tr + tr th{padding-top:15px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr td{display:block; width:100%; padding-top:5px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form table tr + tr td{padding-top:5px} .main_section .main_section_wrap .main_section_inner .main_form_wrap form > div .privacy_btn{font-size:13px} .main_theme > div{display:block;} .main_theme .title_left{width:100%; padding-right:0; padding-bottom:25px;} .main_theme .title_left h2{font-size:32px; padding-top:0;} .main_theme .title_left p{padding-top:20px;} .main_theme .title_left p span{font-size:18px;} .main_theme .image_right{width:100%;} .main_theme .image_right .box{min-height:38.516vw; min-height:22.516vw;} .main_theme .image_right .box a{padding:3.2vw;} .main_theme .image_right .box h3{font-size:3.4vw; padding-bottom:1.6vw;} .main_theme .image_right .box p{font-size:2.5vw;} .main_theme .image_right .box p span{height: 1.7vw; margin: 0 0.9vw;} .main_theme .image_right .box a:after{width: 35.3vw; height: 28.9vw; right: -4vw; bottom: -4vw;} .main_theme .image_right .box + .box a:after{width: 35.907vw; height: 33.11vw;} .checks input[type="radio"] + label{font-size:13px} /* footer */ .footer_area .footer_area_inner .f_logo a {max-width:65px} } @media screen and (max-width: 480px) { /*header*/ .header .header_inner{height:60px} .header .header_inner .logo a img{width:100px} .mobile_menu{top:40px} .left_gnbWrap{padding-top:80px} a.close{top:14px} /*main*/ /*.main_slider .main_slider_wrap .main_slider_inner{height:400px}*/ .main_slider .main_slider_wrap .main_slider_inner .slider_text div h1:after{height:24px} .main_slider .arrow_wrap > div span{top:200px} .main_slider .arrow_wrap > div span img{width:10px} .main_slider .arrow_wrap > div span.right_arrow{right:15px} .main_slider .arrow_wrap > div span.left_arrow{left:15px} .main_theme .title_left h2{font-size:26px;} .main_theme .title_left p{padding-top:10px;} .main_theme .title_left p span{font-size:16px;} .main_theme .image_right .box{min-height:50.516vw; min-height:32.516vw;} .main_theme .image_right .box h3{font-size:4.4vw;} .main_theme .image_right .box p{font-size:3.3vw;} .main_theme .image_right .box p span{height:2.2vw;} .main_theme .image_right .box a:after{width: 41.5vw; height: 34.1vw;} .main_theme .image_right .box + .box a:after{width: 41.907vw; height: 39.11vw;} .main_slider_inner.slider2 img {transform: translateX(-100px);} /* sample page only */ .mobile_only {display: block;} .sample_page_select .sub_page_select_menu {display: flex; align-items: center; justify-content: center; padding: 20px 0 0;} .sample_page_select .sub_page_select_menu li {display: block; margin: 0 10px; text-align: center;} .sample_page_select .sub_page_select_menu li a {color: #ddd; } .sample_page_select .sub_page_select_menu li.sub_active a {color: #145198; font-weight: bold;} /* footer */ .footer_area .footer_area_inner .f_logo a {max-width:60px;} /* [LDH 25.11.06] 퀵메뉴 추가 */ .quick_btn {width: 40px; height: 80px;} .quick_btn > * span:not(.icon) {display: none;} .quick_btn .icon {width: 20px; height: 20px;} }