@charset "utf-8";

/**
 * Font Import
 */

@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');



/**
 * Common
 */

* {
	-webkit-box-sizing: border-box; 
	-moz-webkit-box: border-box; 
	box-sizing: border-box;
	font-family: "Noto Sans KR", "Nanum Gothic", "나눔고딕", "Lato","Apple SD Gothic Neo", "Malgun Gothic", dotum, sans-serif; 
	word-spacing: 0px;
	letter-spacing: 0px;
	font-weight: 300;
}
*:focus {
	outline: none !important;
}

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
article,
section,
aside,
figcaption,
figure,
footer,
header,
hgroup,
input,
fieldset,
img { 
	margin: 0px; 
	padding: 0px; 
}
html { 
	width: 100%; 
	height: 100%; 
	font-size: 10pt;
}
body { 
	font-size: 10pt;
	color: #353535; 
	background-color: #FFF;
}
    body.modal-open {
        overflow: hidden;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }
fieldset {
	border: 0px;
}
img {
	vertical-align: middle;
	border: 0px;
}
button,
input,
select,
textarea {
	margin: 0px;
	vertical-align: middle;
}
table {
	border-spacing: 0px;
	border-collapse: collapse;
}
a,
a:hover {
	text-decoration: none !important;
}
legend {
	position: relative !important;
}
ol,
ul {
	list-style: none;
}
	ol:after,
	ul:after {
		content: "";
		display: block;
		clear: both;
	}
caption,
legend {
	font-size: 0px;
	line-height: 0px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	text-indent: -9999em;
}

.ani,
.ani * {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.no-ani,
.no-ani * {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.font-weight-300 {
    font-weight: 300;
}
.font-weight-400 {
    font-weight: 400;
}
.font-weight-500 {
    font-weight: 500;
}
.font-weight-600 {
    font-weight: 600;
}
.font-weight-800 {
    font-weight: 800;
}

.text-left {
    text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.text-right {
    text-align: right !important;
}

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

.block {
    display: block !important;
}
.inline-block {
    display: inline-block !important;
}
.inline-block-wrap {
    font-size: 0px;
}
    .inline-block-wrap > * {
        font-size: 1rem;
        display: inline-block !important;
    }
.table {
	display: table !important;
}
	.table > * {
		display: table-cell !important;
		vertical-align: middle;
	}
	
.pointer {
	cursor: pointer;
}

.img-full img {
	width: 100%;
	height: auto;
}

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
	.iframe-wrap iframe {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0px;
	  top: 0px;
	}

.common-width {
	max-width: 1400px;
	margin: 0px auto;
}
.common-inner-width {
    max-width: 1140px;
    margin: 0px auto;
}



/**
 * Header
 */
 
#header {
    position: relative;
    height: 190px;
    background-color: #7e57c5;
    z-index: 2;
}
@media (max-width: 1200px) {
    #header {
        height: 150px;
    }
}
@media (max-width: 1024px) {
    #header {
        height: 55px;
    }
}
    .header {
        position: relative;
    }
    @media (max-width: 1400px) {
        .header {
            margin: 0px 10px;
        }
    }
        #top-logo {
            margin-left: 15px;
            line-height: 190px;
        }
        @media (max-width: 1400px) {
            #top-logo {
                margin: 0px;
            }
        }
        @media (max-width: 1024px) {
            #top-logo {
                line-height: 55px;
            }
        }
            #top-logo img {
                vertical-align: top;
            }
            @media (max-width: 1200px) {
                #top-logo img {
                    width: 430px;
                }
            }
            @media (max-width: 1024px) {
                #top-logo img {
                    width: 250px;
                }
            }
        
        #mobile-menu-btn {
            position: absolute;
            top: 14px;
            right: 0px;
            cursor: pointer;
        }
            #mobile-menu-btn i {
                font-size: 2em;
                color: #FFF;
            }
        
        #menu {}
        @media (max-width: 1024px) {
            #menu {
                position: fixed;
                top: 0px;
                bottom: 0px;
                right: -250px;
                width: 250px;
                z-index: 100001;
                background-color: #7e57c5;
                overflow-y: auto;
                padding: 0px 10px;
            }
                #menu.mobile-on {
                    display: block !important;
                    right: 0px;
                    -webkit-animation: mobile-menu-on 1s;
                            animation: mobile-menu-on 1s;
                }
        }
        
        @keyframes mobile-menu-on {
            0% {
                right: -250px;
            }
            100% {
                right: 0px;
            }
        }
        @-webkit-keyframes mobile-menu-on {
            0% {
                right: -250px;
            }
            100% {
                right: 0px;
            }
        }
        
            #menu > ul {
                position: absolute;
            }
            @media (max-width: 1024px) {
                #menu > ul {
                    position: static;
                }
            }
                #site-link {
                    top: 40px;
                    right: 0px;
                    border-bottom: 1px solid #FFF;
                }
                @media (max-width: 1024px) {
                    #site-link {
                        display: table !important;
                        width: 100%;
                        margin-top: 20px;
                        padding: 10px;
                        background-color: #61409c;
                        border: none;
                        border-radius: 3px;
                    }
                }
                    #site-link > li {
                        padding: 3px 10px;
                        color: #ac90e7;
                        font-size: 1.1rem;
                        font-weight: 400;
                    }
                    @media (max-width: 1200px) {
                        #site-link > li {
                            font-size: 1rem;
                        }
                    }
                    @media (max-width: 1024px) {
                        #site-link > li {
                            display: table-cell !important;
                            width: 34%;
                            text-align: center;
                        }
                    }
                        #site-link > li:first-child {
                            padding-left: 0px;
                        }
                        #site-link > li:last-child {
                            padding-right: 0px;
                        }
                            #site-link > li a {
                                color: #FFF;
                            }
                                #site-link > li a:hover {
                                    color: #ac90e7;
                                }
            
                #main-category {
                    top: 138px;
                    left: 130px;
                    width: 290px;
                    -webkit-animation: main-category-move-right 1s;
                            animation: main-category-move-right 1s;
                }
                @media (max-width: 1200px) {
                    #main-category {
                        font-size: 0.9em;
                        top: 111px;
                        left: 0px;
                        -webkit-animation: main-category-move-left 1s;
                                animation: main-category-move-left 1s;
                    }
                }
                @media (max-width: 1024px) {
                    #main-category {
                        width: 100%;
                    }
                }
                
                @keyframes main-category-move-right {
                    0% {
                        left: 0px;
                    }
                    100% {
                        left: 120px;
                    }
                }
                @-webkit-keyframes main-category-move-right {
                    0% {
                        left: 0px;
                    }
                    100% {
                        left: 120px;
                    }
                }
                
                @keyframes main-category-move-left {
                    0% {
                        left: 120px;
                    }
                    100% {
                        left: 0px;
                    }
                }
                @-webkit-keyframes main-category-move-left {
                    0% {
                        left: 120px;
                    }
                    100% {
                        left: 0px;
                    }
                }
                        
                    #main-category > li {
                        background-color: #61409c;
                        position: relative;
                        text-align: center;
                        line-height: 50px;
                        border-top-left-radius: 8px;
                        border-top-right-radius: 8px;
                        cursor: pointer;
                    }
                    @media (max-width: 1200px) {
                        #main-category > li {
                            line-height: 38px;
                        }
                    }
                    @media (max-width: 1024px) {
                        #main-category > li {
                            background-color: #7e57c5;
                            text-align: left;
                            line-height: 50px;
                            padding: 0px 10px;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                        }
                    }
                        #main-category.on > li,
                        #main-category.on > li > ul,
                        #main-category.on > li > ul > li:last-child,
                        #main-category.on > li > ul > li:last-child > ul {
                            border-bottom-left-radius: 8px;
                            border-bottom-right-radius: 8px;
                        }
                        @media (max-width: 1024px) {
                            #main-category.on > li,
                            #main-category.on > li > ul,
                            #main-category.on > li > ul > li:last-child,
                            #main-category.on > li > ul > li:last-child > ul {
                                border-bottom-left-radius: 0px;
                                border-bottom-right-radius: 0px;
                            }
                        }
                
                            #main-category > li a,
                            #main-category > li span.ani {
                                color: #FFF;
                                font-weight: 400;
                                font-size: 1.2em;
                            }
                            #main-category > li > .arrow {
                                display: inline-block;
                                position: relative;
                                top: 8px;
                                margin-left: 10px;
                            }
                                #main-category > li > .arrow i {
                                    color: #FFF;
                                    font-size: 2em;
                                }                            
                                    .main-category-2nd {
                                        display: none;
                                    }
                                        .main-category-2nd > li {
                                            border-top: 1px solid rgba(255, 255, 255, 0.3);
                                        }
                                            .main-category-2nd.on > li.on {}
                                                .main-category-2nd > li * {
                                                    font-size: 1.1em !important;
                                                    font-weight: 300 !important;
                                                }
                                                    .main-category-3rd {
                                                        display: none;
                                                        background-color: #3F2565;
                                                        padding: 0px 10px;
                                                    }
                                                        .main-category-3rd > li {
                                                            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                                                        }
                                                            .main-category-3rd > li:last-child {
                                                                border-bottom: none;
                                                            }
                                                            
                                                            .main-category-3rd > li * {
                                                                font-size: 0.8em !important;
                                                            }
                                                    
                        #main-category > li:hover > a,
                        #main-category > li:hover > span,
                        #main-category > li:hover > span i,
                        .main-category-2nd > li > span:hover,
                        .main-category-3rd > li > a:hover {
                            color: #ac90e7 !important;
                        }
                        @media (max-width: 1024px) {
                            #main-category > li:hover > a,
                            #main-category > li:hover > span,
                            #main-category > li:hover > span i,
                            .main-category-2nd > li > span:hover,
                            .main-category-3rd > li > a:hover {
                                color: #FFF !important;
                            }
                        }
                                
                #main-menu {
                    top: 80px;
                    right: 0px;
                }
                @media (max-width: 1200px) {
                    #main-menu {
                        top: 70px;
                    }
                }
                    #main-menu > li {
                        padding: 10px 15px;
                        font-size: 1.5rem;
                        font-weight: 600;
                    }
                    @media (max-width: 1200px) {
                        #main-menu > li {
                            font-size: 1.2rem;
                        }
                    }
                    @media (max-width: 1024px) {
                        #main-menu > li {
                            display: block !important;
                            font-size: 1.1rem;
                            padding: 0px 10px !important;
                            line-height: 50px;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                        }
                            #main-menu > li:last-child {
                                border-bottom: none;
                            }
                    }
                        #main-menu > li:first-child {
                            padding-left: 0px;
                        }
                        #main-menu > li:last-child {
                            padding-right: 0px;
                        }
                            #main-menu > li:first-child a {
                                color: #e85438;
                                font-weight: 400;
                            }
                            #main-menu > li a {
                                color: #FFF;
                                font-weight: 300;
                            }
                                #main-menu > li a:hover {
                                    color: #e85438;
                                    font-weight: 400;
                                }
                            
                            
    #mobile-menu-bg {
        display: none;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0, 0, 0, 0);
        z-index: 100000;
    }
        #mobile-menu-bg.mobile-on {
            display: block;
            background-color: rgba(0, 0, 0, 0.7);
            -webkit-animation: mobile-menu-bg-on 1s;
                    animation: mobile-menu-bg-on 1s;
        }
    
        @keyframes mobile-menu-bg-on {
            0% {
                background-color: rgba(0, 0, 0, 0);
            }
            100% {
                display: block;
                background-color: rgba(0, 0, 0, 0.7);
            }
        }
        @-webkit-keyframes mobile-menu-bg-on {
            0% {
                background-color: rgba(0, 0, 0, 0);
            }
            100% {
                display: block;
                background-color: rgba(0, 0, 0, 0.7);
            }
        }
        
            #mobile-menu-close {
                position: absolute;
                top: 5px;
                right: 250px;
                display: inline-block;
            }
                #mobile-menu-close i {
                    font-size: 4rem;
                    color: #FFF; 
                }
                
    #sub-menu {
        line-height: 50px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #EEE;
    }
    @media (max-width: 1400px) {
        #sub-menu {
            padding: 0px 10px;
        }
    }
        .sub-menu {
            font-weight: 400;
        }
            .sub-menu span {
                font-family: "Nanum Gothic", "나눔고딕"; 
                display: inline-block;
                position: relative;
                top: -1px;
                padding: 0px 10px;
                font-size: 0.7em;
                color: #7E57C5;
                font-weight: bold;
            }



/**
 * FOOTER
 */

#footer {
    position: relative;
    min-height: 340px;
    padding: 10px 0px;
    background-color: #7e57c5;
    z-index: 1;
}
@media (max-width: 1200px) {
    #footer {
        padding: 10px;
    }
}
@media (max-width: 640px) {
    padding: 30px 0px 20p;
}
    .footer {}
        .footer > * {
            width: 50%;
            vertical-align: top;
            padding: 40px 0px 80px;
        }
        @media (max-width: 640px) {
            .footer > * {
                width: 100%;
                padding: 20px 0px;
            }
        }
            .footer .info > li:nth-of-type(2) {
                font-size: 1.3em;
                font-weight: 400;
                color: #ff6a63;
                padding: 10px 0px 8px;
            }
            @media (max-width: 640px) {
                .footer .info > li {
                    text-align: center;
                }
                    .footer .info dl {
                        width: 230px;
                        margin: 0px auto;
                    }
            }
                .footer .info dt {
                    width: 30px;
                }
                .footer .info dd {
                    padding: 3px 0px;
                }
                @media (max-width: 640px) {
                    .footer .info dt,
                    .footer .info dd {
                        text-align: left;
                    }
                }
                    .footer .info dd,
                    .footer .info dd * {
                        color: #FFF;
                        font-size: 1.05em;
                    }
                        .footer .info dt img {
                            position: relative;
                            top: 2px;
                        }
             
            @media (max-width: 640px) {
                .footer .sns > li {
                    text-align: center;
                }
            }
            .footer .sns > li:nth-of-type(1),
            .footer .sns > li:nth-of-type(3) {
                font-size: 1.2em;
                color: #FFF;
                padding-bottom: 10px;
            }
                .footer .sns > li:nth-of-type(1) {
                    color: #ff6a63;
                }
                .footer .sns > li:nth-of-type(2) {
                    padding-bottom: 35px;
                }
                
                    .footer .sns > li > span {
                        margin-left: 10px;
                    }
                        .footer .sns > li > span:first-child {
                            margin: 0px;
                        }
        
    .copyright {
        color: #FFF;
    }
    @media (max-width: 640px) {
        .copyright {
            text-align: center;
            font-size: 0.8em;
            padding-top: 20px;
        }
    }
   
   



/**
 * SUB PAGE
 */        

.sub-page {
    padding: 0px;
}
@media (max-width: 1200px) {
    .sub-page {
        padding: 30px 10px;
    }
}
    
    /* INDEX */
    #main-banner {
        position: relative;
    }
        #main-banner .slider-area {
            position: relative;
            overflow: hidden;
        }
            #main-banner .slider-area ul {
                zoom: 1;
                width: 2000%;
            }
            @media (max-width: 1200px) {
                    #main-banner .slider-area ul {
                        width: auto;
                    }
            }
                #main-banner .slider-area ul li {
                    float: left;
                    text-align: center;
                }
                    #main-banner .slider-area ul li img {
                        width: 100%;
                        height: auto;
                        vertical-align: top;
                    }
            
            #main-banner .control-area {
                position: absolute;
                top: 50%;
                left: 0px;
                width: 100%;
                height: 0px;
                background: none;
            }
                #main-banner .control-inner {
                    position: relative;
                    width: 100%;
                    height: 1px;
                }
                    #main-banner .control-area .button a {
                        position: absolute;
                        top: 0px;
                        display: block;
                        width: 40px;
                        height: 40px;
                        margin-top: -15.5px;
                        z-index: 1;
                        font-family: "Nanum Gothic", "나눔고딕"; 
                        background-color: #7e57c5;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 40px;
                    }
                        #main-banner .control-area .button a:hover {
                            background-color: #61409c;
                        }
                            #main-banner .control-area .button a.prev {
                                left: 62px;
                            }
                            @media (max-width: 640px) {
                                #main-banner .control-area .button a.prev {
                                    left: 15px;
                                }
                            }
                                #main-banner .control-area .button a.prev:before {
                                    content: '<';
                                    color: #FFF;
                                    font-size: 1rem;
                                    position: relative;
                                    left: -1px;
                                }
                            #main-banner .control-area .button a.next {
                                right: 62px;
                            }
                            @media (max-width: 640px) {
                                #main-banner .control-area .button a.next {
                                    right: 15px;
                                }
                            }
                                #main-banner .control-area .button a.next:before {
                                    content: '>';
                                    color: #FFF;
                                    font-size: 1rem;
                                    position: relative;
                                    right: -1px;
                                }
                    
                    #main-banner .control-area .paging {
                        display: none;
                    }
    
    #tile-banner {
        padding-top: 20px;
    }
    @media (max-width: 640px) {
        #tile-banner {
            padding-top: 10px;
        }
    }
        #tile-banner li {
            width: 50%;
            text-align: left;
            padding-bottom: 20px;
        }
        @media (max-width: 640px) {
            #tile-banner li {
                padding-bottom: 10px;
            }
        }
            #tile-banner li:nth-of-type(2n) {
                text-align: right;
            }
            
            @media (max-width: 1140px) {
                #tile-banner li img {
                    width: 98%;
                }
            }
                    
    #rolling-banner {
        width: 100%;
        overflow: hidden;
    }
        #rolling-banner header {
            background-color: #7e57c5;
            line-height: 50px;
            color: #FFF;
            text-align: center;
            font-size: 2.3rem;
            font-weight: 500;
        }



/**
 * BOARD
 */     


#board_list {
    padding: 30px 0px;
}
.tbl_frm01 th {
    width: 120px;
}



/**
 * COMMEN
 */
 
.mobile {
	display: none;
}
@media (max-width: 1024px) {
	.mobile {
		display: block;
	}
	.pc {
		display: none;
	}
}

a.btn_b02,
.btn_b02,
.btn_submit,
a.btn_cancel,
a.btn_b01,
.btn_b01,
a.btn_admin, 
.btn_admin {
    padding: 8px;
}

.btn_bo_adm *,
a.btn_b02,
.btn_b02,
.btn_submit,
a.btn_cancel,
a.btn_b01,
.btn_b01,
a.btn_admin, 
.btn_admin {
    border-radius: 3px;
}

a.btn,
.btn {
    line-height: unset;
    font-weight: 400;
}

h1 {
	font-size: 20pt;
	line-height: 48px;
	font-weight: 400;
	color: #462918;
	position: relative;
	border-bottom: 3px solid #7e57c5;
	margin-bottom: 30px;
}
	h1 div {
		position: absolute;
		width: 20%;
		height: 3px;
		bottom: -3px;
		left: 0px;
		background-color: #3C216C;
	}
	
h2 {
	font-size: 18pt;
	font-weight: 400;
	line-height: 25px;
	padding-left: 10px;
	border-left: 5px solid #CF5A4F;
	margin-bottom: 20px;
	color: #462918;
}
	h2 small {
		font-size: 14pt;
		font-weight: 400;
	}
	
#ctt,
#ctt_con {
    padding: 0px;
    margin: 0px;
}