body{font-family: "Arial","微軟正黑體";background: linear-gradient(to right, #fff0fe, #e8e2ff, #e2f2ff);}
button:focus{outline:none}

a:hover{text-decoration: none;}
.container{position: relative;max-width: 80%;}
section{padding: 80px 0;}
p{font-size: 20px;}
h3{display: flex;align-items: center;font-size: 3rem;font-weight: 400;transform: translate3d(0px, 0px, 0px);}
h4{line-height: 1.8;}
h5{font-size: 2.2rem;}
h6{font-size: 1.8rem;}






/* visual */
header#visual{height: 80vh;overflow: hidden; position: relative;}
header#Visual .master_content{height: 80vh;position: relative;background: url('../images/header-01bg.jpg')top center repeat;background-size:cover;}
header#Visual .Mask .title > img {width: 65%;display: block;margin: auto;}
header#Visual .CPENTAI_logo{width: 50%;position: absolute;top: 49%;left: 35%;z-index: 1000;}



/* 主視覺 */
header#Visual { 
	position: relative; 
	background: url('../images/UCOM_Visual.jpg') no-repeat fixed;
    background-size: cover;
    background-position: bottom left;
    width: 100%;
    height: 850px;
    overflow: hidden;
    border-bottom-left-radius: 100%; 
    border-bottom-right-radius: 100%;
    box-shadow: rgba(0,0,0,0.15) 0 0 100px 0;
    border-bottom: solid 8px #FFF;

}

header#Visual {position: relative;}
header#Visual > div.Mask { 
	background: -webkit-linear-gradient(top,rgba(255,206,169,0.3),rgba(255,255,255,0.8),rgba(255,255,255,0));
	background: -moz-linear-gradient(top,rgba(255,206,169,0.3),rgba(169,247,255,0.2),rgba(255,255,255,0));
	background: -ms-linear-gradient(top,rgba(255,206,169,0.3),rgba(169,247,255,0.2),rgba(255,255,255,0));
	height: 100%;
}
header#Visual div.Content { 
	width: 600px; height: 600px; border-radius: 100%;
	padding: 140px 0 0 0;
	color: #FFF; 
	background-color: rgba(95,177,188,0.9); 
	position: relative;
	top: 15%;
	margin: auto;
	
}
header#Visual div.Content h1 { text-align: center; font-size: 7em; margin: 0; text-shadow: rgba(0,0,0,0.3) 0 4px 0px ; }
header#Visual div.Content h2 { text-align: center; font-size: 2.5em; margin: 10px 80px; padding: 15px 0 0 0; letter-spacing: 7px; border-top: solid 6px #FFF; text-shadow: rgba(0,0,0,0.3) 0 2px 0px ; }
header#Visual div.Content > div.BTN { width: 50%; text-align: center;  border-radius: 6px; margin: 25px auto; overflow: hidden; }
header#Visual div.Content > div.BTN a { 
	display: block; 
	font-size: 22px; 
	background-color: #FFF; 
	color: #5FB1BC; 
	height: 50px; 
	line-height: 50px; 
	transition: 0.2s; 
	font-weight: 600; 

}




#CPENTAI{background:  url(../images/cloud_BG.png) no-repeat center / cover;position: relative;}
#CPENTAI img{width: 100%;border-radius: 3rem  0 0 3rem;}
#CPENTAI .card{border-radius: 3rem;}
#CPENTAI p{line-height: 1.7;text-align: justify;padding: 0 45px 0 10px;}
#CPENTAI .Angular_p{font-size: 1.4rem;text-align: center;padding:0 5px;}
#Second .Angular_p{font-size: 1.4rem;text-align: center;padding:0 5px;}

/* First*/
section#First{padding: 60px 0 0 0;position: relative;}
section#First:before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/Line02.png") no-repeat center;background-size: 100%;z-index: 0;background-attachment: scroll;}
section#First .code-block {background-color: #e2e8f0;color: #1a202c;padding: 1rem;border-radius: 0.5rem;font-family: monospace;overflow-x: auto;margin-top: 0.75rem;margin-bottom: 0.75rem;}
.benefits-title h2{color: #b33440;font-weight: bold;position: relative;text-align: center;font-size: 2.8rem;}
.benefits-title h2 span{font-size: 2.8rem;line-height: 1.8;}
.arrow_img{display: block;margin:20px auto;}
.Gradient{
  position: relative;
  display: block;
  margin: auto;
  width: fit-content;
  font-weight: bold;
  font-family: neulis-sans, sans-serif;
  font-size: 8vw;
  background: linear-gradient(90deg, #ffd1f3, #ddcfff, #bbd1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}


#First p{line-height: 1.8;}
#First li{font-size: 20px;line-height: 1.8;color: #f7682f;font-weight: 400;}


.custom-list {
  list-style: none;
  padding: 0;
  margin-left: 26px;
}

.custom-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  background-image: url(../images/check.svg); 
  background-size: contain;
  background-repeat: no-repeat;
}


.men02{display: block;}
.marker {
  background: linear-gradient(transparent 60%, rgba(255, 198, 41, .42) 60%);
}
/* Second */
section#Second{position: relative;overflow: hidden;padding: 0 0 150px 0;}
section#Second:before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/Line.png") no-repeat center;background-size: 100%;z-index: 0;background-attachment: scroll;}
#Second p{line-height: 1.8;background: linear-gradient(90deg, #ffd1f3, #ddcfff, #bbd1ff);}
#Second .Second_p{text-align: justify;padding:5px 10px;font-size:1.2rem;position: relative;text-indent: 35px;}
#Second .Second_p::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  background-image: url(../images/flash.svg); 
  background-size: contain;
  background-repeat: no-repeat;
}
#Second .Second_pB{margin-right: -10%;margin-left: 10%;}
#Second .Second_pB::before {
  content: "";
  position: absolute;
  background-image: url(../images/circular.svg); 
}
#Second .Second_pC::before {
  content: "";
  position: absolute;
  background-image: url(../images/idea.svg); 
}


/* Third */
#Third{padding:50px;overflow: hidden;position: relative;background-color: #081f47;}
#Third h2{color: #FFF;font-weight: bold;position: relative;text-align: center;font-size: 2.8rem;}
#Third p{text-align: justify;font-weight: bold;font-size: 18px;}
#Third code{color: #000;font-size: 18px;}
#Third .Angular_third_p{font-size: 32px;}

.Gradient_Light{
  position: relative;
  display: block;
  margin: auto;
  width: fit-content;
  font-weight: bold;
  font-family: neulis-sans, sans-serif;
  font-size: 4vw;
  background: linear-gradient(90deg, #ac52ff26, #5e53f926, #5382f926);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  font-weight: 700;
  font-size: 28px;
}
.section-subtitle {
  font-size: 18px;
  color: #6c757d;
}
#Third .card {
  border: 5px solid #b6beff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 16px;
}

.course-title {
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;

}
.course-title span{background-color: #7273ff;border-radius: 20px;padding: 10px 25px;}

.icon-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, #ffd1f3, #ddcfff, #bbd1ff);
  border-radius: 50%;
  margin: -80px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

#Third .card:hover{
  border: 5px solid  #ffd1f3;
}

#Third .card:hover .icon-circle {
  background: linear-gradient(90deg,#bbd1ff , #ddcfff, #ffd1f3);
}

.fa-long-arrow-right{padding-left: 20px;}
.advantage{width: 500px;margin-left: -12%;}

/* Discount */
section#Discount{text-align: left;padding: 80px 0;position: relative;}
section#Discount:before{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/UCOM_Visual.jpg") no-repeat center;background-size: cover;z-index: 0;background-attachment: fixed;opacity: 0.1;}

section#Discount .benefits-title h2{position: relative;}
section#Discount .benefits-title h2:before {
  content: "";
  background: url(../images/star.svg);
  background-repeat: no-repeat;
  width: 200px;
  height: 60px;
  position: absolute;
  left: 480px;
  top: -5px;
}

section#Discount .benefits-title h2:after {
  content: "";
  background: url(../images/star.svg);
  background-repeat: no-repeat;
  width: 200px;
  height: 60px;
  position: absolute;
  top: -5px;
  right: 480px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  margin-top: 50px;
}


.bubble {
  position: relative;
  border: 2px solid #7273ff;
  color: #000;
  padding: 15px 40px 25px 15px;
  border-radius: 8px;
  background-color: white;
  max-width: 220px;
  font-size: 20px;
  line-height: 1.5;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #7273ff transparent transparent transparent;
}

.check img{
  position: absolute;
  bottom: 5px;
  right: 10px;
  width: 45px;
  height: 45px;
}

.bubble strong {
  font-weight: bold;
  font-size: 16px;
}



/* btnLink */
section#btnLink{padding:5% 0;background-color: #081f47;position: relative;}


section#btnLink .btn{display: block;position: relative;border-radius: 45px;width: 60%;height: 64px;margin:10px auto;background: rgb(255, 230, 65);color: #007070;font-size: 1.5rem;line-height: 3.5rem;font-weight: bold; padding-right: 65px;display: inline-block;color: #3821b2;border-radius: 40px; font-weight: bold; text-decoration: none;}
section#btnLink .btn:hover{border: 2px solid #FFF;background: #FFF;transition: opacity .3s;color: #3821b2;font-weight: bold;}

#btnLink .btn-wrap{display: flex; justify-content: center; gap: 20px;}

section#btnLink .btn:before{content: '';position: absolute;right: 10px;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 45px;height: 45px;}
section#btnLink .btn:before{background: url(../images/ico_arrow_2.svg) no-repeat;pointer-events: none;transition: opacity .3s;}

section#btnLink .btn:after{background: url(../images/ico_arrow_2-2.svg) no-repeat;}
section#btnLink .btn:after{content: '';position: absolute;right: 10px;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 45px;height: 45px;pointer-events: none;transition: opacity .3s;opacity: 0;}

section#btnLink .btn:hover:before{opacity: 0;}
section#btnLink .btn:hover:after{opacity: 1;}












@media(min-width: 1441px){
  .container {max-width: 1320px;}
}
@media(max-width: 1440px){
  .container{max-width: 100%;overflow: hidden;}
}

@media(max-width: 767px){
img{width: 100%;}
.container{max-width: 100%;}



/* visual */
header#visual{height: 600px;	background: url('../images/UCOM_Visual.jpg') no-repeat fixed;
  background-size: 100%;background-position: bottom left;border-bottom: solid 8px #FFF;border-radius: 0 !important;}
header#visual .title img{width: 100%;z-index: 1000;position: absolute;}
header#Visual .master_content{height: 80vh;position: relative;background: url('../images/header-01bg.jpg') -760px 0px repeat;background-size:cover;overflow: hidden;}
header#Visual .master_content .title > img {width: 100%;padding: 0;position: absolute;bottom: 50px;left: 0;}
header#Visual .Mask .title > img {width: 100%;display: block;margin: auto;}

header#Visual > div.Mask { 
  height: 600px;
}
    
header#Visual { background-position: -100px 00px; width: 100%; height: 600px; border-radius: 0 !important;}
header#Visual div.Content { width: 350px; height: 350px; padding: 70px 0 0 0; top: 15%;}

#CPENTAI p {padding: 0 10px 0 10px;}
#Third{padding: 0;}
#Third .Angular_third_p{font-size: 32px;}
.arrow_img{width: 30%;}

section#First .icon2,section#First .icon{width: 100%;}

section#First .code-block {width: 90%}
section#First .section{margin-left: 0;}
.men02{display: none;}
.advantage{width: 100%;margin-left: 0;}


#Second .Second_pB{margin-right: 0;margin-left: 0;}

.benefits-title h2{font-size: 2rem;}
.benefits-title h2 span{font-size: 2rem;}

section#Discount .benefits-title h2:before {
  content: "";
  background: url(../images/star.svg);
  background-repeat: no-repeat;
  width: 200px;
  height: 60px;
  position: absolute;
  left: 0px;
  top: -70px;
}

section#Discount .benefits-title h2:after {
  content: "";
  background: url(../images/star.svg);
  background-repeat: no-repeat;
  width: 200px;
  height: 60px;
  position: absolute;
  top: -70px;
  right: 0px;
}

/* btnLink */
section#btnLink .btn{width: 98%;font-size: 1.2rem;}
#btnLink .btn-wrap{flex-wrap: wrap;}
}