@charset "utf-8"; 

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

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


/* section-2 */
#prostatitis .section-2{margin-top:250px;}
#prostatitis .section-2 .section-tit { text-align: center; margin-bottom: 100px; opacity: 0; transform: translateY(80px);} 
#prostatitis .section-2 .section-tit .sml-txt { font-size: 20px; font-weight: 500; display: block; line-height: 1; margin-bottom: 50px; } 
#prostatitis .section-2 .section-tit .lrg-txt { font-size: 48px; font-weight: bold; line-height: 1; display: block; margin-bottom: 50px; } 
#prostatitis .section-2 .circleList{display:flex; justify-content:center; width:100%; height:auto; text-align:center; margin-top:70px;}
#prostatitis .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;}
#prostatitis .section-2 .circleList .listItem + .listItem{margin-left:40px;}
#prostatitis .section-2 .circleList .listItem:nth-child(2n){background:#db2c53;}
#prostatitis .section-2 .circleList .listItem .text{width:100%; height:auto; font-size:22px; font-weight:300; letter-spacing:-0.025em; line-height:1.5;}
#prostatitis .section-2 .circleList .listItem .text strong{display:block; font-weight:700;}
#prostatitis .section-2.viewing .section-tit {opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#prostatitis .section-2.viewing .circleList .listItem{opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#prostatitis .section-2.viewing .circleList .items-2{transition-delay: 0.25s;}
#prostatitis .section-2.viewing .circleList .items-3{transition-delay: 0.5s;}
#prostatitis .section-2.viewing .circleList .items-4{transition-delay: 0.75s;}

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

/* section-4 */
#prostatitis .section-4 { margin-top: 260px; background:url("/images/prostatitis/con03.jpg") no-repeat center top/cover; padding-bottom:120px;}
#prostatitis .section-4 .section-tit { padding-top: 120px; text-align: center; line-height: 1; color: #fff; opacity: 0; transform: translateY(80px);} 
#prostatitis .section-4 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px; margin-bottom: 85px; } 
#prostatitis .section-4 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1.3; } 
#prostatitis .section-4 .textList1{display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; width:1242px; height:auto; text-align:center; margin-bottom:-60px;}
#prostatitis .section-4 .textList1 .listItem{display:inline-flex; justify-content:center; align-items:flex-start; width:394px; padding:74px 25px 25px 25px; border-radius:18px; background:#fff; position:relative; margin-right:30px; opacity: 0; transform: translateY(60px); margin-bottom:60px;}
#prostatitis .section-4 .textList1 .listItem:first-child{margin-left:30px;}
#prostatitis .section-4 .textList1 .listItem:last-child{margin-right:0;}
#prostatitis .section-4 .textList1 .listItem > strong{display:flex; justify-content:center; align-items:center; width:262px; height:75px; border-radius:37.5px; text-align:center; background:#900020; font-size:31px; font-weight:500; letter-spacing:-0.025em; line-height:1; color:#fff; position:absolute; top:-37.5px; left:50%; transform:translateX(-50%); z-index:2;}
#prostatitis .section-4 .textList1 .listItem dl{width:100%; height:auto;}
#prostatitis .section-4 .textList1 .listItem dl dt{font-size:30px; font-weight:500; letter-spacing:-0.025em; line-height:1.2; color:#900020;}
#prostatitis .section-4 .textList1 .listItem dl dd{font-size:20px; font-weight:500; letter-spacing:-0.025em; line-height:1.5; color:#333; margin-top:11px;}
#prostatitis .section-4.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1s ease; } 
#prostatitis .section-4.viewing .textList1 .listItem {opacity: 1; transform: translateY(0px); transition: all 1s ease; } 
#prostatitis .section-4.viewing .textList1 .lists-2 { transition-delay: 0.25s; } 
#prostatitis .section-4.viewing .textList1 .lists-3 { transition-delay: 0.5s; } 
#prostatitis .section-4.viewing .textList1 .lists-4 { transition-delay: 0.75s; } 
#prostatitis .section-4.viewing .textList1 .lists-5 { transition-delay: 1s; } 

/* section-5 */
#prostatitis .section-5 { margin-top: 190px;}
#prostatitis .section-5 .section-tit { text-align: center; margin-bottom: 110px; opacity:0; transform:translateY(50px); } 
#prostatitis .section-5 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1; margin-bottom: 56px; } 
#prostatitis .section-5 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px;} 
#prostatitis .section-5 .change-step-wrapper { margin-top: 130px; } 
#prostatitis .section-5 .change-step-wrapper .step { float: left; opacity: 0; transform: translateX(90px); } 
#prostatitis .section-5 .change-step-wrapper .step > p { margin-top: 30px; font-size: 30px; font-weight: bold; letter-spacing: -1px; line-height: 1; margin-bottom: 20px; } 
#prostatitis .section-5 .change-step-wrapper .step > span { font-size: 16px; color: #666; } 
#prostatitis .section-5 .change-step-wrapper .step-01, #prostatitis .section-5 .change-step-wrapper .step-02 { width: 429px; position: relative; } 
#prostatitis .section-5 .change-step-wrapper .step-01:after, #prostatitis .section-5 .change-step-wrapper .step-02:after { content: ""; position: absolute; width: 18px; height: 35px; background: url("/images/urolift_next_step_arrow.png"); right: 15px; top: 115.5px; } 
#prostatitis .section-5 .change-step-wrapper.viewing .step { opacity: 1; transform: translateX(0px); transition: all 1s ease; } 
#prostatitis .section-5 .change-step-wrapper.viewing .step-02 { transition-delay: 0.4s; } 
#prostatitis .section-5 .change-step-wrapper.viewing .step-03 { transition-delay: 0.8s; } 
#prostatitis .section-5.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }

/* section-6 */
#prostatitis .section-6 { margin-top: 250px; padding:110px 0 120px 0; background:#f6f6f6;} 
#prostatitis .section-6 .section-tit { text-align: center; opacity: 0; transform: translateY(80px);} 
#prostatitis .section-6 .section-tit .lrg-txt { font-size: 48px; font-weight: bold; } 
#prostatitis .section-6 .section-tit .sml-txt-2 { line-height: 1.363; margin-top: 50px; display: block; font-size: 22px; margin-bottom: 85px; } 
#prostatitis .section-6 .numberList{display:flex; flex-wrap:wrap; align-content:flex-start; width:100%; text-align:center; margin-top:85px;}
#prostatitis .section-6 .numberList .listItem{display:flex; align-items:center; width:100%; flex-direction:row-reverse; opacity:0; transform:translateY(50px);}
#prostatitis .section-6 .numberList .listItem + .listItem{margin-top:90px;}
#prostatitis .section-6 .numberList .listItem:nth-child(2n){flex-direction:row;}
#prostatitis .section-6 .numberList .listItem .textBox{width:50%;}
#prostatitis .section-6 .numberList .listItem .textBox dt{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; width:100%; height:auto;}
#prostatitis .section-6 .numberList .listItem .textBox dt span{display:inline-flex; justify-content:center; align-items:center; width:60px; height:32px; border-radius:16px; background:#900020; font-size:18px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#fff; margin-bottom:19px;}
#prostatitis .section-6 .numberList .listItem .textBox dt p{width:100%; font-size:42px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#333;}
#prostatitis .section-6 .numberList .listItem .textBox dd{font-size:22px; font-weight:400; letter-spacing:-0.025em; line-height:1.636; color:#666; margin-top:32px;}
#prostatitis .section-6 .numberList .listItem .textBox dd .smallText{font-size:18px;}
#prostatitis .section-6 .numberList .listItem .imgBox{width:50%;}
#prostatitis .section-6 .imgBox1{display:flex; justify-content:center; width:100%; height:auto; margin-top:120px; opacity:0; transform:translateY(50px);}
#prostatitis .section-6.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }
#prostatitis .section-6.viewing .numberList .listItem{ opacity: 1; transform: translateX(0px); transition: all 1s ease; } 
#prostatitis .section-6.viewing .numberList .lists-2{ transition-delay: 0.25s; } 
#prostatitis .section-6.viewing .numberList .lists-3{ transition-delay: 0.5s; } 
#prostatitis .section-6 .imgBox1.viewing{ opacity: 1; transform: translateX(0px); transition: all 1s ease; }

/* section-7 */
#prostatitis .section-7 { margin-top: 260px;} 
#prostatitis .section-7 .imgTextBox1{display:flex; align-items:flex-start; width:1236px; height:auto; text-align:left;}
#prostatitis .section-7 .imgTextBox1 img{width:50%; opacity:0; transform:translateY(50px);}
#prostatitis .section-7 .imgTextBox1 .textBox{width:50%; box-sizing:border-box; padding:60px; opacity:0; transform:translateY(50px);}
#prostatitis .section-7 .imgTextBox1 .textBox h2{font-size:51px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#333; margin-bottom:58px;}
#prostatitis .section-7 .imgTextBox1 .textBox p{font-size:22px; font-weight:400; letter-spacing:-0.025em; line-height:1.5; color:#666;}
#prostatitis .section-7 .imgTextBox1 .textBox p + p{margin-top:30px;}
#prostatitis .section-7 .imgTextBox1 .textBox p span{background:#900020; color:#fff; padding:4px 2px; line-height:1; display:inline-block;}
#prostatitis .section-7.viewing .imgTextBox1 img{opacity: 1; transform: translateX(0px); transition: all 1s ease;}
#prostatitis .section-7.viewing .imgTextBox1 .textBox{opacity: 1; transform: translateX(0px); transition: all 1s 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; }