/* ***************************************************************** * filename : contents.css * description : 서브 콘텐츠 CSS * date : 2021-01-13 ***************************************************************** */ /* contents */ .sub-contents.board-content{min-height:auto !important;} /* tab_box */ #tab1 {margin-bottom:50px;} #tab1:after {content:'';display:block; clear:both;} #tab1 .btn_open {display:none;} #tab1 li {display:table; float:left; width:calc(25% + 1px ); margin-left:-1px; margin-top:-1px; height:100%; } #tab1.col2 li {width:50%;} #tab1.col3 li {width:33.33%;} #tab1.col5 li {width:20%;} #tab1 li a {position:relative; display:table-cell; height:75px; color:#555; font-size:20px; text-align:center; vertical-align:middle; border:1px solid #d7d7d7; background:#f8f8f8; font-weight:bold; text-decoration:none; letter-spacing:-1px; transition:background 0.3s ease-out;} #tab1 li a:after {content:''; z-index:-1; position:absolute; left:0; bottom:0; display:block; width:100%; height:0%; background:#f2f2f2; transition: all 0.3s ease 0s;} #tab1 li a:hover, #tab1 li a:focus {background:#fff;} #tab1 li a:hover:after,#tab1 li a:focus:after {height:100%; transition: all 0.3s ease 0s;} #tab1 li.on a {border-bottom:0 none; border-top:2px solid #12203e; color:#333333; background:#fff } @media all and (max-width:1500px) { .sub_wrap { width:100%; } .innner { width: 100%; padding:0 10px} } @media all and (max-width:1200px) { } @media all and (max-width:1024px) { /* tab_box */ #tab1 li a {height:60px; font-size:18px} } @media all and (max-width:800px) { /* tab_box */ #tab1 {position:relative; margin-bottom:35px;} } @media all and (max-width:620px) { /* tab_box */ #tab1 {position:relative; margin-bottom:25px;} #tab1 .btn_open {position:relative; display:block; width:100%; height:45px; padding:0 15px; background:#0f3d80; color:#fff; line-height:43px; text-align:left; font-size:14px; font-weight:bold} #tab1 .btn_open:after {position:absolute; right:15px; top:0; margin-top:0; content:'\e942';font-family:'xeicon';} #tab1 > ul {z-index:10; position:absolute; display:none; top:100%; left:0; right:0; border:1px solid #dedede;} #tab1 > ul.active {display:block;} #tab1 li {width:100% !important; margin:0;} #tab1 li a,#tab1 li.on a,#tab1 li div,#tab1 li.on div {min-height:43px; padding:10px 15px; height:auto; font-size:14px; text-align:left; background:#fff; border:none; border-bottom:1px solid #dedede; color:#666; font-weight:normal; letter-spacing:0;} #tab1 li a:hover, #tab1 li a:focus {background-color:#f0f0f0;} } @media screen and (max-width:620px){ } @media screen and (max-width:400px){ } /* 공통 */ /*서브공통*/ .sub-inner{width:1680px; margin:0 auto;} .sub-contents{margin:0 auto; padding:130px 0; width:1680px; min-height:1000px;} .sub-contents .subinfo_top{margin-bottom:70px; text-align:center;} .sub-contents .subinfo_top span{margin-bottom:35px; font-size:22px; font-weight:700; color:#0E43AF;} .sub-contents .subinfo_top h3{font-size:70px; font-weight:700; color:#151515;} @media screen and (max-width:1700px){ .sub-inner{width:1400px;} .sub-contents{width:1400px;} .sub_top h3{left:100px;} .sub_top .location{right:100px;} } @media screen and (max-width:1500px){ .sub-inner{width:1200px;} .sub-contents{width:1200px;} .sub_top h3{left:80px; font-size:50px;} .sub_top .location{right:80px;} .sub_top:before{height:430px;} } @media screen and (max-width:1400px){ .sub-inner{width:100%; padding:100px 30px;} .sub-contents{width:100%; padding:100px 30px;} .sub_top:before{height:380px;} .sub_top h3{left:40px;} .sub_top .location{right:40px;} .sub-contents .subinfo_top{margin-bottom:50px;} .sub-contents .subinfo_top span{margin-bottom:30px; font-size:20px;} .sub-contents .subinfo_top h3{font-size:60px;} } @media screen and (max-width:1200px){ .sub-contents{padding: 80px 20px;} .sub-contents .subinfo_top{margin-bottom:40px;} .sub-contents .subinfo_top h3{font-size:56px;} } @media screen and (max-width:1024px){ .sub-contents{padding:50px 20px;} .sub-contents .subinfo_top{margin-bottom:30px; font-size:18px;} .sub-contents .subinfo_top h3{font-size:46px;} .sub_top h3{font-size: 40px; bottom: inherit; top: 50%; left: 50%; transform: translate(-50%, -50%);} .sub_top .location{right: 50%; transform: translate(50%, -50%); bottom: inherit; top: 50%; padding-top: 80px;} } @media screen and (max-width:767px){ .sub-contents{padding:25px 10px;} .sub-contents .subinfo_top{margin-bottom:15px; } .sub-contents .subinfo_top span{font-size:16px;} .sub-contents .subinfo_top h3{font-size:24px;} .sub_top:before{height:320px;} .sub_top h3{font-size:30px;} .sub_top .location{width:100%;} .sub_top .location li{padding-right:0; font-size:14px;} .sub_top .location li:after{padding-left:10px;} } @media screen and (max-width:640px){ .sub_top:before{height:300px;} } @media screen and (max-width:540px){ .sub_top:before{height:260px;} } .screen_out {overflow: hidden; position: absolute; width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999px;} .title-style01{margin-bottom:20px; padding-left:26px; position:relative; font-size:28px; font-weight:600;} .title-style01::before{content:''; display:block; position:absolute; top:9px; left:0; width:18px; height:18px; background-color:#fff; border:4px solid #0E43AF; border-radius:50%;} .list-style01{} .list-style01 > li{margin:4px 0; position:relative; padding-left:16px; font-size:22px;} .list-style01 > li::before{content:''; display:block; position:absolute; top:13px; left:0; width:6px; height:6px; background:#000; border-radius:50%;} .list-style01 .list-style01-num{} .list-style02{} .list-style02 > li{margin:4px 0; position:relative; padding-left:15px; font-size:22px;} .list-style02 > li::before{content:''; display:block; position:absolute; top:13px; left:0; width:6px; height:1px; background:#000; border-radius:50%;} .title-style01-span{margin:20px 0 10px; font-size:22px; font-weight:500;} /*리스트 스타일 01*/ .list-box01{padding:35px; background:#f9f9f9; border-radius:15px;} .list-box01 li{position:relative; padding-left:16px; line-height:1.7;} .list-box01 li::before{content:''; display:block; position:absolute; top:14px; left:0; width:6px; height:6px; background:#0E43AF; border-radius:50%;} /**/ .no-board{padding:80px 0; text-align:center; border-top:1px solid #000; border-bottom:1px solid #ddd;} @media screen and (max-width:1500px){ .title-style01{font-size:26px; padding-left:24px;} } @media screen and (max-width:1200px){ .title-style01{margin-bottom:15px; font-size:24px; padding-left:20px;} .title-style01::before{width:16px; height:16px;} .list-style01 > li{padding-left:12px; font-size:20px;} .list-style01 > li::before{top:11px;} .list-style02 > li{padding-left:12px; font-size:20px;} .list-style02 > li::before{} .list-box01{padding:30px; margin:15px 0 30px;} .list-box01 li{ line-height:1.5;} .list-box01 li::before{top:11px;} .title-style01-span{margin:20px 0 0px;} } @media screen and (max-width:1000px){ .title-style01{margin-bottom:10px; font-size:22px; padding-left:18px;} .title-style01::before{width:14px; height:14px;} .list-style01 > li{padding-left: 10px; font-size:18px;} .list-style02 > li{padding-left:10px; font-size:18px;} .list-style02 > li::before{} .list-box01{padding:25px;} .list-box01 li{padding-left:16px; font-size:18px; line-height:1.5;} .list-box01 li::before{top:9px;} .sub-contents .title-style01-span.title-style01-span-fe{margin:0 0 0;} .title-style01-span{font-size:20px; margin:15px 0 0px;} } @media screen and (max-width:800px){ .title-style01{font-size:18px; padding-left:16px;} .title-style01::before{width:12px; height:12px; top:7px; border:3px solid #0E43AF;} .list-box01{padding:20px;} .list-style01 > li{font-size:14px; padding-left:10px;} .list-style01 > li::before{width:3px; height:3px;} .list-style02 > li{padding-left:10px; font-size:14px;} .list-style02 > li::before{top:9px;} .list-box01 li{padding-left:10px; font-size:14px;} .list-box01 li::before{width:3px; height:3px;} .title-style01-span{font-size:16px;} } /*ceo*/ .ceo-con{height:1620px;} .ceo-con .ceo-tax-box{padding:60px 60px 0; position:relative; top:-150px; left:50%; transform:translateX(-50%); width:1400px; font-size:22px; word-break: keep-all; background:#fff;} .ceo-con .ceo-tax-box .title{margin-bottom:40px; font-size:34px; font-weight:700;} .ceo-con .ceo-tax-box .title span{display:block;} .ceo-con .ceo-tax-box > div p.greeting{margin-bottom:40px;} .ceo-con .ceo-tax-box .list-box01{margin:25px 0 40px;} .ceo-con .ceo-tax-box .name{margin-top:60px; text-align:right;} @media screen and (max-width:1700px){ .ceo-con .ceo-tax-box{padding:40px 40px 0; width:90%;} } @media screen and (max-width:1500px){ .ceo-con{height:1690px;} } @media screen and (max-width:1400px){ .ceo-con{height:1600px;} } @media screen and (max-width:1320px){ .ceo-con{height:1650px;} } @media screen and (max-width:1260px){ .ceo-con{height:1750px;} } @media screen and (max-width:1200px){ .ceo-con{height:1560px;} .ceo-con .ceo-tax-box .list-box01{margin:20px 0 30px;} .ceo-con .ceo-tax-box{padding:30px 30px 0; top:-100px;} .ceo-con .ceo-tax-box .title{margin-bottom:25px; font-size:28px;} .ceo-con .ceo-tax-box > div p{font-size:20px;} .ceo-con .ceo-tax-box > div p.greeting{margin-bottom:30px;} } @media screen and (max-width:1000px){ .ceo-con{height:1300px;} .ceo-con .ceo-tax-box .list-box01{margin:15px 0 20px;} .ceo-con .ceo-tax-box .title{font-size:22px; margin-bottom:20px;} .ceo-con .ceo-tax-box > div p{font-size:18px;} .ceo-con .ceo-tax-box > div p.greeting{margin-bottom:20px;} } @media screen and (max-width:800px){ .ceo-con{height:inherit;} .ceo-con .ceo-tax-box{top:inherit; width:100%; padding:15px 10px 0;} .ceo-con .ceo-tax-box .list-box01{margin:10px 0 20px;} .ceo-con .ceo-tax-box .title{font-size:18px;} .ceo-con .ceo-tax-box > div p{font-size:14px;} .ceo-con .ceo-tax-box .name{margin-top:30px;} .ceo-con .ceo-tax-box .name img{width:130px; height:auto;} } @media screen and (max-width:620px){ .ceo-con .ceo-tax-box .title{font-size:16px;} .ceo-con .ceo-tax-box .title span{display:inline-block;} } /*연혁*/ .sub-contents.history-con{padding:100px 0; height:inherit; min-height:inherit;} .history{width: 1600px; margin: auto 0 auto auto;} /*연혁*/ .sub-contents.history-con{width:inherit; } .histroy_wrap{position:relative; margin-bottom:160px;} .histroy_wrap .history_box{/* width:1500px; */padding-top:130px;/* margin:auto; *//* font-size:0px; */display: flex;justify-content: space-between;} .histroy_wrap .history_box .history_title{display: inline-block; position: relative; z-index: 1; margin: 10px 60px 0px 70px; font-size: 44px; color: #fff; letter-spacing: -0.035em; line-height: 70px; font-weight: 100; vertical-align: top;} .histroy_wrap .history_box .history_title .title_weight1{font-weight:500;} .histroy_wrap .history_box .history_title .title_weight2{font-weight:700;} .histroy_wrap .history_box .history_list{display:inline-block;position:relative;padding: 100px 0px 100px 65px;background-color:#fff;border-radius:105px 0px 0px 105px;width: 980px;} .histroy_wrap .history_box .history_list:before{content:'';display:block;position:absolute;top:0px;left:0px; width:inherit;/* width:calc(100vw - 742px); */height:100%;background-color:#fff;box-shadow:-12px -68px 109px 0px rgba(148,165,186,0.4);border-radius:105px 0px 0px 105px;} .histroy_wrap .history_box .history_list:after{content:''; display:block;position:absolute;bottom:0px;left:102px;width:1px;height:100%;background-color:#8f8f90;opacity:0.2;} .histroy_wrap .history_box .history_list .history_item{margin-top:42px;} .histroy_wrap .history_box .history_list .history_item:first-child{margin-top:0px;} .histroy_wrap .history_box .history_list .history_item .history_year{display:inline-block;position:relative;z-index:1;margin-top:60px;margin-right:44px;padding:8px 0px;background-color:#fff;font-size:30px;color:#666;letter-spacing:-0.035em;line-height:30px;font-weight:800;vertical-align:top;} .histroy_wrap .history_box .history_list .history_item:first-child .history_year{color:#0E43AF;} .histroy_wrap .history_box .history_list .history_item .history_year::after{content:'';} .histroy_wrap .history_box .history_list .history_item:first-child .history_year::before{content:''; display:block;position:absolute;bottom:0px;left:0px;width:100%;height:3px;background-color:#0E43AF;} .histroy_wrap .history_box .history_list .history_item .history_item_box{display:inline-block;position:relative;width:631px;padding:33px 0px 33px 45px;border:5px solid rgba(230, 238, 245, 0.8);border-radius:37px;} .histroy_wrap .history_box .history_list .history_item .history_item_box::before{content:''; display:block;position:absolute;top:68px;left:-7px;width:10px;height:20px;background-image:url(/_next/static/media/cts89_icon_03.50a41a40.png);} .histroy_wrap .history_box .history_list .history_item:first-child .history_item_box::before{content:''; background-image:url(/_next/static/media/cts89_icon_02.c9fa9bef.png);} .histroy_wrap .history_box .history_list .history_item .history_item_box li{font-size:16px;color:#666;line-height:30px;} .histroy_wrap .history_box .history_list .history_item .history_item_box li strong{margin-right:4px;} .histroy_wrap .history_bg{position: absolute;top: 0px;z-index: -1;width: calc(100%);height: 656px;background-image: url(/_next/static/media/history_bg.51d711de.jpg);background-repeat: no-repeat;background-size: cover;border-radius: 120px 0px 0px 120px;} @media all and (max-width: 1600px){ .history{width:100%;} .histroy_wrap .history_box .history_title{margin:9px 30px 0px 100px;font-size:50px;line-height:64px;} .histroy_wrap .history_box .history_list{padding:105px 0px 103px 40px;} .histroy_wrap .history_box .history_list:after{left:75px;} .histroy_wrap .history_box .history_list .history_item .history_year{margin-right:20px;} .histroy_wrap .history_box .history_list .history_item .history_item_box{width:540px;} .histroy_wrap .history_bg{left:60px; width:calc(100vw - 77px)} } @media all and (max-width: 1580px){ .histroy_wrap .history_box .history_title{font-size:48px;} .histroy_wrap .history_box .history_list{width:880px;} } @media all and (max-width: 1460px){ .sub-contents.history-con{padding:100px 0;} .histroy_wrap .history_box .history_title{margin:9px 25px 0px 150px;font-size:40px;line-height:50px;} .histroy_wrap .history_bg{width:calc(100vw - 77px);} .histroy_wrap .history_box .history_list{width:780px;} } @media all and (max-width: 1400px){ } @media screen and (max-width: 1330px){ .sub-contents.history-con{padding:80px 0;} .histroy_wrap{margin-bottom:0;} .histroy_wrap .history_box{width: 100%; display: flex; margin: 0 auto; padding: 70px 150px; justify-content: center; flex-direction: column;} .histroy_wrap .history_box .history_title{margin:0 0 30px 0;} .histroy_wrap .history_box .history_title::before{left:-30px; } .histroy_wrap .history_box .history_list{padding:35px 25px 35px 25px;box-shadow:-12px -68px 109px 0px rgba(148,165,186,0.4);border-radius:25px; width:100%;} .histroy_wrap .history_box .history_list::before{border-radius:55px 0px 0px 55px ; box-shadow:none; width:0;} .histroy_wrap .history_box .history_list:after{display:none;} .histroy_wrap .history_box .history_list .history_item .history_year{margin-top:55px;font-size:24px;} .histroy_wrap .history_box .history_list .history_item .history_item_box{width:calc(100% - 83px);padding:25px 0px 25px 25px;} .histroy_wrap .history_box .history_list .history_item .history_item_box:before{top:62px;} .histroy_wrap .history_box .history_list .history_item .history_item_box li{font-size:15px;} .histroy_wrap .history_bg{height:100%;width:100%; left:0; border-radius:30px;} } @media screen and (max-width: 1000px){ .sub-contents.history-con{padding:50px 0;} .histroy_wrap .history_box{padding:60px 100px;} .histroy_wrap .history_box .history_title{font-size:36px; text-align:left;} .histroy_wrap .history_box .history_list{margin-bottom:20px;padding:40px 30px;border-radius:35px;} .histroy_wrap .history_box .history_list:before{width:auto;} .histroy_wrap .history_box .history_list:after{left:57px;height:623px;} .histroy_wrap .history_box .history_list .history_item{margin-top:30px;} .histroy_wrap .history_box .history_list .history_item .history_year{margin-top:49px;} .histroy_wrap .history_box .history_list .history_item .history_item_box{padding:20px;border-radius:25px;} .histroy_wrap .history_box .history_list .history_item .history_item_box:before{top:56px;} .histroy_wrap .history_box .history_list .history_item .history_item_box li{font-size:14px;text-align:left;} } @media screen and (max-width:800px){ .histroy_wrap .history_box{padding:40px 40px;} .histroy_wrap .history_box .history_title{font-size:24px; line-height:1.5;} .histroy_wrap .history_box .history_list{padding:35px 25px;} .histroy_wrap .history_box .history_list .history_item .history_year{font-size:20px;} } @media screen and (max-width: 640px){ .histroy_wrap .history_box .history_title{margin:0 0 20px 0; font-size:24px;} .histroy_wrap .history_box .history_title:before{left:-20px;width:16px;height:18px;background-size:cover;} .histroy_wrap .history_box .history_list{text-align:left;margin-bottom:12px;padding:30px 20px;} .histroy_wrap .history_box .history_list:after{display:none;} .histroy_wrap .history_box .history_list .history_item{margin-top:20px;} .histroy_wrap .history_box .history_list .history_item .history_year{margin-top:0px;} .histroy_wrap .history_box .history_list .history_item:first-child .history_year:before{display:none;} .histroy_wrap .history_box .history_list .history_item .history_item_box{width:100%;} .histroy_wrap .history_box .history_list .history_item .history_item_box:before{top:19px;} .histroy_wrap .history_box .history_list .history_item .history_item_box li{line-height:18px;word-break:keep-all;} .histroy_wrap .history_box .history_list .history_item .history_item_box li+li{margin-top:8px;} .histroy_wrap .history_bg{border-radius:40px 0px 0px 40px;} } /*조직도*/ .org_wrap [class*="org_cap0"]{width:220px;height:220px;color:#fff;background:linear-gradient(139deg, rgba(47,91,193,1) 0%, rgba(38,74,159,1) 100%); display:inline-block;border-radius:50%;font-size:25px;font-weight:600;text-align:center;line-height:15px; border:15px solid #E9EEF5;} .org_wrap .org_cap01{background:linear-gradient(139deg, rgba(47, 91, 193, 1) 0%, rgba(4, 140, 110, 1) 100%)} .org_wrap .org_cap02{background:linear-gradient(142deg, rgba(31,80,193,1) 0%, rgba(1,146,190,1) 100%);border-color:#D7EDF7;margin-bottom:50px} .org_wrap .org_cap03{background:linear-gradient(142deg, rgba(8, 150, 106, 1) 0%, rgba(0, 126, 116, 1) 100%);border-color:#DEF1EB;margin-bottom:69px} .org_wrap a:hover, .org_wrap a:focus{text-decoration:underline} /*type*/ .org_wrap{position:relative;} .org_wrap::before{content:'';position:absolute;left:50%;top:0;height:966px;background:#CECECE;width:1px;z-index:-1} .org_wrap [class*="type"]{ height:52px;color:#fff;text-align:center;display:flex;display:-ms-flexbox;align-items:center;justify-content:center; font-weight:500;word-break:break-word;position:relative} .org_wrap .type1{background:#153074;border:1px solid #153074} .org_wrap .type2{border:2px solid #16398B;background:#fff;color:#16398B} .org_wrap .type3{border:1px solid #3261BD;background:#3261BD} .org_wrap .type4{background:#F5F5F5;color:#313131;} .org_wrap .type5{border:1px solid #2F5BC1;background:#E9EEF9;width:1550px;color:#16398B} .org_wrap .type6{margin:7px 0; background:#F2F2F2;width:100%;color:#434343; } .org_wrap .type7{background:#ECF4EE;width:100%;color:#008E6F; border:1px solid #008E6F} .org_wrap .org_A{text-align: center; position: relative; padding-bottom: 125px; display: flex; align-items: center; justify-content: center;} .org_wrap .org_A .org_cap01{display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1.4;} .org_wrap .org_A .org_cap01 span{font-size:22px; font-weight:400;} .org_wrap .org_A [class*="type"]{width:1970px} .org_wrap .org_C{padding:0 0 120px; width:50%;margin-left:auto} .org_wrap .org_C [class*="type"]{width:265px;position:relative} .org_wrap .org_C > ul{display:flex;display:-ms-flexbox;justify-content:space-around; position:relative} .org_wrap .org_C > ul > li{vertical-align:middle;position:relative} .org_wrap .org_C > ul:after{content:'';background:#CECECE;height:1px;top:26px;width:50%;left:0;position:absolute;z-index:-1} .org_wrap .org_C > ul li.type:last-child:after{width:50%;height:35px;background:#fff;position:absolute;bottom:calc(100% + 1px);content:'';right:-1px} .org_wrap .org_C > ul > li + li{margin-left:10px} .org_wrap .org_C > ul > li .error_txt{position:absolute;left:0;top:100%;margin-top:20px; width:260px;z-index:1} .org_wrap .org_B{text-align: center; position: relative; padding-bottom: 125px; display: flex; align-items: center; justify-content: center;} .org_wrap .org_B .org_cap02{display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.4;} .org_wrap .org_B .org_cap02 span{font-size:22px; font-weight:400;} .org_wrap .org_B .inner{display:flex;display:-ms-flexbox;padding-top:34px} .org_wrap .org_B .inner > *{width:50%;display:flex;display:-ms-flexbox} .org_wrap .org_B .org_D01{justify-content:flex-end;padding-right:44px} .org_wrap .org_B .org_D02{justify-content:flex-start;padding-left:44px} .org_wrap .org_B .inner > * > * + *{margin-left:18px} .org_wrap .org_E > ul{display:flex;display:-ms-flexbox;-ms-text-justify:space-between;justify-content:space-between} .org_wrap .org_E > ul > li{width:calc(16.666667% - 15px)} .org_wrap .org_E > ul > li + li {margin-left:8px} .org_wrap .org_E .type1{margin-bottom:10px} .org_wrap .org_E > ul > li > ul > li + li{margin-top:.60px} .org_wrap .org_B .type5:before, .org_wrap .org_E .type1:before, .org_wrap .org_F li:nth-child(-n+7) .type7:before{height:340px;bottom:100%;position:absolute;right:50%;content:'';width:calc(100% + 20px);border:1px solid #cecece;border-bottom:0 none;border-left:0 none;z-index:-1} .org_wrap .org_B .org_D01 .type5:first-child:before, .org_wrap .org_E li:first-child .type1:before, .org_wrap .org_F li:first-child .type7:before{border-top:0 none} .org_wrap .org_B .org_D02 .type5:first-child:before{width:calc(100% + 120)} .org_wrap .org_E{padding-top:46px} .org_wrap .org_E .type1:before{height:46px} @media screen and (max-width:1700px){ } @media screen and (max-width:1400px){ .org_wrap .org_A{padding-bottom:95px;} .org_wrap .org_C{width:100%;} .org_wrap .org_C > ul{width:100%;} .org_wrap .org_C > ul > li{width:100%;} .org_wrap .org_C [class*="type"]{width:100%;} .org_wrap .org_C > ul:after{display:none;} .org_wrap .org_E{padding-top:0;} .org_wrap .org_E > ul{display:block;} .org_wrap .org_E > ul > li{width:100%;} .org_wrap .org_E .type1:before{display:none;} .org_wrap .org_E > ul > li + li{margin-left:0;} } @media screen and (max-width:1200px){ .org_wrap [class*="org_cap0"]{width:210px; height:210px; font-size:20px; line-height:1.5 !important;} .org_wrap [class*="org_cap1"]{font-size:18px;} .org_wrap::before{height:830px;} .org_wrap .org_B{padding-bottom:40px;} .org_wrap .org_C{padding:0 0 100px;} } @media screen and (max-width:767px){ .org_wrap [class*="type"]{height:46px;} .org_wrap [class*="org_cap0"]{width:180px; height:180px;} .org_wrap::before{height:580px;} .org_wrap .org_A{padding-bottom:40px;} .org_wrap [class*="org_cap0"]{font-size:18px;} .org_wrap .org_A .org_cap01 span{font-size:16px;} .org_wrap .org_B .org_cap02{margin-bottom:0;} .org_wrap .org_B .org_cap02 span{font-size:16px;} .org_wrap .org_C{padding:0 0 40px;} .org_wrap .org_C > ul > li , .org_wrap .org_E > ul > li{font-size:14px;} } @media screen and (max-width:520px){ .org_wrap [class*="org_cap0"]{width:160px; height:160px; font-size:16px;} .org_wrap .org_A .org_cap01 span{font-size:15px;} .org_wrap .org_B .org_cap02 span{font-size:15px;} } /*인증현황*/ .technology_list{display:flex; flex-wrap: wrap;} .technology_list li{margin:0 20px 30px 0; padding: 45px 0; display:inline-block; width:calc(25% - 15px); text-align:center; border: 1px solid #ddd;} .technology_list li:nth-child(4n){margin-right:0;} .technology_list li img:hover{box-shadow: 0 2px 5px rgb(0 0 0 / 20%);} .technology_list li .certification-title{margin:15px 10px 0; display: inline-block; font-size: 20px;} .technology_list .module {position: relative;} .technology_list .subject {position: absolute; z-index: 2; top: 30px; left: 30px; font-size: 20px; color: #fff;} .technology_list .module {position: relative; z-index: 0; overflow: hidden} .technology_list .module .md-cont {overflow: hidden} .technology_list .module .md-cont>a, .technology_list .module .md-cont>img {display: block; transition: transform 1200ms ease 0s} .technology_list .module .md-cont>a:after, .technology_list .module .md-cont>img:after { content: ''; display: block; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0; transition: all .3s linear} /* 호버시 pic의 확대 */ .technology_list .module:hover .md-cont>a, .technology_list .module:hover .md-cont>img { animation-delay: 0 !important; transform: scale(1.1, 1.1)} /*제품소개*/ .technology_list.product_list li{margin:0 20px 50px 0; padding:0; border:none; width:calc(25% - 20px);} .technology_list.product_list li .module{padding:20px 0; border-top:1px solid #000; border-bottom:1px solid #ddd;} .technology_list.product_list .module .md-cont > a{} .technology_list.product_list .module .md-cont > a img{} .technology_list.product_list li .certification-title{display: block; text-align:left; text-decoration:none;} @media screen and (max-width:1200px){ .technology_list li:nth-child(4n){margin-right:20px;} .technology_list li{width:calc(33.33% - 14px); margin-right:20px;} .technology_list li:nth-child(3n){margin-right:0;} /*제품소개*/ .technology_list.product_list li:nth-child(4n){margin-right:20px;} .technology_list.product_list li{width:calc(33.33% - 14px); margin-right:20px;} .technology_list.product_list li:nth-child(3n){margin-right:0;} } @media screen and (max-width:1000px){ .technology_list li .certification-title{font-size:18px;} } @media screen and (max-width:960px){ .technology_list li:nth-child(3n){margin-right:10px;} .technology_list li{padding:25px 0; margin-right:10px; margin-bottom:15px; width:calc(50% - 5px);} .technology_list li:nth-child(2n){margin-right:0;} .technology_list li:nth-child(1){margin-right:10px;} /* 호버시 pic의 확대 */ .technology_list.product_list li .certification-title{margin:10px 0px 0} .technology_list.product_list li:nth-child(3n){margin-right:10px;} .technology_list.product_list li{padding:25px 0; margin-right:10px; margin-bottom:15px; width:calc(50% - 5px);} .technology_list.product_list li:nth-child(2n){margin-right:0;} .technology_list.product_list li:nth-child(1){margin-right:10px;} .technology_list.product_list li{padding:10px 0;} .technology_list .module:hover .md-cont>a, .technology_list .module:hover .md-cont>img { animation-delay:none !important; transform: none} } @media screen and (max-width:1000px){ .technology_list li .certification-title{font-size:16px;} } /*오시는길*/ .sub-contents.map-con{ min-height:auto; padding:130px 0 0;} .map-box .hide{display:none;} .map-box .map-info{position:relative; top:-170px; margin:0 80px; padding:80px; background:#0E43AF; color:#fff; z-index:2;} .map-box .map-info .title{margin-bottom:30px; font-size:44px; font-weight:700;} .map-box .map-info .map-flex{display:flex; justify-content:space-between;} .map-box .map-info .company-info{} .map-box .map-info .company-info p{padding-left:32px; position:relative;} .map-box .map-info .company-info p strong{margin-right:8px;} .map-box .map-info .company-info p::after{content:''; display:block; position:absolute; top:0; left:0; width:26px; height:26px; top:50%; left:0; transform:translateY(-50%); background-position:center center; background-repeat:no-repeat; background-size:contain;} .map-box .map-info .company-info > p{margin-bottom:12px;} .map-box .map-info .company-info > p::after{background-image:url(/_next/static/media/location_icon01.65a961a7.png);} .map-box .map-info .company-info div{display:flex;} .map-box .map-info .company-info div p:first-child{margin-right:30px;} .map-box .map-info .company-info div p:first-child::after{background-image:url(/_next/static/media/location_icon02.66d26c35.png);} .map-box .map-info .company-info div p:last-child::after{background-image:url(/_next/static/media/location_icon03.96945866.png);} .map-box .map-info .map-flex .r-link{display:flex;} .map-box .map-info .map-flex .r-link a{padding:30px; display:block; width:240px; height:150px; background:#2958BB url(/_next/static/media/location_icon04.3d38e849.svg) bottom 30px right 30px no-repeat;} .map-box .map-info .map-flex .r-link a:first-child{margin-right:20px;} @media screen and (max-width:1700px){ } @media screen and (max-width:1520px){ .sub-contents.map-con .sub-inner{width:100%; padding:0 0 100px 0;} .map-box .map-info .map-flex{flex-direction:column;} .map-box .map-info .map-flex .r-link a{width:100%; height:110px;} .map-box .map-info .map-flex .l-info{margin-bottom:20px;} .root_daum_roughmap .wrap_map{height:480px !important;} .map-box .map-info{margin:0; top:0;} } @media screen and (max-width:1500px){ .sub-contents.map-con .sub-inner{padding:0 0 100px 0px;} } @media screen and (max-width:1420px){ .sub-contents.map-con{width: 100%; padding: 100px 30px 0;} .map-box .map-info{margin-bottom:30px; padding:40px 35px; top:-230px;} .map-box .map-info .title{font-size:34px; margin-bottom:25px;} .root_daum_roughmap .wrap_map{height:700px !important;} .sub-contents.map-con .sub-inner{ height:214px; width:auto;} } @media screen and (max-width:1200px){ .sub-contents.map-con{padding:80px 20px 0;} .sub-contents.map-con .sub-inner{padding:0; height:240px;} .map-box .map-info{margin-bottom:0; top:-175px;} .map-box .map-info .title{margin-bottom:20px; font-size:28px;} } @media screen and (max-width:1024px){ .sub-contents.map-con{padding:50px 20px 0;} } @media screen and (max-width:1000px){ .map-box .map-info{top:-135px;} .map-box .map-info .title{font-size:22px;} .map-box .map-info{padding:20px;} } @media screen and (max-width:800px){ .map-box .map-info{position:inherit;} .map-box .map-info .title{font-size:18px; margin-bottom:8px;} .map-box .map-info .company-info p{padding-left:28px; font-size:14px;} .map-box .map-info .company-info p::after{background-size:20px; top:10px;} .map-box .map-info .company-info > p::after{} .map-box .map-info .map-flex .r-link a{padding:15px; height:90px; background:#2958BB url(/_next/static/media/location_icon04.3d38e849.svg) bottom 15px right 15px no-repeat;} .map-box .map-info .map-flex .r-link a:first-child{margin-right:10px;} .map-box .map-info .map-flex .r-link a span{font-size:14px;} .map-box .map-info .map-flex .r-link a span br{display:none;} .map-box .map-info .map-flex .l-info{margin-bottom:15px;} .sub-contents.map-con .sub-inner{padding:0;} .sub-contents.map-con .sub-inner{height:290px;} .root_daum_roughmap .wrap_map{height:360px !important;} } @media screen and (max-width:737px){ .sub-contents.map-con{padding:25px 10px 0;} } @media screen and (max-width:620px){ .map-box .map-info .title{font-size:16px;} } @media screen and (max-width:480px){ .map-box .map-info .company-info div{flex-direction: column;} .map-box .map-info .company-info p::after{background-size:17px;} .map-box .map-info .company-info p{padding-left:26px;} .map-box .map-info .company-info > p{margin-bottom:8px;} .map-box .map-info .company-info div p:first-child{margin-right:0; margin-bottom:6px;} .sub-contents.map-con .sub-inner{height:320px;} } @media screen and (max-width:350px){ .map-box .map-info .map-flex .r-link{flex-direction:column;} .map-box .map-info .map-flex .r-link a{width:100%;} .map-box .map-info .map-flex .r-link a:first-child{margin-bottom:8px; margin-right:0;} .sub-contents.map-con .sub-inner{height:400px;} } .table-caption{text-align:right;} table.st01 {width: 100%;} table.st01 thead tr th {width: 50px;font-size:22px; background:#F8F8F8; color: #0E43AF; font-weight:500; border-bottom: 1px solid #f5f5f5;padding:15px 0; border-top:1px solid #0E43AF; border-right: 1px solid #ccc;} table.st01 thead tr th:last-child{border-right:0;} table.st01 thead tr th.br-th{border-right: 1px solid #f5f5f5;} table.st01 tbody tr td {vertical-align: middle; text-align: center; border-bottom: 1px solid #ccc; padding:15px 0; font-size:22px; border-right:1px solid #ccc;} table.st01 tbody tr td:last-child{ border-right:0;} table.st01 tbody tr td.bg {background-color:#f5f5f5;} @media screen and (max-width:1200px){ table.st01 thead tr th{font-size:20px;} table.st01 tbody tr th {font-size:20px;} table.st01 tbody tr td {font-size:20px;} } @media screen and (max-width:1000px){ table.st01 tbody tr th , table.st01 thead tr th{font-size:18px; padding:10px 0} table.st01 tbody tr td {font-size:18px; padding:10px 0} } @media screen and (max-width:800px){ table.st01 tbody tr th , table.st01 thead tr th{font-size:14px;} table.st01 tbody tr td {font-size:14px;} } /*오시는길 2*/ .mapBox {margin-bottom:70px; padding-bottom:60px; border-bottom:1px dashed #95a1ab;} .mapBox .root_daum_roughmap .wrap_map{height:460px;} .mapBox:last-child {margin-bottom:0; border-bottom:0;} .mapBox::after {content:''; display:block; clear:both;} .mapBox > h3 {margin-bottom:30px; color:#191919; font-weight:700; font-size:42px; line-height:1.3; text-align:center;} .mapBox > h3 > span {color:#0E43AF;} .mapBox .mapInner {} .mapBox .mapInner .mapArea {position:relative; height:460px; background-color:#f9f9f9; transition:height 0.2s linear; z-index:2;} .mapBox .mapInner .mapArea .root_daum_roughmap {width:100%; height:100%;} .mapBox .mapInner .mapArea .wrap_map {height:100%;} .mapBox .mapInner .mapArea .wrap_map .map_border.border2 {display:block !important;} /* 구글지도 .mapBox .mapInner .mapArea > iframe {width:100%; height:100%;} .mapBox .mapInner .mapArea > iframe .gmnoprint, .mapBox .mapInner .mapArea > iframe .gm-inset-map {display:none !important;}*/ .mapBox .mapInner .mapInfobox {position:relative; margin-top:-80px; padding:0 8%; z-index:5;} .mapBox .mapInner .mapInfobox .mapinfoInner {position:relative; display:flex; justify-content:center; flex-direction:column; margin:0 auto; padding:40px 300px 40px 40px; min-height:160px; width:100%; background-color:#fff; box-shadow:8px 10px 40px 0 rgba(0,0,0,0.14); border-radius:10px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo {} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li {position:relative; padding-left:75px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit {position:absolute; left:0; top:0; color:#191919; font-weight:700;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit > span {display:block; position:relative; padding-left:15px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit > span::before {content:''; position:absolute; left:0; top:10px; width:5px; height:5px; background-color:#0E43AF;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink {position:absolute; right:40px; top:50%; width:230px; transform:translateY(-50%);} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a {position:relative; display:flex; align-items:center; padding:0 20px 0 30px; width:100%; min-height:60px; color:#fff; background-color:#0E43AF; text-decoration:none; border-radius:5px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a > span {position:relative; display:block; padding-right:50px; width:100%;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a > span::after {content:''; display:block; position:absolute; right:20px; top:50%; width:22px; height:10px; background:url(/_next/static/media/img_more_arrow.4fb7438c.svg) right bottom no-repeat; transform:translateY(-50%);} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a:hover > span::after, .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a:focus > span::after {right:0; width:42px; transition:right 0.2s linear, width 0.2s linear;} /*media query*/ @media screen and (max-width:1340px) { .mapBox {margin-left:20px; margin-right:20px;} .mapBox > h3 {font-size:38px;} .mapBox .mapInner .mapArea {height:500px;} .mapBox .mapInner .mapInfobox {padding:0 4%;} } @media screen and (max-width:1200px) { } @media screen and (max-width:1024px) { .mapBox {margin-bottom:50px; padding-top:0;} .mapBox > h3{font-size:30px;} .mapBox .mapInner .mapArea {height:400px;} .mapBox .mapInner .mapInfobox {margin-top:-40px;} .mapBox .mapInner .mapInfobox .mapinfoInner {padding:30px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo {margin-bottom:20px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink {position:static; right:auto; top:auto; width:100%; transform:translateY(0);} .mapBox .mapInner .mapInfobox .mapinfoInner .mapLink > a {min-height:50px;} } @media screen and (max-width:800px) { .mapBox {margin-left:0; margin-right:0; padding-top:0;} .mapBox > h3 {margin-bottom:20px; font-size:30px;} .mapBox .mapInner .mapArea {height:320px;} .mapBox .mapInner .mapInfobox {padding:0 10px;} .mapBox .mapInner .mapInfobox .mapinfoInner {padding:20px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li .tit > span::before {top:9px;} } @media screen and (max-width:640px) { .mapBox > h3 {font-size:18px; margin-bottom:10px;} .mapBox .mapInner .mapInfobox .mapinfoInner .mapInfo > li {padding-left:60px;} } @media screen and (max-width:480px) { } @media screen and (max-width:360px) { } /*선박용선*/ .pc-s-inner{margin-bottom:80px;} .img_menubox{position:relative;} .img_menubox .img_menu {font-size: 0;} .img_menubox .img_menu::after{content:''; display:block; clear:both;} .img_menubox .img_menu>li {display: inline-block; vertical-align: middle; float:left; width:calc(25% - 15px); margin-right: 20px; transition: 0.3s; overflow: hidden; border-radius:30px; position: relative;} .img_menubox .img_menu>li::after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: #000; opacity: 0; z-index: -5;} .img_menubox .img_menu>li:last-child {margin-right: 0;} .img_menubox .img_menu>li > div {display: block;} .img_menubox .img_menu>li img {width:100%; height:auto; border-radius: 30px;} .img_txt {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;} .img_txt {padding: 35px 30px 35px; text-align: left; z-index: 9; transition: 0.5s ease-in;} .img_txt>div {position: relative; width: 100%; height: 100%;} .img_txt .top_txt {font-size: 24px; font-weight: 600; color: rgb(255, 255, 255); position: relative; display: inline-block; line-height:1.4; text-transform: uppercase; transition: 0.3s;} .img_txt .top_txt:before {position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; content: ''; background: #fff; opacity: 0; transition: 0.3s;} .img_txt .bot_txt {position: absolute; left: 0; bottom: 0; font-size: 26px; line-height: 1.47; font-weight: 500; letter-spacing:-1px; display: inline-block; color: rgb(255, 255, 255); opacity: 0; transition: 0.5s ease-in;} .img_txt .bot_txt .block{display:block; font-size:16px;} @media screen and (max-width:1500px){ .pc-s-inner{margin-bottom:60px;} .chartering-box{padding:80px 50px;} } @media screen and (max-width:1200px){ .pc-s-inner{margin-bottom:30px;} .img_menubox .img_menu>li{margin-right:14px; margin-bottom:14px; width:calc(50% - 7px); height:250px;} .img_menubox .img_menu>li:last-child{margin-bottom:0;} .img_menubox .img_menu>li img{height:250px; width:100%;} .img_menubox .img_menu>li:nth-child(2n){margin-right:0;} .img_txt{padding:30px 25px;} .img_txt .top_txt{font-size:20px;} .chartering-box{padding:50px 30px;} } @media screen and (max-width:767px){ .pc-s-inner{margin-bottom:20px;} .img_menubox .img_menu>li{height:200px;} .img_menubox .img_menu>li img{height:200px;} .img_txt{padding:20px 20px;} .img_menubox .img_menu>li:hover {transform: scale(1.0); background:none;} .img_txt>div:hover{background:none;} .img_menubox .img_menu>li:hover::after{background:none;} .img_menubox .img_menu>li:hover .top_txt , .img_menubox .img_menu>li .top_txt{font-size:18px;} .img_menubox .img_menu>li:hover .img_txt .bot_txt{font-size:15px;} .img_menubox .img_menu>li:hover .img_txt{background:none;} .img_txt .bot_txt{opacity:1; font-size:15px;} .img_menubox .img_menu>li .img_txt .bot_txt, .img_menubox .img_menu>li .img_txt .top_txt:before{opacity:1;} .img_menubox .img_menu>li:nth-child(3) , .img_menubox .img_menu>li:nth-child(4) , .img_menubox .img_menu>li:nth-child(5){margin-top:0;} } @media screen and (max-width:640px){ .img_menubox .img_menu>li{margin:0 0 10px 0; float: inherit; width:100%;} .img_menubox .img_menu>li:last-child{margin-bottom:0;} } @media screen and (max-width:560px){ .img_menubox .img_menu>li{height:160px;} .img_menubox .img_menu>li img{height:160px;} } /****** 서비스 선박용선 ******/ .service-box{font-size:22px;} .service-box .sub-con-tax{margin-bottom:30px;} .chartering-box{padding:100px 0; text-align:center; border:1px solid #ddd;} .chartering-box .m_img{display:none;} /*step*/ .pro_box{margin-top:80px; position:relative; } .pro_box .pro_iner{position:relative; width:100%; display:flex; flex-wrap:wrap ;text-align:center;} .pro_box .pro_iner::before{content:''; margin-top:-17px; display:block; position:absolute; top:50%; width:100%; height:35px; background-color:#f5f5f5; border-radius:30px; z-index:-1;} .pro_box .pro_iner::after{content:''; display:block; position:absolute; top:50%; left:50%; transform:translateX(-50%); width:calc(100% - 182px); height:1px; background-color:#ddd;} .pro_box .pro_iner li{position:relative; display:flex; align-self:flex-start; align-items:center; justify-content:center; flex-direction:column; width:16.6666%; z-index:1;} .pro_box .pro_iner li:nth-child(odd) {margin-bottom:18px;} .pro_box .pro_iner li:nth-child(even) {margin-top:159px;} .pro_box .pro_iner li:before{content:''; display:block; position:absolute; top:calc(100% + 39px); left:50%; width:16px; height:16px; transform:translate(-50% , -50%); border:1px solid #0E43AF; border-radius:50%; background-color:#efefef;} .pro_box .pro_iner li:nth-child(even):before{top:-44px; transform:translate(-50%, -2%); border-color:#0e92af;} .pro_box .pro_iner li:after{content:''; display:block; position:absolute; top:calc(100% + 36px); left:50%; width:7px; height:7px; transform:translateX(-50%); border-radius:50%; background-color:#0E43AF; z-index:1;} .pro_box .pro_iner li:nth-child(even):after{top:-40px; background-color:#0e92af;} .pro_box .pro_iner li .step {margin:0 auto; position:relative; width:110px; height:36px; line-height:36px; order:1; color:#fff; font-size:16px; font-weight:500; background-color:#0e92af;} .pro_box .pro_iner li .step::before{content:''; position:absolute; display:block; top:100%; width:1px; height:31px; left:50%; transform:translateX(-50%); background-color:#0E43AF;} .pro_box .pro_iner li:nth-child(even) .step::before{height:30px;} .pro_box .pro_iner li:nth-child(even) .step::before{top:auto; bottom:100%; background-color:#0e92af;} .pro_box .pro_iner li:nth-child(odd) .step{order:3; background-color:#0E43AF;} .pro_box .pro_iner li .txt {position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; order:2; letter-spacing: -1.6px;} .pro_box .pro_iner li:nth-child(odd) .txt {margin-bottom:15px;} .pro_box .pro_iner li:nth-child(even) .txt {margin-top:15px;} .design_process01 {display:none;} .design_process01{position:relative;} .design_process01::before{content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:30px; height:100%; background-color:#f5f5f5; border-radius:30px; z-index:-1;} .design_process01 .pro_m_box{padding-top:30px; position:relative;} .design_process01 .pro_m_box::before{content:''; display:block; position:absolute; top:35px; left:50%; transform:translateX(-50%); width:1px; height:calc(100% - 70px); background-color:#ddd;} .design_process01 .pro_m_box li{padding:15px 0; display:inline-block; width:50%;} .design_process01 .pro_m_box li .step{/*float:left;*/} .design_process01 .pro_m_box li .txt{/*float:left;*/ font-size:20px;} .design_process01 .pro_m_box li .m_inbox{position:relative; display:inline-block;} .design_process01 .pro_m_box li .m_inbox::before{content:''; display:block; position:absolute; top:50%; width:6px; height:6px; transform:translateY(-50%); border-radius:50%;} .design_process01 .pro_m_box li .m_inbox .step::after{content:''; display:block; position:absolute; top:50%; right:-12px; width:18px; height:1px;transform:translateY(-50%); background-color:green;} .design_process01 .pro_m_box li .m_inbox .step{display:inline-block; position:relative; padding:5px 10px; color:#fff; font-size:18px; font-weight:500;} .design_process01 .pro_m_box li .txt-box{display:inline-block; width:100%;} /*홀수*/ .design_process01 .pro_m_box li:nth-child(odd){margin-left:50%;} .design_process01 .pro_m_box li:nth-child(odd) .odd-box{padding-left:20px;} .design_process01 .pro_m_box li:nth-child(odd) .step{float:left; background-color:#0E43AF;} .design_process01 .pro_m_box li:nth-child(odd) .odd-box::before{left:-3px; background-color:#0E43AF;} .design_process01 .pro_m_box li:nth-child(odd) .txt-box{padding-left:25px;} .design_process01 .pro_m_box li:nth-child(odd) .txt-box .txt{text-align:left;} .design_process01 .pro_m_box li:nth-child(odd) .m_inbox .step::after{left:-17px; background-color:#0E43AF;} /*짝수*/ .design_process01 .pro_m_box li:nth-child(even){margin-right:50%;} .design_process01 .pro_m_box li:nth-child(even) .event-box{margin-bottom:4px; padding-right:20px; float:right;} .design_process01 .pro_m_box li:nth-child(even) .step{float:right; background-color:#0e92af;} .design_process01 .pro_m_box li:nth-child(even) .m_inbox .step::after{right:-17px; background-color:#0e92af;} .design_process01 .pro_m_box li:nth-child(even) .event-box::before{right:-3px; background-color:#0e92af;} .design_process01 .pro_m_box li:nth-child(even) .txt-box{padding-right:25px;} .design_process01 .pro_m_box li:nth-child(even) .txt-box .txt{text-align:right;} @media screen and (max-width:1700px){ } @media screen and (max-width:1500px){ .chartering-box{padding:80px 50px;} .pro_box{margin-top:60px;} .pro_box .pro_iner li .txt{font-size:18px; letter-spacing:-1.0px;} } @media screen and (max-width:1300px){ .service-box .sub-con-tax br{display:none;} .pro_box .pro_iner li .txt{font-size:18px; letter-spacing:-1.2px;} } @media screen and (max-width:1200px){ .service-box .sub-con-tax{font-size:20px;} .chartering-box{padding:50px 30px;} .pro_box{display:none;} .design_process01{display:block;} } @media screen and (max-width:1000px){ .service-box .sub-con-tax{font-size:18px;} .design_process01 .pro_m_box li .txt{font-size:18px;} } @media screen and (max-width:800px){ .service-box .sub-con-tax{font-size:14px;} .design_process01 .pro_m_box li .m_inbox .step{padding:3px 8px; font-size:16px;} .design_process01 .pro_m_box li .txt{font-size:14px;} .chartering-box{padding:15px 10px;} .chartering-box .pc_img{display:none;} .chartering-box .m_img{display:block; margin:0 auto; width:70%; height:auto;} } @media screen and (max-width:767px) { .design_process01 , .design_process02{margin-bottom:20px; /*display:block;*/} .pro_box , .designpro{display:none;} .design_process01 .pro_m_box{margin-bottom:30px;} } /*선박수리(mro)*/ .sub-contents.repair-con{min-height:auto;} .imgbox{margin:30px 0 0px} @media screen and (max-width:800px){ .imgbox{margin:15px 0 0px} } /*수상호텔, 레저장비*/ .sub-contents.leisure-con{min-height:auto;} .service_title{margin-bottom:40px; font-size:34px; font-weight:600;} .leisureimg-box{margin-bottom:30px;} @media screen and (max-width:800px){ .leisureimg-box{margin-bottom:15px;} } /*친환경선박부품*/ .serviceimg-list{margin-bottom:80px;} .serviceimg-list ul{display: flex; flex-wrap: wrap;} .serviceimg-list ul li{width:calc(25% - 15px); margin-right:20px; border-radius:20px;} .serviceimg-list ul li:last-child{margin-right:0;} .serviceimg-list ul li img{width:100%; height:auto; border-radius:20px;} .production{margin-top: 80px;} @media screen and (max-width:1500px){ .service_title{margin-bottom: 30px; font-size:30px;} .serviceimg-list{margin-bottom:60px;} .production{margin-top:60px;} } @media screen and (max-width:1200px){ .service_title{margin-bottom: 15px; font-size:26px;} .serviceimg-list{} .serviceimg-list ul li{width:calc(50% - 7px); margin-right:14px; height:250px; margin-bottom:14px;} .serviceimg-list ul li:nth-child(2n){margin-right:0;} .serviceimg-list ul li img{width:100%; height:250px;} .serviceimg-list{margin-bottom:30px;} .production{margin-top:30px;} } @media screen and (max-width:1000px){ .service_title{margin-bottom:10px; font-size:22px;} } @media screen and (max-width:800px){ .service_title{margin-bottom:8px; font-size:20px;} } @media screen and (max-width:767px){ .serviceimg-list{margin-bottom:20px;} .production{margin-top:20px;} } @media screen and (max-width:640px){ .serviceimg-list ul li{width:100%; margin-right:0; margin-bottom:10px;} .serviceimg-list ul li:last-child{margin-bottom:0;} } /*해양드론배송*/ /*이메일 무단수집거부*/ .sub-contents.term-content{min-height:auto;} .terms_infobox {} .terms_infobox h5 {position:relative; margin:30px 0 10px; padding-left:25px; color:#333; font-size:22px; font-weight:500;} .terms_infobox h5:before {content:'\e9b1'; position:absolute; left:0; top:0; font-family:'xeicon';} .terms_conbox{background:#f9f9f9; border-top:1px solid #000000; padding:50px; margin-top:20px;} .terms_conbox p{font-size:22px; color:#ff2020;} @media screen and (max-width:1200px) { .terms_conbox p{font-size:20px;} } @media screen and (max-width:1000px) { .terms_infobox h5 {font-size:17px;} .terms_conbox{padding:30px 20px;} .terms_conbox p{font-size:18px;} } @media screen and (max-width:800px) { .terms_conbox{padding:20px 15px;} .terms_conbox p{font-size:14px;} } @media screen and (max-width:767px) { .terms_infobox h5 {margin:20px 0 6px; font-size:16px;} } @charset "UTF-8"; #banner_wrap .list_area { position:absolute; bottom:80px; width:100%; right: 80px; text-align:right; font-weight:bold; color:#fff; z-index:30; } #banner_wrap .list_area .list_num { position:relative; padding:0 45px 10px 0; font-size:72px; letter-spacing:-1px; font-family:'Roboto'; font-weight:500; color:#fff; } #banner_wrap .list_area .list_num:before { content:'0'; } #banner_wrap .list_area .list_num span { position:absolute; right:0; bottom:0; padding-left:5px; font-size:33px; letter-spacing:-1px; font-weight:400; color:#ffffff82; } #banner_wrap .list_area .list_num span:before { content:'0'; } #banner_wrap .list_area .list_num span:after { position:absolute; display:block; bottom:0; left:0; width:2px; height: 75px; background:#ffffff82; transform:rotate(40deg); content:''; } @media screen and (max-width:1300px) { #banner_wrap .list_area { right: 100px; } } #banner_wrap {margin-bottom:120px; position:relative; overflow:hidden; width:100%; height:100%; background:#000;} #banner_wrap .ctrl_box {display:none; z-index:11; overflow:hidden; position:absolute; bottom:0; width:100%;} #banner_wrap .ctrl_box > div {float:left; height:90px;} #banner_wrap .ctrl_box .tit {position:relative; width:347px; display:flex; align-items: center; justify-content: center; text-align:center;/* background: linear-gradient(90deg, rgba(27,114,136,1) 0%, rgba(146,208,80,1) 100%); */padding:0 20px;} #banner_wrap .ctrl_box .tit strong {color:#fff; font-size:22px; font-weight: 400; } #banner_wrap .ctrl_box .tit a {position:relative; } #banner_wrap .ctrl_box .auto_ct {padding-left:30px;} #banner_wrap .ctrl_box .auto_ct > button {height:35px; width:25px;} #banner_wrap .ctrl_box .auto_ct > button:after {font-family:'xeicon'; color:#fff; font-size:26px; } #banner_wrap .ctrl_box .auto_ct .start:after {content:'\ea3e';} #banner_wrap .ctrl_box .auto_ct .stop:after {content:'\ea3b';} #banner_wrap .ctrl_box .auto_ct > button:hover {opacity:0.7;} #banner_wrap .ctrl_box .nav_ct {display:flex;} #banner_wrap .ctrl_box .nav_ct > button {height:36px; width:40px; position:relative; font-size:0;} #banner_wrap .ctrl_box .nav_ct > button:after {font-family:'xeicon'; color:#fff; font-size:28px; } #banner_wrap .ctrl_box .nav_ct .next:after {content:'\e940';} #banner_wrap .ctrl_box .nav_ct .prev:after {content:'\e93d';} #banner_wrap .ctrl_box .nav_ct .next:before {content:''; position:absolute; top:8px; left:-1px; display:block; width:1px; height:24px; background-color:#ffffff; } #banner_wrap .nav_out > button {position:absolute; top:50%; left:50px; width:80px; height:80px; margin-top:-40px; text-indent:-9999px; z-index:40;} #banner_wrap .nav_out > button:after { content:'\e93d'; display:block; font-family:'xeicon'; position:absolute; top:-8px; left:0; font-size: 70px; color:#ffffff82; text-indent:1px; } #banner_wrap .nav_out .next {left:auto; right:50px; } #banner_wrap .nav_out .next:after { content:'\e940'; left:auto; right:0; } #banner_wrap .nav_out > button:hover:after { color:#fff; } #banner_wrap .ctrl_box .btn {width:calc(100% - 347px);} #banner_wrap .ctrl_box .btn .m_scroll {height:100%;} #banner_wrap .ctrl_box .btn .link {position:relative; display:block; float:left; width:33.333%; height:100%;border:1px solid rgba(255, 255, 255, 0.2); border-right:none; display:flex; align-items:center; text-align:center; justify-content: center; font-size:19px; font-weight:bold; transition:all 0.55s } #banner_wrap .ctrl_box .btn a:after{content:''; display:inline-block; width:58px; height:8px; background:url('https://k-nets.com/images/intro/ico_next.png') 0 0 / contain no-repeat; position:absolute; right:50%; top:50%; opacity:0; transform:translateY(-50%); transition:all 0.55s; } #banner_wrap .ctrl_box .btn .link:hover {background-color:rgba(0, 0, 0, 0.3);} #banner_wrap .ctrl_box .btn .link i {color:#fff; transition:all 0.55s } #banner_wrap .ctrl_box .btn .link:hover:after{right:27px; opacity:1; } #banner_wrap .ctrl_box .btn .link:hover i{padding-right:100px;} #banner_wrap .ctrl_box .swiper-pagination {position:relative; width:100%; height:100%; display:flex; color:rgba(255, 255, 255, 0.7); background:rgba(0, 0, 0, 0.1); border-top:1px solid rgba(255, 255, 255, 0.1); font-size:18px; font-weight:500;} #banner_wrap .ctrl_box .swiper-pagination-bullet {position:relative; width:33.333%; height:100%; display:unset; border-radius:0; background:rgba(0, 0, 0, 0); border-left:1px solid rgba(255, 255, 255, 0.1); opacity:1; text-align:center; line-height:90px; transition:0.3s} #banner_wrap .ctrl_box .swiper-pagination-bullet:first-child {border-left:none;} #banner_wrap .ctrl_box .swiper-pagination-bullet:hover {background:rgba(0, 0, 0, 0.2);} #banner_wrap .ctrl_box .swiper-pagination-bullet-active {color:rgba(255, 255, 255, 1); background:rgba(0, 0, 0, 0.2);} #banner_wrap .ctrl_box .swiper-pagination-bullet:after {position:absolute; display:block; bottom:0; left:0; width:0; height:4px; background:#92d051; content:''; } #banner_wrap .ctrl_box .swiper-pagination-bullet-active:after {animation:visual_bar 4s linear forwards;} /* #banner_wrap .ctrl_box .swiper-pagination-bullet em { position: relative; display:inline-block; padding-left: 20px; } #banner_wrap .ctrl_box .swiper-pagination-bullet em:after { content:''; display:block; position:absolute; left:0; top:31px; width:32px; height: 27px; background-color:#E6AE00; z-index:-1; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(1) em { padding-left: 0; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(1) em:after { display: none; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(2) em:after { background-color:#E6AE00; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(3) em:after { background-color:#FF5025; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(4) em:after { background-color:#C00000; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(5) em:after { background-color:#91D04F; } */ #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(2) em {display: block; text-indent: -9999px;} #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(3) em {display: block; text-indent: -9999px;} #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(4) em {display: block; text-indent: -9999px;} #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(5) em {display: block; text-indent: -9999px;} #banner_wrap .banner_img {width:100%; height:100%;} #banner_wrap > .swiper { height: 100%; } @media screen and (max-width:1600px) { #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt { font-size:40px ; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dd { font-size: 36px; } } @media screen and (max-width:1300px) { #banner_wrap:after {font-size:13px} #banner_wrap .nav_out .prev {left:0;} #banner_wrap .nav_out .next {right:0;} } @media screen and (max-width:1200px) { #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dd i { display:inline; } } @media screen and (max-width:1100px) { #banner_wrap .ctrl_box .tit {width:286px; padding:0; padding-left:10px;} #banner_wrap .ctrl_box .btn {width:calc(100% - 286px);} #banner_wrap .ctrl_box .tit strong {font-size:18px;} #banner_wrap .swiper-slide-active .banner_img {animation: a_img_m 4s;} } @media screen and (max-width:1300px) { #banner_wrap .swiper-slide div.tx_area { padding-left: 100px; padding-right: 100px; } } @media screen and (max-width:1024px) { #banner_wrap .ctrl_box .tit {width:164px; justify-content: center; padding-left: 0;} #banner_wrap .ctrl_box .btn {width:calc(100% - 164px);} #banner_wrap .ctrl_box .auto_ct { padding-left: 0; } #banner_wrap .ctrl_box .tit strong {display:none;} #banner_wrap .ctrl_box > div {height:80px;} #banner_wrap .ctrl_box .btn .link {font-size:17px;} #banner_wrap .ctrl_box .btn .link:after {background-size:auto 6px;} #banner_wrap .ctrl_box .swiper-pagination-bullet em { font-size: 15px; } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(2) em { } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(3) em { } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(4) em { } #banner_wrap .ctrl_box .swiper-pagination-bullet:nth-child(5) em { } } @media screen and (max-width:800px) { #banner_wrap .ctrl_box { display:none; } #banner_wrap .swiper-slide div.tx_area { padding-bottom: 0; } #banner_wrap .list_area { bottom: 100px; } #banner_wrap .swiper-slide div.tx_area { padding-left: 50px; padding-right: 50px; text-align:center; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt:after { right:auto; left:50%; margin-left:-70px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt img { height: 50px; } #banner_wrap .nav_out > button { width: 50px; height: 50px; } #banner_wrap .nav_out > button:after { font-size: 48px; } #banner_wrap .list_area { right:0; text-align:center; } #banner_wrap .list_area .list_num { padding: 0; } #banner_wrap .list_area .list_num span { position: relative; padding-left: 35px; } #banner_wrap .list_area .list_num span:after { height: 35px; left: 20px; transform: rotate(30deg); } #banner_wrap .list_area .list_num { font-size: 60px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt { font-size: 36px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dd { font-size: 30px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st2 dd i { display:inline; } } @media screen and (max-width:620px) { #banner_wrap .swiper-slide div.tx_area dl.tx_st1 { margin-bottom: 20px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt { margin-bottom: 60px; font-size: 25px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt:after { width:80px; margin-left:-40px; bottom: -30px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dt img { height: 35px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st1 dd { font-size: 20px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st2 dt { font-size: 16px; } #banner_wrap .swiper-slide div.tx_area dl.tx_st2 dd { font-size:14px; } #banner_wrap .list_area { bottom: 90px; } #banner_wrap .list_area .list_num { font-size: 30px; } #banner_wrap .list_area .list_num span { padding-left: 20px; font-size: 18px; } #banner_wrap .list_area .list_num span:after { height: 18px; left: 11px; bottom:3px; } } .inner .m_tit h2{margin-bottom:20px; font-size:60px; font-weight:600;} .inner .m_tit p{font-size:24px; color:#777;} /* 硫붿씤-怨듯넻 */ .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell {height:auto !important;} .section { position:relative; } .section .inner {max-width: 1680px; margin: 0 auto;} .section .fp-tableCell > p.tx { position: absolute; bottom: 50px; right: 12%; z-index:99999; color:#ffffff; font-size: 22px; font-weight: 100; opacity: 0.38; transition:all 0.3s; } /* sec1 */ #section1 {width:100%; color:#fff } #section1 .list { position: relative; overflow:hidden;} #section1 .list .cont {position:relative; display:flex; float:left; align-items:center; height:100vh;} #section1 .list .cont .txt { padding-left:130px; position:relative; letter-spacing:-1px; z-index:5; } #section1 .list .cont .txt > * {opacity:0;transform:translateX(10%);transition:all 0.9s;} #section1 .list .cont.on .txt > * {opacity:1; transform:translateX(0);} #section1 .list .cont .txt strong {display:block; margin-bottom:0; font-size:34px; font-weight:300; transition-delay:0.4s;} #section1 .list .cont .txt em {display:block; margin-bottom:25px; color:#f1f1f1; font-size:72px; font-weight:600; transition-delay:0.2s;} #section1 .list .cont .txt a {position:relative; display:inline-block; left:0; width: 223px; height: 68px; line-height: 68px; font-weight:600; color:#ffffff; font-size:22px; text-align:center; background:#E84816; transition-delay:0.5s; } #section1 .list .cont .txt a:after {content:''; position:absolute; left:0; bottom:0px; display:block; width:0; height:1px; background:#fff; transition:all 0.3s; } #section1 .list .cont .txt a:hover, #section1 .list .cont .txt a:focus {color:#fff; text-decoration:none; transition:all 0.3s;} #section1 .list .cont .txt a:hover:after, #section1 .list .cont .txt a:focus:after {width:100%; transition:all 0.3s;} #section1 .list .cont > span {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-position:50% 50%; background-size:cover; background-repeat:no-repeat; transform: scale(1,1); transition:transform 4500ms ease-in-out} #section1 .list .cont.on > span {transform: scale(1.1,1.1) rotate(0.002deg);} #section1 .list .cont > span.bg1 {background-image:url(/_next/static/media/img_visual1.562230a2.jpg)} #section1 .list .cont > span.bg2 {background-image:url(/_next/static/media/img_visual2.4688a4f8.jpg)} #section1 .list .slick-dots { position:absolute; width: 100%; text-align:center; bottom:30px; z-index:1000; } #section1 .list .slick-dots li {display:inline-block; margin:0 5px;} #section1 .list .slick-dots li button {position:relative; width:150px; height:1px; background:#939393; text-indent:-9999px;} #section1 .list .slick-dots li button:after {content:''; position:absolute; top:-1px; left:0; display:block; width:0; height:3px; transition:width 5s ease-out;} #section1 .list .slick-dots li.on button:after { width:100%; height:3px; background:#ffffff; } @supports (-webkit-touch-callout: none) { /* iOS only */ #section1 .list .cont {height: -webkit-fill-available;} } @media screen and (max-width:800px) { /* sct1 - �뚭컻 */ #section1 .list .cont .txt {letter-spacing:-1px; top:-20vh;} #section1 .list .cont .txt strong {font-size:28px} .section .fp-tableCell > p.tx { right: auto; left:10%; } } @media screen and (max-width:640px) { /* sct1 - �뚭컻 */ #section1 .list .slick-dots li button {width:80px;} #section1 .list:after, #section1 .list:before { display:none; } #section1 .list .cont .txt em { } } @media screen and (max-width:480px) { /* sct1 - �뚭컻 */ #section1 .list .cont .txt strong {font-size:24px} #section1 .list .cont .txt a {font-size:14px} #section1 .list .slick-dots li button {width:40px;} .section .fp-tableCell > p.tx { font-size: 14px; left:5%; } } @media screen and (max-width:360px) { #section1 .list .cont .txt strong{font-size: 16px;} #section1 .list .cont .txt em{font-size: 18px;} } /* sct0 - 기타 */ #page_info {position:absolute; bottom:120px; right:0; font-size:20px; color:#ffffff; font-weight:300; z-index:1000;} #page_info .current {font-size:60px; font-weight:normal} #page_info span {display:inline-block; padding:0 10px;} #page_info .ico_arrow {position:relative; padding-left: 80px; opacity:0.8; color:#fff; animation:ico_arrow 1.2s linear infinite 0s; font-size:13px; font-weight:normal; rotate: 270deg; } #page_info .ico_arrow:after {content:'\e93c'; position:absolute; left:0; top:0; display:block; font-family:xeicon; color:#fff} #page_info .ico_arrow:before { content:''; display:block; position: absolute; left:5px; top:8px; width: 65px; height: 1px; background-color:#ffffff; } #page_info.color {color:#ffffff} #page_info.color .current {color:#ffffff} #page_info.color .ico_arrow {position:relative; color:#ffffff;} #page_info.color .ico_arrow:after {color:#ffffff} @keyframes ico_arrow { 0% { bottom:0px; } 50%{ bottom:-5px; } 100% { bottom:0px; } } @media screen and (max-width:800px) { } @media screen and (max-width:640px) { /* sct0 - 기타 */ #page_info { display:none; } } /* sec2 */ #section2{margin-bottom:20px;} #section2 .m_about{overflow: hidden;} #section2 .m_about .slide_wrap{position:relative; margin-top: 60px;} #section2 .m_about .slide_wrap .slide_ctn{} #section2 .m_about .slide_wrap .slide_ctn .slick-track{left: 4%;} #section2 .m_about .slide_wrap .slide_ctn .item{position:relative; width: 100%; max-width: 740px; overflow: hidden; padding-top: 106px; transition:1.2s; margin: 0 10px;} #section2 .m_about .slide_wrap .slide_ctn .item a{position:absolute; top: 0; right: 0; bottom: 0; left: 0;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box{position:relative; border-radius:30px; overflow: hidden;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box figure{} #section2 .m_about .slide_wrap .slide_ctn .item .img_box figure img{width:100%; height:auto;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box h3:not(.on){position:absolute; bottom:20px; left:30px; font-size:34px; color: #fff; letter-spacing:0; line-height: 1.1; transition:1.1s; font-weight:400;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box .on{position: absolute; bottom: 20px; left: 30px; font-weight: 600; font-size: 50px; color: #fff; letter-spacing: 0; line-height: 1.1; transform: translateY(200px); transition: 1.1s;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt{position:relative; transform:translateY(-100%);padding: 30px 30px 0; z-index: -1; transition:1.2s} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt h4{font-weight:bold; font-size:30px; color: #111; margin-bottom:6px;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt p{font-size:20px; color: #777; word-break: keep-all;} #section2 .m_about .slide_wrap .slide_btn{position:absolute; top:-102px; right:130px; display:flex; align-items:center; justify-content:space-between; width:120px; border-radius:50%; z-index:10;} #section2 .m_about .slide_wrap .slide_btn > div{width: 12px; height: 18px; background:url(/_next/static/media/icon_txt_btn_arrow01.fc714b7d.svg) 50% 50% no-repeat; padding: 15px; cursor: pointer; background-size:contain;} #section2 .m_about .slide_wrap .slide_btn > .next{background:url(/_next/static/media/icon_txt_btn_arrow02.66fd5e21.svg) 50% 50% no-repeat; background-size:contain;} @keyframes rotate{ 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} } #section2 .m_about .slide_wrap .slide_ctn .item.slick_now{padding-top: 0;} #section2 .m_about .slide_wrap .slide_ctn .item.slick_now .img_box h3:not(.on){transform:translateY(140%)} #section2 .m_about .slide_wrap .slide_ctn .item.slick_now .img_box .on{transform:translateX(0)} #section2 .m_about .slide_wrap .slide_ctn .item.slick_now .down_txt{transform:translateY(0);} /* sec3 */ #section3{margin-bottom:130px;} #section3 .sect03_bg{padding:130px 0; width:100%; height:890px; background:url(/_next/static/media/sect03_bg.3a3a6077.jpg) center center no-repeat; background-size:cover;} #section3 .sect03_bg .m_tit{color:#fff;} #section3 .sect03_bg .m_tit p{margin-bottom:35px; color:#fff;} #section3 .sect03_bg .inner{position:relative;} #section3 .se3-slick{} #section3 .se3-slick > div{} #section3 .se3-slick > div .s-box{margin:0 10px; padding:50px 0 ; display:flex; flex-direction:column; align-items:center; text-align:center; background:rgba(255,255,255,.5); border:2px solid #fff; border-radius:20px;} #section3 .se3-slick > div .s-box .s-boxtitle{margin-bottom:35px; font-size:22px; height:50px; display:flex; align-items:center; justify-content:center; line-height:1.2; font-weight:500; color:#0E43AF;} #section3 .se3-slick > div .s-box .s-imgbox{margin-bottom:25px; height:100px;} #section3 .se3-slick > div .s-box .s-subject{padding-bottom:25px; position:relative; font-size:28px; font-weight:500; color:#000;} #section3 .se3-slick > div .s-box .s-subject::after{content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:36px; height:1px; background-color:#000;} #section3 .se3-slick > div .s-box ul{margin-top:25px; height:52px;} #section3 .se3-slick > div .s-box ul li{font-size:20px; font-weight:500; line-height:1.3;} #section3 .slick-prev, #section3 .slick-next {position:absolute; width:64px; height:64px; transform:inherit; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); font-size:0; text-indent:-999em; border-radius:50%;} #section3 .slick-prev::before, #section3 .slick-next::before{content:'';} #section3 .slick-prev{right:94px; top:-133px; background:#ffffff9c url(/_next/static/media/icon_txt_btn_arrow01.fc714b7d.svg) center center no-repeat; background-size: 12px;} #section3 .slick-next{right:10px; top:-133px; background:#ffffff9c url(/_next/static/media/icon_txt_btn_arrow02.66fd5e21.svg) center center no-repeat; background-size: 12px;} #section3 .plue-btn{position:absolute; top:40px; right:0; display:none;} #section3 .plue-btn span{display:inline-block; width:64px; height:64px; background:#ffffff9c url(/_next/static/media/icon_plue.7ad8faf6.svg) center center no-repeat; background-size: 12px; text-indent:-999em; border-radius:50%;} /* sec4 */ #section4 .m_tit p{margin-bottom:35px;} .about-gms{margin-bottom:130px; display:flex; width:100%; height:640px;} .about-gms > div{width:50%;} .about-gms .a-gms-box1 a{display:block; width:100%; height:100%; text-decoration:none;} .about-gms .a-gms-box1 .gms-tax{width:100%; height:100%;} .about-gms .gms-tax{color: #fff;} .about-gms > div.a-gms-box1 > div{display:flex; width:100%; height:320px;} .about-gms > div.a-gms-box1 > div > div{width:50%; display:flex; align-items: center; justify-content: center; text-align:center;} .about-gms > div.a-gms-box1 > div > div.a-gms-box1-1-1{background:url(/_next/static/media/a-gms-box1-1-1.d1b4b2ff.jpg) center center no-repeat;} .about-gms > div.a-gms-box1 > div > div.a-gms-box1-1-2{background:#0E43AF;} .about-gms > div.a-gms-box1 > div > div.a-gms-box1-2-1{background:#383838;} .about-gms > div.a-gms-box1 > div > div.a-gms-box1-2-2{background:url(/_next/static/media/a-gms-box1-2-2.0231dfdf.jpg) center center no-repeat;} .about-gms > div.a-gms-box1 .a-gms-box1-1 .a-gms-box1-1-1:hover {transform: scale(1,1); transition:transform 4500ms ease-in-out} .about-gms > div.a-gms-box1 > div .a-gms-box1-2-2:hover { transition: transform .5s; transition: all .5s;/* background-size:110%; */} .about-gms > div.a-gms-box2{display:flex; align-items: center; justify-content: center; text-align:center; flex-direction: column; background:url(/_next/static/media/a-gms-box2.3a81d57f.jpg) center center no-repeat;} .about-gms > div.a-gms-box2:hover { transition: transform .5s; transition: all .5s; /*background-size:110%; */} .about-gms > div.a-gms-box2 .a-gms-box2-btn{margin-top:40px; padding:0 30px; border-radius:30px; background:#0E43AF;} .about-gms > div.a-gms-box2 .a-gms-box2-btn span{position:relative; display:inline-block; padding:15px 30px 15px 0px ; color:#fff;} .about-gms > div.a-gms-box2 .a-gms-box2-btn span::after{content:''; display:block; position:absolute; top:50%; right:0; width:9px; height:16px; transform:translateY(-50%); background:url(/_next/static/media/btn-righticon.4eb521c5.svg) center center no-repeat; } .about-gms .a-gms-box1 .gms-tax{display:flex; flex-direction:column; align-items:center; justify-content:center;} .about-gms .gms-tax h4{font-size:36px; font-weight:500;} .about-gms .gms-tax p{font-size:22px;} @media screen and (max-width:1700px){ /* 공통 */ .section .inner {max-width:1500px;} .inner .m_tit h2{font-size:54px;} .inner .m_tit p{font-size:22px; word-break:keep-all;} /* sct1 */ /* sct2 */ #section2{margin-bottom:0;} /* 03*/ #section3 .plue-btn{top:29px;} } @media screen and (max-width:1620px){ /* 공통 */ .section .inner {max-width:1400px;} /* 03*/ #section3 .sect03_bg{padding:120px 0;} #section3 .sect03_bg{height:860px;} } @media screen and (max-width:1500px) { /* 공통 */ .section .inner {max-width:1320px;} #section2 .m_about .slide_wrap .slide_btn{right:20px; width:90px;} .inner .m_tit h2{margin-bottom:10px; font-size:50px;} .inner .m_tit p{font-size:20px;} /*02*/ #section2 .m_about .slide_wrap .slide_ctn .item{max-width:500px} /* 03*/ #section3 .plue-btn{top:10px;} } @media screen and (max-width:1400px){ /* 01 */ #fullpage {width:100%} .section .inner {padding:0 20px} #section1 .list .cont .txt strong{font-size:26px;} #section1 .list .slick-dots { bottom:16px; } #section1 .list .cont .txt{padding-left:50px;} #section1 .list .cont .txt em {font-size:60px} #section1 .list .cont .txt strong{font-size:30px;} #banner_wrap{margin-bottom:100px;} /* 02*/ #section2 .m_about .slide_wrap .slide_ctn .item .down_txt{padding:25px 25px 0;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt h4{margin-bottom:3px; font-size:26px;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt p{font-size:18px;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box h3:not(.on){font-size:32px; bottom:10px;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box .on{font-size:32px;} /* 03*/ #section3{margin-bottom: 100px;} #section3 .sect03_bg{padding:100px 0;} #section3 .sect03_bg{height:740px;} #section3 .plue-btn{right:20px;} #section3 .se3-slick > div .s-box{padding:40px 0;} #section3 .se3-slick > div .s-box .s-boxtitle{margin-bottom:5px; padding-bottom:20px; height:66px;} #section3 .se3-slick > div .s-box .s-subject{font-size:26px; padding-bottom:15px;} #section3 .se3-slick > div .s-box ul{padding-top:15px; margin-top:0; height:66px;} #section3 .slick-prev, #section3 .slick-next{width:58px; height:58px;} #section3 .slick-next{right:10px;} #section3 .slick-prev{right:90px} #section3 .plue-btn span{width:58px; height:58px;} /* 04*/ .about-gms{height:480px;} .about-gms > div.a-gms-box1 > div{height:240px;} .about-gms > div.a-gms-box2 .a-gms-box2-btn{margin-top:25px; padding:0px 30px 0px 10px; color: #fff; font-size: 16px;} .about-gms > div.a-gms-box2 .a-gms-box2-btn span{padding:10px 20px 10px 20px;} .about-gms > div.a-gms-box2 .a-gms-box2-btn span::after{background-size:8px;} } @media screen and (max-width:1200px){ /* 공통 */ .inner .m_tit h2 {font-size: 44px;} .inner .m_tit p{font-size:20px;} #banner_wrap{margin-bottom:80px;} /* 02*/ #section2 .m_about .slide_wrap{margin-top:80px;} #section2 .m_about .slide_wrap .slide_btn{top:-50px; left:20px; width:120px;} #section2 .m_about .slide_wrap .slide_btn > div{background-size:13px;} #section2 .m_about .slide_wrap .slide_btn > .next{background-size:13px;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt{padding:20px 20px 0;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt{padding:15px 15px 0;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt h4{font-size:20px;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt p{font-size:16px;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box h3:not(.on){font-size: 28px;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box .on{font-size:28px;} /* 03 */ #section3{margin-bottom:80px;} #section3 .slick-prev{top:-118px; right:65px;} #section3 .slick-prev, #section3 .slick-arrow{width:40px; height:40px; background-size:10px;} #section3 .slick-next{top:-119px; right:10px;} #section3 .plue-btn{top: 16px;} #section3 .plue-btn span{width:40px; height:40px; } #section3 .se3-slick > div .s-box{padding:30px 0;} #section3 .sect03_bg{padding:80px 0; height:620px;} #section3 .sect03_bg{} #section3 .se3-slick > div .s-box .s-boxtitle{margin-bottom:0; font-size:18px;} #section3 .se3-slick > div .s-box .s-imgbox{height:80px; margin-bottom:15px;} #section3 .se3-slick > div .s-box .s-imgbox img{height:80px; width:auto;} #section3 .se3-slick > div .s-box .s-subject{font-size:24px;} #section3 .se3-slick > div .s-box ul{height:60px;} #section3 .se3-slick > div .s-box ul li{font-size:18px;} .about-gms {flex-direction: column; height:inherit; margin-bottom:80px;} .about-gms > div{width:100%;} .about-gms .gms-tax h4{font-size:26px; font-weight:600;} .about-gms .gms-tax p{font-size:18px;} .about-gms > div.a-gms-box1 > div > div.a-gms-box1-1-1{background-size:cover;} .about-gms > div.a-gms-box1 > div > div.a-gms-box1-2-2{background-size:cover;} .about-gms > div.a-gms-box2{background-size:cover; height:330px;} } @media screen and (max-width:1024px) { .inner .m_tit h2{font-size:36px;} /* sct1 - �뚭컻 */ #banner_wrap{margin-bottom:60px;} #section1 .list .cont .txt { padding-left: 20px; } #section1 .list .cont .txt em {font-size:36px} #section1 .list .cont .txt strong {margin-bottom:10px; font-size:22px} #section1 .list .cont .txt a { left:0; width: 190px; height: 55px; line-height: 55px; font-size:16px} .section .fp-tableCell > p.tx { font-size: 16px; } #section3 .slick-next{top: -108px;} #section3 .slick-prev{top: -108px;} } @media screen and (max-width:800px){ .inner .m_tit p br{display:none; } /*02*/ #section2 .m_about .slide_wrap .slide_ctn .item{max-width:420px;} } @media screen and (max-width:767px) { #section3 .slick-prev, #section3 .slick-arrow{width:32px; height:32px;} #section3 .slick-prev{top:50%; transform:translateY(-50%); right:inherit; left:-5px; z-index:1;} #section3 .slick-next{top:50%; transform:translateY(-50%); right:-5px;} } @media screen and (max-width:640px) { #banner_wrap{margin-bottom:30px;} .inner .m_tit h2 {font-size: 24px;} .inner .m_tit p{font-size:16px;} #section2 .m_about .slide_wrap{margin-top:30px;} #section2 .m_about .slide_wrap .slide_btn{top:-118px; right: 20px; left:inherit; width: 80px; } #section2 .m_about .slide_wrap .slide_ctn{height:345px; overflow:hidden;} #section3{margin-bottom:30px;} #section3 .sect03_bg .m_tit p{margin-bottom:20px;} #section3 .sect03_bg{padding:30px 0; height:446px;} #section3 .plue-btn span{width:32px; height:32px;} #section3 .plue-btn{top:1px;} #section3 .se3-slick > div .s-box{padding:25px 0;} #section3 .se3-slick > div .s-box .s-boxtitle{font-size:16px; font-weight:500; height:60px; padding-bottom:15px; font-weight:600;} #section3 .se3-slick > div .s-box .s-imgbox{height:70px;} #section3 .se3-slick > div .s-box .s-imgbox img{height:70px;} #section3 .se3-slick > div .s-box ul{height:50px;} #section3 .se3-slick > div .s-box ul li{font-size:14px;} #section3 .se3-slick > div .s-box .s-subject{font-size:18px;} #section3 .se3-slick > div .s-box .s-subject{font-size:16px;} #section4 .m_tit p{margin-bottom:20px;} .about-gms{margin-bottom:30px;} .about-gms > div.a-gms-box1 > div{height: 140px;} .about-gms > div.a-gms-box2{height:200px;} .about-gms > div.a-gms-box2 .a-gms-box2-btn{margin-top:15px; padding:0px 20px 0 10px;} .about-gms .gms-tax h4{font-size:18px;} .about-gms .gms-tax p{font-size:14px;} .about-gms > div.a-gms-box2 .a-gms-box2-btn span{padding:7px 20px 7px 15px; font-size:14px;} } @media screen and (max-width:500px) { .inner .m_tit h2{font-size:18px;} .inner .m_tit p{font-size:14px;} #section2 .m_about .slide_wrap .slide_btn{top:-108px;} #section2 .m_about .slide_wrap .slide_btn > div{background-size:9px;} #section2 .m_about .slide_wrap .slide_btn > .next{background-size:9px;} #section2 .m_about .slide_wrap .slide_ctn{height:335px;} #section2 .m_about .slide_wrap .slide_ctn .item{max-width:380px;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box h3:not(.on){font-size:20px;} #section2 .m_about .slide_wrap .slide_ctn .item .img_box .on{font-size:20px;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt h4{font-size:16px;} #section2 .m_about .slide_wrap .slide_ctn .item .down_txt p{font-size:14px;} #section3 .plue-btn{top:-7px;} #section3 .sect03_bg{height:394px;} #section3 .se3-slick > div .s-box{padding:20px 0;} #section3 .se3-slick > div .s-box .s-imgbox{height:50px;} #section3 .se3-slick > div .s-box .s-imgbox img{height:50px;} .about-gms .gms-tax h4{font-size:16px;} } @media screen and (max-width:514px) { #section2 .m_about .slide_wrap .slide_btn{top:-138px;} } @media screen and (max-width:500px) { #section2 .m_about .slide_wrap .slide_btn{top:-108px;} } @media screen and (max-width:454px) { #section2 .m_about .slide_wrap .slide_btn{top:-128px;} } @media screen and (max-width:403px){ #section3 .sect03_bg{height:410px;} #section2 .m_about .slide_wrap .slide_ctn .item{max-width:360px;} #section2 .m_about .slide_wrap .slide_ctn{height:310px;} } @media screen and (max-width:380px) { #section2 .m_about .slide_wrap .slide_btn{top:-128px;} #section2 .m_about .slide_wrap .slide_ctn .item{max-width:300px;} #section2 .m_about .slide_wrap .slide_ctn{height:270px;} } @media screen and (max-width:360px) { #section2 .m_about .slide_wrap .slide_btn{top:-128px; } #section2 .m_about .slide_wrap .slide_ctn .item{max-width:290px;} #section2 .m_about .slide_wrap .slide_ctn{height:270px;} } @media screen and (max-width:340px) { #section2 .m_about .slide_wrap .slide_btn{top:-128px;} #section2 .m_about .slide_wrap .slide_ctn{height:250px;} #section2 .m_about .slide_wrap .slide_ctn .item{max-width:280px;} } /* ***************************************************************** * filename : common.css * description : 변경된 reset / ui / button / input / color / common ( 공통으로 사용되는 CSS) * date : 2023-04-10 ***************************************************************** */ html {overflow-y:scroll;} html, body {height:100%;} body, input, button, select, textarea, sub {color:#333; font-size:18px; font-family:'pretendard', 'Noto Sans KR', dotum , sans-serif; font-weight: 400; line-height:1.4;} input, select, textarea {font-size:15px;} button {padding:0; border:none; background:transparent;} strong {font-weight:bold;} em { font-weight: 300; } th, td {vertical-align:middle;} img {max-width:100%;} @media screen and (-webkit-min-device-pixel-ratio:1.5) { body, input, button, select, textarea, sub, h1, h2, h3, h4 {font-family:arial, sans-serif;} select {padding-right:20px; background:#fff url('/images/common/ico_arrow.png') right 7px top 50% no-repeat; background-size:8px auto; -webkit-appearance:none; border-radius:0;} input[type="text"], input[type="password"], input[type="submit"], input[type="tel"], input[type="email"], textarea {-webkit-appearance:none; border-radius:0;} input[type="radio"] {border:1px solid #b9b9b9;} input[type="checkbox"] {border:1px solid #b9b9b9;} input[type="file"] {width:100%;} } @media screen and (max-width:1024px) { input, select, textarea {font-size:14px;} } @media screen and (max-width:620px) { body, input, button, select, textarea, sub {font-size:15px;} } /* 출력 및 정렬 */ .hidden {position:absolute; width:0; height:0; margin:0; padding:0; background:none; font-size:0; line-height:0;}/* 화면출력:N, 포커스 이동:N */ .blind,.skip {position:absolute; top:-1000px; left:-10000px; overflow:hidden; font-size:1px; text-indent:-9999px; line-height:0;}/* 화면출력:N, 포커스 이동:Y */ .none {display:none !important;} .overflow {overflow:hidden;} .left {float:left;} .right {float:right;} .clear {clear:both;} .clear:after {display:block; clear:both; content:'';} .v_align {display:table-cell; vertical-align:middle;} /* 테이블 */ .ovf_min {min-width:620px} .ovf_min1 {min-width:900px} .ovf_min2 {min-width:800px} .ovf_min3 {min-width:700px} .ovf_min4 {min-width:500px} @media screen and (max-width:800px) { .ovf_wrap {overflow-x:auto; overflow-y: hidden;} } .line_bk13 {display:block;} .line_bk12 {display:block;} .line_bk10 {display:block;} .line_bk9 {display:block;} .line_bk7 {display:block;} .line_bk6 {display:block;} .line_bk4 {display:block;} /*media query*/ @media screen and (max-width:1340px) { .line_bk13 {display:inline;} } @media screen and (max-width:1200px) { .line_bk12 {display:inline;} } @media screen and (max-width:1024px) { .line_bk10 {display:inline;} } @media screen and (max-width:920px){ .line_bk9 {display:inline;} } @media screen and (max-width:767px) { button {font-size:14px;} .line_bk7 {display:inline;} } @media screen and (max-width:640px) { .line_bk6 {display:inline;} } @media screen and (max-width:480px) { .line_bk4 {display:inline;} } /* ************** 폰트 스타일 ************** */ /* font align */ .t_left {text-align:left !important;} .t_center {text-align:center !important;} .t_right {text-align:right !important;} /* font weight */ .fw_300 {font-weight:300 !important;} .fw_500 {font-weight:500 !important;} .fw_normal {font-weight:normal !important;} .fw_bold {font-weight:bold !important;} .fz_14 {font-size:14px !important;} /* ************** 버튼 스타일 ************** */ /* 버튼 기본 */ .btn_st {display:inline-block; height:52px; position:relative; margin-bottom:3px; padding:0 30px; line-height:52px; vertical-align:middle; cursor:pointer; transition:all 0.15s ease-out; background:#fff; color:#333; border:1px solid rgba(0,0,0,0.2); font-size:16px; font-weight:normal} .btn_st:hover {background:#f0f0f0; text-decoration:none;} .btn_st.tiny {height:42px; padding:0 6px; font-size:13px; line-height:31px;} .btn_st.big {height:70px; width:400px; padding:0 6px; font-size:18px; letter-spacing:-1px;} .btn_st2 {display:inline-block; width:200px; height:50px; position:relative; margin-bottom:3px; padding:0 25px; line-height:50px; vertical-align:middle; cursor:pointer; transition:all 0.15s ease-out; background:#fff; color:#333; border:1px solid rgba(0,0,0,0.2); font-size:18px; font-weight:normal} .btn_st2:hover {background:#f0f0f0; text-decoration:none;} .btn_site, .btn_down {position:relative; height:52px; padding:0 45px 0 15px; text-align:center; color:#444} .btn_site:after, .btn_down:after {position:absolute; right:12px; display:block; width:20px; height:20px; content:'';} .btn_site:after {top:50%; margin-top:-10px; } .btn_site:hover:after, .btn_site:focus:after {} .btn_down:after { top:0; font-family:'xeicon'; content:'\e904'; font-size:22px} .btn_down:hover:after, .btn_down:focus:after {color:#0a54a3;} .btn_view {position:relative; color:#fff; background-color:#666d73; border-color:#666d73; font-weight:500; position:relative; height:60px; padding:0 80px 0 15px; font-size:20px; line-height:60px;} .btn_view:after {position:absolute; right:20px; top:0; content:'\e942'; font-family:'xeicon'; font-size:14px;} .btn_view:hover {border-color:#0053a5; background:#0053a5;} .btn_area {padding-top:20px;} .btn_area:after {display:block; clear:both; content:'';} @media screen and (max-width:620px) { /* 버튼 기본 */ .btn_area {padding-top:8px;} .btn_st, .btn_site, .btn_down {height:38px; line-height:38px; font-size:14px;} .btn_st {padding:0 15px} .btn_st2 {width:auto; height:38px; font-size:14px; line-height:38px;} .btn_site, .btn_down {padding:0 28px 0 12px;} .btn_site:after, .btn_down:after {background-size:13px auto; right:9px;} } /* 버튼 색상 */ .btn_navy {background:#0053a5; color:#fff;} /* 서브색상 */ .btn_navy:hover {background:#044483; } .btn_blue {background:#3d94c9; color:#fff;} /* 서브색상 */ .btn_blue:hover {background:#2283be; color:#fff;} .btn_sky {background:#6bafd7; color:#fff} /* 서브색상 */ .btn_sky:hover {background:#4597c7 } .btn_bluegray {background:#464a55; color:#fff;} .btn_bluegray:hover {background:#111;} .btn_orange {background:#ed8f2d; color:#fff} .btn_orange:hover {background:#ca6e00} .btn_brown {background:#564940; color:#fff;} .btn_brown:hover {background:#44372e;} .btn_dpnavy {background:#12203e; color:#fff} .btn_dpnavy:hover {background:#222} .btn_dpbk {background:#353c47; color:#fff} .btn_dpbk:hover {background:#111} .btn_red {background:#d23a3a; color:#fff;} .btn_mint {background:#3cd19f; color:#fff;} .btn_mint:hover {box-shadow:inset 0 -3px 0 rgba(0,0,0,0.25);} .btn_darkgray {background:#3b3f4d; color:#fff;} .btn_darkgray:hover {background:#222;} .btn_lightgray {background:#eee; color:#333; } .btn_gray {background:#dedede; color:#333;} .btn_grayblue {background:#86868c; color:#fff;} .btn_grayblue:hover {background:#737379; color:#fff;} .btn_violet {border:1px solid #8b89b7; background:#e8e8f4; color:#390a51;} /* ************** 폼 요소 ************** */ /* FORM 기본요소 */ input::placeholder {color:#999; font-weight:300;} textarea.textarea {padding:2px 5px; border:1px solid #d4d4d4;} select.select {height:42px; padding:0 30px 0 7px; border:1px solid #d4d4d4; background:#fff url(/_next/static/media/ico_arr_down.ae594db3.png) right 10px top 50% no-repeat; background-size:12px auto;} select.select::-ms-expand {display:none;} :root select.select{padding:0 30px 0 7px;} input.text {max-width:100%; height:42px; padding:0 7px; border:1px solid #d4d4d4;} input.num {width:60px;} input.calender {height:42px; padding:0 7px 0 7px; border:1px solid #d2d2d2; background-size:15px;} input.text:hover, select.select:hover, textarea.textarea:hover, input.calender:hover, span.format > button:hover {border:1px solid #8695bb; outline:none} input.text:focus, select.select:focus, textarea.textarea:focus, input.calender:hover, span.format > button:focus {border:1px solid #8695bb; outline:none} input:-moz-read-only {border-color:rgba(0, 0, 0, 0.06) !important; background:rgba(0, 0, 0, 0.04); color:#999;} input:disabled, input:read-only {border-color:rgba(0, 0, 0, 0.06) !important; background:rgba(0, 0, 0, 0.04); color:#999;} button:disabled {opacity:0.4; cursor:default;} .readonly, .disabled {border-color:rgba(0, 0, 0, 0.06) !important; background:rgba(0, 0, 0, 0.04); color:#999; cursor:default !important; } /* 파일 */ .filebox input {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; clip:rect(0, 0, 0, 0);} .filebox input + label {display:inline-block; line-height:43px; margin-right:5px; padding:0 15px; color:#444; font-size:15px; border:1px solid #444; transition:all 0.3s ease-out;} .filebox input + label i {position:relative; top:1px; margin-right:3px; color:#222; transform:rotate(90deg); font-weight:500; font-size:16px} .filebox ul {overflow:hidden; margin-top:5px; padding:17px 15px; background:#f6f6f6; border:1px solid #d9d9d9} .filebox ul li {font-size:15px; color:#666} .filebox ul li .name {display:inline-block; overflow:hidden; width:auto; max-width:calc(100% - 30px); text-overflow:ellipsis; white-space:nowrap;} .filebox ul li .delete {display:inline-block; width:15px; height:15px; margin:2px 0 0 9px; vertical-align: top;} .filebox ul li .delete:before, .filebox ul li .delete:after {content:''; display:block; position:absolute; width:16px; height:2px; background:#222;} .filebox ul li .delete:before {transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);} .filebox ul li .delete:after {transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);} .filebox input:hover + label, .filebox input:focus + label { background:#5a5f71; color:#fff;} .filebox input:hover + label i , .filebox input:focus + label i {color:#fff;} /* 체크박스, 라디오 */ .input { position:relative; display:inline-block} .input label { cursor:pointer; } .input:last-child { margin-right: 0; } .checkbox, .radio { position: absolute; left: 0; top: 0; opacity: 0; } .checkbox + label, .radio + label { padding-left:27px; } .checkbox + label:before, .radio + label:before { position: absolute; left:0; top:0px; width:22px; height:22px; border: 1px solid #d0d0d0; background-color:#fff; content: ''; } .checkbox + label:after, .radio + label:after { position: absolute; left:6px; top:6px; width:10px; height:10px; content: ''; transition: all 0.2s; } .checkbox:checked + label:after, .radio:checked + label:after { background-color:#283593; } .checkbox:focus + label:before, .radio:focus + label:before { outline: 1px dotted #000; } .checkbox.disabled + label, .radio.disabled + label { cursor:default; } .checkbox.disabled + label:before, .radio.disabled + label:before { background-color:#f5f5f5; } .checkbox.disabled:checked + label:before, .radio.disabled:checked + label:before { background-color:#f5f5f5 } .checkbox.disabled:checked + label:after, .radio.disabled:checked + label:after { background-color:#bfbfbf } .radio + label:before { border-radius:100%; } .radio + label:after { border-radius:100%; } .checkbox:checked + label:after {} .checkbox + label:after { left:5px; top:5px; display:none; width:12px; height:7px; border:2px solid #283593; border-top:0; border-right:0; transform:rotate(-45deg); } .checkbox:checked + label:after { display:block; background-color:transparent; } .checkbox.disabled:checked + label:after { border-color:#bfbfbf; background-color:transparent; } .input.btn .checkbox + label, .input.btn .radio + label { display:inline-block; width:100%; padding:9px 20px 9px 38px; border:1px solid #d9d9d9; border-radius:3px; transition:background 0.2s ease-out; } .input.btn .checkbox + label:hover, .input.btn .radio + label:hover, .input.btn .checkbox:focus + label, .input.btn .radio:focus + label { background:#f5f5f5 } .input.btn .checkbox + label:before, .input.btn .radio + label:before { left:12px; top:10px; } .input.btn .checkbox + label:after { left:17px; top:16px; } .input.btn .radio + label:after { left:18px; top:16px; } .input.btn .checkbox.disabled + label, .input.btn .radio.disabled + label {background-color:#f9f9f9} @media screen and (max-width:620px) { /* FORM 기본요소 */ input.text , select.select, input.disable, input.calender {height:38px !important;} /* 파일 */ .filebox input + label {padding:0 8px; line-height:36px; font-size:13px} .filebox input + label i {margin-right:0px; font-size:15px} .filebox ul {margin-top:5px; padding:6px; font-size:13px} .filebox ul li {float:none; font-size:13px} /* 체크박스, 라디오 */ .checkbox + label, .radio + label { padding-left:22px; } .checkbox + label:before, .radio + label:before { width:18px; height:18px; } .radio + label:after { left:5px; top:5px; width:8px; height:8px; } .checkbox + label:after { left:4px; top:4px; width:10px; height:6px; } .input.btn .checkbox + label, .input.btn .radio + label { padding:9px 20px 9px 35px; } .input.btn .radio + label:after { left:17px; top:15px; } } /* ************** 그리드 스타일 ************** */ /* grid(공간없음) */ .flex {display:flex; } .col:after {display:block; clear:both; content:'';} .col > span {display:block; float:left;} .col2 > span {width:50%;} .col3 > span {width:33.333%;} .col4 > span {width:25%;} .col5 > span {width:20%;} /* grid(공간있음) */ .flex-space {display:flex; } .flex-space > span { margin-right:1%; } /* float-grid */ .float:after {display:block; clear:both; content:'';} .float > span {float:left} .float.col2 > span {width:49.5%; margin-right:1%;} .float.col2 > span:last-child {margin-right:0;} .float.col3 > span {width:32.66%; margin-right:1%;} .float.col3 > span:nth-child(3n) {margin-right:0;} .float.col4 > span {width:24.25%; margin-right:1%;} .float.col4 > span:nth-child(4n) {margin-right:0;} @media screen and (max-width:800px) { /* float-grid */ .float.col4 > span {width:49.5%; margin-right:1%; margin-bottom:5px;} .float.col4 > span:nth-child(2n) {margin-right:0;} } @media screen and (max-width:620px) { /* grid(공간있음) */ .flex-space {flex-flow:wrap row} .flex-space > span { width:100%; margin-right:0%; margin-bottom:2%; } /* float-grid */ .float.col2 > span, .float.col3 > span, .float.col4 > span {width:100%; margin-bottom:2%;} } /* focus */ /*button:focus, input:focus, select:focus, textarea:focus, a:focus {outline:1px dotted #222;} */ /* grid */ .col:after {display:block; clear:both; content:'';} .col > span {display:block; float:left;} .col2 > span {width:50%;} .col3 > span {width:33.333%;} .col4 > span {width:25%;} .col5 > span {width:20%;} /* size */ .w100 {width:100%;} .w70 {width:70%;} .w50 {width:50%;} .w45 {width:45%;} .w40 {width:40%;} .w30 {width:30%;} .w25 {width:25%;} .w20 {width:20%;} .w10 {width:10%;} .w16 {width:16.66%;} /* margin padding */ .mt0 {margin-top:0px !important;} .mt5 {margin-top:5px;} .mt10 {margin-top:10px;} .mt15 {margin-top:15px;} .mt20 {margin-top:20px;} .mt25 {margin-top:25px;} .mt30 {margin-top:30px;} .mt35 {margin-top:35px;} .mt40 {margin-top:40px;} .mt45 {margin-top:45px;} .mt50 {margin-top:50px;} .mt60 {margin-top:60px;} .mr5 {margin-right:5px;} .mr10 {margin-right:10px;} .mr15 {margin-right:15px;} .mr20 {margin-right:20px;} .mr25 {margin-right:25px;} .mr30 {margin-right:30px;} .mr35 {margin-right:35px;} .mr40 {margin-right:40px;} .mr45 {margin-right:45px;} .mr50 {margin-right:50px;} .ml5 {margin-left:5px !important;} .ml10 {margin-left:10px !important;} .ml15 {margin-left:15px !important;} .ml20 {margin-left:20px !important;} .ml25 {margin-left:25px !important;} .ml30 {margin-left:30px !important;} .ml35 {margin-left:35px !important;} .ml40 {margin-left:40px !important;} .ml45 {margin-left:45px !important;} .ml50 {margin-left:50px !important;} .mb5 {margin-bottom:5px !important;} .mb10 {margin-bottom:10px !important;} .mb15 {margin-bottom:15px !important;} .mb20 {margin-bottom:20px !important;} .mb25 {margin-bottom:25px !important;} .mb30 {margin-bottom:30px !important;} .mb35 {margin-bottom:35px !important;} .mb40 {margin-bottom:40px !important;} .mb50 {margin-bottom:50px !important;} .mb60 {margin-bottom:60px !important;} .mb70 {margin-bottom:70px !important;} .mb80 {margin-bottom:80px !important;} .mb100 {margin-bottom:100px !important;} .pt5 {padding-top:5px !important;} .pt10 {padding-top:10px !important;} .pt20 {padding-top:20px !important;} .pt30 {padding-top:30px !important;} .pt40 {padding-top:40px !important;} .pt50 {padding-top:50px !important;} .pt60 {padding-top:60px !important;} .pl5 {padding-left:5px !important;} .pl10 {padding-left:10px !important;} .pl20 {padding-left:20px !important;} .pl30 {padding-left:30px !important;} .pl40 {padding-left:40px !important;} .pl50 {padding-left:50px !important;} .pl60 {padding-left:60px !important;} @media screen and (max-width:620px) { .mb5 {margin-bottom:2px !important;} .mb10 {margin-bottom:5px !important;} .mb15 {margin-bottom:6px !important;} .mb20 {margin-bottom:10px !important;} .mb25 {margin-bottom:12px !important;} .mb30 {margin-bottom:15px !important;} .mb35 {margin-bottom:18px !important;} .mb40 {margin-bottom:20px !important;} .mb50 {margin-bottom:25px !important;} .mb60 {margin-bottom:30px !important;} .mb70 {margin-bottom:30px !important;} .mb80 {margin-bottom:30px !important;} } @media screen and (max-width:800px) { .ovf_wrap {overflow-x:auto; overflow-y: hidden;} } select {position:relative; right:40px; padding:0 55px 0 15px; width:100%; height:40px; font-size:15px; color:#333; -webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; line-height:normal; background:url(/_next/static/media/icon_select.9f2a2086.svg) right 10px center no-repeat; border:1px solid #cfcfcf; border-radius:5px;} select:checked {color:#191919;} input::placeholder, select::placeholder, textarea::placeholder {color:#999;}