@charset "utf-8";

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

/* section-2*/
#vasectomy .section-2 {margin-top: 210px;}
#vasectomy .section-2 .container-2{display: flex;align-items: center;}
#vasectomy .section-2 .left {margin-right: 65px;}
#vasectomy .section-2 .right .t-line-1{font-size: 53px;line-height: 1.2;margin-bottom: 50px;}
#vasectomy .section-2 .right .t-line-1 strong {display:block;}
#vasectomy .section-2 .right span{color: #666;font-size: 20px;display: block;margin-bottom: 36px;}
#vasectomy .section-2 .right .t-line-3{background: #900020;color: #fff;line-height: 1.8;padding: 0 3px;display: inline;}
#vasectomy .section-2 .right .t-line-4{margin-bottom:0; margin-top:36px;}

/* section-3*/
#vasectomy .section-3 { margin-top: 196px; text-align: center; padding: 196px 0;position: relative;} 
#vasectomy .section-3 .lrg-txt { font-size: 48px; font-weight: bold; line-height: 1; margin-bottom: 55px; } 
#vasectomy .section-3 .sml-txt { font-size: 22px; line-height: 1.3; margin-bottom: 63px; } 
#vasectomy .section-3 .box-lists-wrap { margin-top: 100px; width: 896px;margin: 0 auto;} 
#vasectomy .section-3 .box-lists-wrap .box-list { float: left;opacity:0; width: 426px;height: 426px;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column;} 
#vasectomy .section-3 .box-lists-wrap .box-list.red {background:#900020; color:#fff;}
#vasectomy .section-3 .box-lists-wrap .box-list.white {background:#fff; color:#222;}
#vasectomy .section-3 .box-lists-wrap .box-list .big {font-size: 33px;line-height: 1;padding-bottom: 30px;border-bottom: 3px solid #fff;font-weight: 500;}
#vasectomy .section-3 .box-lists-wrap .box-list.white .big {border-bottom:3px solid #222;}
#vasectomy .section-3 .box-lists-wrap .box-list .sml {margin-top: 36px;font-size: 19px;letter-spacing: -1px;line-height: 1.4;}
#vasectomy .section-3 .box-lists-wrap .box-list.viewing {opacity:1;transform: translate(0px);transition: all 1s ease; } 
#vasectomy .section-3 .box-lists-wrap .box-list-01 { margin-right: 44px; margin-bottom: 33px;transform: translateX(-50px); } 
#vasectomy .section-3 .box-lists-wrap .box-list-02 { margin-bottom: 33px;transform: translateX(50px); } 
#vasectomy .section-3 .box-lists-wrap .box-list-03 { margin-right: 44px;transform: translateX(-50px); } 
#vasectomy .section-3 .box-lists-wrap .box-list-04 { transform: translateX(50px); } 
#vasectomy .section-3.viewing {color:#fff; transition: color 1s ease; }
#vasectomy .section-3 .fade-box-wrapper {opacity:0; background: url("/images/vasectomy_con_03.jpg") no-repeat center top; background-size:cover; height:1500px;position: absolute;left: 0;top: 0;width: 100%;z-index: -1;}
#vasectomy .section-3.viewing .fade-box-wrapper {opacity:1; transition: opacity 1s ease; }

/* section-4 */
#vasectomy .section-4 { margin-top: 196px;} 
#vasectomy .section-4 .container-3 { padding-left: 87px; opacity:0; transform:translateY(50px);} 
#vasectomy .section-4 .section-tit { text-align: center; margin-bottom: 110px; opacity:0; transform:translateY(50px);} 
#vasectomy .section-4 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1; margin-bottom: 56px; } 
#vasectomy .section-4 .section-tit .sml-txt { font-size: 20px; } 
#vasectomy .section-4 .video-left-side { float: left; width: 427px; } 
#vasectomy .section-4 .video-left-side .tit { font-size: 48px; font-weight: bold; line-height: 1.15; } 
#vasectomy .section-4 .video-left-side .use-step-lists { margin-top: 50px; } 
#vasectomy .section-4 .video-left-side .use-step-lists li { margin-top: 35px; } 
#vasectomy .section-4 .video-left-side .use-step-lists li p.txt-1 { font-size: 23px; font-weight: bold; letter-spacing: -1px; line-height: 1; margin-bottom: 15px; } 
#vasectomy .section-4 .video-left-side .use-step-lists li p.txt-2 { font-size: 19px; color: #666; letter-spacing: -0.5px; } 
#vasectomy .section-4 .video-right-side {position: relative;width: calc(100% - 400px);max-width: 983px;padding-bottom: 44%;float: right;} 
#vasectomy .section-4 .video-right-side > iframe { position: absolute; width: 100%; height: 100%; } 
#vasectomy .section-4 .temp-imgs {float:right;}
#vasectomy .section-4.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease;} 
#vasectomy .section-4.viewing .container-3 { opacity:1; transform:translateY(0px); transition: all 1.5s ease .3s;} 

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