@charset="utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');

@font-face {
    font-family: 'OSP-DIN';
    src: url('../font/OSP-DIN.woff2') format('woff2'),
        url('../font/OSP-DIN.woff') format('woff');
}
* {
    margin: 0; padding: 0;
    text-decoration: none; color: inherit; 
    font-weight: inherit;
    font-size: inherit;
    box-sizing: border-box;
    background: none;
    border: none;
    }
input {background: transparent; width: 100%;}
button, a {cursor: pointer;}

html {width: 100%; height: 100%; min-height: 500px;}
body {font-family: 'OSP-DIN','Noto Sans KR',sans-serif; width: 100%; height: 100%; background: #96fe00;}
.section {width: 100%; height: 100%; clear:both;}

/*#section1*/
.bgBox1 {width: 50%; height: 100%; float: left; position: relative;}
.conBox1 {width: 50%; height: 100%; background: url(../img/pf_th_pic.png) center no-repeat; float: left;}
.bgBox1 .h1Box {width: 85%; height: 100%; position: relative; float: left;}
.h1Box {position: relative;}
.h1Box .h1Div {width:100%;
			height:100%;
			box-sizing:border-box;
			position:relative;
            top: 25%;
            right: 5%;
            float: right;}
.h1Box p {display: inline; position: relative; top: -45%; left: 43%;}

h1 {font-size: 120px; text-align: right;}
.bgBox1 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}
.bgBox1 .lineDiv .box-white{
			width:20px;
			height:20%;
			min-height: 210px;
			background: transparent;
			position:absolute;
			top:0;
			left:0;
		}
.bgBox1 .lineDiv .lineBox {width: 100px; height: 100px; position: relative; top: 39%;}
.bgBox1 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -15%}
.bgBox1 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 60%;
			display:block;
			border-top:1px solid black;
			border-right:1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 25%;
			z-index:2;}

.bgBox1 .boxLine{
			width:50px;
			height: 80%;
			max-height: 55%;
			border-right:1px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}

/*#section2*/
#section2 {width: 100%; height: 100%;}
.section2-2 {width: 100%; height: 50%;}
.bgBox2 {width: 50%; height: 100%; float: left; position: relative;}
.bgBox2 .h2Box {width: 85%; height: 100%; position: relative; float: left;}
.bgBox2 .h2Box h2 {font-size: 60px; text-align: right; position: relative; top: 7%; right: 5%;}
.bgBox2 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}

.bgBox2  .lineDiv .box-white{
			width:20px;
			height:20%;
			min-height: 210px;
			background: transparent;
			position:absolute;
			top:0;
			left:0;
		}
.bgBox2 .lineDiv .lineBox {width: 100px; height: 100px; position: relative; top: 13%;}
.bgBox2 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -13%}
.bgBox2  .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 70%;
			display:block;
			border-top:1px solid black;
			border-right:1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 5%;
            background: transparent;
			z-index:2;}

.bgBox2 .boxLine:nth-of-type(1){
			width: 50px;
			height: 100%;
			max-height: 100%;
			border-right:1px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}

.bgBox2 .boxLine{
			width:50px;
			height: 100%;
			max-height: 100%;
			border-right:1px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}

.conBox2 {width: 50%; height: 100%; float: left; background: black; color: #fff;}
.txtBox {padding: 3%; height: 100%; text-align: left; text-indent: 0; color: #fff;}
.txtBox h3 {color: #96fe00; font-size: 30px; font-weight: bold; margin-bottom: 3%;}
.txtBox h3:nth-of-type(1) {font-size: 35px;}
.txtBox h3:nth-of-type(4) {margin-top: 3%;}
.txtBox span {font-family: 'OSP-DIN'; font-size: 25px; color: #fff; margin-bottom: 3%;}
.txtBox p {font-family: 'Noto Sans Kr';}
.txtBox span {font-weight: 100; font-size: 27px;}
.txtBox h3 span:nth-of-type(1) {margin-left: 2%;}


.skillBox {padding: 5%; width: 100%; height: 100%;}
.skillBox p {font-size: 20px; color: black; text-indent: 0.5em; line-height: 30px;}
.pg_bar1 {width: 15%; height: auto; background: #96fe00; margin-bottom: 2%;}
.pg_bar2 {width: 15%; height: auto; background: #96fe00; margin-bottom: 2%;}
.pg_bar3 {width: 15%; height: auto; background: #96fe00; margin-bottom: 2%;}
.pg_bar4 {width: 15%; height: auto; background: #96fe00; margin-bottom: 2%;}
.pg_bar5 {width: 15%; height: auto; background: #96fe00; margin-bottom: 2%;}
.conBox2 .bar {position: relative;}
.conBox2 .bar span {position: absolute; top: 50%; right: 2%; transform: translateY(-50%); color: #000; font-size: 20px;}


/*#section3*/

.bgBox3 {float: right !important; width: 50%; height: 100% ; position: relative;}

.bgBox3 .h2Box {width: 85%; height: 100%; position: relative; float: right;}

.bgBox3 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}

.bgBox3 .h2Box .h2Div {
			box-sizing:border-box;
			position:relative;
            top: 16%; left: 3%;
            float: left;}

.bgBox3 .h2Box .h2Div h2:nth-of-type(1) {display: block; font-size: 120px; text-align: left;} 
.bgBox3 .h2Box .h2Div h2:nth-of-type(2) {display: none; font-size: 70px; text-align: left;}

 .bgBox3 .boxLine{
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:1px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
		}
.bgBox3 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%;}
.bgBox3 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; right: -10%; z-index: 5;}


.bgBox3 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:block;
            border-left: 1px solid black;
            border-top: 1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; left: 50%;
			z-index:2;}


.conBox3 {float: right !important; background: black;  width: 50%; height: 100%;}
.conBox3 .imgBox1 {width: 50%; height: 50%; background: url(../img/pf_th-01.png) center no-repeat; float: left; cursor: pointer;}
.conBox3 .imgBox2 {width: 50%; height: 50%; background: url(../img/pf-th-02.jpg) center no-repeat; float: left;cursor: pointer;}
.conBox3 .imgBox3 {width: 50%; height: 50%; background: url(../img/pf_th-03.png) center no-repeat; float: left;cursor: pointer;}
.conBox3 .imgBox4 {width: 50%; height: 50%; background: url(../img/pf_th-04.png) center no-repeat;
float: left;cursor: pointer;}

.conBox3 .imgBox1:hover {width: 50%; height: 50%; background: url(../img/pf_hv-01.png) center no-repeat; float: left;}
.conBox3 .imgBox2:hover {width: 50%; height: 50%; background: url(../img/pf-hv-02.jpg) center no-repeat; float: left;}
.conBox3 .imgBox3:hover {width: 50%; height: 50%; background: url(../img/pf_hv-03.png) center no-repeat; float: left;}
.conBox3 .imgBox4:hover {width: 50%; height: 50%; background: url(../img/pf_hv-04.png) center no-repeat;
float: left;}

.modal-wrap{
    position:fixed;
    width:100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    z-index:99999999;
    top:0;
    left:0;
    display:none;
    overflow: auto;
    overflow-y:scroll;
    -ms-overflow-style:none;
}
.modal-wrap::-webkit-scrollbar {display: none;}
/*
.modal{
    width:50%;
    height: 100%;
    top:0%;
    left:25%;
    position:relative;
    overflow: auto;
    overflow-y:scroll;
    -ms-overflow-style:none;
}
*/
.modal-wrap span{
    display:inline-block;
    font-size:40px;
    color:white;
    position:fixed;
    top:50px;
    right:50px;
    cursor:pointer;
    z-index: 99999;
}
.modal-wrap img {position: relative; left: 50%; transform: translateX(-50%); margin: 5% 0;}

/*#section4*/
.bgBox4 {width: 50%; height: 100% ;float: left; position: relative;}
.bgBox4 .h2Box {width: 85%; height: 100%; position: relative;float: left;}

.bgBox4 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}

.bgBox4 .h2Box .h2Div {
			box-sizing:border-box;
			position:relative;
            top: 15%; left: -3%;
            float: right;}

.bgBox4 .h2Box .h2Div h2:nth-of-type(1) {display: block; font-size: 120px; text-align: left;} 
.bgBox4 .h2Box .h2Div h2:nth-of-type(2) {display: none; font-size: 70px; text-align: left;}

 .bgBox4 .boxLine{
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:1px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
		}
.bgBox4 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%;}
.bgBox4 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; left: -5%; z-index: 5;}


.bgBox4 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:block;
            border-left: 0px solid black;
            border-top: 1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; right: 50%;
			z-index:2;}


.conBox4 {float: right; background: black;  width: 50%; height: 100%;}
.conBox4 .imgBox1 {width: 50%; height: 50%; background: url(../img/pf_th-05.png) center no-repeat; float: left;cursor: pointer;}
.conBox4 .imgBox2 {width: 50%; height: 50%; background: url(../img/pf_th-06.png) center no-repeat; float: left;cursor: pointer;}
.conBox4 .imgBox3 {width: 50%; height: 50%; background: url(../img/pf_th-07.png) center no-repeat;
float: left;cursor: pointer;}
.conBox4 .imgBox4 {width: 50%; height: 50%; background: url(../img/pf-th-08.jpg)no-repeat;
float: left;cursor: pointer;}

.conBox4 .imgBox1:hover {width: 50%; height: 50%; background: url(../img/pf_hv-05.png) center no-repeat; float: left;}
.conBox4 .imgBox2:hover {width: 50%; height: 50%; background: url(../img/pf_hv-06.png) center no-repeat; float: left;}
.conBox4 .imgBox3:hover {width: 50%; height: 50%; background: url(../img/pf_hv-07.png) center no-repeat; float: left;}
.conBox4 .imgBox4:hover {width: 50%; height: 50%; background: url(../img/pf-hv-08.jpg) no-repeat;
float: left;}


/*#section5*/

#section5 {position: relative;}
#section5 h2 {width: 50%; font-size: 70px; font-weight: bold; margin-bottom: 6%; padding: 5% 0 0 15%;}
#section5 .mockupBox {width: 100%; position: relative;}
#section5 .mockupBox a {display: block; width: 100%; height: 100%; position: relative;}
#section5 .mockupBox a span {width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 200px; color: #96fe00;}

#section5 p {font-size: 20px; vertical-align: bottom; text-indent: 1em;}
    
#section5 button {width: 15%; height: 5%; float: right; border: 1px solid black; font-size: 18px; line-height: 18px; text-align: center; margin: 2% 0 1% 1%; vertical-align: middle;}
#section5 button:hover {background: #000; color: #96fe00;}

.mockupBox h4 {font-size: 280px; color: #96fe00; text-align: center; position: relative; top: 25%;}
.conBox5 {width: 70%; height: 70%; margin: 4% auto;}
.conBox5 .mockupBox {width: 100%; height: 90%; background: url(../img/pf_th-09.png) center no-repeat; margin: auto;}
.conBox5 .mockupBox:hover {background: url(../img/pf_hv-09.png) center no-repeat; color:transparent; transition: 1s;}
.conBox5 .mockupBox:hover .title {opacity: 0; transition: 1s;}
.conBox5 h3 {vertical-align: bottom; font-size: 58px; margin: 1% 0; float: left;}
.conBox5 p {margin-top: 3%; float: left;}
.conBox5 p:nth-child(2) {display: none;}

.conBox6 {width: 70%; height: 70%; margin: 4% auto;}
.conBox6 .mockupBox {width: 100%; height: 90%; background: url(../img/pf_hv-tf.jpg) no-repeat; margin: auto;}
.conBox6 .mockupBox:hover {background: url(../img/pf_th-tf.jpg) no-repeat; transition: 1s;}
.conBox6 .mockupBox:hover .title {opacity: 0; transition: 1s;}
.conBox6 h3 {font-size: 58px; margin: 1% 0; float: left;}
.conBox6 p {margin-top: 3%; float: left;}

.conBox7 {width: 70%; height: 70%; margin: 4% auto;}
.conBox7 .mockupBox {width: 100%; height: 90%; background: url(../img/pf_th-11.jpg) center no-repeat; margin: auto;}
.conBox7 .mockupBox:hover {background: url(../img/pf_hv-11.PNG) center no-repeat; transition: 1s;}
.conBox7 .mockupBox:hover .title {opacity: 0; transition: 1s;}
.conBox7 h3 {font-size: 58px; margin: 1% 0; float: left;}
.conBox7 p {margin-top: 3%; float: left;}

.conBox8 {width: 70%; height: 70%; margin: 4% auto;}
.conBox8 .mockupBox {width: 100%; height: 90%; background: url(../img/pf-th-12.jpg) center no-repeat; margin: auto; transition: 1s;}
.conBox8 .mockupBox:hover .title {opacity: 0; transition: 1s;}
.conBox8 .mockupBox:hover {background: url(../img/pf-hv-12.jpg) center no-repeat;}
.conBox8 h3 {font-size: 58px; margin: 1% 0; float: left;}
.conBox8 p {margin-top: 3%; float: left;}


/*#section6*/
#section6:before {content: ""; display: block; clear: both;}

.contactBox {float: right; width: 50%; height: 100%; margin-top: 5%;}
.contactBox h2 {font-size: 60px; text-align: center; margin: 10% auto;}
.infoBox {width: 50%; margin: 13% auto;}
.infoBox img {width: 10%; height: 8%; float: left; margin-right: 2%;}
.infoBox p {font-size: 40px;}
.infoBox span {margin-right: 2%; font-weight: bold;}
.a_round {font-family: 'Noto Sans KR';}

input {font-family: 'Noto Sans KR'; color: #96fe00; line-height: 50px; width: 100%; height: 100%; text-indent: 10px;}
textarea {font-family: 'Noto Sans KR'; color: #96fe00; width: 100%; height: 100%;}
.dmBox {float: left; background: black; width: 50%; height: 100%; margin-top: 5%;}
.dmBox:after {display: none; content: ""; clear:both;}
.dmBox h2 {color: #96fe00; font-size: 60px; text-align: center; margin: 10% auto;}
.nameBox {border: 1px solid #96fe00; width: 60%; height: 50px; float: left; margin: 5% 0;}
.nameBox:nth-of-type(1) {width: 20%; margin-right: 2%; margin-left: 9%;}
.dmBox2 {border: 1px solid #96fe00; width: 82%; height: 330px; clear: both; margin: 5% auto;}
.send {width: 25%; height: 5%; font-family: 'OSP-DIN'; font-size: 35px; border: 1px solid #96fe00; color: #96fe00; float: right; margin-right: 9%; text-indent: 0;}
.send:hover {background: #96fe00; color: #000;}

[class*="col-"]{
    float: left;
}
.col-lg-1 {width: 8.33%;}
.col-lg-2 {width: 16.66%;}
.col-lg-3 {width: 25%;}
.col-lg-4 {width: 33.33%;}
.col-lg-5 {width: 41.66%;}
.col-lg-6 {width: 50%;}
.col-lg-7 {width: 58.33%;}
.col-lg-8 {width: 66.66%;}
.col-lg-9 {width: 75%;}
.col-lg-10 {width: 83.33%;}
.col-lg-11 {width: 91.66%;}
.col-lg-12 {width: 100%;}

@media screen and (max-width:1440px) {
.col-md-1 {width: 8.33%;}
.col-md-2 {width: 16.66%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33%;}
.col-md-5 {width: 41.66%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33%;}
.col-md-8 {width: 66.66%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33%;}
.col-md-11 {width: 91.66%;}
.col-md-12 {width: 100%;}  

* {
    margin: 0; padding: 0;
    text-decoration: none; color: inherit; 
    font-weight: inherit;
    font-size: inherit;
    box-sizing: border-box;
    background: none;
    border: none;
    }
button, a {cursor: pointer;}

html {width: 100%; height: 100%; min-height: 500px;}
body {font-family: 'OSP-DIN','Noto Sans KR',sans-serif; width: 100%; height: 100%; background: #96fe00;}
.section {width: 100%; height: 100%;}

/*#section1*/
.bgBox1 {width: 50%; height: 100%; float: left; position: relative;}
.conBox1 {width: 50%; height: 100%; background: url(../img/pf_th_pic.png) center no-repeat; float: left;}
.bgBox1 .h1Box {width: 85%; height: 100%; position: relative; float: left;}
.h1Box .h1Div {width:100%;
			height:100%;
			box-sizing:border-box;
			position:relative;
            top: 25%;
            right: 5%;
            float: right;}

h1 {font-size: 100px; text-align: right;}
.bgBox1 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}
.bgBox1 .lineDiv .box-white{
			width:20px;
			height:20%;
			min-height: 210px;
			background: transparent;
			position:absolute;
			top:0;
			left:0;
		}
.bgBox1 .lineDiv .lineBox {width: 100px; height: 100px; position: relative; top: 39%;}
.bgBox1 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -15%}
.bgBox1 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 60%;
			display:block;
			border-top:1px solid black;
			border-right:1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 25%;
			z-index:2;}

.bgBox1 .boxLine{
			width:50px;
			height: 80%;
			max-height: 55%;
			border-right:1px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}

/*#section2*/
#section2 {width: 100%; height: 100%;}
.section2-2 {width: 100%; height: 50%;}
.bgBox2 {width: 50%; height: 100%; float: left; position: relative;}
.bgBox2 .h2Box {width: 85%; height: 100%; position: relative; float: left;}
.bgBox2 .h2Box h2 {font-size: 55px; text-align: right; position: relative; top: 7%; right: 5%;}
.bgBox2 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}

.bgBox2  .lineDiv .box-white{
			width:20px;
			height:20%;
			min-height: 210px;
			background: transparent;
			position:absolute;
			top:0;
			left:0;
		}
.bgBox2 .lineDiv .lineBox {width: 100px; height: 100px; position: relative; top: 13%;}
.bgBox2 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -13%}
.bgBox2  .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 70%;
			display:block;
			border-top:1px solid black;
			border-right:1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 5%;
            background: transparent;
			z-index:2;}

.bgBox2 .boxLine:nth-of-type(1){
			width:50px;
			height: 100%;
			max-height: 100%;
			border-right:1px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}

.bgBox2 .boxLine{
			width:50px;
			height: 100%;
			max-height: 100%;
			border-right:1px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}


.conBox2 {width: 50%; height: 100%; float: left; background: black; color: white;}
.txtBox {padding: 5%; height: 100%; text-align: left; text-indent: 0; color: #fff;}
.txtBox h3 {color: #96fe00; font-size: 30px; font-weight: bold; margin-bottom: 3%;}
.txtBox h3:nth-of-type(1) {font-size: 35px;}
.txtBox h3:nth-of-type(4) {margin-top: 3%;}
.txtBox span {font-family: 'OSP-DIN'; font-size: 25px; color: #fff; margin-bottom: 3%;}
.txtBox p {font-family: 'Noto Sans Kr'; margin-bottom: 3%;}
.txtBox h3 span:nth-of-type(1) {margin-left: 2%; font-weight: 100; font-size: 27px;}

.skillBox {width: 100%; padding: 10%  5%;}
.skillBox p {font-size: 20px; color: black; text-indent: 0.5em; line-height: 30px;}
.pg_bar1 {width: 100%; height: 8%; background: #96fe00; margin-bottom: 2%;}
.pg_bar2 {width: 100%; height: 8%; background: #96fe00; margin-bottom: 2%;}
.pg_bar3 {width: 100%; height: 8%; background: #96fe00; margin-bottom: 2%;}
.pg_bar4 {width: 100%; height: 8%; background: #96fe00; margin-bottom: 2%;}
.pg_bar5 {width: 100%; height: 8%; background: #96fe00; margin-bottom: 2%;}

/*#section3*/

.bgBox3 {float: right !important; width: 50%; height: 100% ; position: relative;}

.bgBox3 .h2Box {width: 85%; height: 100%; position: relative; float: right;}

.bgBox3 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}

.bgBox3 .h2Box .h2Div {
			box-sizing:border-box;
			position:relative;
            top: 16%; left: 3%;
            float: left;}

.bgBox3 .h2Box .h2Div h2:nth-of-type(1) {display: block; font-size: 100px; text-align: left;} 
.bgBox3 .h2Box .h2Div h2:nth-of-type(2) {display: none; font-size: 70px; text-align: left;}

 .bgBox3 .boxLine{
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:1px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
		}
.bgBox3 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%;}
.bgBox3 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; right: -10%; z-index: 5;}


.bgBox3 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:block;
            border-left: 1px solid black;
            border-top: 1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; left: 50%;
			z-index:2;}


.conBox3 {float: right !important; background: black;  width: 50%; height: 100%;}
.conBox3 .imgBox1 {width: 50%; height: 50%; background: url(../img/pf_th-01.png) center no-repeat; float: left;}
.conBox3 .imgBox2 {width: 50%; height: 50%; background: url(../img/pf_th-02.png) center no-repeat; float: left;}
.conBox3 .imgBox3 {width: 50%; height: 50%; background: url(../img/pf_th-03.png) center no-repeat; float: left;}
.conBox3 .imgBox4 {width: 50%; height: 50%; background: url(../img/pf_th-04.png) center no-repeat;
float: left;}

.conBox3 .imgBox1:hover {width: 50%; height: 50%; background: url(../img/pf_hv-01.png) center no-repeat; float: left;}
.conBox3 .imgBox2:hover {width: 50%; height: 50%; background: url(../img/pf_hv-02.png) center no-repeat; float: left;}
.conBox3 .imgBox3:hover {width: 50%; height: 50%; background: url(../img/pf_hv-03.png) center no-repeat; float: left;}
.conBox3 .imgBox4:hover {width: 50%; height: 50%; background: url(../img/pf_hv-04.png) center no-repeat;
float: left;}


/*#section4*/
.bgBox4 {width: 50%; height: 100% ;float: left; position: relative;}
.bgBox4 .h2Box {width: 85%; height: 100%; position: relative;float: left;}

.bgBox4 .lineDiv {width: 15%; height: 100%; position: relative; float: left;}

.bgBox4 .h2Box .h2Div {
			box-sizing:border-box;
			position:relative;
            top: 15%; left: -3%;
            float: right;}

.bgBox4 .h2Box .h2Div h2:nth-of-type(1) {display: block; font-size: 100px; text-align: left;} 
.bgBox4 .h2Box .h2Div h2:nth-of-type(2) {display: none; font-size: 70px; text-align: left;}

 .bgBox4 .boxLine{
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:1px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
		}
.bgBox4 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%;}
.bgBox4 .lineDiv .lineBox .lineSpan:before {content: ""; display: block; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; left: -5%; z-index: 5;}


.bgBox4 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:block;
            border-left: 0px solid black;
            border-top: 1px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; right: 50%;
			z-index:2;}


.conBox4 {float: right; background: black;  width: 50%; height: 100%;}
.conBox4 .imgBox1 {width: 50%; height: 50%; background: url(../img/pf_th-05.png) center no-repeat; float: left;}
.conBox4 .imgBox2 {width: 50%; height: 50%; background: url(../img/pf_th-06.png) center no-repeat; float: left;}
.conBox4 .imgBox3 {width: 50%; height: 50%; background: url(../img/pf_th-07.png) center no-repeat;
float: left;}
.conBox4 .imgBox4 {width: 50%; height: 50%; background: url(../img/pf-th-08.jpg) center no-repeat;
float: left;}

.conBox4 .imgBox1:hover {width: 50%; height: 50%; background: url(../img/pf_hv-05.png) center no-repeat; float: left;}
.conBox4 .imgBox2:hover {width: 50%; height: 50%; background: url(../img/pf_hv-06.png) center no-repeat; float: left;}
.conBox4 .imgBox3:hover {width: 50%; height: 50%; background: url(../img/pf_hv-07.png) center no-repeat; float: left;}
.conBox4 .imgBox4:hover {width: 50%; height: 50%; background: url(../img/pf-hv-08.jpg) center no-repeat;
float: left;}


/*#section5*/

#section5 {position: relative;}
#section5 h2 {width: 50%; font-size: 50px; font-weight: bold; margin-bottom: 6%; padding: 5% 0 0 15%;}
#section5 .mockupBox {width: 100%; position: relative;}
#section5 .mockupBox a {display: block; width: 100%; height: 100%; position: relative;}
#section5 .mockupBox a span {width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 120px; color: #96fe00;}

#section5 p {font-size: 17px; vertical-align: middle; text-indent: 0.5em;}
    
#section5 button {width: 13%; height: 5%; float: right; border: 1px solid black; font-size: 15px; line-height: 18px; text-align: center; margin: 2% 0 1% 1%; vertical-align: middle;}

.conBox5 {width: 80%; height: 50%; margin: 4% auto;}
.conBox5 .mockupBox {width: 100%; height: 90%; background: url(../img/pf_th-09.png) center no-repeat; margin: auto;}
.conBox5 .mockupBox:hover {background: url(../img/pf_hv-09.png) center no-repeat; color:transparent;}
.conBox5 h3 {vertical-align: bottom; font-size: 43px; margin: 1% 0; float: left;}
.conBox5 p {margin-top: 3%; float: left;}
.conBox5 p:nth-child(2) {display: none;}

.conBox6 {width: 80%; height: 50%; margin: 4% auto;}
.conBox6 .mockupBox {width: 100%; height: 90%; background: url(../img/pf_hv-tf.jpg) center no-repeat; margin: auto;}
.conBox6 .mockupBox:hover {background: url(../img/pf_th-tf.jpg) center no-repeat;}
.conBox6 h3 {font-size: 43px; margin: 1% 0; float: left;}
.conBox6 p {margin-top: 3%; float: left;}

.conBox7 {width: 80%; height: 50%; margin: 4% auto;}
.conBox7 .mockupBox {width: 100%; height: 90%; background: url(../img/pf_th-11.jpg) center no-repeat; margin: auto;}
.conBox7 .mockupBox:hover {background: url(../img/pf_hv-11.png) center no-repeat;}
.conBox7 h3 {font-size: 43px; margin: 1% 0; float: left;}
.conBox7 p {margin-top: 3%; float: left;}

.conBox8 {width: 80%; height: 40%; margin: 4% auto;}
.conBox8 .mockupBox {width: 100%; height: 90%; background: url(../img/pf-th-12.jpg) center no-repeat; margin: auto;}
.conBox8 .mockupBox:hover {background: url(../img/pf-hv-12.jpg) center no-repeat;}
.conBox8 h3 {font-size: 43px; margin: 1% 0; float: left;}
.conBox8 p {margin-top: 3%; float: left;}

/*#section6*/
#section6:before {content: ""; display: block; clear: both;}

.contactBox {float: right; width: 50%; height: 100%; margin-top: 5%;}
.contactBox h2 {font-size: 60px; text-align: center; margin: 10% auto;}
.infoBox {width: 50%; margin: 13% auto;}
.infoBox img {width: 20%; height: 8%; float: left; margin-right: 2%;}
.infoBox p {font-size: 30px;}
.infoBox span {margin-right: 2%; font-weight: bold;}

.dmBox {float: left; background: black; width: 50%; height: 100%; margin-top: 5%;}
.dmBox:after {display: none; content: ""; clear:both;}
.dmBox h2 {color: #96fe00; font-size: 60px; text-align: center; margin: 10% auto;}
.nameBox {border: 1px solid #96fe00; width: 40%; height: 7%; float: left; margin: 5% 0;}
.nameBox:nth-of-type(1) {margin-right: 2%; margin-left: 9%;}
.dmBox2 {border: 1px solid #96fe00; width: 82%; height: 40%; clear: both; margin: 5% auto;}
.send {width: 25%; height: 5%; font-family: 'OSP-DIN'; font-size: 35px; border: 1px solid #96fe00; color: #96fe00; float: right; margin-right: 9%; text-align: center;}
}

@media screen and (max-width:1024px) {
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}  
    
    /*#section1*/

.bgBox1 {width: 100%; height: 40%;}
.conBox1 {width: 100%; height: 100%; background: url(../img/pf_th_pic.png) no-repeat; float: left;}
h1 {font-size: 80px; text-align: left;}
h1:after {content: ""; display: none; width: 15px; height: 15px; background: transparent; position: absolute; right: -5%; top: 50%;}
.bgBox1 .h1Div {height: auto; position: relative; top:50%; left: 5%; transform: translateY(-50%);}
.bgBox1 .lineDiv {width: 15%; height: 100%; float: left; display: none;}
.bgBox1 .lineDiv .lineBox {
   width: 60%; height: 100%;
    max-height: 40%;
    position: relative;
        top: 46.3%; right: 10%;
        border-width: 0 0 0 0;
        border-color: #000;
        border-style: solid;}
    
/*#section2*/
#section2 {width: 100%; height: 100%;}
.section2-1, .section2-2 {width: 100%; height: 100%;}
.bgBox2 {width: 100%; height: 20%; position: relative;}
.bgBox2 .h2Box {position: relative; top: 25%; left: 10%;}
.bgBox2 .h2Box h2 {font-size: 60px; text-align: left;}
 .bgBox2 .lineDiv .lineBox {display: none;}
.bgBox2 .lineDiv .lineBox .lineSpan:before {content: ""; display: none; width: 15px; height: 15px; background: #000; position: absolute; top: -13%}
.bgBox2  .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 70%;
			display:block;
			border-top:0px solid black;
			border-right:0px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 5%;
            background: transparent;
			z-index:2;}

.bgBox2 .boxLine{
			width:50px;
			height: 80%;
			max-height: 80%;
			border-right:0px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}


.conBox2 {width: 100%; height: auto; float: left; background: black;}
.txtBox {padding: 5%; text-align: left; text-indent: 0; color: #fff;}
.txtBox h3 {color: #96fe00; font-size: 30px; font-weight: bold;}
.txtBox h3:nth-of-type(1) {font-size: 35px;}
.txtBox span {font-size: 25px; color: #fff;}
.txtBox h3 span:nth-of-type(1) {margin-left: 2%;}
    

.skillBox {padding: 5%; width: 100%; position: relative; top: 25%;}
.skillBox p {font-size: 20px; color: black;}
.pg_bar1 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar2 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar3 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar4 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar5 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}    

/*section3*/
.modal-wrap{
    position:fixed;
    width:100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    z-index:99999999;
    top:0;
    left:0;
    display:none;
    overflow: auto;
    overflow-y:scroll;
    -ms-overflow-style:none;
}
.modal-wrap::-webkit-scrollbar {display: none;}
/*
.modal{
    width:50%;
    height: 100%;
    top:0%;
    left:25%;
    position:relative;
    overflow: auto;
    overflow-y:scroll;
    -ms-overflow-style:none;
}
*/
.modal-wrap span{
    display:inline-block;
    font-size:40px;
    color:white;
    position:fixed;
    top:50px;
    right:50px;
    cursor:pointer;
    z-index: 99999;
}
.modal-wrap img {position: relative; left: 50%; transform: translateX(-50%); margin: 5% 0; width: 80%;}
.bgBox3 {width: 100%; height: 30%;}
.conBox3 {width: 100%; height: 70%;}
.bgBox3 .lineDiv {display: none;}
.bgBox3 .h2Box {float: left;}
.bgBox3 .h2Box .h2Div {
			box-sizing:border-box;
			position:relative;
            top: 35%; right: 5%;
}
    
.bgBox3 .h2Box .h2Div h2:nth-of-type(1) {display: none; font-size: 120px; text-align: left;} 
.bgBox3 .h2Box .h2Div h2:nth-of-type(2) {display: block; font-size: 60px; text-align: left; position: relative; left: 5%;}
    
 .bgBox3 .boxLine{
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:0px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
		}
.bgBox3 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%; display: none;}
.bgBox3 .lineDiv .lineBox .lineSpan:before {content: ""; display: none; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; right: -10%; z-index: 5;}


.bgBox3 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:block;
            border-left: 0px solid black;
            border-top: 0px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; left: 50%;
			z-index:2;}
    
/*section4*/
.bgBox4 {width: 100%; height: 30%;}
.conBox4 {width: 100%; height: 70%;}
    
.bgBox4 .h2Box .h2Div h2:nth-of-type(1) {display: none; font-size: 120px; text-align: left;} 
.bgBox4 .h2Box .h2Div h2:nth-of-type(2) {display: block; font-size: 60px; text-align: left;}
    
.bgBox4 .lineDiv {width: 15%; height: 100%; position: relative; display: none;}

.bgBox4 .h2Box .h2Div {
            float: left;
			box-sizing:border-box;
			position:relative;
            top: 35%; left: 5%;
            clear: both;}
    
 .bgBox4 .boxLine {
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:0px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
            display: none;
		}
.bgBox4 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%; display: none;}
.bgBox4 .lineDiv .lineBox .lineSpan:before {content: ""; display: none; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; left: -5%; z-index: 5;}


.bgBox4 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:none;
            border-left: 0px solid black;
            border-top: 0px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; right: 0%;
			z-index:2;}
    
/*#section5*/
#section5 {position: relative; width: 100%;}
#section5 h2 {font-size: 50px; font-weight: bold; position: relative; margin-bottom: 6%;}
#section5 .mockupBox {width: 100%; position: relative;}
#section5 .mockupBox a {display: block; width: 100%; height: 100%; position: relative;}
#section5 .mockupBox a span {width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 100px; color: #96fe00;}
#section5 p {clear: both; font-size: 14px; margin: 0;  text-indent: 0;}
    
#section5 button {width: 25%; height: 7%; float: right; border: 1px solid black; font-size: 15px; line-height: 18px; text-align: center; margin-top: 0; vertical-align: bottom;}
    
.conBox5 {width: 80%; height: 40%; margin: 2% auto;}
.conBox5 .mockupBox {width: 100%; height: 70%; background: url(../img/pf_th-09.png) center no-repeat; margin: auto;}
.conBox5 h3 {vertical-align: bottom; font-size: 35px; float: left;}
.conBox5 p {clear: both; font-size: 15px; margin: 0;}

.conBox6 {width: 80%; height: 40%; margin: 2% auto;}
.conBox6 .mockupBox {width: 100%; height: 70%; background: url(../img/pf_th-10.png) center no-repeat; margin: auto;}
#section5 .conBox6 .mockupBox a span {font-size: 77px; margin: 0 auto;}
.conBox6 h3 {font-size: 35px; margin: 1% 0; float: left;}
.conBox6 p {margin: 3%; float: left; font-size: 15px;}

.conBox7 {width: 80%; height: 40%; margin: 2% auto;}
.conBox7 .mockupBox {width: 100%; height: 70%; background: url(../img/pf_th-11.jpg) center no-repeat; margin: auto;}
.conBox7 h3 {font-size: 35x; margin: 1% 0; float: left;}
.conBox7 p {margin-top: 3%; float: left;}

.conBox8 {clear: both; width: 80%; height: 40%; margin: 2% auto;}
.conBox8 .mockupBox {width: 100%; height: 70%; background: url(../img/pf-th-12.jpg) center no-repeat; margin: auto;}
.conBox8 h3 {font-size: 35px; margin: 1% 0; float: left;}
.conBox8 p {margin-top: 3%; float: left;}

#section6:before {content: ""; display: block; clear: both;}

.contactBox {clear: both; width: 100%; height: 100%; margin-top: 5%;}
.contactBox h2 {font-size: 60px; text-align: center; margin-top: 15%; margin-bottom: 15%;}
.infoBox {width: 50%; margin: 8% auto;}
.infoBox img {width: 15%; height: 10%; float: left; margin-right: 2%;}
.infoBox p {font-size: 30px;}
.infoBox span {margin-right: 2%; font-weight: bold;}

.dmBox {clear: both; background: black; width: 100%; height: 100%; margin-top: 5%;}
.dmBox:after {display: block; content: ""; clear:both;}
.dmBox h2 {color: #96fe00; font-size: 60px; text-align: center; margin-top: 13%;}
.nameBox {border: 1px solid #96fe00; width: 40%; height: 7%; float: left; margin: 5% 0;}
.nameBox:nth-of-type(1) {margin-right: 2%; margin-left: 9%;}
.dmBox2 {border: 1px solid #96fe00; width: 82%; height: 40%; clear: both; margin: 5% auto;}
.send {font-family: 'OSP-DIN'; font-size: 25px; border: 1px solid #96fe00; color: #96fe00;
width: 13%; height: 7%; text-align: center;}
    
}

@media screen and (max-width: 420px) {
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}  
    
        /*#section1*/

.bgBox1 {width: 100%; height: 25%;}
.conBox1 {width: 100%; height: 75%; background: url(../img/pf_th_pic.png) center no-repeat; float: left;}
h1 {font-size: 50px; text-align: left;}
h1:after {content: ""; display: none; width: 15px; height: 15px; background: transparent; position: absolute; right: -5%; top: 50%;}
.bgBox1 .h1Div {height: auto; position: relative; top:50%; left: 5%; transform: translateY(-50%);}
.bgBox1 .lineDiv {width: 15%; height: 100%; float: left; display: none;}
.bgBox1 .lineDiv .lineBox {
   width: 60%; height: 100%;
    max-height: 40%;
    position: relative;
        top: 46.3%; right: 10%;
        border-width: 0 0 0 0;
        border-color: #000;
        border-style: solid;
    display: none;}
    
/*#section2*/
#section2 {width: 100%; height: 100%;}
.section2-2 {width: 100%; height: 50%;}
.bgBox2 {width: 100%; height: 30%; position: relative;}
.bgBox2 .h2Box {position: relative; top: 25%; left: 10%;}
.bgBox2 .h2Box h2 {font-size: 40px; text-align: left;}
 .bgBox2 .lineDiv .lineBox {display: none;}
.bgBox2 .lineDiv .lineBox .lineSpan:before {content: ""; display: none; width: 15px; height: 15px; background: #000; position: absolute; top: -13%}
.bgBox2  .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 70%;
			display:block;
			border-top:0px solid black;
			border-right:0px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 5%;
            background: transparent;
			z-index:2;}

.bgBox2 .boxLine{
			width:50px;
			height: 80%;
			max-height: 80%;
			border-right:0px solid black;
			bottom:0;
			position:absolute;
			left:0;
			box-sizing:border-box;
			z-index:-1;
		}


.conBox2 {width: 100%; height: auto; float: left; background: black;}
.txtBox {padding: 5%; text-align: left; text-indent: 0; color: #fff;}
.txtBox h3 {color: #96fe00; font-size: 30px; font-weight: bold;}
.txtBox h3:nth-of-type(1) {font-size: 35px;}
.txtBox span {font-size: 25px; color: #fff; margin: }
.txtBox h3 span:nth-of-type(1) {margin-left: 2%;}
    

.skillBox {padding: 5%; width: 100%; position: relative; top: 25%;}
.skillBox p {font-size: 20px; color: black;}
.pg_bar1 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar2 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar3 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar4 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}
.pg_bar5 {width: 100%; height: 7%; background: #96fe00; margin-bottom: 2%;}    

/*section3*/

.bgBox3 {width: 100%; height: 17%;}
.conBox3 {width: 100%; height: 83%;}
.bgBox3 .lineDiv {display: none;}
.bgBox3 .h2Box {float: left;}
.bgBox3 .h2Box .h2Div {
			box-sizing:border-box;
			position:relative;
            top: 35%; right: 5%;
}
    
.bgBox3 .h2Box .h2Div h2:nth-of-type(1) {display: none; font-size: 120px; text-align: left;} 
.bgBox3 .h2Box .h2Div h2:nth-of-type(2) {display: block; font-size: 40px; text-align: left; position: relative; left: 5%;}
    
 .bgBox3 .boxLine{
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:0px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
		}
.bgBox3 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%; display: none;}
.bgBox3 .lineDiv .lineBox .lineSpan:before {content: ""; display: none; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; right: -10%; z-index: 5;}


.bgBox3 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:block;
            border-left: 0px solid black;
            border-top: 0px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; left: 50%;
			z-index:2;}
    
/*section4*/
.bgBox4 {width: 100%; height: 17%;}
.conBox4 {width: 100%; height: 83%;}
    
.bgBox4 .h2Box .h2Div h2:nth-of-type(1) {display: none; font-size: 120px; text-align: left;} 
.bgBox4 .h2Box .h2Div h2:nth-of-type(2) {display: block; font-size: 40px; text-align: left;}
    
.bgBox4 .lineDiv {width: 15%; height: 100%; position: relative; display: none;}

.bgBox4 .h2Box .h2Div {
            float: left;
			box-sizing:border-box;
			position:relative;
            top: 35%; left: 5%;
            clear: both;}
    
 .bgBox4 .boxLine {
			width: 50%;
			height: 100%;
			max-height: 100%;
			border-left:0px solid black;
            border-right: 0px;
			bottom:0;
			position:absolute;
			right: 0;
			box-sizing:border-box;
			z-index:-1;
            display: none;
		}
.bgBox4 .lineDiv .lineBox {width: 100%; height: 100px; position: relative; top: 30%; display: none;}
.bgBox4 .lineDiv .lineBox .lineSpan:before {content: ""; display: none; width: 15px; height: 15px; background: #000; position: absolute; top: -8%; left: -5%; z-index: 5;}


.bgBox4 .lineDiv .lineBox .lineSpan {			
            width: 50%;
			height: 90%;
			display:none;
            border-left: 0px solid black;
            border-top: 0px solid black;
			box-sizing:border-box;
			position: absolute;
            top: 15%; right: 0%;
			z-index:2;}
    
/*#section5*/
#section5 {position: relative; width: 100%;}
#section5 h2 {font-size: 40px; font-weight: bold; position: relative; margin-bottom: 6%;}
#section5 .mockupBox {width: 100%; position: relative;}
#section5 .mockupBox a {display: block; width: 100%; height: 100%; position: relative;}
#section5 .mockupBox a span {width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 60px; color: #96fe00;}
#section5 p {clear: both; font-size: 14px; margin: 0;  text-indent: 0;}
    
#section5 button {width: 20%; height: 7%; float: right; border: 1px solid black; font-size: 12px; line-height: 18px; text-align: center; margin-top: 0; vertical-align: bottom;}
    
.conBox5 {width: 80%; height: 40%; margin: 2% auto;}
.conBox5 .mockupBox {width: 100%; height: 60%; background: url(../img/pf_th-09.png) center no-repeat; margin: auto;}
.conBox5 h3 {vertical-align: bottom; font-size: 35px; float: left;}
.conBox5 p {clear: both; font-size: 15px; margin: 0;}

.conBox6 {width: 80%; height: 40%; margin: 2% auto;}
.conBox6 .mockupBox {width: 100%; height: 60%; background: url(../img/pf_th-10.png) center no-repeat; margin: auto;}
#section5 .conBox6 .mockupBox a span {font-size: 50px; margin: 0 auto;}
.conBox6 h3 {font-size: 35px; margin: 1% 0; float: left;}
.conBox6 p {margin: 3%; float: left; font-size: 15px;}

.conBox7 {width: 80%; height: 40%; margin: 2% auto;}
.conBox7 .mockupBox {width: 100%; height: 60%; background: url(../img/pf_th-11.jpg) center no-repeat; margin: auto;}
.conBox7 h3 {font-size: 35x; margin: 1% 0; float: left;}
.conBox7 p {margin-top: 3%; float: left;}

.conBox8 {clear: both; width: 80%; height: 40%; margin: 2% auto;}
.conBox8 .mockupBox {width: 100%; height: 60%; background: url(../img/pf_th-12.png) center no-repeat; margin: auto;}
.conBox8 h3 {font-size: 35px; margin: 1% 0; float: left;}
.conBox8 p {margin-top: 3%; float: left;}

#section6:before {content: ""; display: block; clear: both;}

.contactBox {clear: both; width: 100%; height: 100%; margin-top: 5%;}
.contactBox h2 {font-size: 40px; text-align: center; margin-top: 15%; margin-bottom: 15%;}
.infoBox {width: 50%; margin: 8% auto;}
.infoBox img {width: 15%; height: 10%; float: left; margin-right: 2%;}
.infoBox p {font-size: 30px;}
.infoBox span:nth-of-type(1) {margin-right: 2%; font-weight: bold;}
.a_round {font-family: 'Noto Sans KR';}

.dmBox {clear: both; background: black; width: 100%; height: 60%; margin-top: 5%;}
.dmBox:after {display: block; content: ""; clear:both;}
.dmBox h2 {color: #96fe00; font-size: 40px; text-align: center; margin-top: 13%;}
.nameBox {border: 1px solid #96fe00; width: 40%; height: 7%; float: left; margin: 5% 0;}
.nameBox:nth-of-type(1) {margin-right: 2%; margin-left: 9%;}
.dmBox2 {border: 1px solid #96fe00; width: 82%; height: 40%; clear: both; margin: 5% auto;}
.send {font-family: 'OSP-DIN'; font-size: 20px; border: 1px solid #96fe00; color: #96fe00;
width: 13%; height: 7%; text-align: center;}
}