html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*CSS RESET*/

/*FONT*/
@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 900;
    src: url(../font/NotoSansCJKkr-Black.otf);
}

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 700;
    src: url(../font/NotoSansCJKkr-Bold.otf);
}

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 300;
    src: url(../font/NotoSansCJKkr-Light.otf);
}

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 500;
    src: url(../font/NotoSansCJKkr-Medium.otf);
}

@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 400;
    src: url(../font/NotoSansCJKkr-Regular.otf);
}


@font-face {
    font-family: 'NotoSansCJKkr';
    font-style: normal;
    font-weight: 200;
    src: url(../font/NotoSansCJKkr-Thin.otf);
}



/*-------------------------------------------------------------------------------------*/



@media screen and (max-width: 767px){
     body {width: 100%; height: 100%; position: absolute; overflow: hidden; font-family: 'NotoSansCJKkr', sans-serif;}

header {width: 100%; height: 100px; position: fixed; top: 0; z-index: 9999; background-color: transparent;}
header h1 {font-size: 0; text-indent: -9999; color: transparent; height: 80px; width: 400px; float: left; background-image: url(../image/logo.png); background-repeat: no-repeat; margin-left: 30px; margin-top: 10px;}
header nav {float: right;}
header nav ul {}
header nav ul li {}
header nav ul li a {cursor: pointer; display: block; width: 40px; height: 40px; margin-top: 30px; margin-right: 30px; background-image: url(../image/arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}


a.headerShow {float: right; width: 40px; height: 40px; display: block; margin-top: -60px; right: 0; margin-right: 30px; cursor: pointer; z-index: 9999; position: fixed; background-image: url(../image/arrow.png); transform: rotate(180deg); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toRight {display: block; width: 5%; position: fixed; height: 30%; right: 0; cursor: pointer; z-index: 1000; margin-right: 2.5%;}
a.toRight span {display: block; width: 100%;height: 100%; background-image: url(../image/rightArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toLeft {display: block; width: 5%; position: fixed; height: 30%; left: 0; margin-left: 2.5%; cursor: pointer; z-index: 1000;}
a.toLeft span {display: block; width: 100%;height: 100%;top: 0; position: relative; background-image: url(../image/leftArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}

section {width: 100%; height: 100%;}
section article {width: 100%; height: 100%;}

section article.designBox {width: 100%; height: 100%; position: fixed; top: 0; z-index: 100;}
section article.designBox div.topBox {width: 100%; height: 12.5%; position: absolute; top: 0; background-color: #07412b; z-index: 200; }
section article.designBox div.rightBox {width: 10%; height: 100%; position: absolute; right: 0; background-color: #07412b; z-index: 100;}

section article.designBox div.bottomBox {width: 100%; height: 12.5%; position: absolute; bottom: 0; background-color: #07412b; z-index: 200; background-image: url(../image/blackBoard.jpg); background-position: bottom right;}
section article.designBox div.bottomBox a {display: block; position: absolute; bottom: 0; width: 60%; height: 70%; margin-left: 22%; margin-right: 18%; cursor: pointer; text-align: center; font-size: 30px; color: white;}
section article.designBox div.bottomBox a span {border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}
section article.designBox div.leftBox {width: 10%; height: 100%; position: absolute; left: 0; background-color: #07412b; z-index: 100;}


section article.contentsBox {width: 1000%; height: 100%; background-color: #07412b; color: #fff;}
section article.contentsBox div.wholeWrapper {width: 100%; height: 100%; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper {float: left; width: 10%;height: 100%; top: 0; margin-top: auto; overflow: auto; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con {width: 78%; height: 72%; padding: 1%; margin-left: 10%; margin-top: -1%; overflow-y: hidden; overflow-x: hidden; position: absolute; z-index: 100;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header {display: inline-block; width: 100%; height: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header h2 {font-size: 20px;float: left; line-height: 50px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav {float: right;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul {display: inline-block;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li {float: left; margin-right: 10px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a {display: block; padding: 5px; height: 38px; line-height: 40px; cursor: pointer; font-size: 12px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a:hover {color: #ff8989;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a.active {display: block; padding: 5px; height: 38px; line-height: 40px; border-bottom: 2px solid #fff;}

/*section article.contentsBox div.wholeWrapper div.conWrapper div.con::-webkit-scrollbar {
display:none;
}*/

.con .innerCon {display: none; overflow-x: hidden; overflow-y: auto;}
.con .show {display: block;}


.main {background-color: #07412b;}
.main div.publisher {width: 100%; height: 90%; position: absolute;}
.main div.publisher a.webpu {display: block; width: 30%; text-align: center; font-size: 20px; margin-left: auto; margin-right: auto; letter-spacing: 3px; font-weight: 900; margin-top: 15%; cursor: pointer; color: #ff8989; position: relative; z-index: 100;}
.main div.publisher p.webpublisher {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.publisher p.know {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.aboutWeb {width: 100%; height: 90%; position: absolute;}
.main div.aboutWeb h3{font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.aboutWeb p {display: block; width: 50%; margin: 0 auto; text-align: center;}
.main div.aboutWeb p:nth-Child(2) {font-size: 30px; margin-top: 30px;}
.main div.aboutWeb p:nth-Child(3) {font-size: 16px; margin-top: 30px; line-height: 24px;}
.main div.aboutWeb img {margin-left: auto; margin-right: auto; display: block; margin-top: 40px;}
.main div.aboutWeb p:nth-Child(5) {font-size: 16px; margin-top: 30px; line-height: 24px; padding-bottom: 300px;}
.main div.ws {width: 100%; height: 90%; position: absolute;}
.main div.ws h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.ws p:nth-Child(2) {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.ws div {margin-top: 50px;}
.main div.ws div.sub4 p {padding-bottom: 300px;}
.main div.ws div h4{font-size: 40px; text-align: center; color: #adcdff;}
.main div.ws div h4 span{font-size: 30px; text-align: center; color: rgba(173, 205, 255, 0.6); margin-top: 20px; display: block;}
.main div.wa {width: 100%; height: 90%; position: absolute;}
.main div.wa h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.wa h3 span {font-size: 30px; color: rgba(255, 137, 137, 0.5); text-align: center; margin-top: 50px;}
.main div.wa p {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.wa div.sub1 {margin-top: 50px;}
.main div.wa div.sub1 h4 {font-size: 40px; text-align: center; color: #adcdff;}
.main div.wa div.sub1 p {}
.main div.wa div.sub1 div.boxList {width: 680px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 800px;
  margin-top: 30px;
}
.main div.wa div.sub1 div.boxList dl {width: 270px; float: left; background-color: rgba(49, 151, 166, 0.2);
height: 300px; padding: 0 20px;
margin: 15px; display: inline-block;}
.main div.wa div.sub1 div.boxList dl dt {margin-top: 40px;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.main div.wa div.sub1 div.boxList dl dd {font-size: 16px;
line-height: 25px; text-align: center;}

.mL {background-color: #07412b;}
.mL .html {width: 100%; height: 90%; position: absolute;}
.mL .html dl, .css dl, .js dl {padding: 1% 3%;}
.mL .html dl dt, .css dl dt, .js dl dt {font-size: 30px; padding-top: 80px; padding-bottom: 40px; color: #ff8989;}
.mL .html dl dd, .css dl dd, .js dl dd {font-size: 16px; padding-bottom: 24px;}
.mL .css {width: 100%; height: 90%; position: absolute;}
.mL .js {width: 100%; height: 90%; position: absolute;}
.mL .innerCon h3 {text-align: right; padding-right: 5%; padding-top: 30px; font-size: 40px; font-weight: 700; }

.site {background-color: #07412b;}
.site div.conten {width: 100%;height: 88%; padding-top: 2%;}
.site ul {width: 40%; float: left;}
.site ul li {margin: 20px; font-size: 25px;}
.site ul li a {color: #fff; text-decoration: none;}
.site ul li a:hover {color: #ff8989; text-decoration: none;}
.site div.conten img {width: 60%; height: 60%; border: none;}

.aboutMe {background-color: #07412b;}
.aboutMe div.me {width: 100%; height: 90%; overflow: auto;}
.aboutMe div.me::-webkit-scrollbar {
display:none;
}
.aboutMe div.me div.picture {margin-top: 3%; width: 20%; height: 50%; float: right; margin-right: 5%; background-image: url(../image/me.jpg); background-size: cover; background-position: -90px; background-repeat: no-repeat; font-size: 0;text-indent: -9999; color: transparent;}
.aboutMe div.me div.profile {margin-top: 3%; margin-left: 5%;}
.aboutMe div.me div.profile ul.file {}
.aboutMe div.me div.profile ul.file li {font-size: 24px; line-height: 36px; color: #ff8989;}
.aboutMe div.me div.profile ul.file li:first-Child {font-size: 36px; line-height: 56px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(4) {font-size: 20px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(7) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(8) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(9) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(10) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li dl {}
.aboutMe div.me div.profile ul.file li dl dt {font-size: 16px; line-height: 24px; color: rgba(255, 137, 137, 0.74);}
.aboutMe div.me div.profile ul.file li dl dd{font-size: 20px; line-height: 30px; color: #898989;}
.aboutMe div.me h3 {font-size: 40px; line-height: 40px;}
.aboutMe div.me div.profile ul.skill {margin-top: 50px; padding-bottom: 300px;}
.aboutMe div.me div.profile ul.skill li {margin-top: 30px;}
.aboutMe div.me div.profile ul.skill li dl {margin-top: 10px;}
.aboutMe div.me div.profile ul.skill li dl dt {display: inline-block; width: 20%; float: left;line-height: 30px; text-align: right; font-size: 12px;}
.aboutMe div.me div.profile ul.skill li dl dd {display: inline-block; margin-left: 1%; width: 70%; height: 30px; background-color: #fff;}
.aboutMe div.me div.profile ul.skill li dl dd span.ef {display: inline-block; padding-left: 80%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.ez {display: inline-block; padding-left: 75%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.fz {display: inline-block; padding-left: 45%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sz {display: inline-block; padding-left: 55%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sf {display: inline-block; padding-left: 60%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.svz {display: inline-block; padding-left: 65%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}



section article.contact {height: 85%; z-index: 500; position: absolute; background-image: url(../image/workplace.jpg); background-repeat: no-repeat; background-size: cover; top: 100%; z-index: 3000;}
section article.contact div.wrapper {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
section article div.wrapper a.toContents {position: absolute; top: 0; font-size: 30px; width: 50%; top: 0; margin-left: 25%; margin-right: 25%;  display: block; text-align: center; color: white; cursor: pointer; padding: 2% 0 1% 0;}
section article div.wrapper a.toContents span {padding-left: 4px; border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}

section article div.wrapper div.contactBox {width: 40%; height: 60%; position: absolute; margin-left: 30%; margin-right: 30%; background-color: rgba(255, 255, 255, 0.7); border-radius: 20px;}
section article div.wrapper div h2 {text-align: center; font-size: 40px; font-weight: 700; padding: 2% 0 4% 0;}
section article div.wrapper div h3 {background-image: url(../image/woomLogo.png); width: 150px; height: 150px; background-size: 150px; background-repeat: no-repeat;font-size: 0;color: transparent;text-indent: -9999; margin-left: auto; margin-right: auto;}
section article div.wrapper div ul {display: block;display: 100%;height: 15%; margin-top: 50px;}
section article div.wrapper div ul li {float: left; display: block;width: 30%;}
section article div.wrapper div ul li:first-Child {padding: 0 0 0 20%;}
section article div.wrapper div ul li:last-Child {padding: 0 0 0 15%;}
section article div.wrapper div ul li dl {}
section article div.wrapper div ul li dl dt {width: 50px; height: 50px; font-size: 0; text-indent: -9999; color: transparent;}
section article div.wrapper div ul li:first-Child dl dt {background-image: url(../image/tel.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li:last-Child dl dt {background-image: url(../image/mail.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li dl dd {font-size: 12px; display: block; width: 120%; padding-top: 15px; margin-left: -20px;}
section article div.wrapper div p {text-align: center; font-size: 20px; margin-top: 10px;}
section article div.wrapper div p span {font-size: 30px; font-weight: 700;}


footer {background-color: #07412b; position: fixed; width: 99%; height: 100%; top: 0; color: white; text-align: right; padding-right: 1%; z-index: 0;}
footer div {font-weight: 200; font-size: 12px; line-height: 18px; position: absolute; bottom: 10px; right: 1%;}
}
/*MOBILE*/


@media screen and (min-width: 768px) and (max-width: 1023px){
    body {width: 100%; height: 100%; position: absolute; overflow: hidden; font-family: 'NotoSansCJKkr', sans-serif;}

header {width: 100%; height: 100px; position: fixed; top: 0; z-index: 9999; background-color: transparent;}
header h1 {font-size: 0; text-indent: -9999; color: transparent; height: 80px; width: 400px; float: left; background-image: url(../image/logo.png); background-repeat: no-repeat; margin-left: 30px; margin-top: 10px;}
header nav {float: right;}
header nav ul {}
header nav ul li {}
header nav ul li a {cursor: pointer; display: block; width: 40px; height: 40px; margin-top: 30px; margin-right: 30px; background-image: url(../image/arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}


a.headerShow {float: right; width: 40px; height: 40px; display: block; margin-top: -60px; right: 0; margin-right: 30px; cursor: pointer; z-index: 9999; position: fixed; background-image: url(../image/arrow.png); transform: rotate(180deg); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toRight {display: block; width: 5%; position: fixed; height: 30%; right: 0; cursor: pointer; z-index: 1000; margin-right: 2.5%;}
a.toRight span {display: block; width: 100%;height: 100%; background-image: url(../image/rightArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toLeft {display: block; width: 5%; position: fixed; height: 30%; left: 0; margin-left: 2.5%; cursor: pointer; z-index: 1000;}
a.toLeft span {display: block; width: 100%;height: 100%;top: 0; position: relative; background-image: url(../image/leftArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}

section {width: 100%; height: 100%;}
section article {width: 100%; height: 100%;}

section article.designBox {width: 100%; height: 100%; position: fixed; top: 0; z-index: 100;}
section article.designBox div.topBox {width: 100%; height: 12.5%; position: absolute; top: 0; background-color: #07412b; z-index: 200; }
section article.designBox div.rightBox {width: 10%; height: 100%; position: absolute; right: 0; background-color: #07412b; z-index: 100;}

section article.designBox div.bottomBox {width: 100%; height: 12.5%; position: absolute; bottom: 0; background-color: #07412b; z-index: 200; background-image: url(../image/blackBoard.jpg); background-position: bottom right;}
section article.designBox div.bottomBox a {display: block; position: absolute; bottom: 0; width: 60%; height: 70%; margin-left: 22%; margin-right: 18%; cursor: pointer; text-align: center; font-size: 30px; color: white;}
section article.designBox div.bottomBox a span {border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}
section article.designBox div.leftBox {width: 10%; height: 100%; position: absolute; left: 0; background-color: #07412b; z-index: 100;}


section article.contentsBox {width: 1000%; height: 100%; background-color: #07412b; color: #fff;}
section article.contentsBox div.wholeWrapper {width: 100%; height: 100%; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper {float: left; width: 10%;height: 100%; top: 0; margin-top: auto; overflow: auto; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con {width: 78%; height: 72%; padding: 1%; margin-left: 10%; margin-top: -1%; overflow-y: hidden; overflow-x: hidden; position: absolute; z-index: 100;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header {display: inline-block; width: 100%; height: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header h2 {font-size: 30px;float: left; line-height: 50px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav {float: right;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul {display: inline-block;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li {float: left; margin-right: 10px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a {display: block; padding: 5px; height: 38px; line-height: 40px; cursor: pointer;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a:hover {color: #ff8989;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a.active {display: block; padding: 5px; height: 38px; line-height: 40px; border-bottom: 2px solid #fff;}

/*section article.contentsBox div.wholeWrapper div.conWrapper div.con::-webkit-scrollbar {
display:none;
}*/

.con .innerCon {display: none; overflow-x: hidden; overflow-y: auto;}
.con .show {display: block;}


.main {background-color: #07412b;}
.main div.publisher {width: 100%; height: 90%; position: absolute;}
.main div.publisher a.webpu {display: block; width: 30%; text-align: center; font-size: 40px; margin-left: auto; margin-right: auto; letter-spacing: 3px; font-weight: 900; margin-top: 15%; cursor: pointer; color: #ff8989; position: relative; z-index: 100;}
.main div.publisher p.webpublisher {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.publisher p.know {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.aboutWeb {width: 100%; height: 90%; position: absolute;}
.main div.aboutWeb h3{font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.aboutWeb p {display: block; width: 50%; margin: 0 auto; text-align: center;}
.main div.aboutWeb p:nth-Child(2) {font-size: 30px; margin-top: 30px;}
.main div.aboutWeb p:nth-Child(3) {font-size: 16px; margin-top: 30px; line-height: 24px;}
.main div.aboutWeb img {margin-left: auto; margin-right: auto; display: block; margin-top: 40px;}
.main div.aboutWeb p:nth-Child(5) {font-size: 16px; margin-top: 30px; line-height: 24px; padding-bottom: 300px;}
.main div.ws {width: 100%; height: 90%; position: absolute;}
.main div.ws h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.ws p:nth-Child(2) {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.ws div {margin-top: 50px;}
.main div.ws div.sub4 p {padding-bottom: 300px;}
.main div.ws div h4{font-size: 40px; text-align: center; color: #adcdff;}
.main div.ws div h4 span{font-size: 30px; text-align: center; color: rgba(173, 205, 255, 0.6); margin-top: 20px; display: block;}
.main div.wa {width: 100%; height: 90%; position: absolute;}
.main div.wa h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.wa h3 span {font-size: 30px; color: rgba(255, 137, 137, 0.5); text-align: center; margin-top: 50px;}
.main div.wa p {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.wa div.sub1 {margin-top: 50px;}
.main div.wa div.sub1 h4 {font-size: 40px; text-align: center; color: #adcdff;}
.main div.wa div.sub1 p {}
.main div.wa div.sub1 div.boxList {width: 680px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 800px;
  margin-top: 30px;
}
.main div.wa div.sub1 div.boxList dl {width: 270px; float: left; background-color: rgba(49, 151, 166, 0.2);
height: 300px; padding: 0 20px;
margin: 15px; display: inline-block;}
.main div.wa div.sub1 div.boxList dl dt {margin-top: 40px;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.main div.wa div.sub1 div.boxList dl dd {font-size: 16px;
line-height: 25px; text-align: center;}

.mL {background-color: #07412b;}
.mL .html {width: 100%; height: 90%; position: absolute;}
.mL .html dl, .css dl, .js dl {padding: 1% 3%;}
.mL .html dl dt, .css dl dt, .js dl dt {font-size: 30px; padding-top: 80px; padding-bottom: 40px; color: #ff8989;}
.mL .html dl dd, .css dl dd, .js dl dd {font-size: 16px; padding-bottom: 24px;}
.mL .css {width: 100%; height: 90%; position: absolute;}
.mL .js {width: 100%; height: 90%; position: absolute;}
.mL .innerCon h3 {text-align: right; padding-right: 5%; padding-top: 30px; font-size: 40px; font-weight: 700; }

.site {background-color: #07412b;}
.site div.conten {width: 100%;height: 88%; padding-top: 2%;}
.site ul {width: 40%; float: left;}
.site ul li {margin: 20px; font-size: 25px;}
.site ul li a {color: #fff; text-decoration: none;}
.site ul li a:hover {color: #ff8989; text-decoration: none;}
.site div.conten img {width: 60%; height: 60%; border: none;}

.aboutMe {background-color: #07412b;}
.aboutMe div.me {width: 100%; height: 90%; overflow: auto;}
.aboutMe div.me::-webkit-scrollbar {
display:none;
}
.aboutMe div.me div.picture {margin-top: 3%; width: 20%; height: 50%; float: right; margin-right: 5%; background-image: url(../image/me.jpg); background-size: cover; background-position: -60px; background-repeat: no-repeat; font-size: 0;text-indent: -9999; color: transparent;}
.aboutMe div.me div.profile {margin-top: 3%; margin-left: 5%;}
.aboutMe div.me div.profile ul.file {}
.aboutMe div.me div.profile ul.file li {font-size: 24px; line-height: 36px; color: #ff8989;}
.aboutMe div.me div.profile ul.file li:first-Child {font-size: 36px; line-height: 56px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(4) {font-size: 20px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(7) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(8) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(9) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(10) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li dl {}
.aboutMe div.me div.profile ul.file li dl dt {font-size: 16px; line-height: 24px; color: rgba(255, 137, 137, 0.74);}
.aboutMe div.me div.profile ul.file li dl dd{font-size: 20px; line-height: 30px; color: #898989;}
.aboutMe div.me h3 {font-size: 40px; line-height: 40px;}
.aboutMe div.me div.profile ul.skill {margin-top: 50px; padding-bottom: 300px;}
.aboutMe div.me div.profile ul.skill li {margin-top: 30px;}
.aboutMe div.me div.profile ul.skill li dl {margin-top: 10px;}
.aboutMe div.me div.profile ul.skill li dl dt {display: inline-block; width: 12%; float: left;line-height: 30px; text-align: right; font-size: 12px;}
.aboutMe div.me div.profile ul.skill li dl dd {display: inline-block; margin-left: 1%; width: 80%; height: 30px; background-color: #fff;}
.aboutMe div.me div.profile ul.skill li dl dd span.ef {display: inline-block; padding-left: 80%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.ez {display: inline-block; padding-left: 75%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.fz {display: inline-block; padding-left: 45%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sz {display: inline-block; padding-left: 55%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sf {display: inline-block; padding-left: 60%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.svz {display: inline-block; padding-left: 65%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}



section article.contact {height: 85%; z-index: 500; position: absolute; background-image: url(../image/workplace.jpg); background-repeat: no-repeat; background-size: cover; top: 100%; z-index: 3000;}
section article.contact div.wrapper {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
section article div.wrapper a.toContents {position: absolute; top: 0; font-size: 30px; width: 50%; top: 0; margin-left: 25%; margin-right: 25%;  display: block; text-align: center; color: white; cursor: pointer; padding: 2% 0 1% 0;}
section article div.wrapper a.toContents span {padding-left: 4px; border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}

section article div.wrapper div.contactBox {width: 40%; height: 60%; position: absolute; margin-left: 30%; margin-right: 30%; background-color: rgba(255, 255, 255, 0.7); border-radius: 20px;}
section article div.wrapper div h2 {text-align: center; font-size: 40px; font-weight: 700; padding: 2% 0 4% 0;}
section article div.wrapper div h3 {background-image: url(../image/woomLogo.png); width: 150px; height: 150px; background-size: 150px; background-repeat: no-repeat;font-size: 0;color: transparent;text-indent: -9999; margin-left: auto; margin-right: auto;}
section article div.wrapper div ul {display: block;display: 100%;height: 15%; margin-top: 50px;}
section article div.wrapper div ul li {float: left; display: block;width: 30%;}
section article div.wrapper div ul li:first-Child {padding: 0 0 0 20%;}
section article div.wrapper div ul li:last-Child {padding: 0 0 0 15%;}
section article div.wrapper div ul li dl {}
section article div.wrapper div ul li dl dt {width: 50px; height: 50px; font-size: 0; text-indent: -9999; color: transparent;}
section article div.wrapper div ul li:first-Child dl dt {background-image: url(../image/tel.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li:last-Child dl dt {background-image: url(../image/mail.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li dl dd {font-size: 12px; display: block; width: 120%; padding-top: 15px; margin-left: -20px;}
section article div.wrapper div p {text-align: center; font-size: 20px; margin-top: 10px;}
section article div.wrapper div p span {font-size: 30px; font-weight: 700;}


footer {background-color: #07412b; position: fixed; width: 99%; height: 100%; top: 0; color: white; text-align: right; padding-right: 1%; z-index: 0;}
footer div {font-weight: 200; font-size: 12px; line-height: 18px; position: absolute; bottom: 10px; right: 1%;}
}
/*TABLET VERTICAL*/


@media screen and (min-width: 1024px) and (max-width: 1280px){
    body {width: 100%; height: 100%; position: absolute; overflow: hidden; font-family: 'NotoSansCJKkr', sans-serif;}

header {width: 100%; height: 100px; position: fixed; top: 0; z-index: 9999; background-color: transparent;}
header h1 {font-size: 0; text-indent: -9999; color: transparent; height: 80px; width: 400px; float: left; background-image: url(../image/logo.png); background-repeat: no-repeat; margin-left: 30px; margin-top: 10px;}
header nav {float: right;}
header nav ul {}
header nav ul li {}
header nav ul li a {cursor: pointer; display: block; width: 40px; height: 40px; margin-top: 30px; margin-right: 30px; background-image: url(../image/arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}


a.headerShow {float: right; width: 40px; height: 40px; display: block; margin-top: -60px; right: 0; margin-right: 30px; cursor: pointer; z-index: 9999; position: fixed; background-image: url(../image/arrow.png); transform: rotate(180deg); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toRight {display: block; width: 5%; position: fixed; height: 30%; right: 0; cursor: pointer; z-index: 1000; margin-right: 2.5%;}
a.toRight span {display: block; width: 100%;height: 100%; background-image: url(../image/rightArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toLeft {display: block; width: 5%; position: fixed; height: 30%; left: 0; margin-left: 2.5%; cursor: pointer; z-index: 1000;}
a.toLeft span {display: block; width: 100%;height: 100%;top: 0; position: relative; background-image: url(../image/leftArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}

section {width: 100%; height: 100%;}
section article {width: 100%; height: 100%;}

section article.designBox {width: 100%; height: 100%; position: fixed; top: 0; z-index: 100;}
section article.designBox div.topBox {width: 100%; height: 12.5%; position: absolute; top: 0; background-color: #07412b; z-index: 200; }
section article.designBox div.rightBox {width: 10%; height: 100%; position: absolute; right: 0; background-color: #07412b; z-index: 100;}

section article.designBox div.bottomBox {width: 100%; height: 12.5%; position: absolute; bottom: 0; background-color: #07412b; z-index: 200; background-image: url(../image/blackBoard.jpg); background-position: bottom right;}
section article.designBox div.bottomBox a {display: block; position: absolute; bottom: 0; width: 60%; height: 70%; margin-left: 22%; margin-right: 18%; cursor: pointer; text-align: center; font-size: 30px; color: white;}
section article.designBox div.bottomBox a span {border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}
section article.designBox div.leftBox {width: 10%; height: 100%; position: absolute; left: 0; background-color: #07412b; z-index: 100;}


section article.contentsBox {width: 1000%; height: 100%; background-color: #07412b; color: #fff;}
section article.contentsBox div.wholeWrapper {width: 100%; height: 100%; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper {float: left; width: 10%;height: 100%; top: 0; margin-top: auto; overflow: auto; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con {width: 78%; height: 72%; padding: 1%; margin-left: 10%; margin-top: -1%; overflow-y: hidden; overflow-x: hidden; position: absolute; z-index: 100;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header {display: inline-block; width: 100%; height: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header h2 {font-size: 40px;float: left; line-height: 50px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav {float: right;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul {display: inline-block;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li {float: left; margin-right: 10px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a {display: block; padding: 5px; height: 38px; line-height: 40px; cursor: pointer;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a:hover {color: #ff8989;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a.active {display: block; padding: 5px; height: 38px; line-height: 40px; border-bottom: 2px solid #fff;}

/*section article.contentsBox div.wholeWrapper div.conWrapper div.con::-webkit-scrollbar {
display:none;
}*/

.con .innerCon {display: none; overflow-x: hidden; overflow-y: auto;}
.con .show {display: block;}


.main {background-color: #07412b;}
.main div.publisher {width: 100%; height: 90%; position: absolute;}
.main div.publisher a.webpu {display: block; width: 30%; text-align: center; font-size: 50px; margin-left: auto; margin-right: auto; letter-spacing: 3px; font-weight: 900; margin-top: 15%; cursor: pointer; color: #ff8989; position: relative; z-index: 100;}
.main div.publisher p.webpublisher {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.publisher p.know {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.aboutWeb {width: 100%; height: 90%; position: absolute;}
.main div.aboutWeb h3{font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.aboutWeb p {display: block; width: 50%; margin: 0 auto; text-align: center;}
.main div.aboutWeb p:nth-Child(2) {font-size: 30px; margin-top: 30px;}
.main div.aboutWeb p:nth-Child(3) {font-size: 16px; margin-top: 30px; line-height: 24px;}
.main div.aboutWeb img {margin-left: auto; margin-right: auto; display: block; margin-top: 40px;}
.main div.aboutWeb p:nth-Child(5) {font-size: 16px; margin-top: 30px; line-height: 24px; padding-bottom: 300px;}
.main div.ws {width: 100%; height: 90%; position: absolute;}
.main div.ws h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.ws p:nth-Child(2) {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.ws div {margin-top: 50px;}
.main div.ws div.sub4 p {padding-bottom: 300px;}
.main div.ws div h4{font-size: 40px; text-align: center; color: #adcdff;}
.main div.ws div h4 span{font-size: 30px; text-align: center; color: rgba(173, 205, 255, 0.6); margin-top: 20px; display: block;}
.main div.wa {width: 100%; height: 90%; position: absolute;}
.main div.wa h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.wa h3 span {font-size: 30px; color: rgba(255, 137, 137, 0.5); text-align: center; margin-top: 50px;}
.main div.wa p {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.wa div.sub1 {margin-top: 50px;}
.main div.wa div.sub1 h4 {font-size: 40px; text-align: center; color: #adcdff;}
.main div.wa div.sub1 p {}
.main div.wa div.sub1 div.boxList {width: 680px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 800px;
  margin-top: 30px;
}
.main div.wa div.sub1 div.boxList dl {width: 270px; float: left; background-color: rgba(49, 151, 166, 0.2);
height: 300px; padding: 0 20px;
margin: 15px; display: inline-block;}
.main div.wa div.sub1 div.boxList dl dt {margin-top: 40px;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.main div.wa div.sub1 div.boxList dl dd {font-size: 16px;
line-height: 25px; text-align: center;}

.mL {background-color: #07412b;}
.mL .html {width: 100%; height: 90%; position: absolute;}
.mL .html dl, .css dl, .js dl {padding: 1% 3%;}
.mL .html dl dt, .css dl dt, .js dl dt {font-size: 30px; padding-top: 80px; padding-bottom: 40px; color: #ff8989;}
.mL .html dl dd, .css dl dd, .js dl dd {font-size: 16px; padding-bottom: 24px;}
.mL .css {width: 100%; height: 90%; position: absolute;}
.mL .js {width: 100%; height: 90%; position: absolute;}
.mL .innerCon h3 {text-align: right; padding-right: 5%; padding-top: 30px; font-size: 40px; font-weight: 700; }

.site {background-color: #07412b;}
.site div.conten {width: 100%;height: 88%; padding-top: 2%;}
.site ul {width: 40%; float: left;}
.site ul li {margin: 20px; font-size: 40px;}
.site ul li a {color: #fff; text-decoration: none;}
.site ul li a:hover {color: #ff8989; text-decoration: none;}
.site div.conten img {width: 60%; height: 60%; border: none;}

.aboutMe {background-color: #07412b;}
.aboutMe div.me {width: 100%; height: 90%; overflow: auto;}
.aboutMe div.me::-webkit-scrollbar {
display:none;
}
.aboutMe div.me div.picture {margin-top: 3%; width: 20%; height: 50%; float: right; margin-right: 5%; background-image: url(../image/me.jpg); background-size: cover; background-repeat: no-repeat; font-size: 0;text-indent: -9999; color: transparent;}
.aboutMe div.me div.profile {margin-top: 3%; margin-left: 5%;}
.aboutMe div.me div.profile ul.file {}
.aboutMe div.me div.profile ul.file li {font-size: 24px; line-height: 36px; color: #ff8989;}
.aboutMe div.me div.profile ul.file li:first-Child {font-size: 36px; line-height: 56px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(4) {font-size: 20px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(7) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(8) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(9) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(10) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li dl {}
.aboutMe div.me div.profile ul.file li dl dt {font-size: 16px; line-height: 24px; color: rgba(255, 137, 137, 0.74);}
.aboutMe div.me div.profile ul.file li dl dd{font-size: 20px; line-height: 30px; color: #898989;}
.aboutMe div.me h3 {font-size: 40px; line-height: 40px;}
.aboutMe div.me div.profile ul.skill {margin-top: 50px; padding-bottom: 300px;}
.aboutMe div.me div.profile ul.skill li {margin-top: 30px;}
.aboutMe div.me div.profile ul.skill li dl {margin-top: 10px;}
.aboutMe div.me div.profile ul.skill li dl dt {display: inline-block; width: 12%; float: left;line-height: 30px; text-align: right;}
.aboutMe div.me div.profile ul.skill li dl dd {display: inline-block; margin-left: 1%; width: 80%; height: 30px; background-color: #fff;}
.aboutMe div.me div.profile ul.skill li dl dd span.ef {display: inline-block; padding-left: 80%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.ez {display: inline-block; padding-left: 75%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.fz {display: inline-block; padding-left: 45%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sz {display: inline-block; padding-left: 55%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sf {display: inline-block; padding-left: 60%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.svz {display: inline-block; padding-left: 65%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}



section article.contact {height: 85%; z-index: 500; position: absolute; background-image: url(../image/workplace.jpg); background-repeat: no-repeat; background-size: cover; top: 100%; z-index: 3000;}
section article.contact div.wrapper {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
section article div.wrapper a.toContents {position: absolute; top: 0; font-size: 30px; width: 50%; top: 0; margin-left: 25%; margin-right: 25%;  display: block; text-align: center; color: white; cursor: pointer; padding: 2% 0 1% 0;}
section article div.wrapper a.toContents span {padding-left: 4px; border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}

section article div.wrapper div.contactBox {width: 40%; height: 60%; position: absolute; margin-left: 30%; margin-right: 30%; background-color: rgba(255, 255, 255, 0.7); border-radius: 20px;}
section article div.wrapper div h2 {text-align: center; font-size: 40px; font-weight: 700; padding: 2% 0 4% 0;}
section article div.wrapper div h3 {background-image: url(../image/woomLogo.png); width: 150px; height: 150px; background-size: 150px; background-repeat: no-repeat;font-size: 0;color: transparent;text-indent: -9999; margin-left: auto; margin-right: auto;}
section article div.wrapper div ul {display: block;display: 100%;height: 15%; margin-top: 50px;}
section article div.wrapper div ul li {float: left; display: block;width: 30%;}
section article div.wrapper div ul li:first-Child {padding: 0 5% 0 15%;}
section article div.wrapper div ul li:last-Child {padding: 0 15% 0 5%;}
section article div.wrapper div ul li dl {}
section article div.wrapper div ul li dl dt {width: 50px; height: 50px; font-size: 0; text-indent: -9999; color: transparent; float: left; margin-right: 3%;}
section article div.wrapper div ul li:first-Child dl dt {background-image: url(../image/tel.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li:last-Child dl dt {background-image: url(../image/mail.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li dl dd {font-size: 12px; display: block; width: 120%; padding-top: 17px;}
section article div.wrapper div p {text-align: center; font-size: 20px; margin-top: 10px;}
section article div.wrapper div p span {font-size: 30px; font-weight: 700;}


footer {background-color: #07412b; position: fixed; width: 99%; height: 100%; top: 0; color: white; text-align: right; padding-right: 1%; z-index: 0;}
footer div {font-weight: 200; font-size: 12px; line-height: 18px; position: absolute; bottom: 10px; right: 1%;}
}
/*TABLET HORIZONTAL*/


@media screen and (min-width: 1281px){
    body {width: 100%; height: 100%; position: absolute; overflow: hidden; font-family: 'NotoSansCJKkr', sans-serif;}

header {width: 100%; height: 100px; position: fixed; top: 0; z-index: 9999; background-color: transparent;}
header h1 {font-size: 0; text-indent: -9999; color: transparent; height: 80px; width: 400px; float: left; background-image: url(../image/logo.png); background-repeat: no-repeat; margin-left: 30px; margin-top: 10px;}
header nav {float: right;}
header nav ul {}
header nav ul li {}
header nav ul li a {cursor: pointer; display: block; width: 40px; height: 40px; margin-top: 30px; margin-right: 30px; background-image: url(../image/arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}


a.headerShow {float: right; width: 40px; height: 40px; display: block; margin-top: -60px; right: 0; margin-right: 30px; cursor: pointer; z-index: 9999; position: fixed; background-image: url(../image/arrow.png); transform: rotate(180deg); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toRight {display: block; width: 5%; position: fixed; height: 30%; right: 0; cursor: pointer; z-index: 1000; margin-right: 2.5%;}
a.toRight span {display: block; width: 100%;height: 100%; background-image: url(../image/rightArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}
a.toLeft {display: block; width: 5%; position: fixed; height: 30%; left: 0; margin-left: 2.5%; cursor: pointer; z-index: 1000;}
a.toLeft span {display: block; width: 100%;height: 100%;top: 0; position: relative; background-image: url(../image/leftArrow.png); background-repeat: no-repeat; background-size: contain; background-position: center; font-size: 0; color: transparent; text-indent: -9999;}

section {width: 100%; height: 100%;}
section article {width: 100%; height: 100%;}

section article.designBox {width: 100%; height: 100%; position: fixed; top: 0; z-index: 100;}
section article.designBox div.topBox {width: 100%; height: 12.5%; position: absolute; top: 0; background-color: #07412b; z-index: 200; }
section article.designBox div.rightBox {width: 10%; height: 100%; position: absolute; right: 0; background-color: #07412b; z-index: 100;}

section article.designBox div.bottomBox {width: 100%; height: 12.5%; position: absolute; bottom: 0; background-color: #07412b; z-index: 200; background-image: url(../image/blackBoard.jpg); background-position: bottom right;}
section article.designBox div.bottomBox a {display: block; position: absolute; bottom: 0; width: 60%; height: 70%; margin-left: 22%; margin-right: 18%; cursor: pointer; text-align: center; font-size: 30px; color: white;}
section article.designBox div.bottomBox a span {border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}
section article.designBox div.leftBox {width: 10%; height: 100%; position: absolute; left: 0; background-color: #07412b; z-index: 100;}


section article.contentsBox {width: 1000%; height: 100%; background-color: #07412b; color: #fff;}
section article.contentsBox div.wholeWrapper {width: 100%; height: 100%; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper {float: left; width: 10%;height: 100%; top: 0; margin-top: auto; overflow: auto; background-color: #07412b;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con {width: 78%; height: 72%; padding: 1%; margin-left: 10%; margin-top: -1%; overflow-y: hidden; overflow-x: hidden; position: absolute; z-index: 100;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header {display: inline-block; width: 100%; height: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header h2 {font-size: 40px;float: left; line-height: 50px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav {float: right;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul {display: inline-block;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li {float: left; margin-right: 10px;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a {display: block; padding: 5px; height: 38px; line-height: 40px; cursor: pointer;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a:hover {color: #ff8989;}
section article.contentsBox div.wholeWrapper div.conWrapper div.con div.header nav ul li a.active {display: block; padding: 5px; height: 38px; line-height: 40px; border-bottom: 2px solid #fff;}

/*section article.contentsBox div.wholeWrapper div.conWrapper div.con::-webkit-scrollbar {
display:none;
}*/

.con .innerCon {display: none; overflow-x: hidden; overflow-y: auto;}
.con .show {display: block;}


.main {background-color: #07412b;}
.main div.publisher {width: 100%; height: 90%; position: absolute;}
.main div.publisher a.webpu {display: block; width: 30%; text-align: center; font-size: 60px; margin-left: auto; margin-right: auto; letter-spacing: 3px; font-weight: 900; margin-top: 15%; cursor: pointer; color: #ff8989; position: relative; z-index: 100;}
.main div.publisher p.webpublisher {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.publisher p.know {display: block; font-size: 20px; font-weight: 300; text-align: center; width: 50%; margin-left: auto; margin-right: auto; line-height: 30px; margin-top: -100px; opacity: 0;}
.main div.aboutWeb {width: 100%; height: 90%; position: absolute;}
.main div.aboutWeb h3{font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.aboutWeb p {display: block; width: 50%; margin: 0 auto; text-align: center;}
.main div.aboutWeb p:nth-Child(2) {font-size: 30px; margin-top: 30px;}
.main div.aboutWeb p:nth-Child(3) {font-size: 16px; margin-top: 30px; line-height: 24px;}
.main div.aboutWeb img {margin-left: auto; margin-right: auto; display: block; margin-top: 40px;}
.main div.aboutWeb p:nth-Child(5) {font-size: 16px; margin-top: 30px; line-height: 24px; padding-bottom: 300px;}
.main div.ws {width: 100%; height: 90%; position: absolute;}
.main div.ws h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.ws p:nth-Child(2) {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.ws div {margin-top: 50px;}
.main div.ws div.sub4 p {padding-bottom: 300px;}
.main div.ws div h4{font-size: 40px; text-align: center; color: #adcdff;}
.main div.ws div h4 span{font-size: 30px; text-align: center; color: rgba(173, 205, 255, 0.6); margin-top: 20px; display: block;}
.main div.wa {width: 100%; height: 90%; position: absolute;}
.main div.wa h3 {font-size: 60px; color: #ff8989; text-align: center; margin-top: 50px;}
.main div.wa h3 span {font-size: 30px; color: rgba(255, 137, 137, 0.5); text-align: center; margin-top: 50px;}
.main div.wa p {display: block; width: 50%; margin: 0 auto; text-align: center; margin-top: 30px; line-height: 24px;}
.main div.wa div.sub1 {margin-top: 50px;}
.main div.wa div.sub1 h4 {font-size: 40px; text-align: center; color: #adcdff;}
.main div.wa div.sub1 p {}
.main div.wa div.sub1 div.boxList {width: 680px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 800px;
  margin-top: 30px;
}
.main div.wa div.sub1 div.boxList dl {width: 270px; float: left; background-color: rgba(49, 151, 166, 0.2);
height: 300px; padding: 0 20px;
margin: 15px; display: inline-block;}
.main div.wa div.sub1 div.boxList dl dt {margin-top: 40px;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.main div.wa div.sub1 div.boxList dl dd {font-size: 16px;
line-height: 25px; text-align: center;}

.mL {background-color: #07412b;}
.mL .html {width: 100%; height: 90%; position: absolute;}
.mL .html dl, .css dl, .js dl {padding: 1% 3%;}
.mL .html dl dt, .css dl dt, .js dl dt {font-size: 30px; padding-top: 80px; padding-bottom: 40px; color: #ff8989;}
.mL .html dl dd, .css dl dd, .js dl dd {font-size: 16px; padding-bottom: 24px;}
.mL .css {width: 100%; height: 90%; position: absolute;}
.mL .js {width: 100%; height: 90%; position: absolute;}
.mL .innerCon h3 {text-align: right; padding-right: 5%; padding-top: 30px; font-size: 40px; font-weight: 700; }

.site {background-color: #07412b;}
.site div.conten {width: 100%;height: 88%; padding-top: 2%;}
.site ul {width: 40%; float: left;}
.site ul li {margin: 20px; font-size: 40px;}
.site ul li a {color: #fff; text-decoration: none;}
.site ul li a:hover {color: #ff8989; text-decoration: none;}
.site div.conten img {width: 60%; height: 60%; border: none;}

.aboutMe {background-color: #07412b;}
.aboutMe div.me {width: 100%; height: 90%; overflow: auto;}
.aboutMe div.me::-webkit-scrollbar {
display:none;
}
.aboutMe div.me div.picture {margin-top: 3%; width: 20%; height: 50%; float: right; margin-right: 5%; background-image: url(../image/me.jpg); background-size: cover; background-repeat: no-repeat; font-size: 0;text-indent: -9999; color: transparent;}
.aboutMe div.me div.profile {margin-top: 3%; margin-left: 5%;}
.aboutMe div.me div.profile ul.file {}
.aboutMe div.me div.profile ul.file li {font-size: 24px; line-height: 36px; color: #ff8989;}
.aboutMe div.me div.profile ul.file li:first-Child {font-size: 36px; line-height: 56px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(4) {font-size: 20px; color: white;}
.aboutMe div.me div.profile ul.file li:nth-Child(7) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(8) {font-size: 20px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(9) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li:nth-Child(10) {line-height: 28px; font-size: 16px; color: white; letter-spacing: 2px;}
.aboutMe div.me div.profile ul.file li dl {}
.aboutMe div.me div.profile ul.file li dl dt {font-size: 16px; line-height: 24px; color: rgba(255, 137, 137, 0.74);}
.aboutMe div.me div.profile ul.file li dl dd{font-size: 20px; line-height: 30px; color: #898989;}
.aboutMe div.me h3 {font-size: 40px; line-height: 40px;}
.aboutMe div.me div.profile ul.skill {margin-top: 50px; padding-bottom: 300px;}
.aboutMe div.me div.profile ul.skill li {margin-top: 30px;}
.aboutMe div.me div.profile ul.skill li dl {margin-top: 10px;}
.aboutMe div.me div.profile ul.skill li dl dt {display: inline-block; width: 12%; float: left;line-height: 30px; text-align: right;}
.aboutMe div.me div.profile ul.skill li dl dd {display: inline-block; margin-left: 1%; width: 80%; height: 30px; background-color: #fff;}
.aboutMe div.me div.profile ul.skill li dl dd span.ef {display: inline-block; padding-left: 80%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.ez {display: inline-block; padding-left: 75%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.fz {display: inline-block; padding-left: 45%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sz {display: inline-block; padding-left: 55%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.sf {display: inline-block; padding-left: 60%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}
.aboutMe div.me div.profile ul.skill li dl dd span.svz {display: inline-block; padding-left: 65%; width: 5%; height: 30px; line-height: 30px; background-color: #ff8989;}



section article.contact {height: 85%; z-index: 500; position: absolute; background-image: url(../image/workplace.jpg); background-repeat: no-repeat; background-size: cover; top: 100%; z-index: 3000;}
section article.contact div.wrapper {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
section article div.wrapper a.toContents {position: absolute; top: 0; font-size: 30px; width: 50%; top: 0; margin-left: 25%; margin-right: 25%;  display: block; text-align: center; color: white; cursor: pointer; padding: 2% 0 1% 0;}
section article div.wrapper a.toContents span {padding-left: 4px; border-bottom: 2px solid #fff; padding-bottom: 10px; letter-spacing: 8px;}

section article div.wrapper div.contactBox {width: 40%; height: 60%; position: absolute; margin-left: 30%; margin-right: 30%; background-color: rgba(255, 255, 255, 0.7); border-radius: 20px;}
section article div.wrapper div h2 {text-align: center; font-size: 40px; font-weight: 700; padding: 2% 0 4% 0;}
section article div.wrapper div h3 {background-image: url(../image/woomLogo.png); width: 150px; height: 150px; background-size: 150px; background-repeat: no-repeat;font-size: 0;color: transparent;text-indent: -9999; margin-left: auto; margin-right: auto;}
section article div.wrapper div ul {display: block;display: 100%;height: 15%; margin-top: 50px;}
section article div.wrapper div ul li {float: left; display: block;width: 30%;}
section article div.wrapper div ul li:first-Child {padding: 0 5% 0 15%;}
section article div.wrapper div ul li:last-Child {padding: 0 15% 0 5%;}
section article div.wrapper div ul li dl {}
section article div.wrapper div ul li dl dt {width: 50px; height: 50px; font-size: 0; text-indent: -9999; color: transparent; float: left; margin-right: 10%;}
section article div.wrapper div ul li:first-Child dl dt {background-image: url(../image/tel.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li:last-Child dl dt {background-image: url(../image/mail.png); background-size: cover; background-repeat: no-repeat;}
section article div.wrapper div ul li dl dd {font-size: 20px; display: block; width: 120%; padding-top: 15px;}
section article div.wrapper div p {text-align: center; font-size: 20px; margin-top: 10px;}
section article div.wrapper div p span {font-size: 30px; font-weight: 700;}


footer {background-color: #07412b; position: fixed; width: 99%; height: 100%; top: 0; color: white; text-align: right; padding-right: 1%; z-index: 0;}
footer div {font-weight: 200; font-size: 12px; line-height: 18px; position: absolute; bottom: 10px; right: 1%;}
}
/*LAPTOP*/