.wow { animation: fadeIn 1.5s both; -webkit-animation: fadeIn 1.5s both; animation-duration: 1s; -webkit-animation-duration: 1s; animation-name: fadeInUp; -webkit-animation-name: fadeInUp} .itemA06 .btn a{color: #d0c3a9;border: 1px solid #d0c3a9;line-height:50px;padding:0 40px;border-radius:45px;display:inline-block;position:relative;overflow:hidden;-webkit-transition:0.6s;-o-transition:0.6s;transition:0.6s;letter-spacing:1px;margin: 10px;} .itemA06 .btn a span{position:relative;z-index:10;vertical-align:baseline} .itemA06 .btn a:after{content:"";display:block;position:absolute;top:0;left:0;width:0%;height:100%;background: #d0c3a9;z-index:1;-webkit-transition:0.6s;-o-transition:0.6s;transition:0.6s} .itemA06 .btn a:hover{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px);color:#fff;-webkit-box-shadow:4px 3px 5px rgba(0,0,0,0.1);box-shadow:4px 3px 5px rgba(0,0,0,0.1)} .itemA06 .btn a:hover:after{width:100%} .itemA06 .btn a:hover span{ color: #fff; } /* bgTxt */ .bgTxt {position: relative;z-index: 1;} .bgTxt.title {text-align: center;font-size: 44px;color: var(--primary);font-family: "Cormorant", serif;text-transform: uppercase;line-height: 100%;letter-spacing: 2px;font-weight: 500;} .bgTxt.title h1 , .bgTxt.title h3 {color: #54595f;margin-top: -3px;} .bgTxt.title h3 {text-align: center;line-height: 1.4;color: #54595f;font-size: 18px;letter-spacing: 3px;font-weight: 400;font-family: "Noto Serif TC", serif;margin-top: 10px;} .bannerwrap{width: 100%;display: flex;justify-content: center;align-items: center;position: relative;} .bannerwrap .bgTxt.title{color: #ffffff;margin-bottom: 0px;position: absolute;z-index: 1;width: 100%;top: 50%;left: 50%;transform: translateX(-50%);display: none;} .bannerwrap .bgTxt.title h3{color:#ffffff} #AB004 { overflow: hidden; position: relative; margin: 60px 0 20px; padding: 50px 30px 40px; background-color: #f8f8f8; } #articleInfo16 .item {position: relative;display: flex;padding: 30px 0px 50px 0px;align-items: flex-start} #articleInfo16 .item .photo:before {content: "";position: absolute;bottom: 0;left: 0;display: block;height: 90%;width: 100%;background: #f5f5f5;z-index: -2;} #articleInfo16 .item .Txt { width: calc(100% - 520px )} #articleInfo16 .item .Txt .doctortitle {letter-spacing: 2px;font-size: 30px;color: #3a3a3a;border-bottom: 1px solid #e4e4e4;position: relative;padding: 20px 0px 20px 0;margin-bottom: 25px;padding-left: 90px} #articleInfo16 .item .Txt .doctortitle strong span { font-size: 14px; color: #3b3b3b; display: block; font-weight: 400; font-family: "Noto Serif TC", serif; } #articleInfo16 .item .Txt .doctortitle h2 {color: var(--primary);font-size: 20px;font-weight: 400;line-height: 1.5;display: flex;align-items: baseline;gap: 10px;} #articleInfo16 .item .Txt .doctortitle h2 span{ font-size: 40px; } #articleInfo16 .item .Txt .doctorexp {gap: 20px;display: flex;-webkit-box-pack: justify;justify-content: space-between;padding-left: 90px;flex-direction: column;} #articleInfo16 .item .Txt .doctorexp .doctorjob { font-size: 14px; color: #3c3c3c; line-height: 1.8}#articleInfo16 .item .Txt .doctorexp .doctorjob .subtitle, #articleInfo16 .item .Txt .doctorexp .doctorjob .subtitle span,#articleInfo16 .item .Txt .doctorexp .doctorjob .subtitle p{ font-size: 16px; color: #767372; letter-spacing: 2px; line-height: 200%; }#articleInfo16 .item .Txt .doctorexp .doctorjob .subtitle p{ margin-top: 30px; }#articleInfo16 .item .Txt .doctorexp .doctorjob .subtitle span{ color: var(--primary); vertical-align: bottom; font-weight: 500; } #articleInfo16 .item .Txt .doctorexp .doctorjob p{ font-size: 16px; line-height: 190%; letter-spacing: .5px; text-align: justify; font-weight: 400; font-size: 18px; } #articleInfo16 .item .Txt .doctorexp .doctorjob .classLink li {position: relative;padding: 0 0 0px 32px;margin: 0px 0px 2px 0px;line-height: 190%;letter-spacing: .5px;text-align: justify;font-weight: 400;font-size: 18px;} #articleInfo16 .item .Txt .doctorexp .doctorjob .classLink { position: relative} #articleInfo16 .item .Txt .doctorexp .doctorjob .classLink::before { content: ""; width: 1px; height: calc(100% - 30px); display: block; background-color: rgb(148 148 148 / 10%); position: absolute; top: 0; left: 12px} #articleInfo16 .item .Txt .doctorexp .doctorjob .classLink li a { color: #7a7a7a; line-height: 1.8; font-size: 15px} #articleInfo16 .item .Txt .doctorexp .doctorjob .classLink li:hover a { color: #d7a297} #articleInfo16 .item .Txt .doctorexp .doctorjob .classLink li::before { content: ""; width: 5px; height: 5px; display: block; background-color: #d2d2d2; position: absolute; top: 12px; left: 10px} #articleInfo16 .item .Txt .doctorexp .doctorjob h4 {margin-bottom: 10px;padding-bottom: 5px;position: relative;font-size: 22px;letter-spacing: 3px;font-weight: 500;} #articleInfo16 .item:nth-child(2n) { display: flex; flex-direction: row-reverse} #articleInfo16 .item:nth-child(2n) .photo { animation-name: fadeInRight; -webkit-animation-name: fadeInRight} #articleInfo16 .item .photo {background-repeat: no-repeat;max-width: 420px;width: 100%;position: relative} #articleInfo16 .item .photo img {width: 100%;aspect-ratio: 3.5/3;object-fit: cover;object-position: top;} #articleInfo16 .item .info { margin: 0 0 0 5%; width: 50%; animation-name: fadeInRight; -webkit-animation-name: fadeInRight; margin: 30px 0px 0px -30px; padding: 70px 80px 70px 80px; background-color: #F6F3EE; align-items: flex-start; flex-direction: column} #articleInfo16 .item:nth-child(2n) .info { animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; margin: 30px -30px 0px 0px} #articleInfo16 .item .info h5 { color: #C8B086; font-size: 14px; font-weight: 300} #articleInfo16 .item .info h3 { padding: 0 0 15px 0; margin-bottom: 15px; font-size: 1.6em; font-weight: 500; line-height: 1.3; color: #444444; border-bottom: 1px #e1d7c5 solid} #articleInfo16 .item .info article { margin: 0 15px} #articleInfo16 .item .resBox { display: flex} #articleInfo16 .item .resBox .text { width: 50%} #articleInfo16 .item .resBox .text h3 { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 10px; background-color: #C7E3E0; color: #444444; font-size: 18px; font-weight: 200; line-height: 2em} #articleInfo16 .item .resBox .text ol li { display: flex; position: relative; padding: 5px 0} #articleInfo16 .item .resBox .text ol li:after { content: ""; border-color: #ddd; border-top-style: dotted; border-top-width: 1px; position: absolute; bottom: 0; width: 100%; left: 0} #articleInfo16 .item .resBox .text ol li i { align-self: center; padding-right: 10px; color: #C8B086; font-size: 12px} .text-editor { margin: 30px 0px 0px 0px; padding: 50px 40px 40px 40px; background-color: #FFFFFF; background-image: url(/images/42/bg-testimonial.png); background-position: 30px 30px; background-repeat: no-repeat; background-size: 50px auto; box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 10%); animation-name: fadeInUp; -webkit-animation-name: fadeInUp; overflow: hidden} .text-editor p { margin-bottom: 1.3em; color: #7a7a7a; font-size: 18px} .text-editor p .alignright { display: inline; float: right; margin-left: 1.5em; width: 120px} .resBox .item:last-child .info { width: 100%; margin: 30px 0px 0px 30px} .resBox .dibox { padding: 60px 0; display: -webkit-box; display: -ms-flexbox; display: flex; animation-name: fadeInUp; -webkit-animation-name: fadeInUp} .resBox .dibox h3 {font-size: 22px;letter-spacing: 3px;font-weight: 500;-webkit-box-flex: 0;flex: 0 0 200px;} .resBox .dibox h3 strong {font-size: 18px;display: block;color: var(--primary);line-height: 100%;letter-spacing: 2px;font-weight: 500;margin-top: 10px;} .resBox .dibox .textEditor ul { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap} .resBox .dibox .textEditor ul li { width: 50%; padding-right: 20px} #articleInfo16 .textEditor { clear: both; font-size: 15px; color: #2f2f2f; line-height: 1.8} #articleInfo16 .gray { text-align: center; margin-bottom: 10px; } #articleInfo16 .textEditor .myTitle { font-weight: 700; font-size: 20px; color: #3a3a3a} #articleInfo16 .textEditor ol { list-style: decimal outside; padding-left: 30px} #articleInfo16 .dibox .textEditor h2{ margin: 10px 0; } #articleInfo16 .dibox .textEditor ol {padding: 0;display: flex;flex-direction: row;flex-wrap: wrap} #articleInfo16 .dibox .textEditor ol li {width: calc(( 100% / 1 ) - 40px);list-style-type: initial;list-style-position: inherit;margin: 0px 0px 2px 30px;padding: 0 30px 3px 0px;line-height: 190%;letter-spacing: .5px;text-align: justify;font-weight: 400;font-size: 18px;} #articleInfo20 ul { display: flex; margin: 40px 0 0; flex-direction: row; flex-wrap: wrap; } #articleInfo20 ul li{ width: calc(( 100% / 5 ) - 20px); margin: 10px; } @media (max-width: 767px) { #articleInfo16 .item .Txt .doctorexp .doctorjob {} .resBox .dibox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 0} .resBox .dibox h3 { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-bottom: 20px} .resBox .dibox .textEditor ul { padding: 0 20px} .resBox .dibox .textEditor ul li { width: 100%; padding-right: 0} #articleInfo16 .dibox .textEditor ol {/* padding: 0 20px; */margin: 0px 0 0px} #articleInfo16 .dibox .textEditor ol li { width: 100%; padding-right: 0} } @media screen and (max-width: 1280px) { #articleInfo16 .item .Txt { padding-left:55px; width: calc(100% - 220px )} #articleInfo16 .item .Txt .doctortitle { padding: 0px 0px 20px 0} #articleInfo16 .item { padding: 0px 0px 10px 0px} #articleInfo16 .item .Txt .doctorexp { padding: 0px 0px 20px 0} #AB004 { margin-bottom: 30px; padding: 30px 0 10px 0} #articleInfo16 .item .photo { max-width: 320px} } @media screen and (max-width: 960px) { #articleInfo16 .item .photo { width:100%} #articleInfo16 .item .Txt { padding-left: 0; width: calc(100% - 0px ); padding-top: 40px} #articleInfo16 .item:nth-child(2n) .photo { right: 0} #articleInfo16 .item .info { margin: 0; width: auto; padding: 15px 15px} #articleInfo16 .item:nth-child(2n) .info { margin: 0px 0px 0px 0px} #articleInfo16 .item:last-child .info { margin: 0px 0px 0px 0px; width: auto} #articleInfo16 .item .info h5,#articleInfo16 .item .info h3 { } #articleInfo16 .item .info h3 { padding: 0 0 15px 0%; font-size: 1.3em} #articleInfo16 .item:nth-child(2n) .info h5,#articleInfo16 .item:nth-child(2n) .info h3 { margin: 0 auto 0 0} #articleInfo16 .item,#articleInfo16 .item:nth-child(2n) { display: flex; flex-direction: column; align-items: center; padding: 0px 0px 10px 0px} .text-editor p .alignright { float: left; margin-left: 0; width: 100px} .text-editor { margin: 10px 0px 0px 0px; padding: 20px 20px 20px 20px; background-position: 5px 5px} #articleInfo16 .item .resBox .text ol li { font-size: 0.9em} #articleInfo16 .item .resBox .text h3 { font-size: 1em}#articleInfo20 ul li { width: calc((100% / 3) - 20px); }.bgTxt.title{ font-size: 32px; } } @media screen and (max-width: 480px) { #articleInfo16 .item > div,#articleInfo16 .item:nth-child(2n) > div { float:none} #articleInfo16 .item .photo { position: relative} #articleInfo16 .item .resBox { display: flex; flex-direction: column} #articleInfo16 .item .resBox .text { width: 100%; padding-bottom: 20px} .text-editor p { font-size: 0.9em; margin-bottom: 0.8em} #articleInfo16 .item .info h3 { font-size: 1.1em; padding: 0 0 5px 0%; margin-bottom: 10px} #articleInfo16 .item .Txt .doctorexp { display: flex; flex-direction: column; padding: 0} #articleInfo16 .item .Txt .doctorexp .doctorjob { width: 100%} #articleInfo16 .item .Txt .doctorexp .itemA06 { display: flex; align-items: center; justify-content: center; margin-top: 20px} #articleInfo16 .item .Txt .doctorexp .itemA06 .gray { margin: 0 5px}#articleInfo20 ul li { width: calc((100% / 1) - 20px); } }