@charset "utf-8"; /*─────────────────────────────────────────────────────────── header, footer, main 관련 작성 css 파일입니다. ** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── layout common ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ #wrap {position:relative;height:100%;width:100%;margin:0;padding:0;overflow:hidden;} /* #header 와 #container, #footer 전체 감싸는 영역 */ #wrap #header {width:100%;margin:0;padding: 0;overflow: visible;} #wrap #container {width:100%;margin:0;padding:0;} #wrap #footer {width:100%;margin:0;} /* #container 안의 레이아웃 */ #contents_wrap {width:1430px;margin:0 auto;padding-left:15px;padding-right:15px;position:relative;z-index:1;box-sizing:border-box;} /* #container 안의 컨텐츠 감싸는 영역 */ #contents_wrap #side_box {width:100%;padding:110px 0 0 0;box-sizing:border-box;} /* lnb 감싸는 영역 */ #contents_wrap #contents_box {width:100%;padding:0 0 160px 0;box-sizing:border-box;} /* 컨텐츠를 감싸는 영역 */ #contents_wrap #side_box + #contents_box {padding-top:0;} /* lnb와 컨텐츠가 float 일때 사이즈 재설정 */ /* navigation layout */ #contents_wrap .nav_wrap {box-sizing:border-box;} /* #content */ #content {width:100%;margin:0;padding:0;text-align:left;box-sizing:border-box;} /* navigation 을 제외한 컨텐츠 */ #content .sub_content{width:100%;margin:0 auto;background:#fff;box-sizing:border-box;} #content .sub_content:after {clear:both;content:"";display:block;} /* 컨텐츠 전체 가로 사이즈 */ .main_w_custom {width:1630px;padding-left:15px;padding-right:15px;text-align:left;margin:0 auto;box-sizing:border-box;} .w_custom {width:1430px;padding-left:15px;padding-right:15px;text-align:left;margin:0 auto;box-sizing:border-box;} @media only screen and (max-width:1630px) { .main_w_custom {width:100%;padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1430px) { body.on {height:100%;overflow:hidden;} #contents_wrap {width:100%;padding-left:15px !important;padding-right:15px !important;} .w_custom{width:100%;padding-left:15px !important;padding-right:15px !important;} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding: 0 0 140px 0;} } @media only screen and (max-width:860px) { #contents_wrap #side_box {padding: 85px 0 0 0;} #contents_wrap #contents_box {padding: 0 0 120px 0;} } @media only screen and (max-width:767px) { /*.w_custom {padding-left:4% !important;padding-right:4% !important;}*/ #contents_wrap #side_box {display:none;} .sub_goods #contents_wrap #side_box {display:block;padding:0;} } @media only screen and (max-width:640px) { .w_custom{width:100%;padding-left:12px !important;padding-right:12px !important;} #contents_wrap {width:100%;padding-left:12px !important;padding-right:12px !important;} #contents_wrap #contents_box {padding: 0 0 100px 0;} } @media only screen and (max-width:479px) { #contents_wrap #contents_box {padding: 0 0 80px 0;} } @media only screen and (max-width:320px) { .w_custom {padding-left:10px !important;padding-right:10px !important;} } /*─────────────────────────────────────────────────────────── HEADER | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ .skip_nav {position:relative;z-index:9999;} .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;} .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;} #header {box-sizing:border-box;transition:all 0.3s;} #header.on {box-shadow:0 3px 10px rgba(0,0,0,0.1);} #wrap .header_cont {position:relative;display: flex;align-items: center;height: 100px;} #header {left:0;top:0;border:0;text-align:center;position:fixed;z-index:10;width:100%;box-sizing:border-box;font-size:0;background:#fff;} #wrap .header_cont .hd_logo {left:0;top: 50%;position:absolute;z-index:15;width: 178px;height: 46px;transform: translateY(-50%);} #wrap .header_cont .hd_logo a {background: url('../images/skin/hd_logo.png') no-repeat left;font-size: 0;display: block;height: 100%;background-size: auto 100%;} #header .hd_lnb {line-height:33px;margin:0;padding:0;font-size:0;width:100%;display:block;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;z-index:10;} #header .hd_lnb > li, #header .hd_lnb > li > a {padding:0;line-height: 2;font-size: var(--title-18);font-weight: 600;color: var(--black-color03);vertical-align: middle;text-align:center;display:inline-block;box-sizing:border-box;transition: all .2s;} #header .hd_lnb > li {padding: 0 30px;position:relative;} #header .hd_lnb > li > a {padding:0;position:relative;z-index:1;line-height: 100px;} #header .hd_lnb > li .hd_lnb_dep2 {z-index: 55;display:none;position:absolute;left:0;top:100%;background:#fff;padding: 10px 0;width:100%;box-shadow:0 3px 10px rgba(0,0,0,0.1);} #header .hd_lnb > li .hd_lnb_dep2 li {padding:0 15px;display:block;} #header .hd_lnb > li .hd_lnb_dep2 li a {font-size:var(--title-16);} #wrap .header_cont .hd_right {top:50%;right:0;height:18px;line-height:18px;margin:0;padding:0;font-size:0;position:absolute;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;z-index:15;transform: translateY(-50%);display: inline-flex;} #wrap .header_cont .hd_right .hd_lang, #wrap .header_cont .hd_right .menu-trigger {display:inline-block;vertical-align:middle;} #wrap .header_cont .hd_right .hd_lang {} #wrap .header_cont .hd_right .hd_lang li, #wrap .header_cont .hd_right .hd_lang li a {line-height: 1;padding:0;font-size:14px;font-weight:400;color:#888;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #wrap .header_cont .hd_right .hd_lang li {} #wrap .header_cont .hd_right .hd_lang li + li a {padding: 0 0 0 17px;} #wrap .header_cont .hd_right .hd_lang li, #wrap .header_cont .hd_right .hd_lang li a {line-height: 1;padding:0;font-size: var(--title-18);font-weight: 600;color: rgba(51, 51, 51, 0.4);vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;} #wrap .header_cont .hd_right .hd_lang li.on a {color:rgba(51,51,51,1);} #wrap .header_cont .hd_right .menu-trigger {position:relative;padding:0;width: 30px;height:18px;box-sizing: border-box;margin-left: 55px;} #wrap .header_cont .hd_right .menu-trigger span {transition:0.3s;position:absolute;width: 100%;height:2px;background-color: var(--black-color03);left: 0;} #wrap .header_cont .hd_right .menu-trigger span:nth-of-type(1) {top: 0;} #wrap .header_cont .hd_right .menu-trigger span:nth-of-type(2) {top: 50%;margin-top: -1px;} #wrap .header_cont .hd_right .menu-trigger span:nth-of-type(3) {bottom: 0;} /* main header */ .main_index #header{border-bottom:0px;background:transparent;position:fixed;border-bottom:1px solid rgba(255,255,255,0.1);} .main_index #header.on {background:#fff;} .main_index #header .hd_logo a {background: url('../images/skin/hd_logo_on.png') no-repeat left;background-size: auto 100%;} .main_index #header .hd_lnb > li > a {color:#fff;} .main_index #header .hd_right .hd_lang li a {color:rgba(255,255,255,0.4);display: block;} .main_index #header .hd_right .hd_lang li.on a {color:#fff;} .main_index #header .hd_right .menu-trigger span {background:#fff;} /* main header on */ .main_index #header.on .hd_logo a {background: url('../images/skin/hd_logo.png') no-repeat left;background-size: auto 100%;} .main_index #header.on .hd_lnb > li a {color:var(--black-color03);} .main_index #header.on .hd_right .hd_lang li a {color:rgba(51, 51, 51, 0.4);} .main_index #header.on .hd_right .hd_lang li.on a {color:var(--black-color03);} .main_index #header.on .hd_right .menu-trigger span {background:var(--black-color03);} /* main header hover */ .main_index #header:hover {background:#fff;border-bottom:0;} .main_index #header:hover .hd_logo a {background: url('../images/skin/hd_logo.png') no-repeat left;background-size: auto 100%;} .main_index #header:hover .hd_lnb > li a {color:var(--black-color03);} .main_index #header:hover .hd_right .hd_lang li a {color:rgba(51, 51, 51, 0.4);} .main_index #header:hover .hd_right .hd_lang li.on a {color:var(--black-color03);} .main_index #header:hover .hd_right .menu-trigger span {background:var(--black-color03);} @media only screen and (max-width:1630px) { #wrap .header_cont {position:static;} #wrap .header_cont .hd_logo {left:15px;} #wrap .header_cont .hd_right {right:15px;} } @media only screen and (max-width:1217px) { #header .hd_lnb > li {padding:0 30px;left:3%;position:relative;} } @media only screen and (max-width:1024px) { #wrap .header_cont {height: 80px;} #wrap .header_cont .hd_logo {} #header .hd_lnb {display:none;} #wrap .header_cont .hd_right {right:19px;} } @media only screen and (max-width:980px) { } @media only screen and (max-width:860px) { } @media only screen and (max-width:768px) { #wrap .header_cont .hd_logo {width:168px;height:43px;} #wrap .header_cont .hd_right .menu-trigger {margin-left:30px;} } @media only screen and (max-width:640px) { #wrap .header_cont {height:60px;} #wrap .header_cont .hd_logo {width:148px;height:38px;} #wrap .header_cont .hd_right .hd_lang {display:none;} } @media only screen and (max-width:479px) { #wrap .header_cont .hd_logo {width:128px;height:33px;} } @media only screen and (max-width:320px) { #wrap .header_cont .hd_logo {left:10px;} #wrap .header_cont .hd_right {right:10px;} } /*─────────────────────────────────────────────────────────── ASIDE | outline/header.html, outline/nav.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ /* aside */ #aside {overflow:hidden;top: 0;right: 0;width:100%;transition:0.5s;height:100%;box-sizing:border-box;box-sizing:border-box;position:fixed;background:#fff;z-index:99;overflow:hidden;opacity: 0;transition: all 0.4s;/* display:none; */z-index: -1;} #aside.on {visibility: visible;opacity: 1;/* display:block; */z-index: 99;} #aside .aside_box{overflow:hidden;} #aside .aside_box .header_cont {position: absolute;width:100%;border-bottom:1px solid #ddd;display:flex;align-items:center;top: 0;left: 0;} #aside .aside_box .header_cont .main_w_custom {position:relative;} #aside .aside_box .header_cont .hd_lang {display:inline-flex;align-items:center;} #aside .aside_menu {width:100%;} .aside_bg {left:0px;top:0px;bottom:0;right:0;width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;transition:0.8s;z-index:50;position:fixed;display:none;} .aside_bg.on {opacity:1;display:block;} #aside .aside_box .btn_aside_close {/* top:0; *//* right:0; */width: 25px;height: 20px;/* cursor:pointer; *//* margin-left: 20px; *//* box-sizing: border-box; *//* position:relative; */display: inline-block;vertical-align: middle;margin-left: 55px;} #aside .aside_box .btn_aside_close div{width: 26px;height: 26px;position:absolute;top:50%;right:0;margin-top:-10px;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 {width:100%;height:100%;position: absolute;top: 0;left: 0;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span {transition:0.3s;position:absolute;width:100%;height:2px;background-color:#333;left:0;top: 9px;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(1) {-webkit-transform:translateY (0) rotate (-45deg);transform:translateY(0) rotate(-45deg);} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(2) {opacity:0;} #aside .aside_box .btn_aside_close .menu-trigger2.active-1 span:nth-of-type(3) {-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);} #aside .aside_box {} #aside .aside_box .w_custom{max-width:1380px;} #aside .aside_box .aside_logo {text-align:center;margin-bottom:58px;margin-top:40px;} #aside .aside_box .aside_logo a {display:inline-block;vertical-align:top;} #aside .aside_box {width:100%;height:100%;margin:0;padding: 0 0 20px;overflow-y:auto;position:relative;z-index:1;box-sizing:border-box;display:block;display: flex;align-items: center;justify-content: center;} #aside .aside_box .aside_gnb {text-align:left;display:block;} #aside .aside_box .aside_gnb li {display:inline-block;vertical-align:middle;} #aside .aside_box .aside_gnb li + li {margin-left:23px;} #aside .aside_box .aside_gnb li a {display:block;font-size:14px;color:#ffffff;} #aside .aside_box .aside_search {margin:40px 0 28px;height:40px;background:#fff;position:relative;display:block;} #aside .aside_box .aside_search .search_input {width:100%;padding:0 10px;box-sizing:border-box;color:#333;font-size:13px;border:none;line-height:40px;} #aside .aside_box .aside_search .search_enter {width:24px;height:24px;background:url('../images/skin/aside_search.png') no-repeat 0 0;position:absolute;right:15px;top:50%;margin-top:-12px;background-size:auto 100%;font-size: 0;border: 0;} #aside ul.slidemenu {box-sizing:border-box;padding: 70px 0;display:flex;flex-wrap:wrap;width:100%;justify-content: center;} #aside ul.slidemenu.m_menu{display:none;} #aside ul.slidemenu li.on > .icons {background:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),transparent;background-position:center;background-size:100% 1px,0 100%;background-repeat:no-repeat;} #aside ul.slidemenu .depth1_li {padding:0 10px;text-align:center;display:block;vertical-align:top;font-size:16px;position:relative;width: 25%;box-sizing:border-box;} #aside ul.slidemenu .depth1_li + .depth1_li {margin-left:0;} #aside ul.slidemenu .depth1_li:first-child{padding-left:0;} #aside ul.slidemenu .depth1_li:last-child{padding-right:0;} #aside ul.slidemenu .depth1_li a,#aside ul.slidemenu .depth1_li .icons {display:inline-block;vertical-align:middle;} #aside ul.slidemenu .depth1_li .depth1_a {transition:0.2s;padding:0;line-height:1.5;font-size: var(--title-40);color: var(--black-color03);font-weight:700;position:relative;padding-bottom:20px;margin-bottom: 20px;} #aside ul.slidemenu .depth1_li .depth1_a:after{content:'';position:absolute;bottom:0;left:50%;width:30px;height:2px;background: var(--point-red);margin-left:-15px;} #aside ul.slidemenu .depth1_li .depth {padding:0;border:0;border-bottom:1px solid rgba(255,255,255,0.2);} #aside ul.slidemenu .depth1_li .depth li {padding-left:0;position:relative;} #aside ul.slidemenu .depth1_li .depth li a {font-size: var(--title-20);line-height:1.5;color: var(--black-color06);position:relative;padding:13px 0;word-break:keep-all;} #aside ul.slidemenu .depth1_li .icons {display:none;width:20px;height:20px;background:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),transparent;background-position:center;background-size:100% 1px,1px 100%;background-repeat:no-repeat;} #aside ul.slidemenu .depth1_li .depth1_a.on .icons {} @media only screen and (max-width:1320px) { } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1024px) { #aside .aside_top{height:60px;} #aside .hd_logo{width:150px;height:33px;} #aside .aside_box .aside_logo{margin-bottom:20px;} #aside ul.slidemenu{padding:30px 0;} #aside ul.slidemenu .depth1_li{width:33.33%;margin-top:30px;} #aside ul.slidemenu .depth1_li:nth-child(-n+3){margin-top:0;} #aside ul.slidemenu .depth1_li:first-child{padding-left:10px;} #aside ul.slidemenu .depth1_li:last-child{padding-right:10px;} #aside ul.slidemenu .depth1_li .depth1_a{font-size:28px;} #aside ul.slidemenu .depth1_li .depth li a{font-size:18px;padding:10px 0;} } @media only screen and (max-width:980px) { } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { #aside .aside_box{padding:0;display: block;} #aside .aside_box .header_cont {position:relative;} #aside .hd_right .inquiry_btn a{padding:0 37px 0 16px;height:36px;line-height:36px;border-radius:18px;background-size:auto 13px;background-position:right 16px center;} #aside .hd_right .btn_aside_close{margin-left: 10px;width:35px;} #aside .hd_right .btn_aside_close div{width:21px;height:18px;margin-top:-9px;} #aside .aside_box .aside_logo{display:none;} #aside ul.slidemenu.pc_menu{display:none;} #aside ul.slidemenu.m_menu{display:block;} #aside ul.slidemenu{padding:30px 5px;} #aside ul.slidemenu .depth1_li{width:100%;padding:0;margin-top:0;} #aside ul.slidemenu .depth1_li:first-child{padding-left:0;} #aside ul.slidemenu .depth1_li:last-child{padding-right:0;} #aside ul.slidemenu .depth1_li .depth1_a:after{display:none;} #aside ul.slidemenu .depth1_li .icons{display:block;} #aside ul.slidemenu .depth1_li .depth1_a{font-size: var(--title-30);letter-spacing:-0.03em;font-weight: 600;padding: 20px 0;margin-bottom:0;/* border-bottom: 1px solid var(--border-color01); */width:100%;} #aside ul.slidemenu .depth1_li .depth1_a .icons{position:absolute;top:50%;right:10px;margin-top:-9px;width:9px;height:9px;border-bottom: 1px solid var(--black-color03);border-right: 1px solid var(--black-color03);transform:rotate(45deg)} #aside ul.slidemenu .depth1_li .depth1_a.on{color: var(--point-red);} #aside ul.slidemenu .depth1_li .depth1_a.on .icons{border-bottom: 1px solid var(--point-red);border-right: 1px solid var(--point-red);transform:rotate(-135deg);margin-top:-3px;} #aside ul.slidemenu .depth1_li .depth{padding: 0 0 15px;display:none;} #aside ul.slidemenu .depth1_li .depth li a{font-size:17px;letter-spacing:-0.04em;color:#666;padding: 12px 0;line-height: 1.4;width: 100%;} } @media only screen and (max-width:479px) { #aside {right: 0;width: 100%;} } @media only screen and (max-width:320px) { } /*─────────────────────────────────────────────────────────── FOOTER | outline/footer.html ───────────────────────────────────────────────────────────*/ /* PC 일반 */ #footer {background:#121212;padding:64px 0 55px;} #footer .ft_top {display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(217,217,217,0.2);padding-bottom:20px;margin-bottom:30px;} #footer .ft_top .logo {width:180px;height:46px;} #footer .ft_top .logo img {} #footer .ft_top .gnb {font-size:0;} #footer .ft_top .gnb li {display:inline-block;font-size:var(--title-14);font-weight:400;color:var(--black-color10);} #footer .ft_top .gnb li + li {padding-left:36px;} #footer .ft_top .gnb li a {font-size:inherit;font-weight:inherit;color:inherit;} #footer .ft_top .gnb li a strong {font-size:inherit;font-weight:inherit;color:var(--point-white);} #footer .ft_cont {display:flex;align-items:flex-start;justify-content:space-between;} #footer .ft_cont .ft_info {} #footer .ft_cont .ft_info .info {} #footer .ft_cont .ft_info .info li {display:inline-block;font-size:var(--title-14);line-height:2.14;font-weight:400;color:var(--black-color10);} #footer .ft_cont .ft_info .info li + li {padding-left:100px;} #footer .ft_cont .ft_info .info li span {margin:0 18px;} #footer .ft_cont .ft_info .info li a {font-size:inherit;font-weight:inherit;color:inherit;} #footer .ft_cont .ft_info .copy {font-size:var(--title-14);font-weight:400;line-height:1.71;color:var(--black-color10);margin-top:60px;} #footer .ft_cont .ft_info .copy a {font-size:inherit;font-weight:Inherit;color:inherit;margin-left:30px;} #footer .ft_cont .ft_link {} #footer .ft_cont .ft_link li {} #footer .ft_cont .ft_link li + li {margin-top:14px;} #footer .ft_cont .ft_link li a {font-size:var(--title-14);font-weight:500;color:#fff;display:block;padding:11px 26px;border:1px solid rgba(255,255,255,0.3);border-radius:4px;transition:all 0.3s;} .scr_top {position:fixed;display:block;width:46px;height:46px;background:var(--black-color00) url('../images/skin/quick_top.svg') no-repeat center;border-radius:10px;font-size:0;bottom:-50px;right:40px;transition:all 0.3s;} .scr_top.on {bottom:60px;} @media only screen and (min-width:1023px) { #footer .ft_cont .ft_link li:hover a {border-color:var(--point-orange);background:var(--point-orange);} } @media only screen and (max-width:1380px) { #footer .ft_cont .ft_info .info li + li {padding-left:60px;} } @media only screen and (max-width:1024px) { #footer .ft_cont .ft_info .info li {display:block;} #footer .ft_cont .ft_info .info li + li {padding:0;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:768px) { #footer .ft_top .logo {width:170px;height:44px;} #footer .ft_cont .ft_link li + li {margin-top:10px;} #footer .ft_cont .ft_info .copy {margin-top:50px;} } @media only screen and (max-width:640px) { #footer {padding:40px 0 60px;} #footer .ft_top .logo {width:150px;height:38px;} #footer .ft_cont {flex-direction: column-reverse;} #footer .ft_cont .ft_link {font-size:0;width:100%;padding-bottom:20px;} #footer .ft_cont .ft_link li {display:inline-block;width:calc(50% - 5px);text-align:center;} #footer .ft_cont .ft_link li + li {margin-left:10px;margin-top:0;} #footer .ft_cont .ft_info .info li {line-height:1.8;} #footer .ft_cont .ft_info .copy {margin-top:30px;} #footer .ft_cont .ft_info .copy a {display:block;margin:0;margin-top:3px;} .scr_top {width:38px;height:38px;right:20px;} .scr_top.on {bottom:20px;} } @media only screen and (max-width:479px) { #footer .ft_top {display:block;} #footer .ft_top .gnb {padding-top:18px;} #footer .ft_top .gnb li + li {padding-left:25px;} #footer .ft_cont .ft_info .copy {margin-top:20px;} } /*─────────────────────────────────────────────────────────── MAIN | index.html ───────────────────────────────────────────────────────────*/ /* *PC 일반 **/ .main_index #container {padding-top:0 !important;} .main {width:100%;overflow:hidden;} .main_title {text-align:center;font-size:var(--title-20);padding-bottom:40px;} .main_title h3 {font-size:var(--title-70);font-weight:400;color:var(--black-color01);display:block;line-height:1;} .main_title h3 strong {font-size:inherit;font-weight:700;color:inherit;} .main_title p {font-size:90%;line-height:1.55;font-weight:400;color:var(--black-color06);padding-top:20px;} /* visual */ #wrap .main_visual {position:relative;width:100%;margin:0;height:100vh;overflow:hidden;} #wrap .main_visual .slick-slide {overflow:hidden;position:relative;text-align:center;height:100vh;border:none;min-height:100% !important;} .main_visual .slick-slide a {display:inline-block;height:100%;width:100%;margin:0 auto;text-align:Center;position:absolute;left:0;top:0;outline:0;background-position:center;background-size:cover !important;transition:transform 2s ease-in-out, opacity 2s ease-in-out;transform:scale(1) rotate(0.003deg);} .main_visual .slick-slide img {display:inline-block;height:auto;width:100%;} .main_visual .txt_box {text-align:center;transform:translate(-50%, -50%);position:absolute;left:50%;top:47%;font-size:0;} .main_visual .txt_box strong, .main_visual .txt_box p {display:block;text-align:left;color:#fff;opacity:0;transform:translateY(100px);transition:all 0.5s;} .main_visual .txt_box strong {font-size:var(--title-70);line-height:1.28;font-weight:700;} .main_visual .txt_box p {font-size:var(--title-20);line-height:1.5;font-weight:400;padding-top:21px;} /*active*/ .main_visual .active a {transform:scale(1.05);} .main_visual .active .txt_box strong, .main_visual .active .txt_box p {opacity:1;transform:translateY(0);transition:all 0.5s;} .main_visual .active .txt_box strong {} .main_visual .active .txt_box p{transition-delay:0.3s;} /*도트 타입 C*/ #wrap .main_visual .slick-dots {text-align: center;display: inline-block;vertical-align: middle;position: absolute;font-size:0;left: 50%;bottom:231px;z-index: 11;text-align: left;box-sizing: border-box;padding-left: 70px;} #wrap .main_visual .slick-dots li{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:0;} #wrap .main_visual .slick-dots li:first-of-type {padding-left:23px;} #wrap .main_visual .slick-dots li:last-of-type {padding-right:23px;} #wrap .main_visual .slick-dots li button{font-size: 0;color: #fff;font-weight: 400;box-sizing: border-box;display: inline-block;margin: 0 4px;width: 10px;height: 10px;background: none;opacity: 1;border-radius: 0;border-radius: 100%;background: rgba(255,255,255,0.4);} #wrap .main_visual .slick-dots li.slick-active button{background:var(--point-blue);} /*타입 A*/ .main_visual .visual_btn_wrap.type_A {position:absolute;left:50%;transform:translateX(-50%);bottom:215px;overflow:hidden;text-align:center;z-index:10;text-align:left;} .main_visual .visual_btn_wrap.type_A .control_box, .main_visual .visual_btn_wrap.type_A .slideController {display:inline-block;vertical-align:middle;width:auto;box-sizing:border-box;} .main_visual .visual_btn_wrap.type_A .slideController {display:inline-flex;align-items: center;width:67px;} .main_visual .visual_btn_wrap.type_A .control_box {font-size:0;} .main_visual .visual_btn_wrap.type_A .control_box .play_btn_box, #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow {font-size:0;display:inline-block;vertical-align:middle;height:20px;} /*화살표*/ #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow {width:42px;height:42px;border-radius:12px;border:1px solid #fff;box-sizing:border-box;margin:0;position: static;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow:after{display: none;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .prev {background:url('../images/skin/main_visual_prev.svg') no-repeat center;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .next {background:url('../images/skin/main_visual_next.svg') no-repeat center;margin-left:28px;} /*카운팅*/ .main_visual .visual_btn_wrap.type_A .slideController{} .main_visual .visual_btn_wrap.type_A .slideController span{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:15px;color:#fff;font-weight:400;letter-spacing:0;width:auto;position:relative;top:0;left:0;z-index:20;opacity: 0.4;} .main_visual .visual_btn_wrap.type_A .slideController .slideCountItem{font-weight:600;opacity: 1;} .main_visual .visual_btn_wrap.type_A .slideController .slideCountItem:before{content:"0";font-size:inherit;color:inherit;font-weight:inherit;} .main_visual .visual_btn_wrap.type_A .slideController .line {font-size:0;margin:0 14px;width:1px;height:12px;background:#fff;opacity:0.4;vertical-align:middle;} /* we are CCRIPO */ .main_about {padding:157px 0;background:#fdfdfd url('../images/skin/main_about_bg.jpg') no-repeat center bottom;background-size:100% auto;} .main_about .main_title {padding-bottom:60px;} .main_about .about_cont {} .main_about .about_cont ul {display:flex;} .main_about .about_cont ul li {width:calc(33.333% - 23.33px);height:0;padding-bottom:680px;position:relative;position:relative;overflow:hidden;z-index:1;} .main_about .about_cont ul li + li {margin-left:35px;} .main_about .about_cont ul li .link {position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;} .main_about .about_cont ul li .txt_wrap {position:absolute;padding:0 40px;box-sizing:border-box;top:48px;left:0;z-index:1;font-size:var(--title-20);} .main_about .about_cont ul li .txt_wrap h4 {font-size:var(--title-40);font-weight:500;color:#fff;display:block;line-height:1;} .main_about .about_cont ul li .txt_wrap p {font-size:var(--title-18);line-height:1.5;font-weight:400;color:#fff;padding-top:24px;} .main_about .about_cont ul li .txt_wrap p strong {font-size:inherit;font-weight:600;color:inherit;} .main_about .about_cont ul li .txt_wrap .view_more {display:inline-block;width:40px;height:40px;margin-top:80px;background:var(--point-green) url('../images/skin/more_arrow_icon.svg') no-repeat center;background-size:12px auto;border-radius:100%;opacity:0;} .main_about .about_cont ul li .img_wrap {width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;} .main_about .about_cont ul li:nth-of-type(1) .img_wrap {background:url('../images/skin/main_about_img01.jpg') no-repeat center;background-size:cover;} .main_about .about_cont ul li:nth-of-type(2) .img_wrap {background:url('../images/skin/main_about_img02.jpg') no-repeat center;background-size:cover;} .main_about .about_cont ul li:nth-of-type(3) .img_wrap {background:url('../images/skin/main_about_img03.jpg') no-repeat center;background-size:cover;} /* MIDAS™ Platform */ .main_platform {padding:130px 0 114px;background:url('../images/skin/main_platform_bg.png'), linear-gradient(270deg, var(--point-red) 0%, #F59E41 100%);background-repeat:no-repeat;background-position:center bottom;background-size:100% auto;text-align:center;} .main_platform.about{background:url('../images/skin/main_platform_bg.png'), linear-gradient(270deg, var(--point-green) 0%, var(--point-blue) 100%);background-repeat: no-repeat;background-position: center bottom;background-size: 100% auto;} .main_platform .main_title {padding-bottom:28px;} .main_platform .main_title h3, .main_platform .main_title p {color:#fff;} .main_platform .platform_cont {text-align:center;} .main_platform .platform_cont .video_wrap {width:800px;margin:0 auto;position:relative;z-index:1;} .main_platform .platform_cont .video_wrap:before {content:'';display:block;position:absolute;width:60px;height:42px;background:url('../images/skin/youtube_icon.svg') no-repeat center;background-size:100% auto;top:50%;left:50%;transform:translate(-50%,-50%);} .main_platform .platform_cont .video_wrap .link {position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;} .main_platform .platform_cont .btn_more {font-size:var(--title-16);font-weight:500;color:var(--black-color03);display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;width:180px;height:52px;margin-top:60px;} /* main_video_bnr */ .main_video_layer{position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:50%; padding-bottom:28%; opacity:0; pointer-events:none; transition:all 0.4s; z-index:99;} .main_video_layer iframe, .main_video_layer embed, .main_video_layer object{position:absolute; width:100%; height:100%; top: 50%; left: 50%; transform: translate(-50%, -50%); border:0; } .main_video_layer.on{opacity:1; pointer-events:inherit;} #layer_dim{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); opacity:0; pointer-events:none; transition:all 0.4s;} #layer_dim.on{opacity:1; pointer-events:inherit;z-index:98;} .main_video_layer .close_btn {position:absolute;right: -60px;top: 0;width:32px;height:32px;cursor:pointer;} .main_video_layer .close_btn span {} .main_video_layer .close_btn span {position:absolute;width:100%;height:2px;background-color:#fff;left:0;top:14px;} .main_video_layer .close_btn span:nth-child(1) {transform:rotate(-45deg);} .main_video_layer .close_btn span:nth-child(2) {transform:rotate(45deg);} /* news & notice */ .main_news {padding:170px 0 150px;background:#ebf0f6 url('../images/skin/main_news_bg.jpg') no-repeat center top;background-size:cover;} .main_news .news_cont {display:flex;overflow:visible;} .main_news .news_cont .swiper-wrapper {overflow:visible;} .main_news .news_cont dl {width:calc(33.333% - 13.33px);padding:55px 30px;box-sizing:border-box;background:#fff;box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.15);} .main_news .news_cont dl dt {font-size:var(--title-30);font-weight:600;color:var(--black-color00);position:relative;padding-bottom:20px;border-bottom:1px solid var(--black-color03);} .main_news .news_cont dl dt a {display:block;width:26px;height:26px;border:1px solid var(--border-color01);border-radius:10px;position:absolute;font-size:0;bottom:20px;right:0;} .main_news .news_cont dl dt a:before, .main_news .news_cont dl dt a:after {content:'';display:block;position:absolute;background:#292D32;top:50%;left:50%;border-radius:0.5px;} .main_news .news_cont dl dt a:before {width:11px;height:1px;margin-top:-0.5px;margin-left:-5.5px;} .main_news .news_cont dl dt a:after {width:1px;height:11px;margin-top:-5.5px;margin-left:-0.5px;} .main_news .news_cont dl dd {} .main_news .news_cont dl dd ul {} .main_news .news_cont dl dd ul li {padding:20px 0;border-bottom:1px solid var(--border-color01);display:flex;align-items:center;position:relative;} .main_news .news_cont dl dd ul li + li {} .main_news .news_cont dl dd ul li:after {content:'';display:block;position:absolute;width:30px;height:30px;background:var(--point-red) url('../images/skin/more_arrow_icon.svg') no-repeat center;background-size:9px auto;border-radius:100%;top:50%;right:0;transform:translateY(-50%);opacity:0;} .main_news .news_cont dl dd ul li a {position:absolute;width:100%;height:100%;top:0;left:0;} .main_news .news_cont dl dd ul li .date {font-size:var(--title-20);width:60px;height:60px;border:1px solid var(--black-color10);border-radius:10px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;} .main_news .news_cont dl dd ul li .date strong {font-size:120%;font-weight:600;color:var(--black-color03);} .main_news .news_cont dl dd ul li .date p {font-size:60%;font-weight:500;color:var(--black-color06);} .main_news .news_cont dl dd ul li .date + .txt {padding-left:18px;padding-right:40px;width:calc(100% - 60px);} .main_news .news_cont dl dd ul li .txt {font-size:var(--title-20);box-sizing:border-box;} .main_news .news_cont dl dd ul li .txt span {font-size:65%;font-weight:600;color:var(--black-color08);display:block;padding-bottom:11px;} .main_news .news_cont dl dd ul li .txt strong {font-size:75%;font-weight:600;color:var(--black-color03);display:block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .main_news .swiper-pagination-progressbar {height:2px;background:var(--black-color10);bottom:-30px;} .main_news .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--point-red);} @media only screen and (min-width:1024px) { /* we are CCRIPO */ .main_about .about_cont ul li .txt_wrap .view_more, .main_about .about_cont ul li .img_wrap {transition:all 0.3s;} .main_about .about_cont ul li:hover .txt_wrap .view_more {opacity:1;} .main_about .about_cont ul li:hover .img_wrap {transform:scale(1.05) translate(-50%,-50%);} /* news & notice */ .main_news .news_cont dl dt a, .main_news .news_cont dl dt a:before, .main_news .news_cont dl dt a:after, .main_news .news_cont dl dd ul li, .main_news .news_cont dl dd ul li:after, .main_news .news_cont dl dd ul li .date, .main_news .news_cont dl dd ul li .date strong, .main_news .news_cont dl dd ul li .date p {transition:all 0.3s;} .main_news .news_cont dl dt a:hover {border-color:var(--point-orange);background:var(--point-orange);} .main_news .news_cont dl dt a:hover:before, .main_news .news_cont dl dt a:hover:after {background:#fff;} .main_news .news_cont dl dd ul li:hover {border-bottom-color:var(--point-red);} .main_news .news_cont dl dd ul li:hover:after {opacity:1;} .main_news .news_cont dl dd ul li:hover .date {border-color:var(--point-red);background:var(--point-red);} .main_news .news_cont dl dd ul li:hover .date strong {color:#fff;} .main_news .news_cont dl dd ul li:hover .date p {color:#fff;} } @media only screen and (max-width:1630px) { #wrap .main_visual .slick-dots {left:12.5px !important;} } @media only screen and (max-width:1430px) { /* we are CCRIPO */ .main_about .about_cont ul li {padding-bottom:48.5%;} /* news & notice */ .main_news {background-size:contain;} } @media only screen and (max-width:1296px) { .main_about .about_cont ul li .txt_wrap p .for_pc {display:none;} } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1023px) { /* visual */ .main_visual .visual_btn_wrap.type_A {bottom:26%;} #wrap .main_visual .slick-dots {bottom:28%;} /* we are CCRIPO */ .main_about {padding:137px 0;background-size:contain;} .main_about .about_cont ul li {width:calc(33.333% - 10px);} .main_about .about_cont ul li + li {margin-left:15px;} .main_about .about_cont ul li .txt_wrap {padding:0 30px;top:40px;} .main_about .about_cont ul li .txt_wrap p {font-size:var(--title-16);} .main_about .about_cont ul li .txt_wrap .view_more {display:none;} /* MIDAS™ Platform */ .main_platform {padding:110px 0 94px;} .main_platform .platform_cont .btn_more {margin-top:50px;} .main_video_layer{width:calc(100% - 30px); padding-bottom:56.25%;} .main_video_layer .close_btn{right:0; top:-45px;} /* news & notice */ .main_news {padding: 150px 0 150px;} .main_news .news_cont dl {padding:45px 30px;} .main_news .news_cont dl dd ul li .date + .txt {padding-right:0;} .main_news .swiper-pagination-progressbar {display:block;height:2px;background:var(--border-color01);width: 100%;} } @media only screen and (max-width: 860px) { /* news & notice */ .main_news .news_cont dl dd ul li .txt span {font-size:var(--title-14);padding-bottom:5px;} .main_news .news_cont dl dd ul li .txt strong {font-size:var(--title-16);} } @media only screen and (max-width:830px) { /* MIDAS™ Platform */ .main_platform .platform_cont .video_wrap {width:100%;} .main_platform .platform_cont .video_wrap:before {width:50px;height:35px;} } @media only screen and (max-width:768px) { /* visual */ #wrap .main_visual .visual_btn_wrap.type_A .control_box .slick-arrow {width:36px;height:36px;background-size:8px auto;border-radius:10px;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .next {margin-left:20px;} /* we are CCRIPO */ .main_about {padding:117px 0;} .main_about .about_cont ul li .txt_wrap {padding:0 25px;} .main_about .about_cont ul li .txt_wrap p {padding-top:15px;} /* MIDAS™ Platform */ .main_platform {padding:90px 0 74px;background-size:cover;} .main_platform .platform_cont .btn_more {width:160px;height:47px;margin-top:40px;} /* news & notice */ .main_news {padding: 130px 0 130px;} .main_news .news_cont dl {padding:35px 25px;} .main_news .news_cont dl dt {padding-bottom:15px;} .main_news .news_cont dl dt a {width:23px;height:23px;border-radius:7px;bottom:15px;} .main_news .news_cont dl dt a:before {width:9px;height:1px;margin-top:-0.5px;margin-left:-4.5px;} .main_news .news_cont dl dt a:after {width:1px;height:9px;margin-top:-4.5px;margin-left:-0.5px;} .main_news .news_cont dl dd ul li {padding:15px 0;} .main_news .news_cont dl dd ul li .date {width:55px;height:55px;} .main_news .news_cont dl dd ul li .date + .txt {width:calc(100% - 55px);padding-left:15px;} } @media only screen and (max-width: 640px) { .main_title {padding-bottom:25px;} .main_title p {padding-top:15px;} /* visual */ .main_visual .active .txt_box strong br, .main_visual .active .txt_box p br {display:none;} #wrap .main_visual .slick-dots li:first-of-type {padding-left:10px;} #wrap .main_visual .slick-dots li:last-of-type {padding-right:10px;} #wrap .main_visual .slick-dots li button {width:8px;height:8px;} #wrap .main_visual .visual_btn_wrap.type_A .control_box .next {margin-left:10px;} #wrap .main_visual .visual_btn_wrap.type_A {bottom:20%;} #wrap .main_visual .slick-dots {bottom:22%;} /* we are CCRIPO */ .main_about {padding:97px 0;} .main_about .main_title {padding-bottom:30px;} .main_about .about_cont ul {display:block;} .main_about .about_cont ul li {width:100%;} .main_about .about_cont ul li + li {margin:0;margin-top:15px;} .main_about .about_cont ul li .txt_wrap {top:50%;transform:translateY(-50%);} /* MIDAS™ Platform */ .main_platform {padding:70px 0;} .main_platform .platform_cont .btn_more {width:140px;height:42px;margin-top:30px;} .main_video_layer .close_btn{width:25px; height:25px; top:-40px;} /* news & notice */ .main_news {padding: 110px 0 110px;} .main_news .news_cont dl {padding:30px 20px;} .main_news .swiper-pagination-progressbar {bottom:-20px;} } @media only screen and (max-width:479px) { /* we are CCRIPO */ .main_about {padding:70px 0;} .main_about .about_cont ul li {padding-bottom:50%;} /* MIDAS™ Platform */ .main_platform .platform_cont .video_wrap:before {width:40px;} /* news & notice */ .main_news {padding: 90px 0 90px;} } @media screen and (max-width:350px) { } @media screen and (max-width:320px) { .main_about .about_cont ul li .txt_wrap p .for_m {display:none;} } /*─────────────────────────────────────────────────────────── COMPNAY ───────────────────────────────────────────────────────────*/ /*** company/about (기업개요) ***/ .company_about .sub_title {text-align:center;} .company_about .sub_title h5 {font-size:var(--title-40);font-weight:500;color:var(--black-color03);display:block;padding:50px 0 15px;} .company_about .sub_title h4 {font-size:var(--title-50);font-weight:700;color:var(--black-color03);display:block;} .company_about .sub_title p {margin-top:30px;} .sub_about {} .sub_about .ccripo_wrap {} .sub_about .ccripo_wrap .ccripo_cont {text-align:center;position:relative;} .sub_about .ccripo_wrap .ccripo_cont > strong {font-size:var(--title-34);width:598px;height:598px;border-radius:100%;border: 1px dashed var(--border-color01);margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative;padding:37px;box-sizing:border-box;} .sub_about .ccripo_wrap .ccripo_cont > strong span {font-size:110%;line-height:normal;font-weight:600;color:var(--black-color03);width:100%;height:100%;background:#F0F4FB url('../images/sub/about_ccripo_bg.png') no-repeat center;background-size:100%;border-radius:100%;display:flex;align-items:center;justify-content:center;} .sub_about .ccripo_wrap .ccripo_cont > strong:before, .sub_about .ccripo_wrap .ccripo_cont > strong:after, .sub_about .ccripo_wrap .ccripo_cont > strong span:before, .sub_about .ccripo_wrap .ccripo_cont > strong span:after {content:'';display:block;position:absolute;width:16px;height:16px;border-radius:100%;border:3px solid;background:#fff;box-sizing:border-box;} .sub_about .ccripo_wrap .ccripo_cont > strong:before {border-color:#2A3B90;top: 25%;left:calc(25% - 16px);} .sub_about .ccripo_wrap .ccripo_cont > strong:after {border-color:#5AA3E8;top:25%;right:calc(25% - 16px);} .sub_about .ccripo_wrap .ccripo_cont > strong span:before {border-color:#0592AB;bottom: calc(25% - 6px);left:calc(25% - 16px);} .sub_about .ccripo_wrap .ccripo_cont > strong span:after {border-color:#4384E7;bottom: calc(25% - 6px);right: calc(25% - 16px);} .sub_about .ccripo_wrap .ccripo_cont ul {position:absolute;width:100%;height: 100%;/* display:flex; */top:0;flex-wrap: wrap;align-content: space-between;font-size: 0;} .sub_about .ccripo_wrap .ccripo_cont ul li {width:50%;box-sizing:border-box;display: inline-block;vertical-align: top;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) {padding-top:61px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top: 350px;} .sub_about .ccripo_wrap .ccripo_cont ul li .icon {display:none;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap {} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(odd) {text-align:right;padding-right:316px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(even) {text-align:left;padding-left:316px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong {font-size:var(--title-26);font-weight:600;color:var(--black-color03);display:block;position:relative;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong:before {content:'';display:block;position:absolute;width:56px;height:1px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong:after {content:'';display:block;position:absolute;width:110px;height:1px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1) .txt_wrap strong:before {background:#2A3B90;top: 15px;right: -76px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1) .txt_wrap strong:after {background:#2A3B90;transform: rotate(45deg);top: 54px;right: -169px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) .txt_wrap strong:before {background:#5AA3E8;top: 15px;left: -76px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) .txt_wrap strong:after {background:#5AA3E8;transform: rotate(-45deg);top: 54px;left: -169px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3) .txt_wrap strong:before {background:#0592AB;top: 15px;right: -76px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3) .txt_wrap strong:after {background:#0592AB;transform: rotate(135deg);top: -24px;right: -169px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) .txt_wrap strong:before {background:#5AA3E8;top: 15px;left: -76px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) .txt_wrap strong:after {background:#5AA3E8;transform: rotate(-135deg);top: -24px;left: -169px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap p {font-size:var(--title-20);line-height:1.5;font-weight:400;color:var(--black-color05);padding-top:12px;} .sub_about .direction_wrap {text-align:center;width:1240px;box-sizing:border-box;margin:0 auto;} .sub_about .direction_wrap:before {content:'';display:block;margin:90px auto 60px;width:1px;height:180px;background:var(--black-color03);} .sub_about .direction_wrap > p {font-size:var(--title-22);line-height:1.72;font-weight:300;color:var(--balck-color03);} .sub_about .direction_wrap .direction {margin-top:60px;position:relative;} .sub_about .direction_wrap .direction .logo {width:400px;height:400px;border-radius:100%;/* border: 1px solid var(--border-color01); *//* background: rgba(255, 255, 255, 0.5); */position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;padding: 30px;} .sub_about .direction_wrap .direction .logo:before {content:'';display:block;position:absolute;top:0;left:0;border: 1px solid transparent;background-origin: border-box;background-clip: content-box, border-box;background-image: linear-gradient(142deg, #fff 5.53%, #FFF 62.52%), linear-gradient(142deg, #fff 5.53%, #E3E3E3 62.52%);box-shadow: 0px 10px 31.8px 0px rgba(0, 0, 0, 0.25);width:100%;height:100%;border-radius:100%;opacity:0.5;} .sub_about .direction_wrap .direction .logo span {width: 100%;height: 100%;border-radius: 100%;/* border: 4px solid var(--border-color01); */box-shadow: 0px 10px 31.8px 0px rgba(0, 0, 0, 0.10);display:flex;align-items:center;justify-content:center;box-sizing:border-box;position:relative;border: 4px solid transparent;linear-gradient(to right, red 0%, orange 100%);background-origin: border-box;background-clip: content-box, border-box;background-image: linear-gradient(142deg, #E3E3E3 5.53%, #FFF 62.52%), linear-gradient(142deg, #EBEBEB 5.53%, #E3E3E3 62.52%);} .sub_about .direction_wrap .direction .logo span img {} .sub_about .direction_wrap .direction ol {display:flex;flex-wrap: wrap;counter-reset: section;} .sub_about .direction_wrap .direction ol > li {width:calc(50% - 20px);border:3px solid;border-radius:40px;background:#fff;box-sizing:border-box;position:relative;z-index:1;} .sub_about .direction_wrap .direction ol > li + li {margin-left:40px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(n+3) {margin-top:40px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(odd) {padding:50px 0 50px 80px;margin-left:0;text-align:left;} .sub_about .direction_wrap .direction ol > li:nth-of-type(even) {padding:50px 80px 50px 0;text-align:right;} .sub_about .direction_wrap .direction ol > li:nth-of-type(1) {border-color:var(--point-orange);border-top-left-radius:100px;border-bottom-left-radius:100px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(2) {border-color:var(--point-green);border-top-right-radius:100px;border-bottom-right-radius:100px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(3) {border-color:var(--point-blue);border-top-left-radius:100px;border-bottom-left-radius:100px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(4) {border-color:var(--point-red);border-bottom-right-radius:100px;border-top-right-radius:100px;} .sub_about .direction_wrap .direction ol > li:before {content: "0" counter(section);counter-increment: section;display:block;font-size:100px;font-weight:600;color:#eee;position:absolute;line-height:0.38;z-index:-1;} .sub_about .direction_wrap .direction ol > li:nth-of-type(1):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(2):before {top:60px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(3):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(4):before {bottom:60px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(1):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(3):before {right:57px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(2):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(4):before {left:57px;} .sub_about .direction_wrap .direction ol > li strong {display:block;font-size:var(--title-32);line-height:1.18;font-weight:600;color:var(--black-color03);} .sub_about .direction_wrap .direction ol > li ul {padding-top:20px;} .sub_about .direction_wrap .direction ol > li ul li {font-size:var(--title-20);font-weight:400;line-height:1.5;color:var(--black-color06);} .sub_about .direction_wrap .direction ol > li ul li + li {padding-top:12px;} @media only screen and (max-width:1430px) { } @media only screen and (max-width:1291px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:352px;} } @media only screen and (max-width:1280px) { } @media only screen and (max-width:1270px) { .sub_about .direction_wrap {width:100%;padding:0;} } @media only screen and (max-width:1261px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:323px;} } @media only screen and (max-width:1190px) { .sub_about .ccripo_wrap .ccripo_cont > strong {width:500px;height:500px;} .sub_about .ccripo_wrap .ccripo_cont > strong:before {left:calc(25% - 10px);} .sub_about .ccripo_wrap .ccripo_cont > strong:after {right:calc(25% - 10px);} .sub_about .ccripo_wrap .ccripo_cont > strong span:before {left:calc(25% - 10px);bottom:calc(25% - 3px);} .sub_about .ccripo_wrap .ccripo_cont > strong span:after {right:calc(25% - 10px);bottom:calc(25% - 3px);} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) {padding-top:36px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:309px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(odd) {padding-right:286px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(even) {padding-left:286px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong {font-size:var(--title-24);} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap p {font-size:var(--title-18);} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap p br {display:none;} } @media only screen and (max-width:1151px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:284px;} } @media only screen and (max-width:1143px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:283px;} } @media only screen and (max-width:1060px) { .sub_about .direction_wrap .direction .logo {width:350px;height:350px;} .sub_about .direction_wrap .direction .logo span img {transform:scale(0.9);} .sub_about .direction_wrap .direction ol > li:nth-of-type(odd) {padding-left:60px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(even) {padding-right:60px;} } @media only screen and (max-width:1011px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:261px;} } @media only screen and (max-width:1035px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:256px;} } @media only screen and (max-width:1024px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:288px;} .sub_about .direction_wrap:before {margin:80px auto 50px;height:170px;} .sub_about .direction_wrap .direction .logo {width:300px;height:300px;} .sub_about .direction_wrap .direction .logo span img {transform:scale(0.8);} .sub_about .direction_wrap .direction ol > li {width:calc(50% - 15px);} .sub_about .direction_wrap .direction ol > li:nth-of-type(even) {margin-left:30px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(n+3) {margin-top:30px;} .sub_about .direction_wrap .direction ol > li:before {font-size:var(--title-80);} .sub_about .direction_wrap .direction ol > li:nth-of-type(1):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(3):before {right:37px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(2):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(4):before {left:37px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(1):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(2):before {top:50px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(3):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(4):before {bottom:50px;} } @media only screen and (max-width:1011px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:261px;} } @media only screen and (max-width:960px) { .sub_about .ccripo_wrap .ccripo_cont > strong {width:450px;height:450px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong:after {width:72px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) {padding-top:51px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:206px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1) .txt_wrap strong:after {top:40px;right:-137px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) .txt_wrap strong:after {top:40px;left:-137px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3) .txt_wrap strong:after {top:-10px;right:-137px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) .txt_wrap strong:after {top:-10px;left:-137px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(odd) {padding-right:246px;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(even) {padding-left:246px;} } @media only screen and (max-width:931px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:183px;} } @media only screen and (max-width:860px) { .sub_about .direction_wrap:before {margin:70px auto 50px;height:160px;} .sub_about .direction_wrap .direction ol > li {border-radius:30px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(odd) {padding-left:50px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(even) {padding-right:50px;} .sub_about .direction_wrap .direction ol > li ul li + li {padding-top:8px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(1) {border-top-left-radius:70px;border-bottom-left-radius:70px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(2) {border-top-right-radius:70px;border-bottom-right-radius:70px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(3) {border-top-left-radius:70px;border-bottom-left-radius:70px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(4) {border-bottom-right-radius:70px;border-top-right-radius:70px;} } @media only screen and (max-width:790px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:163px;} .sub_about .direction_wrap .direction ol > li {padding:40px !important;} } @media only screen and (max-width:787px) { .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3), .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) {padding-top:136px;} } @media only screen and (max-width:768px) { .company_about .sub_title img {width:130px;} .company_about .sub_title h5 {padding-top:40px;} .sub_about .ccripo_wrap .ccripo_cont > strong:before, .sub_about .ccripo_wrap .ccripo_cont > strong:after, .sub_about .ccripo_wrap .ccripo_cont > strong span:before, .sub_about .ccripo_wrap .ccripo_cont > strong span:after {display:none;} .sub_about .ccripo_wrap .ccripo_cont ul {display:block;position:static;margin-top:50px;} .sub_about .ccripo_wrap .ccripo_cont ul li {display: flex;width:100%;padding:0 !important;text-align:left !important;align-items: center;border-radius:10px;border:1px solid var(--border-color01);padding:20px !important;} .sub_about .ccripo_wrap .ccripo_cont ul li + li {margin-top:15px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap {width:calc(100% - 90px);box-sizing:border-box;padding-left:30px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong:before, .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap strong:after {display:none;} .sub_about .ccripo_wrap .ccripo_cont ul li .icon {display:inline-flex;width: 90px;height: 90px;border-radius:100%;background:#ddd;align-items: center;justify-content: center;} .sub_about .ccripo_wrap .ccripo_cont ul li .icon img {transform:scale(0.8);} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(1) .icon {background:#2A3B90;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(2) .icon {background:#5AA3E8;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(3) .icon {background:#0592AB;} .sub_about .ccripo_wrap .ccripo_cont ul li:nth-of-type(4) .icon {background:#4384E7;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap p {padding-top:8px;} .sub_about .direction_wrap:before {margin:60px auto 50px;height:140px;} .sub_about .direction_wrap .direction .logo {display:none;} .sub_about .direction_wrap .direction ol > li {width:calc(50% - 7.5px);} .sub_about .direction_wrap .direction ol > li:nth-of-type(even) {margin-left:15px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(n+3) {margin-top:15px;} .sub_about .direction_wrap .direction ol > li:before {font-size:var(--title-70);} .sub_about .direction_wrap .direction ol > li:nth-of-type(1):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(3):before {right:27px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(2):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(4):before {left:27px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(1):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(2):before {top:50px;} .sub_about .direction_wrap .direction ol > li:nth-of-type(3):before, .sub_about .direction_wrap .direction ol > li:nth-of-type(4):before {bottom:50px;} } @media only screen and (max-width: 640px) { .company_about .sub_title h5 {padding-top:30px;} .sub_about .direction_wrap:before {margin:50px auto 50px;height:120px;} .sub_about .direction_wrap .direction ol {display:block;} .sub_about .direction_wrap .direction ol > li {width:100%;text-align:left !important;border-radius:20px !important;padding:30px !important;margin:0 !important;} .sub_about .direction_wrap .direction ol > li:before {top:30px !important;right:30px !important;left:auto !important;} .sub_about .direction_wrap .direction ol > li + li {margin-top:15px !important;} .sub_about .direction_wrap .direction ol > li ul {padding-top:10px;} .sub_about .direction_wrap .direction ol > li ul li + li {padding-top:5px;} .sub_about .direction_wrap .direction ol > li ul li br {display:none;} } @media only screen and (max-width:478px) { .sub_about .ccripo_wrap .ccripo_cont ul {display:block;position:static;margin-top:40px;} .sub_about .ccripo_wrap .ccripo_cont > strong {width:400px;height:400px;} } @media only screen and (max-width:428px) { .sub_about .ccripo_wrap .ccripo_cont > strong {width:360px;height:360px;padding:25px;} } @media screen and (max-width:375px) { .sub_about .ccripo_wrap .ccripo_cont > strong {width:300px;height:300px;} .sub_about .ccripo_wrap .ccripo_cont ul li .icon {width:70px;height:70px;} .sub_about .ccripo_wrap .ccripo_cont ul li .txt_wrap {width:calc(100% - 70px);padding-left:20px;} .sub_about .ccripo_wrap .ccripo_cont ul li .icon img {transform:scale(0.6);} .sub_about .direction_wrap .direction ol > li {padding:20px !important;} .sub_about .direction_wrap .direction ol > li:before {right:20px !important;top:25px !important;} } @media screen and (max-width:320px) { } /*** company/greetings (CEO 인사말) ***/ .sub_greetings {padding-top:132px;} .sub_greetings .greeting_ceo {background:#F8F8F8 url('../images/sub/greetings_bg.png') no-repeat bottom right;background-size:auto 100%;} .sub_greetings .greeting_ceo .w_custom {position:relative;padding-top:100px;padding-bottom:100px;} .sub_greetings .greeting_ceo .w_custom:before {content:'“';display:block;position:absolute;font-size:160px;line-height:0.45;font-weight:600;color:#ddd;font-family:'Noto Sans KR';top:0;left:15px;} .sub_greetings .greeting_ceo .w_custom:after {content:'';display:block;position:absolute;width:1px;height:100px;background:var(--black-color03);bottom:-50px;left:15px;} .sub_greetings .greeting_ceo .txt_wrap {font-size:var(--title-50);} .sub_greetings .greeting_ceo .txt_wrap strong {font-size:120%;line-height:1.33;font-weight:600;color:var(--black-color03);} .sub_greetings .greeting_ceo .txt_wrap p {font-size:var(--title-20);line-height:1.7;font-weight:400;color:var(--black-color05);padding-top:27px;} .sub_greetings .greeting_ceo .ceo_wrap {display:flex;align-items:flex-end;position:absolute;bottom:0;right:0;/* overflow:hidden; */} .sub_greetings .greeting_ceo .ceo_wrap .img {} .sub_greetings .greeting_ceo .ceo_wrap .img img {filter: drop-shadow(44px 0px 17px rgba(0, 0, 0, 0.20));} .sub_greetings .greeting_ceo .ceo_wrap .ceo {margin-left:46px;padding-right:40px;} .sub_greetings .greeting_ceo .ceo_wrap .ceo img {} .sub_greetings .greeting_ceo .ceo_wrap .ceo p {font-size:var(--title-22);font-weight:300;color:var(--black-color03);padding:111px 0 60px;} .sub_greetings .greeting_txt {padding-top:100px;} .sub_greetings .greeting_txt p {font-size:var(--title-20);font-weight:400;line-height:1.7;color:var(--black-color05);} .sub_greetings .greeting_txt p + p {padding-top:20px;} .sub_greetings .greeting_txt .ceo {text-align:right;padding-top:60px;} .sub_greetings .greeting_txt .ceo strong {display:block;font-size:var(--title-30);font-weight:500;color:var(--black-color03);} @media only screen and (max-width:1430px) { .sub_greetings .greeting_ceo .txt_wrap {width:46%;} .sub_greetings .greeting_ceo .ceo_wrap {width:54%;padding-left:30px;box-sizing:border-box;} .sub_greetings .greeting_ceo .txt_wrap strong br {display:none;} .sub_greetings .greeting_ceo .txt_wrap p .for_pc {display:none;} .sub_greetings .greeting_ceo .ceo_wrap .ceo {padding-right:15px;} } @media only screen and (max-width:1365px) { .sub_greetings {padding-top:89px;} } @media only screen and (max-width:1300px) { .sub_greetings {padding-top:0;} } @media only screen and (max-width:1296px) { } @media only screen and (max-width:1217px) { } @media only screen and (max-width:1148px) { .sub_greetings .greeting_ceo .ceo_wrap .ceo p {font-size:var(--title-20);} } @media only screen and (max-width:1024px) { .sub_greetings .greeting_ceo .w_custom {padding-top:90px;padding-bottom:90px;} .sub_greetings .greeting_ceo .w_custom:before {font-size:140px;} .sub_greetings .greeting_ceo .w_custom:after {height:90px;bottom:-45px;} .sub_greetings .greeting_txt {padding-top:90px;} .sub_greetings .greeting_ceo .txt_wrap strong {font-size:var(--title-50);} .sub_greetings .greeting_ceo .txt_wrap p {font-size:var(--title-18);} .sub_greetings .greeting_ceo .ceo_wrap .ceo p {padding:80px 0 50px;} } @media only screen and (max-width:960px) { } @media only screen and (max-width:860px) { .sub_greetings .greeting_txt {padding-top:80px;} .sub_greetings .greeting_txt p + p {padding-top:15px;} .sub_greetings .greeting_txt .ceo {padding-top:50px;} } @media only screen and (max-width:768px) { .sub_greetings .greeting_ceo .w_custom:after {height:80px;bottom:-40px;} .sub_greetings .greeting_ceo {background: #f8f8f8 url('../images/sub/greetings_bg_m.png') no-repeat 70% 310px;background-size:150% auto;} .sub_greetings .greeting_ceo .w_custom {padding-top:70px;padding-bottom:0;} .sub_greetings .greeting_ceo .w_custom:before {font-size:100px;} .sub_greetings .greeting_ceo .txt_wrap {width:100%;} .sub_greetings .greeting_ceo .txt_wrap p {padding-top:20px;} .sub_greetings .greeting_ceo .txt_wrap p br {display:none;} .sub_greetings .greeting_ceo .ceo_wrap {width:100%;position:static;margin-top:40px;} .sub_greetings .greeting_ceo {background-size:auto 100%;} .sub_greetings .greeting_ceo .ceo_wrap .ceo {padding-right:0;} } @media only screen and (max-width:640px) { .sub_greetings .greeting_ceo .w_custom {padding-top:60px;} .sub_greetings .greeting_ceo .w_custom:before {font-size:80px;} .sub_greetings .greeting_ceo .w_custom:after {height:70px;bottom:-35px;} .sub_greetings .greeting_ceo .ceo_wrap {padding-left:20px;} .sub_greetings .greeting_ceo .ceo_wrap .ceo {margin-left:20px;} .sub_greetings .greeting_ceo .ceo_wrap .ceo p {padding:60px 0 40px;} .sub_greetings .greeting_txt {padding-top:60px;} } @media only screen and (max-width:478px) { .sub_greetings .greeting_ceo .w_custom:after {height:60px;bottom:-30px;} .sub_greetings .greeting_ceo .ceo_wrap .img img {filter:drop-shadow(30px 0px 17px rgba(0, 0, 0, 0.20));} } @media only screen and (max-width:375px) { } @media only screen and (max-width:320px) { } /*** company/vision (Vision) ***/ .sub_vision {} .sub_vision .vision_our {padding:60px 0 140px;} .sub_vision .vision_our .w_custom {} .sub_vision .vision_our ul {font-size:0;} .sub_vision .vision_our ul li {display:inline-block;width:50%;vertical-align:top;box-sizing:border-box;} .sub_vision .vision_our ul li > strong {width:240px;height:240px;box-shadow:0px 10px 31.8px rgba(0, 0, 0, 0.10);border-radius:100%;display:inline-flex;align-items:center;justify-content: center;flex-direction: column;position:relative;z-index: 1;} .sub_vision .vision_our ul li > strong:before {content:'';display:block;position:absolute;width:calc(100% + 120px);height:calc(100% + 120px);opacity:0.1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;z-index: -1;} .sub_vision .vision_our ul li > strong span {font-size:var(--title-32);font-weight:600;color:#fff;display:block;text-align:center;padding-top:16px;} .sub_vision .vision_our ul li .txt_wrap {width:calc(100% - 240px);box-sizing:border-box;padding-top:60px;} .sub_vision .vision_our ul li .txt_wrap strong {font-size:var(--title-30);font-weight:600;color:var(--black-color03);display:inline-block;position:relative;padding-bottom:25px;margin-bottom:23px;} .sub_vision .vision_our ul li .txt_wrap strong:before {content:'';display:block;position:absolute;width:8px;height:8px;border-radius:100%;bottom:-3px;} .sub_vision .vision_our ul li .txt_wrap strong:after {content:'';display:block;position:absolute;width:calc(100% - 10px + 90px);height:2px;bottom:0;} .sub_vision .vision_our ul li .txt_wrap p {font-size:var(--title-18);line-height:1.55;font-weight:400;color:var(--black-color03);} /* mission */ .sub_vision .vision_our ul li.mission {display:inline-flex;flex-direction: row-reverse;padding-right:15px;} .sub_vision .vision_our ul li.mission > strong {background:linear-gradient(310deg, #F8B048 29.58%, #F28238 92.52%);} .sub_vision .vision_our ul li.mission > strong:before {background:#F59A40;} .sub_vision .vision_our ul li.mission .txt_wrap {text-align:right;padding-right:90px;} .sub_vision .vision_our ul li.mission .txt_wrap strong {padding-left:17px;} .sub_vision .vision_our ul li.mission .txt_wrap strong:before {background:linear-gradient(310deg, #F8B048 29.58%, #F28238 92.52%);left:0;} .sub_vision .vision_our ul li.mission .txt_wrap strong:after {background:#F48D3C;right:-90px;} /* vision */ .sub_vision .vision_our ul li.vision {display:inline-flex;padding-top:160px;padding-left:35px;} .sub_vision .vision_our ul li.vision > strong {background:linear-gradient(310deg, #EC4F31 28.3%, #D33026 83.98%);} .sub_vision .vision_our ul li.vision > strong:before {background:#EB4323;} .sub_vision .vision_our ul li.vision .txt_wrap {text-align:left;padding-left:90px;} .sub_vision .vision_our ul li.vision .txt_wrap strong {padding-right:26px;} .sub_vision .vision_our ul li.vision .txt_wrap strong:before {background:linear-gradient(310deg, #EC4F31 28.3%, #D33026 83.98%);right:0;} .sub_vision .vision_our ul li.vision .txt_wrap strong:after {background:#E72418;left:-90px;} /* 핵심가치 */ .sub_vision .vision_value {padding:140px 0;background:#FBFBFB url('../images/sub/vision_value_bg.png') no-repeat center bottom;} .sub_vision .vision_value .sub_title {padding-top:0;} .sub_vision .vision_value .value_cont {position:relative;z-index:1;} .sub_vision .vision_value .value_cont .value_tit {width:678px;height:678px;border-radius:100%;background:url('../images/sub/vision_value_bg.svg') no-repeat center;background-size:100% auto;display:flex;align-items:center;justify-content: center;text-align:center;margin:0 auto;} .sub_vision .vision_value .value_cont .value_tit strong {width:50.146%;height:50.146%;overflow:hidden;border-radius:100%;background:url('../images/sub/vision_value.png') no-repeat center;background-size:cover;display:flex;align-items:center;justify-content:center;flex-direction:column;} .sub_vision .vision_value .value_cont .value_tit span {font-size:var(--title-26);font-weight:500;color:#fff;display:block;} .sub_vision .vision_value .value_cont .value_tit em {font-size:var(--title-50);font-weight:500;color:#fff;display:block;padding-top:10px;} .sub_vision .vision_value .value_list {position:absolute;top:0;left:0;width:100%;display:flex;flex-wrap:wrap;height: 100%;align-items: stretch;} .sub_vision .vision_value .value_list.mobile {display:none;} .sub_vision .vision_value .value_list li {width:50%;box-sizing:border-box;display:inline-flex;align-items:center;} .sub_vision .vision_value .value_list li:nth-of-type(odd) {flex-direction:row-reverse;padding-right:145px;} .sub_vision .vision_value .value_list li:nth-of-type(even) {padding-left:145px;} .sub_vision .vision_value .value_list li:nth-of-type(1), .sub_vision .vision_value .value_list li:nth-of-type(2) {padding-bottom:120px;} .sub_vision .vision_value .value_list li:nth-of-type(3), .sub_vision .vision_value .value_list li:nth-of-type(4) {padding-top:120px;} .sub_vision .vision_value .value_list li .icon {width:180px;height:180px;border-radius:100%;display:inline-flex;align-items: center;justify-content:center;box-shadow:0px 10px 31.8px rgba(0, 0, 0, 0.10);} .sub_vision .vision_value .value_list li:nth-of-type(1) .icon {background:var(--point-orange);} .sub_vision .vision_value .value_list li:nth-of-type(2) .icon {background:var(--point-green);} .sub_vision .vision_value .value_list li:nth-of-type(3) .icon {background:var(--point-blue);} .sub_vision .vision_value .value_list li:nth-of-type(4) .icon {background:var(--point-red);} .sub_vision .vision_value .value_list li .icon img {} .sub_vision .vision_value .value_list li .txt_wrap {width:calc(100% - 180px);box-sizing:border-box;} .sub_vision .vision_value .value_list li:nth-of-type(odd) .txt_wrap {padding-right:30px;text-align:right;} .sub_vision .vision_value .value_list li:nth-of-type(even) .txt_wrap {padding-left:30px;text-align:left;} .sub_vision .vision_value .value_list li .txt_wrap strong {font-size:var(--title-30);font-weight:600;color:var(--black-color03);display:block;} .sub_vision .vision_value .value_list li .txt_wrap p {font-size:var(--title-18);line-height:1.55;font-weight:400;color:var(--black-color03);padding-top:16px;} @media only screen and (max-width:1430px) { .sub_vision .vision_our ul li .txt_wrap p br {display:none;} .sub_vision .vision_value .value_list li .txt_wrap p br {display:none;} .sub_vision .vision_value {background-size:150% auto;} } @media only screen and (max-width:1296px) { } @media only screen and (max-width:1240px) { .sub_vision .vision_our ul li > strong {width:210px;height:210px;} .sub_vision .vision_our ul li > strong:before {width:calc(100% + 100px);height:calc(100% + 100px);} .sub_vision .vision_our ul li .txt_wrap {width:calc(100% - 210px);} .sub_vision .vision_our ul li.mission .txt_wrap {padding-right:70px;} .sub_vision .vision_our ul li.vision .txt_wrap {padding-left:70px;} .sub_vision .vision_our ul li.mission {padding-right:5px;} .sub_vision .vision_our ul li.vision {padding-left:15px;} .sub_vision .vision_our ul li > strong img {height:56px;} .sub_vision .vision_our ul li > strong span {padding-top:10px;} } @media only screen and (max-width:1080px) { .sub_vision .vision_our ul li > strong {width:190px;height:190px;} .sub_vision .vision_our ul li .txt_wrap {width:calc(100% - 190px);padding-top:40px;} .sub_vision .vision_value .value_cont .value_tit {width:618px;height:618px;} .sub_vision .vision_value .value_list li .icon {width:130px;height:130px;} .sub_vision .vision_value .value_list li .icon img {transform: scale(0.8);} .sub_vision .vision_value .value_list li .txt_wrap {width:calc(100% - 130px);} } @media only screen and (max-width:1024px) { .sub_vision .vision_our {padding:55px 0 130px;} .sub_vision .vision_value {padding:130px 0;} .sub_vision .vision_value .value_cont .value_tit {width:538px;height:538px;} .sub_vision .vision_value .value_list li:nth-of-type(odd) {padding-right:115px;} .sub_vision .vision_value .value_list li:nth-of-type(even) {padding-left:115px;} .sub_vision .vision_value .value_list li:nth-of-type(3), .sub_vision .vision_value .value_list li:nth-of-type(4) {padding-top:90px;} } @media only screen and (max-width: 900px) { .sub_vision .vision_our ul li.vision {padding-left:0;} .sub_vision .vision_our ul li.mission {padding-right:0;} .sub_vision .vision_our ul li > strong {width:160px;height:160px;} .sub_vision .vision_our ul li .txt_wrap {width:calc(100% - 160px);padding-top:26px;} .sub_vision .vision_our ul li > strong:before {width:calc(100% + 80px);height:calc(100% + 80px);} .sub_vision .vision_our ul li.mission .txt_wrap {padding-right:60px;} .sub_vision .vision_our ul li.vision .txt_wrap {padding-left:60px;} .sub_vision .vision_our ul li > strong span {font-size:var(--title-28);} .sub_vision .vision_our ul li > strong img {height:50px;} } @media only screen and (max-width: 860px) { .sub_vision .vision_our {padding:50px 0 110px;} .sub_vision .vision_our ul li {width:100%;} .sub_vision .vision_our ul li.mission {padding-right:80px;} .sub_vision .vision_our ul li.vision {padding-left:80px;padding-top:100px;} .sub_vision .vision_value {padding:110px 0;} .sub_vision .vision_value .value_cont .value_tit {width:400px;height:400px;} .sub_vision .vision_value .value_list li .icon {width:100px;height:100px;} .sub_vision .vision_value .value_list li .icon img {transform: scale(0.6);} .sub_vision .vision_value .value_list li .txt_wrap {width:calc(100% - 100px);} .sub_vision .vision_value .value_list li:nth-of-type(1), .sub_vision .vision_value .value_list li:nth-of-type(2) {padding-bottom:10px;} .sub_vision .vision_value .value_list li:nth-of-type(3), .sub_vision .vision_value .value_list li:nth-of-type(4) {padding-top:10px;} } @media only screen and (max-width:800px) { .sub_vision .vision_value .value_list li .txt_wrap {display:none;} .sub_vision .vision_value .value_list.mobile {position:static;display:block;margin-top:40px;} .sub_vision .vision_value .value_list.mobile li {padding:0;display:block;border-radius:10px;display:flex;text-align: left !important;align-items: center;flex-direction: row;width:100%;padding:20px;border:1px solid var(--border-color01);box-sizing:border-box;background:#fff;} .sub_vision .vision_value .value_list.mobile li + li {margin-top:20px;} .sub_vision .vision_value .value_list.mobile li .txt_wrap {display:inline-block;text-align:left;padding:0;padding-left:30px;width:calc(100% - 90px);} .sub_vision .vision_value .value_list.mobile li .txt_wrap strong {font-size:var(--title-24);} .sub_vision .vision_value .value_list.mobile li .txt_wrap p {font-size:var(--title-18);padding-top:8px;} .sub_vision .vision_value .value_list.mobile li .icon {width:90px;height:90px;} .sub_vision .vision_value .value_list.mobile li .icon img {transform:scale(0.6);} } @media only screen and (max-width:768px) { .sub_vision .vision_our ul li.mission {padding-right:40px;} .sub_vision .vision_our ul li.vision {padding-left:40px;padding-top:90px;} .sub_vision .vision_value .value_cont .value_tit em {padding-top:7px;} .sub_vision .vision_value .value_list.mobile li + li {margin-top:15px;} } @media only screen and (max-width: 640px) { .sub_vision .vision_our {padding:45px 0 90px;} .sub_vision .vision_value {padding:90px 0;} .sub_vision .vision_value .value_cont .value_tit {width:350px;height:350px;} } @media only screen and (max-width:479px) { .sub_vision .vision_our ul li {display:block !important;padding-left:0 !important;padding-right:0 !important;} .sub_vision .vision_our ul li > strong {display:flex;margin:0 auto;width:140px;height:140px;} .sub_vision .vision_our ul li .txt_wrap {padding:0 !important;padding-top:60px !important;width:100%;text-align:center !important;} .sub_vision .vision_our ul li .txt_wrap strong {padding:0;margin:0;padding-bottom:15px;padding-left:0 !important;padding-right:0 !important;} .sub_vision .vision_our ul li .txt_wrap strong:before, .sub_vision .vision_our ul li .txt_wrap strong:after {display:none;} .sub_vision .vision_value {padding:80px 0;} .sub_vision .vision_value .value_cont .value_tit {width:300px;height:300px;} .sub_vision .vision_value .value_list.pc li .icon {width:80px;height:80px;} .sub_vision .vision_value .value_list.pc li .icon img {transform:scale(0.5);} .sub_vision .vision_value .value_list.pc li:nth-of-type(odd) {padding-right:95px;} .sub_vision .vision_value .value_list.pc li:nth-of-type(even) {padding-left:95px;} } @media screen and (max-width:375px) { .sub_vision .vision_our {padding:40px 0 60px;} .sub_vision .vision_value {padding:60px 0;} .sub_vision .vision_value .value_cont .value_tit {width:260px;height:260px;} .sub_vision .vision_value .value_cont .value_tit em {font-size:var(--title-40);padding-top:5px;} .sub_vision .vision_value .value_list.pc li:nth-of-type(odd) {padding-right:75px;} .sub_vision .vision_value .value_list.pc li:nth-of-type(even) {padding-left:75px;} .sub_vision .vision_value .value_list.mobile li .icon {width:70px;height:70px;} .sub_vision .vision_value .value_list.mobile li .icon img {transform:scale(0.5);} .sub_vision .vision_value .value_list.mobile li .txt_wrap {padding-left:20px;width:calc(100% - 70px);} } @media screen and (max-width:320px) { .sub_vision .vision_value .value_cont .value_tit {width:240px;height:240px;} .sub_vision .vision_value .value_list.pc li:nth-of-type(odd) {padding-right:65px;} .sub_vision .vision_value .value_list.pc li:nth-of-type(even) {padding-left:65px;} .sub_vision .vision_value .value_list.pc li .icon {width:60px;height:60px;} } /*** company/ci (CI) ***/ .company_ci .sub_title {background:url('../images/sub/ci_bg.png') no-repeat center;background-size:cover;padding-bottom:120px;} .company_ci .sub_title .w_custom {text-align:center;} .company_ci .sub_title img {margin-top:60px;} .sub_ci {padding-top:100px;} .sub_ci > dl {display:flex;} .sub_ci > dl + dl {margin-top:100px;padding-top:100px;border-top:1px solid #d9d9d9;} .sub_ci > dl > dt {width:370px;} .sub_ci > dl > dt strong {font-size:var(--title-40);font-weight:600;color:var(--black-color03);} .sub_ci > dl > dt p {font-size:var(--title-24);font-weight:400;color:var(--black-color03);padding-top:20px;} .sub_ci > dl > dd {width:calc(100% - 370px);} .sub_ci > dl > dd .signature {display:flex;flex-wrap:wrap;} .sub_ci > dl > dd .signature li {width:calc(50% - 15px);box-sizing:border-box;} .sub_ci > dl > dd .signature li:nth-of-type(even) {margin-left:30px;} .sub_ci > dl > dd .signature li:nth-of-type(n+3) {margin-top:30px;} .sub_ci > dl > dd .signature li {border:1px solid var(--border-color01);} .sub_ci > dl > dd .signature li .img_box {width:100%;height:240px;display:flex;align-items:center;justify-content:center;padding:0 50px;box-sizing:border-box;} .sub_ci > dl > dd .signature li .img_box img {} .sub_ci > dl > dd .signature li .txt_box {background:var(--gray-bg);border-top:1px solid var(--border-color01);padding:25px 0;} .sub_ci > dl > dd .signature li .txt_box p {font-size:var(--title-18);font-weight:500;color:var(--black-color03);display:flex;align-items:center;justify-content:center;} .sub_ci > dl > dd > dl {} .sub_ci > dl > dd > dl + dl {margin-top:60px;} .sub_ci > dl > dd > dl dt {font-size:var(--title-26);font-weight:500;color:var(--black-color03);padding-bottom:28px;} .sub_ci > dl > dd .color ul {display:flex;flex-wrap:wrap;} .sub_ci > dl > dd .color ul li {width:calc(50% - 10px);padding:30px;box-sizing:border-box;display:flex;align-items:stretch;justify-content:space-between;} .sub_ci > dl > dd .color ul li:nth-of-type(even) {margin-left:20px;} .sub_ci > dl > dd .color ul li:nth-of-type(n+3) {margin-top:20px;} .sub_ci > dl > dd .color ul li.blue {background:var(--point-blue);} .sub_ci > dl > dd .color ul li.green {background:var(--point-green);} .sub_ci > dl > dd .color ul li.red {background:var(--point-red);} .sub_ci > dl > dd .color ul li.orange {background:var(--point-orange);} .sub_ci > dl > dd .color ul li.black {background:var(--point-black02);} .sub_ci > dl > dd .color ul li.gold {background:var(--point-gold);} .sub_ci > dl > dd .color ul li strong {font-size:var(--title-24);font-weight:500;color:#fff;} .sub_ci > dl > dd .color ul li p {font-size:var(--title-16);font-weight:500;color:#fff;text-align:right;line-height:1.7;} .sub_ci > dl > dd .gradation {} .sub_ci > dl > dd .gradation ul {} .sub_ci > dl > dd .gradation ul li {width:100%;display:flex;border:1px solid var(--border-color01);padding:40px 40px 40px 0;box-sizing:border-box;align-items:center;} .sub_ci > dl > dd .gradation ul li + li {margin-top:20px;} .sub_ci > dl > dd .gradation ul li.red_orange {padding-top:30px;padding-bottom:30px;} .sub_ci > dl > dd .gradation ul li .symbol {width:247px;display:inline-flex;justify-content:center;} .sub_ci > dl > dd .gradation ul li .gradat {width:calc(100% - 247px);} .sub_ci > dl > dd .gradation ul li .gradat span {display:block;width:calc(100% - 10px);height:26px;margin:0 auto;} .sub_ci > dl > dd .gradation ul li .gradat .txt {display:flex;align-items:center;justify-content:space-between;} .sub_ci > dl > dd .gradation ul li .gradat .txt p {font-size:var(--title-18);font-weight:400;color:var(--black-color03);text-align:left;} .sub_ci > dl > dd .gradation ul li .gradat .txt p:before {content:'';display:block;width:10px;height:10px;border-top: 0 solid transparent;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #595757;box-sizing:border-box;margin:8px 0 14px;display:block;} .sub_ci > dl > dd .gradation ul li .gradat .txt p + p {display:flex;flex-direction:column;align-items:flex-end;text-align:right;} .sub_ci > dl > dd .gradation ul li.blue_green .gradat span {background:linear-gradient(90deg, var(--point-blue) 0%, var(--point-green) 100%);} .sub_ci > dl > dd .gradation ul li.red_orange .gradat span {background:linear-gradient(90deg, var(--point-orange) 0%, var(--point-red) 100%);} @media only screen and (max-width:1430px) { .sub_ci > dl > dt {width:26%;} .sub_ci > dl > dd {width:74%;} .sub_ci > dl > dd .signature li .img_box {height:0;padding-bottom:47.8%;position:relative;} .sub_ci > dl > dd .signature li .img_box img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);} .sub_ci > dl > dd .gradation ul li .symbol {width:30%;} .sub_ci > dl > dd .gradation ul li .gradat {width:70%;} } @media only screen and (max-width:1296px) { } @media only screen and (max-width:1217px) { .sub_ci > dl > dd .signature li .img_box img {transform:translate(-50%,-50%) scale(0.7);} } @media only screen and (max-width:1023px) { .company_ci .sub_title {padding-bottom:110px;} .company_ci .sub_title img {width:39%;margin-top:55px;} .sub_ci {padding-top:85px;} .sub_ci > dl > dt {width:30%;} .sub_ci > dl > dd {width:70%;} .sub_ci > dl + dl {margin-top:90px;padding-top:90px;} .sub_ci > dl > dd .signature li {width:calc(50% - 10px);} .sub_ci > dl > dd .signature li:nth-of-type(even) {margin-left:20px;} .sub_ci > dl > dd .signature li .img_box img {transform:translate(-50%,-50%) scale(0.6);} .sub_ci > dl > dd .signature li .txt_box {padding:20px 0;} .sub_ci > dl > dd > dl + dl {margin-top:55px;} .sub_ci > dl > dd > dl dt {padding-bottom:20px;} .sub_ci > dl > dd .color ul li {width:calc(50% - 5px);} .sub_ci > dl > dd .color ul li:nth-of-type(even) {margin-left:10px;} .sub_ci > dl > dd .color ul li:nth-of-type(n+3) {margin-top:10px;} } @media only screen and (max-width: 980px) { .sub_ci > dl, .sub_ci > dl > dt, .sub_ci > dl > dd {display:block;width:100%;} .sub_ci > dl > dt {margin-bottom:25px;} .sub_ci > dl > dt strong, .sub_ci > dl > dt p {display:inline-block;vertical-align:middle;} .sub_ci > dl > dt p {padding:0;padding-left:20px;} } @media only screen and (max-width: 860px) { .sub_ci {padding-top:75px;} .company_ci .sub_title {padding-bottom:95px;} .company_ci .sub_title img {margin-top:50px;} .sub_ci > dl + dl {margin-top:80px;padding-top:80px;} .sub_ci > dl > dd .signature li .txt_box {padding:18px 0;} .sub_ci > dl > dd > dl + dl {margin-top:50px;} .sub_ci > dl > dd .color ul li {padding:20px;} .sub_ci > dl > dd .gradation ul li {padding:30px 30px 30px 0;} .sub_ci > dl > dd .gradation ul li .symbol {width:25%;} .sub_ci > dl > dd .gradation ul li .symbol img {transform:scale(0.8);} .sub_ci > dl > dd .gradation ul li .gradat {width:75%;} } @media only screen and (max-width:830px) { } @media only screen and (max-width:768px) { } @media only screen and (max-width: 640px) { .sub_ci {padding-top:60px;} .company_ci .sub_title {padding-bottom:75px;} .company_ci .sub_title img {margin-top:45px;} .sub_ci > dl + dl {margin-top:70px;padding-top:70px;} .sub_ci > dl > dd .signature li {width:100%;} .sub_ci > dl > dd .signature li + li {margin:0 !important;margin-top:15px !important;} .sub_ci > dl > dd .signature li .img_box img {transform:translate(-50%,-50%) scale(0.8);} .sub_ci > dl > dd > dl + dl {margin-top:45px;} .sub_ci > dl > dd .color ul {display:block;} .sub_ci > dl > dd .color ul li {display:flex;width:100%;} .sub_ci > dl > dd .color ul li:nth-of-type(even) {margin-left:0;} .sub_ci > dl > dd .color ul li + li {margin-top:10px;} .sub_ci > dl > dd .gradation ul li + li {margin-top:15px;} .sub_ci > dl > dd .gradation ul li {display:block;padding:25px 20px;} .sub_ci > dl > dd .gradation ul li .symbol, .sub_ci > dl > dd .gradation ul li .gradat {width:100%;display:block;} .sub_ci > dl > dd .gradation ul li .symbol {text-align:center;margin-bottom:25px;} .sub_ci > dl > dd .gradation ul li .symbol img {transform:scale(1);} } @media only screen and (max-width:479px) { .company_ci .sub_title {padding-bottom:60px;} .company_ci .sub_title img {margin-top:30px;} .sub_ci > dl + dl {margin-top:60px;padding-top:60px;} .sub_ci > dl > dd .signature li .img_box img {transform:translate(-50%,-50%) scale(0.7);} .sub_ci > dl > dd > dl + dl {margin-top:40px;} } @media screen and (max-width:375px) { .sub_ci > dl > dd .signature li .img_box img {transform:translate(-50%,-50%) scale(0.6);} } @media screen and (max-width:320px) { } /*** company/expert (자문/전문가 그룹) ***/ .sub_expert {} .sub_expert .exper_list {font-size:0; display:flex; flex-wrap:wrap; width:calc(100% + 20px); margin-left:-10px;} .sub_expert .exper_list li {display:inline-flex;align-items:center;width:calc(33.3333% - 20px);border:1px solid var(--border-color01);padding:0 10px 0 10px;border-radius:10px;box-sizing:border-box; margin:0 10px 30px;overflow:hidden;} .sub_expert .exper_list li:nth-of-type(3n){margin-right:0;} /*.sub_expert .exper_list li:nth-of-type(n+4) {margin-top:30px;}*/ .sub_expert .exper_list li .img_wrap {width:150px; } .sub_expert .exper_list li .img_wrap img {filter: drop-shadow(19px 0px 17px rgba(0, 0, 0, 0.15));width:100%;height:auto;} .sub_expert .exper_list li .txt_wrap {width:calc(100% - 150px);padding: 15px 10px 0px 20px; box-sizing:border-box;} .sub_expert .exper_list li .txt_wrap .group {border-bottom:1px solid var(--border-color01);padding-bottom:15px;margin-bottom:15px;} .sub_expert .exper_list li .txt_wrap .group p {font-size:var(--title-18);font-weight:300;color:var(--black-color00);display: flex;line-height: 1.4;} .sub_expert .exper_list li .txt_wrap .group p span {display:inline-block;font-size:var(--title-20);font-weight:400;color:inherit;display: inline-flex;align-items: baseline;} .sub_expert .exper_list li .txt_wrap .group p span:after {content:'';display:inline-block;width:1px;height:14px;background:var(--border-color01);margin:0 14px;} .sub_expert .exper_list li .txt_wrap .name {font-size:0;} .sub_expert .exper_list li .txt_wrap .name strong {font-size:var(--title-34);font-weight:700;color:var(--point-blue);display:inline-block;} .sub_expert .exper_list li .txt_wrap .name span {font-size:var(--title-24);font-weight:500;color:var(--black-color00);display:inline-block;padding-left:12px;} @media only screen and (max-width:1430px) { .sub_expert .exper_list li .img_wrap {width:37%;} .sub_expert .exper_list li .txt_wrap {width:63%;} } @media only screen and (max-width:1250px) { .sub_expert .exper_list { margin-left:0px; } .sub_expert .exper_list li {width:calc(50% - 30px); padding-right:30px; margin:0 10 20px; margin-bottom:15px;} .sub_expert .exper_list li:nth-of-type(3n){margin-right:10px;} .sub_expert .exper_list li .txt_wrap {padding-left:25px;} .sub_expert .exper_list li .txt_wrap .group { padding-bottom:10px;margin-bottom:10px; } } @media only screen and (max-width:1217px) { .sub_expert .exper_list li .img_wrap {width:44%;} .sub_expert .exper_list li .txt_wrap {width:56%;} } @media only screen and (max-width:1024px) { .sub_expert .exper_list li {width:calc(50% - 30px);padding-left:0;padding-right:15px;} .sub_expert .exper_list li:nth-of-type(n+3) {margin-top:5px;} .sub_expert .exper_list li .txt_wrap {padding-left:15px;} .sub_expert .exper_list li .txt_wrap .group {padding-bottom:7%;margin-bottom:7%;} .sub_expert .exper_list li .txt_wrap .group p {display:block;} .sub_expert .exper_list li .txt_wrap .group p span {display:block;padding-bottom:5px;} .sub_expert .exper_list li .txt_wrap .group p span:after {display:none;} } @media only screen and (max-width:860px) { .sub_expert .exper_list li .txt_wrap .group p {font-size:var(--title-16);} .sub_expert .exper_list li .txt_wrap .group p span {font-size:var(--title-18);} } @media only screen and (max-width:768px) { .sub_expert .exper_list li {width:100%; margin-right:30px;} .sub_expert .exper_list li:nth-of-type(3n){margin-right:30px;} .sub_expert .exper_list li .txt_wrap .group p {font-size:var(--title-18);display:flex;} .sub_expert .exper_list li .txt_wrap .group p span {display:inline-flex;font-size:var(--title-20);} .sub_expert .exper_list li .txt_wrap .group p span:after {display:inline-block;height:12px;} } @media only screen and (max-width: 640px) { } @media only screen and (max-width:479px) { .sub_expert .exper_list li .txt_wrap .group p {display:block;} .sub_expert .exper_list li .txt_wrap .group p span {display:block;padding-bottom:3px;} .sub_expert .exper_list li .txt_wrap .group p span:after {display:none;} .sub_expert .exper_list li .txt_wrap .group {padding-bottom:9%;margin-bottom:9%;} } @media screen and (max-width:350px) { } @media screen and (max-width:320px) { .sub_expert .exper_list li .txt_wrap .group p {font-size:13px;} }