.tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, .faq_list>li .q, .faq_list>li .q>.bul, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, #mVisual .iconMenu .inConts>a, .mSolution .mSolutionBox .mSolution_txt .btns>a, .mQuick>* .btns>a, #mRoute .routeMap #routeBtn>a, #mAbout .linkAbout>a .thumb img, .mProduct>.list a>.lay, .cont_img .btns>a{transition: all .3s ease-out; transform-origin: 50% 50%;} .historyArea .history_box>.logo>span, .historyArea .history_box>.list:before, #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .slider .photoBox p{transition: all 1s ease-out; transform-origin: 50% 50%;} /*[s] All Style */ .bg_thumb_box{width:100%; height:100%; background-repeat: no-repeat; background-position: center center; box-sizing: border-box;} img.bg_thumb{opacity: 0;} img.ofi{width:100%; height:100%; object-fit:cover; object-position: center center; font-family: 'object-fit: cover; object-position: center center;';} .tbLayout{width:100%; display:table;} .tbLayout.fixed{table-layout: fixed;} .tbLayout>*{display:table-cell; vertical-align: middle; box-sizing: border-box;} .tbLayout.vat>.td{vertical-align: top;} .tbLayout.full{width:1920px; margin-left:-960px; position: relative; left:50%;} .nTable{width:100%; border-top:2px solid #333; font-size:0; line-height:0;} .nTable>table{width:100%; border-spacing:0; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:3rem 4.5rem; background-color: #fff; border-bottom:1px solid #dadada; font-size:1.7rem; line-height:1.5; color:#666; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .nTable>table th{height:5rem; padding:0; border-right:1px solid #dadada; font-size:1.8rem; color: #333; text-align: center;} .nTable>table>thead>tr>th{background-color: #f8f9fb; font-weight: 500;} .nTable>table>tbody>tr>th{} .nTable>table .inT{margin-right:2rem; display:inline-block;} .nTable>table .transportation{} .nTable>table .transportation>li{padding-left:7.5rem; position: relative;} .nTable>table .transportation>li+li{margin-top:2rem;} .nTable>table .transportation>li>p{font-weight: bold; font-size:1.8rem; line-height:3rem; color: #333; position: absolute; left:0; top:0;} .nTable>table .transportation>li>dl{display: flex; justify-content: space-between;} .nTable>table .transportation>li>dl+dl{margin-top:1rem;} .nTable>table .transportation>li>dl>dt{padding-right:1rem; white-space: nowrap;} .nTable>table .transportation>li>dl>dt>span{padding:0 0.8rem; background-color: #a2133f; font-size:1.5rem; line-height:3rem; color: #fff; display:inline-block; border-radius:3px;} .nTable>table .transportation>li>dl>dt.g>span{background-color: #48a824;} .nTable>table .transportation>li>dl>dt.b>span{background-color: #205cc0;} .nTable>table .transportation>li>dl>dt.h>span{background-color: #2faebd;} .nTable>table .transportation>li>dl>dt.r>span{background-color: #da352d;} .nTable>table .transportation>li>dl>dd{width:100%;} .nTable>table .transportation>li>dl>dd .inT{margin-right:1.5rem; font-size:1.6rem; line-height:3rem;} .nTable.en>table .transportation>li{padding-left:8.5rem;} .nTable>table .tit{padding-bottom:0.5rem; font-weight: 400; color: #1b1b1b;} .nTable>table ul.bul{} .nTable>table ul.bul>li{font-weight: 300; font-size:1.7rem; line-height:1.6; color: #666;} .nTable>table .icon{width:14.5rem; margin:0 auto; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;} .nTable>table .icon>dt{width:5.8rem;} .nTable>table .icon .i01{width:3.3rem;} .nTable>table .icon .i02{width:3.8rem;} .nTable>table .icon .i03{width:3.5rem;} .nTable>table .icon .i04{width:2.7rem;} .nTable>table .icon .i05{width:3.4rem;} .nTable>table .icon .i06{width:3.6rem;} .nTable.small{margin-top:1.5rem; border:1px solid #2f3334; overflow:hidden;} .nTable.small>table{width:calc(100% + 3px); margin:-1px; background-color: #bcbcbc; border-spacing:1px;} .nTable.small>table th, .nTable.small>table td{padding:10px; border:none; font-weight: 400; font-size:15px; line-height:20px; color: #595959; text-align: center;} .nTable.small>table>thead>tr>th{background-color: #e9e9e9; font-size:16px; color: #262626;} .nTable.small>table>tbody>tr>th{width:auto; border-right:none;} .nTable +.nTable{margin-top:40px;} .tabDepth{width:100%; margin-bottom:35px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .tabDepth>a{width:19rem; height:46px; background-color: #fdfdfd; border:1px solid #e2e2e2; font-size:18px; line-height:1.2; color: #737373; display:inline-block; vertical-align: top; box-sizing: border-box;} .tabDepth>a+a{margin-left:-1px;} .tabDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .tabDepth>a:hover, .tabDepth>a.active{background-color: #1b54aa; border-color:#1b54aa; color: #fff; z-index:2;} .depth3{width:100%; margin-bottom:70px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; position: relative;} .depth3:before{content: ""; width: 100%; height: 1px; background-color: #b0b0b0; display: inline-block; position:absolute; left: 0; top:50%;} .depth3>a{width:260px; height:54px; min-height:5.4rem; background-color: #1952a7; border:1px solid #0c3879; font-size:19px; line-height:1.2; color: #fff; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative; z-index:2;} .depth3>a+a{margin-left:-1px;} .depth3>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%); word-break:keep-all; word-wrap:break-word;} .depth3>a>span:before{content: ""; width: 0; height:2.1rem; margin-top:0.2rem; background:url("../img/bul_d3.png") no-repeat left top; background-size: 2.1rem; display: inline-block; vertical-align: top; position: relative; left:-3.1rem; opacity: 0;} .depth3>a:hover, .depth3>a.active{background-color: #0091db; border-color:#0086cb; z-index:3;} .depth3>a:hover>span:before, .depth3>a.active>span:before{width: 3.1rem; left:0rem; opacity: 1;} .lastDepth{width:100%; margin-bottom:50px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; display: flex; justify-content: space-between; } .lastDepth>a{width:100%; height:60px; background-color: #fff; border:1px solid #d3d3d3; font-size:18px; line-height:1.2; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth>a:hover, .lastDepth>a.active{background-color: #f192a6; border-color:#f192a6; color: #fff; z-index:2;} .lastDepthConts{font-size:0; line-height:0; display:none; overflow:hidden;} .groupTit{padding-bottom:3.5rem;} .groupTit .step{padding-bottom:1rem; font-weight: bold; font-size:2.2rem; line-height:1; color: #23abaf;} h4.txt{font-weight: bold; font-size:2.6rem; line-height:1; color: #1b1b1b;} .nTxt{padding-top:2.5rem; font-size:1.7rem; line-height:2.6rem; color: #888;} ul.bul{} ul.bul>li{padding-left:1rem; font-size:1.8rem; line-height:3.2rem; color: #333; position: relative;} ul.bul>li:before{content: "-"; position:absolute; left: 0; top:0px;} ul.star{} ul.star>li{padding-left:2.2rem; font-size:1.7rem; line-height:3.2rem; color: #666; position: relative;} ul.star>li:before{content: "※"; position:absolute; left: 0.4rem; top:0px;} ul.etc{} ul.etc>li{padding-left:3.3rem; font-size:1.7rem; line-height:3.2rem; color: #666; position: relative;} ul.etc>li:before{content: attr(data-title); position:absolute; left: 0; top:0px;} h4.line{margin-bottom:50px; padding-top:2.2rem; font-size:2rem; line-height:1; color: #636363; text-align: center; letter-spacing: -0.03em; position: relative;} h4.line:before{content: ""; width: 2.1rem; height: 0.2rem; background-color: #3a3a3a; display: block; position:absolute; left:50%; top:0; transform: translateX(-50%);} h4.line>strong{font-weight: bold; font-size:4rem; color: #000; display:block;} h4.line>p{padding-top:0.9rem;} h4.line.mt{margin-top:8rem;} h5.bul{margin:6rem 0 2.5rem; padding-left:2.2rem; font-weight: 500; font-size:2.4rem; line-height:1; color: #000; letter-spacing: -0.03em; position: relative;} h5.bul:before{content: ""; width: 1.4rem; height: 1.4rem; border:0.3rem solid #1952a7; display: block; position:absolute; left:0; top:0.5rem; border-radius:999px;} h5.bul .more{padding:0.5rem 1rem; border:1px solid #dadada; font-weight: 400; font-size:1.4rem; color: #666; position: absolute; right:0; top:-0.2rem; display:inline-block;} h6.bul{margin-top:3.5rem;padding:0 0 1rem 1rem; font-weight: 500; font-size:2rem; line-height:1; color: #1b1b1b; letter-spacing: -0.03em; position: relative;} h6.bul:before{content: "-"; position:absolute; left:0; top:0;} h5.bul + .nTxt{margin-top:-1rem;} .f0{font-size:0; line-height:0; text-align: center;} .scrollTb{display:inline-block; font-size:0; line-height:0; } .scrollTb img{max-width:none;} .nTable.scrollTb{padding-bottom:2rem;} .scroll_info{width:100%; padding:2rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:-1rem; font-size:2rem; line-height:1; color: #ff0000; display:inline-block; position: absolute; left:44%; top:50%; animation-duration: 1s; animation-iteration-count:infinite; animation-name: scrollMove; animation-timing-function:ease-In-Out;animation-direction:alternate;} @keyframes scrollMove { from {color: #ff0000; left:42%;} to {color: #006cb7; left:46%;} } .wideFrame{height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative;} .wideFrame>video, .wideFrame>iframe{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .wideKakao{width: 100%; margin: 0 auto; position: relative;} .wideKakao>.root_daum_roughmap{width: 100%; padding-bottom: 56.25%;} .wideKakao>.root_daum_roughmap .wrap_map{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .wideKakao .hide {display: none;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:10px 20px; background-color:#f00; font-size:16px; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{padding:0.5rem 1rem; background-color:#f00; font-size:1.6rem; line-height:1.2; color:#fff; display:inline-block; position: absolute; right:0; top:0; z-index:7;} .arrBtn{padding:0 1.8rem; border:0.2rem solid #fff; font-size:16px; line-height:4rem; color: #fff; display:inline-block; border-radius:99px;} .arrBtn>span{padding-right:6rem; background: url("../img/main/arr_mBtns_w.png") no-repeat right center; background-size:3.1rem; display:inline-block;} .arrBtn.black{border-color:#333; color: #333;} .arrBtn.black>span{background-image: url("../img/main/arr_mBtns.png");} select.base{width:100%; height:4rem; padding:0 4rem 0 2rem; background:#fff url('/theme/prix/img/bg_select_arr_m.png') no-repeat right center; background-size:3.3rem; border:1px solid #666; font-weight: 400; font-size:1.5rem; line-height:3.8rem; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:5px; box-sizing:border-box;} select.base::-ms-expand{display:none;} .puls_view_btn{width:18rem; height:5.5rem; font-weight:500; font-size:1.6rem; line-height:1; color: var(--point); text-align: center; display: flex; align-items: center; justify-content: center; gap:2rem; border-radius:5rem; background-color:#fff; text-shadow:none;} .puls_view_btn span{padding-top:0.2rem; display:block; line-height:1;} .puls_view_btn .ico_box{width:1.4rem; line-height:1;} .puls_view_btn.point{background-color:var(--point); color:#fff;} .puls_view_btn.point .ico_box{background-color:var(--point);} .puls_view_btn.point .ico_box img{filter:brightness(0) invert(1);} /*[e] All Style */ /*[s] Main Popup Style */ #hd_pop {z-index:101;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops{width:auto !important; max-width:100%; height:auto !important; background-color:#fff; position:absolute; display:block; border-radius: 1rem; overflow:hidden; box-sizing:border-box; box-shadow:0 0 3rem rgba(0,0,0,0.5);} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{display: flex; gap: 1rem; justify-content: space-between; padding: 15px 2rem; font-size: 0; line-height: 0; color:#888; text-align:left;position:relative} .hd_pops_footer.white{background-color: #fff;} .hd_pops_footer.black{background-color: #000;} .hd_pops_footer .hd_pops_reject {position: relative; font-size: 14px; line-height: 1; color: #888; padding: 0 0 0 20px;} .hd_pops_footer .hd_pops_reject::before{position: absolute; content: ''; width: 14px; height: 14px; top: 0; left: 0; border: 1px solid #888; background-color: #fff;} .hd_pops_footer .hd_pops_reject::after{position: absolute; content: ''; width: 10px; height: 10px; top: 2px; left: 2px; background-image: url("http://www.tsubakikorea.co.kr/img/icon_check.svg"); background-repeat: no-repeat; background-size: contain; background-position: center;} .hd_pops_footer .hd_pops_close{width: 14px; height: 14px;/* background-image: url("http://www.tsubakikorea.co.kr/img/icon_close.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; */} /* black */ .hd_pops_footer.black .hd_pops_reject {color: #fff;} .hd_pops_footer.black .hd_pops_reject::before{border: 1px solid #fff;} /* .hd_pops_footer.black .hd_pops_reject::after{filter: brightness(0) saturate(100%) invert(100%);} */ .hd_pops_footer.black .hd_pops_close{filter: brightness(0) saturate(100%) invert(100%);} #popLayer{width:100%; height:100%; font-size:0; line-height:0; position:fixed; left:0; top:0; z-index:99; overflow:hidden; overflow-y:auto;} #popLayer.disNone{display:none !important;} #popLayer #moPopArea{width:100vw; height:100vh; padding:10rem 3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; -ms-flex-align:center;} #popLayer #moPopArea .moPop{width:100%; max-width:50rem; margin:0; position: relative;} #popLayer #moPopArea #moPopRoll{background-color: #fff; border-radius:2rem; overflow:hidden; box-shadow:0 2rem 4rem rgba(0,0,0,0.3);} #popLayer .slider{width:100%; border-radius:2rem 2rem 0 0; box-sizing:border-box; overflow:hidden;} #popLayer .slider img{width:100%; vertical-align: top;} #popLayer .slider .HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider .HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} #popLayer .layerPopClose{width:3rem; height:3rem; margin:0; padding:0; font-size:0; line-height:0; position: absolute; right:1.5rem; top:1.5rem; z-index:6; transform:rotate(45deg);} #popLayer .layerPopClose:before, #popLayer .layerPopClose:after{content: ""; background-color: #222; display: block; position:absolute; left: 50%; top:50%;} #popLayer .layerPopClose:before{width: 100%; height: 2px; margin:-1px 0 0 -1.5rem;} #popLayer .layerPopClose:after{width: 2px; height: 100%; margin:-1.5rem 0 0 -1px;} #popLayer .moPopClose{width:100%; border-radius:0 0 2rem 2rem; display: flex; justify-content: space-between; overflow:hidden;} #popLayer .moPopClose>*{flex:1 1 50%; height:6rem; font-size:1.6rem; line-height:1; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} #popLayer .moPopClose button{background-color: #878896; border:none; color: #dcdeea; position: relative;} /*#popLayer .moPopClose button:before{content: "X"; width: 1.8rem; height: 1.8rem; background-color: rgba(255,255,255,0.3); border:1px solid #000; font-family: dotum; font-weight: bold; font-size:1.6rem; line-height:1.6rem; color: #000;display: inline-block; position:absolute; top:0; box-sizing: border-box;} #popLayer .moPopClose button.toDay_close{padding-left:2.5rem;} #popLayer .moPopClose button.toDay_close:before{left:0;}*/ #popLayer .moPopClose button.close{padding-right:2.5rem} #popLayer .moPopClose button.close:before{right:0;} #popLayer .moPopClose a{background-color: #3617cd; color:#fff} #popLayer .slick-dots{width:100%; padding:0; text-align: center; position: absolute; left:0; bottom:7rem; z-index:7;} #popLayer .slick-dots>li{margin:0 0.7rem; display:inline-block; vertical-align: top;} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.4rem; height:1.4rem; padding:0; background-color:#d4d7d9; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:999px; overflow:hidden; transition: all .3s ease-out;} #popLayer .slick-dots>li.slick-active button{width:30px; background-color: #333;} #popLayer #moPopArea #moPopRoll{opacity: 0; visibility: hidden; transition: opacity 1s ease;} #popLayer #moPopArea #moPopRoll.open, #popLayer #moPopArea #moPopRoll.slick-initialized{visibility: visible; opacity: 1;} #popLayerSw{width:100%; height:100%; font-size:0; line-height:0; background-color:rgba(0, 0, 0, 0.6); position:fixed; left:0; top:0; z-index:109; overflow:hidden; overflow-y:auto;} #popLayerSw.disNone{display:none !important;} #popLayerSw #swPopArea{width:100vw; height:100vh; padding:10rem 3rem; box-sizing: border-box; display: flex; align-items:center; justify-content:center;} #popLayerSw #swPopArea .sw_btns{margin-bottom:2rem; display:flex; gap:1rem; justify-content:flex-end;} #popLayerSw #swPopArea .sw_btns .swiper-button{width:4.2rem; height:4.2rem; background:transparent; border:1px solid #fff; border-radius:50%; position:static; margin-top:0;} #popLayerSw #swPopArea .sw_btns .swiper-button::after{width:0.8rem; height:1.2rem; font-size:0; line-height:0; background-position:center; background-repeat:no-repeat; background-size:contain;} #popLayerSw #swPopArea .sw_btns .swiper-button-prev::after{background-image:url("/images/main/main_sw_prev.svg");} #popLayerSw #swPopArea .sw_btns .swiper-button-next::after{background-image:url("/images/main/main_sw_next.svg");} #popLayerSw #swPopArea .swPop{width:fit-content; max-width:107rem; margin:0; position: relative; overflow: hidden;} #popLayerSw #swPopArea .swPop .swiper-slide{width:34rem; border-radius:1rem; overflow:hidden;} #popLayerSw #swPopArea .swPop .swiper-slide img{width:100%;} #popLayerSw .swPopClose{padding-top:1rem; display:flex; align-items:center; justify-content:space-between;} #popLayerSw .swPopClose button{font-size:1.8rem; line-height:1.3; font-weight:600; color:#fff; position:relative;} #popLayerSw .swPopClose .toDay_close{padding-left:3.2rem;} #popLayerSw .swPopClose .toDay_close::before{content:''; display:block; width:2.2rem; height:2.2rem; background:url("/images/main/today_chk.svg") no-repeat center/contain; position:absolute; left:0; top:50%; transform:translateY(-50%);} #popLayerSw .swPopClose .close{padding-right:1.9rem;} #popLayerSw .swPopClose .close::after{content:""; display:block; width:1.5rem; height:1.5rem; background:url("/images/main/today_close.svg") no-repeat center/contain; position:absolute; right:0; top:50%; transform:translateY(-50%);} #popLayerSwPgnTxt{width:100%; height:100%; font-size:0; line-height:0; background-color:rgba(0, 0, 0, 0.6); position:fixed; left:0; top:0; z-index:109; overflow:hidden; overflow-y:auto;} #popLayerSwPgnTxt.disNone{display:none !important;} #popLayerSwPgnTxt #swPopArea{width:100vw; height:100vh; padding:10rem 1.5rem; box-sizing: border-box; display: flex; align-items:center; justify-content:center; flex-direction:column;} #popLayerSwPgnTxt #swPopArea .sw_btns{margin-bottom:2rem; display:flex; gap:1rem; justify-content:flex-end;} #popLayerSwPgnTxt #swPopArea .sw_btns .swiper-button{width:4.2rem; height:4.2rem; background:transparent; border:1px solid #fff; border-radius:50%; position:static; margin-top:0;} #popLayerSwPgnTxt #swPopArea .sw_btns .swiper-button::after{width:0.8rem; height:1.2rem; font-size:0; line-height:0; background-position:center; background-repeat:no-repeat; background-size:contain;} #popLayerSwPgnTxt #swPopArea .sw_btns .swiper-button-prev::after{background-image:url("/images/main/main_sw_prev.svg");} #popLayerSwPgnTxt #swPopArea .sw_btns .swiper-button-next::after{background-image:url("/images/main/main_sw_next.svg");} #popLayerSwPgnTxt #swPopArea .swPop{width:100%; max-width:450px; width:100%;} #popLayerSwPgnTxt #swPopArea .swPop .swContain{width:fit-content; max-width:450px; width:100%; margin:0; background-color:#fff; position: relative; overflow: hidden;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-slide{width:100%; aspect-ratio:45/50; overflow:hidden;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-slide p{width:100%; height:100%;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-slide img{width:100%; height:100%; object-fit:cover;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination{margin:0; display:flex; flex-wrap:wrap; position:static; background-color:#fff;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet{margin:0; padding:1rem 1.2rem; width:50%; height:auto; font-size:1.4rem; line-height:1.2; font-weight:400; color:#333; text-align:center; border-radius:0; border:1px solid #ddd; border-left:0; background-color:#fff; opacity:1; display:flex; align-items:center; justify-content:center;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet span{display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:break-all !important; overflow:hidden;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet+.swiper-pagination-bullet{} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet:nth-child(n + 3){margin-top:-1px;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet:nth-child(even){border-right:0;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet-active{background-color:var(--point); color:#fff; font-weight:700; border-color:var(--point);} #popLayerSwPgnTxt .swPopClose{padding-top:1rem; max-width:450px; width:100%; display:flex; align-items:center; justify-content:space-between;} #popLayerSwPgnTxt .swPopClose button{font-size:1.8rem; line-height:1.3; font-weight:600; color:#fff; position:relative;} #popLayerSwPgnTxt .swPopClose .toDay_close{padding-left:3.2rem;} #popLayerSwPgnTxt .swPopClose .toDay_close::before{content:''; display:block; width:2.2rem; height:2.2rem; background:url("/images/main/today_chk.svg") no-repeat center/contain; position:absolute; left:0; top:50%; transform:translateY(-50%);} #popLayerSwPgnTxt .swPopClose .close{padding-right:1.9rem;} #popLayerSwPgnTxt .swPopClose .close::after{content:""; display:block; width:1.5rem; height:1.5rem; background:url("/images/main/today_close.svg") no-repeat center/contain; position:absolute; right:0; top:50%; transform:translateY(-50%);} /*[e] Main Popup Style */ /*[s] Main Style */ .mScrolls{width:100%; font-size:0; line-height:0; text-align: center; position: fixed; left:0; bottom:40px; z-index:8; display:none; /* animation-duration: .7s; animation-iteration-count:infinite; animation-name: scrollDown; animation-timing-function:ease-in-out; animation-direction:alternate; animation:t2-sb2 0.3s cubic-bezier(.25,.46,.45,.94) both 0.5s */ animation:scrollDown .7s cubic-bezier(.25,.46,.45,.94) infinite alternate } @keyframes scrollDown { from {bottom:50px; opacity:1;} to {bottom:30px; opacity:0.5} } .mTitle{margin-bottom:7rem; color: #fff; text-align: center;} .mTitle>dt{margin-bottom:3.5rem; padding-bottom:4rem; background: url("../img/line_white.png") no-repeat center bottom; background-size: 7.8rem; font-family:"S-CoreDream-9Black"; font-size:4.8rem; line-height:1;} .mTitle>dd{font-family: 'S-CoreDream-4Regular'; font-size:2rem; line-height:1.6;} .mTitle.black{color: #111;} .mTitle.black>dt{background-image: url("../img/line_black.png");} .main_sect_top .sect_tit_sub{font-size:1.6rem; line-height:1; font-weight:700;} .main_sect_top .sect_tit{font-size:5.6rem; line-height:1.3; font-weight:600; color:#111;} .tail_arrow{display:flex; align-items:center; justify-content:center; width:6.8rem; aspect-ratio:1/1; background-color:var(--point); border-radius:5rem;} .tail_arrow img{width:2rem;} .tail_arrow.swiper-button{height:auto; margin:0;} .tail_arrow.swiper-button::after{width:2rem; height:1.8rem; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center; background-size:contain;} .tail_arrow.swiper-button-prev::after{background-image:url("/images/tail_arrow_left_ico_20.svg");} .tail_arrow.swiper-button-next::after{background-image:url("/images/tail_arrow_right_ico_20.svg");} .tail_arrow.swiper-button.swiper-button-disabled{opacity:1; background-color:#DBDBDB;} /* visual */ #mainVisual{padding:6rem 1.5rem 0; width:100%; position: relative; overflow:hidden;} #mainVisual .swiper{max-width:1620px; overflow:visible;} #mainVisual .visualRoll{white-space: nowrap;} #mainVisual .visualRoll .swiper-slide{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top; border-radius:4rem;} #mainVisual .visualRoll .swiper-slide::before{content:""; display:block; position:absolute; inset:0 0 0 0; z-index:1; background-color:rgba(0, 0, 0, 0.7);} #mainVisual .visualRoll .swiper-slide>img{width:100%; max-width:none; height:69rem; object-fit: cover; object-position: center center; transform:scale(1.05); transition:all 0.3s ease-in-out;} #mainVisual .vTxtArea{width:100%; max-width:152rem; height:100%; padding:0 2rem; text-align: left; position: absolute; left:50%; top:0; z-index:5; display: flex; align-items: center; justify-content: center; transform:translateX(-50%);} #mainVisual .vTxt{width:100%; position: relative; padding-bottom:10.3rem;} #mainVisual .vTxt .ii{line-height:1; color: #fff; top:50px; text-align: center; font-family:var(--mtsr); display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word; white-space: normal; text-shadow:1.5rem 1.5rem 1.5rem rgba(0,0,0,0.3); transition:all 0.3s ease-out;} #mainVisual .vTxt .i01{transition-delay: 1.3s;} #mainVisual .vTxt .i02{transition-delay: 1.35s;} #mainVisual .vTxt .i03{transition-delay: 1.4s;} #mainVisual .vTxt .i04{transition-delay: 1.45s;} #mainVisual .vTxt .i05{transition-delay: 1.5s;} #mainVisual .vTxt .i06{transition-delay: 1.55s;} #mainVisual .vTxt .i07{transition-delay: 1.6s;} #mainVisual .vTxt .ii.cate{font-weight: bold; font-size:1.7rem; position: relative;} #mainVisual .vTxt .ii.cate:before{content: ""; width: 4.4rem; height:0.2rem; margin-left:-2.2rem; background-color: #fff; position:absolute; left: 50%; top:3.2rem;} #mainVisual .vTxt .ii.text{margin-top:2rem; font-size:2rem; line-height:1.3; font-weight:500;} #mainVisual .vTxt .ii.title{font-size:4rem; line-height:1.3; font-weight:500;} #mainVisual .vTxt .ii.title02{font-size:7rem; line-height:1.3; font-weight:700;} #mainVisual .vTxt .ii.btn{position:absolute; bottom:0; left:0; top:auto; width:100%;} #mainVisual .vTxt .ii.btn .puls_view_btn{margin:0 auto;} #mainVisual .swiper-option{max-width:156rem; width:100%; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:flex-end; gap:1rem; position:absolute; left:50%; bottom:4rem; z-index:3; transform:translateX(-50%);} #mainVisual .swiper-option>*{background-color:rgba(255,255,255,0.3);} #mainVisual .swiper-button{margin:0; width:auto; height:auto; font-family:'SUIT Variable'; font-size:0; position:relative; top:auto; left:auto; display: inline-block; cursor: pointer; z-index:7;} #mainVisual .swiper-button-prev{left:0;} #mainVisual .swiper-button-next{right:0;} #mainVisual .swiper-button:hover{color: rgba(255,255,255,1);} #mainVisual .play_box{width:3.2rem; height:3.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center;} #mainVisual .play_btn{font-size:0; width:1.1rem;} #mainVisual .play_btn::before{content:'';display:block;box-sizing:border-box;} #mainVisual .play_btn.play::before{width:0.7rem;height:0.9rem;border-left:2px solid #fff;border-right: 2px solid #fff;margin:0 auto} #mainVisual .play_btn.pause{width:0.8rem;} #mainVisual .play_btn.pause::before{border-left:0.8rem solid #ddd;border-bottom: 0.5rem solid transparent;border-top: 0.5rem solid transparent;} #mainVisual .control_box{padding:0.9rem 3rem 1rem; display:flex; gap:1.5rem; align-items:center; border-radius:2rem;} #mainVisual .swiper-pagination{display: flex; align-items: center; justify-content:center; gap:0 0.5rem; position:relative; top:auto; bottom:auto; left:auto; z-index:5;} #mainVisual .swiper-pagination span{display:inline-block; width:2rem; font-size:1.6rem; line-height:1.3; font-weight:600;} #mainVisual .swiper-pagination .swiper-pagination-current{color:#fff} #mainVisual .swiper-pagination .swiper-pagination-total{color:#cfcfcf;} #mainVisual .swiper-pagination .timmer{width:15rem; height:2px; background-color:#cfcfcf;} #mainVisual .swiper-pagination .timmer .timmer__inner{width:0; height:100%; background-color:#fff;} #mainVisual .sw_btn_box{display:flex; align-items:center; gap:0.8rem;} #mainVisual .sw_btn_box::before{content:""; order:2; display:block; width:2px; height:0.9rem; background-color:#d7d7d7;} #mainVisual .sw_btn_box .swiper-button{width:0.8rem;} #mainVisual .sw_btn_box .swiper-button::after{display:none;} #mainVisual .sw_btn_box .swiper-button-prev{order:1;} #mainVisual .sw_btn_box .swiper-button-next{order:3;} #mainVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;} #mainVisual .swiper-slide-active .vTxt .ii.btn{top:auto; bottom:0; opacity:1;} #mainVisual .visualRoll .swiper-slide.swiper-slide-active>img{transform:scale(1);} /* main_quik_nav */ .main_quik_nav{padding-top:3rem; padding-bottom:1rem} .main_quik_nav .scrl_box{overflow-x:auto;} .main_quik_nav ul{max-width:1370px; margin:0 auto; display:flex; overflow:hidden;} .main_quik_nav ul li{padding:0 1.5rem; width:calc(100% / 5); text-align:center; position:relative;} .main_quik_nav ul li::before{content:""; display:block; width:1px; height:7.6rem; background:url("/images/main/main_quik_stroke.svg") repeat-y center/1px; position:absolute; left:-1px; top:50%; transform:translateY(-50%);} .main_quik_nav ul li a{display:block; padding:2rem 0 1.9rem; border-radius:1rem; overflow:hidden; transition:all 0.3s ease-out;} .main_quik_nav ul li .ico_box{margin-bottom:1rem; width:7rem; display:inline-block;} .main_quik_nav ul li .ico_box img{transition:all 0.3s ease-out;} .main_quik_nav ul li a p{font-size:1.6rem; line-height:1.3; font-weight:600; color:#333; transition:all 0.3s ease-out;} .main_quik_nav ul li:hover a{background-color:var(--point);} .main_quik_nav ul li:hover .ico_box img{filter:brightness(0) invert(1)} .main_quik_nav ul li:hover a p{color:#fff} /* main_mdc_team */ .main_mdc_team{padding:10rem 0; background:url("/images/main/main_mdc_team_bg.jpg") no-repeat left bottom/cover; --container: 166rem; /* .inConts의 max-width */ --gutter: 1.5rem; /* .inConts 좌우 패딩 있으면 여기에 넣기 (예: 2rem) */ } .main_mdc_team .inConts1620{display:flex;} .main_mdc_team .main_sect_top{width:54.5rem;} .main_mdc_team .main_sect_top .puls_view_btn{margin:4rem 0 0 0;} .main_mdc_team .sw_mdc_team{padding-bottom:3.3rem; width:calc(100% - 54.5rem); position:relative;} .main_mdc_team .sw_mdc_team .sw_contain{width: calc(100% + max(0px, calc(((100vw - var(--sbw, 0px)) - var(--container)) / 2) + var(--gutter))); position: relative; overflow: hidden;}/* --sbw는 스크립트로 계산 */ .main_mdc_team .sw_mdc_team .swiper-slide{width:40rem;} .main_mdc_team .sw_mdc_team .swiper-slide .thumb{border-radius:2rem; overflow:hidden;} .main_mdc_team .sw_mdc_team .swiper-slide:hover .thumb img{transform:scale(1.02);} .main_mdc_team .sw_mdc_team .swiper-slide .area{padding:2rem 0;} .main_mdc_team .sw_mdc_team .swiper-slide .title__area{display:flex; align-items:center; justify-content:space-between;} .main_mdc_team .sw_mdc_team .swiper-slide .title__area .title{font-size:2.6rem; line-height:1.3; font-weight:700; color:#111;} .main_mdc_team .sw_mdc_team .swiper-slide .title__area .label{padding:0.9rem 1.5rem 0.8rem; min-width:9rem; height:4rem; font-size:1.8rem; line-height:1.3; font-weight:600; color:#fff; text-align:center; background-color:var(--point); border-radius:0.5rem;} .main_mdc_team .sw_mdc_team .swiper-pagination{bottom:0; top:auto; z-index:0; border-radius:0.3rem; background-color:#f5f5f5; overflow:hidden;} .main_mdc_team .sw_mdc_team .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color:var(--point); border-radius:0.3rem;} /* main_key_prgrm */ .main_key_prgrm{padding:13.3rem 0 13.2rem; background:url("/images/main/main_key_prgrm_bg.jpg") no-repeat center/cover;} .main_key_prgrm .main_sect_top{margin-bottom:7rem; justify-content:space-between;} .main_key_prgrm .key_prgrm_li{display:flex; gap:3rem 7.5rem; flex-wrap:wrap;} .main_key_prgrm .key_prgrm_li li{width:calc((100% - 15rem)/3); border-radius:4rem; overflow:hidden; position:relative; transition:all 0.3s ease-out;} .main_key_prgrm .key_prgrm_li li a{display:block; color:#D2D2D2} .main_key_prgrm .key_prgrm_li li .thumb{position:relative;} .main_key_prgrm .key_prgrm_li li .thumb::after{content:""; display:block; position:absolute; inset:0 0 0 0; z-index:1; background-color:rgba(0,0,0,0.7); transition:all 0.3s ease-out;} .main_key_prgrm .key_prgrm_li li .area{padding:4rem 5rem; display:flex; flex-direction:column; justify-content:flex-end; gap:1.2rem; position:absolute; left:0; top:0; z-index:2; width:100%; height:100%;} .main_key_prgrm .key_prgrm_li li .title{font-size:2rem; line-height:1.3; font-weight:700; transition:all 0.3s ease-out;} .main_key_prgrm .key_prgrm_li li .title em{display:block; font-size:3.6rem; font-weight:800;} .main_key_prgrm .key_prgrm_li li .tail_arrow{margin-bottom:-8rem; opacity:0; transition:all 0.3s ease-out;} .main_key_prgrm .key_prgrm_li li:hover{border-radius:1rem;} .main_key_prgrm .key_prgrm_li li:hover .thumb img{transform:scale(1.02);} .main_key_prgrm .key_prgrm_li li:hover .thumb::after{opacity:0;} .main_key_prgrm .key_prgrm_li li:hover .title{color:#fff;} .main_key_prgrm .key_prgrm_li li:hover .tail_arrow{margin-bottom:0; opacity:1;} /*.main_key_prgrm .sw_key_prgrm .sw_contain{overflow:hidden; position:relative;} .main_key_prgrm .sw_key_prgrm .swiper-slide{width:49rem; border-radius:4rem; overflow:hidden; transition:all 0.3s ease-out;} .main_key_prgrm .sw_key_prgrm .swiper-slide a{display:block; color:#D2D2D2} .main_key_prgrm .sw_key_prgrm .swiper-slide .thumb{position:relative;} .main_key_prgrm .sw_key_prgrm .swiper-slide .thumb::after{content:""; display:block; position:absolute; inset:0 0 0 0; z-index:1; background-color:rgba(0,0,0,0.7); transition:all 0.3s ease-out;} .main_key_prgrm .sw_key_prgrm .swiper-slide .area{padding:4rem 5rem; display:flex; flex-direction:column; justify-content:flex-end; gap:1.2rem; position:absolute; left:0; top:0; z-index:2; width:100%; height:100%;} .main_key_prgrm .sw_key_prgrm .swiper-slide .title{font-size:2rem; line-height:1.3; font-weight:700; transition:all 0.3s ease-out;} .main_key_prgrm .sw_key_prgrm .swiper-slide .title em{display:block; font-size:3.6rem; font-weight:800;} .main_key_prgrm .sw_key_prgrm .swiper-slide .tail_arrow{margin-bottom:-8rem; opacity:0; transition:all 0.3s ease-out;} .main_key_prgrm .sw_key_prgrm .swiper-slide:hover{border-radius:1rem;} .main_key_prgrm .sw_key_prgrm .swiper-slide:hover .thumb img{transform:scale(1.02);} .main_key_prgrm .sw_key_prgrm .swiper-slide:hover .thumb::after{opacity:0;} .main_key_prgrm .sw_key_prgrm .swiper-slide:hover .title{color:#fff;} .main_key_prgrm .sw_key_prgrm .swiper-slide:hover .tail_arrow{margin-bottom:0; opacity:1;}*/ /* main_bg_deco_wr */ .main_bg_deco_wr{padding-top:15rem; background:url("/images/main/main_bg_deco_wr_img.jpg") no-repeat center/cover;} /* main_banner */ .main_banner{margin:0 auto 15rem; max-width:1780px; width:calc(100% - 3rem); padding:9.4rem 3rem; border-radius:3rem; text-align:center; background:url("/images/main/main_banner_bg.jpg") no-repeat center/cover;} .main_banner .cont p{margin-bottom:2rem; font-size:4rem; line-height:1.3; font-weight:700; color:#fff} .main_banner .cont img{width:43.1rem; filter:brightness(0) invert(1);} /* main_news_late */ .main_news_late{padding-bottom:10.7rem;} .main_news_late .main_sect_top {margin-bottom:6rem;} .main_news_late .main_sect_top .sect_tit{text-align:center;} .main_news_late .news_tab{padding:0.8rem 0.8rem 0.7rem; margin:0 auto 4rem; width:fit-content; display:flex; background-color:rgba(52, 93, 70, 0.15); border-radius:4.5rem;} .main_news_late .news_tab button{padding:1.8rem 1.8rem; width:19.7rem; font-size:2.6rem; line-height:1.3; font-weight:700; color:var(--point); text-align:center; border-radius:4rem; transition:all 0.3s ease-out;} .main_news_late .news_tab button.active{color:#fff; background-color:var(--point);} .main_news_late .news_area{padding-bottom:13.4rem; background:url("/images/main/main_news_late_txt_bg.svg") no-repeat center bottom/100%;} .main_news_late .news_box{padding-top:8.8rem; position:relative;} .main_news_late .news_box .sw_contain{position:relative; overflow:hidden;} .main_news_late .news_box .swiper-wrapper{align-items:stretch;} .main_news_late .news_box .swiper-slide{width:37rem; height:auto;} .main_news_late .news_box .swiper-slide a{display:block; width:100%; height:100%; background-color:#EBEBEB; border-radius:2rem; overflow:hidden; transition:all 0.3s ease-out;} .main_news_late .news_box .swiper-slide .thumb{overflow:hidden; border-radius:2rem; aspect-ratio:37/26; position:relative;} .main_news_late .news_box .swiper-slide .thumb img{width:100%; height:100%; object-fit:cover;} .main_news_late .news_box .swiper-slide .thumb.no-img::after{content:""; display:block; position:absolute; inset: 0 0 0 0; z-index:1; border:1px solid #EBEBEB; border-radius:2rem;} .main_news_late .news_box .swiper-slide .area{padding:2rem 2rem 3.7rem;} .main_news_late .news_box .swiper-slide .title{height:5.2rem; font-size:2rem; line-height:1.3; font-weight:600; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; transition:all 0.3s ease-out;} .main_news_late .news_box .swiper-slide .date{margin-top:2rem; font-size:1.6rem; line-height:1.3; font-weight:500; color:#888; font-family:var(--popp); transition:all 0.3s ease-out;} .main_news_late .news_box .swiper-slide.no_post{width:100%; height:41rem; font-size:2rem; line-height:1.3; font-weight:500; color:#888; display:flex; justify-content:center; align-items:center; border-radius:2rem; border:1px solid #EBEBEB; background-color:#fff;} .main_news_late .news_box .sw_btns{margin-bottom:2rem; display:none; gap:1rem; justify-content:flex-end; position:absolute; right:0; top:0; z-index:1;} .main_news_late .news_box .sw_btns .swiper-button{height:auto; margin:0; position:static; z-index:0;} .main_news_late .news_box .swiper-slide:hover a{background-color:var(--point);} .main_news_late .news_box .swiper-slide:hover .thumb img{transform:scale(1.02);} .main_news_late .news_box .swiper-slide:hover .title{color:#fff} .main_news_late .news_box .swiper-slide:hover .date{color:#fff} /* main_media */ .main_media{padding:15rem 0 10rem; position:relative;} .main_media::before{content:""; display:block; max-width:1845px; width:100%; height:100%; border-radius:0 9rem 0 0; background-color:#fff; box-shadow:0 0 2rem 0 rgba(102, 102, 102, 0.15); position:absolute; left:0; top:0; z-index:0;} .main_media .inConts1620{display:flex; gap:12rem 8rem; flex-wrap:wrap; position:relative; z-index:1;;} .main_media .main_sect_top{margin-bottom:6.4rem;} .main_media .main_sect_top .sect_tit{font-size:4.7rem;} .main_media .media_board{width:calc(50% - 4rem); position:relative;} .main_media .sw_contain{overflow:hidden;} .main_media .swiper-wrapper{align-items:stretch;} .main_media .swiper-slide{width:37rem; height:auto;} .main_media .swiper-slide a{display:block; width:100%; height:100%; border-radius:2rem; background-color:#EBEBEB; overflow:hidden; transition:all 0.3s ease-out;} .main_media .swiper-slide .thumb{overflow:hidden; border-radius:2rem; aspect-ratio:37/30; position:relative;} .main_media .swiper-slide .thumb img{width:100%; height:100%; object-fit:cover;} .main_media .swiper-slide .thumb.no-img::after{content:""; display:block; position:absolute; inset: 0 0 0 0; z-index:1; border:1px solid #EBEBEB; border-radius:2rem;} .main_media .swiper-slide .area{padding:2rem 2rem 3rem;} .main_media .swiper-slide .title{height:5.2rem; font-size:2rem; line-height:1.3; font-weight:600; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; transition:all 0.3s ease-out;} .main_media .swiper-slide .date{margin-top:2rem; font-size:1.6rem; line-height:1.3; font-weight:500; color:#888; font-family:var(--popp); transition:all 0.3s ease-out;} .main_media .swiper-slide.no_post{width:100%; height:44.3rem; font-size:2rem; line-height:1.3; font-weight:500; color:#888; display:flex; justify-content:center; align-items:center; border-radius:2rem; border:1px solid #EBEBEB; background-color:#fff;} .main_media .media_board .sw_btns{display:none; gap:1rem; justify-content:flex-end; position:absolute; right:0; top:0; z-index:1;} .main_media .media_board .sw_btns .swiper-button{height:auto; margin:0; position:static; z-index:0;} .main_media .media_board .swiper-slide:hover a{background-color:var(--point);} .main_media .media_board .swiper-slide:hover .thumb > img{transform:scale(1.02);} .main_media .media_board .swiper-slide:hover .title{color:#fff} .main_media .media_board .swiper-slide:hover .date{color:#fff} .main_media .main_share-activity .thumb::before{content:""; background-color:rgba(0, 0, 0, 0.6); position:absolute; inset:0 0 0 0; z-index:1;} .main_media .main_share-activity .thumb.blur > img{filter:blur(1rem);} .main_media .main_share-activity .title{width:100%; height:auto; color:#fff; text-align:center; position:absolute; left:0; top:50%; z-index:2; transform:translateY(-50%);} .main_media .main_share-activity .title .logo_box{margin-bottom:1.5rem;} .main_media .main_share-activity .title .logo_box img{width:10rem; filter:brightness(0) invert(1);} .main_media .main_share-activity .area .info{display:flex; gap:1rem; align-items:center;} .main_media .main_share-activity .area .info .cate{padding:0.5rem 1rem; font-size:1.6rem; line-height:1; color:#fff; font-weight:400; background-color:var(--point); border-radius:0.5rem;} .main_media .main_share-activity .area .info .name{font-size:2rem; line-height:1.3; font-weight:600;} .main_media .main_share-activity .swiper-slide .date{margin-top:4.6rem;} .main_media .main_share-activity .swiper-slide:hover .info .name{color:#fff} /* main_focus */ .main_focus{padding:14rem 0 29rem; background:url("/images/main/main_focus_bg.jpg") no-repeat center/cover;} .main_focus .main_sect_top{margin-bottom:7rem; text-align:center;} .main_focus .main_focus_sw{padding-bottom:5.8rem; max-width:1126px; margin:0 auto; position:relative;} .main_focus .sw_contain{height:54.1rem;} .main_focus .sw_contain .swiper-wrapper{align-items:center;} .main_focus .sw_contain .swiper-slide{width:84rem; height:auto; border-radius:2rem; overflow:hidden; background-color:#fff;} .main_focus .sw_contain .swiper-slide a{display:block; padding-bottom:16.7rem; position:relative; transition:padding 0.3s ease-out;} .main_focus .sw_contain .swiper-slide .thumb{aspect-ratio:840/400; overflow:hidden; position:relative; z-index:2;} .main_focus .sw_contain .swiper-slide .thumb img{width:100%; height:100%; object-fit:cover;} .main_focus .sw_contain .swiper-slide .area{padding:3rem 3rem 3.7rem; position:absolute; left:0; bottom:0; z-index:0; transition:all 0.3s ease-out; opacity:1; overflow:hidden; transition-delay:0.3s} .main_focus .sw_contain .swiper-slide .area .title{font-size:2.6rem; line-height:1.3; font-weight:600; color:#111; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden; transition:all 0.3s ease-out;} .main_focus .sw_contain .swiper-slide .area .text{margin-top:1.5rem; font-size:1.6rem; line-height:1.6; font-weight:600; color:#666; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; transition:all 0.3s ease-out;} .main_focus .sw_contain .swiper-slide:not(.swiper-slide-active) a{padding-bottom:0;} .main_focus .sw_contain .swiper-slide:not(.swiper-slide-active) .area{opacity:0;} .main_focus .main_focus_sw .swiper-button{height:auto; margin-top:-3.4rem;} .main_focus .main_focus_sw .swiper-button.left{left:0;} .main_focus .main_focus_sw .swiper-button.right{right:0;} .main_focus .main_focus_sw .swiper-pagination{bottom:0; z-index:1;} .main_focus .main_focus_sw .swiper-pagination-bullet{background-color:#DADADA; border:1px solid #DADADA; opacity:1;} .main_focus .main_focus_sw .swiper-pagination-bullet-active{background-color:transparent;} /* main_customer */ .main_customer{padding-top:16rem; margin-top:-16rem; position:relative;} .main_customer::before{content:""; display:block; width:calc(100% + 18rem); height:52.6rem; background-color:var(--point); border-radius:50%; position:absolute; top:0; left:50%; transform:translateX(-50%);} .main_customer .innr{background:var(--point); padding-bottom:17rem;} .main_customer .inConts1620{max-width:165.5rem;} .main_customer .main_sect_top{text-align:center; color:#fff;} .main_customer .main_sect_top h2 p{margin-bottom:1.5rem; font-size:2.8rem; line-height:1.3; font-weight:500;} .main_customer .main_sect_top h2 p span{margin:0 0.5rem 0 1rem; display:inline-flex; align-items:center; justify-content:center; width:9.5rem; height:5rem; line-height:1; font-weight:700; color:var(--point); text-align:center; border-radius:5rem; background-color:#fff;} .main_customer .main_sect_top h2 em{display:block; font-size:5.6rem; line-height:1.3; font-weight:500;} .main_customer .cstm_content{margin-top:8rem; display:flex; gap:2.4rem; flex-wrap:wrap; color:#fff} .main_customer .cstm_info{width:60.3%;} .main_customer .clinic_info_card{padding:4.5rem 6.5rem 5.3rem; display:flex; gap:3rem; flex-wrap:wrap; justify-content:space-between; background:url("/images/main/main_clinic_info_card_bg.png") no-repeat center/cover; border-radius:1rem;} .main_customer .clinic_info_card > figure{width:20.4rem;} .main_customer .clinic_info_card > figure img{filter:brightness(0) invert(1);} .main_customer .clinic_info_cont{flex:1; max-width:49.7rem;} .main_customer .clinic_hours{display:flex; gap:2rem; flex-wrap:wrap;} .main_customer .clinic_hours > em{width:13.8rem; font-size:2.6rem; line-height:1.3; font-weight:700;} .main_customer .clinic_hours .clinic_h_schedule{font-size:1.8rem; line-height:1.3; color:#C8C8C8;} .main_customer .clinic_hours .clinic_h_schedule li{display:flex; gap:1rem; flex-wrap:wrap;} .main_customer .clinic_hours .clinic_h_schedule li+li{margin-top:0.5rem;} .main_customer .clinic_hours .clinic_h_schedule li > span{width:7.5rem; font-weight:600; color:#fff} .main_customer .clinic_hours .clinic_h_schedule .asterisk{margin-top:1.5rem; font-size:1.8rem; line-height:1.3; font-weight:600; opacity:0.7;} .main_customer .clinic_info_contact{margin-top:3rem; display:flex; gap:2rem; font-size:3.4rem; line-height:1.3; font-weight:700;} .main_customer .clinic_info_contact dt{width:13.8rem;} .main_customer .cstm_branch_map{margin-top:2rem; border-top:1px solid rgba(255,255,255,0.25);} .main_customer .cstm_branch_map li{margin-top:2rem; padding:2rem 3.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-radius:1rem; background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.30) 100%), var(--point);} .main_customer .cstm_branch_map dl{display:flex; gap:2.5rem; align-items:center;} .main_customer .cstm_branch_map dl dt{width:9rem; aspect-ratio:1/1; font-size:2.2rem; line-height:1; font-weight:700; color:var(--point); background-color:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center;} .main_customer .cstm_branch_map dl dd{font-size:2.2rem; line-height:1.3; font-weight:700; display:flex; align-items:center;} .main_customer .cstm_branch_map dl dd p+p{margin-left:2rem; padding-left:2.2rem; position:relative;} .main_customer .cstm_branch_map dl dd p+p::before{content:""; display:block; width:0.2rem; height:1.3rem; background-color:rgba(255,255,255,0.6); position:absolute; left:0; top:50%; transform:translateY(-50%);} .main_customer .cstm_branch_map .map_btns{flex:1; display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:flex-end;} .main_customer .cstm_branch_map .map_btns a{display:flex; justify-content:center; align-items:center; gap:1rem; padding:2.1rem 3rem; font-size:1.4rem; line-height:1; font-weight:600; color:#fff; text-align:center; background-color:#1c1c1c; border-radius:7rem;} .main_customer .cstm_branch_map .map_btns a::before{content:""; display:block; width:2.2rem; height:2.8rem; background-repeat:no-repeat; background-position:center; background-size:contain;} .main_customer .cstm_branch_map .map_btns a.naver::before{background-image:url("/images/main/cstm_branch_map_naver_ico.svg");} .main_customer .cstm_branch_map .map_btns a.kakao::before{background-image:url("/images/main/cstm_branch_map_kakao_ico.svg");} .main_customer .cstm_nav{flex:1; max-width:62.1rem; display:flex; gap:2rem; flex-wrap:wrap;} .main_customer .cstm_nav a{padding:5.7rem 3rem 6.4rem; width:calc(50% - 1rem); font-size:2.2rem; line-height:1.3; font-weight:700; color:#fff; text-align:center; display:block; background-color:rgba(255,255,255,0.15); border-radius:1rem;} .main_customer .cstm_nav a span{display:block;} .main_customer .cstm_nav a::before{content:""; margin:0 auto 3rem; display:block; width:12.5rem; height:12rem; background-repeat:no-repeat; background-position:center; background-size:contain;} .main_customer .cstm_nav a:nth-child(1)::before{background-image:url("/images/main/main_cstm_nav_01_ico.svg");} .main_customer .cstm_nav a:nth-child(2)::before{background-image:url("/images/main/main_cstm_nav_02_ico.svg");} .main_customer .cstm_nav a:nth-child(3)::before{background-image:url("/images/main/main_cstm_nav_03_ico.svg");} .main_customer .cstm_nav a:nth-child(4)::before{background-image:url("/images/main/main_cstm_nav_04_ico.svg");} /*[s] Sub Style */ /* HISTORY */ .history-area{position: relative; font-size: 0; line-height: 0;} .history-area:before{position: absolute; content: ''; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; height: 100%; background-color: #ccc;} /* .history-area #his_progress{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color:var(--point); display: inline-block; position:absolute; left: 50%; top:1.5rem; border-radius: 0 0 9px 9px;} */ .history-area > li{position: relative; display: flex; gap: 22rem; flex-wrap: wrap; align-items: center; flex-direction: row;} .history-area > li + li{margin-top: 11rem;} .history-area > li::before{position: absolute; content: ''; width: 1.5rem; height: 1.5rem; top: calc(50% - 0.75rem); left: calc(50% - 0.75rem); background-color: #193989; border-radius: 50%; z-index: 2;} .history-area > li::after{position: absolute; content: ''; width: 9rem; height: 1px; top: calc(50% - 0.5px); right: calc(50% + 1px); background-color: #ccc; z-index: 1;} .history-area > li:nth-of-type(even){flex-direction: row-reverse;} .history-area > li:nth-of-type(even)::after{left: calc(50% + 1px); right: auto;} .history-area > li .history-in, .history-area > li .thumb{width: calc((100% - 22rem)/2);} .history-area > li .history-in > strong{display: inline-block; font-size: 4.2rem; line-height: 1; color: #27489c; font-weight: bold; font-family: var(--play); margin-bottom: 3rem;} .history-area > li .history-in .txt_wrap{position: relative;} .history-area > li .history-in .txt_wrap > li{position: relative; font-size: 2.1rem; line-height: 3rem; color: #666666; padding-left: 5rem;} .history-area > li .history-in .txt_wrap > li::before{position: absolute; content: attr(data-month)'월'; top: 0; left: 0; color: #111; font-weight: 550;} .history-area > li:nth-of-type(even) .history-in{text-align: right;} .history-area > li:nth-of-type(even) .history-in .txt_wrap > li{padding-left: 0; padding-right: 5rem;} .history-area > li:nth-of-type(even) .history-in .txt_wrap > li::before{left: auto; right: 0;} /* type 2 */ .etc_clause{width:90%; margin:0 auto; font-size:0; line-height:0; text-align: center; box-sizing:border-box; position: relative; overflow: visible;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;top:2%;bottom:0;left:10px;right:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-border-radius:100px / 10px; border-radius:100px / 10px;} .etc_clause:after{right:10px;left:auto;-webkit-transform:skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg);-o-transform:skew(8deg) rotate(3deg);transform:skew(8deg) rotate(3deg);} .etc_clause .etc_clause_in{padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; border-radius:10px; position: relative; z-index:2;} .etc_clause .logo{margin:0;} .etc_clause .logo img{} .etc_clause .txt{padding:15px 0 55px; font-weight: 300; font-size:18px; line-height:1; color: #636363;} .etc_clause .txt>span{font-weight: 400; color: #1b1b1b;} .etc_clause .scroll{font-weight:400; font-size:18px !important; line-height:1.8; color: #626262; text-align: left;} .etc_clause .scroll span{font-weight:400; font-size:16px !important; line-height:1.8; color: #626262; text-align: left;} .etc_select{width:90%; margin:0 auto 2rem;} .etc_select select.base{width:17rem;} /*[e] Sub Style */ /*[s] Plugin Style */ .layer-base.fancybox__content>.carousel__button.is-close{width:3.3rem; height:3.3rem; top:2.2rem !important; right:3rem;} .layer-base.fancybox__content>.carousel__button.is-close svg{width:100%; height:100%; stroke-width:1.5; filter:none; color: #666;} .layer-base{padding:0 !important; background-color: #fff; font-size:0; line-height:0; display:none; border-radius:1rem;} .layer-base .layer-in{padding:12rem 10rem;} .lay-table{width:100%; font-size:0; line-height:0;} .lay-table>table{width:100%; border-spacing:0; table-layout : fixed;} .lay-table>table th, .lay-table>table td{height:7rem; padding:1.5rem 0; background-color: #fff; border-top:1px solid #ebebeb; font-size:1.6rem; line-height:1.5; color:#666; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .lay-table>table th{} .lay-table>table>thead>tr>th{} .lay-table>table>tbody>tr>th{font-weight: 500; color: #222;} .lay-table>table .tel{padding-left:4rem; display:inline-block;} .lay-table>table .tel>strong{font-weight: 500; color: #ffde25;} .lay-table>table .btns{width:20rem; height:5rem; background-color: #fff; font-weight: 500; font-size:1.6rem; line-height:5rem; color: #222; text-align: center; display:inline-block; vertical-align: top; border-radius:0.5rem; box-shadow:0 0 2rem rgba(0,0,0,0.1);} .lay-table>table .btns>span{font-weight:bold; font-size:1.6rem;} .lay-table>table .btns+.btns{margin-left:1rem;} .lay-table>table .btns.kakao{background-color: #ffe618;} #layer-time, #layer-juso{width:100%; max-width:160rem;} .layer-base .title{padding-top:2.3rem; font-weight: bold; font-size:3rem; line-height:1; color: #222; position: relative;} .layer-base .title:before{content: ""; width: 4rem; height: 0.5rem; background-color: #222; font-size:0; line-height:0; display: inline-block; position:absolute; left: 0; top:0px;} .lay-time-area{margin-top:3rem; display: flex; justify-content: space-between;} .lay-time-area .lay-map{width:50%; border-radius:1rem; overflow:hidden; position: relative;} .lay-time-area .lay-map>img{width:100%; max-width:none;} .lay-time-area .lay-map .root_daum_roughmap{width:1400px; height:700px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);} .lay-time-area .lay-map .wrap_map, .lay-time-area .lay-map .map{width:100%; height:100%;} .lay-time-area .lay-table{width:45.7142%;} #layer-schdule{width:100%; max-width:84rem;} #layer-schdule .layer-in{padding:8rem 4rem 5rem;} #layer-schdule .layer-schdule-area{} #layer-schdule .layer-schdule-text{margin-top:4rem; font-size:1.6rem; line-height:1.4; color: #666;} #layer-schdule .layer-schdule-text>dt{font-weight: 500; font-size:1.8rem; color: #222; } #layer-schdule .layer-schdule-text>dd{margin-top:1rem;} /* Layer Style */ /*.layerArea .layerIn .layerBgIn{width:0px; height:0px; background-color: rgba(255,255,255,0.7); position:absolute; left:50%; top:50%; z-index:100; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;}*/ .layerCell{display:none;} .layerArea{width:0px; height:0px; background-color: rgba(0,0,0,0.7); position:fixed; left:50%; top:50%; z-index:99; overflow:hidden; overflow-y:auto; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea.one, .layerArea.two{width:100%; height:100%; left:0%; top:0%;} .layerArea.two .layerBgIn{width:100%; height:100%; left:0%; top:0%;} .layerArea .closeLy{width:1.7rem; height:1.7rem; display:inline-block; position: absolute; right:0; top:0;} .layerArea .closeLy:before, .layerArea .closeLy:after{content: ""; background-color: #080808; position: absolute; left:50%; top:50%;} .layerArea .closeLy:before{width: 100%; height: 2px; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy:after{width: 2px; height: 100%; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy.type02{width:2.3rem; height:2.3rem; right:3rem; top:3rem;} .layerArea .closeLy.type02:before, .layerArea .closeLy.type02:after{background-color: #676767;} .layerArea .layerIn{width:100%; height:100%; display: table; position:relative;} .layerArea .layerIn .layerCell{width:100%; height:100%; padding:70px 0; display: table-cell; vertical-align:middle; position:relative; box-sizing: border-box;} .layerArea .layerIn .layerBox{margin:0 auto; background-color: #fff; font-size:0; line-height:0; display:none; position: relative; box-sizing: border-box; z-index:99; border-radius:1rem;} /* .layerArea .layerIn .layerBox>.tit_lay{padding:25px 25px 15px;} .layerArea .layerIn .layerBox>.tit_lay>strong{font-size:16px; line-height:1; color:#00a9cc;} */ .layerArea .layerIn .layerBox .contLy{position: relative;} .downlay{width:100%; padding:10rem 0; border-radius:0 !important;} .downlay .closeLy{top:-5rem;} .downlay>.contLy{width:64.5rem; margin:0 auto; text-align: center;} .downlay .title{padding-bottom:5rem; font-weight: bold; font-size:3rem; line-height:1; color: #000;} .downlay .title>strong{color: #23abaf;} .downlay .utllBox{width:47.6rem; margin:0 auto; display:table; table-layout: fixed;} .downlay .utllBox>*{width:50%; display:table-cell; vertical-align: top; box-sizing: border-box;} .downlay .utllBox .tit{font-size:1.5rem; line-height:1; color: #666;} .downlay .utllBox .txt{margin-top:2.5rem; font-size:1.2rem; line-height:1; color: #888;} .downlay .utllBox .icon{height:15rem; margin-top:3rem; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center;} .downlay .utllBox .icon>p+p{margin-top:2rem;} .downlay .utllBox>.qr{border-left:1px solid #dadada;} .downlay .utllBox>.store img{width:16.8rem;} .downlay .utllBox>.qr img{width:15rem;} .formLay{width:62rem; padding:7rem 5rem 6rem; border-radius:1rem;} .formLay input[type=text]{width:100%; height:5.4rem; padding:0; background-color:#fff; border-bottom:2px solid #e8e8e8; font-size:1.8rem; line-height:5.2rem; color:#666; box-sizing: border-box; vertical-align:middle; display:inline-block;} .formLay .title{padding-bottom:3.5rem; border-bottom:1px solid #333; font-weight: 500; font-size:2.6rem; line-height:1; color: #1b1b1b;} .formLay .textBox{width:62rem; margin:-1px 0 0 -5rem; padding:4rem 0; background-color: #f6f7fa; border-top:1px solid #ececec; border-bottom:1px solid #ececec; font-size:1.9rem; line-height:1; color: #1b1b1b; letter-spacing: -0.08em; text-align: center; position: relative; z-index:2;} .formLay .textBox>span{color: #149699;} .formLay .launchingForm{margin-top:1rem;} .formLay .launchingForm>li{padding-top:4rem;} .formLay .launchingForm>li>dl{} .formLay .launchingForm>li>dl>dt{font-weight: 500; font-size:1.9rem; line-height:1; color: #1b1b1b;} .formLay .launchingForm>li>dl>dd{height:6.4rem; padding-top:1rem; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box;} .formLay .launchingForm>li>dl>dd.two{flex-wrap: nowrap; justify-content: space-between; white-space: nowrap;} .formLay .launchingForm>li>dl .checkIn{} .formLay .launchingForm>li.two{display: flex; justify-content: space-between;} .formLay .launchingForm>li.two>dl{width:48%;} .formLay .launchingForm>li .clauseView{font-size:1.7rem; line-height:1; color: #989898;display:inline-block;} .formLay .launchingForm>li .clauseView>span{border-bottom:1px solid #999; padding:0.2rem 0 0.3rem; display:inline-block;} .formLay .btnArea{margin-top:6rem;} .privacylay{width:62rem; padding:7rem 5rem;} .privacylay .title{padding-bottom:3.5rem; font-weight: 500; font-size:2.8rem; line-height:1; color: #000; text-align: center;} .privacylay .clauseArea .scroll{padding:3.5rem 3.9rem; background-color: #f8f9fb; border:1px solid #eee; font-weight: 300; font-size:1.7rem; line-height:2.6rem; color: #666;} /* Img Over Bg Style */ #photo{width:960px;margin:0 auto; position:relative; overflow:hidden;} #photo>li{width:150px; height:150px; margin:5px; float:left; display:inline; overflow:hidden; } #photo>li>a{width:100%; height:100%; position: relative; display:block; overflow:hidden;} #photo>li>a>img{width:100%; height:100%; display:block; border-radius:5px;} #photo>li>a>.bg_l{width:100%; height:100%; background-color:red; position: absolute; left:0; top:0; display:none; opacity:0.3; border-radius:5px;} /* Notice One Line Style */ .mNoticeList{width:100%; height:60px; margin-top:25px; overflow:hidden; position: relative;} .mNoticeList>ul{width:100%; position: absolute; left:0; top:-60px;} .mNoticeList>ul>li{height:60px; position: relative;} .mNoticeList>ul>li>a{padding-left:73px; display:block; position: relative;} .mNoticeList .day{width:41px; padding-right:15px; border-right:1px solid #d5d1cc; font-weight: 600; font-size:12px; line-height:1; color: #b99764; text-align: center; position: absolute; left:0; top:0;} .mNoticeList .day>strong{font-weight: 700; font-size:32px; line-height:1; display:block;} .mNoticeList dl.list{font-size:16px; line-height:20px; color: #876e49; word-break:keep-all; word-wrap:break-word;} .mNoticeList dl.list>dt{padding-bottom:6px; font-weight: 600; font-size:12px; line-height:1; color: #b99764;} /*[e] Plugin Style */ @media only screen and (max-width : 1600px){ /*[s] Main Style */ /*[e] Main Style */ } @media only screen and (max-width : 1500px){ .mainWrap section.flex .txt p br {display: none;} .mainWrap section.flex >div {padding: 6rem;} } @media only screen and (max-width : 1440px){ /*[s] Main Style */ #mVisual .vTxtArea{padding:0 2rem;} /* main_key_prgrm */ .main_key_prgrm .key_prgrm_li{gap:3rem} .main_key_prgrm .key_prgrm_li li{width:calc((100% - 6rem)/3);} .main_key_prgrm .key_prgrm_li li .area{padding:4rem 3rem} .main_key_prgrm .key_prgrm_li li .title em{font-size:3rem;} /*[e] Main Style */ /*[s] Layer Style */ .layer-base .layer-in{padding:12rem 5rem 8rem;} /*[e] Layer Style */ } @media only screen and (max-width : 1320px){ /*[s] Main Style */ /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1280px){ /*[s] Layer Style */ .lay-time-area{display:block;} .lay-time-area .lay-map{width:100%;} .lay-time-area .lay-table{width:100%; margin-top:2rem;} /*[e] Layer Style */ /*[s] Main Style */ /* main_mdc_team */ .main_mdc_team .inConts1620{flex-wrap:wrap; padding-bottom:10.5rem; position:relative;} .main_mdc_team .main_sect_top{width:100%; margin-bottom:4rem;} .main_mdc_team .main_sect_top .puls_view_btn{margin:0; position:absolute; left:50%; bottom:0; z-index:1; transform:translateX(-50%);} .main_mdc_team .sw_mdc_team{width:calc(100% + var(--gutter));} .main_mdc_team .sw_mdc_team .swiper-pagination{width:calc(100% - 1.5rem);} /* main_media */ .main_media{} .main_media .inConts1620{flex-wrap:wrap;} .main_media .media_board{width:100%;} /* main_customer */ .main_customer .cstm_info{width:100%;} .main_customer .cstm_nav{width:100%; max-width:none; flex:none;} /* main_customer */ .main_customer .innr{padding-bottom:34.8rem;} /*[e] Main Style */ .history-area > li{gap: 10rem;} .history-area > li::after{width: 3rem;} .history-area > li .history-in, .history-area > li .thumb{width: calc((100% - 10rem)/2);} } @media only screen and (max-width : 1240px){ .scroll_info{display:block;} .scrollTb{width:100%; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:1200px !important;} /*[s] Main Style */ /* 창업문의 */ #startup_inquiry .startup_info>dl{padding:0 1rem;} /*[e] Main Style */ /*[s] Sub Style */ .stackArea .stack_re>.textBox{padding-right:4rem;} .stackArea .stack_re:nth-child(even)>.textBox{padding:0 0 0 4rem;} /*[e] Sub Style */ } @media only screen and (max-width : 1200px){ .scroll_info{display:block;} .scrollTb{width:100%; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:1200px;} /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1130px){ #popLayerSw #swPopArea .swPop{max-width:calc(68rem + 25px);} } @media only screen and (max-width : 1024px){ /*[s] All Style */ .depth3{margin-bottom:6rem; display: flex; justify-content: space-between;} .depth3:before{display:none;} .depth3>a{width:100%; height:auto; padding:1rem 2rem;} .depth3>a+a{margin-left:-1px;} .depth3>a>span:before{display:none;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{position: absolute; left:2rem !important; top:2rem !important;} .hd_pops_con{width:auto !important;} /*[e] Main Popup Style */ /*[s] Main Style */ /* visual */ #mainVisual .swiper{padding-bottom:7rem;} #mainVisual .swiper-option{justify-content:center; bottom:0 } #mainVisual .swiper-option>*{background-color:var(--point);} /* main_key_prgrm */ .main_key_prgrm .inConts1620{padding-bottom:11rem; position:relative;} .main_key_prgrm .main_sect_top .puls_view_btn{position:absolute; left:50%; bottom:0; transform:translateX(-50%);} .main_key_prgrm .key_prgrm_li{max-width:49rem; margin:0 auto;} .main_key_prgrm .key_prgrm_li li{width:100%;} .main_key_prgrm .key_prgrm_li li .title{color:#fff} .main_key_prgrm .key_prgrm_li li:hover{border-radius:4rem;} .main_key_prgrm .key_prgrm_li li:hover .thumb img{transform:scale(1);} .main_key_prgrm .key_prgrm_li li:hover .thumb::after{opacity:1;} .main_key_prgrm .key_prgrm_li li:hover .title{color:#fff;} .main_key_prgrm .key_prgrm_li li:hover .tail_arrow{margin-bottom:-8rem; opacity:0;} /* main_media */ .main_media{background-color:#fff;} .main_media::before{display:none;} .main_media .main_sect_top{margin-bottom:3rem;} .main_media .main_sect_top .sect_tit{text-align:center;} .main_media .media_board .sw_btns{margin-bottom:2rem; position:static;} /* main_focus */ .main_focus .sw_contain{height:auto; min-height:calc((((100dvw - 3rem) - 23dvw) / 2.1) + 15rem);} .main_focus .sw_contain .swiper-slide{width:75dvw;} /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 840px){ /*[s] All Style */ .nTable{} .nTable>table{} .nTable>table th, .nTable>table td{padding:3rem; font-size:2.2rem; line-height:3.2rem;} .nTable>table th{height:8rem; padding:0; font-size:2.4rem;} .nTable>table ul.bul>li{font-size:2rem; line-height:1.6;} .nTable>table .transportation>li{padding-left:0;} .nTable>table .transportation>li>p{padding-bottom:1rem; font-size:2.2rem; line-height:1; position: relative;} .nTable>table .transportation>li>dl>dt>span{font-size:2rem; line-height:4rem;} .nTable>table .transportation>li>dl>dd .inT{font-size:2rem; line-height:4rem;} .nTable +.nTable{margin-top:4rem;} .tabDepth{margin-bottom:3rem;} .tabDepth>a{height:5.2rem; font-size:2rem;} .depth3>a{font-size:2rem; line-height:1.4;} .groupTit{padding-bottom:4rem;} .groupTit .step{font-size:2.4rem;} h4.txt{font-size:3rem;} .nTxt{font-size:2rem; line-height:2.8rem;} ul.bul{} ul.bul>li{padding-left:1.5rem; font-size:2rem;} ul.star{} ul.star>li{padding-left:2.9rem; font-size:2rem;} ul.etc{} ul.etc>li{padding-left:4rem; font-size:2rem;} h4.line{margin-bottom:4rem;} h4.line.mt{margin-top:6rem;} h5.bul{margin:6rem 0 3rem; padding-left:2.6rem; font-size:2.8rem;} h5.bul:before{width: 1.8rem; height: 1.8rem; border-width:0.4rem;} h5.bul .more{padding:1rem 1.5rem; font-size:1.8rem; top:-0.7rem;} .scrollTb>*{width:120rem;} .nTable.scrollTb>*{width:840px !important;} .introduceArea .scrollTb>*{width:111.8rem;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:0.625rem 1.25rem; background-color:#f00; font-size:1.25rem; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{font-size:1.8rem;} .arrBtn{font-size:2rem; line-height:4.6rem;} .arrBtn>span{padding-right:60px;} select.base{height:5rem; background-size:4.3rem; font-size:2rem; line-height:4.8rem;} /*[e] All Style */ /*[s] Main Popup Style */ #hd_pop {z-index:101;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops{width:auto !important; max-width:100%; height:auto !important; background-color:#fff; position:absolute; display:block; border-radius: 1rem; overflow:hidden; box-sizing:border-box; box-shadow:0 0 3rem rgba(0,0,0,0.5);} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{display: flex; gap: 1rem; justify-content: space-between; padding: 15px 2rem; font-size: 0; line-height: 0; color:#888; text-align:left;position:relative} .hd_pops_footer.white{background-color: #fff;} .hd_pops_footer.black{background-color: #000;} .hd_pops_footer .hd_pops_reject {position: relative; font-size: 14px; line-height: 1; color: #888; padding: 0 0 0 20px;} .hd_pops_footer .hd_pops_reject::before{position: absolute; content: ''; width: 14px; height: 14px; top: 0; left: 0; border: 1px solid #888; background-color: #fff;} .hd_pops_footer .hd_pops_reject::after{position: absolute; content: ''; width: 10px; height: 10px; top: 2px; left: 2px; background-image: url("http://www.tsubakikorea.co.kr/img/icon_check.svg"); background-repeat: no-repeat; background-size: contain; background-position: center;} .hd_pops_footer .hd_pops_close{width: 14px; height: 14px;/* background-image: url("http://www.tsubakikorea.co.kr/img/icon_close.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; */} /* black */ .hd_pops_footer.black .hd_pops_reject {color: #fff;} .hd_pops_footer.black .hd_pops_reject::before{border: 1px solid #fff;} /* .hd_pops_footer.black .hd_pops_reject::after{filter: brightness(0) saturate(100%) invert(100%);} */ .hd_pops_footer.black .hd_pops_close{filter: brightness(0) saturate(100%) invert(100%);} #popLayer{width:100%; height:100%; font-size:0; line-height:0; position:fixed; left:0; top:0; z-index:99; overflow:hidden; overflow-y:auto;} #popLayer.disNone{display:none !important;} #popLayer #moPopArea{width:100vw; height:100vh; padding:10rem 3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; -ms-flex-align:center;} #popLayer #moPopArea .moPop{width:100%; max-width:50rem; margin:0; position: relative;} #popLayer #moPopArea #moPopRoll{background-color: #fff; border-radius:2rem; overflow:hidden; box-shadow:0 2rem 4rem rgba(0,0,0,0.3);} #popLayer .slider{width:100%; border-radius:2rem 2rem 0 0; box-sizing:border-box; overflow:hidden;} #popLayer .slider img{width:100%; vertical-align: top;} #popLayer .slider .HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider .HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} #popLayer .layerPopClose{width:3rem; height:3rem; margin:0; padding:0; font-size:0; line-height:0; position: absolute; right:1.5rem; top:1.5rem; z-index:6; transform:rotate(45deg);} #popLayer .layerPopClose:before, #popLayer .layerPopClose:after{content: ""; background-color: #222; display: block; position:absolute; left: 50%; top:50%;} #popLayer .layerPopClose:before{width: 100%; height: 2px; margin:-1px 0 0 -1.5rem;} #popLayer .layerPopClose:after{width: 2px; height: 100%; margin:-1.5rem 0 0 -1px;} #popLayer .moPopClose{width:100%; border-radius:0 0 2rem 2rem; display: flex; justify-content: space-between; overflow:hidden;} #popLayer .moPopClose>*{flex:1 1 50%; height:6rem; font-size:1.6rem; line-height:1; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} #popLayer .moPopClose button{background-color: #878896; border:none; color: #dcdeea; position: relative;} /*#popLayer .moPopClose button:before{content: "X"; width: 1.8rem; height: 1.8rem; background-color: rgba(255,255,255,0.3); border:1px solid #000; font-family: dotum; font-weight: bold; font-size:1.6rem; line-height:1.6rem; color: #000;display: inline-block; position:absolute; top:0; box-sizing: border-box;} #popLayer .moPopClose button.toDay_close{padding-left:2.5rem;} #popLayer .moPopClose button.toDay_close:before{left:0;}*/ #popLayer .moPopClose button.close{padding-right:2.5rem} #popLayer .moPopClose button.close:before{right:0;} #popLayer .moPopClose a{background-color: #3617cd; color:#fff} #popLayer .slick-dots{width:100%; padding:0; text-align: center; position: absolute; left:0; bottom:7rem; z-index:7;} #popLayer .slick-dots>li{margin:0 0.7rem; display:inline-block; vertical-align: top;} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.4rem; height:1.4rem; padding:0; background-color:#d4d7d9; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:999px; overflow:hidden; transition: all .3s ease-out;} #popLayer .slick-dots>li.slick-active button{width:30px; background-color: #333;} #popLayer #moPopArea #moPopRoll{opacity: 0; visibility: hidden; transition: opacity 1s ease;} #popLayer #moPopArea #moPopRoll.open, #popLayer #moPopArea #moPopRoll.slick-initialized{visibility: visible; opacity: 1;} #popLayerSw #swPopArea .swPop{max-width:52.3rem;} #popLayerSw #swPopArea .swPop .swiper-slide{width:auto;} #popLayerSw #swPopArea .sw_btns .swiper-button{width:6.2rem; height:6.2rem;} #popLayerSw #swPopArea .sw_btns .swiper-button::after{width:1rem; height:1.5rem;} #popLayerSw .swPopClose button{font-size:2.2rem;} #popLayerSw .swPopClose .toDay_close{padding-left:3.7rem;} #popLayerSw .swPopClose .toDay_close::before{width:2.7rem; height:2.7rem;} #popLayerSw .swPopClose .close{padding-right:2.2rem;} #popLayerSw .swPopClose .close::after{width:1.7rem; height:1.7rem;} #popLayerSwPgnTxt #swPopArea .swPop .swiper-pagination-bullet{padding:1.5rem 1rem; font-size:1.8rem;} #popLayerSwPgnTxt .swPopClose{padding-top:2.5rem;} #popLayerSwPgnTxt .swPopClose button{font-size:2rem;} #popLayerSwPgnTxt .swPopClose .toDay_close{padding-left:3.7rem;} #popLayerSwPgnTxt .swPopClose .toDay_close::before{width:2.7rem; height:2.7rem;} #popLayerSwPgnTxt .swPopClose .close{padding-right:2.2rem;} #popLayerSwPgnTxt .swPopClose .close::after{width:1.7rem; height:1.7rem;} /*[e] Main Popup Style */ /*[s] Main Style */ .main_sect_top .sect_tit_sub{font-size:2rem;} .main_sect_top .sect_tit{font-size:4.6rem;} .tail_arrow{width:5.5rem;} .tail_arrow img{width:1.8rem;} .puls_view_btn{width:20rem; height:6.5rem; font-size:2.2rem;} /* visual */ #mainVisual .visualRoll .swiper-slide>img{height:43rem;} #mainVisual .vTxtArea{align-items:flex-end; padding-bottom:3.2rem;} #mainVisual .vTxt{padding-bottom:11.1rem;} #mainVisual .vTxt .ii.title{font-size:3rem;} #mainVisual .vTxt .ii.title02{font-size:6rem;} #mainVisual .swiper-pagination .timmer{width:6rem;} /* main_quik_nav */ .main_quik_nav .scrl_box{padding-bottom:calc(2rem + 3px);} .main_quik_nav ul{width:100%;} /* .main_quik_nav ul li{width:28rem;} */ .main_quik_nav ul li{padding:0} .main_quik_nav ul li a p{font-size:2.2rem;} .main_quik_nav ul li:hover a{background-color:transparent;} .main_quik_nav ul li:hover .ico_box img{filter:none;} .main_quik_nav ul li:hover a p{color:#333} /* main_mdc_team */ .main_mdc_team .sw_mdc_team .swiper-slide{width:34.4rem;} /* main_key_prgrm */ .main_key_prgrm{padding:10rem 0;} .main_key_prgrm .main_sect_top{margin-bottom:4rem;} .main_key_prgrm .key_prgrm_li li .area{padding:5rem} .main_key_prgrm .key_prgrm_li li .title{font-size:2.4rem;} .main_key_prgrm .key_prgrm_li li .title em{font-size:4.6rem;} /* main_bg_deco_wr */ .main_bg_deco_wr{padding-top:12rem;} /* main_banner */ .main_banner{padding:22.5rem 1.5rem; margin-bottom:12rem;} .main_banner .cont p{font-size:3rem; margin-bottom:3rem;} .main_banner .cont img{width:31.4rem;} /* main_news_late */ .main_news_late{padding-bottom:4.1rem;} .main_news_late .main_sect_top{margin-bottom:3rem;} .main_news_late .news_tab{padding:1rem} .main_news_late .news_tab button{padding:1.6rem; width:18rem;} .main_news_late .news_area{padding-bottom:8.4rem;} .main_news_late .news_box .swiper-slide{width:35rem;} .main_news_late .news_box .swiper-slide .area{padding:1.5rem 1.5rem 2.2rem;} .main_news_late .news_box .swiper-slide .title{font-size:2.4rem; height:6.2rem;} .main_news_late .news_box .swiper-slide .date{font-size:2rem;} /* main_media */ .main_media{padding:9rem 0;} .main_media .main_sect_top .sect_tit{font-size:4.6rem;} .main_media .swiper-slide{width:35rem;} .main_media .swiper-slide .area{padding:1.5rem 1.5rem 2.2rem} .main_media .news_box .swiper-slide .title{font-size:2.4rem; height:6.2rem;} .main_media .news_box .swiper-slide .date{font-size:2rem;} /* main_focus */ .main_focus .main_focus_sw{padding-bottom:5rem;} .main_focus .sw_contain .swiper-slide a{padding-bottom:18rem;} .main_focus .sw_contain .swiper-slide .area .text{font-size:2rem;} .main_customer .cstm_content{margin-top:5.7rem;} /* main_customer */ .main_customer .main_sect_top h2 em{font-size:4.6rem;} .main_customer .clinic_info_card{padding:4rem 1.5rem 4.4rem; justify-content:center;} .main_customer .clinic_info_card > figure{width:100%; text-align:center;} .main_customer .clinic_info_card > figure img{width:20.4rem;} .main_customer .clinic_hours .clinic_h_schedule{font-size:2.2rem;} .main_customer .clinic_hours .clinic_h_schedule .asterisk{font-size:2.2rem;} .main_customer .cstm_branch_map dl dd{font-size:2.4rem;} .main_customer .cstm_nav a{padding:5.7rem 3rem 5.6rem;} .main_customer .cstm_nav a{font-size:2.4rem;} /*[s] Sub Style */ .history-area{} .history-area:before{left: 0;} .history-area > li{gap: 4rem; padding-left: 4rem;} .history-area > li::before{width: 2rem; height: 2rem; top: calc(2.1rem - 1rem); left: -1rem;} .history-area > li::after{top: calc(2.1rem - 0.5px); left: 0; right: auto;} .history-area > li .history-in, .history-area > li .thumb{width: 100%;} .history-area > li .history-in{order: 1;} .history-area > li .thumb{order: 2;} .history-area > li:nth-of-type(even)::after{left: 0;} .history-area > li:nth-of-type(even) .history-in{text-align: left;} .history-area > li:nth-of-type(even) .history-in .txt_wrap > li{padding-left: 5rem; padding-right: 0;} .history-area > li:nth-of-type(even) .history-in .txt_wrap > li::before{left: 0; right: auto;} .etc_clause{width:100%; margin:0 auto;} .etc_clause .etc_clause_in{padding:5rem 3rem; border-radius:1rem;} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:2rem 0 6rem; font-size:2.2rem;} .etc_clause .scroll{font-size:2rem;} .etc_select{width:100%;} .etc_select select.base{width:22rem;} /*[e] Sub Style */ /*[s] Layer Style */ .layer-base .layer-in{padding:7rem 3rem 8rem;} .lay-table>table th, .lay-table>table td{height:9rem; padding:2rem 0; font-size:2.2rem; line-height:1.4;} .lay-table>table .btns{width:calc(50% - 1rem); height:7rem; font-size:2.2rem; line-height:7rem;} .lay-table>table .btns>span{font-size:2.2rem;} .lay-table>table .btns+.btns{margin-left:1rem;} #layer-schdule{} #layer-schdule .layer-in{} #layer-schdule .layer-schdule-area{} #layer-schdule .layer-schdule-text{font-size:2rem;} #layer-schdule .layer-schdule-text>dt{font-size:2.4rem;} #layer-schdule .layer-schdule-text>dd{margin-top:1.5rem;} /*[e] Layer Style */ } @media only screen and (max-width : 480px) { /* main_quik_nav */ .main_quik_nav ul li{padding:0 0.7rem} .main_quik_nav ul li .ico_box img{width:4.6rem;} .main_quik_nav ul li a p{font-size:1.5rem;} /* main_customer */ .main_customer .cstm_branch_map li{flex-wrap:wrap; gap:3rem 1rem;} .main_customer .cstm_branch_map .map_btns{width:100%;} .main_customer .cstm_branch_map .map_btns a{flex:1; font-size:2rem;} } @media only screen and (max-width : 350px) { #mainVisual .vTxt .ii.title02{font-size:4.5rem;} } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; -ms-flex-align:center; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; -ms-flex-align:center; display: flex; align-items: center; justify-content: center; display: flex; justify-content: space-between; // 양쪽 끝 정렬 맨 앞에 정렬 justify-content: flex-start; ​ 맨 끝에 정렬 justify-content: flex-end; 가운데 정렬 justify-content: center; 서로 같은 간격으로 박스들이 조정됨. justify-content: space-between;​ 컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨. justify-content: space-around; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%); -webkit-filter:grayscale(100%); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child :nth-child(1) box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; width:calc(100% / 6); box-shadow:0 0 1rem rgba(0,0,0,0.2); */