@charset "utf-8"; 

button{background:none; padding:0; outline:none;}

#hyperplasia .top-intro { color: #fff; } 


/* section-2 */
#hyperplasia .section-2{margin-top:250px;}
#hyperplasia .section-2 .section-tit { text-align: center; margin-bottom: 100px; opacity: 0; transform: translateY(80px);} 
#hyperplasia .section-2 .section-tit .sml-txt { font-size: 20px; font-weight: 500; display: block; line-height: 1; margin-bottom: 50px; } 
#hyperplasia .section-2 .section-tit .lrg-txt { font-size: 48px; font-weight: bold; line-height: 1; display: block; margin-bottom: 50px; } 
#hyperplasia .section-2 .circleList{display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; width:800px; height:auto; text-align:center; margin:70px auto -40px auto;}
#hyperplasia .section-2 .circleList .listItem{display:inline-flex; justify-content:center; align-items:center; width:240px; aspect-ratio:1 / 1; border-radius:50%; background:#900021; opacity: 0; transform: translateY(80px); color:#fff; margin-right:40px; margin-bottom:40px;}
#hyperplasia .section-2 .circleList .listItem:nth-child(3n){margin-right:0;}
#hyperplasia .section-2 .circleList .listItem:nth-child(2n){background:#db2c53;}
#hyperplasia .section-2 .circleList .listItem .text{width:100%; height:auto; font-size:22px; font-weight:300; letter-spacing:-0.025em; line-height:1.5;}
#hyperplasia .section-2 .circleList .listItem .text strong{display:block; font-weight:700;}
#hyperplasia .section-2.viewing .section-tit {opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#hyperplasia .section-2.viewing .circleList .listItem{opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#hyperplasia .section-2.viewing .circleList .items-2{transition-delay: 0.25s;}
#hyperplasia .section-2.viewing .circleList .items-3{transition-delay: 0.5s;}
#hyperplasia .section-2.viewing .circleList .items-4{transition-delay: 0.75s;}
#hyperplasia .section-2.viewing .circleList .items-5{transition-delay: 1s;}
#hyperplasia .section-2.viewing .circleList .items-6{transition-delay: 1.25s;}

.subText1{font-size:22px; font-weight:400; letter-spacing:-0.025em; line-height:1.5; color:#333; opacity: 0; transform: translateY(80px); margin-top:65px; text-align:center;}
.subText1 .colorType2{color:#900021;}
.viewing .subText1{opacity: 1; transform: translateY(0px); transition: all 1s ease;}

/* section-3 */
#hyperplasia .section-3 { margin-top: 265px; } 
#hyperplasia .section-3 .section-tit { text-align: center; margin-bottom: 100px; opacity: 0; transform: translateY(80px);} 
#hyperplasia .section-3 .section-tit .sml-txt { font-size: 20px; font-weight: 500; display: block; line-height: 1; margin-bottom: 50px; } 
#hyperplasia .section-3 .section-tit .lrg-txt { font-size: 48px; font-weight: bold; line-height: 1.25; display: block; margin-bottom: 50px; } 
#hyperplasia .section-3 .recommend-lists { width: 1050px; margin: 0 auto; } 
#hyperplasia .section-3 .recommend-lists .lists { float: left; width: 19.2%; text-align: center; font-size: 20px; opacity: 0; transform: translateY(60px);} 
#hyperplasia .section-3 .recommend-lists .lists-1 { margin-left: 2%; } 
#hyperplasia .section-3 .recommend-lists .lists-5 { margin-right: 2%; } 
#hyperplasia .section-3 .recommend-lists .lists > img { margin: 0 auto 35px; } 
#hyperplasia .section-3 .recommend-lists .lists .recommend-txt { line-height: 1.5; font-size: 20px;} 
#hyperplasia .section-3 .recommend-lists .lists .recommend-txt strong { /* color: #900020; */ font-weight: normal; font-size: 23px;font-weight: bold;} 
#hyperplasia .section-3.viewing .section-tit {opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#hyperplasia .section-3.viewing .recommend-lists .lists {opacity: 1; transform: translateY(0px); transition: all 1s ease; } 
#hyperplasia .section-3.viewing .recommend-lists .lists-2 { transition-delay: 0.25s; } 
#hyperplasia .section-3.viewing .recommend-lists .lists-3 { transition-delay: 0.5s; } 
#hyperplasia .section-3.viewing .recommend-lists .lists-4 { transition-delay: 0.75s; } 
#hyperplasia .section-3.viewing .recommend-lists .lists-5 { transition-delay: 1s; } 

/* section-4 */
#hyperplasia .section-4 { margin-top: 260px; background:#222; padding-bottom:100px;}
#hyperplasia .section-4 .section-tit { padding-top: 100px; text-align: center; line-height: 1; color: #fff; opacity: 0; transform: translateY(80px);} 
#hyperplasia .section-4 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px; margin-bottom: 85px; } 
#hyperplasia .section-4 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1.3; } 
#hyperplasia .section-4 .imgTextList1{display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; width:1236px; height:auto; text-align:center; margin-bottom:-54px;}
#hyperplasia .section-4 .imgTextList1 .listItem{display:inline-flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; width:calc(50% - 27px); padding-bottom:37px; border-radius:16px; background:#fff; position:relative; opacity: 0; transform: translateY(60px); margin-bottom:60px; overflow:hidden;}
#hyperplasia .section-4 .imgTextList1 .listItem:nth-child(2n){margin-left:54px;}
#hyperplasia .section-4 .imgTextList1 .listItem img{width:100%; height:auto; margin-bottom:45px;}
#hyperplasia .section-4 .imgTextList1 .listItem dl{width:100%; height:auto; color:#333;}
#hyperplasia .section-4 .imgTextList1 .listItem dl dt{font-size:30px; font-weight:700; letter-spacing:-0.025em; line-height:1;}
#hyperplasia .section-4 .imgTextList1 .listItem dl dd{font-size:20px; font-weight:400; letter-spacing:-0.025em; line-height:1.5; margin-top:20px;}
#hyperplasia .section-4.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1s ease; } 
#hyperplasia .section-4.viewing .imgTextList1 .listItem {opacity: 1; transform: translateY(0px); transition: all 1s ease; } 
#hyperplasia .section-4.viewing .imgTextList1 .lists-2 { transition-delay: 0.25s; } 
#hyperplasia .section-4.viewing .imgTextList1 .lists-3 { transition-delay: 0.5s; } 
#hyperplasia .section-4.viewing .imgTextList1 .lists-4 { transition-delay: 0.75s; } 
#hyperplasia .section-4.viewing .imgTextList1 .lists-5 { transition-delay: 1s; } 

/* section-5 */
#hyperplasia .section-5 { margin-top: 200px;}
#hyperplasia .section-5 .section-tit { text-align: center; margin-bottom: 95px; opacity:0; transform:translateY(50px); } 
#hyperplasia .section-5 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1; margin-bottom: 56px; } 
#hyperplasia .section-5 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px;} 
#hyperplasia .section-5 .treatmentList{display:flex; flex-wrap:wrap; align-content:flex-start; width:100%; max-width:1410px; margin:0 auto;}
#hyperplasia .section-5 .treatmentList .listItem{display:flex; align-items:center; flex-direction:row-reverse; width:100%; opacity: 0; transform: translateY(60px);}
#hyperplasia .section-5 .treatmentList .listItem:nth-child(2n){flex-direction:row;}
#hyperplasia .section-5 .treatmentList .listItem + .listItem{margin-top:90px;}
#hyperplasia .section-5 .treatmentList .listItem .textBox{width:50%; height:auto; padding-left:90px; text-align:left;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl{width:100%; height:auto; color:#333;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl dt{font-size:48px; font-weight:700; letter-spacing:-0.025em; line-height:1;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl dd{width:100%; margin-top:70px;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl .checkText{width:100%; height:auto;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl .checkText + .checkText{margin-top:35px;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl .checkText strong{display:flex; align-items:center; width:100%; font-size:26px; font-weight:700; letter-spacing:-0.025em; line-height:1; margin-bottom:15px;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl .checkText strong img{display:inline-block; flex-shrink:0; margin-right:10px;}
#hyperplasia .section-5 .treatmentList .listItem .textBox dl .checkText p{font-size:19px; font-weight:300; letter-spacing:-0.025em; line-height:1.578; color:#666;}
#hyperplasia .section-5 .linkBox{display:flex; justify-content:center; width:100%; margin-top:150px; opacity: 0; transform: translateY(60px);}
#hyperplasia .section-5 .linkBox a{display:inline-flex; justify-content:center; align-items:center; box-sizing:border-box; width:420px; height:90px; border-radius:45px; border:4px solid #900020; text-align:center;}
#hyperplasia .section-5 .linkBox a + a{margin-left:40px;}
#hyperplasia .section-5 .linkBox a p{width:100%; height:auto; font-size:28px; font-weight:700; letter-spacing:-0.05em; line-height:1; color:#333;}
#hyperplasia .section-5 .linkBox a p span{color:#900020;}
#hyperplasia .section-5 .treatmentList.viewing .listItem { opacity: 1; transform: translateX(0px); transition: all 1s ease; } 
#hyperplasia .section-5 .treatmentList.viewing .lists-2 { transition-delay: 0.4s; } 
#hyperplasia .section-5 .linkBox.viewing{opacity: 1; transform: translateX(0px); transition: all 1s ease;}
#hyperplasia .section-5.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }


.youtubeBox{width:100%; height:auto; position:relative; padding-top:56.25%; overflow:hidden; margin-top:260px; transform:translateY(50px); opacity:0;}
.youtubeBox iframe{width:100%; height:100%; position:absolute; top:0; left:0;}
.viewing .youtubeBox{opacity:1; transform:translateY(0px); transition: all 1.5s ease .3s; }