@charset "UTF-8";
/********************************************************
■ 사이트 초기 설정
********************************************************/
:root {
	/*메인컬러*/
	--main-color1:#ffa50f;
    --main-color1-rgb:255,165,15;
	--main-color2:#f77100;
    --main-color2-rgb:247,133,0;
	--main-color3:#a0744f;
    --main-color3-rgb:160,16,79;

    /*명조체*/
    --serif-font:BookkMyungjo;
}

/* 내용 드래그했을때 선택 블록 */
::selection { background: var(--main-color1) !important; color: white; }
::-moz-selection { background: var(--main-color1) !important; color: white; }

/********************************************************
■ HTML 요소 초기화
********************************************************/
* { box-sizing: border-box; margin:0; padding:0; }
/* 기반 글자크기 재정의 -- 상대단위(rem) 사용에 중요함. */
html, body { font-size: 18px; font-family: "Pretendard", sans-serif !important; letter-spacing:-.5pt; font-weight:400; word-break:keep-all; word-wrap:break-word; }
body { position: relative; left:0; overflow-x: hidden !important; color: #333; width:100%; line-height:1.4; }

@font-face {
    font-family: 'BookkMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

a, a:link, a:visited, a:hover { color: #333; text-decoration: none; transition:all .3s ease; }
a:focus { outline: none; }
button { border:none; background:none; }

img { max-width:100%; }

label { font-weight: normal; }
video { -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; }

ul, ol { list-style: none; margin:0; padding:0; }
dt { font-weight:normal; }
dt, dd { line-height:1.4; }

select::-ms-expand { display: none; }
select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background: url('../images/select-arrow.png') no-repeat calc(100% - 10px) center/10px auto; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#aaa; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #aaa; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }

input:read-only, textarea:read-only { background:#eee; }
input:-moz-read-only, textarea:-moz-read-only { background:#eee; }

input:focus { outline:none; border-color:#aaa !important; }
input, textarea, select { width:100%; border:1px solid #ccc; border-radius:3px; resize:none; }
input[type="radio"], input[type="checkbox"] { width:auto; vertical-align:middle; margin-top:-2px; }

[class*=" xi-"], [class^=xi-] { font-size:inherit; }
.swiper-slide .img { background:none no-repeat center/cover; }

.m-ele { display:none !important; }

.btn { border-radius:0; }

.modal-open #thema_wrapper { overflow-y:hidden; }
.modal-open .modal { display:flex; justify-content:center; align-items:center; }
.modal-dialog { position:relative; width:850px; max-width:calc(100% - 10px); height:calc(100% - 80px);  }
.modal-content { position:absolute; left:0; top:0; right:0; bottom:0; border-radius:0; padding:40px 50px; height:100%; overflow-y:auto; }
.modal .close-btn { position:absolute; left:100%; top:0; color:#fff; background:var(--main-color1); padding:15px; cursor:pointer; font-size:2.3rem; z-index:2; }



.go-top { position:fixed; right:30px; bottom:30px; width:60px; height:60px; background:rgba(0,0,0,.3); border-radius:100%; z-index:999; }
.go-top:before, 
.go-top:after { content:""; position:absolute; width:5px; height:20px; top:30%; border-radius:5px; background:#fff; }
.go-top:before { transform:rotate(45deg); left:36%; }
.go-top:after { transform:rotate(-45deg); right:36%; }


@media (max-width: 1024px) {
	.modal-content { padding:30px 35px; }
	.modal .close-btn { left:auto; right:0; font-size:1.5rem; padding:10px; }

}
@media (max-width: 767px) {
    html, body { font-size: 14px; }

    select { background-position:calc(100% - 5px); background-size:15px auto; }

	.modal-dialog { height:95%; }
	.modal-content { padding:25px 20px; }

	.m-ele { display:block !important; }
	.d-ele { display:none !important; }


	.go-top { right:10px; bottom:10px; width:30px; height:30px; }
	.go-top:before, 
	.go-top:after { width:3px; height:10px; top:30%; }
}

/********************************************************
■ Layout : 레이아웃
********************************************************/
.c { max-width:1400px; margin:0 auto; padding-left:20px; padding-right:20px; }

.h0, .h1, .h2, .h3, .h4, .h5, .h6, .h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n, h1, h2, h3, h4, h5, h6 { line-height: 150%; margin:0; }
h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; }
.h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n { font-weight: normal; }

.h0 { font-weight: bold; font-size: 4rem; }
h1, .h1, .h1n { font-size: 2.7rem; }
h2, .h2, .h2n { font-size: 2.4rem; }
h3, .h3, .h3n { font-size: 2.1rem; }
h4, .h4, .h4n { font-size: 1.8rem; }
h5, .h5, .h5n { font-size: 1.5rem; }
h6, .h6, .h6n { font-size: 1.2rem; }

@media (max-width: 767px) {
	.h0 { font-size: 3rem; }
	h1, .h1, .h1n { font-size: 2.1rem; }
	h2, .h2, .h2n { font-size: 1.9rem; }
	h3, .h3, .h3n { font-size: 1.7rem; }
	h4, .h4, .h4n { font-size: 1.5rem; }
	h5, .h5, .h5n { font-size: 1.3rem; }
	h6, .h6, .h6n { font-size: 1.1rem; }
}
@media (max-width: 480px) {
	.h0 { font-size: 2.5rem; }
	h1, .h1, .h1n { font-size: 2.1rem; }
	h2, .h2, .h2n { font-size: 1.9rem; }
	h3, .h3, .h3n { font-size: 1.7rem; }
	h4, .h4, .h4n { font-size: 1.5rem; }
	h5, .h5, .h5n { font-size: 1.3rem; }
	h6, .h6, .h6n { font-size: 1.1rem; }
}

@media (max-width: 1024px) {
	.c { padding-left:15px; padding-right:15px; }
}

@media (max-width: 400px) {
	.c { padding-left:10px; padding-right:10px; }
}



/********************************************************
■ Page Title : 페이지 타이틀 및 설명글
********************************************************/
.at-title { margin-bottom: 40px; position: relative; text-align:center; font-weight:600; }
.at-title .page-title { font-size:2.5rem; }
.at-title .page-desc { color:#666; margin-top:10px; }

@media (max-width: 767px) {
    .at-title { margin-bottom: 25px; }
}

/********************************************************
■ Sub Title : 서브 타이틀 및 설명글
********************************************************/
.at-content header.header { margin-bottom:50px; text-align:center; }

@media all and (max-width:768px) {
	.at-content header.header { margin-bottom:30px; }
	.at-content header.header .head { margin-bottom:5px; }
}

/********************************************************
■ Main Page : 메인 인덱스 페이지
********************************************************/
.pg-main { overflow:hidden; }
.pg-main .sec { position:relative; }
.pg-main .sec .popup { display:none; }


.pg-main .sec .header { margin-bottom:40px; }
.pg-main .sec .header .subhead { position:relative; padding-top:10px; font-weight:900; margin-bottom:20px; }
.pg-main .sec .header .head { font-size:3rem; line-height:140%; margin-bottom:25px; font-weight:700; color:#f77100; }
.pg-main .sec .header .desc { font-size:1.25rem; line-height: 160%; color:#666; }

.pg-main .sec :not(.header):not(.content) > .head { font-size:3.0rem; font-weight:700; }
.pg-main .sec :not(.header):not(.content) > .desc { font-size:1.4rem; }

.head_add { font-size:3rem  !important;; line-height:140%; margin-bottom:25px; font-weight:700; color:#f77100; }

.pg-main .sec .more { padding:13px 30px; border:1px solid #666; transition:background 500ms 0ms !important; }
.pg-main .sec .more .arrow { margin-left:7px; }

.pg-main .sec .arrow { position:relative; display:inline-block; vertical-align:middle; width:25px; height:3px; border-radius:5px; background:#666; }
.pg-main .sec .arrow:before, .pg-main .sec .arrow:after { content:""; position:absolute; background:#666; width:12px; height:3px; border-radius:5px; right:-1px; }
.pg-main .sec .arrow:before { top:4px; transform:rotate(-45deg); }
.pg-main .sec .arrow:after { bottom:4px; transform:rotate(45deg); }

.pg-main .sec .more:hover { background:#333; color:#fff; }
.pg-main .sec .more:hover .arrow { background:#eee; }
.pg-main .sec .more:hover .arrow:before, .pg-main .sec .more:hover .arrow:after { background:#eee; }


.pg-main .section:not(.no-padding) { padding-top:100px; padding-bottom:100px; }


@media (max-width: 767px) {
    .pg-main .section:not(.no-padding) { padding-top:40px; padding-bottom:40px; }

    .pg-main .sec .header { margin-bottom:20px; }

    .pg-main .sec :not(.header):not(.content) > .head { font-size:2rem; }
    .pg-main .sec :not(.header):not(.content) > .desc { font-size:1.125rem; }
	.head_add{ font-size:2rem !important;; }
}


/********************************************************
■ Page Content : 서브페이지 본문
********************************************************/
.page-content { word-break: keep-all; word-wrap: break-word; }

.page-content .header { margin-top: 20px; }
.page-content .header .line { display: inline-block; background-color: #f17f42; width: 100px; height: 3px; margin: 10px 0; }

.page-content .h0, .page-content h1, .page-content h2, .page-content h3 { margin-top: 0; line-height: 125%; }

.page-content p { margin: 0 0 15px; padding: 0; line-height: 160%; }

.page-content .head { margin-bottom: 10px; }

.page-content .desc { line-height: 150%; }

@media (max-width: 767px) {
    .page-content .pull-left, .page-content .pull-right { width: 100% !important; }
}



/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { position: absolute; left:0; right:0; top:0; transition-duration:500ms; z-index: 100; /* 메뉴높이 */ height:100px; }

#top .top-wrap { position:relative; height:100%; padding:0 5%; display:flex; align-items:center; justify-content: space-between; z-index:3; transition-duration:700ms; }

#top .top-wrap .left { width:200px; height:50px; }
#top .top-wrap .left .logo { display:block; height:100%; background: url("../images/logo-white.png") left center/contain no-repeat; transition-duration: 200ms; }
body.scrolled #top .top-wrap .left .logo { background-image: url("../images/logo.png"); }

#top .top-wrap .right { position:relative; display: flex; align-items: center; transition-duration:200ms; }
#top .top-wrap .right section { position: relative; margin-right: 20px; padding:20px 0; }

#top .top-wrap .right .top-search { }
#top .top-wrap .right .top-search .search-btn { display:block; width:20px; height:20px; background:url('../images/top-icon-search-white.png') no-repeat center/contain; }
body.scrolled #top .top-wrap .right .top-search .search-btn { background-image: url("../images/top-icon-search.png"); }

#top .top-wrap .top-search-box { display: none; left: 50%; padding: 20px 10px; position: absolute; top: 50%; transform: translate(-50%, -50%); }
#top .top-wrap .top-search-box .wrap { align-items: center; display: flex; height: 100%; justify-content: center; }
#top .top-wrap .top-search-box .wrap form { border: 3px solid #fff; display: flex; padding: 7px 8px 8px; width: 300px; }
#top .top-wrap .top-search-box .wrap form .searchbox { background: transparent; border: 0; flex: 1; }
#top .top-wrap .top-search-box .wrap form .searchbox::placeholder { color: #ddd; }
#top .top-wrap .top-search-box .wrap form .searchbox:focus { outline: none; }
#top .top-wrap .top-search-box .wrap form button { background: transparent; border: 0; color:#ddd; flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box .wrap form button:focus { outline: none; }


#top .top-wrap .right .lang { border-radius: 20px; transition-duration: 300ms; z-index:9; }
#top .top-wrap .right .lang > a { color:#fff; font-size:1.25rem; }
body.scrolled #top .top-wrap .right .lang > a { color:#333; }

#top .top-wrap .right .links {  }
#top .top-wrap .right .links .member-btn { display:block; width:20px; height:20px; background:url('../images/top-icon-login-white.png') no-repeat center/contain; }
body.scrolled #top .top-wrap .right .links .member-btn { background-image: url("../images/top-icon-login.png"); }

#top .top-wrap .right section .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:10px 20px; background:#fff; border:1px solid #ddd; display: none; }
#top .top-wrap .right section:hover .sub, #top .top-wrap .right section .sub:hover { display:block; }
#top .top-wrap .right section .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); left:50%; transform:translateX(-50%) rotate(45deg); width:20px; height:20px; background:#fff; border-left:1px solid #ddd; border-top:1px solid #ddd; }
#top .top-wrap .right section .sub a { display:block; color:#aaa; padding:5px 0; text-align:center; }


body.scrolled #top .top-wrap .right .links .sub a { color:#333; }


#menu-wrap-bottom-bg { position:absolute; left:0; right:0; top:100%; transition-duration: 500ms; }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { display:block; width:20px; transition-duration: 300ms; z-index:2; }
#top .top-menu-btn div { background:#fff; border-radius:99px; height:2px; width:100%; }
#top .top-menu-btn div:nth-child(2) { margin: 5px 0; }

body.scrolled #top .top-menu-btn div { background:#333; }


@media (max-width: 1600px) {
	#top .top-wrap { padding:0 30px; }
}

@media (max-width: 767px) {
	#top { height:70px; }
	#top .top-wrap { padding:0 15px; }
	#top .top-wrap .left { height:40px; }

	#top .top-wrap .right section { margin-right:15px; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { transition-duration: 200ms; margin:0 5%; }
#menu .ul { position:relative; width:100%; display: flex; justify-content: center; height:100%; z-index:10; }
#menu .ul:after { display:none; }
#menu .ul .li { position:relative; padding:0 2vw; }
#menu .ul .li .a { display:flex; align-items:center; justify-content:center; padding:20px 0; font-weight:600; font-size:1.125rem; color:#fff; }

body.scrolled #menu .ul .li .a { color:#111; }


#menu .sub-wrap { position: absolute; top:30%; left:0; width:250px; background:#fff; transition-duration:500ms; padding:20px; opacity:0; visibility:hidden; }
#menu .li:hover .sub-wrap { top:100%; opacity:1; visibility:visible; }
#menu .sub-wrap .sub-a { color: #666; display: block; padding: 10px; white-space: nowrap; }
#menu .sub-wrap .sub-a:hover { background:var(--main-color1); color:#fff; }

#menu .depth2 li { position:relative; transition-duration: 400ms; }


@media (max-width: 1200px) {
	#menu { display:none; }
}




/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on #m-menu { bottom:0; }
body.m-menu-on.fix { overflow:hidden; }

#m-menu { position: fixed; top:0; right:0; bottom:100%; width: 500px; max-width:100%; z-index: 1100; overflow:hidden; transition-duration: 600ms; }
#m-menu:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; opacity:.95; background:var(--main-color3); }
#m-menu .m-menu-container { position:relative; height:100%; display:flex; flex-direction: column; justify-content:space-between; transition-duration: 500ms; }
body.m-menu-on #m-menu .m-menu-container { padding:30px; }

#m-menu a.btn-close { position:relative; display:block; margin-left:auto; margin-bottom:25px; width:30px; height:30px; }
#m-menu a.btn-close:before, #m-menu a.btn-close:after { content:""; position:absolute; top:50%; left:50%; height:30px; width:2px; background:#fff; border-radius:2px; margin:-15px 0 0 -1px; }
#m-menu a.btn-close:before { transform: rotate(45deg); }
#m-menu a.btn-close:after { transform: rotate(-45deg); }

#m-menu .items { position:relative; margin-bottom:20px; opacity:0; transition-duration: 600ms; }
#m-menu .item { }
#m-menu .item .is_sub { position:relative; color: #fff; display: block; padding:10px 0; font-size:1.875rem; font-weight:600; }
#m-menu .item .is_sub:before, #m-menu .item .is_sub:after { content:""; position: absolute; top:50%; right:0; background:#fff; }
#m-menu .item .is_sub.plus:before { width:3px; height:20px; margin:-10px 8.5px 0 0; }
#m-menu .item .is_sub.minus:after { width:20px; height:3px; margin:-1.5px 0 0 -10px; }

#m-menu .item .sub { display: none; }
#m-menu .item .sub.on { display: block !Important; }

#m-menu .item .sub li { display:flex; flex-direction: column; align-items: baseline; padding:0 10px; }
#m-menu .item .sub .depth2-a { color: rgba(255,255,255,.5); margin:7px 0; position: relative; transition: all 0.3s ease; }
#m-menu .item .sub .depth2-a:before { content:""; position:absolute; left:0; top:100%; right:0; width:0; height:1px; background:rgba(255,255,255,.85); transition-duration: 400ms; }
#m-menu .item .sub .depth2-a:hover:before,
#m-menu .item.on .sub .depth2-a.on:before { width:100%; }
#m-menu .item .sub .depth2-a:hover, #m-menu .item .sub .depth2-a.on { color:rgba(255,255,255,.85); }

#m-menu .item .sub li:last-child { margin-bottom:30px; }

#m-menu .item .depth3 { }
#m-menu .item .depth3 .depth3-a { display:block; color:rgba(255,255,255,.65); padding:5px; }
#m-menu .item .depth3 .depth3-a:before { content:"·"; }
#m-menu .item .depth3 .depth3-a:hover { text-decoration:underline; }

body.m-menu-on #m-menu .items { opacity:1; }


#m-menu .m-menu-login { display:flex; margin-top:50px; opacity:0; transition-duration: 600ms; transition-delay:500ms; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; color:rgba(255,255,255,.5); height:25px; line-height:25px; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-login a:hover { color:rgba(255,255,255,.85); }
#m-menu .m-menu-login a:before { content:""; position:absolute; top:50%; right:0; width:2px; height:10px; background:rgba(255,255,255,.1); margin-top:-6px; }
#m-menu .m-menu-login a:last-child:before { display:none; }

body.m-menu-on #m-menu .m-menu-login { opacity:1; }


#m-menu-overlay { position: fixed; left: 0; top: 0; z-index: 1050; width: 100%; height: 100%; opacity: 0; display:none; }


@media (max-width: 767px) {
	body.m-menu-on #m-menu .m-menu-container { padding:20px; overflow-y:auto; }
	#m-menu a.btn-close { margin-bottom:20px; }
	#m-menu .items { margin-bottom:20px; }
	#m-menu .item .sub li:last-child .depth2-a { margin-bottom:25px; }

	#m-menu .m-menu-login { margin-top:30px; }
}



/********************************************************
■ Sub Visual : 서브 비주얼 부분
********************************************************/
#sub-visual { position:relative; height: 450px; background-color:#888; overflow:hidden; }
#sub-visual .img { position:absolute; left:0; top:0; right:0; bottom:0; background-size:cover; background-position:center; animation: zoomin 5s; }
@keyframes zoomin {
    0%	{ transform: scale(1.1); }
    100%    { transform: scale(1); }
}
#sub-visual .img::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; background-color:rgba(0,0,0,.5); }
#sub-visual .c { position:relative; top:50%; transform:translateY(-50%); text-align:center; z-index:2; }
#sub-visual .content { text-align:center; color: white; margin-top:30px; }
#sub-visual .title { font-weight: 400; line-height:125%; margin-bottom:0; }
#sub-visual .desc { line-height:150%; font-weight: 300; animation-delay:0.5s; }

@media (max-width: 767px) {
    #sub-visual { height: 200px; }

    #sub-visual .content { margin-top:10px; }
}



/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
.sub-top { position:relative; }
#sub-menu { position:absolute; left:0; right:0; bottom:0; z-index:99; }
#sub-menu ul { position:relative; }
#sub-menu ul:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:#333; opacity:.8; }
#sub-menu li { position: relative; z-index: 3; width:250px; }
#sub-menu li:last-child { background:#fff; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}

#sub-menu li .fa-angle-up, #sub-menu li.on .fa-angle-down { display:none; }
#sub-menu li.on .fa-angle-up { display:inline-block; }

#sub-menu .home { width:auto; }
#sub-menu .home .item { font-weight: 700; min-width:auto; padding-right:30px; color:#fff; font-size:.875rem; }
#sub-menu li .item { display: block; padding: 15px 30px; color: #fff; font-size:1.1rem; border-right: 1px solid rgba(255,255,255,.3); }
#sub-menu li .item .arrow { position: absolute; right: 20px; top: 50%; transform:translateY(-50%); width: 25px; height:15px; text-align: center; }
#sub-menu .sub { position: absolute; width:100%; top:100%; padding: 10px 0; background:#fff; border:1px solid #ddd; display:none; z-index:2; }
#sub-menu .sub:before { content:""; position:absolute; top:-1px; left:0; right:0; height:2px; }
#sub-menu .sub a { position: relative; display: block; color: #666; padding: 5px 30px; }

@media (min-width: 767px) {
	#sub-menu.on { position:fixed; left:0; top:0; right:0; bottom:auto; background:#fff; border-bottom:1px solid #ddd; }
    #sub-menu.on li:last-child { border-bottom:0; }
}

@media (max-width: 767px) {
    #sub-menu { position:relative; }
	#sub-menu > .c { padding: 0 !important; }
    #sub-menu ul { width:100%; }
	#sub-menu li { width:50%; }
	#sub-menu li .item { padding:10px 15px; }
	#sub-menu li .item .arrow { right: 10px; }
	#sub-menu .sub a { padding:5px 15px; }
}



/********************************************************
■ Footer : 하단 푸터
********************************************************/
#bottom .footer { background:#fff; border-top:1px solid #ddd; text-align: center; }
#bottom .footer .c { margin:50px auto; }

#bottom .footer .logo { margin-bottom:20px; font-family:var(--serif-font); }
#bottom .footer .logo img { width:150px; }
#bottom .footer dl { font-size:1.125rem; margin-bottom:15px; }
#bottom .footer dl .address { margin:10px 0; font-size:1.25rem; }
#bottom .footer dl .address dt { display:none; }
#bottom .footer dl .wrap { display:inline-block; margin-right:15px; }
#bottom .footer dl .wrap:last-child { margin-right:0; }

#bottom .footer dl dt, .footer dl dd { display:inline-block; }
#bottom .footer dl dt { margin-right:5px; }
#bottom .footer dl :not(.support) dt:after { content:" : "; }

#bottom .footer dl .support { margin-top:10px; color:var(--main-color1); font-weight:600; }
#bottom .footer dl .support dd { }

#bottom .footer .copyright { padding:20px; border-top: 1px solid #ddd; color:#888; }

#bottom .footer .family-site { position:relative; text-align:left; display:inline-block; margin:0 auto; cursor:pointer; }
#bottom .footer .family-site .head { position:relative; padding:10px 15px; width:230px; background:#fff; border:1px solid #666; display:flex; justify-content: space-between; align-items:center; z-index:2; }
#bottom .footer .family-site .sub { position:absolute; left:0; bottom:100%; right:0; padding:5px; margin-bottom:-12px; overflow:hidden; background:#fff; border:1px solid #ddd; z-index:1; }
#bottom .footer .family-site.on .sub { margin-bottom:0; }
#bottom .footer .family-site .sub a { display:block; padding:5px 10px; }


#bottom   .footer__link-icons {margin-top: 15px;}
#bottom   .footer__link-icons li {margin-right: 6px; float:left}
#bottom   .footer__link-icons li:last-child {margin-right: 0;}
#bottom   .footer__link-icons li a {display: block;width: 35px;height: 35px;line-height: 35px;background-color: #bbbbbb;border-radius: 50%;transition: 0.3s;}
#bottom  .footer__link-icons li:hover a {background-color: #f27822;}



#bottom .link {font-size:.875rem; }
#bottom .link a { position:relative; padding:0 10px; color: #aaa; }
#bottom .link a::before { content:""; position:absolute; top:calc(50% - 5px); right:-3px; width:1px; height:12px; background:#ddd; }
#bottom .link a:last-child::before { display:none; }


@media (max-width: 767px) {
	#bottom .footer .c { margin:30px auto; }
	#bottom .footer img { width:100px; }
	#bottom .footer dl { font-size:1rem; }
	#bottom .footer dl .address { font-size:1rem; }
	#bottom .footer dl .wrap { display:block; }
}

/********************************************************
	■ 타일 스타일 공용
********************************************************/
.tiles { visibility: hidden; }
.tiles.loaded { visibility: visible; }
.tiles::before, .tiles::after { content: ""; clear: both; display: block; }

.tiles .tile { float:left; margin-bottom:10px; text-align:center; visibility: hidden; }
.tiles .tile .a { position:relative; display:block; width:100%; height:100%; padding:0; }
.tiles .tile .a::before { content:""; position:absolute; z-index:1; transition:all .3s ease; }
.tiles .tile .a::after { content:""; position:absolute; z-index:1; transition:all .3s ease; }

.tiles .tile .a .a2, .tiles .tile .a .a3 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.tiles .tile .a .a2::before, .tiles .tile .a .a2::after, .tiles .tile .a .a3::before, .tiles .tile .a .a3::after { content: ""; position: absolute; transition-timing-function: linear; z-index: 3; }

.tiles .image { position: relative; display: block; overflow: hidden; }
.tiles .image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .more { display:none; position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 2; }
.tiles .image .img { background-repeat:no-repeat; background-size:cover; background-position:center; transition:all .3s ease; }
.tiles .content { height:100%; text-align: left; }


@media (max-width: 767px) {
	.tiles { margin: 0 -5px; }
	.tiles .tile { padding: 0 5px; }
}

/* 트랜지션 (애니메이션 속도) */
.tran-2 .tile > .a::after, .tran-2 .tile .image::after, .tran-2 .tile .image .img { transition: all .2s ease; }
.tran-3 .tile > .a::after, .tran-3 .tile .image::after, .tran-3 .tile .image .img { transition: all .3s ease; }
.tran-4 .tile > .a::after, .tran-4 .tile .image::after, .tran-4 .tile .image .img { transition: all .4s ease; }
.tran-5 .tile > .a::after, .tran-5 .tile .image::after, .tran-5 .tile .image .img { transition: all .5s ease; }
.tran-6 .tile > .a::after, .tran-6 .tile .image::after, .tran-6 .tile .image .img { transition: all .6s ease; }
.tran-7 .tile > .a::after, .tran-7 .tile .image::after, .tran-7 .tile .image .img { transition: all .7s ease; }
.tran-8 .tile > .a::after, .tran-8 .tile .image::after, .tran-8 .tile .image .img { transition: all .8s ease; }
.tran-9 .tile > .a::after, .tran-9 .tile .image::after, .tran-9 .tile .image .img { transition: all .9s ease; }
.tran-10 .tile > .a::after, .tran-10 .tile .image::after, .tran-10 .tile .image .img { transition: all 1.0s ease; }
.tran-12 .tile > .a::after, .tran-12 .tile .image::after, .tran-12 .tile .image .img { transition: all 1.2s ease; }
.tran-15 .tile > .a::after, .tran-15 .tile .image::after, .tran-15 .tile .image .img { transition: all 1.5s ease; }
.tran-20 .tile > .a::after, .tran-20 .tile .image::after, .tran-20 .tile .image .img { transition: all 2.0s ease; }

/********************************************************
	■ 왼쪽에 아이콘이미지 / 오른쪽에 head, desc
********************************************************/
.ts-lefticon1 { margin: 0 -10px; }
.ts-lefticon1 .tile { padding: 0 10px; }
.ts-lefticon1 .tile > .a { display: table; border: 1px solid #d2d2d2; height: 130px; padding: 0 15px 0 20px; }

.ts-lefticon1 .image { display: table-cell; width: 100px; }
.ts-lefticon1 .image .img { width: 100%; height: 100%; background-size: contain; }

.ts-lefticon1 .content { display: table-cell; padding-left: 30px; height: 100%; vertical-align: middle; }
.ts-lefticon1 .content .desc { margin-top:10px; font-weight: 300; }

@media (max-width: 1199px) {
	.ts-lefticon1 { margin: 0 -5px; }
	.ts-lefticon1 .tile { padding: 0 5px; }
	.ts-lefticon1 .content { padding-left: 10px; }
	.ts-lefticon1 .content .desc { display: none; }
}
@media (max-width: 1023px) {
	.ts-lefticon1 .tile > a { height: 90px; padding: 0 5px; }
	.ts-lefticon1 .image { width: 70px; }
}
@media (max-width: 767px) {
	.ts-lefticon1 .tile > a { height: 75px; }
	.ts-lefticon1 .image { height: 60px; }
 }
/********************************************************
	■ 왼쪽에 이미지 / 오른쪽에 head, desc
********************************************************/
.ts-rectimg-left-1 { margin: 0 -10px; }

.ts-rectimg-left-1 .tile { position: relative; padding: 0 10px; }
.ts-rectimg-left-1 .tile > .a { position: relative; }

.ts-rectimg-left-1 .image { position: relative; width: 60%; }
.ts-rectimg-left-1 .image .img { width: 100%; height: 100%; }

.ts-rectimg-left-1 .content { position: absolute; z-index: 2; left: 60%; right: 0; top: 0; bottom: 0; height: auto; }
.ts-rectimg-left-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 1199px) {
	.ts-rectimg-left-1 { margin: 0 -5px; }
	.ts-rectimg-left-1 .tile { padding: 0 5px; }
}
/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-top-1 .tile { margin-bottom: 50px; }
.ts-squareimg-top-1 .image .img { position: relative; padding-bottom: 100%; }

/* 이미지 직사각 비율로 표현하려면 padding-bottom(%)을 재정의한다. */
.ts-squareimg-top-1 .content { margin-top: 20px; height: 100%; }
.ts-squareimg-top-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 767px) {
	.ts-squareimg-top-1 { margin: 0 -5px; }
	.ts-squareimg-top-1 .tile { padding: 0 5px; }
}
/********************************************************
	■ 정사각 이미지 / 내부에 head, desc
********************************************************/
.ts-squareimg-full .tile { margin: 0; }
.ts-squareimg-full .tile > .a { position: relative; }

.ts-squareimg-full .image .img { position: relative; padding-bottom: 100%; }
.ts-squareimg-full .content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; }

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ 롤오버효과 (Hover Effects)
********************************************************/
/* 일반적으로 타일(tile) 요소에 적용 */
/* 타일(tile) 요소가 아닌 경우에 적용하려면 hover-effect 클래스를 활용한다. */
/* hover-effect 클래스는 효과를 적용할 a 또는 .image 요소에 추가한다. */
a.hover-effect { position: relative; display: block; }

.image.hover-effect { position: relative; overflow: hidden; }

a.hover-effect::after, .image.hover-effect::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

/* 실제 효과 */
/* 다음의 롤오버효과 클래스는 효과를 적용할 a / .image / .img 의 상위 요소에 추가해야한다. */
/* ----- a 요소 - 테두리 내부 그림자 :: a-shadow-inset ----- */
.hover-a-shadow-inset .a::after { box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2); opacity: 0; }
.hover-a-shadow-inset .a:hover::after { opacity: 1; }

/* ----- 이미지 - 테두리 내부 그림자 :: img-shadow-inset ----- */
.hover-img-shadow-inset .a .image::after { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2); opacity: 0; }
.hover-img-shadow-inset .a:hover .image::after { opacity: 1; }

/* ----- a 요소 - 테두리 7px :: a-border7 ----- */
.hover-a-border7 .a::after { border: 2px solid rgba(100, 100, 100, 0); }
.hover-a-border7 .a:hover::after { border-width: 7px; border-color: #646464; }

/* ----- 이미지 - 테두리 7px :: img-border7 ----- */
.hover-img-border7 .a .image::after { border: 2px solid rgba(100, 100, 100, 0); }
.hover-img-border7 .a:hover .image::after { border-width: 7px; border-color: #646464; }

/* ----- 이미지 - 배경마스크 알파 x% :: img-alphaXX ----- */
.hover-img-alpha30 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.3) !important; }
.hover-img-alpha40 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.4) !important; }
.hover-img-alpha50 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.5) !important; }
.hover-img-alpha60 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.6) !important; }
.hover-img-alpha70 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.7) !important; }
.hover-img-alpha80 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.8) !important; }
.hover-img-alpha90 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.9) !important; }
.hover-img-alpha100 .a:hover .image::after { background-color: black !important; }

/* ----- 이미지 - 확대 x% :: img-zoomXXX ----- */
.hover-img-zoom110 .a:hover .img { transform: scale(1.1); }
.hover-img-zoom115 .a:hover .img { transform: scale(1.15); }
.hover-img-zoom120 .a:hover .img { transform: scale(1.2); }
.hover-img-zoom130 .a:hover .img { transform: scale(1.3); }

/* ----- a 요소 - more 클래스 객체 보이기 :: a-more ----- */
.hover-a-more .a:hover .more { display: block; }
.hover-a-more-flex .a:hover .more { display: flex; }
.hover-a-height1 .a::before { background: white; transition: all .8s; }
.hover-a-height1 .a::after { top: 100% !important; transition: all .8s; }
.hover-a-height1 .a:hover::before { top: -20px; bottom: -20px; }
.hover-a-height1 .a:hover::after { top: -20px !important; bottom: -20px; }

/* ----- a 요소 - a2, a3 클래스 테두리 2px 애니매이션1 :: a-border2-ani1 ----- */
.hover-a-border2-ani1 .a .a2::before, .hover-a-border2-ani1 .a .a2::after, .hover-a-border2-ani1 .a .a3::before, .hover-a-border2-ani1 .a .a3::after { transition-duration: 100ms; transition-delay: 0ms; opacity: 0; }
.hover-a-border2-ani1 .a:hover .a2::before, .hover-a-border2-ani1 .a:hover .a2::after, .hover-a-border2-ani1 .a:hover .a3::before, .hover-a-border2-ani1 .a:hover .a3::after { opacity: 1; }
.hover-a-border2-ani1 .a .a2::before { left: 0; right: 100%; top: 0; height: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a2::before { right: 0; }
.hover-a-border2-ani1 .a .a2::after { right: 0; top: 0; bottom: 100%; width: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a2::after { bottom: 0; transition-delay: 100ms; }
.hover-a-border2-ani1 .a .a3::before { left: 100%; right: 0; bottom: 0; height: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a3::before { left: 0; transition-delay: 200ms; }
.hover-a-border2-ani1 .a .a3::after { left: 0; top: 100%; bottom: 0; width: 2px; background: #333; }
.hover-a-border2-ani1 .a:hover .a3::after { top: 0; transition-delay: 300ms; }

/* ----- a 요소 - 볼록 효과 - 위로 5px/10px 이동 및 적절한 그림자효과 :: a-top5shadow , a-top10shadow ----- */
.hover-a-top5shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-5px) !important; }
.hover-a-top10shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-10px) !important; }