@charset "utf-8";

/*@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(/templates/inc/fonts/NotoSansKR-Thin.woff2) format('woff2'),
            url(/templates/inc/fonts/NotoSansKR-Thin.woff) format('woff'),
            url(/templates/inc/fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(/templates/inc/fonts/NotoSansKR-Light.woff2) format('woff2'),
            url(/templates/inc/fonts/NotoSansKR-Light.woff) format('woff'),
            url(/templates/inc/fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(/templates/inc/fonts/NotoSansKR-Regular.woff2) format('woff2'),
        url(/templates/inc/fonts/NotoSansKR-Regular.woff) format('woff'),
        url(/templates/inc/fonts/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(/templates/inc/fonts/NotoSansKR-Medium.woff2) format('woff2'),
        url(/templates/inc/fonts/NotoSansKR-Medium.woff) format('woff'),
        url(/templates/inc/fonts/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(/templates/inc/fonts/NotoSansKR-Bold.woff2) format('woff2'),
        url(/templates/inc/fonts/NotoSansKR-Bold.woff) format('woff'),
        url(/templates/inc/fonts/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(/templates/inc/fonts/NotoSansKR-Black.woff2) format('woff2'),
        url(/templates/inc/fonts/NotoSansKR-Black.woff) format('woff'),
        url(/templates/inc/fonts/NotoSansKR-Black.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Serif KR';
    font-style: normal;
    font-weight: 400;
    src: url(/templates/inc/fonts/NotoSerifKR-Medium.woff2) format('woff2'),
        url(/templates/inc/fonts/NotoSerifKR-Medium.woff) format('woff'),
        url(/templates/inc/fonts/NotoSerifKR-Medium.otf) format('opentype');
}

body {font-family:'Noto Sans KR', 'Apple SD Gothic Neo', dotum, gulim, verdana, arial, AppleSDGothicNeo, AppleGothic; color:#000; font-size:14px; font-weight:300; background-color:#f8f8f8; min-width:1200px;}

.blind {position:absolute; left:-9999px; overflow:hidden; width:0; height:0; font-size:0;}

/* skip navigation */
#skipNav {position:fixed; width:100%; overflow:hidden; margin:0 auto; z-index:99999}
#skipNav a {display:block; width:0; height:0; overflow:hidden; text-align:center; background:#333;}
#skipNav a:hover,
#skipNav a:focus,
#skipNav a:active {width:auto; height:20px; padding:10px 10px 5px 10px; line-height:1; color:#fff; font-size:12px; font-weight:bold; text-decoration:none;}

/* button set */
.btn_set {position:relative; margin:35px 0; text-align:center;}

.button {font-size:17px; text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:0 30px; height:50px; line-height:50px; min-width:140px; background-color:#0341a6; color:#fff; border-radius:50px; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; vertical-align:top; font-weight:500; /*  margin:0 2px; */}

.button .inner, .button .inner + em {color:#fff; font-size:inherit !important; font-size: inherit !important; display: inherit !important; vertical-align: inherit !important;}
.button:hover, .button:active, .button:focus {-webkit-transition: all 0.4s ease; transition: all 0.4s ease;}

.button.middle {padding:0 24px; font-size:15px; border-radius:34px; height:34px; line-height:34px; min-width:86px}
.button.small {padding:0 15px; font-size:13px; border-radius:22px; height:22px; line-height:22px; min-width:64px}

.button.red {background-color:#de3724}
.button.red:hover, .button.red:active, .button.red:focus {background-color:#c0200e;}
.button.green {background-color:#11a5a9}
.button.green:hover, .button.green:active, .button.green:focus {background-color:#027b7e;}
.button.blue {background-color:#358bd6}
.button.blue:hover, .button.blue:active, .button.blue:focus {background-color:#166cb7;}
.button.gray {background-color:#999; color:#fff;}
.button.gray:hover, .button.gray:active, .button.gray:focus {background-color:#787676;}

.button.red.outline {background-color:#fff; border:1px solid #c0200e; color:#c0200e}
.button.red.outline:hover, .button.red.outline:active, .button.red.outline:focus {border-color:#c0200e;}
.button.red.outline .inner, .button.red.outline .inner + em {color:#c0200e}
.button.green.outline {background-color:#fff; border:1px solid #11a5a9; color:#11a5a9}
.button.green.outline:hover, .button.green.outline:active, .button.green.outline:focus {border-color:#027b7e;}
.button.green.outline .inner, .button.green.outline .inner + em{color:#11a5a9}
.button.blue.outline {background-color:#fff; border:1px solid  #358bd6; color:#358bd6}
.button.blue.outline:hover, .button.blue.outline:active, .button.blue.outline:focus {border-color:#166cb7;}
.button.blue.outline .inner, .button.blue.outline .inner + em {color:#358bd6}
.button.gray.outline {background-color:#fff; border:1px solid #999; color:#999}
.button.gray.outline:hover, .button.gray.outline:active, .button.gray.outline:focus {border-color:#787676;}
.button.gray.outline .inner, .button.gray.outline .inner + em {color:#999}

.font_red {color:#de3724 !important}
.font_green {color:#11a5a9 !important}
.font_blue {color:#358bd6 !important}
.font_gray {color:#999 !important}

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

/* wrap */
#wrap {}
.inner_block {position:relative; width:1200px; height:100%; margin:0 auto;}
.inner_block02 {position:relative; width:1040px; height:100%; margin:0 auto;}

/* header */
/*#header {position:fixed; top:0; left:0; width:100%; height:80px; background-color:#fff; border-bottom:1px solid #eee; z-index:900;}*/
#header {position:fixed; width:100%; height:80px; background-color:#fff; border-bottom:1px solid #eee; z-index:900;}
#header:after {clear:both; display:block; content:'';}
#header h1 {position:absolute; top:23px; left:0;}

/* head_util */
#header .head_util {position:absolute; top:32px; right:0; font-size:11px;}
#header .head_util ul {}
#header .head_util li {position:relative; display:inline-block;}
#header .head_util li:before {content: ''; display: block; width: 1px; height: 9px; background: #000; position: absolute; top: 4px; left: 0;}
#header .head_util li:first-child:before {display:none;}
#header .head_util li a {padding:8px; font-weight:400;}
#header .head_util li:last-child a {padding:8px 0 8px 8px;}

/* gnb */
#gnb {padding:25px 0 0 380px;}
#gnb > ul {}
#gnb > ul > li {float:left; position:relative; margin:0 30px;}
#gnb > ul > li.current > a,
#gnb > ul > li.active > a {color:#10a5a9;}
#gnb > ul > li > a {font-size:18px; font-weight:500; letter-spacing:-1px;}
#gnb > ul > li > a + .null_bar {position:absolute; top:32px; left:0; width:100%; height:3px; background:#10a5a9; text-indent:-9999em;}

.gnb_sub_wrap {display:none; position:absolute; top: 25px; left: -40px; padding-top:28px;}
#gnb > ul > li.current .gnb_sub_wrap {display:block}
.gnb_sub {position: relative;; width: 150px; border: 1px solid #eee; background: #fff; border-radius: 5px; padding: 10px;}
.gnb_sub > ul > li {margin:10px 0;}
.gnb_sub > ul > li a {font-size:13px; font-weight:500;}
.gnb_sub > ul > li.current a {color:#10a5a9}

/* container */
#container {position:relative; padding-top:80px;}

/* footer */
#footer {position:relative; padding:60px 0; background-color:#333; color:#fff;}

/* footer_info */
.footer_info {font-size:12px;}
.footer_info p {margin-bottom:10px}
.footer_info .address {}
.footer_info .address span {margin-right:40px;}
.footer_info .copyright {}

/* family_site */
.family_site {position: absolute; top:0; right:0; width: 200px; border: 1px solid #999; z-index: 1;}
.family_site.focus {border-color: #66afe9;}
.family_site:before {content: ""; position: absolute; top: 30%; right: 15px; height: 10px; width: 10px; border-style: solid; border-color: #999; border-width: 0px 1px 1px 0px;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.family_site.focus:before{top:45%; border-color:#fff;
	-webkit-transform: rotateZ(-135deg);
	transform: rotateZ(-135deg);
}
.family_site label {position: absolute; top: 2px; left: 2px; width:165px; padding:10px; overflow:hidden; font-size:12px; z-index: -1;}
.family_site select {width: 100%; height: auto; line-height: normal; padding: .8em .5em; border: 0; opacity: 0; filter: alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
.family_site select option {font-size:12px;}

/* youtube_block */
.youtube_block {position: fixed; width: 100%; height: 100%; background-color: #000; background-color: rgba(0,0,0,0.8); top: 0;
left: 0; z-index: 99999;}
.youtube_content {max-width: 920px; display: block; margin: 0 auto; height: 100%; position: relative;}

.youtube_con {max-width: 100% !important; width: 100% !important; display: block !important; height: 616px !important; border: none !important; position: absolute; top: 0; bottom: 0; margin: auto 0; background:#fff; padding:9px;}

.youtube_head {padding:20px;}
.youtube_head p {font-weight:500; color:#11a5a9; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.youtube_head h2 {font-size:20px; font-weight:700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.acot_youtube {font-weight:700 !important; color:#11a5a9 !important}
.youtube_info {display:none;}

/* roulette */
.roulette {position:absolute; top:320px; left:50%; margin-left:620px; z-index:900}
/*.roulette > div {width:100px; height:100px;}*/

/* popup */
#wrap_popup {margin:0 auto; width:740px; background:#fff;}

#header_popup {}

#container_popup {padding:30px 20px;}
#container_popup h2 {margin:30px 0 15px; font-weight:700; color:#11a5a9; font-size:14px;}
#container_popup h2:first-child {margin-top:0;}

#container_popup table {margin-bottom:0;}
#container_popup th {padding:10px 0}
#container_popup td {padding:10px; text-align:center;}
#container_popup p {font-size:12px; font-weight:500; margin-top:15px;}

#container_popup .privacy_agree {margin-top:10px; padding:10px 20px; border:1px solid #e7e7e7}
#container_popup .privacy_agree:after {clear:both; display:block; content:'';}
#container_popup .privacy_agree > span {float:left; font-weight:500;}
#container_popup .privacy_agree > span + span {float:right}
#container_popup .privacy_agree .form_design label {margin-left:20px}

#container_popup .event_info > p {margin:30px 0 10px; font-weight:700; color:#11a5a9; font-size:14px;}
#container_popup .event_info li {font-size:13px; margin-bottom:10px;}

.height2 {margin-bottom:500px}

/* responsive */
.inner_block {}
#gnb {display:inline-block; padding-left:31.7%;}

.mobile_area {display:none}

/* mobile menu */
.hamburger {position: absolute; top:12px; right:20px; width:36px; height:36px; text-align: center; z-index:50;}
.hamburger:hover{cursor: pointer;}
.hamburger .line{width: 100%; height: 4px; background-color: #333; display: block; margin: 6px auto;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
}
#hamburger.active .line:nth-child(1){
	transform: translateY(10px) rotate(45deg);
	-webkit-transform: translateY(10px) rotate(45deg);
	-moz-transform: translateY(10px) rotate(45deg);
	-ms-transform: translateY(10px) rotate(45deg);
	-o-transform: translateY(10px) rotate(45deg);
}
#hamburger.active .line:nth-child(2) {opacity: 0;}
#hamburger.active .line:nth-child(3){
	transform: translateY(-10px) rotate(-45deg);
	-webkit-transform: translateY(-10px) rotate(-45deg);
	-moz-transform: translateY(-10px) rotate(-45deg);
	-ms-transform: translateY(-10px) rotate(-45deg);
	-o-transform: translateY(-10px) rotate(-45deg);
}

.bg_mask {position: fixed; top:61px; left: 0; width: 100%; height: 100%; background:#000; opacity: .9; z-index:9;}

/* media */
@media all and (max-width:1240px) {
    body {min-width:auto;}
	.inner_block {width:100%; padding:0 20px;}
	.inner_block02 {width:100%; max-width:1040px;}

    /* header */
    #header h1 {left:20px;}
    #header .head_util {right:20px;}

    /* footer */
    .footer_info p {width: calc(100% - 250px); word-break:keep-all}
	.footer_info .address span {margin-right:2%; display:inline-block;}
	.family_site {right:20px;}
}

/* mobile */
@media all and (max-width:1024px) {
	/* header */
	#header {height:60px;}
	#header h1 {top:8px}

	#header .head_util {display:none; position: relative; top: auto; right: auto; text-align: center; padding-top: 90px; z-index: 10;	}
	#header .head_util li:before {background:#fff;}
	#header .head_util li a {color: #fff;}

	#gnb {display:none; position: relative; width:100%; padding:0 0 20px; margin-top:30px; z-index: 10;}
	#gnb > ul > li {float: none; margin:10px 30px;}
	#gnb > ul > li > a {color:#fff; display: block; padding:10px 0; text-align: center;}

	.gnb_sub_wrap {display:block; position: relative; top: auto; left: auto; padding: 0; z-index:10;}
	.gnb_sub_wrap.on {display:block !important;}
	.gnb_sub { width: 100%; padding:0; border:none; background:transparent; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; text-align: center;}
	.gnb_sub > ul > li {margin:0 10px; display: inline-block;}
	.gnb_sub > ul > li a {display:block; padding:5px 0; color:#fff;}
	#gnb .null_bar {display:none;}

	.mobile_area {display:block}
	#container {padding-top:60px;}
}

@media all and (max-width:767px) {
	/* footer */
	.footer_info {padding-top:60px;}
	.footer_info p {width:100%; text-align: center}

	.family_site {top:0; right: auto; left: 50%; margin-left: -100px;}
}

@media all and (max-width:479px) {
	/* footer */
	.family_site {top:0; right: auto; left: 20px; margin-left: 0; width:calc(100% - 40px);}
}