.lastDepth>a, .moveMenu>a, #mVisual .visual_in .ii, #mVisual .visual_in .ii.btn>a, #mVisual .bx-pager>span, #mVisual .bx-pager-item>a, #mVisual .slick-dots>li button:before, #mVisual .iconMenu .inConts>a, #mQLink *, #mBanner .text, #mBanner .cate, #mBanner .tit, #mBanner .txt, #mBanner .btn, #mBanner .btn>span, #mService .mService_in *, #mRoute .routeMap #routeBtn>a, #mAbout .linkAbout>a .thumb img, .cont_img .btns>a{transition: all .3s ease-out; transform-origin: 50% 50%;} #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mBanner .bannerRoll .slider .photo{transition: all .7s ease-out; transform-origin: 50% 50%;} #mBanner .bannerRoll.one .slider .photo {left: 0; opacity: 1;} #mBanner .bannerRoll.one .cate, #mBanner .bannerRoll.one .tit, #mBanner .bannerRoll.one .txt, #mBanner .bannerRoll.one .btn {opacity: 1;} /*[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;'; position: absolute; left:0; top:0;} .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:1px solid #333;} .nTable>table{width:100%; border-spacing:0; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:15px 20px; background-color: #fff; border-bottom:1px solid #ddd; font-size:16px; line-height:1.4; color:#222; text-align:left; border-collapse:collapse; empty-cells:show; box-sizing: border-box; } .nTable>table>thead>tr>th, .nTable>table>tbody>tr>th{font-weight:500; color:#000; text-align: center; position: relative;} .nTable>table>tbody>tr>th{width:115px; text-align: left;} .nTable>table>tbody>tr>th.num{width:60px; background-color: #3953a8; color: #fff; text-align: center;} .nTable>table .ps{margin-top:5px; padding-left:12px; font-size:15px; color: #777; position: relative;} .nTable>table .ps+.ps{margin-top:0px;} .nTable>table .ps:before{content: "*"; position: absolute; left:3px; top:2px;} .nTable>table .tit{font-weight: 500; color: #222;} .nTable>table a{color: #1a85e9; text-decoration: underline;} .nTable.list>table{background-color: #ddd; border-spacing:1px;} .nTable.list>table th, .nTable.list>table td{padding:13px 10px; border-bottom:none; text-align: center;} .nTable.list>table>tbody>tr>th{width:auto; border-right:none;} .nTable +.nTable{margin-top:40px;} .nTable.tac>table th, .nTable.tac>table td{text-align:center !important;} .nTable.line>table tr>*+*{border-left:1px solid #ddd;} .nTable.line>table>thead>tr>th{border-bottom-color:#333;} .f0{font-size:0; line-height:0;} .lastDepth{width:100%; margin-bottom:40px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .lastDepth>a{min-width:180px; height:50px; background-color: #ededed; border:1px solid #cbcbcb; font-size:16px; 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: #3953a8; border-color:#3953a8; color: #fff; z-index:2;} .lastDepthConts{font-size:0; line-height:0; display:none; overflow:hidden;} .moveMenu{width:100%; margin-bottom:40px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .lastDepth + .moveMenu{margin-top:-15px;} .moveMenu>a{min-width:135px; height:46px; padding-top:2px; border-bottom:2px solid #ddd; font-size:16px; line-height:42px; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box;padding: 0 12px} .moveMenu>a>span{display:inline-block;} .moveMenu>a:hover, .moveMenu>a.active{border-color:#3953a8; color: #3953a8;} .nTit{font-weight: 500; font-size:28px; line-height:1.5; color: #333;} .nTit.point{color: #3155cb;} .nTxt{font-weight: 300; font-size:15px; line-height:22px; color: #888; text-align: center;} h4.txt{padding-bottom:40px; font-weight: bold; font-size:30px; line-height:1; color: #222; text-align: center; letter-spacing: -0.02em;} h4.line{margin-top:60px; padding:0 0 20px 11px; font-weight: bold; font-size:30px; line-height:1; color: #333; text-align: left; position: relative;} h4.line:before{content: ""; width: 2px; height: 28px; background-color: #4a93d7; display: block; position:absolute; left:0; top:2px;} h4.line .btn_r{width:245px; background-color: #3953a8; font-weight: 400; font-size:16px; line-height:50px; color: #fff; text-align: center; display:inline-block; vertical-align: top; position: absolute; right:0; top:-10px;} h4.line .btn_r>span+img{margin-left:14px;} h4.line.black:before{background-color: #515151;} h4.line.en{height:1px; padding-bottom:0; opacity: 0; overflow: hidden;} #pageTop + h4.line, .moveMenu + h4.line{margin-top:0;} .psTxt{margin-top:10px; padding-left:12px; font-size:16px; color: #777; position: relative;} .psTxt+.psTxt{margin-top:0px;} .psTxt:before{content: "*"; position: absolute; left:0; top:2px;} .terminam_subTit{padding:0 0 18px 19px; font-weight: bold; font-size: 18px; line-height: 1; color: #222; letter-spacing: -0.02em; position: relative;} .terminam_subTit:before{content: ""; width: 13px; height: 13px; border:4px solid #1ea052; display: block; position:absolute; left:0; top:4px; box-sizing: border-box; border-radius:99px;} .scrollTb{display:inline;} .scroll_info{width:100%; padding:2rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:-2rem; 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%;} } #calendarArea .calendarTop>strong, #calendarArea .calendarTb>table thead th, #calendarArea .calendarList>dl>dt{font-family: 'Poppins', sans-serif !important;} /*[e] All Style */ /*[s] Main Style */ #mVisual{width:1920px; margin-left:-960px; font-size:0; line-height:0; position: relative; left:50%; overflow:hidden;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{width:100%; height:750px; 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 .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:6rem; z-index:6;} #mVisual .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:2rem;} #mVisual .slick-dots>li button{width:1.6rem !important; height:1.6rem; margin:0; padding:0; background-color:rgba(255,255,255,0.5); border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:99px; overflow:hidden;} #mVisual .slick-dots>li.slick-active button{background-color:#fff;} #mVisual .slick-arrow{width:60px; height:60px; background-color: transparent; background-repeat: no-repeat; background-position: center center; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:6; transform: translateY(-50%); cursor: pointer;} #mVisual .slick-prev{background-image: url("../../images/ko/main/btn_slick_prev.png"); left:125px;} #mVisual .slick-next{background-image: url("../../images/ko/main/btn_slick_next.png"); right:125px;} #mVisual .vTxt{width:100%; max-width:1200px; text-align: left; position: absolute; left:50%; top:153px; z-index:5; transform: translateX(-50%);} #mVisual .vTxt .ii{top:50px; display:block; opacity: 0; position: relative; text-shadow:0px 5px 5px rgba(0,0,0,0.3);} #mVisual .vTxt .i01{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .i02{-webkit-transition-delay: .75s; transition-delay: .75s;} #mVisual .vTxt .i03{-webkit-transition-delay: .8s; transition-delay: .8s;} #mVisual .vTxt .i04{-webkit-transition-delay: .85s; transition-delay: .85s;} #mVisual .vTxt .i05{-webkit-transition-delay: .9s; transition-delay: .9s;} #mVisual .vTxt .i06{-webkit-transition-delay: .95s; transition-delay: .95s;} #mVisual .vTxt .i07{-webkit-transition-delay: 1s; transition-delay: 1s;} #mVisual .vTxt .ii{font-weight: 900; line-height:1; color: #fff; letter-spacing: -0.02em; text-transform : uppercase; text-shadow:0 0 10px rgba(0,0,0,0.5);} #mVisual .vTxt .ii.tit{font-size:50px;} #mVisual .vTxt .ii.tits{font-size:24px;} #mVisual .vTxt .ii.txt{font-weight: 300; font-size:22px; line-height:34px;} #mVisual .vTxt .ii.txt>strong{font-weight: bold;} #mVisual .vTxt .ii.tit+.tits{padding-top:15px;} #mVisual .vTxt .ii.tits+.txt{padding-top:20px;} #mVisual .vTxt.active .ii{top:0px; opacity:1;} .mConts{font-size:0; line-height:0;} #mQLink{background-color: #f8f8f8;} #mQLink .inConts{border-right:1px solid #e0e0e0; display: table; table-layout: fixed;} #mQLink .link{height:170px; padding:0 60px; border-left:1px solid #e0e0e0; display:table-cell; vertical-align: middle;} #mQLink .link>dl{padding:30px 0 30px 102px; background-repeat:no-repeat; background-position: left center;} #mQLink .link>dl>dt{font-weight: bold; font-size:20px; line-height:1; color: #000;} #mQLink .link>dl>dd{padding-top:10px; font-size:16px; line-height:1; color: #7e7e7e;} #mQLink .link.icon01>dl{background-image: url("../../images/ko/main/icon_mQLink01.png");} #mQLink .link.icon02>dl{background-image: url("../../images/ko/main/icon_mQLink02.png");} #mQLink .link.icon03>dl{background-image: url("../../images/ko/main/icon_mQLink03.png");} #mQLink .link:hover{background-color: #3953a8;} #mQLink .link:hover>dl>dt{color:#fff;} #mQLink .link:hover>dl>dd{color: rgba(255,255,255,0.7);} #mQLink .link.icon01:hover>dl{background-image: url("../../images/ko/main/icon_mQLink01_on.png");} #mQLink .link.icon02:hover>dl{background-image: url("../../images/ko/main/icon_mQLink02_on.png");} #mQLink .link.icon03:hover>dl{background-image: url("../../images/ko/main/icon_mQLink03_on.png");} #mBanner{width:1920px; margin:120px 0 120px -960px; padding-right:320px; font-size:0; line-height:0; position: relative; left:50%; overflow:hidden; box-sizing:border-box;} #mBanner .bannerRoll{white-space: nowrap;} #mBanner .bannerRoll .slider{position: relative;} #mBanner .bannerRoll .slider .photo{width:1207px; height:720px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; left:-600px; opacity: 0;} #mBanner .bannerRoll .slider .text{width:630px; min-height:520px; padding:75px; background-color: #fff; display:block; position: absolute; right:-50px; top:50%; transform: translateY(-50%); white-space: normal; box-sizing:border-box;} #mBanner .bannerRoll .slider .text .cate{font-weight: 300; font-size:16px; line-height:1; color: #5a7fc2; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;;} #mBanner .bannerRoll .slider .text .tit{margin-top:20px; font-weight: bold; font-size:44px; line-height:1; color: #1b1b1b; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mBanner .bannerRoll .slider .text .txt{max-height:90px; margin-top:40px; font-size:20px; line-height:30px; color: #333; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #mBanner .bannerRoll .slider .text .btn{position: absolute; left:125px; bottom:75px;} #mBanner .bannerRoll .slider .text .btn>span{width:160px; height:45px; border:1px solid #3953a8; font-size:16px; line-height:43px; color: #3953a8; text-align:center; display:inline-block;} #mBanner .bannerRoll .slider .text:hover .btn>span{background-color: #3953a8; color: #fff;} #mBanner .slick-arrow{width:60px; height:60px; background-color: transparent; background-repeat: no-repeat; background-position: center center; border:none; font-size:0; line-height:0; position: absolute; right:320px; top:100px; z-index:6;} #mBanner .slick-prev{background-image: url("../../images/ko/main/btn_slick_prev.gif"); margin-right:61px;} #mBanner .slick-next{background-image: url("../../images/ko/main/btn_slick_next.gif"); } #mBanner .ii{left:50px; display:block; opacity: 0; position: relative;} #mBanner .i01{-webkit-transition-delay: .7s; transition-delay: .7s;} #mBanner .i02{-webkit-transition-delay: .75s; transition-delay: .75s;} #mBanner .i03{-webkit-transition-delay: .8s; transition-delay: .8s;} #mBanner .i04{-webkit-transition-delay: .85s; transition-delay: .85s;} #mBanner .i05{-webkit-transition-delay: .9s; transition-delay: .9s;} #mBanner .i06{-webkit-transition-delay: .95s; transition-delay: .95s;} #mBanner .i07{-webkit-transition-delay: 1s; transition-delay: 1s;} #mBanner .cate, #mBanner .tit, #mBanner .txt, #mBanner .btn{opacity: 0;} #mBanner .cate, #mBanner .tit, #mBanner .txt{left:50px; position: relative;} #mBanner .bannerRoll .slick-active .slider .photo{left:0px; opacity: 1;} #mBanner .slick-active .cate, #mBanner .slick-active .tit, #mBanner .slick-active .txt, #mBanner .slick-active .btn{opacity:1;} #mBanner .slick-active .text{right:0px;} #mBanner .slick-active .cate, #mBanner .slick-active .tit, #mBanner .slick-active .txt{left:0px;} #mBanner .slick-active .slider .text .btn{left:75px;} .mTitle{padding-bottom:60px; text-align: center;} .mTitle>dt{font-weight: bold; font-size:40px; line-height:1; color: #1b1b1b;} .mTitle>dd{padding-top:20px; font-weight: 300; font-size:20px; line-height:1; color: #222;} .mMore{padding-top:30px; font-size:0; line-height:0; text-align: center;} .mMore>a{width:180px; height:50px; background-color: #3953a8; font-size:16px; line-height:48px; color: #fff; display:inline-block;} #mService{padding-bottom:120px;} #mService .mService_in{display: flex; justify-content: space-between;} #mService .mService_in>a{width:216px; height:216px; padding-top:53px; background-color: #fafafa; text-align: center; border-radius:999px; box-sizing:border-box;} #mService .mService_in>a .icon{height:74px; background-repeat:no-repeat; background-position: center top;} #mService .mService_in>a strong{padding-top:13px; font-weight: 500; font-size:20px; line-height:1; color: #1b1b1b; display:block;} #mService .mService_in>.icon01 .icon{background-image: url("../../images/ko/main/icon_mService01.png");} #mService .mService_in>.icon02 .icon{background-image: url("../../images/ko/main/icon_mService02.png");} #mService .mService_in>.icon03 .icon{background-image: url("../../images/ko/main/icon_mService03.png");} #mService .mService_in>.icon04 .icon{background-image: url("../../images/ko/main/icon_mService04.png");} #mService .mService_in>.icon05 .icon{background-image: url("../../images/ko/main/icon_mService05.png"); background-position: center bottom;} #mService .mService_in>a:hover{background-color: #318adc;} #mService .mService_in>a:hover strong{color: #fff;} #mService .mService_in>.icon01:hover .icon{background-image: url("../../images/ko/main/icon_mService01_on.png");} #mService .mService_in>.icon02:hover .icon{background-image: url("../../images/ko/main/icon_mService02_on.png");} #mService .mService_in>.icon03:hover .icon{background-image: url("../../images/ko/main/icon_mService03_on.png");} #mService .mService_in>.icon04:hover .icon{background-image: url("../../images/ko/main/icon_mService04_on.png");} #mService .mService_in>.icon05:hover .icon{background-image: url("../../images/ko/main/icon_mService05_on.png");} .sliders{overflow: visible; position: relative; white-space: nowrap;} .sliders .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:-3rem; z-index:6;} .sliders .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} .sliders .slick-dots>li+li{margin-left:2rem;} .sliders .slick-dots>li button{width:2rem !important; height:2rem; margin:0; padding:0; background-color:#ccc; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:99px; overflow:hidden;} .sliders .slick-dots>li.slick-active button{background-color:#435575;} .sliders .slick-arrow{width:72px; height:72px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; cursor: pointer; display:inline-block; position: absolute; top:32%; z-index:7;} .sliders .slick-prev{background-image: url("../../images/ko/main/btn_slick_prev02.png"); left:-100px;} .sliders .slick-next{background-image: url("../../images/ko/main/btn_slick_next02.png"); right:-100px;} #mEvent{padding:120px 0; background-color: #f8f8f8;} #mReview{padding:120px 0; background-color: #fff;} #mBtm{width:1920px; height:740px; margin-left:-960px; padding-top:120px; background: url("../../images/ko/main/bg_mBtm.jpg") no-repeat center top; font-size:0; line-height:0; position: relative; left:50%; overflow:hidden; box-sizing:border-box;} #mBtm .inConts{display: flex; justify-content: space-between;} #mBtm .notice{width:640px; padding:40px; background-color: #fff; box-sizing:border-box;} #mBtm .notice>li{border-top:1px solid #ddd; position: relative;} #mBtm .notice>li>a, #mBtm .notice>li>.day{font-size:16px; line-height:50px; color: #666;} #mBtm .notice>li>a{max-width:80%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mBtm .notice>li>.day{position: absolute; right:0; top:0; display: inline-block;} #mBtm .notice>li.top{margin-bottom:22px; border-top:none; position: relative;} #mBtm .notice>li.top>a{max-width:100%; display: block; overflow: visible; text-overflow: normal; display: flex; justify-content: space-between; white-space: normal;} #mBtm .notice>li.top>a>div{display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; box-sizing: border-box;} #mBtm .notice>li.top>a .day{width:120px; min-width:120px; height:120px; border:1px solid #3953a8; font-weight: 500; line-height:1; color: #3953a8; text-align: center;} #mBtm .notice>li.top>a .day>dl>dt{font-weight: bold; font-size:50px;} #mBtm .notice>li.top>a .day>dl>dd{margin-top:10px; font-size:16px;} #mBtm .notice>li.top>a .data{width:75%; margin-left:20px; justify-content: flex-start;} #mBtm .notice>li.top>a .data>dl{max-width:100%; overflow:hidden;} #mBtm .notice>li.top>a .data>dl>dt{max-height:32px; font-weight:bold; font-size:20px; line-height:32px; color: #000; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mBtm .notice>li.top>a .data>dl>dd{max-height:48px; margin-top:0px; font-weight:400; font-size:16px; line-height:24px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #mBtm .notice>li.noPost{font-size:16px; line-height:180px; color: #555; text-align: center;} #mBtm .link{width:640px;} #mBtm .link>a{display:inline-block; vertical-align: top;} /*[e] Main Style */ /*[s] Sub Style */ .imgff{padding-top:20px;} .cont_img{font-size:0; line-height:0; position: relative;} .cont_img dl{color: #fff; text-align: center; position: absolute; left:0; right:0; top:50%; transform: translateY(-50%); text-shadow:-2px 2px 5px rgba(0,0,0,0.5);} .cont_img dl>dt{font-weight: bold; font-size:36px; line-height:1; letter-spacing: -0.05em;} .cont_img dl>dd{padding-top:20px; font-weight: 500; font-size:18px; line-height:1; position: relative;} .cont_img .btns{padding-top:40px; font-size:0; line-height:0;} .cont_img .btns>a{width:100%; max-width:240px; height:70px; background-color: #244a33; font-weight: 500; font-size:18px; line-height:70px; color: #fff; letter-spacing: -0.02em; display:inline-block; vertical-align: top;} .cont_img .btns>a:hover, .cont_img .btns>a.active{background-color: #069540;} /* 회사소개 - 연혁 */ .historyArea{font-size:0; line-height:0;} .historyArea h4.txt{} .historyArea .history_re{margin-top:40px; border-top:1px solid #333;} .historyArea .history_re>li{width:100%; padding:35px; border-bottom:1px solid #ddd; display:table; table-layout: fixed;} .historyArea .history_re>li>*{display:table-cell; vertical-align: top;} .historyArea .history_re>li .year{width:110px; font-weight: bold; font-size:25px; line-height:1; color: #000;} .historyArea .history_re>li dl{width:100%; display:table; table-layout: fixed;} .historyArea .history_re>li dl>*{padding:0px 0; font-size:16px; line-height:1.4; color: #fff; display:table-cell; vertical-align: middle; box-sizing:border-box;} .historyArea .history_re>li dl>dt{width:40px; /* height:34px; background-color: #666;*/ font-weight: 500; color: #000; text-align: right; vertical-align: top;} .historyArea .history_re>li dl>dd{padding-left:13px; line-height:1.4; color: #222;} .historyArea .history_re>li dl+dl{margin-top:10px;} /* 회사소개 - 오시는길 */ .root_daum_roughmap{width:100%; height:400px; margin-bottom:30px !important; overflow:hidden;} .root_daum_roughmap .map_border {display:none !important;} /* 회사소개 - 카페리선 소개 */ .carrierSlider{width:100%; margin-top:20px; font-size:0; line-height:0; position: relative; overflow:hidden;} .carrierSlider .visualRoll{white-space: nowrap;} .carrierSlider .visualRoll .slider{width:100%; height:558px; 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;} .carrierSlider .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:6rem; z-index:6;} .carrierSlider .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} .carrierSlider .slick-dots>li+li{margin-left:2rem;} .carrierSlider .slick-dots>li button{width:1.6rem !important; height:1.6rem; margin:0; padding:0; background-color:rgba(255,255,255,0.5); border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:99px; overflow:hidden;} .carrierSlider .slick-dots>li.slick-active button{background-color:#fff;} .carrierSlider .slick-arrow{width:22px; height:40px; background-color: transparent; background-repeat: no-repeat; background-position: center center; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:6; transform: translateY(-50%); cursor: pointer;} .carrierSlider .slick-prev{background-image: url("../../images/ko/main/btn_slick_prev04.png"); left:40px;} .carrierSlider .slick-next{background-image: url("../../images/ko/main/btn_slick_next04.png"); right:40px;} .carrierSlider + p.f0{margin-top:60px;} /* 여객이용안내 - 객실 및 부대시설 */ .cabin_re{font-size:0; line-height:0; overflow:hidden;} .cabin_re .slider img{width:100%; height:100%; max-width:none; object-fit:cover; background:url('../../images/noimage.jpg') no-repeat center center; background-size: cover; display:block; position: relative;} .cabin_re .img_Big{width:780px; float:left;} .cabin_re .img_Big .slider{width:100%; height:558px; display:block; overflow:hidden;} .cabin_re .img_Small{width:200px; margin-top:-5px; float:right;} .cabin_re .img_Small .slider{width:100%; height:132px; margin:5px 0; display:block; overflow:hidden;} .cabin_re .slick-vertical .slick-slide{border:none;} /* Calendar Style */ #calendarArea .calendarTop{width:100%; padding:0px 0 30px; text-align: center; box-sizing: border-box; position: relative;} #calendarArea .calendarTop>strong{font-weight: bold; font-size:30px; line-height:1.4; color:#252525; display:inline-block; vertical-align: top;} /* #calendarArea .calendarTop .right{position: absolute; right:0; bottom:10px;} #calendarArea .calendarTop .right select{height:42px; padding:0 40px 0 10px; background:#fff url('../../images/front/bg_select_arr.gif') no-repeat 90% center; border:1px solid #dadada; font-size:14px; line-height:42px; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #calendarArea .calendarTop .right select::-ms-expand{display:none;} #calendarArea .calendarTop .right select+select{margin-left:5px;} */ #calendarArea .calendarTop>a{margin:19px 30px 0; font-size:0; line-height:0;display:inline-block; vertical-align: top; position: relative; border-radius:2px;} #calendarArea .calendarTop>a:before, #calendarArea .calendarTop>a:after{content: ""; width: 21px; height: 21px; border-width:3px 0 0 3px; border-style:solid; border-color:#333; display: inline-block; position:absolute; left:0; top:0; box-sizing: border-box;} #calendarArea .calendarTop>a:after{opacity: 0;} #calendarArea .calendarTop>a.p:before{margin:-6px 0 0 -3px; transform:rotate(-45deg);} #calendarArea .calendarTop>a.n:before{margin:-6px 0 0 -9px; transform:rotate(135deg);} #calendarArea .calendarTb{width:100%; overflow:hidden; box-sizing: border-box;} #calendarArea .calendarTb>table{width:100%; border-spacing:1px; table-layout : fixed;} #calendarArea .calendarTb>table th, #calendarArea .calendarTb>table td{height:90px; padding:0; background-color:rgba(255,255,255,0.1); font-size:18px; line-height:1.3; color:#666; text-align: center; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; position: relative;} #calendarArea .calendarTb>table thead th{height:42px; padding:0; background-color: #fff; font-weight: bold; font-size:20px; color: #252525; vertical-align: middle;} #calendarArea .calendarTb>table .day{width:36px; height:36px; line-height:36px; display:inline-block; border-radius:999px;} #calendarArea .calendarTb>table p{width:100%; margin-top:5px; padding:0 8px; font-size:16px; line-height:1.3; color:#666666; display: block; box-sizing: border-box; } #calendarArea .calendarTb>table tr>*:first-child{color: #f24444;} #calendarArea .calendarTb>table tr>*:last-child{color: #0476d9;} #calendarArea .calendarTb>table .disabled{background-color: #fafafa; color: #aaa !important;} #calendarArea .calendarTb>table .toDay .day{background-color:#3953a8; color: #fff;} #calendarArea .calendarList{max-height:242px; margin-top:40px; border-top:2px solid #888; border-bottom:1px solid #dbdbdb; position: relative; overflow:hidden; overflow-y:auto;} #calendarArea .calendarList>dl{padding:15px 20px; font-size:16px; line-height:1.6; color: #666;} #calendarArea .calendarList>dl+dl{border-top:1px solid #dbdbdb;} #calendarArea .calendarList>dl>dt{font-weight: bold; color: #000;} #calendarArea .calendarList>dl>dd{padding-right:80px;} #calendarArea .calendarList>table{width:100%; border-spacing:0; table-layout : fixed;} #calendarArea .calendarList>table th, #calendarArea .calendarList>table td{padding:14px 20px; background-color: #fff; font-size:16px; line-height:1.4; color:#666; text-align:center; border-collapse:collapse; empty-cells:show; box-sizing: border-box; } #calendarArea .calendarList>table>thead>tr>th, #calendarArea .calendarList>table>tbody>tr>th{font-weight:500; color:#000; position: relative;} #calendarArea .calendarList>table>tbody>tr>*{border-top:1px solid #dbdbdb;} #calendarArea .calendarList>table .btn{width:80px; height:36px; background-color: #3953a8; font-weight: 500; font-size:16px; line-height:36px; color: #fff; display:inline-block; border-radius:3px;} #calendarArea .calendarList>table .btn.register{background-color:#3953a8;} #calendarArea .calendarList>table .btn.waiting{background-color:#f24444} #calendarArea .calendarList>table .btn.expire{background-color:#ddd;color:#fff;} /* 예약서비스 - 관계법령 */ .legislation_site{font-size:0; line-height:0;} .legislation_site>dl{margin-top:10px;} .legislation_site>dl+dl{margin-top:40px;} .legislation_site>dl>dt{font-weight: 500; font-size:22px; line-height:1; color: #333;} .legislation_site>dl>dd{padding-top:15px; font-size:16px; line-height:1.4; color: #666;} .legislation_site>dl a{color: #1a85e9; text-decoration: underline;} /* 화물안내 - 수출입절차 */ .stepArea{font-size:16px; line-height:1.4; color: #222;} .stepArea .tit{font-weight: 500; font-size:22px; line-height:1; color: #1b1b1b;} .stepArea * + .tit{margin-top:35px;} .stepArea ul{margin-top:20px;} .stepArea ul>li{padding-left:13px; position: relative;} .stepArea ul>li+li{margin-top:6px;} .stepArea ul>li:before{content: ""; width:4px; height:4px; background-color: #3953a8; display: inline-block; position:absolute; left: 0; top:10px;} .stepArea ol{margin-top:20px; counter-reset:item;} .stepArea ol>li{padding-left:26px; position: relative;} .stepArea ol>li+li{margin-top:6px;} .stepArea ol>li:before{counter-increment: item; content: counter(item)"."; width:22px; text-align: right; color: #3953a8; display: inline-block; position: absolute; top: 0; left: 0;} .stepArea ol>li:nth-child(-n+9)::before {content: "0" counter(item)".";} /*[e] Sub Style */ /*[s] Etc Style */ .sitemapArea{margin:-5rem -1% 0; font-size:0; line-height:0; display: flex; flex-wrap: wrap; justify-content: space-between;} .sitemapArea>li{width:18%; padding:5rem 1% 0; } .sitemapArea>li>a{height:4rem; border-bottom:1px solid #333; font-weight: 500; font-size:2.4rem; line-height:1; color: #333; display:block;} .sitemapArea>li>ul{} .sitemapArea>li>ul>li{padding-left:1rem; border-bottom:1px solid #dedede;} .sitemapArea>li>ul>li>a{width:100%; height:5rem; font-weight: 500; font-size:1.8rem; line-height:1.2; color: #333; display:table; table-layout: fixed;} .sitemapArea>li>ul>li>a>span{display:table-cell; vertical-align: middle;} .sitemapArea>li>ul>li ul{margin-left:-1rem; padding:1rem; background-color: #f9f9f9;} .sitemapArea>li>ul>li ul>li{position: relative;} .sitemapArea>li>ul>li ul>li:before{content: ""; width: 3px; height: 3px; margin-top:-1.5px; background-color: #7d7c7c; font-size:0; line-height:0; display: inline-block; position:absolute; left: 0; top:50%;} .sitemapArea>li>ul>li ul>li>a{width:100%; height:4rem; padding-left:1.2rem; font-size:1.6rem; line-height:1.3; color: #605f5f; display:table; table-layout: fixed; box-sizing: border-box;} .sitemapArea>li>ul>li ul>li>a>span{display:table-cell; vertical-align: middle;} /*[e] Etc Style */ /*[s] Plugin Style */ /* Layer Style */ .layerCell{display:none;} .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%;} .layerArea{width:0px; height:0px; background-color: rgba(0,0,0,0.5); 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{display:inline-block; position: absolute; right:30px; top:35px;} .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; font-size:0; line-height:0; display:none; position: relative; box-sizing: border-box; z-index:99;} .layerArea .layerIn .layerBox>.tit{padding-top:15px; font-weight: 500; font-size:18px; line-height:1.4; color: #fff; letter-spacing: -0.03em;} .layerArea .layerIn .layerBox>.tit>strong{} .layerArea .layerIn .layerBox .contLy{} .blView, .bookingView{width:1280px;} .schduleView, .youtubeLay{width:900px;} .youtubeLay .you_in{background:url('../../images/noimage.jpg') no-repeat center center; background-size: cover;} .blView, .bookingView, .schduleView{background-color:#fff;padding:30px;} .schduleView .title{font-size:22px; font-weight:600;color:#222;line-height:1.6;} .blView .title, .bookingView .title{font-size:34px; font-weight:600;color:#222;line-height:1.6;} .blView .title span, .bookingView .title span, .schduleView .title span{font-size:22px; color:#777;font-weight:400;margin-left:10px;} .textLay{width:80%; max-width:76rem; padding:5rem; background-color: #f9f9f9 !important;} .textLay>.tit{padding-bottom:3rem; font-weight: 500; font-size:2.4rem; line-height:1.3; color: #222; text-align: center; letter-spacing: -0.03em;} .textLay .contLy{background-color: #fff; padding:3rem; font-size:1.6rem; line-height:1.5; text-align: left; letter-spacing: -0.03em;} .textLay .contLy .scroll{max-height:22rem; overflow:hidden; overflow-y:auto; } .btn_print{top: 29px;position: absolute;right: 110px;padding: 10px;/* border: 1px solid #777; */} /* 레이어 엉큄방지 */ .board_write .more_input ul li{width:calc((100% - 80px) / 5);display:inline-block;float:left;position:relative;} .board_write .more_input ul li+li{margin-left:20px;} .board_write .more_input ul li+li:before{transform: translateY(-50%);content:"";background-color: #dddddd;position: absolute;left: -10px;top:50%;display:block;width:1px;height: 34px;} .board_write .more_input ul li:nth-child(5n+1){margin-left:0;} .board_write .more_input ul li:nth-child(5n+1):before{display:none;} .board_write .more_input ul li:nth-child(n+6){margin-top:10px;} /*[e] Plugin Style */ /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 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; */