@font-face {
    font-family:'NotoSans';
	font-weight: 100;
    src: url('../fonts/NotoSans-Light.eot');
    src: url('../fonts/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NotoSans-Light.woff') format('woff'); 
    font-style: normal;
}
@font-face {
    font-family:'NotoSans';
	font-weight: 300;
    src: url('../fonts/NotoSans-Medium.eot');
    src: url('../fonts/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NotoSans-Medium.woff') format('woff'); 
    font-style: normal;
}
@font-face {
    font-family:'NotoSans';
	font-weight: 500;
    src: url('../fonts/NotoSans-Bold.eot');
    src: url('../fonts/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NotoSans-Bold.woff') format('woff'); 
    font-style: normal;
}
@font-face {
    font-family:'NotoSans';
	font-weight: 200;
    src: url('../fonts/NotoSans-Regular.eot');
    src: url('../fonts/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NotoSans-Regular.woff') format('woff'); 
    font-style: normal;
}

/*
@font-face {
	font-family: 'Gmarket';
	font-style: normal; 
	font-weight: 100;
	src: url(../fonts/GmarketSansTTFLight.woff2) format('woff2'),
		url(../fonts/GmarketSansTTFLight.woff) format('woff'),
		url(../fonts/GmarketSansLight.otf) format('opentype');
}
@font-face {
	font-family: 'Gmarket';
	font-style: normal; 
	font-weight: 300;
	src: url(../fonts/GmarketSansTTFMedium.woff2) format('woff2'),
		url(../fonts/GmarketSansTTFMedium.woff) format('woff'),
		url(../fonts/GmarketSansMedium.otf) format('opentype');
}
@font-face {
	font-family: 'Gmarket';
	font-style: normal; 
	font-weight: 500;
	src: url(../fonts/GmarketSansTTFBold.woff2) format('woff2'),
		url(../fonts/GmarketSansTTFBold.woff) format('woff'),
		url(../fonts/GmarketSansBold.otf) format('opentype');
}
*/
* {
  box-sizing: border-box; } 

html {overflow-y:scroll}
body {font-size:16px; background:#000 url('../images/dx04.jpg'); background-size:cover; font-family:'NotoSans','Apple SD Gothic Neo', 'Malgun Gothic','sans-serif'; letter-spacing: -0.06em; transition: background-image 1s linear;}
html,body { height:100%; }
html, body, h1, h2, h3, h4, h5, h6, form {margin:0;padding:0; font-weight: normal;}
h1, h2, h3, h4, h5, h6 { font-family:'NotoSans','Apple SD Gothic Neo', 'Malgun Gothic','sans-serif'; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

ul { display:inline-block; width:100%; padding:0; margin:0; list-style:none }
table {border-collapse:collapse;border-spacing:0} tfoot td {font-weight:bold;text-align:center}
form, img {border:0}
input, img {vertical-align:middle; letter-spacing: -0.06em;}
select {vertical-align:middle; letter-spacing: -0.06em;}
p {margin:10px 0;line-height:1.5em}
a { text-decoration: none; color:#333; }
a:hover { text-decoration: underline;}
strong, b { font-family:'NotoSans','Apple SD Gothic Neo', 'Malgun Gothic','sans-serif'; }
button { cursor:pointer; }
::placeholder-shown { letter-spacing:-0.06em;}

/* Chrome, Safari용 스크롤 바 */
html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-Highlight-Color: #efefef; }
::-webkit-scrollbar {width: 8px; height: 8px; border: 0px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: transparent;}
::-webkit-scrollbar-track {background: rgba(0,0,0,.2); -webkit-border-radius: 10px; border-radius:10px; }
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.7); -webkit-border-radius: 8px; border-radius: 8px;  }
/**/
.checkbox { display: inline-block; padding:0 0; height:18px; line-height: 18px; margin: 0 15px 0 0; font-size:13px; cursor:pointer; position:relative; font-size:15px; font-weight: normal; color:#fff;}
.checkbox i { display:inline-block; position:absolute; left:0; margin:0 0 0 0; width:18px; height:18px; background:url('../images/icon_check_off.png') no-repeat center center; background-size:18px; }
input[type=checkbox] { visibility: hidden; }
.checkbox input:checked + i { background:url('../images/icon_check_on.png') no-repeat center center; background-size:18px; }

.radio { display: inline-block; padding:0 0; height:18px; line-height: 18px; margin: 0 15px 0 0; font-size:13px; cursor:pointer; position:relative; font-size:15px; font-weight: normal; color:#fff;}
.radio i { display:inline-block; position:absolute; left:0; margin:0 0 0 0; width:18px; height:18px; background:url('../images/icon_check_off.png') no-repeat center center; background-size:18px; }
input[type=radio] { visibility: hidden; }
.radio input:checked + i { background:url('../images/icon_check_on.png') no-repeat center center; background-size:18px; }


.bgOpa { width:100%; height:100%; position:fixed; left:0; top:0; right:0; background:#000; opacity:.5; z-index: 1; }
.absol { position:absolute !important;}

.head { padding:50px; width:100%; background:transparent; z-index: 9999;}
.head > ul > li { float:left; height:40px; line-height: 40px; position:relative; display:inline-block;}
.head > ul > li:first-child { width:250px; }
.head > ul > li:first-child > a { margin:0 0 0 60px; }
a.arrow { color:#fff;  display:inline-block; padding:0 20px 0 40px; text-decoration: none; background:url('../images/arrow_next.png') no-repeat right center; background-size:6px;}
a.arrow:hover { color:#ddd; }
a.arrow2 { color:#fff;  display:inline-block; padding:10px 40px 10px 25px; text-decoration: none; background:url('../images/arrow_next.png') no-repeat right 15px center; background-size:6px; border:#fff 1px solid; opacity: .7; border-radius: 20px;}
a.arrow2:hover { opacity: 1; }
.head .btn_category { position:absolute; display:inline-block; width:40px; height:40px; left:0; top:3px; background:url('../images/btn_category.png') no-repeat center center; background-size:24px; cursor:pointer; }
.hd { position:fixed; z-index: 9999; width:100%;}
.hd > section { width:100%; }
.bgBlack { background:rgba(0,0,0,.9); padding:10px;}
img.logo { height:40px; }

.aside { position:fixed; width:500px; height:100%; background:#222; color:#fff; z-index: 999; left:-500px; top:0; }
.aside .btn_close { position:absolute; top:20px; right:20px; background:url('../images/btn_close_w.png') no-repeat center center; width:30px; height:30px; background-size:30px; cursor:pointer; z-index:999; } 
.aside > ul { display:none; }
.aside > ul > li { position:relative;}
.aside > ul.category > li { height:40px; line-height: 40px; position:relative;}
.aside > ul.category > li:first-child { margin:60px 0 0 0; }
.aside > ul.category > li a { display:block; padding:0 30px; color:#888; font-size:24px; text-decoration: none;}
.aside > ul.category > li a:hover { color:#ddd; }

.aside > ul.contactSection { display:inline-block; overflow: hidden; overflow-y: auto; padding:0 0 50px 0; }
.aside > ul.contactSection > form > h1 { padding:20px; font-size:22px;  }
.aside > ul.contactSection > form > h2 { padding:20px 20px 15px 20px; font-size:15px; color:#ccc; }
.aside > ul.contactSection > form > li { padding:0 20px; margin:0 0 5px 0; position:relative;}

.aside > ul.careerSection { display:inline-block; overflow: hidden; overflow-y: auto; padding:0 0 50px 0; }
.aside > ul.careerSection > form > h1 { padding:20px; font-size:22px;  }
.aside > ul.careerSection > form > h2 { padding:20px 20px 15px 20px; font-size:15px; color:#ccc; }
.aside > ul.careerSection > form > li { padding:0 20px; margin:0 0 5px 0; position:relative;}

.aside > ul > form > li > input[type=text] { width:100%; padding:0 10px; height:45px; line-height: 45px; font-size:15px; border:0; background:#111; color:#ddd; border-radius: 3px; }
.aside > ul > form > li > input[type=submit] { width:150px; padding:0 0; height:50px; line-height: 50px; font-size:15px; border:0; margin:30px 0 0 0; background:#000; color:#ddd; border-radius: 3px; cursor: pointer; }
.aside > ul > form > li > p { display:block; padding:0 10px; height:45px; line-height: 45px; font-size:14px; border:0; background:#111; color:#ddd; border-radius: 3px; cursor:pointer;}
.aside > ul > form > li > p > span { font-size:12px;  display:inline-block; margin:0 0 0 10px; letter-spacing: normal;}
.aside > ul > form > li > textarea { width:100%; padding:7px; height:100px; font-size:15px; border:0; background:#111; color:#ddd; border-radius: 3px; }
.aside > ul > form > li > input[type=file] { visibility: hidden; display:none; }
.aside > ul > form > li > span { position:absolute; left:30px; top:0; height:45px; line-height: 45px; font-size:15px; color:#666; }
.aside > ul > form > li > span > strong { display:inline-block; margin:0 0 0 5px; color:#ee0c00; }
.aside > ul > form > li > ul { display:inline-block; padding:0 0;}
.aside > ul > form > li > ul > li { float:left; width:33.3%; margin:0 0 8px 0; }

.content { text-align:center; color:#fff; position:absolute; left:50%; top:50%; z-index: 9;}
.content > h1 { font-size:38px; }
.content > h2 { font-size:24px; }
.content > h3 { font-size:14px; margin:35px 0 0 0; }

.content_relative { text-align:center; color:#000; position:relative; padding:80px 0;}
.content_relative > h1 { font-size:42px; margin:30px 0 15px 0; }
.content_relative > h2 { font-size:16px;  margin:25px 0 0 0; color:#888; }
.content_relative > h3 { font-size:14px; margin:45px 0 0 0; }
.content_relative > h5 { text-align: center; margin:0 0 0 0; font-size:18px;  }
.content_relative > ul { width:1000px; margin:80px auto 0 auto; display:inline-block;}
.content_relative > ul > li { width:33.3%; float:left; text-align: left; margin:0 0 0 0; height:150px;}
.content_relative > ul > li > h3 { font-size:17px;  margin:0 0 10px 0; border-left:#333 3px solid; padding-left:8px; height:20px; line-height:20px; }
.content_relative > ul > li > h4 { font-size:12px;color:#888; padding-right: 50px; }
.content_relative > ul > li.m01 { }

.section01 { width:100%; height:100%; background:#000 url('../images/dx01.jpg') no-repeat fixed; background-position: 50% top; position:relative; transition: background-image 1s linear;}
.section02 { width:100%; background:#f8f8f8; position:relative;}
.section02 > .content { color:#000; }
.section03 { width:100%; background:#ffffff; position:relative;}
.section03 > .content { color:#000; }

.copyright { position:fixed; right:50px; bottom:50px; display:inline-block; color:#ddd; font-size:11px; letter-spacing: normal; text-align: right;}
.btn_career, .btn_contact {  font-size:15px; padding:7px 20px; border:#555 1px solid; color:#555; border-radius: 3px; cursor: pointer; margin:0 2px; }
.btn_career:hover, .btn_contact:hover { border:#000 1px solid; color:#000; }