.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.1rem; 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{padding:1rem 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:10;} .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;} /*[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; border:1px solid #333; position:absolute; display:block; overflow:hidden; box-sizing:border-box;} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{padding:0; background-color:#333; font-size:1.4rem; color:#fff; text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button{padding:1rem; border:0; color:#fff} .hd_pops_footer .hd_pops_reject{text-align:left} .hd_pops_footer .hd_pops_close{/*position:absolute;*/top:0;right:0} /*[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; } @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");} /* visual */ #main-visual{width:100%; margin-bottom: 5rem; background:#36465d url('/theme/prix/img/loading.gif') no-repeat center center; background-size: contain; font-size:0; line-height:0; position: relative; overflow:hidden;} #main-visual .main-slider{width: 100%; height: 38vw; min-height: 8vw; background-color:#36465d; position: relative; opacity: 0; visibility: hidden; transition:all 3s ease;} #main-visual .main-slider.slick-initialized{opacity: 1; visibility: visible;} #main-visual .main-slider .slick-slide {height: 38vw; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .slick-slide:before{content: ''; width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .3; z-index: 1;} #main-visual .main-slider video {width: auto; height: auto; min-width: 100%; min-height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%);} #main-visual .main-slider iframe {position: relative; pointer-events: none;} #main-visual .main-slider figure {height: 100%; margin:0; position: relative;} #main-visual .main-slider .slide-image {height: 100%; background-size: cover; background-position: center; opacity: 0; transition:all .8s ease;} #main-visual .main-slider .slide-image{opacity: 1;} #main-visual .main-slider .image-entity {width: 100%; opacity: 0; visibility: hidden;} #main-visual .main-slider .loading {width: 100%; position: absolute; left: 0; top: 44%;} #main-visual .main-slider .slide-media {background-repeat: no-repeat; background-position: center center; background-size: cover; animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .caption{position: absolute; left: 5%; top: 44%; text-align: center; padding: 20px; border: 3px solid; color: #fff; margin: 0; font-size: 40px; font-weight: bold; letter-spacing: .02em; opacity: 0; z-index: 1; transition:all .3s ease; transform:translateY(100px); -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .slick-active{z-index: 1;} #main-visual .main-slider .slick-active .slide-media{animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .slick-active .caption{opacity: 1; transform:translateY(0); transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;} #main-visual .slick-arrow{width:47px; height:90px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer;} #main-visual .slick-prev{background-image: url("../img/main/btn_slick_prev.png"); left:100px;} #main-visual .slick-next{background-image: url("../img/main/btn_slick_next.png"); right:100px;} #main-visual .slick-arrow:hover{opacity:1;} #main-visual .controll{width:260px; padding-top:0; margin-left:-130px; position: absolute; left: 50%; bottom: 5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between;} #main-visual .controll .dot{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{padding-left:10px;} #main-visual .controll .auto button{width:27px; height:27px; background:transparent url("../img/btn_slick_pause.png") no-repeat left top; border:none;} #main-visual .controll .auto button.off{background-image:url("../img/btn_slick_play.png");} #main-visual .slick-dots{display:flex; flex-wrap: nowrap; justify-content: flex-start;} #main-visual .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #main-visual .slick-dots>li+li{margin-left:0;} #main-visual .dot_Line, #main-visual .dot_Line>dt, #main-visual .dot_Line>dd .line{transition: all .3s ease-out; transform-origin: 50% 50%;} #main-visual .dot_Line>dd .line>span{} #main-visual .vTxt.first .dot_Line>dd .line>span{} #main-visual .dot_Line{padding-right:10px; box-sizing: border-box; position: relative;} #main-visual .dot_Line>dt{font-weight: 500; font-size:15px; line-height:1; color: rgba(255,255,255,0.3); white-space: nowrap;} #main-visual .dot_Line>dd{position: absolute; left:27px; right:10px; top:50%;} #main-visual .dot_Line>dd .line{width:100%; height:2px; background-color: rgba(255,255,255,0.3); display:inline-block; vertical-align: middle; position: relative; overflow:hidden;} #main-visual .dot_Line>dd .line>span{width:100%; height:2px; background-color: rgba(255,255,255,1); display:inline-block; position: absolute; left:-100%; top:0;} #main-visual .slick-dots>li.slick-active .dot_Line{padding-right:120px;} #main-visual .slick-dots>li.slick-active .dot_Line>dt{color: rgba(255,255,255,1);} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line{width:100%;} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line>span{} @keyframes slideIn { from { filter:blur(15px); } to { filter:blur(0); } } @keyframes slideOut { from { filter:blur(0); } to { filter:blur(15px); } } /* visual */ #mVisual{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{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;} #mVisual .visualRoll .slider img{width:100%; max-width:none; min-height: 800px; height:100vh; object-fit: cover;} #mVisual .slick-arrow{width:35px; height:63px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer; opacity:1;} #mVisual .slick-prev{background-image: url("../img/main/btn_slick_prev.png"); left:4.25%;} #mVisual .slick-next{background-image: url("../img/main/btn_slick_next.png"); right:4.25%;} #mVisual .slick-arrow:hover{opacity:1;} #mVisual .vTxtArea{width:100%; height:100%; max-width:1400px; text-align: left; position: absolute; left:50%; top:0; transform: translateX(-50%); z-index:5; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box;} #mVisual .vTxtArea .vTxt_in{width:100%; padding-bottom:15rem; position: relative;} #mVisual .vTxt{width:100%; position: absolute; left:0; top:-999px;} #mVisual .vTxt .ii{top:50px; text-align: center; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word;} #mVisual .vTxt .i01{-webkit-transition-delay: .4s; transition-delay: .4s;} #mVisual .vTxt .i02{-webkit-transition-delay: .45s; transition-delay: .45s;} #mVisual .vTxt .i03{-webkit-transition-delay: .5s; transition-delay: .5s;} #mVisual .vTxt .i04{-webkit-transition-delay: .55s; transition-delay: .55s;} #mVisual .vTxt .i05{-webkit-transition-delay: .6s; transition-delay: .6s;} #mVisual .vTxt .i06{-webkit-transition-delay: .65s; transition-delay: .65s;} #mVisual .vTxt .i07{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .ii.logo{} #mVisual .vTxt .ii.logo.i01{} #mVisual .vTxt .ii.logo.i01 img{height:16.4rem;} #mVisual .vTxt .ii.logo.i02{margin-top:2rem;} #mVisual .vTxt .ii.logo.i02 img{height:4.7rem;} #mVisual .vTxt .ii.tit{font-weight: bold; font-size:6.8rem; line-height:1; color: #f8f8f8; text-shadow:0 0 10px rgba(0,0,0,0.5);} #mVisual .vTxt .ii.txt{padding-top:3rem; font-family: 'S-CoreDream-3Light'; font-size:2rem; line-height:1.7; color: rgba(255,255,255,1);} #mVisual .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:4rem; z-index:7; display:none !important;} #mVisual .slick-dots>li{display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:1.5rem;} #mVisual .slick-dots>li button{width:2rem !important; height:2rem; margin:0; padding:0; background-color:#cdcdcc; border:none; font-size:0; line-height:0; cursor: pointer; box-sizing: border-box; border-radius:99px;} #mVisual .slick-dots>li.slick-active button{background-color:#7cb741; } #mVisual .vTxt.active{position: static; top:0px;} #mVisual .vTxt.active .ii{top:0px; opacity:1;} .mainTit {text-align: center;} .wrap1550 {max-width: 1550px; width: 100%; margin: 0 auto; text-align: center; overflow: hidden; } .wrap1400 {max-width: 1400px; width: 100%; margin: 0 auto; text-align: center; overflow: hidden; } /* .mainTit p {font-size: 4rem; color: #fff6ee; font-weight: 500; font-family: 'Arita-buri-SemiBold';} .mainTit p span {font-weight: 700;} .mainTit p.color {color: #231815;} */ .main .sec {background-size: cover !important;} .main .sec01 {position: relative; height: 113rem; padding: 13rem 3rem;} .sec01__mainTitImg {margin-top: -2rem;} .sec01__mainTitImg img, .sec02__mainTitImg img, .year__tablebtm div.under > p, .sec03__cont .pd img { opacity: 1;transform: scale(1.12);transition: all 0.5s 0.7s; -webkit-animation: zio 1.2s ease infinite 1.2s; -moz-animation: zio 1.2s ease infinite 1.2s; -ms-animation: zio 1.2s ease infinite 1.2s; -o-animation: zio 1.2s ease infinite 1.2s; animation: zio 1.2s ease infinite 1.2s; } @keyframes zio { 0% {transform: scale(1.12);} 50% {transform: scale(1);} 100% {transform: scale(1.12);} } /* .active .sec01__circleWrap {opacity: 1; animation: rotate_image 5s linear infinite 2s; transform: scale(1); transform-origin: 50% 50%; transition: ease 0.6s 0.6s;} @keyframes rotate_image{ 0% {} 20% {transform: rotate(20deg);} 40% {transform: rotate(40deg);} 60% {transform: rotate(80deg);} 80% {transform: rotate(100deg);} 100% {transform: rotate(120deg);} } */ .sec01__cont {text-align: center; margin-top: 7rem;} .sec01__circleWrap {margin-top: 16rem;} .sec01__circle {position: relative; margin: 0 auto; width: 43rem; height: 43rem; border-radius: 50%; border: 3px dotted rgba(221,221,221,0.8); } .sec01__circleTxt {position: absolute; z-index: 2; width: 16rem ; height: 16rem; border-radius: 50%; background: #fff6ee; display: flex; align-items: center; justify-content: center; text-align: center; } .sec01__circleTxt::before {content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 19rem; height: 19rem; background: rgba(255,246,238,0.2); border-radius: 50%;} /* 5각형 .sec01__circleTxt.txt01 { top: -8rem; left: 13rem; } .sec01__circleTxt.txt02 { top: 8rem; right: -8rem;} .sec01__circleTxt.txt03 { top: calc(100% - 10rem); right: 0rem; } .sec01__circleTxt.txt04 { top: calc(100% - 10rem); left: 0rem; } .sec01__circleTxt.txt05 { top: 8rem; left: -8rem; } */ .sec01__circleTxt.txt01 { /* 위 */ top: -8rem; left: calc(50% - 8rem); } .sec01__circleTxt.txt02 { /* 오른쪽 */ top: calc(50% - 8rem); right: -8rem; } .sec01__circleTxt.txt04 { /* 아래 */ bottom: -8rem; left: calc(50% - 8rem); } .sec01__circleTxt.txt05 { /* 왼쪽 */ top: calc(50% - 8rem); left: -8rem; } .sec01__circleTxt p { position: relative; z-index: 2; font-size: 2.8rem; color: #231815; font-weight: 900; line-height: 3.5rem; margin-top: 1.4rem;} .sec01__circleTxt p span { color: #ac631c;} .sec01__btm {position: absolute; bottom: 5rem; right: 6rem; font-size: 2rem; color: #c9bdb8;font-family: 'Noto Sans KR';} .main .sec02 {position: relative; padding: 13rem 3rem;} .sec02__mainTitImg {margin-top: 3rem;} .sec02__cont { text-align: center; margin: 7rem auto 10rem;} .sec02__yearTit {text-align: center; justify-content: center;} .sec02__yearTit p {display: inline-block; position: relative;} .sec02__yearTit p.mo{display: none;} .sec02__yearTit p::before {content: ""; position: absolute; top: -5rem; right: -5.5rem; width: 6.3rem; height: 6rem; background: url('/images/sec02__yearTit__bf.png') no-repeat ; background-size: contain; } .sec02__cont {width: 100%; max-width: 1490px; position: relative;} .sec02__posi {position: absolute;} .sec02__posi.posi01 {top: 6rem; left: 0;} .sec02__posi.posi02 {top: 38rem; left: 0;} .sec02__posi.posi03 {top: 15rem; right: 0;} .sec02__posi img {opacity: 0;transform: scale(2);} .active .sec02__posi img {opacity: 1;transform: scale(1)} .active .sec02__posi.posi01 img {transition: all 0.5s 0.5s;} .active .sec02__posi.posi02 img {transition: all 0.5s 1s;} .active .sec02__posi.posi03 img {transition: all 0.5s 1.5s;} .year__contWrap .swiper-container {background-color: #fff; height: 29rem;} .year__contWrap {max-width: 120rem; padding: 1rem; background: #381f14; border-radius: 1rem; margin: 4.5rem auto 3rem; overflow: hidden;} .year__tableWrap { background-color: #fff;} .year__tableWrap table {width: 100%; text-align: center; } /* .year__tableWrap table tbody tr:first-child td {padding-top: 5rem;} */ .year__tableWrap table tbody td:first-of-type {text-align: center; padding-left: 0;} .year__tableWrap table thead {background-color: #fff6ee; } .year__tableWrap table thead th {color: #fff; padding: 3rem 1rem 2.5rem; font-size: 2.2rem; color: #231815; font-weight: 700;} .year__tableWrap table tbody td {position: relative; font-size: 2rem; color: #231815; padding: 2rem 0.5rem;} .year__tableWrap table tbody td::after {content: ""; position: absolute; width: 1px; height: 120%; background: #dedede; top: 0; left: 0;} .year__tableWrap table tbody td:first-of-type::after {display: none;} .year__tableWrap table tbody td.td5 { color: #ac631c; font-size: 2rem;} .year__tableWrap > p {font-size: 1.5rem; color: #6d6d6d; text-align: right; padding-right: 2rem;} .year__tableWrap table thead th.border1 { border-radius: 1rem 0 0 1rem;} .year__tableWrap table thead th.border2 { border-radius: 0 1rem 1rem 0; } .year__tablebtm { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem 0 3rem; gap: 50px;} .year__tablebtm p { flex: 1; font-size: 3.4rem; color: #fff6ee; font-weight: 700; text-align: center;} .year__tablebtm p.size {position: relative; z-index: 2; flex: 1 1%; font-size: 6rem; font-weight: 700; line-height: 7rem; margin-top: 2rem;} .year__tablebtm p.size span {font-size: 4rem; font-weight: 700;} .year__tablebtm div.under {position: relative;} .year__tablebtm div.under::before {content: ""; z-index: 1; position: absolute; top: -7rem; right: 0rem; width: 8.1rem; height: 7.5rem; background: url('/images/year__btmSize01.png') no-repeat center; background-size: contain;} .year__tablebtm div.under::after {content: ""; z-index: 1; position: absolute; top: 5rem; right: -1rem; width: 25rem; height: 3rem; background: url('/images/year__btmSize02.png') no-repeat center; background-size: contain;} .year__contWrap .swiper-wrapper {transition-timing-function: linear;} .year__article {max-width: 120rem; margin: 0 auto; width: 100%; font-family: 'Noto Sans KR'; font-size: 2rem; color: #231815; font-weight: 400;} .main .sec03 {position: relative; padding: 13rem 3rem;} .sec03__mainTitImg {margin-top: 2rem; } .sec03__contWrap {display: flex; justify-content: center; gap: 2rem; padding: 6rem 0 4rem;} .sec03__cont {position: relative;} .sec03__cont .pd {position: absolute; top: 17%; transform: translateX(-50%); left: 50%;} .sec03__contBtm {font-size: 4rem; color: #231815; font-weight: 400; text-align: center; } .sec03__contBtm span { font-weight: 700; } .main .sec05 {position: relative; padding: 13rem 3rem; text-align: center;} .sec05__mainTitImg {margin-top: 3rem;} .sec05__Wrap {margin: 8rem 0;} .sec05__contWrap {position: relative; display: inline-block; text-align: center; } .sec05__loca {position: absolute;} .sec05__loca.loca01 {top: 13%;left: 27.5%;} .sec05__loca.loca02 {top: 8%;left: 34%;} .sec05__loca.loca03 {top: 5%;left: 40%;} .sec05__loca.loca04 {top: 30%;left: 31.5%;} .sec05__loca.loca05 {top: 26%;left: 37%;} .sec05__loca.loca06 {top: 19%;left: 41%;} .sec05__loca.loca07 {top: 10%;left: 46%;} .sec05__loca.loca08 {top: 18%;left: 52%;} .sec05__loca.loca09 {top: 47%;left: 31.5%;} .sec05__loca.loca10 {top: 41%;left: 37%;} .sec05__loca.loca11 {top: 35%;left: 42.5%;} .sec05__loca.loca12 {top: 27%;left: 48%;} .sec05__loca.loca13 {top: 62.5%;left: 32%;} .sec05__loca.loca14 {top: 53%;left: 41.5%;} .sec05__loca.loca15 {top: 32%;left: 56%;} .sec05__loca.loca16 {top: 39.5%;left: 50%;} .sec05__loca.loca17 {top: 57%;left: 37%;} /* .sec05__loca.loca18 {} */ .sec05__loca.loca19 {top: 55%;left: 48%;} .sec05__loca.loca21 {top: 51%;left: 57%;} .sec05__loca.loca20 {top: 58%;left: 52.5%;} .sec05__loca.loca22 {top: 87.5%;left: 35.5%;} .sec05__loca.loca23 {top: 77%;left: 36.5%;} .sec05__loca img {opacity: 0;transform: scale(2);} .active .sec05__loca img {opacity: 1;transform: scale(1);} .active .sec05__loca.loca01 img {transition: all 0.4s 0.5s;} .active .sec05__loca.loca02 img {transition: all 0.4s 0.9s;} .active .sec05__loca.loca03 img {transition: all 0.4s 1.1s;} .active .sec05__loca.loca04 img {transition: all 0.4s 1.3s;} .active .sec05__loca.loca05 img {transition: all 0.4s 0.6s;} .active .sec05__loca.loca06 img {transition: all 0.4s 1.0s;} .active .sec05__loca.loca07 img {transition: all 0.4s 0.7s;} .active .sec05__loca.loca08 img {transition: all 0.4s 1.2s;} .active .sec05__loca.loca09 img {transition: all 0.4s 1.8s;} .active .sec05__loca.loca10 img {transition: all 0.4s 2.0s;} .active .sec05__loca.loca11 img {transition: all 0.4s 1.5s;} .active .sec05__loca.loca12 img {transition: all 0.4s 1.6s;} .active .sec05__loca.loca13 img {transition: all 0.4s 1.7s;} .active .sec05__loca.loca14 img {transition: all 0.4s 1.8s;} .active .sec05__loca.loca15 img {transition: all 0.4s 1.9s;} .active .sec05__loca.loca16 img {transition: all 0.4s 1.4s;} .active .sec05__loca.loca17 img {transition: all 0.4s 2.1s;} .active .sec05__loca.loca19 img {transition: all 0.4s 2.2s;} .active .sec05__loca.loca20 img {transition: all 0.4s 2.3s;} .active .sec05__loca.loca21 img {transition: all 0.4s 2.4s;} .active .sec05__loca.loca22 img {transition: all 0.4s 2.5s;} .active .sec05__loca.loca23 img {transition: all 0.4s 2.6s;} .sec05__txtWrap {text-align: center; max-width: 1120px; width: 100% ; margin: 0 auto; padding: 0.5rem 0; border-top: 3px solid #ac631c; border-bottom: 3px solid #ac631c; } .sec05__txt { border-top: 1px solid #ac631c; border-bottom: 1px solid #ac631c; padding: 3rem; } .sec05__txt p {font-size: 2.2rem; font-weight: 300; color: #402a24; font-family: 'Noto Sans KR', serif; margin-top: 1.5rem;} .sec05__txt p span {font-weight: 700;} .main .sec06 {position: relative; text-align: center; padding: 13rem 3rem 13rem; } .sec06__mainTitImg {display: inline-block; position: relative; margin: 3rem 0 5rem} .sec06__cont {display: flex; justify-content: center; gap: 5rem;} /* .main .sec06 {position: relative; padding: 13rem 3rem 0; } .sec06__mainTitImg {display: inline-block; position: relative; margin-top: 3rem} .sec06__mainTitImg::before {content: ""; position: absolute; top: -6rem; left: -6rem; width: 4.1rem; height: 5.2rem;; background: url('/images/sec06__mainTit__bf.png') no-repeat ; background-size: contain; } .sec06__cont {position: relative; z-index: 2; text-align: center; margin: 0 auto; width: 100%; margin-top: 7rem; } */ /* .main .sec07 {position: relative; padding: 20rem 3rem 10rem; margin-top: -20rem;} */ .main .sec07 {position: relative; padding: 10rem 3rem 10rem; } .sec07 .mainTit {padding-top: 5rem;} .sec07__cont {margin-top: 8rem;} .sec07__contimg {margin-bottom: 8rem;} .sec07__cont .swiper-button-prev:after, .sec07__cont .swiper-button-next:after {display: none;} .sec07__cont .swiperBtn {width: 7rem; height: 7rem; } /* .swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; color: #000; opacity: 1; background: rgba(0, 0, 0, 0.2);} .swiper-pagination-bullet-active { color: #fff; background: #007aff; } */ .main .sec08 {position: relative; padding: 13rem 3rem 15rem; } .sec08 .mainTit {margin-bottom: 7rem;} .sec08 .swiper-button-prev:after, .sec08 .swiper-button-next:after {display: none;} .sec08 .swiperBtn {width: 7rem; height: 7rem; } .main .sec09 {position: relative; padding: 13rem 3rem; } .sec09__mainTitImg {margin-top: 3rem;} .sec09__list {margin-top: 7rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;} @media screen and (max-width:1280px){ .main .sec01 {height: 180rem;} } @media screen and (max-width:480px){ .wrap600{max-width: 300px; top: 50%;} } .fee__tableWrap2 {margin: 6rem 0 4rem;} .fee__tableWrap2 table {text-align: center; width: 100%;} .fee__tableWrap2 table.color { border-bottom: 2px solid #12406a;} .fee__tableWrap2 table thead {background: #4f4745; opacity: 0.8; } .fee__tableWrap2 table thead th {color: #fff; padding: 2.5rem 1rem 1.5rem; font-size: 3rem; font-weight: 400;} .fee__tableWrap2 table thead th + th {border-left: 1px solid #ededed80;} .fee__tableWrap2 table tbody td {font-size: 2.5rem; color: #fff; padding: 2rem 1.5rem 1rem; background-color: #9090909f;} .fee__tableWrap2 table tbody td {border-top: 1px solid #ededed80;} .fee__tableWrap2 table tbody td.td1 {font-weight: 400; color: #fff;} .fee__tableWrap2 table tbody td.td2 {border-left: 1px solid #ededed80; border-right: 0; color: #edb024; font-weight: normal;} .fee__tableWrap2 table tbody td.td2 span{color: #fff; font-weight: bold; margin-right: 30px; position: relative;} .fee__tableWrap2 table tbody td.td2 span::before{content: ""; background: #edb024; position: absolute; top: 15%; left: 55%; width: 150%; height: 3px; transform: translate(-50%,-50%);} .fee__tableWrap2 table tbody td.td2 span::after{content: "▶"; color: #edb024; position: absolute; top: 50%; right: -26px; transform: translateY(-50%);} .fee__tableWrap2 table tbody td.td3 {font-weight: 700; color: #fff;font-size: 4.5rem; stroke: #3e2110;text-shadow: 4px 3px #3e2110, 0px 0px #3e2110, 0px 0px #3e2110, 0px 0px #3e2110;} .fee__tableWrap2 > p {font-size: 1.5rem; color: #6d6d6d; text-align: right; padding-right: 2rem;} .fee__txt {font-size: 4rem; font-weight: 400; color: #fff;} .fee__txt span {position: relative; font-weight: 700; color: #ffae00;} .fee__txt span::after {position: absolute; content: ""; background-color: #ffae00; width: 100%; height: 2px; bottom: -1rem; left: 0;} @media screen and (max-width:840px){ .fee__tableWrap2 table tbody td.td2 span::before{top: 45%;} .fee__tableWrap2 table tbody td.td2 span::after{right: -17px;top: 50%} } @media screen and (max-width:500px){ } .fee__tableWrap {margin: 6rem 0 4rem;} .fee__tableWrap table {text-align: center; width: 100%; } .fee__tableWrap table.color { border-bottom: 2px solid #12406a;} .fee__tableWrap table thead th.border1 {border-radius: 1rem 0 0 0;} .fee__tableWrap table thead th.border2 {border-radius: 0 1rem 0 0;} .fee__tableWrap table thead {background: linear-gradient( to bottom, #ffbe33 0%, #ffbe33 50%, #ffae00 50%, #ffae00 100% ); } .fee__tableWrap table thead th {color: #fff; padding: 3rem 1rem 2.5rem; font-size: 2.2rem; font-weight: 700;} .fee__tableWrap table thead th + th {border-left: 1px solid #ededed;} .fee__tableWrap table tbody td {font-size: 2rem; color: #222; padding: 2.5rem 0.5rem 2rem; background-color: #fff;} .fee__tableWrap table tbody td {border-top: 1px solid #ededed;} .fee__tableWrap table tbody td.td1 {font-weight: 700;} .fee__tableWrap table tbody td.td2 {border-left: 1px solid #ededed; border-right: 1px solid #ededed;} .fee__tableWrap table tbody td.td3 {font-weight: 700; color: #ffae00;} .fee__tableWrap > p {font-size: 1.5rem; color: #6d6d6d; text-align: right; padding-right: 2rem;} .fee__txt {font-size: 4rem; font-weight: 400; color: #fff;} .fee__txt span {position: relative; font-weight: 700; color: #ffae00;} .fee__txt span::after {position: absolute; content: ""; background-color: #ffae00; width: 100%; height: 2px; bottom: -1rem; left: 0;} .main .sec10 {position: relative; padding: 13rem 3rem; } .sec10__mainTitImg {margin-top: 3rem;} .mOnlineWrap {display: flex; align-items: center; justify-content: center; /* gap: 8rem; */ padding: 0 18rem; margin-top: 7rem;} /* .mOnline_txt_box {flex: 1;} */ .mOnline_wr_flex {display: flex; align-items: center; gap: 3rem; width: 100%; height: 6rem; border: 1px solid #bca48c; padding: 1rem 1.5rem; border-radius: 0.5rem; background: #fff6ee;} .mOnline_wr_flex + .mOnline_wr_flex {margin-top: 1rem;} .mOnline_tit {font-size: 2.1rem; font-weight: 900; color: #231815; font-family: 'Arita-buri-SemiBold';} .mOnline_wr_flex input {border: none; background: #fff; padding: 0 0 0 1rem; height: 100%; width: 100%; font-size: 1.8rem; color: #000; font-family: 'Noto Sans KR';} .mOnline_wr_flex input::placeholder {color: #ac631c;} .mOnline_wr_flex .checkIn + .checkIn {margin-left: 1.5rem;} .mOnline__btn {margin-top: 8rem; display: flex; align-items: center; justify-content: center; gap: 2rem;} .mOnline__btn a {background: #fff; font-family: 'Arita-buri-SemiBold'; border: none; font-size: 2.1rem; font-weight: 500; border-radius: 5px; width: 30rem; height: 7rem; display: flex; align-items: center; justify-content: center; color: #231815;} .mOnline__btn button {background: #231815; font-family: 'Arita-buri-SemiBold'; border: none; font-size: 2.1rem; font-weight: 500; border-radius: 5px; width: 30rem; height: 7rem; display: flex; align-items: center; justify-content: center; color: #fff;} /* 퀵 문의 */ .f_inquiry{width:100%;background-color: #ac631c;line-height: 1.4;padding:2rem 0 1.8rem;box-sizing: border-box;display: block;} .f_inquiry.fixed{position:fixed;bottom:0;z-index:9;} .f_inquiry .inBox{height: 100%;max-width:1420px;margin: 0 auto;padding:0 1rem;} .f_inquiry .inBox .s-tel{height: 100%;vertical-align: middle;display: table-cell;width: 270px;float: left;transform: translateY(5px);} .f_inquiry .inBox .s-tel p{vertical-align: middle;font-size: 3.2rem; font-weight:400;color:#fff; margin-top: 1rem;} .f_inquiry .inBox .s-tel span{font-size:15px;color:#fff;margin-top: 1rem;} .f_inquiry .inBox .s-tel > b{font-size: 4rem; font-weight: 700; color: #fff; display: block;} .f_inquiry .inBox .f_form{flex: 1;display: flex;justify-content: space-between;} .f_inquiry .inBox .f_form .checkIn {display: flex;margin: 2rem 0 0 0; align-items: baseline;} .f_inquiry .inBox .f_form .checkIn a { color: #fff; font-size: 1.4rem; margin: 0 0 0 1rem; font-family: 'Noto Sans KR';} .f_inquiry .inBox .f_form input, .f_inquiry .inBox .f_form select{width: 100%;height: 6rem;border: none;border-radius: 5px;padding: 0 30px 0 20px;font-size: 1.8rem;color: #666666; font-weight: 300; font-family: 'Noto Sans KR';} .f_inquiry .inBox .f_form .btnBox{width: 100%;} .f_inquiry .inBox .f_form .btnBox > div{flex: 1;display: flex;justify-content: space-between;align-items: flex-start;} .f_inquiry .inBox .f_form .btnBox > div > * + *{margin: 0 0 0 1rem;} .checkIn label input[type=checkbox] + span, .checkIn label input[type=radio] + span{font-size: 1.6rem; line-height:1.6rem; color: #333; cursor: pointer; position: relative;} .checkIn label input[type=checkbox]:checked + span::before, .checkIn label input[type=radio]:checked + span::before{content: "";position:absolute;width: 7px;height: 7px;background-color: #c52936;left: 50%;top:50%;transform: translate(-50%,-50%);} .checkIn label input[type=radio]:checked + span:before{border-color:#ac631c;} .checkIn label input[type=checkbox] + span, .checkIn label input[type=radio] + span{width: 1.4rem;height: 1.4rem;border: 1px solid #000;position: relative;margin: 0 6px 0 0px;} .f_inquiry .inBox .checkIn label{justify-content: flex-start; line-height: 1; font-family: 'Noto Sans KR';} .f_inquiry .inBox .checkIn label{color: #fff;font-size: 1.6rem;} .f_inquiry .inBox .checkIn label input[type=checkbox] + span, .f_inquiry .inBox .checkIn label input[type=radio] + span{border: 1px solid #fff; width: 14px;height: 14px; display: inline-flex; } .f_inquiry .inBox .checkIn label input[type=checkbox]:checked + span::before, .f_inquiry .inBox .checkIn label input[type=radio]:checked + span::before{border: 1px solid #fff;background-color: #fff;} .btn_inquiry{color: #fff;font-size: 2.1rem; font-family: 'Arita-buri-SemiBold'; font-weight: 300;background-color: #381f14;height: 6rem;border-radius: 5px;text-align: center;border: none;max-width: 21rem;width: 100%;margin: 0 0 0 1rem} /*[s] Sub Style */ /* HISTORY */ .historyArea{font-size:0; line-height:0; position: relative;} .historyArea:before{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color: rgba(221,221,221,0.8); display: inline-block; position:absolute; left: 50%; top:1.5rem; bottom:10rem;} .historyArea>li{text-align: right; position: relative; z-index:2;} .historyArea .txt_wrap{width:50%; padding:0 4rem; text-align: left; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative;} .historyArea .txt_wrap:before{content: ""; width: 2.4rem; height:2.4rem; background-color:#333; border:4px solid #fff; display: inline-block; position:absolute; left: -1.2rem; top:1rem; border-radius:999px; box-sizing: border-box;} .historyArea .txt_wrap>strong{font-weight: 500; font-size:3.6rem; line-height:1; color: #333; display:block;} .historyAre a .txt_wrap>ul{margin:2rem 0 4rem;} .historyArea .txt_wrap>ul>li{margin-top:1rem; padding-left:1.2rem; font-size:1.6rem; line-height:1.6; color: #666; position: relative;} .historyArea .txt_wrap>ul>li:before{content: "-"; position:absolute; left: 0; top:0px;} .historyArea>li:nth-child(even){text-align: left;} .historyArea>li:nth-child(even) .txt_wrap{text-align: right;} .historyArea>li:nth-child(even) .txt_wrap:before{left:auto; right: -1.2rem;} .historyArea>li:nth-child(even) .txt_wrap>ul>li{padding:0 1.2rem 0 0;} .historyArea>li:nth-child(even) .txt_wrap>ul>li:before{left:auto; right:0;} .historyArea.month .txt_wrap>ul>li{padding-left:4.3rem;} .historyArea.month .txt_wrap>ul>li:before{content: attr(data-month)"월"; color: #333;} .historyArea.month>li:nth-child(even) .txt_wrap>ul>li{padding:0 4.3rem 0 0;} .historyArea.admin .txt_wrap>ul>li{padding:0 3rem !important;} .historyArea.admin .txt_wrap>ul>li:before{display:none;} .historyArea.admin .txt_wrap>ul>li .checkIn.noTxt{position: absolute; left:0; top:0rem;} .historyArea.admin>li:nth-child(even) .txt_wrap>ul>li .checkIn.noTxt{left:auto; right:0;} .etc_clause{width:90%; margin:0 auto; padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; font-size:0; line-height:0; text-align: center; box-sizing:border-box; border-radius:10px; position: relative;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;z-index:-1;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 .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:300; font-size:16px; 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 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 */ .mobile {display: none;} .mobile480 {display: none;} .mobile747 {display: none;} @media only screen and (max-width : 1600px){ /*[s] Main Style */ /*[e] Main Style */ } @media only screen and (max-width : 1500px){ .sec05__loca img {max-width: 80%;} /*[s] Main Style */ /*[e] Main Style */ } @media only screen and (max-width : 1440px){ /*[s] Main Style */ #mVisual .vTxtArea{padding:0 2rem;} .mOnlineWrap {padding: 0 3rem;} .sec03__contBtm {font-size: 3rem;} /*[e] Main Style */ } @media only screen and (max-width : 1320px){ /*[s] Main Style */ /* 창업문의 */ #startup_inquiry .startup_info>dl{padding:0 2rem;} /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ .sec02__cont {padding: 0;} .sec02__posi.posi01 {width: 18rem;} .sec02__posi.posi02 {width: 18rem;} .sec02__posi.posi03 {width: 22rem;} .sec03__cont .pd {top: 18%; } .sec03__cont .pd img {width: 8rem; } } @media only screen and (max-width : 1280px){ } @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 */ .sec02__posi.posi02 {top: 1rem;} .sec02__posi.posi02 {top: 30rem;} .sec05__loca {transform: translateX(-1.5rem);} .sec05__loca img {max-width: 60%;} } @media only screen and (max-width : 1024px){ #mVisual {padding-top: 9rem;} /*[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; */ width: 90% !important; max-width: 320px; left:50% !important; transform:translateX(-50%); } .hd_pops_con{width:auto !important;} /*[e] Main Popup Style */ /*[s] Main Style */ /* visual */ #mVisual .visualRoll .slider img{} #mVisual .slick-arrow{display:none !important;} #mVisual .slick-dots{display:block !important;} /* 메뉴 소개 */ #menu_introduction{padding:12rem 0 12rem;} #menu_introduction:before{ width: 100%; height: 62%;} #menu_introduction .inConts{display: block;} #menu_introduction .inConts .mTitle{width:100%; margin-bottom:6rem; text-align:center;} #menu_introduction .inConts .mTitle>dt{background-position: center bottom;} #menu_introduction .inConts .photo_list{width:100%;} #menu_introduction .slickArr{margin-top:0; position: static;} #menu_introduction .slick-arrow{background-color: #fff; border-color:#7cb640; color: #7cb640; position: absolute; top:66%; transform: translateY(-50%); z-index:7;} #menu_introduction .slick-prev{left:2rem;} #menu_introduction .slick-next{margin-left:0; right:2rem;} /* 메뉴 갤러리 */ #menu_gallery .swiper-button{font-size:0; line-height:0;} /* 창업문의 */ #startup_inquiry{padding:12rem 0; background-position: -16rem 10rem;} #startup_inquiry .startup_info{margin-bottom:6rem; justify-content: space-between;} #startup_inquiry .startup_info>dl{width:31%; padding:0rem;} #startup_inquiry .startup_info>dl>dt{} #startup_inquiry .startup_info>dl>dt>span{} #startup_inquiry .startup_info>dl>dd{width:100%; min-width:auto; min-height:14rem; padding:0; border-radius:5px;} #startup_inquiry .startup_map{padding:5.5rem 2rem 8rem; background-color: #fff; display: block;} #startup_inquiry .startup_map .img{display:none;} #startup_inquiry .startup_map .store{width:100%;} /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ .admGo {display: none;} .main .sec01 {height: 180rem; padding: 10rem 3rem;} .main .sec02 {height: auto; padding: 10rem 3rem;} .year__tablebtm p.size {font-size: 5rem;} .main .sec03 {height: auto; padding: 10rem 3rem;} .main .sec05 {height: auto; padding: 10rem 3rem;} /* .main .sec07 {padding: 40rem 3rem 10rem; margin-top: -37rem;} */ .main .sec06 {height: auto; padding: 10rem 3rem;} .main .sec07 {height: auto; padding: 10rem 3rem;} .main .sec08 {height: auto; padding: 10rem 3rem;} .main .sec09 {height: auto; padding: 10rem 3rem;} .main .sec10 {height: auto; padding: 10rem 3rem;} .sec06__cont {gap: 3rem;} .sec06__mainTitImg::before {display: none;} .sec07 .mainTit {padding-top: 0;} .mOnlineWrap {padding: 0; gap: 2rem;} .in_form {display: flex; flex-direction: column;} .f_inquiry .inBox .s-tel {display: flex; float: none; width: auto;} .f_inquiry .inBox .s-tel p {margin-right: 1rem;} .sec02__cont .sec02__posi {display: none;} .sec02__cont.pc {display: none;} .sec02__cont.mobile {display: block;} .sec02__mainTitImg img {width: 70rem !important;} .sec03__cont .pd img {width: 6rem;} .sec05__loca img {max-width: 55%;} } @media only screen and (max-width : 840px){ .pc {display: none;} .mobile {display: block;} .mainTit p {position: relative ; z-index: 2;} .sec01__mainTitImg {padding-left: 2rem; padding-top: 1rem;} .sec01__btm {text-align: center; margin-top: 3rem; position: relative ; right: auto; bottom: auto;} .year__tablebtm {padding-left: 1rem;} .year__tablebtm > div { display: inline-block; width: 50%;} .year__tablebtm div::after {right: 5rem;} .sec02__yearTit p::before {display: none;} .sec03__contWrap {display: block; margin: 0 auto; text-align: center;} .sec03__mainTitImg {margin-top: 0;} .sec04 {display: flex; align-items: center; justify-content: center;} .sec05__contWrap {display: block ; margin: 7rem auto; text-align: center;} .sec05__cont + .sec05__cont {margin-top: 5rem;} /* .sec07__mainTitImg {margin-top: 5rem;} */ .sec07__cont {margin-top: 3rem;} .sec07__contimg {margin-bottom: 4rem;} .sec08 .mainTit {margin-bottom: 4rem;} .sec09__list {flex-wrap: wrap; justify-content: center; gap: 4rem;} .mOnlineWrap {display: block;} .mOnline_txt_box + .mOnline_txt_box {margin-top: 1rem;} .sec06__cont {flex-wrap: wrap;} .sec06__cont p {width: 100%;} /*[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;} .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;} .admGo{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_pops{left:2rem !important; right:2rem !important;} */ .hd_pops_con{} /*[e] Main Popup Style */ /*[s] Main Style */ .mTitle{margin-bottom:5.5rem !important;} .mTitle>dt{margin-bottom:3rem; padding-bottom:3.5rem;} .mTitle>dd{font-size:2.2rem;} /* visual */ #mVisual .visualRoll .slider img{ min-height: 600px;} #mVisual .vTxtArea .vTxt_in{padding-bottom:0;} #mVisual .vTxt .ii.logo.i01 img{height:12rem;} #mVisual .vTxt .ii.logo.i02{margin-top:2rem;} #mVisual .vTxt .ii.logo.i02 img{height:3.6rem;} #mVisual .vTxt .ii.txt{padding-top:2.5rem; font-size:2.4rem;} #mVisual .slick-dots>li+li{margin-left:2rem;} #mVisual .slick-dots>li button{width:2.8rem !important; height:2.8rem;} /* 메뉴 소개 */ #menu_introduction .slick-arrow{width:6.5rem; height:6.5rem; font-size:2.6rem;} /* 메뉴 갤러리 */ #menu_gallery{height:auto; padding:12rem 0;} #menu_gallery .swiper-button{display:none !important;} #menu_gallery .performanceSlide{padding:3rem 2rem 0;} #menu_gallery .performanceSlide .swiper-wrapper{} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide{width:29rem; transform: scale(1) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide .thumb:before{display:none;} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-prev{transform: translateX(0) scale(1) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-next{transform: translateX(0) scale(1) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-active{transform: scale(1) rotate(.001deg);} #menu_gallery .swiper-pagination {margin-top:4rem; position: static !important; display:block !important;} #menu_gallery .swiper-pagination .swiper-pagination-bullet{width:2.8rem; height:2.8rem; margin:0 0.7rem; background-color: #a0a0a0; border-radius:99px;} #menu_gallery .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #7cb640;} /* 창업문의 */ #startup_inquiry{} #startup_inquiry .startup_info{} #startup_inquiry .startup_info>dl{} #startup_inquiry .startup_info>dl>dt{} #startup_inquiry .startup_info>dl>dt>span{} #startup_inquiry .startup_info>dl>dd{font-size:2.1rem;} #startup_inquiry .startup_map{} #startup_inquiry .startup_map .store{} #startup_inquiry .startup_map .store select, #startup_inquiry .startup_map .store input[type=text], #startup_inquiry .startup_map .store input[type=submit]{height:5.2rem; padding:0 2rem; border-width:1px; font-size:2.1rem; line-height:5rem;} #startup_inquiry .startup_map .store select{padding:0 6rem 0 2rem;} #startup_inquiry .startup_map .store input[type=submit]{font-size:0; line-height:0;} #startup_inquiry .startup_map .store .tit{font-size:3.2rem;} #startup_inquiry .startup_map .store .form{width:100%;} #startup_inquiry .startup_map .store .form_re{} /*[e] Main Style */ /*[s] Sub Style */ /* HISTORY */ .historyArea{} .historyArea:before{margin-left:0; left: 0%;} .historyArea>li{} .historyArea .txt_wrap{width:100%; padding:0 0 0 4rem;} .historyArea .txt_wrap:before{width: 3rem; height:3rem; left: -1.2rem; top:0.5rem;} .historyArea .txt_wrap>strong{font-size:3.2rem;} .historyArea .txt_wrap>ul{} .historyArea .txt_wrap>ul>li{padding-left:1.2rem; font-size:2rem;} .historyArea>li:nth-child(even){text-align: left;} .historyArea>li:nth-child(even) .txt_wrap{text-align: left;} .historyArea>li:nth-child(even) .txt_wrap:before{left: -1.2rem; right:auto;} .historyArea>li:nth-child(even) .txt_wrap>ul>li{padding:0 0 0 1.2rem;} .historyArea>li:nth-child(even) .txt_wrap>ul>li:before{left:0; right:auto;} .historyArea.month .txt_wrap>ul>li{padding-left:5rem;} .historyArea.month .txt_wrap>ul>li:before{} .historyArea.month>li:nth-child(even) .txt_wrap>ul>li{padding:0 0 0 5rem;} .historyArea.admin .txt_wrap>ul>li{padding:0 5rem !important;} .historyArea.admin>li:nth-child(even) .txt_wrap>ul>li .checkIn.noTxt{left:0; right:auto;} .etc_clause{width:100%; margin:0 auto; padding:5rem 4rem; 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 */ .f_inquiry .inBox .checkIn label{font-size: 2rem;} .f_inquiry .inBox .f_form .checkIn a {font-size: 1.8rem;} .sec03__cont .pd img {width: 16rem;} .sec05__loca img {max-width: 100%;} .sec05__loca.loca01 {top: 10%;left: 16.5%;} .sec05__loca.loca02 {top: 4%;left: 30%;} .sec05__loca.loca03 {top: 3%;left: 45%;} .sec05__loca.loca04 {top: 20%;left: 24%;} .sec05__loca.loca05 {top: 16%;left: 36%;} .sec05__loca.loca06 {top: 12%;left: 48%;} .sec05__loca.loca07 {top: 6%;left: 58%;} .sec05__loca.loca08 {top: 9%;left: 73%;} .sec05__loca.loca09 {top: 31%;left: 24.5%;} .sec05__loca.loca10 {top: 27%;left: 38%;} .sec05__loca.loca11 {top: 22.5%;left: 52%;} .sec05__loca.loca12 {top: 16%;left: 65%;} .sec05__loca.loca13 {top: 40.5%;left: 25%;} .sec05__loca.loca14 {top: 34%;left: 47%;} .sec05__loca.loca15 {top: 20%;left: 78%;} .sec05__loca.loca16 {top: 25.5%;left: 67%;} .sec05__loca.loca17 {top: 37%;left: 37%;} /* .sec05__loca.loca18 {} */ .sec05__loca.loca19 {top: 35%;left: 62%;} .sec05__loca.loca21 {top: 33%;left: 82%;} .sec05__loca.loca20 {top: 37.5%;left: 72.5%;} .sec05__loca.loca22 {top: 56.5%;left: 33.5%;} .sec05__loca.loca23 {top: 50%;left: 36.5%;} #header .hd__call { top: 70%; } } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; 맨 앞에 정렬 justify-content: flex-start; ​ 맨 끝에 정렬 justify-content: flex-end; 가운데 정렬 justify-content: center; 서로 같은 간격으로 박스들이 조정됨. justify-content: space-between;​ 컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨. justify-content: space-around; ​ * 수직으로 적용 align-items 컨테이너의 꼭대기로 정렬 justify-content: flex-start ​ 컨테이너의 바닥으로 정렬 flex-end​ 가운데로 정렬 center 컨테이너의 시작 위치에 정렬 baseline​ 컨테이너에 맞도록 늘린다. stretch .list_ol_01 {counter-reset:item; margin-bottom:10px;} .list_ol_01 > li {position: relative; font-size: 16px; line-height: 1.75; margin-bottom:4px; color: #636363; padding-left:26px;} .list_ol_01 > li:last-child {margin-bottom: 0;} .list_ol_01 > li:before {counter-increment: item; content: counter(item); width: 18px; height: 18px; display: inline-block; background: #fff; border:1px solid #636363; color: #636363; border-radius: 50%; text-align: center; line-height:18px; font-size: 10px; position: absolute; top: 5px; left: 0; font-weight:400;} -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px); 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: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 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 text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */ @media only screen and (max-width : 747px){ .mobile747 {display: block;} } @media only screen and (max-width : 640px){ /* .pc {display: none;} .mobile {display: block;} */ .f_inquiry.fixed {display: none;} .f_inquiry .inBox .f_form .btnBox > div {flex-wrap: wrap;} .f_inquiry .inBox .f_form input:first-of-type {width: calc((100% - 1rem)/2);} .f_inquiry .inBox .f_form input:nth-of-type(2) {width: calc((100% - 1rem)/2);} .f_inquiry .inBox .f_form input:last-of-type {margin: 1rem 0 0 ;} .f_inquiry .inBox .f_form {display: block;} .f_inquiry .inBox .f_form .checkIn {margin-bottom: 2rem; } .f_inquiry .inBox .checkIn label{font-size: 2rem;} .f_inquiry .inBox .f_form .checkIn a {font-size: 1.8rem;} .btn_inquiry {max-width: none;} .mOnline__btn button {width: 100%;} .mOnline__btn {margin-top: 3rem;} .f_inquiry .inBox .s-tel {transform: none; display: none;} .sec05__loca img {max-width: 80%;} #header .hd__call { top: 57%; } .sec02__yearTit p.pc{display: none;} .sec02__yearTit p.mo{display: block;} } @media only screen and (max-width : 480px){ #mVisual .visualRoll .slider img {height: 80vh; } #mVisual {padding-top: 10rem;} .year__tablebtm div::after {right: 0rem;} .year__tablebtm{flex-wrap: wrap; gap: 0;} .year__tablebtm > div{width: 100%; margin: 0 auto;} .year__tablebtm > p {flex: none ; width: 100%; } .year__tablebtm p.size {font-size: 4rem;} .year__tablebtm div.under::after{width: 100%;} .year__tablebtm div.under::before{top: -1rem; left: 75%;} .fee__tableWrap2 table tbody td {font-size: 2.3rem;padding: 1.5rem 1.5rem 1rem;} .sec06__mainTitImg.mobile img {width: 50rem;} .main .sec01 {height: 155rem; padding: 10rem 3rem;} .sec01__mainTitImg img {width: 46rem !important;} .sec02__mainTitImg img {width: 46rem !important;} .sec05__mainTitImg img {width: 50rem !important;} .sec03__cont .pd img {width: 11rem;} .sec03__mainTitImg.mobile img {width: 43rem;} .sec07 .swiper-slide {padding: 0 3rem;} .sec01__circle {width: 32rem; height: 32rem;} .sec01__circleTxt {width: 13rem; height: 13rem;} .sec01__circleTxt::before {width: 15rem; height: 15rem;} /* 5각형일때 되돌리면됨 .sec01__circleTxt.txt05 {top: 4rem; left: -6rem;} */ /* 5각형일때 되돌리면됨 .sec01__circleTxt.txt02 {top: 4rem; right: -6rem;} */ .sec01__circleTxt p {margin-top: 1rem;} .sec01__btm {width: 100%;} /* 5각형일때 되돌리면됨.sec01__circleTxt.txt01 { top: -6.5rem; left: 9rem; } */ .sec01__circleTxt p {font-size: 2.3rem;} .sec03__contBtm {font-size: 2.6rem;} .sec05__loca img {max-width: 60%;} .sec05__loca {transform: translate(-2.5rem, 0);} .fee__txt {font-size: 3rem;} .mobile480 {display: block;} } @media only screen and (max-width : 400px){ .sec05__loca img {max-width: 50%;} .sec05__loca {transform: translate(-3.4rem, 0);} .fee__tableWrap table tbody td.td2 {font-size: 1.9rem;} #ttugbaegi>img { height: 109rem !important; } } .secVideo {padding-top:320px; padding-bottom:95px; background:#23120b url('/images/secvideo-bg_230526.png') no-repeat top center; } .secVideo .video {max-width:1920px; margin:0 auto; position:relative; padding-bottom: 9%;} /* .secVideo .video:before {content:''; width:100%; height:100%; background:url('/images/secvideo-line_230526.png') no-repeat top center; background-size:100% auto; position:absolute; left:0; top:0; z-index:1} */ .secVideo .video iframe {width:70.6%; max-width: 854px; height:39.25vw; max-height: 480px; position:relative; z-index:2; left:50.2%; top:3.1vw; transform: translate(-51%);border: 3px solid transparent; /* border-image: linear-gradient(to top, #c89a40 0%, #ffe082 100%); */ border-image: linear-gradient(to top, #947538 0%, #9d6e1b 100%); border-image-slice: 1; box-sizing: border-box;} @media only screen and (max-width : 1710px){ .secVideo {padding:15vw 0 3vw; background-size:100% auto} /* .secVideo .video { width:90%;} */ /* .secVideo .video:before { background:url('/images/secvideo-line2.png') no-repeat top center; background-size:70% auto; } */ /* .secVideo .video iframe {width:calc(100% - 8px); height:50vw; } */ } @media only screen and (max-width : 976px){ /* .secVideo .video iframe { height:49vw; } */ } .sec01{display: flex; flex-wrap: wrap; justify-content: center;} .sec01 .mainTit{width: 100%;} .sec01 .sec01__circleWrap{width: 50%;} .sec01 .wrap600{width: 40%; margin-left: 30px;} @media screen and (max-width:1280px){ .sec01 .sec01__circleWrap{width: 100%;} .sec01 .wrap600{width: 100%; margin: 70px 0 0;} } @media screen and (max-width:840px){ .sec01 .wrap600{width: 100%; margin: 50px 0 0;} .sec01__circleTxt p {line-height: 3.5rem;} } @media screen and (max-width:480px){ .sec01 .wrap600{width: 100%; margin: 15px 0 0;} .sec01__circleTxt p {line-height: 3rem;} } .sec09-add-txt{font-size: 20px; margin-bottom: 20px; margin-top: -10px ; color: #fff;}