﻿@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');
@import url('https://webfontworld.github.io/gangwon/GangwonEduHyeonokT.css');

.serif{font-family: 'Noto Serif KR', serif;}
.realway{font-family: 'Raleway', sans-serif;}
.lato{font-family: 'Lato', sans-serif;}
.oswald{font-family: 'Oswald', sans-serif;}

/* ------------------------------------------------------ Setting (html) ---------------------------------------------- */
html,body{background:#fff;}
body{font-family: 'Noto Sans KR', sans-serif; font-size:18px; font-weight:400; line-height:160%;
word-break:keep-all; letter-spacing:-0.04em; color:#3d3d3d;}

/* ---------------------------------------------------- Setting (Dnew) ------------------------------------------------ */

/* 레이아웃 */
.et{display:block}
.blind{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);}

.container-mobile{width:95%; min-width:312px; margin:0 auto;}
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}

.mt-1{margin-top:10px;}.mt-2{margin-top:20px;}.mt-3{margin-top:30px;}.mt-4{margin-top:40px;}.mt-5{margin-top:50px;}.mt-6{margin-top:60px;}.mt-7{margin-top:70px;}.mt-8{margin-top:80px;}.mt-9{margin-top:90px;}.mt-10{margin-top:100px;}.mt-11{margin-top:110px;}.mt-12{margin-top:120px;}.mt-13{margin-top:130px;}.mt-14{margin-top:140px;}.mt-15{margin-top:150px;}.mt-20{margin-top:200px;}
.mb-1{margin-bottom:10px;}.mb-2{margin-bottom:20px;}.mb-3{margin-bottom:30px;}.mb-4{margin-bottom:40px;}.mb-5{margin-bottom:50px;}.mb-6{margin-bottom:60px;}.mb-7{margin-bottom:70px;}.mb-8{margin-bottom:80px;}.mb-9{margin-bottom:90px;}.mb-10{margin-bottom:100px;}.mb-11{margin-bottom:110px;}.mb-12{margin-bottom:120px;}.mb-13{margin-bottom:130px;}.mb-14{margin-bottom:140px;}.mb-15{margin-bottom:150px;}.mb-20{margin-bottom:200px;}
.pt-1{padding-top:10px;}.pt-2{padding-top:20px;}.pt-3{padding-top:30px;}.pt-4{padding-top:40px;}.pt-5{padding-top:50px;}.pt-6{padding-top:60px;}.pt-7{padding-top:70px;}.pt-8{padding-top:80px;}.pt-9{padding-top:90px;}.pt-10{padding-top:100px;}.pt-11{padding-top:110px;}.pt-12{padding-top:120px;}.pt-13{padding-top:130px;}.pt-14{padding-top:140px;}.pt-15{padding-top:150px;}.pt-20{padding-top:200px;}
.pb-1{padding-bottom:10px;}.pb-2{padding-bottom:20px;}.pb-3{padding-bottom:30px;}.pb-4{padding-bottom:40px;}.pb-5{padding-bottom:50px;}.pb-6{padding-bottom:60px;}.pb-7{padding-bottom:70px;}.pb-8{padding-bottom:80px;}.pb-9{padding-bottom:90px;}.pb-10{padding-bottom:100px;}.pb-10{padding-bottom:100px;}.pb-11{padding-bottom:110px;}.pb-12{padding-bottom:120px;}.pb-13{padding-bottom:130px;}.pb-14{padding-bottom:140px;}.pb-15{padding-bottom:150px;}.pb-20{padding-bottom:200px;}
.padding-1{padding:10px;}.padding-2{padding:20px;}.padding-3{padding:30px;}.padding-4{padding:40px;}.padding-5{padding:50px;}
.margin-1{padding:10px;}.margin-2{margin:20px;}.margin-3{margin:30px;}.margin-4{margin:40px;}.margin-5{margin:50px;}
.box-1{padding:10px;border:1px solid #ebeceb;}.box-2{padding:20px;border:1px solid #ebeceb}.box-3{padding:30px;border:1px solid #ebeceb}.box-4{padding:40px;border:1px solid #ebeceb}.box-5{padding:50px;border:1px solid #ebeceb}
.border-1{border:1px solid #ebeceb;}.border-2{border:2px solid #ebeceb;}.border-3{border:3px solid #ebeceb;}.border-4{border:4px solid #ebeceb;}.border-5{border:5px solid #ebeceb;}.border-6{border:6px solid #ebeceb;}.border-7{border:7px solid #ebeceb;}.border-8{border:8px solid #ebeceb;}.border-9{border:9px solid #ebeceb;}.border-10{border:10px solid #ebeceb;}
.left{margin-left:0; margin-right:auto;}
.right{margin-left:auto; margin-right:0;}

.box-1 ol:last-child,.box-1 ul:last-child,.box-1 li:last-child,.box-1 p:last-child{margin-bottom:0;padding-bottom:0;}
.box-2 ol:last-child,.box-2 ul:last-child,.box-2 li:last-child,.box-2 p:last-child{margin-bottom:0;padding-bottom:0;}
.box-3 ol:last-child,.box-3 ul:last-child,.box-3 li:last-child,.box-3 p:last-child{margin-bottom:0;padding-bottom:0;}
.box-4 ol:last-child,.box-4 ul:last-child,.box-4 li:last-child,.box-4 p:last-child{margin-bottom:0;padding-bottom:0;}
.box-5 ol:last-child,.box-5 ul:last-child,.box-5 li:last-child,.box-5 p:last-child{margin-bottom:0;padding-bottom:0;}

/* 마우스오버 */
.over-zoom{overflow:hidden;}
.over-zoom img {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1); 
	transform:scale(1);
	-webkit-transition:.3s;
	-moz-transition:.3s;
	-ms-transition:.3s;
	-o-transition:.3s;
	transition:.3s;}

.over-zoom:hover img {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);  
    -o-transform:scale(1.2);
    transform:scale(1.2);}

.over-dark {background:#000;}
.over-dark img{opacity:1;transition:all 0.5s}
.over-dark:hover img{opacity:0.9;transition:all 0.5s}

.over-light {background:#fff;}
.over-light img{opacity:1;transition:all 0.5s}
.over-light:hover img{opacity:0.9;transition:all 0.5s}

.over-gray img{-webkit-filter: gray(100%);filter:gray;transition:all 0.5s}
.over-gray:hover img{-webkit-filter: grayscale(100%);filter: none;transition:all 0.5s}

.over-blur img{-webkit-filter:blur(3px);filter:blur(3px);transition:all 0.5s}
.over-blur:hover img{-webkit-filter:none;filter:none;transition:all 0.5s}

.over-color img{-webkit-filter:none;filter:none;transition:all 0.5s}
.over-color:hover img{-webkit-filter:saturate(3);filter:saturate(3);transition:all 0.5s}


/* ----------------------------------------------------- CSS 세팅 (Dnew) ------------------------------------------------ */

.bold{font-weight:700;}
.et{display:block;}
.thumb img::before{display: block;line-height: 100px;content:'이미지 준비중';text-align: center;opacity: .3;font-size: 2em;}
hr{width:100%; margin:0; padding:0; border-bottom:1px solid #ededed; }

.fc-blue{color:#0070e9}
.fc-green{color:#83c12f}
.bg-blue{background:#0070e9; color:#fff}
.bg-skyblue{background:#0caff3; color:#fff;}
.bg-darkblue{background:#384384; color:#fff;}
.bg-green{background:##83c12f; color:#fff;}
.bg-gray{background:#f7f7f7}
.more a{display:inline-block; margin-top:20px; padding:0.3em 1em; background:#7c6a5a; font-size:.8em; color:#fff;}

.point-box{background:#fff;}


/*js 삭제?*/
.none{display:none;}
.png24 {tmp:expression(setPng24(this));}
#stickymenu{position:absolute; width:30px; top:330px; visibility:hidden;}
.box {position:relative; left:0px; top:0px}
.box img {cursor:pointer; }
#box_skin {position:absolute; position:absolute; top:00px; left:0px;}
#box_skin li {display:inline; float:left;}


.before{max-width:680px; margin-top:50px;}
.before h2{font-size:18px; margin-bottom:30px; color:#9dd246; font-weight:800}
.before img{width:100%; margin-bottom:30px;}

/*---------------------------------------------------★메인&공통 (모바일 기준)---------------------------------------------------*/
@media screen and (max-width:1399px) {

/*공통*/
.pc-et{display:none;}
.mobile-et{display:block;}
.mobile-only{display:block!important}
.pc-only{display:none!important}

html,body{min-width:300px; font-size:16px;}
.container{position:relative; width:95%; max-width:540px; margin:0 auto;}
.container-sm{position:relative; width:95%; max-width:540px; margin:0 auto;}
.container-md{position:relative; width:95%; max-width:540px; margin:0 auto;}
.container-lg{position:relative; width:95%; max-width:540px; margin:0 auto;}
.row-0>div{padding-right:0; padding-left:0;}
.col-xs-12{width:100%;}

section{padding:30px 0;}

/*헤더*/
#header_wrap{ background:none; margin-bottom:0; z-index:9997;}
.header_inner{height:auto; width:100%; min-width:320px;}

.header-top{position:relative; height:80px;}
.header-top ul{display:inline-block; }
.header-top ul li{display:inline-block; text-align:left;}
.header-top ul.util{display:none}
.header-top ul.header-left{display:none}
.header-top ul.header-right{display:none}
.header-top h1{position:absolute; max-width:200px; top:14px;  margin-left:20px;}

.mobile-menu-wrap{position:fixed; top:0; right:-100%; height:100%; width:80%; padding:100px 0px;
background:#fff; color:#333; z-index: 9997; transition:all 0.2s; border-left:1px solid #ddd;}
.mobile-menu-wrap .container-md{width:100%; padding-left:0; padding-right:0;}

#gnb{position:static;}
#gnb>ul>li{float:none; width:100%; border-bottom:1px solid #ddd; text-align:left;}
#gnb>ul>li>a{position:relative; display:block; width:100%; padding:.5em 0em; text-indent:20px; pointer-events:none; font-size: 1rem;}
#gnb>ul>li>a::after{content:''; position:absolute; right:30px; top:12px; display:inline-block; width:10px; height:10px;
border-top:1px solid #333; border-right:1px solid #333; transform:rotate(135deg); transition:all .2s;}
#gnb>ul>li>a.on::after{top:16px;}

#gnb>ul .sub{display:block;	position:static; top:45px; width:100%; background:#ededed;
font-size:.9rem; text-indent:20px; color:#777;}
#gnb>ul .sub li{padding:.5em ; border-bottom:0.3px solid #ddd; }
#gnb>ul .sub li:last-child{border:0;}

#gnb>ul>li.menu ul.sub>li ul.detail-menu{display:none}




.mobile-menu-open{position:absolute; right:20px; top:24px;}
.mobile-menu-open button{width:40px; height:40px;}
.mobile-menu-open button span{display:block; margin-bottom:8px; width:28px; height:3px;
border-radius:12px; background:#555;}
.mobile-menu-close{position:absolute; left:20px; top:19px;}
.mobile-menu-close button{width:40px; height:40px;}
.mobile-menu-close button span{display:block; width:32px; height:2px; background:#333; transform:rotate(-45deg);}
.mobile-menu-close button span:last-child{margin-left:-1px; margin-top:-1px; transform:rotate(45deg);}
.mobile-menu-wrap.on{right:0;} /*네비 나타나게*/
#gnb>ul>li>a.main.on::after{transform:rotate(-45deg);} /*main sub화살표*/


/*메인*/

/*푸터*/
.foot-quick li:nth-child(1){display:none;}
.foot-quick li{margin:1.2em 0; width:33.33%; float:left; font-size:.8rem; text-align:center}
.foot-quick li a img{width:40%;}
#footer{border-top:1px solid #ddd; margin-top:16px;}
#footer .footer-top{display:none}
#footer .footer-bottom{padding:1em 0 6em;}
.footer-bottom h1{margin-bottom:1em; max-width:200px;}
.footer-bottom ul li{display:inline-block; font-size:.8rem; text-align:left; opacity:.5;}

.foot-contect{padding:30px 0; background:#0caff3}
.foot-contect .container{background:#fff; text-align:center}
.foot-contect ul li a{display:block; padding:.8rem 0;}
.foot-contect ul li:first-child a{border-bottom:1px solid #ededed;}
.foot-contect ul li img{width:36px; padding-right:4px; vertical-align: middle;}

.foot-map{position:relative}
.foot-map .map{height:240px}
.foot-address{width:100%;}

}

/*---------------------------------------------------★메인&공통 (피씨 기준)---------------------------------------------------*/
@media screen and (min-width:1400px) {

/*공통*/
.pc-et{display:block;}
.mobile-et{display:none;}
.mobile-only{display:none!important}
.pc-only{display:block!important}

html,body{min-width:1280px;}

.container{position:relative; width:1280px; margin:0 auto;}
.container-sm{position:relative; width:1200px; margin:0 auto;}
.container-md{position:relative; width:1400px; margin:0 auto;}
.container-lg{position:relative; width:1600px; margin:0 auto;}
.row-0>div{padding-right:0; padding-left:0;}

section{padding:80px 0;}

/*헤더*/
#header-wrap-all{position:relative; z-index:999; }
.gnb-bg{ position:absolute; left:0; top:100%; width:100%; height:0; background:#fff;
box-shadow: 2px 10px 4px rgba(1,1,1,.1);}
#header_wrap{ background:url(../images/bg_gnb.jpg) 0 100% repeat-X; position:relative; z-index:100;}
#header_wrap .header-inner{ position:relative; width:92%; max-width:1008px; margin-left:auto; margin-right:auto; height:172px;}

.header-top{position:relative; height:140px;}
.header-top ul{display:inline-block; }
.header-top ul li{display:inline-block; text-align:left;}

.header-top ul.util{position:absolute; top:4px; right:0; font-size:.8rem; color:#646464;}
.header-top ul.util li a{padding:0 .4em;}
.header-top ul.util li img{display:inline-block; padding-right:8px; vertical-align: middle;}

.header-top h1{position:absolute; width:280px; top:16px; left:50%; transform: translateX(-50%);}

.header-top ul.header-left{position:absolute; top:24px; left:0; display:table}
.header-top ul.header-left li{display:table-cell; vertical-align:middle; font-size:.8em; line-height:136%; font-weight:500;}
.header-top ul.header-left li:first-child{padding-left:0;}
.header-top ul.header-left li:nth-child(odd){padding-right:12px; padding-left:16px;}
.header-top ul.header-left li:nth-child(even){padding-right:16px; border-right:1px solid #ddd;}
.header-top ul.header-left li:last-child{border-right:0;}

.header-top ul.header-right{position:absolute; top:42px; right:0; display:table;}
.header-top ul.header-right li a{display:inline-block; padding-left:12px; vertical-align:middle;}
.header-top ul.header-right li img{display:inline-block; margin-right:8px; vertical-align:inherit;}
.header-top ul.header-right li span{vertical-align:inherit;}
.header-top ul.header-right li .plus{display:inline-block; margin-left:2px; height:13px; width:13px; background:#381e1f;
font-size:.9rem; line-height:12px; color:#fff; text-align:center; }

#gnb{ width:100%; position:absolute; left:0; bottom:0; border-bottom:1px solid #ededed;}
#gnb .container-lg{width: 1900px;}
#gnb>ul>li.menu{ position:relative; float:left; width:11.11%; text-align:center; font-size:16px; color:#111;}
#gnb>ul>li.menu>a{ display:block; height:45px; line-height:45px;}
#gnb>ul>li.menu ul.sub{display:none; position:absolute; top:45px; left:0; width:100%; height:482px;
border-right:1px dotted #ededed; font-size:16px; color:#333;}
#gnb>ul>li.menu ul.sub>li>a{ display:block;height: 36px;line-height: 36px;font-size: 13px;white-space: nowrap;letter-spacing: -0.075em;}
#gnb>ul>li.menu ul.sub>li>a:hover{font-weight:bold}

#gnb>ul>li.menu ul.sub>li ul.detail-menu li a{display:block; background:#ededed; border: 1px dotted #e4e4e4;
font-size:.9rem; line-height: 270%; color:#979797}
#gnb>ul>li.menu ul.sub>li ul.detail-menu li a:hover{color:#777;}


/*메인*/
.main_visual{width:100%; height:600px; overflow:hidden; border-bottom:1px solid #ddd;}
.main_visual .visual_content{position:relative; width:1000px;height:600px;margin:0 auto;} /*navi값*/
.main_visual .visual_obj_group{position:absolute; top:0;left:0;z-index:10; margin-top:80px;}
.main_visual .visual_obj_group > div{position:absolute;top:0;left:0;width:1000px; }
.main_visual .visual_obj_group .txt_group{position:absolute;top:80px;left:0px; z-index:10; filter:alpha(opacity=0);opacity:0; margin:0 0 0 20px;}
.main_visual .visual_obj_group .visual_img{position:absolute; filter:alpha(opacity=0);opacity:0 ; z-index:20; right:0px;}

.main_visual .visual_bg_group{position:absolute; top:0; left:0; z-index:5}
.main_visual .visual_bg_group > p {position:absolute; top:0;left:-1000px;width:3000px; height:600px;filter:alpha(opacity=0);opacity:0}
.main_visual .visual_bg_02{background:url(../images/main/m_visual_bg_01.jpg) center top no-repeat #c3dcfc;}
.main_visual .visual_bg_03{background:url(../images/main/m_visual_bg_02.jpg) center top no-repeat #f4eeea;}
.main_visual .visual_bg_04{background:url(../images/main/m_visual_bg_03.jpg) center top no-repeat #eaf1f7;}
.main_visual .visual_bg_05{background:url(../images/main/m_visual_bg_04.jpg) center top no-repeat #c3c3c3;}
.main_visual .visual_bg_06{background:url(../images/main/m_visual_bg_05.jpg) center top no-repeat #bfdffe;}
.main_visual .visual_bg_01{background:url(../images/main/m_visual_bg_06.jpg) center top no-repeat #ecebf0;}

.main_visual .visual_tab{position:absolute; top:575px; left:50px; z-index:15;}
.main_visual .visual_tab ul{overflow:hidden;width:1000px;margin:0 auto}
.main_visual .visual_tab ul > li {position:relative;float:left;width:160px;height:25px;cursor:pointer}

#m_best {margin:30px 0 30px 0 ;}
#m_best li {display:inline; padding:0px; margin:0px; vertical-align:top; float:left;}

#m_board {}
#m_board_board {width:670px; float:left;}
#m_board_review {width:340px; float:left; margin:0 30px 0 0; }
#m_board_review h1 {height:31px; margin:0 0 10px 0;}
#m_board_review p {width:90px; float:left; margin:0 10px 0 0;}
#m_board_review table {width:240px; height:90px; float:left; }
#m_board_online {width:300px; float:left; }
#m_board_online h1 {height:31px; margin:0 0 10px 0;}
#m_board_online table {width:100%; height:90px; float:left; }
#m_board_review table td, #m_board_online table td {background:url(../images/main/m_icon.gif) no-repeat left; padding:1px 0 1px 15px;}
#m_info {float:left; margin:10px 0 0 0;}

#m_board_banner {width:300px; float:right;}
#m_board_banner li {margin:0 0 10px 0; float:left; display:block;}

/*푸터*/
.foot-info{margin-top:50px;}

.foot-quick{margin-top:50px; margin-bottom:50px; border:10px solid #dcf4fd;}
.foot-quick li{display:inline-block; width:24%; text-align:center}
.foot-quick li a{position:relative; display:block; padding:80px 0;}
.foot-quick li a img{position:relative; top:0px; transition:all .5s}
.foot-quick li a::after{content:''; position:absolute; right:0; top:50%; margin-top:-50px; display:block; width:1px; height:100px; background:#ddd;}
.foot-quick li:last-child a::after{display:none}
.foot-quick li a:hover img{top:-10px;}

.footer-top{height:44px; line-height:44px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; font-size:1rem;}
.footer-top ul{display:block; text-align:center}
.footer-top li{display:inline-block; text-align:left;}
.footer-top li a{display:block; padding:0 12px;}
.footer-bottom{padding:30px 0; letter-spacing:0;}
.footer-bottom ul li{display:inline-block; margin-right:3px; font-size:.9rem; line-height:180%; text-align:left; opacity:.8;}
.footer-bottom ul li:last-child{margin-top:12px; font-size:.8rem;  opacity:.5;}

.foot-map{position:relative}
.foot-map .map{height:400px}
.foot-address{position:absolute; width:92%; left:4%; bottom:8px; z-index: 99;}


}

