*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top; max-width: 100%; height: auto;}
/**/
html, body {font-family: 'Noto Sans KR', sans-serif; overflow-x: hidden}
.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; background: url(../img/678visual.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}

.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;}

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

.gem_next {height: 560px; position: relative; overflow: hidden;}

.gem_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}

.gem_next .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}

.brain_next {background-image: url(/html/portfolio/2020/img/678_visual.jpg); background-position: center center; background-repeat: no-repeat; position: relative;}


.gem_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.gem_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.gem_next .textbox dl dd {font-size: 60px; font-weight: bold;}


@media screen and (max-width: 768px) {
    
    .gem_next {height: 250px;} 
    .gem_next .textbox {top: 50px;}
    .gem_next .textbox dl dd {font-size: 20px;}
    
}


.gem06_link {padding: 130px 0 60px; text-align: center; background: #f3f4f6;}
.gem06_link a {color: #333; font-size: 30px; font-weight: 600;}
.gem06_link span {position: relative; top: -5px; margin-right: 20px;}
.gem06_link img {vertical-align: middle;}

@media screen and (max-width: 768px) {
    
    .gem06_link {padding: 70px 0 60px;}
    .gem06_link a {font-size: 20px;}
    
}

.in_678_01 {margin: 100px 0 450px;}
.in_678_01 dl dt {font-size: 30px; margin-bottom: 40px; font-family: 'Poppins', sans-serif; font-weight: bold;}
.in_678_01 dl dd {font-size: 18px; color: #666; margin-bottom: 50px;}
.in_678_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/in_678_01_arrow.png); background-position: 90% center; background-repeat: no-repeat;}


@media screen and (max-width:768px){
    
    .in_678_01 {margin: 50px 0 200px; text-align: center;}
    .in_678_01 dl dd {word-break: keep-all; font-size: 12px; line-height: 2;}
    .in_678_01 dl dd:last-child {margin-bottom: 0;}
    
}


/**/

.in_678_02 {background: #eee;}
.in_678_02 .imgbg {position: relative; top: -15em; margin-bottom: -15em;}
.in_678_02 .imgbox{border: 12px solid #000; border-radius: 20px; padding-bottom: 55%; content: ""; position: relative; overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
pointer-events: none;}
.in_678_02 .imgbox::-webkit-scrollbar {
    display: none;
}
.in_678_02 .imgbox img {position: absolute; top: 0; left: 0; overflow: scroll;}

.in_678_02 .ul01 li:nth-of-type(1) {text-align: right; box-sizing: border-box; padding-right: 5%; margin-top: 240px; margin-left: 21%;}
.in_678_02 .ul01 li:nth-of-type(2) {position: relative; top: -5em; margin-bottom: -5em; margin-right: 34%;}

.in_678_02 .ul01 li:nth-of-type(3) {text-align: right; top: -15em; position: relative; margin-bottom: -15em; margin-left: 34%;}

.in_678_02 .ul02box {position: relative; top: -20em; margin-bottom: -20em; z-index: 2;}
.in_678_02 .ul02box .ul02 {padding-bottom: 260px;}
.in_678_02 .ul02box .ul02 li:nth-of-type(1) {position: relative; z-index: 2; margin-right: 67%;}
.in_678_02 .ul02box .ul02 li:nth-of-type(2) {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; padding: 0 5%;}

.in_678_02 .mi_box {position: relative; text-align: right; top: -15em; margin-bottom: -15em;}
.in_678_02 .mi_box img:nth-of-type(1) {position: relative; z-index: 2; box-sizing: border-box; padding-left: 69%; pointer-events: none;}
.in_678_02 .mi_box img:nth-of-type(2) {position: absolute; left: 5em; top: 50%; transform: translateY(-50%); box-sizing: border-box; padding-right: 31%; }

@media screen and (max-width:768px){
    
    .in_678_02 .imgbox{border: 6px solid #000;}
    .in_678_02 .imgbg {top: -8em; margin-bottom: -8em;}
    
    .in_678_02 .ul01 li:nth-of-type(1) {margin-top: 80px;}
    .in_678_02 .ul01 li:nth-of-type(2) {top: -1em; margin-bottom: -1em;}
    .in_678_02 .ul01 li:nth-of-type(3) {top: -6em; margin-bottom: -6em;}
    
    .in_678_02 .ul02box {top: -4em; margin-bottom: -4em;}
    .in_678_02 .ul02box .ul02 {padding-bottom: 0;}
    .in_678_02 .ul02box .ul02 li:nth-of-type(2) {bottom: 30px; padding: 0 15%; left: 45%;}
    
    .in_678_02 .mi_box {top: 0; margin-bottom: 0;}
    .in_678_02 .mi_box img:nth-of-type(2) {left: 30px; top: -20px; transform: none; }
    
}



/**/

.in_678_03 {background: #eee; padding-top: 230px;}

.in_678_03 .upbox {position: relative;}
.in_678_03 .upbox .txtbox {display: inline-block;}
.in_678_03 .upbox h2.title {font-size: 20px; margin-bottom: 60px; font-family: 'Poppins', sans-serif; font-weight: bold;}
.in_678_03 .upbox dl dt {font-size: 90px; font-weight: bold; line-height: 1; margin-bottom: 40px; font-family: 'Poppins', sans-serif;}
.in_678_03 .upbox dl dd {font-size: 15px; color: #656565;}
.in_678_03 .upbox ul {margin-top: 50px;}
.in_678_03 .upbox ul li {width: 97px; border-radius: 100%; float: left; margin-right: 15px;}
.in_678_03 .upbox ul li:last-child {margin-right: 0;}
.in_678_03 .upbox ul li:after {content: ""; display: block; padding-bottom: 100%;}
.in_678_03 .upbox ul li:nth-of-type(1) {background: #038c42;}
.in_678_03 .upbox ul li:nth-of-type(2) {background: #fee628;}
.in_678_03 .upbox ul li:nth-of-type(3) {background: #492a00;}
.in_678_03 .upbox img {position: absolute; right: -20em; top: 0;}

.in_678_03 figure {position: relative; top: -10em; left: 10em; margin-bottom: -10em; padding-bottom: 250px;}

@media screen and (max-width:768px){
    
    .in_678_03 {padding-top: 70px;}

.in_678_03 .upbox {position: relative;  text-align: center;}
.in_678_03 .upbox .txtbox {display: inline-block;}
.in_678_03 .upbox h2.title {font-size: 20px; margin-bottom: 40px;}
    .in_678_03 .upbox dl dt {font-size: 50px;;}
    .in_678_03 .upbox ul {text-align: center;}
    .in_678_03 .upbox ul li {max-width: 97px; border-radius: 100%; margin-right: 9px; width: calc(100%/3 - 30px/3); display: inline-block; float: none;}
.in_678_03 .upbox ul li:last-child {margin-right: 0;}
.in_678_03 .upbox ul li:after {content: ""; display: block; padding-bottom: 100%;}

.in_678_03 .upbox img {position: absolute; right: auto; bottom: -10em; top: auto; left: 0; box-sizing: border-box; padding-right: 40%;}

    .in_678_03 figure {position: static; top: auto; left: auto; margin-bottom: 0; padding-bottom: 90px; margin-top: 90px;}
    
}



/**/
.in_678_04 {height: 620px; background-image: url(../img/in_678_04_img01.png); background-repeat: no-repeat; background-position: center;}

@media screen and (max-width:768px){
    .in_678_04 {height: 450px; background-image: url(../img/in_678_04_img01_m.png); background-position: center center;}
}

/**/
.in_678_05 {margin-bottom: 100px;}
.in_678_05 ul {text-align: center; padding-bottom: 200px;}
.in_678_05 ul li {display: inline-block; box-sizing: border-box; border: 10px solid #000; border-radius: 20px;}
.in_678_05 ul li:nth-of-type(1) {position: relative; margin-right: 50px; top: -5em;}
.in_678_05 ul li:nth-of-type(2) {position: relative; top: 200px;}
.in_678_05 ul li:nth-of-type(3) {position: absolute; left: 0; bottom: 0; text-align: left; border: none;}
.in_678_05 ul li:nth-of-type(3) dl dt {font-size: 30px; margin-bottom: 30px;  font-weight: bold;}
.in_678_05 ul li:nth-of-type(3) dl dd {font-size: 18px; color: #666; word-break: keep-all;}

@media screen and (max-width:768px){
    
    .in_678_05 {margin-bottom: 100px;}
    .in_678_05 ul {padding-bottom: 0; margin-top: 50px;}
    .in_678_05 ul li {display: inline-block; box-sizing: border-box; border: 5px solid #000; border-radius: 20px; width: calc(50% - 10px); float: left; overflow: hidden;}
    
    .in_678_05 ul li:nth-of-type(1) {position: static; top: auto; margin-right: 20px;}
    .in_678_05 ul li:nth-of-type(2) {position: static; top: auto; box-sizing: border-box; margin-top: 10em;}
    .in_678_05 ul li:nth-of-type(3) {position: static; text-align: center; border: none; float: none; width: auto; margin-top: 50px;}
        
    .in_678_05 ul li:nth-of-type(3) dl dt {font-size: 18px; margin-bottom: 20px;}
    .in_678_05 ul li:nth-of-type(3) dl dd {font-size: 14px;}
    
}

.next_678 {background-image: url(/html/portfolio/cau/img/cau_bg.jpg); background-position: center center; background-repeat: no-repeat; position: relative;}