*{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;}
}
@media screen and (min-width : 769px){
    .mob {display: none !important;}
}

/**/
.pf_678visual {height: 100vh; background: url(../img/678_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_asfvisual {height: 100vh; background: url(../img/asf_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_hnkvisual {height: 100vh; background: url(../img/hnk_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_bepvisual {height: 100vh; background: url(../img/bep_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_inkvisual {height: 100vh; background: url(../img/ink_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_sjvisual {height: 100vh; background: url(../img/seoju_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_hanvisual {height: 100vh; background: url(../img/hangel_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_sjvisual {height: 100vh; background: url(../img/seoju_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_ledvisual {height: 100vh; background: url(../img/led_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_medivisual {height: 100vh; background: url(../img/medi_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_smvisual {height: 100vh; background: url(../img/smuf_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_vdovisual {height: 100vh; background: url(../img/vdo_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_zivisual {height: 100vh; background: url(../img/zian_visual.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}
.pf_stecvisual {height: 100vh; background: url(../img/sub_pfvisual012.jpg); background-attachment: fixed; background-size: cover; background-position: top center;}



.wrap {height: 100%;}
.wrap dl {display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; height: 100%; text-align: center; word-break: keep-all;}
.wrap dl dt {font-size: 20px;}
.wrap dl dd {font-size: 60px; font-weight: bold;}

dd.link a {display: inline-block; line-height: 45px; color: #fff; width: 180px; height: 47px; text-align: center; font-size: 16px; box-sizing: border-box; border: 2px solid #fff; border-radius: 100px;}

@media screen and (max-width:768px){
    .wrap dl dt {margin-bottom: 0;}
    .wrap dl dd {font-size: 25px; margin-bottom: 20px;}
}


/**/
.pf_main {background-color: #f3f4f6; text-align: center;}
.pf_main .imgtbox{padding-top: 0;background-position: top; position: relative; z-index: 2; background-size: 100% auto; background-repeat: no-repeat; }

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


.gem06_link {padding: 60px 0 60px; text-align: center;}
.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;}
    
}

.gem_next {height: 560px; position: relative; overflow: hidden; text-align: left;}

.gem_next .wrap dl {display: block; text-align: left;}

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

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

.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: 24px;}
    
}


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

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

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