/**
 * 이 파일은 iModule 사이트 기본템플릿의 일부입니다. (https://www.imodules.io)
 *
 * iModule 기본 사이트템플릿 - 스타일시트
 * 모듈 공통 클래스들은 템플릿의 styles 폴더안에 common.css 파일로 정의하거나, 정의된 common.css 파일이 없을 경우 /styles/common.css 파일을 사용한다.
 * @see /styles/common.css
 * @see /templets/default/styles/common.css.sample
 * 
 * @file /templets/default/styles/style.css
 * @author Arzz (arzz@arzz.com)
 * @license MIT License
 * @version 3.0.0
 * @modified 2018. 10. 4.
 */

header {
    position: fixed;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    z-index: 100;
}

header.scroll {
    background: rgba(0,0,0,.6);
}

.header {    
    position: relative;
    max-width: 1130px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
}

header .top .container{
    z-index: 1000;
}

/**
 * 다중 사이트 네비게이션 탭
 */
header> .header > nav[data-role=site] {background:#798594; height:30px; border-bottom:1px solid #656f7a; text-align:center; font-size:0;}
header> .header > nav[data-role=site] > a {height:30px; font-size:12px; color:#fff; line-height:30px; text-decoration:none; padding:0px 15px; border-left:1px solid #656f7a; vertical-align:top;}
header> .header > nav[data-role=site] > a:last-child {border-right:1px solid #656f7a;}
header> .header > nav[data-role=site] > a:hover {background:rgba(255,255,255,0.1);}
header> .header > nav[data-role=site] > a.selected {border-color:#fff; background:#fff; color:#333; font-weight:bold; height:31px; line-height:31px;}

/**
 * 사이트 로고 영역
 */
header> .header > div.top {height:80px; width: 135px; display: inline-block;}
header> .header > div.top > div.container > h1 {width:300px; height:60px; font-size:0; margin:10px 0px;}
header> .header > div.top > div.container > h1 > a {font-size:0; display:block; width:100%; height:100%; text-decoration:none; background-position:0px 50%; background-repeat:no-repeat; background-size:contain;}
header> .header > div.top > div.container > button[data-action=slide] {float:right; display:none; width:60px; height:60px; border:0; background:transparent; cursor:pointer; color:#fff; font-size:30px; line-height:60px;}

/**
 * 상단 로그인 위젯
 */
header> .header > div.top > div.container > div[data-widget=member-login] {max-width:calc(100% - 320px); height:80px; display:inline-block; vertical-align:middle; font-size:0; float:right; text-align:left;}

/**
 * 상단메뉴
 */
header> .header > nav[data-role=navigation] { height:50px; font-size:0; position:relative; }
header> .header > nav[data-role=navigation] > div.container > ul {display: flex; width:calc(100%); height:50px; margin:0px; padding:0px; list-style:none; text-align:left;}
header> .header > nav[data-role=navigation] > div.container > ul > li {display:inline-block; height:50px; padding:0px 10px; }
header> .header > nav[data-role=navigation] > div.container > ul > li:first-child {margin-left:-10px; padding-left:0px;}
header> .header > nav[data-role=navigation] > div.container > ul > li > a {font-weight:500; display:block; height:50px; padding:0px 10px; line-height:50px; font-size:1.3rem; color:#f8f9fa; text-decoration:none; position:relative;}
header> .header > nav[data-role=navigation] > div.container > ul > li > a > i.icon {float:left; display:block; width:18px; height:18px; margin:16px 8px 16px 0px; line-height:18px; background-repeat:no-repeat; background-position:0 50%; background-size:contain; overflow:hidden; text-align:center;}
header> .header > nav[data-role=navigation] > div.container > ul > li:hover > a:before {bottom:-1px; left:50%; border:solid transparent; content:" "; width:0; height:0; position:absolute; margin-left:-8px;}

header> .header > nav[data-role=navigation] > div.container > ul > li.active > a {color:  #ffa014;}


/**
 * 마우스 오버시 나타나는 서브메뉴
 */
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu {position:absolute; top:50px; left:0px; right:0px; width:100%; background:#fff; z-index:999; display:none; box-shadow:0px 10px 10px rgba(0,0,0,0.1);}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container {font-size:0;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title {display:inline-block; width:300px; height:260px; background:#fff url(../images/bi_g.png) no-repeat 60px 165px; vertical-align:top;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title > h2 {font-size:28px; height:32px; line-height:32px; color:#1c4b8c; padding:40px 0px 20px 0px; border-bottom:1px solid #1c4b8c; margin-bottom:20px; display:inline-block; letter-spacing:-1px;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title > h2 > i.icon {display:block; float:left; width:24px; height:24px; margin:4px 10px 4px 0px; background-repeat:no-repeat; background-size:contain; background-position:0 50%; overflow:hidden; font-size:20px; vertical-align:middle; line-height:24px;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title > p {font-size:14px; line-height:24px; color:#666; padding-top:0px; padding-right:10px; font-weight:400;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus {display:inline-block; width:calc(100% - 300px); height:260px;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus > ul {display:inline-block; width:33.333333%; height:260px; box-sizing:border-box; border-left:1px solid #dfdfdf; vertical-align:top; padding:30px 0px;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus > ul > li {display:block; color:#333; padding:2px 0px;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus > ul > li > a {display:block; height:46px; line-height:46px; overflow:hidden; cursor:pointer; padding:0px 20px; color:#333; font-size:14px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus > ul > li > a:hover {background:#b18d4f; color:#fff;}
header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus > ul > li > a > i.icon {display:block; float:left; width:20px; height:20px; margin:13px 5px 13px 0px; background-repeat:no-repeat; background-size:contain; background-position:0 50%; overflow:hidden; font-size:14px; vertical-align:middle; line-height:20px; text-align:center;}
header> .header > nav[data-role=navigation] > div.container > ul > li:hover > div.submenu {display:block;}


header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown] {width:52px; height:50px; border:0; position:relative; background:transparent; cursor:pointer; margin-left:-20px; transform:rotate(0deg); transition:.5s ease-in-out; box-sizing:border-box;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown] > span {display:block; position:absolute; height:2px; width:26px; background:#fff; opacity:1; left:12px; transform:rotate(0deg); transition:.25s ease-in-out;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown] > span:nth-child(1) {top:16px;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown] > span:nth-child(2), header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown] > span:nth-child(3) {top:24px;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown] > span:nth-child(4) {top:32px;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown].opened:after {bottom:-1px; left:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute; margin-left:-8px;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown].opened > span:nth-child(1) {top:18px; width:0%; left:50%;}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown].opened > span:nth-child(2) {transform:rotate(45deg);}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown].opened > span:nth-child(3) {transform:rotate(-45deg);}
header> .header > nav[data-role=navigation] > div.container > button[data-action=dropdown].opened > span:nth-child(4) {top:18px; width:0%; left:50%;}

/**
 * 전체 사이트맵 영역
 */
header> .header > nav[data-role=navigation] > div.menus {position:absolute; top:50px; right:0; z-index:5; width:100%; background-color:#fff; display:none; box-shadow:0px 10px 10px rgba(0,0,0,0.1);}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul {display:table; width:100%; border-right:1px solid #e6e6e6; table-layout:fixed; box-sizing:border-box;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li {display:table-cell; width:25%; border-left:1px solid #e6e6e6; vertical-align:top; padding:40px 0 40px 25px;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li > h4 {font-size:20px; color:#333; margin-bottom:20px;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li > h4 > a {color:inherit; text-decoration:none;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li > ul {list-style:none;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li > ul > li > a {display:block; min-height:20px; line-height:25px; font-size:14px; color:#666666; text-decoration:none; vertical-align:middle; margin:5px 0px; box-sizing:border-box; word-break:break-word; word-wrap:break-word; padding:0px 20px; position:relative;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li > ul > li > a > i {width:15px; height:25px; display:block; vertical-align:middle; text-align:center; position:absolute; top:0; left:0; line-height:24px;}
header> .header > nav[data-role=navigation] > div.menus > div.container > ul > li > ul > li > a:hover {color:#c59646;}

/**
 * 컨텐츠 메인영역
 */
main {}
main.index {}

/**
 * 서브페이지 
 */
 main.subpage {margin-top: 80px;}
 body:has(main.subpage) header {background: rgba(0,0,0,.6); }
 body:has(main.subpage) header> .header {justify-content: start; position: relative;}
 

/**
 * 서브페이지 사이트 이동경로
 */
main.subpage > div.breadcrumb {height:40px; border-bottom:1px solid #dbdbdb; background:#fafafa; font-size:0; color:#999; padding-left: 60px;}
main.subpage > div.breadcrumb > div.container > a {display:inline-block; height:40px; line-height:40px; color:#999999; text-decoration:none; font-size:13px; vertical-align:middle;}
main.subpage > div.breadcrumb > div.container > a > i {font-size:15px;}
main.subpage > div.breadcrumb > div.container > i { display:inline-block; height:40px; line-height:40px; font-size:13px; padding:0px 10px; vertical-align:middle; color:#b0b0b0;}

/**
 * 서브페이지 좌측 네비게이션 및 컨텐츠 영역
 */
main.subpage > div.container > div.context {display:table; width:100%; table-layout:fixed; margin-top:40px;}
main.subpage > div.container > div.context > nav {display:table-cell; width:220px; vertical-align:top; padding-bottom:20px;}
main.subpage > div.container > div.context > nav > h2 {width:100%; color:#fff; background:#1479bb; line-height:68px; font-size:20px; text-align:center; border-top:0px solid #046b40; height:68px;}
main.subpage > div.container > div.context > nav > ul {list-style:none;}
main.subpage > div.container > div.context > nav > ul > li {border-bottom:1px solid #e3e4e6; background-color:#fafbfc;}
main.subpage > div.container > div.context > nav > ul > li > a {display:block; width:100%; line-height:24px; padding:13px 15px; box-sizing:border-box; text-decoration:none; color:#666; font-size:14px;}
main.subpage > div.container > div.context > nav > ul > li:hover {background:#edeff0;}
main.subpage > div.container > div.context > nav > ul > li:hover > a {color:#b18d4f;}
main.subpage > div.container > div.context > nav > ul > li.selected {background-color:#b18d4f; border-bottom:1px solid #b18d4f;}
main.subpage > div.container > div.context > nav > ul > li.selected > a {color:#fff;}
main.subpage > div.container > div.context > section {padding:0px 60px 20px 60px;}
main.subpage > div.container > div.context > section > h3 {height:68px; padding-left:0px; line-height:68px; font-size:30px;}


/**
 * 모바일 슬라이드 메뉴
 */
aside.menu {position:fixed; top:0; right:0; width:300px; height:100%; background:#fff; z-index:20000; display:none;}
aside.menu > div.header {background:#581a25; height:62px; padding:10px 0px 10px 10px; font-size:0; font-weight:bold; color:#fff;}
aside.menu > div.header> .header > button {float:right; width:60px; height:60px; display:inline-block; box-sizing:border-box; vertical-align:middle; cursor:pointer; background:transparent; margin:-10px 0px; padding:0; border:0;}
aside.menu > div.header> .header > button > i {width:60px; height:60px; line-height:60px; text-align:center; font-size:30px; color:rgba(255,255,255,0.8);}
aside.menu > div.header> .header > button:hover > i {color:#fff;}

aside.menu > ul.menu {width:100%; height:calc(100% - 60px); border-top:1px solid #581a25; list-style:none; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box;}
aside.menu > ul.menu > li {overflow:hidden; height:50px;}
aside.menu > ul.menu > li > a {display:block; width:100%; height:50px; line-height:50px; font-size:14px; padding:0px 20px; text-decoration:none; border:0; background:#fff; color:#222; box-sizing:border-box; border-bottom:1px solid #e0e0e0; text-align:left; cursor:pointer; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
aside.menu > ul.menu > li > a > i.icon {float:left; width:30px; height:50px; line-height:50px; font-size:20px; color:#581a25; opacity:0.6;}
aside.menu > ul.menu > li > a > i[data-role=toggle] {float:right; width:50px; height:50px; line-height:50px; font-size:20px; color:#222; margin-right:-20px; text-align:center;}
aside.menu > ul.menu > li > div.submenu {background:#f7f7f7; padding:0px 0px; border-bottom:1px solid #e0e0e0;}
aside.menu > ul.menu > li > div.submenu > a {display:block; width:100%; height:40px; line-height:40px; padding:0px 20px 0px 35px; box-sizing:border-box; text-decoration:none; color:#333; font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
aside.menu > ul.menu > li > div.submenu > a.selected {background:#b18d4f; color:#fff;}
aside.menu > ul.menu > li > div.submenu > a:hover {background:#b18d4f; color:#fff;}
aside.menu > ul.menu > li.opened {height:auto;}
aside.menu > ul.menu > li.opened > a > i[data-role=toggle] {transform:rotate(180deg);}

aside.menu .header button {
    height: 62px;
    width: 62px;
    background: url(../images/ic_close_white.svg) no-repeat right 20px center;
    background-size: 15px auto, 55px auto;
    cursor: pointer;
    display: block;
    position:absolute;
    right: 10px;
}
   


/**
 * 사이트 푸터
 */
footer {
    background:#5A5B68; 
    color:#EBEBEF; 
    position:relative;
    clear: both;
    width: 100%;
    z-index: 2;
    padding: 2.533rem 0;
}

footer > div.container {
    position: relative;
    max-width: 1130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


footer > div.container > ul.menus {text-align:center; width:100%; height:53px; border-bottom:1px solid #e0e0e0; font-size:0; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; box-sizing:border-box;}
footer > div.container > ul.menus > li {display:inline-block; height:52px; line-height:52px; font-size:14px; padding:0px 10px;}
footer > div.container > ul.menus > li:first-child > a {margin-left:-10px;}
footer > div.container > ul.menus > li > a {display:inline-block;color:inherit; text-decoration:none;}
footer > div.container > ul.menus > li > a[href="/ko/terms/privacy"] {font-weight:bold; color:#000;}
footer > div.container > ul.menus > li.sns {float:right;}
footer > div.container > ul.menus > li.sns > a:last-child {margin-right:-10px;}
footer > div.container > ul.menus > li.sns > a {display:inline-block; padding:0px 5px; margin-left:5px; font-size:20px;}

footer > div.container > div.contact {margin-top:24px; width:100%; font-size:0px; text-align: center;}
footer > div.container > div.contact > i.emblem {width:48px; height:48px; margin-right:10px; float:left; display:block; vertical-align:top; background-size:contain;}
footer > div.container > div.contact > div {display:inline-block; width:calc(100% - 60px); height:48px; font-size:12px; vertical-align:top;}
footer > div.container > div.contact > div.address > div {width:100%; height:24px; line-height:24px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
footer > div.container > div.contact > div.address > div > a {color:inherit; text-decoration:none; float: left; margin-right: 10px;}
footer > div.container > div.contact > div.bannerbox_item .name {width: 80px; color: #e1dfdf; text-align: center; display: block; margin-top: 2px;}
footer > div.container > div.contact > div.bannerbox_item img {width: 80px; background-color: #ffffff; padding: 6px; border-radius: 2px;} 
footer > div.container > div.contact > div.bannerbox_item {text-align: left; padding-top: 3px; padding-left: 15px; }

footer > div.container > div.copyright {margin-top:30px; line-height:24px; height:24px; font-size:0; width: 100%; text-align: left;}
footer > div.container > div.copyright > div {display:inline-block; font-size:13px; width:50%; height:24px; line-height:24px; vertical-align:middle;}
footer > div.container > div.copyright > div.status {text-align:right;}


/**
 * 모바일
 */
@media (max-width:767px) {
	/* header {box-shadow:0px 1px 3px rgba(0,0,0,0.3);} */
    header {
        height: 62px;
    }

    header .header {
        height: 62px;
        padding-left: 10px;
    }

    .position-main video {
        left: -20%;
        margin: 0;
    }
	
	/**
	 * 다중 사이트 네비게이션 탭
	 */
	header> .header > nav[data-role=site] {display:none;}
	
	/**
	 * 사이트 로고 영역
	 */
	header> .header > div.top {height:60px;}
	header> .header > div.top > div.container > h1 {max-width:calc(100% - 60px); height:40px; margin:10px 0px;}
	header> .header > div.top > div.container > button[data-action=slide] {
        display: block; 
        margin-right:-10px;
        position: absolute;
        top: 0;
        right: 10px;
        width: 62px;
        height: 62px;
        cursor: pointer;
    }
	
	/**
	 * 상단 로그인 위젯
	 */
	header> .header > div.top > div.container > div[data-widget=member-login] {display:none;}
	
	/**
	 * 상단메뉴
	 */
	header> .header > nav[data-role=navigation] {display:none;}
	
	/**
	 * 사이트푸터
	 */
	
	footer > div.container > div.contact > i.emblem {float:none; margin:0 auto; width:60px; height:60px;}
	footer > div.container > div.contact > div.address {width:100%; height:auto; padding-top:10px;}
	footer > div.container > div.contact > div.address > div {text-align:center; white-space:normal; line-height:20px; height:auto;}
	footer > div.container > div.copyright {margin-top:20px;}
	footer > div.container > div.copyright > div {text-align:center; width:100%;}
	footer > div.container > div.copyright > div.status {display:none;}

    main.subpage {margin-top:  62px;} 
    main.subpage > div.container > div.context > section {padding:0px 14px 20px 14px;}
    main.subpage > div.breadcrumb { padding-left: 14px;}
}

/**
 * 태블릿
 */
@media (min-width:768px) and (max-width:991px) {
	
	/**
	 * 다중 사이트 네비게이션 탭
	 */
	header> .header > nav[data-role=site] {display:none;}
	
	/**
	 * 사이트 로고 영역
	 */
	header> .header > div.top {height:60px; overflow:hidden;}
	header> .header > div.top > div.container > h1 {height:50px; margin:5px 0px;}
	
	/**
	 * 상단 로그인 위젯
	 */
	header> .header > div.top > div.container > div[data-widget=member-login] {display:none;}
	
	/**
	 * 상단메뉴
	 */
	header> .header > nav[data-role=navigation] {display:none;}

    /**
	 * 사이트 로고 영역
	 */
	header> .header > div.top {height:60px;}
	header> .header > div.top > div.container > h1 {max-width:calc(100% - 60px); height:40px; margin:10px 0px;}
	header> .header > div.top > div.container > button[data-action=slide] {
        display: block; 
        margin-right:-10px;
        position: absolute;
        top: 0;
        right: 10px;
        width: 62px;
        height: 62px;
        cursor: pointer;
    }
}

/**
 * 해상도가 작은 데스크탑
 */
@media (min-width:992px) and (max-width:1199px) {

    /**
	 * 상단메뉴
	 */
	header> .header > nav[data-role=navigation] {display:none;}

    /**
	 * 사이트 로고 영역
	 */
	header> .header > div.top {height:60px;}
	header> .header > div.top > div.container > h1 {max-width:calc(100% - 60px); height:40px; margin:10px 0px;}
	header> .header > div.top > div.container > button[data-action=slide] {
        display: block; 
        margin-right:-10px;
        position: absolute;
        top: 0;
        right: 10px;
        width: 62px;
        height: 62px;
        cursor: pointer;
    }

	/**
	 * 마우스 오버시 나타나는 서브메뉴
	 */
	header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title {width:240px;}
	header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title > h2 {font-size:20px; height:28px; line-height:28px; margin-bottom:16px; padding-top:30px; padding-bottom:10px;}
	header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title > h2 > i.icon {width:20px; height:20px; line-height:20px; font-size:16px;}
	header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > .title > p {font-size:12px;}
	header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus {width:calc(100% - 240px);}
	header> .header > nav[data-role=navigation] > div.container > ul > li > div.submenu > div.container > div.menus > ul > li > a {padding:0px 15px;}
}