/***** page-sub03.php --- 요양원 *****/

main#sub03_main {
	@import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css');
}
main#sub03_main .inner {width:100%;}
main#sub03_main .inner .top_visual {height:520px; width:100%;background: url(/wp-content/themes/jung/img/sub03/sub03_visual.jpg);background-repeat: norepeat; background-size:cover; background-position:0 40%;position: relative;animation: visual_ani 2s ease;}
main#sub03_main .inner .top_visual .txt {position: absolute; top:40%; left:6%;text-align:left;}

@keyframes visual_ani {
	0%{background-position:0 20%;}
	100%{background-position:0 40%;}
}
main#sub03_main .inner .top_visual .txt * {display:block; font-weight:700; color:#fff; text-shadow: 0 0 20px rgba(0,0,0,0.4);}
main#sub03_main .inner .top_visual .txt span {font-size: 30px; font-weight:500;}
main#sub03_main .inner .top_visual .txt em {font-size:54px; margin-top:16px;}

#sub03_main .bg {}
#sub03_main .bg:nth-child(2n) { margin: 60px 0; }
#sub03_main h2 {font-size: 2.25rem;}
/* 메인영역 */
#sub03_main .bg1 { width: 100%; height: 590px; background-image: url(/wp-content/themes/jung/img/sub03/bg1_main.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
#sub03_main .bg1 .top { padding: 180px 120px 0px; }
#sub03_main .bg1 .top h1 { font-size: 3.375rem; color: #fff; padding: 0 0 64px ; }
#sub03_main .bg1 .top p { font-size: 1.25rem; color: #fff; line-height: 1.5; }
#sub03_main .btm { font-size: 1.525rem; padding: 100px 0 140px; line-height: 1.5; text-align: center; margin-left: 100px; margin-right: 100px;}

#sub03_main .bg2 { /*width: 100%;*/ margin: 0 auto; }
#sub03_main .bg2 > * { width: 100%; display: flex; flex-flow: row nowrap; align-items: center; }
#sub03_main .bg2 > * *:last-child { /*width: calc((100 / 2) - 80px); */}
#sub03_main .bg2 .left {padding: 0 100px; width:calc(100%/1); justify-content: center; }
#sub03_main .bg2 .left p { /*width:calc(100%/3.5);flex-basis:20%;*/ width: 45%;}
#sub03_main .bg2 .left p img {/*width:calc(100%/0.8);*/ /*flex-basis: 100%;*/ width: 100%;}
#sub03_main .bg2 .left .info {}
#sub03_main .bg2 .left .info { padding-left: 40px; /*width:calc(100%/1.7);*/}
#sub03_main .bg2 .left .info h2 {}
#sub03_main .bg2 .left .info .txt {}
#sub03_main .bg2 .left .info .txt p::before { content: ''; width: 18px; height: 18px; margin-right: 10px; background-color: #ddd; border-radius: 50%; display: inline-block; }
#sub03_main .bg2 .left .info .txt p {font-size: 1.15rem; width:100%;padding: 0px 0 16px;letter-spacing: -0.05rem;}
#sub03_main .bg2 .left .info .txt p:first-child {padding: 60px 0 16px; width: 100%;}
#sub03_main .bg2 .left .info .txt p:last-child {}
#sub03_main .bg2 .left:last-child {margin: 100px 0 0; }
#sub03_main .bg2 .right { padding: 0 100px; flex-flow: row-reverse nowrap; margin: 100px 0 0; }
#sub03_main .bg2 .right .info { padding: 0 30px 0 0; }  
 
#sub03_main .bg3 {}
#sub03_main .bg3 h2::before { content: ''; width: 21px; height: 45px; margin-right: 10px; background-color: #4B4E68; display: inline-block; }
#sub03_main .bg3 h2 {}
#sub03_main .bg3 .scroll { overflow-x: scroll; overflow-y: hidden; padding: 0; margin: 50px 0; }
/* 하단 ~~~ 3개씩 보이는 ul (총6개) */
#sub03_main .bg3 .scroll ul { width: calc((100% / 3) * 6); display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; text-align: center; padding: 0; margin: 0; }
#sub03_main .bg3 .scroll ul li { width: calc((100% / 6) * 3); margin-right: 30px; }
#sub03_main .bg3 .scroll ul li:last-child {margin:0;}
#sub03_main .bg3 .scroll ul li a {display: inline-block;}
#sub03_main .bg3 .scroll ul li a img {width: 100%; border-radius: 30px;}
#sub03_main .bg3 .scroll ul li > a *:nth-child(2),
#sub03_main .bg3 .scroll ul li > a *:last-child {display: block;}
#sub03_main .bg3 .scroll ul li em { font-size: 1.875rem; padding: 40px 0 17px; font-weight: 600; } 
#sub03_main .bg3 .scroll ul li span { width: 80%; font-size: 1.375rem; font-weight: 500; margin: 0 auto; }


/* 여기부터 복사 240927 */
#sub03_main .wrap { display: block; width: 100%; text-align: center; width: 100%; background-color: #fff; margin: 140px auto; padding: 0 240px; letter-spacing: -0.4px; }
#sub03_main .wrap:last-child { margin-top: 0; }

#sub03_main .wrap a { display: inline-block; }

/* .txt * 공통 선택자 */
#sub03_main .wrap .txt { text-align: center; }
#sub03_main .wrap .txt .tit { font-size: 3rem; font-weight: 700; }
#sub03_main .wrap .txt .sub { font-size: 1.5rem; }
#sub03_main .wrap .txt span { line-height: 1.5; }
#sub03_main .wrap .txt > *:last-child {padding-top: 20px;}
/* flex - row nowrap 공통 선택자 */
#sub03_main .wrap .cont .flex { width:100%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }


#sub03_main .wrap-care-person {}
#sub03_main .wrap-care-person .cont {}
#sub03_main .wrap-care-person .cont .txt {}
#sub03_main .wrap-care-person .cont .txt .sub {}
#sub03_main .wrap-care-person .cont .txt .tit {}
#sub03_main .wrap-care-person .cont .list { margin-top: 60px; }
#sub03_main .wrap-care-person .cont .list > a { position: relative; /* << .num 상단에 붙이는 pst 속성 */ text-align: center; margin-right: 40px; width: calc(100% / 4); max-width: 330px; min-width: 120px; }
#sub03_main .wrap-care-person .cont .list > a:last-child { margin: 0; }
#sub03_main .wrap-care-person .cont .list > a > * { display: block; }
#sub03_main .wrap-care-person .cont .list > a .num { position: absolute; background-color: #222; color: #fff; width: 55px; line-height: 55px; border-radius: 50%;  top: 10px; left: 10px; font-size: 1.625rem;}
#sub03_main .wrap-care-person .cont .list > a img { width: 100%; }
#sub03_main .wrap-care-person .cont .list > a .txt { padding-top: 40px; }
#sub03_main .wrap-care-person .cont .list > a .txt > * { display: block; }
#sub03_main .wrap-care-person .cont .list > a .txt em { font-size: 1.625rem; font-weight: 700; }
#sub03_main .wrap-care-person .cont .list > a .txt span { font-size: 1.10rem; }
#sub03_main .wrap-sub-banner {}
#sub03_main .wrap-sub-banner .cont {}
#sub03_main .wrap-process {}
#sub03_main .wrap-process .cont {}
#sub03_main .wrap-process .cont .txt {}
#sub03_main .wrap-process .cont .txt .tit {}
#sub03_main .wrap-process .cont .txt .sub {}
#sub03_main .wrap-process .cont ul.process { margin-top: 80px; }
#sub03_main .wrap-process .cont ul.process li { background-color: #646782; width:242px; max-width:242px; padding: 46px 0; border-radius: 15px; }
#sub03_main .wrap-process .cont ul.process li:last-child { margin: 0; }
#sub03_main .wrap-process .cont ul.process li >  * { display: block; color: #fff; }
#sub03_main .wrap-process .cont ul.process li img { margin:0 auto; }
#sub03_main .wrap-process .cont ul.process li span.txt { padding-top: 20px; font-size: 1.625rem; font-weight: 500; }



@media screen and (max-width: 1680px) {
    #sub03_main .wrap { margin: auto 0; margin-top: 140px; margin-bottom: 140px; padding: 0 30px; }

    #sub03_main .wrap-process .cont ul.process {}
    #sub03_main .wrap-process .cont ul.process li { width: calc((100% - 80px) / 5); max-height:178px; overflow: hidden; }
}

@media screen and (max-width: 1180px) {
    #sub03_main .wrap { margin: 100px auto; padding: 0 20px; }

    #sub03_main .wrap .txt .tit { font-size: 2.25rem; }
    #sub03_main .wrap .txt .sub { font-size: 1.125rem; }

    #sub03_main .wrap-care-person .cont .list { width: 100%; align-items: flex-start;}
    #sub03_main .wrap-care-person .cont .list > a { width: calc(100% / 4); margin: 0; margin-right: 10px;}
    #sub03_main .wrap-care-person .cont .list > a:last-child {margin:0;}
    #sub03_main .wrap-care-person .cont .list > a .txt span { font-size: 1rem; }

    #sub03_main .wrap-process .cont ul.process li { height:auto; }
    #sub03_main .wrap-process .cont ul.process li img { width: 30px; max-width: 30px; min-width: 20px; }
    #sub03_main .wrap-process .cont ul.process li span.txt { font-size: 1.125rem; }
	
	#sub03_main .bg2 .left, #sub03_main .bg2 .right {flex-direction: column;}
	#sub03_main .bg2 .left p { width:60%;margin-bottom:30px;}
	#sub03_main .bg2 .left .info {padding-left:0;}
	#sub03_main .bg2 .left .info .txt p:first-child {padding:30px 0; margin-bottom:0;}
}

@media (max-width: 1024px) {
  #sub03_main .btm {font-size: 1.45rem;}
  #sub03_main .bg2 .left p {width: 80%;}
}

@media (max-width: 768px) {
  main#sub03_main .inner .top_visual .txt span {font-size: 25px;}
  main#sub03_main .inner .top_visual .txt em {font-size: 48px;}
  #sub03_main .btm {font-size: 1.2rem; padding: 80px 0 60px;}
  
  #sub03_main .bg2 .left {padding: 0 40px;}
  #sub03_main .bg2 .left p {width: 85%;}
  #sub03_main h2 {font-size: 1.6rem;}
  #sub03_main .bg2 .left .info .txt p {font-size: 1.15rem; width: 100%;}
  #sub03_main .wrap {margin:0; height: fit-content;}
  #sub03_main .wrap-care-person .cont {margin: 80px auto;}
  #sub03_main .wrap-process .cont {margin: 80px auto;}
}

@media (max-width : 725px) {
  #sub03_main .btm {margin-left: 40px; margin-right: 40px;}
  #sub03_main .wrap {padding:0;}
  #sub03_main .wrap-care-person .cont .list {margin-left: 40px; margin-right: 40px; padding:0; height: fit-content;}
  #sub03_main .wrap-care-person .cont .list {display: flex;flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;gap: 10px; padding-bottom: 50px; }
  #sub03_main .wrap-care-person .cont .list > a {flex: 0 0 70%;max-width: 260px;min-width: 200px;margin-right: 10px;}
  #sub03_main .wrap-care-person .cont .list > a:last-child {margin-right: 20px;}
  #sub03_main .wrap-care-person .cont .list::-webkit-scrollbar {height: 5px;}
  #sub03_main .wrap-care-person .cont .list::-webkit-scrollbar-track {background: transparent;border-radius: 5px;}
  #sub03_main .wrap-care-person .cont .list::-webkit-scrollbar-thumb {background: #9d9d9d; border-radius: 5px;} 
  
  #sub03_main .wrap-process .cont ul.process {display: flex;flex-wrap: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch; gap: 20px; padding-bottom: 10px;  height:fit-content; margin-left: 40px; }
  #sub03_main .wrap-process .cont ul.process li {flex: 0 0 70%;max-width: 220px;min-width: 180px;text-align: center;}
  #sub03_main .wrap-process .cont ul.process::-webkit-scrollbar {height: 5px;}
  #sub03_main .wrap-process .cont ul.process::-webkit-scrollbar-track {background:transparent; border-radius: 5px;}
  #sub03_main .wrap-process .cont ul.process::-webkit-scrollbar-thumb {background: #9d9d9d; border-radius: 5px;}
}

@media (max-width: 425px) {
  main#sub03_main .inner .top_visual .txt span {font-size: 22px;}
  main#sub03_main .inner .top_visual .txt em {font-size: 45px;}
  
  #sub03_main .btm {margin-left: 20px; margin-right: 20px; font-size: 1.18rem;}
  #sub03_main .bg2 .left {padding:0 20px;}
  #sub03_main .bg2 .left p {width:100%;}
  #sub03_main h2 {line-height: 1.5; width: calc(100%/1.2);}
  #sub03_main .bg2 .left .info .txt p {line-height: 1.5;}
  #sub03_main .bg2 .right {margin: 80px 0 0;}
  
  #sub03_main .wrap-care-person .cont {margin: 80px 20px;}
  #sub03_main .wrap-care-person .cont .txt {text-align:Left;}
  #sub03_main .wrap-care-person .cont .list {margin-left : 0 ; margin-right: 0;}
  #sub03_main .wrap-care-person .cont .list {padding-bottom: 20px;}
  
  #sub03_main .wrap-process .cont ul.process {margin-left: 0; margin-right: 0;}
  #sub03_main .wrap-process .cont {margin: 80px 20px;}
  #sub03_main .wrap-process .cont .txt {text-align: left;}
  #sub03_main .wrap-process .cont ul.process li span.txt {text-align:center;}
}

@media (max-width: 320px){ 
  main#sub03_main .inner .top_visual .txt span {font-size: 18px;}
  main#sub03_main .inner .top_visual .txt em {font-size: 35px;}
  
  #sub03_main .btm {text-align: Left;}
  #sub03_main h2 {width: calc(100%/1);}
  #sub03_main .bg2 .right .info {padding: 0;}
  
  #sub03_main .wrap-care-person .cont .list, #sub03_main .wrap-process .cont ul.process {margin-top: 30px;}
}
/*@media screen and (max-width: 880px) {
    #sub03_main .wrap {}

    #sub03_main .wrap-care-person .cont .list > a { width: calc((100% - 30px) / 4); }
    #sub03_main .wrap-care-person .cont .list > a .num { width: 30px; line-height: 30px; font-size: 1rem; top: 4px; left: 4px; }
    #sub03_main .wrap-care-person .cont .list > a .txt { padding-top: 20px;}
    #sub03_main .wrap-care-person .cont .list > a .txt em { font-size: 1.25rem;}
    #sub03_main .wrap-care-person .cont .list > a .txt span {padding-top: 10px; font-size: 0.875rem;}

    #sub03_main .wrap-process .cont ul.process { margin-top: 50px; flex-flow: row wrap; justify-content: space-around; }
    #sub03_main .wrap-process .cont ul.process li { width: 135px; min-height: 100px; max-height: 135px; padding: 30px 0; }
    #sub03_main .wrap-process .cont ul.process li:nth-child(4),
    #sub03_main .wrap-process .cont ul.process li:last-child {margin-top: 10px;}
	
	#sub03_main .btm {margin-left: 60px; margin-right:60px; font-size: 1.5rem;}
	#sub03_main .bg2 .left p { width:80%;margin-bottom:30px;}
	#sub03_main h2 {font-size:1.9rem;}
	#sub03_main .bg2 .left .info .txt p:first-child, #sub03_main .bg2 .left .info .txt p:last-child {font-size:1.2rem;}
}

@media screen and (max-width: 600px) {

    #sub03_main .wrap-care-person .cont .list { flex-flow: row wrap; align-items: center; justify-content: center; }
    #sub03_main .wrap-care-person .cont .list > a { width: calc((100% - 30px) / 2); margin-right: 0; margin-top: 30px; }
    #sub03_main .wrap-care-person .cont .list > a:first-child,
    #sub03_main .wrap-care-person .cont .list > a:nth-child(2) {margin: 0;}
    #sub03_main .wrap-care-person .cont .list > a:nth-child(2n) {margin-left: 10px;}
    #sub03_main .wrap-care-person .cont .list > a:last-child { margin-top: 30px; }
}

@media (max-width: 425px){
main#sub03_main .inner .top_visual .txt span {font-size: 22px;}
main#sub03_main .inner .top_visual .txt em {font-size:40px;}
#sub03_main .btm {margin-left: 26px; margin-right:26px; font-size: 20px; text-align: left; padding:80px 0;}
#sub03_main .bg2 .left {padding: 0 20px;}
#sub03_main .bg2 .left p {width:100%;}
#sub03_main h2 {font-size: 24px; width:85%;}
#sub03_main .bg2 .left .info .txt p:first-child, #sub03_main .bg2 .left .info .txt p:last-child {font-size:17px;}

}*/