*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top; max-width: 100%; height: auto;}
/**/
html, body {}
.wrap {width: 100%; max-width: 1200px; position: relative; margin: 0 auto;}
.wrap:after, ul:after {clear: both; content: ""; display: block;}

@media screen and (max-width : 768px){
    .pc {display: none !important;}
    
    .wrap {box-sizing: border-box; padding: 0 30px;}
    
}
@media screen and (min-width : 769px){
    .mob {display: none !important;}
}

/**/
.pf_visual {height: 100vh; position: relative; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}

.pf_visual .videobox {position: relative; height: 100vh; background: url(../img/brain_visual.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
.pf_visual .videobox:before {background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; z-index: -1;}

.pf_visual .textbox {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center;}
.pf_visual .wrap {height: 100%;}
.pf_visual dl {display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; height: 100%; text-align: center;}
.pf_visual dl dt {font-size: 20px;}
.pf_visual dl dd {font-size: 60px; font-weight: bold; margin-top: 20px; line-height: 1.2;}

@media screen and (max-width:768px){
    .pf_visual dl dd {font-size: 25px;}
}

/**/
.brain_01 {background: #fcca37; padding: 100px 0 180px; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}
.brain_01 dl {color: #fff; position: relative; z-index: 5; line-height: 1.3;}
.brain_01 dl dt {font-size: 40px; font-family: 'Poppins', sans-serif; font-weight: 500; margin-bottom: 40px;}
.brain_01 dl dd:nth-of-type(1) {margin-bottom: 30px; font-size: 25px;}
.brain_01 dl dd:nth-of-type(2) {font-size: 18px; margin-bottom: 50px;}
.brain_01 dl dd a {display: inline-block; width: 180px; height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; box-sizing: border-box; padding-right: 20px; background-image: url(../img/brain_arrow.png); background-position: 90% center; background-repeat: no-repeat;}

@media screen and (max-width: 768px){
    .brain_01 {background: #fcca37; padding: 50px 0 50px;}
    .brain_01 dl {text-align: center;}
    .brain_01 dl dt {font-size: 30px; margin-bottom: 10px;}
    .brain_01 dl dd:nth-of-type(1) {margin-bottom: 20px; font-size: 14px;}
    .brain_01 dl dd:nth-of-type(2) {font-size: 10px;}
}

/**/

.brain_02 {position: relative; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}
.brain_02 figure {position: absolute; right: 0; top: -50%; right: 5%; box-sizing: border-box; margin-left: 50.5%;}
.brain_02 img {width: 100%;}


@media screen and (max-width:768px){
    
    .brain_02 img {width: auto;}
}

/**/

.brain_03 {background: #2c2c2c; padding-bottom: 100px; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}
.brain_03 h1.title {text-align: center; color: #fff; font-size: 40px; font-weight: 600; font-family: 'Poppins', sans-serif; padding: 90px 0 70px;}

.brain_03 ul li {width: calc(100%/3 - 28%/3); float: left; padding-right: 14%; position: relative; z-index: 5;}
.brain_03 ul li:last-child {padding-right: 0;}
.brain_03 ul li:last-child:after {display: none;}
.brain_03 ul li:after { content: ""; width: 37%; position: absolute; right: 0; height: 100%; background-image: url(../img/plus.png); top: 0; background-repeat: no-repeat; background-position: center center;}

.brain_03 ul li .own {width: 100%; background: #fff; border-radius: 100%; position: relative;}
.brain_03 ul li .own:after {content: ""; display: block; padding-bottom: 100%;}
.brain_03 ul li .own p {position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width: 100%; font-weight: 600; font-family: 'Poppins', sans-serif; color: #fff; font-size: 10px;}

.brain_03 ul li:nth-of-type(2) .own {background: #fcca37;}
.brain_03 ul li:nth-of-type(3) .own {background: #000;}

.brain_03 figure {text-align: center; margin-top: 70px; position: relative; box-sizing: border-box; padding: 0 26%;}
.brain_03 figure:before {content: ""; position: absolute; width: 1px; height: 100%; left: 50%; transform: translateX(-50%); background: #969696; top: -100%;}

@media screen and (max-width:768px){
    .brain_03 {padding-bottom: 60px;}
    .brain_03 h1.title {font-size: 20px; padding: 50px 0;}
}


/**/

.brain_04 {background: #000; padding-top: 288px; padding-bottom: 177px; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}

.brain_04 .box1 {position: relative; display: inline-block; left: 10%;}
.brain_04 .box1 figure {position: relative;}
.brain_04 .box1 dl {color: #fff; font-size: 100px; line-height: 1; font-family: 'Poppins', sans-serif; position: absolute; bottom: -100px; right: -25%;}
.brain_04 .box1 dl dt {font-weight: 600;}

.brain_04 .box2 {padding-top: 350px; text-align: right; position: relative; right: 5%;}

.brain_04 .box3 {position: relative; top: -10em; left: 5%;}

.brain_04 .box4 {text-align: right; padding-bottom: 450px;}

.brain_04 .box5 {max-height: 60em;}
.brain_04 .box5 .title {color: #fff; font-size: 70px;}
.brain_04 .box5 .img01 {text-align: right; position: relative; top: -10em; right: -3em;}
.brain_04 .box5 .img02 {position: relative; top: -20em; left: -3em;}

.brain_04 .box6 {padding-top: 360px;}
.brain_04 .box6:after {clear: both; content: ""; display: block;}
.brain_04 .box6 ul {float: left; width: 50%;}

.brain_04 .box6 ul:nth-of-type(1) li:nth-of-type(1) {margin-bottom: 100px; box-sizing: border-box; padding-left: 10%;}
.brain_04 .box6 ul:nth-of-type(1) li:nth-of-type(2) {box-sizing: border-box; padding-left: 30%;}

.brain_04 .box6 ul:nth-of-type(2) li:nth-of-type(1) {margin-top: 170px;}
.brain_04 .box6 ul:nth-of-type(2) li:nth-of-type(2) {color: #fff; margin-top: 130px; box-sizing: border-box; padding-left: 10%;}
.brain_04 .box6 ul:nth-of-type(2) li:nth-of-type(2) dl dt {margin-bottom: 20px; font-size: 20px; font-weight: bold;}
.brain_04 .box6 ul:nth-of-type(2) li:nth-of-type(2) dl dd {font-size: 16px; line-height: 1.3;}

.brain_04 .m_txtbox {text-align: center; color: #fff; word-break: keep-all; margin-top: 100px;}
.brain_04 .m_txtbox dl dt {font-size: 17px; font-weight: bold; margin-bottom: 20px;}
.brain_04 .m_txtbox dl dd {font-size: 13px;}



@media screen and (max-width:768px){
    .brain_04 {padding: 150px 30px; box-sizing: border-box;}
    .brain_04 .box1 {left: auto; position: relative;}
    .brain_04 .box1 figure {box-sizing: border-box; padding-right: 20%;}
    .brain_04 .box1 dl {font-size: 25px; bottom: -20px; right: -20px;}
    
    .brain_04 .box2 {padding-top: 80px; position: static; box-sizing: border-box; padding-left: 20%; margin-bottom: 40px;}
    
    .brain_04 .box3 {position: static; box-sizing: border-box; padding-right: 20%; margin-bottom: 40px;}
    
    .brain_04 .box4 {box-sizing: border-box; padding-left: 20%; padding-bottom: 150px;}
    
    .brain_04 .box5 {max-height: 60em; position: relative; padding-bottom: 50px;}
    .brain_04 .box5 .title {color: #fff; font-size: 30px; text-align: center;}
    .brain_04 .box5 .img01 { position: relative; text-align: center; top: auto; left: auto; right: auto; z-index: 2;}
    .brain_04 .box5 .img02 {position: absolute; bottom: 0; top: auto; left: auto; box-sizing: border-box; padding-right: 10%;}
    
    
    .brain_04 .box6 {padding-top: 150px;}
    .brain_04 .box6 ul {float: left; width: calc(50% - 25px);}
    .brain_04 .box6 ul:nth-of-type(1) {margin-right: 50px;}

    .brain_04 .box6 ul:nth-of-type(1) li:nth-of-type(1) {margin-bottom: 50px; padding-left: 0;}
    .brain_04 .box6 ul:nth-of-type(1) li:nth-of-type(2) {padding-left: 0;}
    
}

/**/

.brain_05 {height: 1050px; position: relative; overflow: hidden; background: #fff; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}
.brain_05 figure {position: absolute; top: -50px; right: -130px;}

.brain_05 .textbox {padding-top: 35em; display: inline-block; position: relative; left: -130px;}
.brain_05 .textbox dl {line-height: 1;}
.brain_05 .textbox dl dt {font-size: 90px; font-weight: bold; font-family: 'Poppins', sans-serif;}
.brain_05 .textbox dl dd {font-size: 61px; font-family: 'Poppins', sans-serif;}
.brain_05 .textbox p {text-align: right; font-family: 'Poppins', sans-serif; color: #333333; font-size: 40px; margin-top: 30px;}

@media screen and (max-width:768px){
    
    .brain_05 {height: auto; overflow:visible;}
    .brain_05 figure {position: relative; right: auto;}

    .brain_05 .textbox {padding-top: 0; position: static; text-align: center; display: block; margin-bottom: 100px;    }
    .brain_05 .textbox dl dt {font-size: 46px;}
    .brain_05 .textbox dl dd {font-size: 32px;}
    .brain_05 .textbox p { font-size: 20px; margin-top: 0; text-align: center;}
    
}

/**/
.brain_06 {background: #fff; text-align: right; padding-bottom: 210px; font-family: 'Noto Sans KR', sans-serif; overflow: hidden;}
.brain_06 .bg {height: 530px; background-image: url(../img/brain_04_img11.png); background-position: center center; background-repeat: no-repeat; position: relative; max-width: 1560px; margin-left: auto;}


.brain_06 .bg .logo {position: absolute; left: -5em; top: -5em;}

@media screen and (max-width:768px){
    .brain_06 {padding-bottom: 50px;}
    
    .brain_06 .bg {height: 350px; box-sizing: border-box; margin-left: 10%; max-width: 100%; background-size: cover;}
    
    .brain_06 .bg .logo {position: absolute; left: -1em; top: -2em; width: calc(158px/2);}

}