#sub_visual{position:relative; text-align:center; height:36rem; background-position:center; background-repeat:no-repeat; background-size:cover;display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; align-items:center;} #sub_visual section{position:relative; z-index:4; color:#FFF;} #sub_visual section h2{ font-size:2em; font-weight:700; } #sub_visual section h2:before{display: block; content:'GOOD FRIENDS DENTAL CLINIC'; font-size: 2rem; font-weight: 300; letter-spacing: .15em;} @media (max-width:850px){ #sub_visual{height:40vw; } #sub_visual section h2{ font-size:7vw; } #sub_visual section h2:before{font-size: 1.3rem; } } .sub_container {padding:5em 0; z-index:1; } .sub_container.skin_page{ padding: 0; } .pageContent{ font-size:1em; line-height:150%; position:relative; zoom:1; word-break:keep-all;} .pageContent:after {display:block;visibility:hidden;clear:both;content:""} .pageContent .fmm{font-family:"Noto Serif KR", sans-serif;} .pageContent .fmK{font-family: 'InkLiquid'; } @media (max-width:1300px){ .sub_container {padding:5vw 0; margin:0 4vw; width:auto;} } @media (max-width:750px){ .pageContent{ font-size:14px; } } .pageContent h3, .pageContent h4, .pageContent h5, .pageContent h6{position:relative; margin:0; line-height:140%;} .pageContent h3{font-size:3em; } .pageContent h4{font-size:2em; } .pageContent h5{font-size:1.6em} .pageContent h6{font-size:1.1em } @media (max-width:750px){ .pageContent h3{font-size:1.4em; } .pageContent h4{font-size:1.3em; } .pageContent h5{font-size:1.2em; } .pageContent h6{font-size:1.1em; } } .pageContent .bold{font-weight:600} .pageContent .fine{font-weight:300} .pageContent .tc{text-align:center;} .pageContent .tl{text-align:left} .pageContent .tr{text-align:right} .pageContent .tj{text-align:justify} .pageContent img{max-width:100%} .pageContent p{padding:.3em 0; } .pageContent .dib{display:inline-block;} .pageContent .js_bg{background-size:cover; background-position:center; } .pageContent ul{padding:0; margin:0; list-style-type: none; } .pageContent li{position:relative; margin:.3em 0; text-align:left; line-height:140%; padding-left:.6em; } .pageContent ul > li:before{position:absolute;top:.55em; left:0; content:""; width: .3em; height:.3em; background-color: var(--text-primary); opacity: .5;} .pageContent ol{padding:0 0 0 0; list-style-type: none; counter-reset:sign-num;} .pageContent ol > li:before{position:absolute; left:0; counter-increment:sign-num; content:counter(sign-num)'.'; overflow:hidden; text-align:center; text-align:right; width:1.2em; } .pageContent ul.uls_1 > li{padding-left: 1.5em;} .pageContent ul.uls_1 > li:before{content:"\ee609"; font-family:'iconfont'; top:.2em; width: 2em; line-height: 2em; height:2em; background-color:var(--primary); color: var(--text-anti-primary); border-radius: 50%; opacity: 1; font-size: .6em; text-align: center; transform: scale(.8);} .pageContent ol.ols_1{counter-reset: list-counter 0; } .pageContent ol.ols_1 > li{padding-left:2em} .pageContent ol.ols_1 > li:before{content: counter(list-counter, decimal-leading-zero); counter-increment: list-counter 1; width:1.6em; height:1.6em; border-radius:50%; background:var(--primary); color:var(--text-anti-primary);text-align:center; font-size: .8em;} .pageContent ul.uls_2 > li{padding-left:2em} .pageContent ul.uls_2 > li:before{content:""; background:url(/sub/img/check_icon1.svg) center no-repeat; width:1.4em; height:1.4em; background-size:auto 100%;} .pageContent ul.uls_3 > li{padding-left:2em} .pageContent ul.uls_3 > li:before{content:""; background:url(/sub/img/check_icon2.svg) center no-repeat; width:1.4em; height:1.4em; background-size:auto 100%;} .pageContent ul.svg_icon > li{padding-left:1.5em} .pageContent ul.svg_icon > li:before { --c:var(--primary); content: ''; position: absolute; left: 0; top: .2em; background:var(--c); width: 1em; /* SVG 雱堧箘 */ height: 1em; /* SVG 雴掛澊 */ fill: currentColor; /* 順勳灛 旮€鞛� 靸夓儊 靷毄 */ mask: url('data:image/svg+xml;utf8,'); mask-size: contain; /* 毵堨姢韥� 韥赴 臁办爼 */ mask-repeat: no-repeat; /* 氚橂车 氚╈ */ } .pageContent ol[data-list-type="bracket"] {counter-reset:bracket;} .pageContent ol[data-list-type="bracket"] > li {padding-left:2em;counter-increment:bracket;} .pageContent ol[data-list-type="bracket"] > li:first-child {margin-top:0;} .pageContent ol[data-list-type="bracket"] > li:before {content:'('counter(bracket)')';display:block;position:absolute;left:0; width:1.4em; } .pageContent ol[data-list-type="hangul"] { padding-left:2em} .pageContent ol[data-list-type="hangul"] > li{ padding-left:0; } .pageContent ol[data-list-type="hangul"] > li:before{display:none; } .pageContent ol[data-list-type="hangul"] > li {list-style:hangul;} .pageContent ol[data-list-type="decimal"] { padding-left:2em} .pageContent ol[data-list-type="decimal"] > li{ padding-left:0; } .pageContent ol[data-list-type="decimal"] > li:before{display:none; } .pageContent ol[data-list-type="decimal"] > li {list-style:decimal;} .pageContent ol[data-list-type="decimal-circle"] {counter-reset:decimal-circle;} .pageContent ol[data-list-type="decimal-circle"] > li {padding-left:2em; counter-increment:decimal-circle;} .pageContent ol[data-list-type="decimal-circle"] > li:before {position:absolute; content:counter(decimal-circle); left:0;width:1.4em;height:1.4em;font-size:1em;line-height:1.4em;text-align:center;text-indent:-1px;white-space:nowrap;border-radius:50%;border:1px solid #666;} @media (min-width:750px){ .pageContent .w2{ display: -webkit-flex; display: flex; justify-content:space-between; flex-flow:wrap;} .pageContent .w2 > li{width:49%; } } .pageContent u{text-decoration:underline; text-decoration-thickness: 0.05em;text-underline-position: under; } .pageContent .link{text-decoration:underline; color:#1d70bd} .pageContent i{font-style:italic; } .pageContent .iconfont{font-style:normal; } .pageContent em{font-style:italic; } .pageContent small{font-size:.8em; opacity:.8} .pageContent .small{font-size:.8em; opacity:.8} .pageContent big{font-size:1.2em } .pageContent .big{font-size:1.2em } .pageContent sub .pageContent sup {font-size:.8em;} .pageContent dl.dl{overflow:hidden; position:relative; margin:10px 0} .pageContent dl.dl dt{float:left;clear:both; padding-bottom:6px; } .pageContent dl.dl dd{_display:inline-block;overflow:hidden;padding-bottom:6px; zoom:1} .pageContent dl.dl dd:after{display:block;clear:both;content:''} .cfM{color:var(--primary); } .cfML{color:var(--primary-light); } .cfMD{color:var(--primary-dark); } .cfS{color:var(--success); } .cfW{color:var(--warning); } .cfD{color:var(--danger); } .cfI{color:var(--info); } .cfG{color:var(--bg-greay); } .cfb{color:#000; } .cfw{color:#FFF; } .cfr{color: #be0a0c;} .cbM{background:var(--primary); color: var(--text-anti-primary); } .cbML{background:var(--primary-light);} .cbMD{background:var(--primary-dark); color: var(--text-anti-primary); } .cbS{background:var(--success); color: var(--text-anti-primary); } .cbW{background:var(--warning); color: var(--text-anti-primary); } .cbD{background:var(--danger); color: var(--text-anti-primary); } .cbG{background:var(--bg-greay); color: var(--text-primary); } .cbw{background:#FFF; } .pageContent .nmt{margin-top:0;} .pageContent .round{display:inline-block; border-radius:1em; } .pageContent .fw100{font-weight:100} .pageContent .fw300{font-weight:300} .pageContent .fw350{font-weight:350} .pageContent .fw400{font-weight:400} .pageContent .fw500{font-weight:500} .pageContent .fw600{font-weight:600} .pageContent .fw700{font-weight:700} .pageContent .fw800{font-weight:800} .pageContent .fw900{font-weight:900} .pageContent .op1{ opacity:.1} .pageContent .op2{ opacity:.2} .pageContent .op3{ opacity:.3} .pageContent .op4{ opacity:.4} .pageContent .op5{ opacity:.5} .pageContent .op6{ opacity:.6} .pageContent .op7{ opacity:.7} .pageContent .op8{ opacity:.8} .pageContent .op9{ opacity:.9} .pageContent .ls-05{ letter-spacing:-.05em} .pageContent .ls-1{ letter-spacing:-.1em} .pageContent .ls-2{ letter-spacing:-.2em} .pageContent .ls-3{ letter-spacing:-.3em} .pageContent .ls-4{ letter-spacing:-.4em} .pageContent .ls-5{ letter-spacing:-.5em} .pageContent .ls1{ letter-spacing:.1em} .pageContent .ls2{ letter-spacing:.2em} .pageContent .ls3{ letter-spacing:.3em} .pageContent .ls4{ letter-spacing:.4em} .pageContent .ls5{ letter-spacing:.5em} .pageContent .ls6{ letter-spacing:.6em} .pageContent .ls7{ letter-spacing:.7em} .pageContent .ls8{ letter-spacing:.8em} .pageContent .ls9{ letter-spacing:.9em} .pageContent .ls10{ letter-spacing:1em} .pageContent .pd-1{padding-top:.1em; padding-bottom:.1em} .pageContent .pd-2{padding-top:.2em; padding-bottom:.2em} .pageContent .pd-3{padding-top:.3em; padding-bottom:.3em} .pageContent .pd-4{padding-top:.4em; padding-bottom:.4em} .pageContent .pd-5{padding-top:.5em; padding-bottom:.5em} .pageContent .pd-6{padding-top:.6em; padding-bottom:.6em} .pageContent .pd-7{padding-top:.7em; padding-bottom:.7em} .pageContent .pd-8{padding-top:.8em; padding-bottom:.8em} .pageContent .pd-9{padding-top:.9em; padding-bottom:.9em} .pageContent .pd1{padding-top:1em; padding-bottom:1em} .pageContent .pd1-5{padding-top:1.5em; padding-bottom:1.5em} .pageContent .pd2{padding-top:2em; padding-bottom:2em} .pageContent .pd2{padding-top:2.5em; padding-bottom:2.5em} .pageContent .pd3{padding-top:3em; padding-bottom:3em} .pageContent .pd4{padding-top:4em; padding-bottom:4em} .pageContent .pd5{padding-top:5em; padding-bottom:5em} .pageContent .pd6{padding-top:6em; padding-bottom:6em} .pageContent .pd7{padding-top:7em; padding-bottom:7em} .pageContent .pd8{padding-top:8em; padding-bottom:8em} .pageContent .pd9{padding-top:9em; padding-bottom:9em} .pageContent .pd10{padding-top:10em; padding-bottom:10em} .pageContent .pd12{padding-top:12em; padding-bottom:12em} .pageContent .pdw-1{padding-left:.1em; padding-right:.1em} .pageContent .pdw-2{padding-left:.2em; padding-right:.2em} .pageContent .pdw-3{padding-left:.3em; padding-right:.3em} .pageContent .pdw-4{padding-left:.4em; padding-right:.4em} .pageContent .pdw-5{padding-left:.5em; padding-right:.5em} .pageContent .pdw-6{padding-left:.6em; padding-right:.6em} .pageContent .pdw-7{padding-left:.7em; padding-right:.7em} .pageContent .pdw-8{padding-left:.8em; padding-right:.8em} .pageContent .pdw-9{padding-left:.9em; padding-right:.9em} .pageContent .pdw1{padding-left:1em; padding-right:1em} .pageContent .pdw1-5{padding-left:1.5em; padding-right:1.5em} .pageContent .pdw2{padding-left:2em; padding-right:2em} .pageContent .pdw2-5{padding-left:2.5em; padding-right:2.5em} .pageContent .pdw3{padding-left:3em; padding-right:3em} .pageContent .pdw4{padding-left:4em; padding-right:4em} .pageContent .pdw5{padding-left:5em; padding-right:5em} .pageContent .pdw6{padding-left:6em; padding-right:6em} .pageContent .pdw7{padding-left:7em; padding-right:7em} .pageContent .pdw8{padding-left:8em; padding-right:8em} .pageContent .pdw9{padding-left:9em; padding-right:9em} .pageContent .pdw10{padding-left:10em; padding-right:10em} .pageContent .pdw12{padding-left:12em; padding-right:12em} @media (max-width:750px){ .pageContent .pd-1{padding-top:.05em; padding-bottom:.05em} .pageContent .pd-2{padding-top:.1em; padding-bottom:.1em} .pageContent .pd-3{padding-top:.15em; padding-bottom:.15em} .pageContent .pd-4{padding-top:.2em; padding-bottom:.2em} .pageContent .pd-5{padding-top:.25em; padding-bottom:.25em} .pageContent .pd-6{padding-top:.3em; padding-bottom:.3em} .pageContent .pd-7{padding-top:.35em; padding-bottom:.35em} .pageContent .pd-8{padding-top:.4em; padding-bottom:.4em} .pageContent .pd-9{padding-top:.45em; padding-bottom:.45em} .pageContent .pd1{padding-top:.5em; padding-bottom:.5em} .pageContent .pd1-5{padding-top:.75em; padding-bottom:.75em} .pageContent .pd2{padding-top:1em; padding-bottom:1em} .pageContent .pd2{padding-top:1.25em; padding-bottom:1.25em} .pageContent .pd3{padding-top:1.5em; padding-bottom:1.5em} .pageContent .pd4{padding-top:2em; padding-bottom:2em} .pageContent .pd5{padding-top:2.5em; padding-bottom:2.5em} .pageContent .pd6{padding-top:3em; padding-bottom:3em} .pageContent .pd7{padding-top:3.5em; padding-bottom:3.5em} .pageContent .pd8{padding-top:4em; padding-bottom:4em} .pageContent .pd9{padding-top:4.5em; padding-bottom:4.5} .pageContent .pd10{padding-top:5em; padding-bottom:5em} .pageContent .pd12{padding-top:6em; padding-bottom:6em} .pageContent .pdw-1{padding-left:.1em; padding-right:.1em} .pageContent .pdw-2{padding-left:.1em; padding-right:.1em} .pageContent .pdw-3{padding-left:.15em; padding-right:.15em} .pageContent .pdw-4{padding-left:.2em; padding-right:.2em} .pageContent .pdw-5{padding-left:.25em; padding-right:.25em} .pageContent .pdw-6{padding-left:.3em; padding-right:.3em} .pageContent .pdw-7{padding-left:.35em; padding-right:.35em} .pageContent .pdw-8{padding-left:.4em; padding-right:.4em} .pageContent .pdw-9{padding-left:.45em; padding-right:.45em} .pageContent .pdw1{padding-left:.5em; padding-right:.5em} .pageContent .pdw1-5{padding-left:.75em; padding-right:.75em} .pageContent .pdw2{padding-left:1em; padding-right:1em} .pageContent .pdw2{padding-left:1.25em; padding-right:1.25em} .pageContent .pdw3{padding-left:1.5em; padding-right:1.5em} .pageContent .pdw4{padding-left:2em; padding-right:2em} .pageContent .pdw5{padding-left:2.5em; padding-right:2.5em} .pageContent .pdw6{padding-left:3em; padding-right:3em} .pageContent .pdw7{padding-left:3.5em; padding-right:3.5em} .pageContent .pdw8{padding-left:4em; padding-right:4em} .pageContent .pdw9{padding-left:4.5em; padding-right:4.5} .pageContent .pdw10{padding-left:5em; padding-right:5em} .pageContent .pdw12{padding-left:6em; padding-right:6em} } .pageContent .w5em{width:5em;} .pageContent .w6em{width:6em;} .pageContent .w7em{width:7em;} .pageContent .w8em{width:8em;} .pageContent .w9em{width:9em;} .pageContent .w10em{width:10em;} .pageContent .w12em{width:12em;} .pageContent .w15em{width:15em;} .pageContent .w18em{width:18em;} .pageContent .w20em{width:20em;} .pageContent .w10p{width:10%;} .pageContent .w20p{width:20%;} .pageContent .w30p{width:30%;} .pageContent .w40p{width:40%;} .pageContent .w50p{width:50%;} .pageContent .w60p{width:60%;} .pageContent .w70p{width:70%;} .pageContent .w80p{width:80%;} .pageContent .w90p{width:90%;} .pageContent .w100p{width:100%;} .pageContent .lh-8{ line-height:.8em} .pageContent .lh-9{ line-height:.9em} .pageContent .lh1{ line-height:1em} .pageContent .lh11{ line-height:1.1em} .pageContent .lh12{ line-height:1.2em} .pageContent .lh13{ line-height:1.3em} .pageContent .lh14{ line-height:1.4em} .pageContent .lh15{ line-height:1.5em} .pageContent .lh16{ line-height:1.6em} .pageContent .lh17{ line-height:1.7em} .pageContent .lh18{ line-height:1.8em} .pageContent .lh19{ line-height:1.9em} .pageContent .lh20{ line-height:2em} .pageContent .lh30{ line-height:3em} .pageContent .lh40{ line-height:4em} .pageContent .title{z-index:1; margin:0; padding:.3em 0; overflow:hidden; } .pageContent .title:before{ display:block; font-size: 2rem; font-weight: 300; letter-spacing: .15em;} .pageContent .title:before {content: "GOOD FRIENDS DENTAL CLINIC"; font-weight: 300;} .pageContent .title.custom:before {content: attr(data-text);} .pageContent .title2{color: var(--primary); font-weight: 700;padding-left:.5em; margin-top:.8em;} .pageContent .title2:before{position:absolute;height:1em; left:0; top:50%; transform: translateY(-50%); width: .3em; background-color: var(--text-primary); opacity: .3; content:""} @media (max-width:750px){ .pageContent .title:before{font-size: 1.2rem;} } .pageContent section{position:relative;} .pageContent article{position:relative;} .full_img{position:relative; left:50%; width:200vw; margin-left:-100vw; text-align:center; } .full_img img{max-width:none} .full_img_bg{position:absolute; top:0; bottom:0; overflow:hidden; z-index:-1; left:50%; width:200vw; margin-left:-100vw; text-align:center; } .full_img_bg img{max-width:none} .pageContent .full_bg{position:absolute; top:0; left:50%; bottom:0; width:100vw; margin-left:-50vw; background-position:center; background-repeat:no-repeat; z-index:-1;} .pageContent .full_bg.cover{background-size:cover; } .pageContent .full_bg.fixed{background-attachment:fixed;} .pageContent .full_bg.fixed_sc{background-attachment:fixed;} @media (max-width:1200px){ .pageContent .full_bg{ margin-left:-4vw; left:0; background-size:cover; } .pageContent .mcover{background-size:cover; } } .table_s{width:100%;border-top:2px solid var(--primary-dark);} .table_s thead th{padding:.6em;border:1px solid var(--border-primary); border-top:2px solid var(--primary-dark); border-bottom:2px solid var(--primary-dark); font-weight:500;} .table_s thead td{padding:.6em; border:1px solid var(--border-primary);border-top:2px solid var(--primary-dark); border-bottom:2px solid var(--primary-dark); font-weight:500;} .table_s tbody th{padding:.6em; border:1px solid var(--border-primary);text-align:center; } .table_s tbody td{padding:.6em; border:1px solid var(--border-primary); } .table_s tfoot th{padding:.6em; border:1px solid var(--border-primary); background:var(--bg-secondary)} .table_s tfoot td{padding:.6em; border:1px solid var(--border-primary); background:var(--bg-secondary)} .table_s{border-left:2px solid transparent;border-right:2px solid transparent} @media (max-width:750px){ .table_sc{width:100%; position:relative; overflow-x:auto;} .table_sc .table_s{width:auto; white-space: nowrap;} .table_s thead th{ padding:.5em .3em; } .table_s thead td{ padding:.3em; } .table_s tbody th{ padding:.3em; } .table_s tbody td{ padding:.3em; } } .table_s.fixed{table-layout:fixed} .s1_1 .ss1 dl{font-size:.88em; width: fit-content; margin:0 auto;margin-top:2em;} .s1_1 .ss1 dl dd{background-color: var(--bg-primary); color: var(--text-primary); padding:1em 2em; border-radius: 2em;;margin:.5em 0;} .s1_1 .ss1 dl dd h5{font-weight: 700;} .s1_1 .ss1 dl dd p{padding:0;} .s1_1 .ss2{display: flex; justify-content: center; flex-wrap: wrap; gap: .5em;} .s1_1 .ss2 p{background-color: var(--primary); color: var(--text-anti-primary);} .s1_1 .ss3{display: flex; justify-content: center; flex-wrap: wrap; gap:2em .5em; margin-top:2em;} .s1_1 .ss3 dd{position: relative;} .s1_1 .ss3 dd strong{position: absolute; background-color: var(--primary); color:var(--primary-light); font-size: 1.76em; top: 0; left:0; width:1.4em; line-height: 1.4em;} .s1_1 .ss3 dd h4{font-weight: 700; color: var(--primary); margin-top: .5em;} .s1_1 .ss4{display: flex; gap: 2em;} .s1_1 .ss5{display: flex; justify-content: space-between; flex-wrap: wrap; text-align: left; margin-top: 2em;} .s1_1 .ss5.dtr dt{order:2;} .s1_1 .ss5 dd{width: 48%; display: flex; justify-content: center; flex-direction: column;} .s1_1 .ss5 dd h5{border-bottom:1px solid var(--text-primary); padding-bottom:.5em; margin-bottom: .5em;} @media (max-width:750px){ .s1_1 .ss1 dl{padding:0 1em} .s1_1 .ss1 dl dd{padding:1em; border-radius: 1em;} .s1_1 .ss2{display: flex; justify-content: center; flex-wrap: wrap; gap: .5em;} .s1_1 .ss2 dd{width:45%;} .s1_1 .ss2 p{background-color: var(--primary); color: var(--text-anti-primary);} .s1_1 .ss3{gap:2em .5em; margin-top:2em;} .s1_1 .ss3 dd{width: 30%; flex-grow: 1;} .s1_1 .ss3 dd strong{font-size: 1.2em; } .s1_1 .ss3 dd h4{font-size:1.2em} .s1_1 .ss3 dd p{font-size:.9em} .s1_1 .ss4{display: flex; gap: 2em;} .s1_1 .ss4{flex-wrap: wrap;} .s1_1 .ss4 dt{width:100%} .s1_1 .ss4 dd{width:100%; text-align: center;} .s1_1 .ss5{display: block; margin-top: 2em;} .s1_1 .ss5 dd{width: auto; display:block; margin-top: 1em;} } .s1_2 .ss1{display: flex; justify-content: center; gap: 4em;} .s1_2 .ss1 p{font-size: .8em; line-height: 1.4;} .s1_2 .ss1 dt{order:2;} .s1_2 .ss2{display: flex ; justify-content: center; gap: 2em;} .s1_2 .ss2 dt{width: 50rem; position: relative;} .s1_2 .ss2.dtr dt{order:2} .s1_2 .ss2 dd{display: flex; flex-direction: column; justify-content: center;} .s1_2 .ss2 dd .name{border-bottom: 1px solid var(--text-primary); padding-bottom:.6em; display: flex; margin-bottom: .6em;} .s1_2 .ss2 dd .name strong{font-size: 2.2em; color: var(--primary); margin-right: .3em;} .s1_2 .ss3{display: flex ; justify-content: center; gap: 1em; flex-wrap: wrap; margin-top: 2em;} @media (max-width:750px){ .s1_2 .ss1{display: block;} .s1_2 .ss1 p{font-size:1em; line-height: 1.4;} .s1_2 .ss1 dd{margin-top: 1em;} .s1_2 .ss1 dt{aspect-ratio: 1; } .s1_2 .ss1 dt img{width: 100%; height:100%; object-fit: cover;} .s1_2 .ss2{display:block;} .s1_2 .ss2 dt{width:14rem; float:right;} .s1_2 .ss2 dd{display: block} .s1_2 .ss2 dd .name{border-bottom: 1px solid var(--text-primary); padding-bottom:.6em; display: flex; margin-bottom: .6em;} .s1_2 .ss2 dd .name strong{font-size: 2.2em; color: var(--primary); margin-right: .3em;} .s1_2 .ss3{display: flex ; justify-content: center; gap: .5em; flex-wrap: wrap; margin-top: 2em;} .s1_2 .ss3 dd{width:8em} } #visit{max-width: 1200px; margin: 0 auto; margin-top: 2em;} #visit section{position:relative; overflow:hidden; padding:0; } #visit section dl dd{text-align:center ; } #visit .controll{ position:absolute; top:50%; left:0; right:0; z-index:3;} #visit .controll button{ background:transparent; position:absolute; top:-1em; width:2em; height:2em; font-size:1em; background:rgba(0,0,0,.2); border:0; color:#FFF; border-radius: 50%;} #visit .controll .swiper_prev{left:1em; transform:rotateY(180deg)} #visit .controll .swiper_next{right:1em;} #visit aside{position:relative; overflow: hidden; margin-top: 2em;} #visit aside dd{position:relative; cursor:pointer; } #visit aside dd img{width:100%; height:auto; } #visit aside dd div{ padding-top:65%; background-position:center; background-size:cover; } #visit aside dd.swiper-slide:after{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); content:"";} #visit aside dd.swiper-slide-thumb-active:after{ background:rgba(0,0,0,0); } @media (max-width:767px){ #visit section .controll{ display:none;} } #pageLocation{position: relative; display: grid; grid-template-columns: 80rem 1fr ;} #pageLocation .root_daum_roughmap{position: relative; height: 100rem;width: 100%; order:2} #pageLocation .root_daum_roughmap .wrap_map{height: 100%; width: 100%;} #pageLocation > article{position: relative; background:url(../sub/img/1_4_0.jpg); color: var(--text-anti-primary); padding:3em 0 3em 1em; z-index:2; font-size:1.16em; display: flex; justify-content: center; flex-direction: column; } #pageLocation > article h4{font-size: 2em; font-weight: 700;} #pageLocation > article ul{margin-top:1em;} #pageLocation > article ul li{ margin-top:.6em; display: flex; gap:.5em; padding:0} #pageLocation > article ul li:before{display: none;} #pageLocation > article ul li label{display: flex; justify-content: space-between; background-color: var(--text-anti-primary); color:var(--primary); border-radius: .6em; padding:0 .6em; width:4.5em; font-weight: 700; } #pageLocation > article ul li label i{font-style: normal;} #pageLocation > article ul li em{background-color: #FEAB34; padding:0 .4em; color: var(--text-primary); font-style: normal;} #pageLocation > article ul li strong{font-size:1.6em; line-height:.7em} #pageLocation > article p{margin-top: 1em;} .s1_4 .location article{margin-top:2em} .s1_4 .location > dl{display: flex; justify-content: space-between; text-align: left;} .s1_4 .location > dl h5{font-weight: 700; font-size: 3rem; margin-bottom:.6em;} .s1_4 .location > dl h5 img{width: 2em;} .s1_4 .location > dl > dt{width: 63rem;} .s1_4 .location > dl > dt figure{} .s1_4 .location > dl > dt dl{display: grid; grid-template-columns: 2em 1fr; margin-top:1em; gap: 1em;} .s1_4 .location > dl > dt dl dd{display: flex; justify-content: center; flex-direction: column; } .s1_4 .location > dl > dd{ font-size: 3rem;} .s1_4 .location > dl > dd .line{display: inline-block; width:6em; text-align: center; padding:.2em; border-radius: .3em; color:#FFF;} .s1_4 .location > dl > dd .line.s1{background-color: #889823;} .s1_4 .location > dl > dd .line.s2{background-color: #6175F5;} .s1_4 .location > dl > dd .line.s3{background-color: #43AE18;} .s1_4 .location > dl > dd .line.s4{background-color: #60BD3B;} .s1_4 .location > dl > dd .bus dd{margin-top:1em} @media (max-width:750px){ #pageLocation{ display: block; } #pageLocation .root_daum_roughmap{height: 80vw;} #pageLocation > article{padding:2em 0 2em 1em; z-index:2; font-size:.95em;} .s1_4 .location article{margin-top:1em} .s1_4 .location > dl{display: block;} .s1_4 .location > dl h5{font-weight: 700; font-size: 2rem; margin-bottom:.6em; margin-top: 1em;} .s1_4 .location > dl h5 img{width: 2em;} .s1_4 .location > dl > dt{width: auto;} .s1_4 .location > dl > dt figure{} .s1_4 .location > dl > dt dl{display: grid; grid-template-columns: 2em 1fr; margin-top:1em; gap: 1em;} .s1_4 .location > dl > dt dl dd{display: flex; justify-content: center; flex-direction: column; } .s1_4 .location > dl > dd{ font-size: 1em;} } .partS1 .full_width_bg{ background-image: url('../sub/img/2_1_2.jpg'), url('../sub/img/2_1_3.jpg'); background-position: left center, right center; background-repeat: no-repeat, no-repeat; background-size: 50% 100%, 50% 100%; } .partS1 dl{display: grid; grid-template-columns: repeat(2,1fr);} .partS1 dl dd{display: flex; justify-content: center; flex-direction: column;} .partS1 dl dd:last-child{padding-left:8em} .partS1 dl dd h4{font-size: 1.9em;} .partS1 dl dd h5{background-color: var(--primary); color: var(--text-anti-primary); text-align: center; margin-bottom: .7em;} .partS1 dl dt{position:absolute; left:50%; transform: translateX(-50%); bottom:0;z-index:2;} .s2_1 .ss2{display: flex; justify-content: center;} .s2_1 .ss2 > dt{position:relative; width: 2em;} .s2_1 .ss2 > dt::after{position: absolute; left:0; right:0; bottom:-2em; top: 40%; background: linear-gradient(180deg, #FFF 0%, var(--primary-light) 100%); content:""} .s2_1 .ss2 > dd figure{position: relative; border-radius: 1em; overflow: hidden; margin:0 1em;} .s2_1 .ss2 > dd h6{margin:1em; border-radius: .5em; color: var(--text-primary); font-weight: 700; padding:.3em} .s2_1 .ss2 > dd dd{border-bottom: 1px solid rgba(255,255,255,.2); padding:.3em;} .dls_1{display: flex; justify-content: center; margin-top: 2em;} .dls_1 dt{position: relative; width: 1em;} .dls_1 dt::before{position: absolute; left:50%; top:2em; width: 2em; height:2em; line-height: 2em; border-radius: 50%; background-color: var(--primary); color: var(--text-anti-primary); text-align: center; transform: translateX(-50%); color:var(--text-anti-primary); content:"\ee60c"; font-family: 'iconfont'; font-size: 2em;} .dls_1 dd{width: 20em;} .dls_1 h6 strong{display: inline-block; background-color: var(--primary); color: var(--text-anti-primary); font-weight: 700; padding:0 1em; border-radius: 1em; margin-top: 1em;} .dls_2{display: flex; justify-content: center; gap: 3em;margin-top:2em;} .dls_2 dd{display: flex; justify-content:center; flex-direction: column;} .dls_3{display: flex; justify-content: center; gap: 2em; margin-top:2em;} .dls_3 > dt{ position: relative;} .dls_3 > dt figure{ position: relative; border-radius: 1em; overflow: hidden;} .dls_3 > dd dl{ font-size:.85em; text-align: left; height:100%; display: flex; flex-direction: column; justify-content: space-evenly} .dls_3 > dd dl dd > strong{display: inline-block; background-color: var(--primary); color: var(--text-anti-primary); padding:0 1em; border-radius: 1em; text-align: center;} .dls_3 > dd dl dd{margin-top: .7em;} .dls_3 > dd ul{font-size:1.2em;} .dls_3 dd.vc {display: flex; flex-direction: column; justify-content: center} @media (max-width:750px){ .s2_1 .dls_1 h6 strong{display:block; height:5em; display: grid; place-items: center ;} .s2_1 .ss2 > dd h6{height:5em; display: grid; place-items: center ;} .partS1.pd4{width: 100vw; left:-4vw; padding:0 !important; overflow: hidden;} .partS1 dl{display: block; } .partS1 dl dd{display: block; background-image: url('../sub/img/2_1_3.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; padding:2em 1em} .partS1 dl dd.cfw{background-image: url('../sub/img/2_1_2.jpg'); } .partS1 dl dd:last-child{padding-left:2em; } .partS1 dl dd h4{font-size: 1.9em;} .partS1 dl dd h5{width:fit-content; padding:0 1em;} .partS1 dl dd figure{width: 14em;} .partS1 dl dt{left:auto; right:-5%; transform: translateX(0); bottom:0;z-index:2; width:45%; } .dls_1 dt{position: relative; width: 1em;} .dls_1 dt::before{font-size: 1em;} .dls_1 dd{width:9em;} .dls_1 h6 strong{ padding:.3em 1em; } .dls_2{display: flex; justify-content: center; gap: 1em;margin-top:2em; flex-wrap: wrap;} .dls_2 dt{width: 100%; padding:0 10%;} .dls_2 dd{order:2;} .s2_2 img[src*='2_2_2']{width: 50%;} .dls_3{display: flex; justify-content: space-between; gap: 1em; margin-top:2em;} .dls_3 > dt{ position: relative; width: 15em;} .dls_3 > dt figure{ position: relative; border-radius: 1em; overflow: hidden;} .dls_3 > dd dl{ font-size:1em;} .dls_3.fw{display: block; margin-top:2em;} .dls_3.fw > dt{ width: auto} .dls_3.fw > dd {margin-top: 1em; } .dls_3.fw > dd article{text-align: center;} } .s2_4 .ss1 {padding:7em 0} .s2_4 .ss1 figure{position:absolute; right:0; bottom:0; overflow: hidden;} .s2_4 .ss1 figure img{position:relative; bottom:-6em; } .s2_4 .ss2 figure{position:absolute; left:50%; bottom: 0; transform: translateX(-50%);} .s2_4 .ss2 dl{width:fit-content; margin:13em auto 0; position: relative; z-index:2;} .s2_4 .ss2 dd{margin-top:.5em; background-color: var(--bg-primary); box-shadow: .05em .05em .1em rgba(0,0,0,.3); display: flex; font-size: 1.4em;} .s2_4 .ss2 dd label{font-weight: 700; background-color: var(--primary); color: var(--text-anti-primary); text-align: center; width: 6em; font-size: 1.28em; padding:.6em 0} .s2_4 .ss2 dd span{ flex-grow: 1; padding:0 1em; display: flex; justify-content: center; flex-direction: column; } .s2_4 .ss2 dd:nth-child(2n) label{background-color: var(--primary-dark);} @media (max-width:750px){ .s2_4 .ss1 {padding:4em 0} .s2_4 .ss1 figure{position:absolute; right:-5%; bottom:0; overflow: hidden; width:60%; z-index:-1;} .s2_4 .ss2 figure{width: 80%;} .s2_4 .ss2 dd{ font-size: 1em;} } .partS2 > dl{display: grid; grid-template-columns: repeat(2,1fr); } .partS2 > dl > dd{display: flex; } .partS2 > dl > dd article{padding-left:3em; } .partS2 > dl .vc{display: flex; justify-content: center; flex-direction: column; } .partS2 .dtr > dt{order:2} .partS2 .dtr > dd{justify-content: end;} .partS2 .dtr > dd article{padding-left:0; width: 700px;} @media (max-width:750px){ .partS2 > dl{display:block} .partS2 > dl > dt{height:60vw;} .partS2 > dl > dt figure{padding:0 4em } .partS2 > dl > dt figure.mf1{padding:0 1em } .partS2 > dl > dd{display: block; } .partS2 > dl > dd article{padding:1em; text-align: center;} .partS2 .dtr > dd article{padding:1em; width: auto;} .s4_2 .partS2 .dtr > dt{ height:auto; padding:1em 0} } .s3_1 .ss1 article{margin-left: 60%;} .s3_1 .ss2{padding:1em 0} .s3_1 .ss2 article{background-color: rgba(0,0,0,.75); padding:1.5em 0;} .s3_1 .ss3{display: grid; grid-template-columns: repeat(2,1fr); gap: .8em; margin-top:1em;} .s3_1 .ss3 dd{border:.1em solid var(--primary-light); padding:.3em 0; text-align: center; font-weight: 700;} .s3_1 .ss4{display: flex; margin-top: 2em; text-align: center; font-weight: 700;} .s3_1 .ss4 dd{background-color: var(--primary); color: var(--text-anti-primary); display: flex; justify-content: center; flex-direction: column; border-radius: 50%; aspect-ratio: 1; width: 10em; margin-right: -1em;} .s3_1 .ss4 dd:nth-child(2n){background-color: var(--primary-dark);} .s3_1 .ss5{display:flex; justify-content: center;} .s3_1 .ss5 > dd{ padding:1.5em; box-shadow:.05em .05em .1em rgba(0,0,0,.2); border-radius: .5em; overflow: hidden; background-color: var(--bg-primary); text-align: center;} .s3_1 .ss5 > dd figure{position: relative; border-radius: .5em; overflow: hidden;} .s3_1 .ss5 > dd h6{margin:.7em 0;} .s3_1 .ss5 > dd dl{} .s3_1 .ss5 > dd dl dd{padding:.5em 0;} .s3_1 .ss5 > dd dl dd + dd{border-top: 1px solid var(--border-primary);} .s3_1 .ss5 > dd:first-child{background-color: var(--primary); color: var(--text-anti-primary); transform: scale(1.1); margin-right: 1em;} .s3_1 .ss5 > dd:first-child h6{color: #fff799;} .s3_1 .ss5 > dd:first-child dl dd + dd{border-top-color: rgba(255,255,255,.2)} .s3_1 .ss6{display: flex; gap: .5em;} .s3_1 .ss6 dd{padding:1.5em 0; width: 10%; flex-grow: 1; background-color: var(--bg-primary); border:1px solid var(--primary); text-align: center;} .s3_1 .ss6 dd i{font-size: 1.4em;} @media (max-width:750px){ .s3_1 .ms2{padding:0; } .s3_1 .ms1 .full_width_bg{background-size: cover; } .s3_1 .ms2 .full_width_bg{background-size: 200%; background-position:left center; position:relative; height:55vw;} .s3_1 .ss1 article{margin-left: 0; text-align: center; padding:2em 0} .s3_1 .ss1.ms1 article{margin-left:35%} .s3_1 .ss2 .full_width_bg{background-size: cover;} .s3_1 .ss2 article{padding:1em;} .s3_1 .ss3{display: grid; grid-template-columns: repeat(2,1fr); gap: .1em; margin-top:1em;} .s3_1 .ss3 dd{background-color: rgba(255,255,255,.5);} .s3_1 .ss4{display: flex; margin-top: 1em; width: 120%; left:-30%; position:relative} .s3_1 .ss4 dd{ width: 8em; margin-right: -.3em;} .s3_1 .ss4 dd:nth-child(2n){background-color: var(--primary-dark);} .s3_1 .ss5 > dd{ padding:1em; } .s3_1 .ss6{display: flex; gap: .5em;} .s3_1 .ss6 dd{padding:.5em 0;} } .s4_1 .ss1{display: grid; grid-template-columns: 12em 12em; gap: .3em;} .s4_1 .ss1 dd{text-align: center; background-color: var(--primary); color: var(--text-anti-primary); padding:.3em; border-radius: 2em; font-weight: 700;} .s4_1 .ss2{display: flex; justify-content: center; margin-top: 1em;} .s4_1 .ss2 dd{width: 10em;} @media (max-width:750px){ .s4_1 .ss1{ grid-template-columns: 1fr; } } .dls_4{display:flex; justify-content: center; gap: .5em; margin-top:2em;} .dls_4 .fs_8{background-color: #F5F5F5;} .dls_4 .cfM{margin-top:.5em;} .dls_5{display:flex; justify-content: center; gap: .5em; margin-top:2em;} .dls_5 figure{position: relative; border-radius: 1em; overflow: hidden;;} .dls_5 p{margin-top:.5em; border-radius: 2em; padding:.5em 0} @media (max-width:750px){ .dls_4{flex-wrap: wrap;} .dls_4 dd{width: 45%;} .dls_4 .fs-8{font-size: 1em !important; } .dls_4 .fs-8 br{display: none;} .dls_5{flex-wrap: wrap;} .dls_5 dd{width: 45%;} .dls_5 figure{position: relative; border-radius: 1em; overflow: hidden;;} .dls_5 p{margin-top:.5em; border-radius: 2em; padding:.5em 0} } /* 4_1 */ .dls_5.ss2 p{font-size: .9em; line-height: 1.1em; padding:0; height:3em; display: flex; justify-content: center; flex-direction: column;} /* 4_2 */ .s4_2 .ss1{display: flex; justify-content: center; gap: .5em; margin-top:2em; counter-reset: list-counter 0;} .s4_2 .ss1 dd{position:relative; background-color: var(--bg-primary); box-shadow:.05em .05em .1em rgba(0,0,0,.2); padding:.6em 1em .6em 4em; font-size:.8em; font-weight:700;} .s4_2 .ss1 dd:before{ position:absolute; top:0; left:0; bottom:0; display: flex; justify-content: center; flex-direction: column; width:3em; font-weight:700; content: counter(list-counter, decimal-leading-zero); counter-increment: list-counter 1; background:var(--primary); color:var(--text-anti-primary);text-align:center; } @media (max-width:750px){ .s4_2 .ss1{flex-wrap: wrap;} .s4_2 .ss1 dd{width: 32%; line-height: 1.3; padding:.4em .5em .4em 3em;} } .s4_3 .ss1{background:rgba(0,0,0,.5); padding:2em 0; border-radius: 1em;;} .s4_3 .ss2{display: flex; justify-content: center; gap: .5em; margin-top:2em;} .s4_3 .ss3{display: flex; justify-content: center; gap: .5em; margin-top:2em; margin-bottom: -4em; } .s4_3 .ss3 dd ul{font-size: 1.2em;} .s4_3 .ss3 dd ul li{margin:1em 0; white-space: nowrap;} @media (max-width:750px){ .s4_3 .ss2 p.fs12{font-size:.9em} .s4_3 .ss3{display: block; margin-bottom:0; } .s4_3 .ss3 dt{position:absolute; right:0; bottom:0; width:40%;} .s4_3 .ss3 dd ul{font-size: 1em;} .s4_3 .ss3 dd ul li{margin:.3em 0; white-space: wrap; text-shadow: 0 0 3px rgba(0,0,0,.75);} .s4_3 .ms2.tc{text-align: left;} } .s4_4 .ss1{padding:2em; background-color: rgb(0, 27, 77,.8); border-radius: 1em; margin:0 3em} .s4_4 .ss1 dl{margin-top:2em; display: flex; justify-content: center;} .s4_4 .ss1 dl dd{border-radius: 50%; display: flex; justify-content: center; flex-direction: column; width: 9em; height:9em; margin:0 -.5em; background-color: rgba(255,255,255,.8); color: var(--text-primary); font-weight: 700;} .s4_4 .ss1 dl dd:nth-child(2n){background-color:rgb(212, 227, 255,.8) ;} .s4_4 .ss2{width: fit-content; margin:0 auto} .s4_4 .ss2 dl{margin-top:1em; background-color: #FFF; display: grid; grid-template-columns:25rem 1fr; } .s4_4 .ss2 dl dt{ } .s4_4 .ss2 dl dd{display: flex; justify-content: center; flex-direction: column; text-align: left; padding: 0 3em;} .s4_4 .ss3{display: flex; justify-content: center; gap: .5em; margin-top:2em; margin-bottom: -4em; gap: 3em;} .s4_4 .ss3 dd ul{font-size: 1.2em;} .s4_4 .ss3 dd ul li{margin:1em 0} @media (max-width:750px){ .s4_4 .ss1{padding:1em; margin:0 1em} .s4_4 .ss1 dl{ flex-wrap: wrap;} .s4_4 .ss1 dl dd{ width: 8em; height:8em; margin:-.5em;} .s4_4 .ss2{width: fit-content; margin:0 auto} .s4_4 .ss2 dl{margin-top:1em; background-color: #FFF; display: grid; grid-template-columns:17rem 1fr; } .s4_4 .ss2 dl dt img{width: 100%; height:100%; object-fit: cover;} .s4_4 .ss2 dl dd{padding: 1em;} .s4_4 .ss3{display: block; margin-bottom:0em; gap: 3em;} .s4_4 .ss3 dd ul{font-size: 1em;} .s4_4 .ss3 dd ul li{margin:.3em 0;text-shadow: 0 0 3px rgba(0,0,0,.75);} .s4_4 .ms2.tc{text-align: left;} .s4_4 .ss3 dt{position:absolute; right:0; bottom:0em; width:30%;} } .s4_5 .ss1{padding:2em; background-color: rgb(0, 27, 77,.8); border-radius: 1em; margin:0 3em} .s4_5 .ss2{display: flex; justify-content: center; gap: 1em; margin-top:1em} .s4_5 .ss2 dd{border:.4em solid #96A1B4; border-radius: 1em; overflow: hidden; position: relative;} .s4_5 .ss2 dd b{font-size:2em; line-height: 2em; color:#FFF; background-color: #96A1B4; position:absolute; left:0; top: 0; z-index: 2; width: 2em;} .s4_5 .ss2 dd strong{position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 1.6em;} .s4_5 .ss3{display: flex; justify-content: center; gap: .5em; margin-top:2em; gap: 3em;} .s4_5 .ss3 dt{display: flex; justify-content: center; flex-direction: column;} .s4_5 .ss3 dd ul{font-size: 1.2em;} .s4_5 .ss3 dd ul li{margin:1em 0;white-space: nowrap;} @media (max-width:750px){ .s4_5 .partS2 ul{display: inline-block;} .s4_5 .partS2 ul li br + br{display:none} .s4_5 .ss1{padding:1em; margin:0 1em} .s4_5 .ss2{ justify-content:space-between; gap:.5em; } .s4_5 .ss2 dd{border:.2em solid #96A1B4; border-radius: .5em; } .s4_5 .ss2 dd b{font-size:1.5em; } .s4_5 .ss2 dd strong{ font-size: 1.2em;} .s4_5 .ss3{display: block; margin-bottom:0em; gap: 3em;} .s4_5 .ss3 dd ul{font-size: 1em;} .s4_5 .ss3 dd ul li{margin:.3em 0;text-shadow: 0 0 3px rgba(0,0,0,.75);} .s4_5 .ms2.tc{text-align: left;} .s4_5 .ss3 dt{position:absolute; right:0; bottom:1em; width:50%;} } .s5_1 .ss1 dl{margin-top: 1em;display: flex; justify-content: space-between; gap: 2em;} .s5_1 .ss1 dl dt{width: 45rem;} .s5_1 .ss1 dl dd{text-align: left; display: flex; justify-content: center; flex-direction: column; flex-grow: 1;} .s5_1 .ss1 dl:nth-child(2n) dt{order:2;} .s5_1 .ss1 dl dd > b{font-size:2.1em; color: var(--primary);} .s5_1 .ss2 dl{margin-top: 1em;display: flex; justify-content: center; gap: 1em; flex-wrap: wrap;} .s5_1 .ss2 dl dd{position:relative} .s5_1 .ss2 dl dd b{position:absolute; top:0; font-size: 1.6em; line-height: 2em; width: 2em; background-color: var(--primary); color: var(--primary-light); } .s5_1 .ss2 dl dd:nth-child(2n) b{left:0} .s5_1 .ss2 dl dd:nth-child(2n + 1) b{right:0} .s5_1 .ss2 dl dd p{margin-top: .5em; font-size: 1.3em;} .s5_1 .ss3 dl{position:relative; display: flex; justify-content: center; padding:3em 0} .s5_1 .ss3 dl dt{width: 50rem; text-align: center;} .s5_1 .ss3 dl.dtr dt{order:2;} .s5_1 .ss3 dl dd{width: 64rem; display: flex; flex-direction: column; justify-content: center; text-align: right;} .s5_1 .ss3 dl.dtr dd{text-align: left;} .s5_1 .ss4{font-size: 1.4em;} .s5_1 .ss4 figure{position: absolute; right:-8em; bottom: 0;; } .s5_1 .ss4 dl dd{display: flex; margin-top:.5em; line-height: 1.6;} .s5_1 .ss4 dl dd strong{width: 5em; background-color: var(--primary); color: var(--text-anti-primary); border-radius: 2em; text-align: center; margin-right: .5em;} @media (max-width:750px){ .s5_1 .ms1 .dlw{display: block; } .s5_1 .ms1 .dlw dd{margin-top: 1em; text-align: center;} .s5_1 .ss1 dl{margin-top: 1em; gap: 1em; flex-wrap: wrap;} .s5_1 .ss1 dl dt{width: 100%; } .s5_1 .ss1 dl dd{text-align: left; display: block;} .s5_1 .ss1 dl:nth-child(2n) dt{order:0;} .s5_1 .ss1 dl p br{display: none;} .s5_1 .ss4{font-size: 1em; padding-bottom: 0;} .s5_1 .ss4 figure{position: relative; right:0; bottom: 0;; } .s5_1 .ss4 dl dd{display: flex; margin-top:.5em; line-height: 1.6;} .s5_1 .ss4 dl dd strong{width: 5em; background-color: var(--primary); color: var(--text-anti-primary); border-radius: 2em; text-align: center; margin-right: .5em;} } .partS3 dl{margin-top: 2em; display: flex; gap: 1em;;} .partS3 dl dd p{padding:.6em 0; font-size: .8em;} .s6_1 .ss1 article{padding:3em; background-color: rgb(0, 26, 75,.8); color:#FFF; font-size: 1.2em; width: fit-content;} .s6_1 .ss2 article{padding:3em 0; margin-left:60%; font-size: 1.2em; } .s6_1 .ss3{display: flex; justify-content: center; gap: 2em 1em; flex-wrap: wrap; margin-top: 2em;} .s6_1 .ss3 figure{position: relative; border-radius: .8em; overflow: hidden;} .s6_1 .ss3 p{margin-top: 1em;} .s6_1 .ss4{display: grid; grid-template-columns: repeat(4,1fr); gap: .5em; margin-top: 2em;} .s6_1 .ss4 dd{background-color:#E3E9F5; padding:2em 0; font-weight: 700;} .s6_1 .ss5 .s1{position:relative; margin:2em 0} .s6_1 .ss5 .s1::before{position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); height:2px; background-color: #C3C8D3; content:""} .s6_1 .ss5 .s1 strong{display: inline-block; padding:0 2em; background-color: #F4F4F5; position: relative; z-index: 2; } .s6_1 .ss5 dl{display: flex; justify-content: center; gap: 1em;} .s6_1 .ss5 dl dd{background-color: var(--primary); color: var(--text-anti-primary); aspect-ratio: 1; border-radius: 50%; display: flex; justify-content: center; flex-direction: column; width: 13em;} .s6_1 .ss5 figure{width: fit-content; position: relative; overflow: hidden; border-radius: 1em; margin:2em auto 0; width: 50%;} @media (max-width:750px){ .s6_1 .ss1 .full_width_bg{position:relative; background-size: cover; bottom:auto; height:12em} .s6_1 .ss1 article{padding:1.5em; width:100%; color:#FFF; font-size: 1.2em; } .s6_1 .ss2 .full_width_bg{position:relative; background-size: cover; bottom:auto; height:12em} .s6_1 .ss2 article{padding:1.5em; margin-left: 0; width:100%; color:#333; font-size: 1.2em; } .s6_1 .ss3 dd{width: 30%; } .s6_1 .ss3 figure{position: relative; border-radius: .8em; overflow: hidden;} .s6_1 .ss3 p{font-size: .85em; line-height: 1.3;} .s6_1 .ss4{display: grid; grid-template-columns: repeat(4,1fr); gap: .5em; margin-top: 2em;} .s6_1 .ss4 dd{background-color:#E3E9F5; padding:2em 0; font-weight: 700;} .s6_1 .ss5 figure{ width:100%; } } .s6_2 .ss1{padding:3em 0; } .s6_2 .ss1 article{padding:4em; background: url(../sub/img/6_2_2.jpg) center no-repeat; background-size: cover; } .s6_2 .ss1 figure{position: absolute; right: 0; bottom: 0; z-index: 2; top: 0;} .s6_2 .ss1 figure img{width: auto; height:100%;} .s6_2 .ss2 .full_width_bg{background:#E4E2DD url(../sub/img/6_2_4.jpg) bottom right no-repeat;} .s6_2 .ss2 article{margin-left:5%;} .s6_2 .ss3 dl{display: flex; justify-content: center; gap: .5em; margin-top: 2em;} .s6_2 .ss3 dl dd{width: 70rem; border:1px solid #6E6E6E; background-color: #FFF; ;} .s6_2 .ss3 dl dd h5{ background-color: #D7D7D7; padding:1em; font-weight: 700; } .s6_2 .ss3 dl dd figure{padding:1em;} .s6_2 .ss3 dl dd p{font-size: 1.4em; padding:1.5em 0; background-color: #EDEDED;} .s6_2 .ss3 dl dd:last-child{border-color: var(--primary);} .s6_2 .ss3 dl dd:last-child h5{color: var(--primary); background-color: #E5EAF5;} .s6_2 .ss3 dl dd:last-child p{background-color: #B3BBCC;} .s6_2 .ss4 .full_width_bg::before{content:"WHY"; top: 0; left:0; right:0; font-size: 20em; text-align: center; line-height: .9em; font-family: 'Times New Roman', Times, serif; font-weight: 700; opacity: .1;} .s6_2 .ss4 dl{display: flex; justify-content: center; flex-wrap: wrap; gap: .5em; margin-top: 2em;} .s6_2 .ss4 dl dd{position: relative;} .s6_2 .ss4 dl dd p{font-weight: 700; font-size: 1.3em; position: absolute; left:0; right:0; top: 50%; transform: translateY(-50%); color:#FFF; } .s6_2 .dls_3{margin-top: 1em;} .s6_2 .dls_3 > dd{width: 20em;} @media (max-width:750px){ .s6_2 .ss1{padding:1em 0; } .s6_2 .ss1 article{padding:2em 1em; } .s6_2 .ss1 figure{ right: -4vw; } .s6_2 .ss2 .full_width_bg{position:relative; background-size: cover; bottom:auto; height:15em} .s6_2 .ss2 article{margin-left:5%;} .s6_2 .ss3 dl{display: flex; justify-content: center; gap: .5em; margin-top: 2em;} .s6_2 .ss3 dl dd p{font-size: 1.2em; } .s6_2 .ss4 .full_width_bg::before{font-size: 10em;} .s6_2 .ss4 dl dd{ width: 45%; } .s6_2 .ss4 dl dd p{ font-size: 1.2em;} } .caseHd dl{margin-top:2em; display: flex; justify-content: center;} .caseHd dl dd a{display:block; padding:.5em 1em; border-bottom: 1px solid var(--border-primary); } @media (max-width:750px){ .caseHd dl{margin-top:2em; display: flex; justify-content: center;flex-wrap: wrap;} .caseHd dl dd a{display:block; padding:.5em 1.2em;} } .s_en{letter-spacing: 0;} .s_en .ss2{display: flex ; justify-content: center; gap: 2em;} .s_en .ss2 dt{width: 50rem; position: relative;} .s_en .ss2.dtr dt{order:2} .s_en .ss2 dd{display: flex; flex-direction: column; justify-content: center;} .s_en .ss2 dd {white-space: nowrap;} .s_en .ss2 dd .name{border-bottom: 1px solid var(--text-primary); padding-bottom:.6em; display: flex; margin-bottom: .6em;} .s_en .ss2 dd .name strong{font-size:2em; color: var(--primary); margin-right: .3em;} .s_en .ss2 dd ul{font-size: .7em;} .s_en .ss3{font-size: 2.2rem; width: 120%; left:50%; transform: translateX(-50%);} .s_en .ss3 dl{margin-top: 2em; display: grid; grid-template-columns: 1fr 54rem; position:relative} .s_en .ss3 dl dd{display: flex; justify-content: center; flex-direction: column;} .s_en .ss3 h5{font-size: 2.8rem;; } .s_en .ss3 h6{font-size: 2.5rem;; } .s_en .ss3 ul li{margin-top: 1em;} #enLocation{position: relative;display: grid; grid-template-columns: 1fr 81rem; } #enLocation iframe{position: relative; height: 80rem; width: 100%;} #enLocation > article{ position:relative; background-color:#34486f; color: var(--text-anti-primary); padding:3em 1em; } #enLocation > article h5{font-size: 1.6em; font-weight: 300; text-align: center;} #enLocation > article h4{font-size: 2em; font-weight: 700; text-align: center;} #enLocation > article ul{margin-top:1em;} #enLocation > article ul li{ margin-top:.6em; display: flex; gap:.5em; white-space: nowrap;} #enLocation > article ul li label{ background-color: var(--text-anti-primary); color:var(--primary); border-radius: .6em; padding:0 .6em; width:15em; height:1.5em; font-weight: 700; text-align: center; font-size: .82em;} #enLocation > article ul li span{width:8em} #enLocation > article ul li em.s1{background-color: #FEAB34; padding:0em; color: var(--text-primary); font-size: .82em; font-weight: 700; width:10em; height:1.5em;text-align: center;} #enLocation > article ul li em.s2{background-color: #FFF; padding:0; color: var(--primary); font-size: .82em; font-weight: 700;width:10em;height:1.5em; text-align: center;} #enLocation > article ul li strong{font-size:1.6em; line-height:.7em} #enLocation > article p{margin-top: 1em;} #enfooter{position:relative; padding:3rem 0; background-color:var(--primary); color: #FFF;} #enfooter dl{letter-spacing: 0;} #enfooter dl dt{padding-right:2em; margin-right:2em; border-right:1px solid var(--border-primary)} #enfooter dl dt img{height:6rem;} #enfooter dl dd address{font-size:.6em; display: grid; grid-template-columns: repeat(2,1fr); } #enfooter dl dd p{font-size:.6em;} #enfooter dl dd span{white-space: nowrap; padding-right:10px} @media (max-width:750px){ .s_en .ss2{display: block;} .s_en .ss2 dt{width: 20rem; height: 20rem; position: relative; border:.1em solid var(--border-primary); margin:0 auto; border-radius: 50%; overflow: hidden; background-color: #FFF; padding-top:1em;} .s_en .ss2.dtr dt{order:2} .s_en .ss2 dd{display: block; margin-top: 1em;} .s_en .ss2 dd {white-space: wrap;} .s_en .ss2 dd ul{font-size: 1em;} .s_en .ss3{font-size: 1em; width: auto; left:0; transform: translateX(0);} .s_en .ss3 dl{margin-top: 2em; display: block; } .s_en .ss3 dl dd{margin-top:1em;} .s_en .ss3 dl dd{display: flex; justify-content: center; flex-direction: column;} .s_en .ss3 h5{font-size: 1.4em;; } .s_en .ss3 h6{font-size: 1.2em;; } .s_en .ss3 ul li{margin-top: 1em;} #enLocation{position: relative;display: block} #enLocation iframe{position: relative; height: 80vw; width: 100%;} #enLocation > article{ position:relative; background-color:#34486f; color: var(--text-anti-primary); padding:3em 1em; } #enLocation > article h5{font-size: 1.6em; font-weight: 300; text-align: center;} #enLocation > article h4{font-size: 2em; font-weight: 700; text-align: center;} #enLocation > article ul{margin-top:1em;} #enLocation > article ul li{ margin-top:.6em; display: flex; gap:.5em; white-space: wrap;} #enLocation > article ul li label{padding:0; width:13em; height:1.5em; } #enfooter{position:relative; padding:3rem 1em; } #enfooter dl{display: block; text-align: center;} #enfooter dl dt{padding-right:0; margin-right:0; border-right:0} #enfooter dl dt img{height:4rem;} #enfooter dl dd address{font-size:.8em; display: block; margin-top: 1em;} #enfooter dl dd p{font-size:.8em;} #enfooter dl dd span{white-space: nowrap; padding-right:10px} #enfooter dl dd span.wr{white-space: wrap; display: block;} }