*{padding: 0; margin: 0; list-style: none; font-family: 'Noto Sans KR', sans-serif; text-decoration: none;}
#backobj1 {display: block; width: 30em; height: 30em; position: fixed; background: no-repeat center / cover url(img/backobj1.png);z-index: -20;}
#backobj2 {display: block; width: 10em; height: 10em; position: fixed; background: no-repeat center / cover url(img/backobj2.png);z-index: -20;}
body {min-height: 100vh; z-index: -30; background: no-repeat center / cover url(img/back1.png); background-attachment: fixed;}
.screen_out {display: none;}
/* ---------선생님이 주신 파일에서 가져온거 (폼메일)--------- */
        fieldset {border:none;}
        #contact {max-width: 980px; margin:auto; position: relative;}
        #contact>div {display:flex;gap:30px;flex-wrap: wrap;}
        #contact>div>div,#contact fieldset {flex:1;min-width:300px;}
        #contact .form_base {border:1px solid #ebebeb;border-radius: 6px; background:#f3f3f3;height:50px; width:100%; padding:0 20px;line-height: 100%;display:block;font-size:16px;margin-bottom:15px; font-family: 'Noto Sans KR',sans-serif;font-weight:600;outline:none;}
        #contact .form_base:focus {border-color:#b1b1b1;}
        #contact .form_base.alert {border-color:#ef7f7f;}
        #contact .form_base.alert+span {color:#ef7f7f;font:12px/12px dotum,돋움,sans-serif; position: absolute;margin:-40px 0 0 20px;}
        #contact ::placeholder {font-family:'Noto Sans KR',sans-serif; font-weight:400;color:#b2b2b2;font-size:14px}
        #contact textarea.form_base {padding-top:15px;min-height:180px;}
        #contact input[name=answer] {display:none;}
        #contact .fa {font-size:22px;color:#d2d2d2; cursor: pointer;margin-right:10px;}
        #contact .fa.fa-comment-o {margin-top:-3px;position: absolute;}
        #contact .fa.fa-check {position: absolute;right:10px;color:#5ab601;margin-top:-50px;display:none;}
        #contact input:checked+.fa {color:#333;}
        #contact #msg~p {padding:5px 20px;}
        #contact #msg~div {position: absolute;margin:-25px 0 0 130px;}
        #contact button.form_base {background:#292929;color:#d4d4d4;text-transform: uppercase;font-family:'Noto Sans KR'; font-size:16px; cursor: pointer;margin:50px 0 20px; width:180px;}
        #contact textarea+span {display:none;}
        #contact textarea.alert+span {display:block;}
/* ---------선생님이 주신 파일에서 가져온거 (폼메일)--------- */
#sline {position: fixed; width: 0; height: 100%; border: 0.5px solid red; left: 50%; box-sizing: border-box;}
#gline {position: fixed; width: 100%; height: 0; border: 0.5px solid red; top: 50%; box-sizing: border-box;}
h1 {position: fixed; text-indent: -9999px; overflow: hidden; width: 3em; height: 3em; border: 1px solid red; left: 2em; top: 1em; background: no-repeat center / contain url(img/Plogo.svg);}
#menu {position: fixed; top: 4em; right: 5em; font-weight: 500; z-index: 20;}
#menu ul {display: flex; gap: 2em; font-size: 1.2em;}
.page {position: relative; height: 100vh; border: 1px solid green; box-sizing: border-box; overflow: hidden;}
#PORTFOLIO {height: 100vh;}
#main_p {position: absolute; left: 4em; top: 50%; transform: translateY(-50%);}
.main_p1 {font-size: 5em; font-weight: 700; line-height: 1.3em;}
.main_p2 {font-size: 1.16em; font-weight: 500; line-height: 2.2em;}
.main_p2>p:first-child {margin-top: 2.2em;}
#aboutme {position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); }
#aboutme p {font-size: 1.6em; font-weight: 700; margin-bottom: 0.4em;}
#aboutme p:not(#profile p) {color: #AFAFAF;}
#aboutme>ul {display: flex; width: 45em; flex-wrap: wrap; margin-top: 1.8em; margin-left: 0.4em;}
#aboutme>ul>li {width: 21em; height: 21em; border: 1px solid red; box-sizing: border-box; border-radius: 1.25em; margin: 0.7em; filter: drop-shadow(0 0.125em 1em rgb(211, 211, 211)); background: #fff;}
#profile {margin-left: 2.5em; margin-top: 2.3em;}
#profile div {text-indent: -9999px; overflow: hidden; width: 16.7em; height: 15em; border: 1px solid transparent; background: no-repeat center / contain url(img/profile.png); margin-left: -0.3em;}
#profile p span {color: #AFAFAF;}
.ab_box {margin-left: 2.5em; margin-top: 1.5em;}
.ab_box>ul>li {font-size: 1em; font-weight: 500; line-height: 1.8em;}
#programs {display: flex; gap: 0.7em; flex-wrap: wrap; margin-top: -0.4em;}
#programs>li {text-indent: -9999px; overflow: hidden; width: 4.6em; height: 4.6em; border: 1px solid transparent; background: no-repeat center / contain url(img/Plogo.png);}
#programs>li:nth-child(1) {background: no-repeat center / contain url(img/photologo.png);}
#programs>li:nth-child(2) {background: no-repeat center / contain url(img/ilustlogo.png);}
#programs>li:nth-child(3) {background: no-repeat center / contain url(img/afterlogo.png);}
#programs>li:nth-child(4) {background: no-repeat center / contain url(img/prelogo.png);}
#programs>li:nth-child(5) {background: no-repeat center / contain url(img/c4dlogo.png); filter: drop-shadow(0 0.125em 0.25em rgb(150, 150, 150));}
#programs>li:nth-child(6) {background: no-repeat center / contain url(img/maxlogo.png); filter: drop-shadow(0 0.125em 0.25em rgb(150, 150, 150));}
#programs>li:nth-child(7) {background: no-repeat center / contain url(img/excellogo.png);}
#programs>li:nth-child(8) {background: no-repeat center / contain url(img/pptlogo.png);}
#programs>li:nth-child(9) {background: no-repeat center / contain url(img/hanlogo.png);}
.submenu1 {font-size: 5em; font-weight: 700; line-height: 1.3em; margin-top: 1.5em; margin-left: 0.8em; position: relative;}
.submenu2 {display: flex; gap: 2em; font-size: 1.2em; margin: 2em 0 4em 3.3em;}
.absolute {position: absolute; padding:50px 0; overflow: hidden; z-index: 2; width: 100%;}
.gallery {display: inline-flex; gap: 2.3em; border: 1px solid blue; box-sizing: border-box; height: 33em;  white-space: nowrap; color: #000;}
.gallery:link {color: #000;}
.gallery:visited {color: #000;}
.gallery:active {color: rgb(46, 46, 46);}
.gallery>li {border: 1px solid red; box-sizing: border-box; border-radius: 0.5em; height: 33em; width: 30em; cursor: pointer; filter: drop-shadow(0 0.125em 1em rgb(211, 211, 211)); background: #fff;}
.gallery>li>a {display:block; width:100%; height:100%;}
.work {width: 27.5em; margin: 1em auto;}
.work li {margin-right: 0.8em;}
.work p {word-break: break-all; white-space: normal; overflow-wrap: break-word; border: 1px solid blue; box-sizing: border-box; line-height: 2.8em;}
.work>p:nth-child(2) {font-weight: 700; font-size: 1.6em;}
.work>p:nth-child(4) {font-weight: 500; font-size: 1.3em; line-height: 1.7em;}
.work>div:first-child {border: 1px solid green; box-sizing: border-box; width: 100%; height: 0; padding-top: 56.25%;text-indent: -9999px; overflow: hidden;}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
#programs1 {border: 1px solid green; box-sizing: border-box; display: flex; margin-bottom: 0.8em;}
#programs1>li:nth-child(1) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/ilustlogo.png); }
#programs1>li:nth-child(2) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/afterlogo.png);}
#work1 {background: center / cover url(img/1.png);}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
#programs2 {border: 1px solid green; box-sizing: border-box; display: flex; margin-bottom: 0.8em;}
#programs2>li:nth-child(1) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/ilustlogo.png); }
#programs2>li:nth-child(2) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/maxlogo.png); filter: drop-shadow(0 0.125em 0.25em rgb(150, 150, 150));}
#programs2>li:nth-child(3) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/afterlogo.png);}
#work2 {background: center / cover url(img/2.png);}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
#programs3 {border: 1px solid green; box-sizing: border-box; display: flex; margin-bottom: 0.8em;}
#programs3>li:nth-child(1) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/maxlogo.png); filter: drop-shadow(0 0.125em 0.25em rgb(150, 150, 150));}
#programs3>li:nth-child(2) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/prelogo.png);}
#work3 {background: center / cover url(img/3.png);}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
#programs4 {border: 1px solid green; box-sizing: border-box; display: flex; margin-bottom: 0.8em;}
#programs4>li:nth-child(1) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/afterlogo.png); }
#work4 {background: center / cover url(img/4.png);}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
#programs5 {border: 1px solid green; box-sizing: border-box; display: flex; margin-bottom: 0.8em;}
#programs5>li:nth-child(1) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/afterlogo.png); }
#work5 {background: center / cover url(img/5.png);}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
#programs6 {border: 1px solid green; box-sizing: border-box; display: flex; margin-bottom: 0.8em;}
#programs6>li:nth-child(1) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/maxlogo.png); filter: drop-shadow(0 0.125em 0.25em rgb(150, 150, 150));}
#programs6>li:nth-child(2) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/afterlogo.png);}
#programs6>li:nth-child(3) {display: inline-block; content: ""; border: 1px solid green; box-sizing: border-box; width: 50px; height: 50px; background: center / cover url(img/prelogo.png);}
#work6 {background: center / cover url(img/6.png);}
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
.margin-top {padding-top: 35em;}
#contact fieldset {position: absolute; top: 11.6em; right: -26.8vh; width: 900px;}
#contact #msg {height: 355px;}
#contact_text {position: absolute; top: 10em; left: -31vh;}
#CONTACT_ME {font-size: 80px; font-weight: 700; line-height: 130%;}
#CONTACT_ME_SUB {font-size: 20px; font-weight: 500;}
#CONTACT_ME_SUB>p:first-child {font-size: 31px; font-weight: 700;}
#CONTACT_ME_SUB>p:nth-child(2) {line-height: 75px;}
#CONTACT_ME_SUB>p:nth-child(3) {line-height: 5px;}
* {border: none !important;}