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

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

/**/
.pf_visual {height: 100vh; position: relative;}

.pf_visual .videobox {position: relative; height: 100vh; background: url(../img/fanta_vg.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; font-family: 'Poppins', sans-serif;}
.pf_visual dl dd {font-size: 60px; font-weight: bold; line-height: 1.2;}

@media screen and (max-width:768px){
	.pf_visual dl dt {font-size: 3vw;}
    .pf_visual dl dd {font-size: 8vw;}
	.pf_visual .videobox {background: url(../img/fanta_mob_visual.jpg); background-position: center;}
}

.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(../img/visual_bg.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; background-size: cover} 
    .gem_next .textbox {top: 50px;}
    .gem_next .textbox dl dd {font-size: 30px;}
    
}

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

/**/

.fanta01 {position: relative; padding-top: 90px;}
.fanta01::before {position: absolute; top: 0; left: 0; width: 100%; height: 65%; background: #004287; content: "";}
.fanta01 dl {color: #fff;}
.fanta01 dl dt {font-size: 30px; font-weight: bold; margin-bottom: 30px;}
.fanta01 dl dd {font-size: 18px; margin-bottom: 30px; line-height: 1.3;}
.fanta01 dl dd:nth-of-type(2) {padding: 10px; background: #333; max-width: 155px; display: flex; align-items: center; justify-content: center; position: relative;}
.fanta01 dl dd:nth-of-type(2) a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fanta01 dl dd:nth-of-type(2) i { padding-left: 5%; display: inline-block;}
.fanta01 figure {text-align: right; box-sizing: border-box; padding-left: 20%; position: relative; right: -10%;}

@media screen and (max-width:768px){
	
	.fanta01 {padding-top: 10%;}
	.fanta01 dl dt {font-size: 5vw; margin-bottom: 5%;}
	.fanta01 dl dd {font-size: 2.5vw; margin-bottom: 5%;}
	.fanta01 dl dd:nth-of-type(2) {width: 35%; text-align: left;}
	
}


/**/
.fanta02 {margin: 200px 0; box-sizing: border-box; padding: 0 5%;}
.fanta02 dl {margin-bottom: 50px;}
.fanta02 dl dt {font-size: 60px; font-family: 'Poppins', sans-serif; font-weight: bold; line-height: 1; margin-bottom: 25px;}
.fanta02 dl dd {font-size: 18px;}
.fanta02 ul li {border: 1px solid #dadada; box-sizing: border-box; border-radius: 100%;    }
.fanta02 ul li::after {padding-bottom: 100%; display: block; content: "";}

.fanta02 ul {display: flex;}
.fanta02 ul li {width: calc(100%/6); margin-right: 60px;}
.fanta02 ul li:last-child {margin-right: 0;}
.fanta02 ul li:nth-of-type(1) {background: #2873ff;}
.fanta02 ul li:nth-of-type(2) {background: #a2e8ec;}
.fanta02 ul li:nth-of-type(3) {background: #fec8c4;}
.fanta02 ul li:nth-of-type(4) {background: #9eaeea;}
.fanta02 ul li:nth-of-type(5) {background: #fff;}
.fanta02 ul li:nth-of-type(6) {background: #222;}

@media screen and (max-width:768px){
	
	.fanta02 {margin: 15% 0; padding:0;}
	.fanta02 dl dt {font-size: 8vw;}
	.fanta02 dl dd {font-size: 2.3vw;}
	.fanta02 ul li {margin-right: 3%;}
	
}


/**/
.fanta03 {position: relative; margin-bottom: 20%;}
.fanta03 .bg {position: absolute; top: 0;}
.fanta03 figure {padding-top: 15%; box-sizing: border-box;}

/**/
.fanta04 {text-align: center; position: relative;}
.fanta04 .bg {position: absolute; top:-5%; left: 50%; transform: translateX(-50%); width: 80%; max-width: 1278px;}
.fanta04 .reponbox {position: relative;}
.fanta04 .reponbox figure {box-sizing: border-box; padding: 0 22%;}
.fanta04 ul {position: static; top: 50%; width: 100%; transform:none; background-image: url(../img/sejin04.png); background-position: center; background-repeat: no-repeat; background-size: contain;}
.fanta04 ul li {box-sizing: border-box; padding: 0% 0 1%; cursor: pointer;}
.fanta04 ul li img {display: inline-block;}

.fanta04 ul .slick-list { margin:0 -10px; }
.fanta04 ul .slick-slide {margin: 0 10px;}
/**/

.fanta05 {position: relative;  margin: 10% auto 10%;}
.fanta05 .por {position: relative; box-sizing: border-box; width: 90%; margin: 0 auto;}
.fanta05 .por::after {display: block; padding-bottom: 85%; content: "";}
.fanta05 .rtb {position: absolute; right: 6%; bottom: 5%; max-width: 714px; width: 45%; z-index: 1;}
.fanta05 .rtb::before {width: 70%; padding-bottom: 70%; content: ""; background: #fff1ec; position: absolute; right: 0; top: 50%; border-radius: 100%; transform: translateY(-50%); z-index: -1;}
.fanta05 .ltb {position: absolute; left: 0; bottom: 0; max-width: 1000px; width: 55%;}
.fanta05 .ltb::before {width: 70%; padding-bottom: 70%; content: ""; background: #daf6f7; position: absolute; left: 50%; top: 50%; border-radius: 100%; transform: translate(-50%, -50%); z-index: -1;}
.fanta05 dl {position: absolute; right: 10%; top: 10%;}
.fanta05 dl dt {font-size: 2vw; font-weight: bold; margin-bottom: 25px;}
.fanta05 dl dd {font-size: 1.2vw; color: #666;}


@media screen and (max-width:768px){
	
.fanta05 dl {position: static; width: 90%; margin: 0 auto;}
.fanta05 dl dt {font-size: 4vw; margin-bottom: 15px;}
.fanta05 dl dd {font-size: 2.5vw;}
	
}