@charset "utf-8"; /* --------------------------------------------------------- * FileName : main.css * ProjectName : E9Pay (Responsive Web) * Description : 메인페이지 전용 스타일시트 * Author : ideumotion.com * Date : 2017.11 --------------------------------------------------------- */ /* @import url(old_base.css?ver=009); @import url(old_common.css?ver=009); */ :root { --yellow: #ffd21d; --main_header_height: 80px; --layout_section_padding: 100px 0; } .inner.small{max-width:700px;} i.icon { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center center; } i.right_arrow_icon_yellow{background-image: url(../images/contents/icon_right_arrow_yellow.png);} #skip_nav {position:absolute; left:0; top:0; display:block; width:0; height:0; font-size:0; line-height:0; z-index:8888; overflow:hidden;} #skip_nav:focus, #skip_nav:active {width:100%; height:auto; font-size:14px; color:#444; line-height:20px; text-align:center; background-color:#eee; padding:12px 0;} #wrap {width:100%; height:100%; min-height:100%; background-color:#fff;} #wrap header#header {position:relative;} #wrap header#header #toggle_notice {display:none; width:100%; height:80px; background-color:#ffe400; overflow:hidden;} #wrap header#header #toggle_notice section.wrap {position:relative;} #wrap header#header #toggle_notice section.wrap p {font-family:'NotoSansKR-Regular'; font-size:16px; color:#333; line-height:24px; text-align:left; padding-top:14px;} #wrap header#header #toggle_notice section.wrap .down_btns {position:absolute; top:15px; right:100px; font-size:0; overflow:hidden;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.googleplay {width:170px; height:50px; font-size:0; line-height:0; background:url('../images/main/bg_togglenotice_google.png') 0 0 no-repeat;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.googleplay .button {font-family:'NotoSansKR-Regular'; font-size:16px; color:#fff; line-height:50px; text-align:left; padding-left:58px;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.appstore {width:170px; height:50px; font-size:0; line-height:0; background:url('../images/main/bg_togglenotice_apple.png') 0 0 no-repeat; margin-left:10px;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.appstore .button {font-family:'NotoSansKR-Regular'; font-size:16px; color:#fff; line-height:50px; text-align:left; padding-left:63px;} #wrap header#header #toggle_notice section.wrap a.notice_close {position:absolute; top:26px; right:0; display:block; width:28px; height:28px; font-size:0; line-height:0; background:url('../images/main/btn_togglenotice_close.png') 0 0 no-repeat; overflow:hidden;} #wrap header#header #utility {display: none;} #wrap header#header #utility.utilgnb {display: block !important; width:100px; height:36px; background-color:#f7f7f7; float: left; margin-top:20px;} /* #wrap header#header #utility {display: block; width:100px; height:36px; background-color:#f7f7f7; float: left; margin-top:20px;} */ #wrap header#header #utility ul.utility_menu {float:right; font-size:0;} #wrap header#header #utility ul.utility_menu li {float:left; font-family:'NotoSansKR-DemiLight'; font-size:12px; color:#ccc; line-height:35px; background:url('../images/common/bg_utility_line_main.gif') 0 13px no-repeat; padding:0 8px 0 10px;} #wrap header#header #utility ul.utility_menu li:first-child {background:none; padding:0 8px 0 0;} #wrap header#header #utility ul.utility_menu li a {font-size:12px; color:#ccc; line-height:35px;} #wrap header#header #utility ul.utility_menu li strong {color:#40baf1;} #wrap header#header #utility ul.utility_menu li.login {background:none; padding:0 8px 0 0;} #wrap header#header #utility ul.utility_menu li.select a {display:block; font-size:12px; color:#000; line-height:35px; background:url('../images/main/bg_utility_select_arrow.png') right 14px no-repeat; padding:0 26px 0 0;} #wrap header#header #utility ul.utility_menu li.select span.country {vertical-align:middle; margin-top:-2px;} #wrap header#header #utility .language_sel {display:none;} #wrap header#header #utility .logo {display:none;} #wrap header#header #utility a.gnb_open {display:none;} #wrap header#header #cont_wrap {position:relative; width:100%; height:780px; background-color:#fff; } #wrap header#header #cont_wrap .wrap {position:fixed; top:0; left:0; width:100%; height:80px; margin:0 0 0 0; z-index:88888; overflow:hidden; background-color:#f7f7f7; } #wrap header#header #cont_wrap .wrap.active {border-bottom:1px solid #514f4e;} #wrap header#header #cont_wrap .wrap .gnb_btn {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap {width:100%; max-width:1400px; height:80px; margin:0 auto 0 auto;} #wrap header#header #cont_wrap .wrap .gnb_wrap .logo {float:left; width:150px; font-size:0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .logo a {display:block; width:100px; height:50px; background:url('../images/common/img_header_logo.png') 0 0 no-repeat; margin:15px 0 0 22px; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb {float:right;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 {font-size:0; margin-top:10px; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li {float:left; max-width:200px; margin:0 0 0 30px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li:first-child {margin-left:0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a {display:block; font-size:18px; color:#000; line-height:26px; font-weight:bold; padding:17px 0 27px 0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a:hover, #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a:focus {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.active {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.active:hover, #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.active:focus {color:#40baf1;} #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li a {color:#fff;} #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li a:hover, #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li a:focus {color:#40baf1;} #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li a.active {color:#40baf1;} #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li a.active:hover, #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li a.active:focus {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 {visibility:hidden; font-size:0; margin-top:19px; overflow:hidden;} #wrap header#header #cont_wrap .wrap.active .gnb_wrap .gnb ul.depth1 li ul.depth2 {visibility:visible;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li {float:none; max-width:120px; margin:0 0 0 0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li.depth2_title {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a {font-size:14px; color:#fff; line-height:22px; font-weight:normal; padding:6px 0 7px 0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a:hover, #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a:focus {color:#40baf1; text-decoration:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a.active {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a.active:hover, #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a.active:focus {color:#40baf1; text-decoration:none;} #wrap header#header #main_visual_cont {width:1400px; margin:0 auto 0 auto; overflow:hidden; background: url(../images/main/main.png) 610px no-repeat; height: 850px;} #wrap header#header #main_visual_cont h1 {font-size:20px; color:#000; line-height:40px; font-weight:normal; margin-top:184px;} #wrap header#header #main_visual_cont h1 strong {display:block; font-size:40px; font-weight:bold; margin-bottom:10px;} #wrap header#header #main_visual_cont h1 span {font-size:22px; display:inline-block;} #wrap header#header #main_visual_cont h1 span.include_bold span {font-weight: bold;} #wrap header#header porm4 ul.icon_list {font-size:0; margin-top:102px; overflow:hidden;} #wrap header#header #main_visual_cont ul.icon_list li {display:block; float:left; min-width:140px; font-size:14px; color:#fff; line-height:22px; text-align:center; padding-top:154px; overflow:hidden;} #wrap header#header #main_visual_cont ul.icon_list li.icon1 {width:140px; background:url('../images/main/icon_mainvisual_01.png') 0 0 no-repeat;} #wrap header#header #main_visual_cont ul.icon_list li.icon2 {width:140px; background:url('../images/main/icon_mainvisual_02.png') 0 0 no-repeat; margin-left:15px;} #wrap header#header #main_visual_cont ul.icon_list li.icon3 {width:170px; background:url('../images/main/icon_mainvisual_03.png') 15px 0 no-repeat;} #wrap header#header #main_visual_cont ul.icon_list li.icon4 {width:140px; background:url('../images/main/icon_mainvisual_04.png') 0 0 no-repeat;} #wrap header#header #simulation {position:absolute; top:50%; left:50%; width:368px; height:426px; background:url('../images/main/bg_simulation.png') 0 0 no-repeat; margin:-86px 0 0 134px; overflow:hidden;} #wrap header#header #simulation .simulation_cont {width:290px; height:327px; background-color:#f5f5f5; margin:99px 0 0 39px; overflow:hidden;} #wrap header#header #simulation .simulation_cont h2 {height:62px; font-size:18px; color:#666; line-height:60px; text-align:center; border-bottom:2px solid #e4e4e4; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_rate {position:relative; padding:0 10px 0 10px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) {position:relative; height:77px; border-bottom:1px solid #b6b6b6; padding-top:30px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector {display:inline-block; font-size:16px; color:#333; line-height:18px; vertical-align:top; margin:0 0 0 0; cursor:pointer;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector a {display:block; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector a .country {vertical-align:top;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector.selectbox a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; background:#f5f5f5 url('../images/common/btn/btn_exchange_select_arrow.png') right 15px no-repeat; background-size:10px 8px; padding-right:17px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .input_wrap {position:absolute; top:24px; right:0; display:block; width:65%; text-align:right;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .input_wrap input {display:inline-block; width:100%; font-size:30px; color:#333; line-height:34px; text-align:right; background-color:#f5f5f5;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) {position:relative; height:77px; border-bottom:1px solid #b6b6b6; padding-top:30px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector {display:inline-block; font-size:16px; color:#333; line-height:18px; vertical-align:top; margin:0 0 0 0; cursor:pointer;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector a {display:block; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector a .country {vertical-align:top;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector.selectbox a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; background:#f5f5f5 url('../images/common/btn/btn_exchange_select_arrow.png') right 15px no-repeat; background-size:10px 8px; padding-right:17px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .input_wrap {position:absolute; top:24px; right:0; display:block; width:60%; text-align:right;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .input_wrap input {display:inline-block; width:100%; font-size:30px; color:#ed1b23; line-height:34px; text-align:right; background-color:#f5f5f5;} #wrap header#header #simulation .simulation_cont .exchange_rate a.change {position:absolute; top:77px; left:50%; display:block; width:54px; height:21px; background:url('../images/common/btn/btn_exchange_rate.png') 0 0 no-repeat; background-size:54px auto; margin:0 0 0 -27px; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_txt {padding:27px 0 44px 0; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_txt p {font-family:'NotoSansKR-DemiLight'; font-size:16px; color:#666; line-height:26px; letter-spacing:-1px; text-align:center;} #wrap header#header #cont_wrap .gnb_active {display:none; position:absolute; top:0; left:0; width:100%; height:350px; background-color:#000; opacity:0.5; z-index:77777;} /* 2댑스 메뉴 영역 */ #wrap header#header #location {display:none;} #wrap header#header #location .wrap {position:relative;} #wrap header#header #location .wrap a.common_prev {display:none;} #wrap header#header #location .wrap a.location_sel {display:none;} #wrap header#header #location .wrap h1 {font-size:16px; color:#555; line-height:49px; font-weight:bold; text-align:left; padding-left:22px;} #wrap header#header #location .wrap ul.other_menu {display:none;} #wrap #slider_wrap {height:821px; background-color:#fff; overflow:hidden;} #wrap #slider_wrap .wrap {width:1024px; height:821px; margin:0 auto 0 auto;} #wrap #slider_wrap .wrap .bx-wrapper {box-shadow:none; border:0 none;} #wrap #slider_wrap .wrap .slider_cont {position:relative; width:1024px; height:821px; padding-top:83px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul {width:3072px; font-size:0; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li {float:left; width:1024px; height:738px; padding-left:513px;} #wrap #slider_wrap .wrap .slider_cont ul li h2 {font-size:46px; color:#40baf1; line-height:40px; font-weight:normal; margin-top:115px;} #wrap #slider_wrap .wrap .slider_cont ul li h2 span {display:block; font-size:20px; color:#555; line-height:24px; margin-top:19px;} #wrap #slider_wrap .wrap .slider_cont ul li p.txt {font-size:20px; color:#555; line-height:40px; margin-top:62px;} /* #wrap #slider_wrap .wrap .slider_cont ul li .down_app {font-size:0; margin-top:92px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app p {font-size:20px; color:#555; line-height:24px; font-weight:bold; padding-bottom:20px;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.googleplay {display:inline-block; *display:inline; zoom:1; width:209px; height:54px; font-size:20px; color:#555; line-height:50px; border:1px solid #e0e0e0; border-radius:54px; background:url('../images/common/icon_googleplay.png') 31px 13px no-repeat; padding-left:66px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.appstore {display:inline-block; *display:inline; zoom:1; width:191px; height:54px; font-size:20px; color:#555; line-height:50px; border:1px solid #e0e0e0; border-radius:54px; background:url('../images/common/icon_appstore.png') 31px 14px no-repeat; padding-left:66px; margin-left:10px; overflow:hidden;} */ /* 2018.06.20 수정 */ #wrap #slider_wrap .wrap .slider_cont ul li .down_app {font-size:0; margin-top:50px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app p {font-size:20px; color:#555; line-height:24px; font-weight:bold; padding-bottom:40px;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.googleplay {display:inline-block; *display:inline; zoom:1; width:200px; height:140px; font-size:18px; color:#555; line-height:50px; text-align:left; background:url('../images/common/icon_googleplay.png') 0 114px no-repeat; padding-left:26px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.googleplay:before {display:block; content:''; width:100px; height:100px; font-size:0; line-height:0; background:url('../images/main/img_e9pay_aos_qrcode.png') 0 0 no-repeat; margin-left:-12px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.appstore {display:inline-block; *display:inline; zoom:1; width:200px; height:140px; font-size:18px; color:#555; line-height:50px; text-align:left; background:url('../images/common/icon_appstore.png') 0 114px no-repeat; padding-left:28px; margin-left:10px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.appstore:before {display:block; content:''; width:100px; height:100px; font-size:0; line-height:0; background:url('../images/main/img_e9pay_ios_qrcode.png') 0 0 no-repeat; margin-left:-20px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li.step1 {background:url('../images/main/img_slider_visual_01.png') 85px 0px no-repeat;} #wrap #slider_wrap .wrap .slider_cont ul li.step2 {background:url('../images/main/img_slider_visual_02.png') 85px 0px no-repeat;} #wrap #slider_wrap .wrap .slider_cont ul li.step3 {background:url('../images/main/img_slider_visual_03.png') 85px 0px no-repeat;} #wrap #slider_wrap .wrap .slider_cont .bxslider {height:738px !important;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-controls-direction a.bx-prev {top:50%; left:0; width:70px; height:93px; font-size:0; line-height:0; background:url('../images/main/btn_slider_prev.png') center 22px no-repeat; margin-top:-120px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-controls-direction a.bx-next {top:50%; right:0; width:70px; height:93px; font-size:0; line-height:0; background:url('../images/main/btn_slider_next.png') center 22px no-repeat; margin-top:-120px; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-pager {bottom:40px;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-pager .bx-pager-item a {width:12px; height:12px; font-size:0; line-height:0; background:url('../images/main/btn_pageing.png') 0 0 no-repeat; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-pager .bx-pager-item a.active {background:url('../images/main/btn_pageing_active.png') 0 0 no-repeat;} #wrap #service_wrap {height:564px; background-color:#ffd21d;} #wrap #service_wrap .wrap {width:1400px; text-align:center; margin:0 auto 0 auto; padding-top:40px;} #wrap #service_wrap .wrap h3 {font-size: 20px; margin-top: 20px;} #wrap #service_wrap .wrap h2 span {display:block; font-size:20px; margin-top:11px;} #wrap #service_wrap .wrap ul {font-size:0; overflow:hidden;} #wrap #service_wrap .wrap ul li {display:inline-block; *display:inline; zoom:1; width:250px; margin-left: 130px; overflow:hidden;} #wrap #service_wrap .wrap ul li:first-child {margin-left:0;} #wrap #service_wrap .wrap ul li span {display:block; width:250px; font-size:28px; color:#000; line-height:30px; font-weight:bold; text-align:center; padding-top:230px; overflow:hidden;} #wrap #service_wrap .wrap ul li span em {display:block; font-size:18px; font-weight:normal; font-style:normal; margin-top: 20px; line-height: 24px; } #wrap #service_wrap .wrap ul li.icon1 span {background:url('../images/main/content1_1.png') 90px 105px no-repeat;} #wrap #service_wrap .wrap ul li.icon2 span {background:url('../images/main/content1_2.png') 90px 105px no-repeat;} #wrap #service_wrap .wrap ul li.icon3 span {background:url('../images/main/content1_3.png') 90px 105px no-repeat;} #wrap #service_wrap .wrap ul li.icon4 span {background:url('../images/main/content1_4.png') 90px 105px no-repeat;} #wrap #etc_wrap {height:100%; background-color:#fff;} #wrap .contents3 { background: url(../images/main/content2_bg.png) no-repeat; height:850px !important ; background-size: cover;} #wrap #etc_wrap .wrap {width:1400px; margin:0 auto 0 auto; text-align:center; padding-top:40px; } #wrap #etc_wrap .wrapcon4 {height: 650px; } #wrap #etc_wrap .wrap .whoisL {float:left; width:700px; margin-top:70px; overflow:hidden; } #wrap #etc_wrap .wrap .whoisL h1 {font-size: 38px; } #wrap #etc_wrap .wrap .whoisL span {font-size: 28px; font-weight: bold;} #wrap #etc_wrap .wrap .whoisL em {display:block; background: url(../images/main/content2_6.png) 213px 0px no-repeat; height: 80px; background-position: bottom;} #wrap #etc_wrap .wrap .whoisL .iconpaper {display: block; margin: 0 auto; padding: 40px 0; cursor: pointer;} #wrap #etc_wrap .wrap .whoisL .iconmedal {display: block; margin: 0 auto; padding-bottom:20px; } #wrap #etc_wrap .wrap .whoisR {float:right; width:700px; padding-top:70px; overflow:hidden;} #wrap #etc_wrap .wrap .whoisR h1 {font-size: 38px; } #wrap #etc_wrap .wrap .whoisR span {font-size: 28px; font-weight: bold;} #wrap #etc_wrap .wrap .whoisR em {display:block; background: url(../images/main/content2_6.png) 213px 0px no-repeat; height: 80px; background-position: bottom;} #wrap #etc_wrap .wrap .whoisR .iconpaper2 {display: block; margin: 0 auto; padding: 40px 0; cursor: pointer;} #wrap #etc_wrap .wrap .whoisR .iconmedal2 {display: block; margin: 0 auto; padding-bottom:20px; } #wrap #etc_wrap .wrap .contetn3bg {background: url(../images/main/content3.png) no-repeat 50%; height: 850px;} #wrap #etc_wrap .wrap .contetn3bg_en {background: url(../images/main/content3_En.png) no-repeat 50%; height: 850px; margin: 20px 0;} #wrap #etc_wrap .wrap .contetn3bg span {display:block; } #wrap #etc_wrap .wrap .contetn3bg_en span {display:block; } #wrap #etc_wrap .wrap .conimg {float: left; margin: 0 0 0 250px; } #wrap #etc_wrap .wrap .contetn4 {padding-top: 70px;} #wrap #etc_wrap .wrap .contacttext {text-align: left; display: inline-block; padding: 100px 250px 0 0;float: left;} #wrap #etc_wrap .wrap .contacttext h3 {font-size: 22px; padding-bottom: 25px;} #wrap #etc_wrap .wrap .contacttext img {width: 24px;} #wrap #etc_wrap .wrap .contacttext .howtouse {display: inline-block; margin: 0 10px;} #wrap #etc_wrap .wrap .contacttext span {font-size: 18px; display: block; padding-bottom: 38px;} #wrap #etc_wrap .wrap .contacttext em {font-size: 15px; color: #999999;} #wrap #etc_wrap .wrap .signupbt span {background-color: #F3D34B; padding: 15px 308px; border-radius: 30px; font-weight: 700; font-size:15px; } #wrap #etc_wrap .wrap .input_name {margin: 40px 0 0 0;} #wrap #etc_wrap .wrap .input_name input{width: 50%; height: 50px; border-radius: 8px; padding-left: 20px; display: inline-block; margin-bottom:15px; font-size: 16px; color: #333; line-height: 42px; background-color: #fff; border: 0 none;} #wrap #etc_wrap .wrap .input_name .selectBox{width: 50%; height: 50px; display: inline-block;} #wrap #etc_wrap .wrap .input_name .selectBox select{width: 50%; height: 50px; border-radius: 8px; padding-left: 20px; display: inline-block; margin-bottom:10px;} #wrap #etc_wrap .wrap .input_name .selectBox .selectric {border: 1px solid #fff; text-align: left; border-radius: 8px; padding: 5px 0; margin-bottom: 10px;} #wrap #etc_wrap .wrap .input_name .selectBox .selectric .button {margin-top: 5px; } #wrap #etc_wrap .wrap .info_text { display: inline-block; width: 50%; margin-bottom: 40px; font-size: 16px; } #wrap #etc_wrap .wrap .notice_area {float:left; width:465px; margin-top:66px; overflow:hidden;} #wrap #etc_wrap .wrap .notice_area h2 {position:relative; width:465px; font-size:24px; color:#555; line-height:28px; padding-bottom:11px;} #wrap #etc_wrap .wrap .notice_area h2 span {font-size:16px; font-weight:normal;} #wrap #etc_wrap .wrap .notice_area h2 a.more {position:absolute; top:3px; right:0; display:block; width:24px; height:24px; font-size:0; line-height:0; text-indent:-99999px; background:url('../images/main/btn_notice_more.png') 0 0 no-repeat; overflow:hidden;} #wrap #etc_wrap .wrap .notice_area h2 a.more em {font-style:normal;} #wrap #etc_wrap .wrap .notice_area ul {width:465px; font-size:0; border-top:2px solid #e0e0e0; border-bottom:2px solid #e0e0e0; padding:22px 0 23px 0; overflow:hidden;} #wrap #etc_wrap .wrap .notice_area ul li {position:relative; width:465px; background:url('../images/main/bg_dot_gray_01.png') 0 9px no-repeat; padding:0 90px 0 15px; margin-top:17px;} #wrap #etc_wrap .wrap .notice_area ul li:first-child {margin-top:0;} #wrap #etc_wrap .wrap .notice_area ul li a {font-size:18px; color:#555; line-height:22px;} #wrap #etc_wrap .wrap .notice_area ul li span {position:absolute; top:0; right:0; font-size:16px; color:#999; line-height:22px; text-align:right;} #wrap #etc_wrap .wrap .thumb_area {float:right; width:397px; padding-top:60px; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area h2 {position:relative; width:397px; font-size:24px; color:#555; line-height:28px; padding-bottom:11px;} #wrap #etc_wrap .wrap .thumb_area h2 span {font-size:16px; font-weight:normal;} #wrap #etc_wrap .wrap .thumb_area h2 a.more {position:absolute; top:3px; right:0; display:block; width:24px; height:24px; font-size:0; line-height:0; text-indent:-99999px; background:url('../images/main/btn_notice_more.png') 0 0 no-repeat; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area h2 a.more em {font-style:normal;} #wrap #etc_wrap .wrap .thumb_area .detail_view_cont {width:397px; height:204px; background-color:#000; text-align:center; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list {position:relative; width:397px; height:64px; margin-top:10px; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list a.thumb_prev {position:absolute; top:0; left:0; display:block; width:30px; height:64px; background:#fff url('../images/main/btn_thumb_prev.png') left 23px no-repeat; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list a.thumb_next {position:absolute; top:0; right:0; display:block; width:29px; height:64px; background:#fff url('../images/main/btn_thumb_next.png') right 23px no-repeat; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul {width:397px; font-size:0; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul {width:338px; font-size:0; margin-left:30px; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li {float:left; width:116px; height:64px; text-align:center; background-color:#999; margin-left:24px; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li:first-child {margin-left:0;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li a {position:relative; display:block; width:116px; height:64px; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li a img {width:116px; height:64px;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li.movie a:before {position:absolute; top:50%; left:50%; content:''; display:block; width:12px; height:16px; background:url('../images/main/icon_movie_play.png') 0 0 no-repeat; margin:-8px 0 0 -6px; overflow:hidden;} */ #wrap #visitors_wrap {height:450px; background-color:#40baf1;} #wrap #visitors_wrap .wrap {width:1024px; text-align:center; margin:0 auto 0 auto;} #wrap #visitors_wrap .wrap h2 {font-size:46px; color:#fff; line-height:40px; font-weight:normal; background:url('../images/main/icon_visitors.png') center 70px no-repeat; padding-top:125px;} #wrap #visitors_wrap .wrap h2 span {display:block; font-size:20px; margin-top:11px;} #wrap #visitors_wrap .wrap ul {font-size:0; margin-top:73px; overflow:hidden;} #wrap #visitors_wrap .wrap ul li {display:inline-block; *display:inline; zoom:1; min-width:250px; font-size:50px; color:#333; line-height:54px; text-align:center; overflow:hidden;} #wrap #visitors_wrap .wrap ul li i {font-style:normal;} #wrap #visitors_wrap .wrap ul li span {display:block; font-size:20px; line-height:24px; margin-top:12px;} #wrap #visitors_wrap .wrap ul li span strong {color:#ed1b23;} #wrap footer#footer {width:100%; height:176px; overflow:hidden;} #wrap footer#footer #side_menu {width:100%; height:50px; border-bottom:1px solid #e0e0e0; overflow:hidden;} #wrap footer#footer #side_menu .wrap {width:980px;} #wrap footer#footer #side_menu .wrap ul {font-size:0; overflow:hidden;} #wrap footer#footer #side_menu .wrap ul li {float:left; width:16.66666666666667%; border-right:1px solid #e0e0e0; overflow:hidden;} #wrap footer#footer #side_menu .wrap ul li:first-child {border-left:1px solid #e0e0e0;} #wrap footer#footer #side_menu .wrap ul li:first-child a {color:#ed1b23;} #wrap footer#footer #side_menu .wrap ul li a {display:block; font-size:14px; color:#999; line-height:49px; text-align:center;} #wrap footer#footer #side_menu .wrap ul li:nth-child(6) a {color:#0e75bc;} #wrap footer#footer #copyright .wrap {position:relative; width:980px; height:125px;} /* 2018.06.20 수정 */ /* #wrap footer#footer #copyright .wrap p {font-size:13px; color:#999; line-height:22px; padding:26px 0 0 32px;} */ #wrap footer#footer #copyright .wrap p {font-size:13px; color:#999; line-height:22px; padding:41px 0 0 32px;} #wrap footer#footer #copyright .wrap p span {margin-right:18px;} #wrap footer#footer #copyright .wrap p span a.alliance {display:inline-block; *display:inline; zoom:1; height:28px; font-size:14px; color:#fff; line-height:26px; font-weight:normal; text-align:center; vertical-align:middle; background-color:#a7afb8; border-radius:3px; padding:0 14px 0 14px; overflow:hidden;} #wrap footer#footer #copyright .wrap p em {font-style:normal;} #wrap footer#footer #copyright .wrap .logo {position:absolute; top:29px; right:43px; width:78px; height:40px; background:url('../images/common/img_footer_logo.gif') 0 0 no-repeat; overflow:hidden;} /* 2018.06.20 sns_wrap 추가 */ #wrap footer#footer #copyright .wrap .sns_wrap {position:absolute; top:80px; right:36px; width:120px; height:24px; font-size:0; overflow:hidden;} #wrap footer#footer #copyright .wrap .sns_wrap a.facebook {display:inline-block; *display:inline; zoom:1; width:24px; height:24px; font-size:0; line-height:0; background:url('../images/common/btn/btn_sns_facebook.png') 0 0 no-repeat; overflow:hidden;} #wrap footer#footer #copyright .wrap .sns_wrap a.instagram {display:inline-block; *display:inline; zoom:1; width:24px; height:24px; font-size:0; line-height:0; background:url('../images/common/btn/btn_sns_instagram.png') 0 0 no-repeat; margin-left:8px; overflow:hidden;} #wrap footer#footer #copyright .wrap .sns_wrap a.youtube {display:inline-block; *display:inline; zoom:1; width:24px; height:24px; font-size:0; line-height:0; background:url('../images/common/btn/btn_sns_youtube.png') 0 0 no-repeat; margin-left:8px; overflow:hidden;} #wrap footer#footer #copyright .wrap .sns_wrap a.blog {display:inline-block; *display:inline; zoom:1; width:24px; height:24px; font-size:0; line-height:0; background:url('../images/common/btn/btn_sns_blog.png') 0 0 no-repeat; margin-left:8px; overflow:hidden; background-size: cover;} /* Common Popup */ article.popup_wrap {visibility:hidden; position:fixed; top:0; left:0; width:100%; height:100%; min-height:100%; padding:0 0 0 0; z-index:88888; overflow:hidden;} article.popup_wrap .popup_cont_box {position:fixed; top:50%; left:50%; width:100%; background-color:#fff; box-shadow:0 1px 1px #1c1c1c; z-index:99999; overflow:hidden;} article.popup_wrap .popup_cont_box section.header {position:relative; height:50px; background-color:#40baf1; overflow:hidden;} article.popup_wrap .popup_cont_box section.contents {padding:0 25px 0 25px;} article.popup_wrap .popup_cont_box section.header p {font-size:18px; color:#fff; line-height:48px; font-weight:bold; text-align:left; padding-left:24px;} article.popup_wrap .popup_cont_box section.header a.close {display:block; position:absolute; top:0; right:9px; width:50px; height:50px; background:url('../images/common/btn/btn_popup_close.png') 16px 16px no-repeat; overflow:hidden;} article.popup_wrap .popup_cont_box section.header a.close_black {display:block; position:absolute; top:0; right:9px; width:50px; height:50px; background:url('../images/common/btn/btn_popup_close_black.png') 16px 16px no-repeat; overflow:hidden;} article.popup_wrap .popup_cont_box section.contents .footer_btn {font-size:0; padding:0 0 25px 0; overflow:hidden;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn {float:right; width:49.5%; height:40px; background-color:#fff; border:2px solid #999;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn .button {font-size:16px; color:#999; line-height:36px;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn.blue {border:2px solid #0e75bc;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn.blue .button {color:#0e75bc;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn:first-child {float:left;} article.popup_wrap .popup_cont_box section.contents .footer_btn.full .btn {float:none; width:100%;} article.popup_wrap .popup_cont_box section.footer {position:relative; height:65px; background-color:#cacfd4; overflow:hidden;} article.popup_wrap .popup_cont_box2 {position:fixed; top:50%; left:50%; width:100%; background-color:#fff; box-shadow:0 1px 1px #1c1c1c; z-index:99999; overflow:hidden;} article.popup_wrap .popup_cont_box2 section.header {position:relative; height:50px; background-color:#40baf1; overflow:hidden;} article.popup_wrap .popup_cont_box2 section.contents {padding:0 25px 0 25px;} article.popup_wrap .popup_cont_box2 section.header p {font-size:18px; color:#fff; line-height:48px; font-weight:bold; text-align:left; padding-left:24px;} article.popup_wrap .popup_cont_box2 section.header a.close {display:block; position:absolute; top:0; right:9px; width:50px; height:50px; background:url('../images/common/btn/btn_popup_close.png') 16px 16px no-repeat; overflow:hidden;} article.popup_wrap .popup_cont_box2 section.header a.close_black {display:block; position:absolute; top:0; right:9px; width:50px; height:50px; background:url('../images/common/btn/btn_popup_close_black.png') 16px 16px no-repeat; overflow:hidden;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn {font-size:0; padding:0 0 25px 0; overflow:hidden;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn .btn {float:right; width:49.5%; height:40px; background-color:#fff; border:2px solid #999;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn .btn .button {font-size:16px; color:#999; line-height:36px;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn .btn.blue {border:2px solid #0e75bc;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn .btn.blue .button {color:#0e75bc;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn .btn:first-child {float:left;} article.popup_wrap .popup_cont_box2 section.contents .footer_btn.full .btn {float:none; width:100%;} article.popup_wrap .popup_cont_box2 section.footer {position:relative; height:65px; background-color:#cacfd4; overflow:hidden;} article.notice_wrap {visibility:hidden; position:fixed; top:0; left:0; width:100%; height:100%; min-height:100%; padding:0 0 0 0; z-index:88888; overflow:hidden;} article.notice_wrap .notice_cont_box {position:fixed; top:50%; left:50%; width:100%; background-color:#fff; border-radius:3px; box-shadow:0 1px 1px #1c1c1c; z-index:99999; overflow:hidden;} article.notice_wrap .notice_cont_box section.header {border-bottom:1px solid #b6b6b6; margin:0 15px 0 15px; overflow:hidden;} article.notice_wrap .notice_cont_box section.header p {font-family:'NotoSansKR-Bold'; font-size:18px; color:#333; line-height:24px; text-align:center; padding:16px 0 17px 0;} article.notice_wrap .notice_cont_box section.contents {min-height:80px; height:180px; max-height:180px; font-size:0; margin:12px 15px 20px 15px; overflow-x:hidden; overflow-y:auto;} article.notice_wrap .notice_cont_box section.contents p {font-size:13px; color:#555; line-height:20px; word-wrap:break-word; margin-top:14px; overflow:hidden;} article.notice_wrap .notice_cont_box section.contents p:first-child {margin-top:0;} article.notice_wrap .notice_cont_box section.footer {position:relative; height:50px; border-top:1px solid #b6b6b6; margin:0 15px 0 15px; overflow:hidden;} article.notice_wrap .notice_cont_box section.footer label.user_check {float:left; font-size:12px; color:#333; line-height:20px; margin:15px 0 0 0;} article.notice_wrap .notice_cont_box section.footer label.user_check input {width:20px; height:20px; background-size:20px 20px; vertical-align:top; margin-right:6px;} article.notice_wrap .notice_cont_box section.footer button.btn {display:block; float:right; width:60px; height:30px; background-color:#0e75bc; border-radius:15px; margin:10px 0 0 0;} article.notice_wrap .notice_cont_box section.footer button.btn .button {font-size:12px; color:#fff; line-height:20px;} article.notice_wrap .notice_dimd {display:none; position:fixed; top:0; left:0; width:100%; height:100%; min-height:100%; background-color:#000; opacity:0.7; z-index:98888;} article.notice_wrap .notice_dimd.active {display:block;} /* 모바일 메뉴 버튼 */ /* .m_menu_bg {z-index:101; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.7); cursor:pointer; } #m_menu {z-index:102; position:fixed; right:-100%; top:0; width:500px; max-width:80%; height:100%; background-color:#fff; box-sizing:Border-box; transition:all 0.5s; cursor: pointer;} #m_menu.on {right:0; } #m_menu .top_box {position:relative; padding:20px; box-sizing:border-box; } #m_menu .top_box > img {width: 80px;} #m_menu .top_box .close_btn {position:absolute; right:20px; top:calc(50% - 15px); width:30px; height:30px; transform: scale(0.7);} #m_menu .top_box .close_btn i {display:block; width:100%; height:2px; background-color:#333; } #m_menu .top_box .close_btn i:first-of-type {-webkit-transform:rotate(45deg) translate(9px,9px); -moz-transform:rotate(45deg) translate(9px,9px); -ms-transform:rotate(45deg) translate(9px,9px); -o-transform:rotate(45deg) translate(9px,9px); transform:rotate(45deg) translate(9px,9px); } #m_menu .top_box .close_btn i:last-of-type {-webkit-transform:rotate(-45deg) translate(-7px,8px); -moz-transform:rotate(-45deg) translate(-7px,8px); -ms-transform:rotate(-45deg) translate(-7px,8px); -o-transform:rotate(-45deg) translate(-7px,8px); transform:rotate(-45deg) translate(-7px,8px); } #m_menu .gnb_box {border-top:1px solid #ddd; } #m_menu .gnb_box > ul > li {border-bottom:1px solid #dddddd; } #m_menu .gnb_box > ul > li > a{position:relative; display:block; padding: 14px; font-size:14px; font-weight:bold; color:#222222; letter-spacing:-0.04em; box-sizing:border-box; } .m_btn_custom {position: absolute; right: 10px;top: 50%; width: 24px; line-height: 0; cursor: pointer; transform: translateY(-50%);} .m_btn_custom i{display:inline-block; width:100%; height:3px; background:#fff;margin: 2px 0;} */ /* footer */ #wrap footer#footer { display: flex; justify-content: center; align-items: center; } #wrap footer#footer #copyright .wrap { display: flex; justify-content: space-between; } #wrap footer#footer #copyright .footer_logo_wrap { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } #wrap footer#footer #copyright .wrap p { padding: 0; padding-top: 20px; } #wrap footer#footer #copyright .wrap .logo, #wrap footer#footer #copyright .wrap .sns_wrap { position: static; } /* 개인정보 처리방침 팝업 */ .privacy_policy_popup_bg { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; } .privacy_policy_popup { display: none; position: fixed; left: 50%; top: 50%; z-index: 101; transform: translate(-50% , -50%); width: 540px; background: #fff; border-radius: 30px; padding: 40px 0; box-sizing: border-box; } .privacy_policy_popup .pop_con { padding: 0 20px; box-sizing: border-box; } .privacy_policy_popup .tit_box p { float: left; font-size: 20px; font-weight: bold; letter-spacing: -0.04em; color: #000000; } .privacy_policy_popup .tit_box a { float: right; display: inline-block; } .privacy_policy_popup .tit_box:after { content: ''; display: table; clear: both; padding-bottom: 30px; } .privacy_policy_popup .box_con { max-height: 550px; overflow-y: auto; padding: 0 20px; box-sizing: border-box; } .privacy_policy_popup .box_con::-webkit-scrollbar {width: 6px;} .privacy_policy_popup .box_con::-webkit-scrollbar-thumb {background-color: #b9b9b9; border-radius:3px;} .privacy_policy_popup .box_con::-webkit-scrollbar-track {background-color: #fff;} .privacy_policy_popup .box_con p, .privacy_policy_popup .box_con th, .privacy_policy_popup .box_con td { color: #a9a9a9; } .privacy_policy_popup .selectric .label { padding-left: 0 !important; font-size: 12px; } .privacy_policy_popup .selectric .button { font: 20px/40px Lucida Sans Unicode, Arial Unicode MS, Arial; background: none !important; } .privacy_policy_popup .selectric-items .selectric-scroll ul li { padding: 10px !important; font-size: 12px; line-height: 20px; } /* 기업 송금받기 contents */ .collection_visual1 { height: calc(100vh - var(--main_header_height)); background: url(../images/main/bg_collection_main01.png) no-repeat center / cover; } .collection_desc1 { padding-top: 8%; } .collection_desc1 h2 { font-size: 50px; font-weight: 800; } .collection_desc1 p { margin: 1% 0 2%; font-size: 24px; font-weight: 400; } .collection_desc1 button { padding: .6em 2.2em; font-size: 20px; border: 2px solid #fff; border-radius: 2em; background-color: rgba(0, 0, 0, 0.3); } .collection_desc1 h2, .collection_desc1 p, .collection_desc1 button { color: #fff; } .collection_desc2 h2 { font-size: 54px; } .collection_desc2 h4 { font-size: 26px; margin-bottom: 50px; } .collection_desc2 p { width: 500px; max-width: 94%; margin: 14px auto 0; font-size: 18px; word-break: keep-all; } .collection_desc2 h2, .collection_desc2 h4, .collection_desc2 p { color: #000; text-align: center; } .progress_image_wrap { display: flex; margin-bottom: 80px; } .progress_image_wrap > img { height: 70px; } .progress_image_wrap > img.mobile { display: none; } .progress_image_wrap .progress_wrap { width: calc(100% - 140px); margin-top: 35px; } .progress_wrap { display: flex; flex-wrap: wrap; } .progress_bar { width: 100%; position: relative; margin-bottom: 20px; } .progress_bar > hr { display: block; border: 1px solid #ffd21d; background-color: #ffd21d; width: 100vw; margin: 0; } .progress_bar.gray > hr { border: 1px solid #d6d6d6; background-color: #d6d6d6; } .progress_circle { display: inline-block; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background-color: #ffd21d; } .progress_bar.custom1 > hr { border: 1px solid #fff; background-color: #fff; } .progress_bar.custom1 .progress_circle { width: 12px; height: 12px; top: -6px; background-color: #fff; } .progress_bar.gray .progress_circle {background-color: #d6d6d6;} /* circle이 4개 일때(기본) */ .progress_circle1 {left: 0;} .progress_circle2 {left: 25%;} .progress_circle3 {left: 50%;} .progress_circle4 {left: 75%;} /* circle이 3개 일때 */ .pieces3 .progress_circle2 {left: 40%;} .pieces3 .progress_circle3 {left: 80%;} /* circle이 5개 일때 */ .pieces5 .progress_circle2 {left: 20%;} .pieces5 .progress_circle3 {left: 40%;} .pieces5 .progress_circle4 {left: 60%;} .pieces5 .progress_circle5 {left: 80%;} .progress_text { display: flex; width: 100%; } /* text가 4개 일때(기본) */ .progress_text > p { width: 25%; font-size: 18px; } /* text가 3개 일때(기본) */ .pieces3 .progress_text > p {width: 40%;} .pieces3 .progress_text > p:last-child {width: 20%;} /* text가 5개 일때(기본) */ .pieces5 .progress_text > p {width: 20%;} .progress_text > p > span { display: inline-block; padding-right: 30%; } .ars_cont_wrap { display: flex; } .ars_cont_wrap.custom { justify-content: center; } .ars_cont_wrap > div { width: 25%; padding-bottom: 25%; border: 1px solid #707070; border-radius: 50%; position: relative; } .ars_cont_wrap.custom > div { border: 0; background-color: #fff8dd; } .ars_cont_wrap > div > p { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 17px; display: flex; flex-direction: column; align-items: center; } .ars_cont_wrap > div > p > i { width: 10%; padding-bottom: 10%; } .ars_cont_wrap > div > p > em { display: inline-block; margin: 5% 0 4%; font-size: 24px; font-weight: 700; } .ars_cont_wrap > div > p > span { padding: 0 14%; font-size: 16px; text-align: center; } .ars_cont_wrap > span { width: 20px; text-align: center; } .ars_cont_wrap > span > i { width: 50%; height: 100%; } .collection_desc3 .inner > h3 { font-size: 40px; text-align: center; } .underline_yellow { position: relative; } .underline_yellow > span { position: relative; z-index: 10; } .underline_yellow::before { content: ''; display: block; position: absolute; bottom: 10px; left: 0; width: 100%; height: 12px; background-color: #fde480; z-index: 5; } .collection_card_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 10%; } .collection_card { width: 48%; margin-top: 50px; padding: 3.75% 3%; background-color: #fff; border-radius: 20px; box-shadow: 0 9px 25px 0 rgba(107, 127, 255, 0.16); } .collection_card > h6 { font-size: 26px; font-weight: 800; margin-bottom: 20px; } .collection_card > p { font-size: 16px; } .collection_desc3 > h3 { font-size: 38px; text-align: center; } .collection_card_wrap2 { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-areas: "a b c d e"; } .collection_card2 { border-right: 2px solid #dfdfdf; text-align: center; margin-top: 80px; padding: 0 10%; } .collection_card2:nth-child(1) {grid-area: a;} .collection_card2:nth-child(2) {grid-area: b;} .collection_card2:nth-child(3) {grid-area: c;} .collection_card2:nth-child(4) {grid-area: d;} .collection_card2:nth-child(5) {grid-area: e;} .collection_card2:last-child { border: 0; } .collection_card2 > img { width: 80px; } .collection_card2 > h6 { margin: 18px 0; font-size: 26px; font-weight: 800; text-align: center; } .collection_card2 > p { font-size: 16px; text-align: center; } .collection_visual2 { height: calc(100vh - var(--main_header_height)); background: url(../images/main/bg_collection_main02.png) no-repeat center / cover; position: relative; } .collection_visual2 .swiper-prevBtn, .collection_visual2 .swiper-nextBtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1000; color: #fff; } .collection_visual2 .swiper-prevBtn {left: 10%;} .collection_visual2 .swiper-nextBtn {right: 10%;} .swiper-prevBtn.swiper-button-disabled, .swiper-nextBtn.swiper-button-disabled { opacity: 0.3; cursor: auto; } .swiper-pagination { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); } .swiper-pagination-bullet { margin: 0 10px; background-color: #5d5d5d; opacity: 0.4; } .swiper-pagination-bullet-active { background-color: #fff; opacity: 1; } .text_slide { overflow: hidden; } .text_slide h3 { margin: 10vh 0 8vh; font-size: 40px; color: #fff; text-align: center; } .text_slide .swiper-slide { padding: 0 10%; color: #fff; } .text_slide .swiper-slide > h6 { font-size: 32px; } .text_slide .swiper-slide > p { font-size: 20px; } .text_slide .swiper-slide > h6, .text_slide .swiper-slide > p { margin-top: 5vh; color: #fff; text-align: center; } .collection_desc4 { display: flex; align-items: center; } .collection_desc4 > img { width: 40%; margin-right: 1vw; } .collection_desc4 > article > img { width: 26%; } .collection_desc4 > article > p { font-size: 22px; margin-top: 1em; } .collection_visual3 { display: flex; align-items: center; height: calc(100vh - var(--main_header_height)); background: url(../images/main/bg_collection_main04.png) no-repeat center / cover; } .collection_visual3 hr { display: block; width: 220px; height: 4px; margin: 30px auto; background-color: #fff; } .collection_visual3 .inner > h3 { font-size: 60px; } .collection_visual3 .inner > p { width: 30vw; min-width: 280px; margin: 0 auto; font-size: 24px; } .collection_visual3 .inner > h3, .collection_visual3 .inner > p { color: #fff; text-align: center; } .frequently_Q_wrap > h3 { font-size: 36px; } .frequently_Q { margin-top: 30px; border: 2px solid #f3f3f3; border-radius: 24px; } .frequently_Q > h6 { position: relative; padding: 20px 48px 20px 28px; background-color: #f3f3f3; font-size: 1.2em; border-radius: 20px; transition: border-bottom-left-radius .4s,border-bottom-right-radius .4s; cursor: pointer; } .frequently_Q.active > h6 { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .frequently_Q > h6 > img { width: 1.2em; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .frequently_Q.active > h6 > img { transform: translateY(-50%) rotate(180deg); } .frequently_Q > h6:before { content: 'Q. '; display: inline-block; width: 1.2em; color: var(--yellow); } .frequently_Q > p { display: none; padding: 20px; font-size: 1em; } /* //기업 송금받기 contents */ .etc_title { max-width: 1400px; margin: 0 auto; font-size: 2.5em; text-align: center; } /* Popup Contents */ section.contents .alert_img {text-align:center; padding:30px 0 30px 0;} section.contents .alert_img .img_w {display:block;} section.contents .alert_img .img_m {display:none;} /* Common Dimd */ .dimd {display:none; position:fixed; top:0; left:0; background-color:#000; opacity:0.7; z-index:9998;} .dimd.active {display:block;} /* Common Loading */ .loading_wrap {display:none;} .loading_wrap .common_loading {position:fixed; top:50%; left:50%; width:40px; height:40px; background:url('../images/common/img_loading.png') 0 0 no-repeat; background-size:40px auto; -webkit-animation:loading_spin 1.5s infinite linear; animation:loading_spin 1.5s infinite linear; margin:-20px 0 0 -20px; z-index:99998; overflow:hidden;} .loading_wrap .dimd_loading {display:block; position:fixed; top:0; left:0; width:100%; height:100%; min-height:100%; background-color:#000; opacity:0.8; z-index:98888;} /* Keyframes */ @-webkit-keyframes loading_spin { 0% {transform:rotate(360deg);} 100% {transform:rotate(0deg);} } /******************* Mobile CSS ********************/ @media all and (max-width:1400px) { .inner, #wrap #etc_wrap .wrap {width:93.75%;} #wrap #etc_wrap .wrap .input_name input, #wrap #etc_wrap .wrap .input_name .selectBox, #wrap #etc_wrap .wrap .info_text { width: 90%; } .ars_cont_wrap > div > p > em { font-size: 1.8vw; } .ars_cont_wrap > div > p > span { font-size: 1vw; } .collection_visual2 .swiper-prevBtn {left: 3%;} .collection_visual2 .swiper-nextBtn {right: 3%;} } @media all and (max-width:1000px) { /* 기업 송금받기 contents */ .collection_visual1 { height: 56.25vw; min-height: 240px; } .collection_visual3 { height: 56.25vw; } .collection_desc1 { text-align: center; } .collection_desc1 h2 { font-size: 5.5vw; } .collection_desc1 p { margin: 10px 0 20px; font-size: 3vw; } .collection_desc1 button { padding: .6em 2.2em; font-size: 2vw; border: 1px solid #fff; } .collection_desc2 h2 { font-size: 5.4vw; } .collection_desc2 h4 { font-size: 2.6vw; } .collection_desc2 p { font-size: 1.8vw; } .inner.collection_custom1 { display: flex; } .inner.collection_custom1 .progress_image_wrap { display: block; width: 50%; margin-bottom: 30px; } .progress_image_wrap > img { display: none; } .progress_image_wrap > img.mobile { display: inline; } .progress_image_wrap .progress_wrap { width: 100%; } .progress_bar { width: 16px; } .progress_bar > hr { width: 0; height: 400px; } .progress_text { width: calc(100% - 16px); } .underline_yellow::before { height: 1.2vw; bottom: 0.5vw; } .pieces3 .progress_circle, .pieces5 .progress_circle, .progress_circle { left: -3px; } .pieces3.custom1 .progress_circle, .pieces5.custom1 .progress_circle, .custom1 .progress_circle { left: -5px; } /* circle이 4개 일때(기본) */ .progress_circle1, .progress_bar.custom1 .progress_circle1 {top: 0;} .progress_circle2, .progress_bar.custom1 .progress_circle2 {top: 33.3%;} .progress_circle3, .progress_bar.custom1 .progress_circle3 {top: 66.6%;} .progress_circle4, .progress_bar.custom1 .progress_circle4 {top: 100%;} /* circle이 3개 일때 */ .pieces3 .progress_circle2, .progress_bar.custom1 .progress_circle2 {top: 50%;} .pieces3 .progress_circle3, .progress_bar.custom1 .progress_circle3 {top: 100%;} /* circle이 5개 일때 */ .pieces5 .progress_circle2, .progress_bar.custom1 .progress_circle2 {top: 25%;} .pieces5 .progress_circle3, .progress_bar.custom1 .progress_circle3 {top: 50%;} .pieces5 .progress_circle4, .progress_bar.custom1 .progress_circle4 {top: 75%;} .pieces5 .progress_circle5, .progress_bar.custom1 .progress_circle5 {top: 100%;} .progress_text { display: block; position: relative; top: -7px; } /* text가 4개 일때(기본) */ .progress_text > p { width: 100%; height: calc(33.3% - 7px); } /* text가 3개 일때(기본) */ .pieces3 .progress_text > p {width: 100%; height: calc(50% - 11px);} .pieces3 .progress_text > p:last-child {width: 100%;} /* text가 5개 일때(기본) */ .pieces5 .progress_text > p {width: 100%; height: calc(25% - 6px);} .progress_text > p > span { padding-right: 0; } .ars_cont_wrap { flex-direction: column; align-items: center; } .ars_cont_wrap > div { width: 50%; padding-bottom: 50%; } .ars_cont_wrap > span { display: inline-block; margin: 5px 0; } .ars_cont_wrap > span > i { width: 20px; height: 20px; transform: rotate(90deg); } .ars_cont_wrap > div > p > em { font-size: 3.2vw; } .ars_cont_wrap > div > p > span { font-size: 1.8vw; } .collection_desc3 .inner > h3 { font-size: 3.6vw; } .collection_card { width: 100%; } .collection_card > h6 { font-size: 2.6vw; } .collection_card > p { font-size: 1.6vw; } .collection_card_wrap2 { grid-template-columns: repeat(6, 1fr); grid-template-areas: "a a b b c c" ". d d e e ."; } .collection_card2:nth-child(3) { border: 0; } .collection_desc3 > h3 { font-size: 3.8vw; } .collection_card2 > h6 { margin: 1em 0; font-size: 2.6vw; } .collection_card2 > p { font-size: 1.6vw; } .text_slide h3 {font-size: 4vw;} .text_slide .swiper-slide > h6 {font-size: 3.2vw;} .text_slide .swiper-slide > p {font-size: 2vw;} .collection_desc4 > article > p {font-size: 2.2vw;} .frequently_Q_wrap > h3 { font-size: 3.6vw; } /* //기업 송금받기 contents */ } @media only screen and (max-width:768px), only screen and (-webkit-min-device-pixel-ratio :1.5) and (max-width: 768px), only screen and (min-device-pixel-ratio :1.5) and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio :2) and (max-width: 768px), only screen and (min-device-pixel-ratio :2) and (max-width: 768px) { :root { --main_header_height: 50px; --layout_section_padding: 40px 0; } @keyframes sideMenufadeMask{from{background-color:rgba(0,0,0,0)} to{background-color:rgba(0,0,0,.75)}} @-webkit-keyframes sideMenufadeMask{from{background-color:rgba(0,0,0,0)} to{background-color:rgba(0,0,0,.75)}} #wrap header#header {position:relative; height:auto;} #wrap header#header #toggle_notice {height:90px;} #wrap header#header #toggle_notice section.wrap {position:initial;} #wrap header#header #toggle_notice section.wrap p {font-size:12px; line-height:16px; letter-spacing:-1px; text-align:center; padding-top:12px;} #wrap header#header #toggle_notice section.wrap .down_btns {position:absolute; top:54px; right:initial; width:100%; text-align:center;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.googleplay {display:inline-block; width:100px; height:29px; background:url('../images/main/bg_togglenotice_google_m.png') 0 0 no-repeat; background-size:100px auto; margin:0 4px 0 4px;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.googleplay .button {font-family:'NotoSansKR-DemiLight'; font-size:11px; line-height:29px; text-align:left; padding-left:30px;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.appstore {display:inline-block; width:100px; height:29px; background:url('../images/main/bg_togglenotice_apple_m.png') 0 0 no-repeat; background-size:100px auto; margin:0 4px 0 4px;} #wrap header#header #toggle_notice section.wrap .down_btns .btn.appstore .button {font-family:'NotoSansKR-DemiLight'; font-size:11px; line-height:29px; text-align:left; padding-left:34px;} #wrap header#header #toggle_notice section.wrap a.notice_close {top:8px; right:3px; background:url('../images/main/btn_togglenotice_close.png') 7px 7px no-repeat; background-size:14px auto;} #wrap header#header #utility {display: block;} #wrap header#header #utility.utilgnb {display: none !important;} #wrap header#header #utility {position:fixed; width: 100%; height:50px; background-color: #000; z-index: 100;} #wrap header#header #utility .utility_menu {display:none;} #wrap header#header #utility .language_sel {display:block; position:absolute; top:0; left:12px; height:50px;} #wrap header#header #utility .language_sel a {display:block; height:50px; font-size:14px; color:#fff; line-height:48px; background:url('../images/main/bg_utility_select_arrow.png') right 22px no-repeat; padding:0 20px 0 0;} #wrap header#header #utility .language_sel span.country {vertical-align:middle; margin-top:-2px;} #wrap header#header #utility .logo {display:block; padding-top:11px;} #wrap header#header #utility .logo a {display:block; width:55px; height:28px; background:url('../images/common/img_header_logo_main_m.png') 0 0 no-repeat; background-size:55px auto; margin:0 auto 0 auto; overflow:hidden;} #wrap header#header #utility a.gnb_open {display:block; position:absolute; top:0; right:0; width:39px; height:50px; background:url('../images/common/btn/btn_gnb_m.png') 12px 19px no-repeat; background-size:15px auto; z-index:88888; overflow:hidden;} #wrap header#header #cont_wrap {position:relative; width:100%; height:auto;} #wrap header#header #cont_wrap .wrap {position:absolute; top:0; left:0; width:100%; height:0px; margin:0 0 0 0; z-index:88888; overflow:inherit;} #wrap header#header #cont_wrap .wrap.active {border-bottom:1px solid #514f4e;} #wrap header#header #cont_wrap .wrap .gnb_btn {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap {position:absolute; top:-50px; left:-100%; width:100%; height:auto; min-height:auto; background-color:#fff; z-index:88888;} #wrap header#header #cont_wrap .wrap .gnb_wrap .logo {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header {display:block; position:relative; height:100px; background-color:#40baf1; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header p {font-size:18px; color:#fff; line-height:26px; padding:12px 0 0 12px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header p.login {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header.login p.login {display:block;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header.login p.logout {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header a.gnb_close {display:block; position:absolute; top:0; right:0; width:39px; height:48px; background:url('../images/common/btn/btn_gnb_close_m.png') 12px 18px no-repeat; background-size:15px auto; z-index:88888; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header .btn_wrap {padding:0 12px 0 12px; margin-top:11px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header .btn_wrap .btn {float:right; width:49%; height:35px; font-weight:normal; background-color:#40baf1; border:1px solid #fff;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header .btn_wrap .btn:first-child {float:left;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header .btn_wrap .btn .button {line-height:33px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header .btn_wrap .btn.login {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header.login .btn_wrap .btn.login {display:block; width:100%;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb_header.login .btn_wrap .btn.logout {display:none;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb {position:relative; float:inherit;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 {width:85px; background-color:#a7afb8; margin-top:0; overflow:inherit;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li {float:inherit; width:85px; height:117px; min-height:85px; margin:0 0 0 0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a {display:block; width:85px; min-width:85px; height:117px; min-height:85px; font-size:12px; color:#fff; line-height:18px; font-weight:bold; text-align:center; padding:0 0 0 0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu1 {position:relative; background:#a7afb8 url('../images/common/icon_lnb_m_01.png') 50% 32px no-repeat; background-size:32px auto; padding-top:78px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu1:hover {color:#fff;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu1.active {background:#fff url('../images/common/icon_lnb_m_01_on.png') 50% 32px no-repeat; background-size:32px auto;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu1.active:before {content:''; display:block; position:absolute; top:0; left:0; width:3px; height:117px; font-size:0; line-height:0; background-color:#ed1b23; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu1.active:hover {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu2 {position:relative; background:#a7afb8 url('../images/common/icon_lnb_m_02.png') 50% 30px no-repeat; background-size:32px auto; padding-top:76px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu2:hover {color:#fff;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu2.active {background:#fff url('../images/common/icon_lnb_m_02_on.png') 50% 30px no-repeat; background-size:32px auto;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu2.active:before {content:''; display:block; position:absolute; top:0; left:0; width:3px; height:117px; font-size:0; line-height:0; background-color:#ed1b23; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu2.active:hover {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu3 {position:relative; background:#a7afb8 url('../images/common/icon_lnb_m_03.png') 50% 28px no-repeat; background-size:32px auto; padding-top:74px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu3:hover {color:#fff;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu3.active {background:#fff url('../images/common/icon_lnb_m_03_on.png') 50% 28px no-repeat; background-size:32px auto;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu3.active:before {content:''; display:block; position:absolute; top:0; left:0; width:3px; height:117px; font-size:0; line-height:0; background-color:#ed1b23; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu3.active:hover {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu4 {position:relative; background:#a7afb8 url('../images/common/icon_lnb_m_04.png') 50% 28px no-repeat; background-size:32px auto; padding-top:74px;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu4:hover {color:#fff;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu4.active {background:#fff url('../images/common/icon_lnb_m_04_on.png') 50% 28px no-repeat; background-size:32px auto;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu4.active:before {content:''; display:block; position:absolute; top:0; left:0; width:3px; height:117px; font-size:0; line-height:0; background-color:#ed1b23; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li a.menu4.active:hover {color:#40baf1;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 {display:none; visibility:visible; position:absolute; top:8px; right:20px; left:105px; font-size:0; z-index:88888; margin-top:0; overflow:hidden;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li {width:auto; height:auto; min-height:initial; max-width:initial; border-bottom:1px solid #e0e0e0; padding:12px 0 13px 0;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li.depth2_title {display:block; font-size:18px; color:#333; line-height:22px; font-weight:bold;} #wrap header#header #cont_wrap .wrap .gnb_wrap .gnb ul.depth1 li ul.depth2 li a {display:initial; width:auto; min-width:auto; min-height:auto; font-size:16px; color:#333; line-height:18px; text-align:left; padding:12px 0 13px 10px;} #wrap header#header #main_visual_cont {position:relative; width:100%; min-height:241px; margin:0 0 0 0; background: url(../images/main/main.png) center 340px no-repeat; background-size: 90%; height: 650px;} #wrap header#header #main_visual_cont h1 {text-align: center; margin-top: 60px;} #wrap header#header #main_visual_cont h1 strong {font-size:25px; margin-bottom:0;} #wrap header#header #main_visual_cont h1 span {font-size:15px;} #wrap header#header #main_visual_cont .startbt {text-align: center;} #wrap header#header #main_visual_cont ul.icon_list {position:absolute; bottom:20px; left:50%; width:90%; margin:0 0 0 -45%;} #wrap header#header #main_visual_cont ul.icon_list li {float:left; width:25%; min-width:initial; font-size:0; line-height:0; padding-top:0px;} #wrap header#header #main_visual_cont ul.icon_list li.icon1 {width:25%; height:70px; background:url('../images/main/icon_mainvisual_01_m.png') center 0 no-repeat; background-size:70px auto;} #wrap header#header #main_visual_cont ul.icon_list li.icon2 {width:25%; height:70px; background:url('../images/main/icon_mainvisual_02_m.png') center 0 no-repeat; background-size:70px auto; margin-left:0;} #wrap header#header #main_visual_cont ul.icon_list li.icon3 {width:25%; height:70px; background:url('../images/main/icon_mainvisual_03_m.png') center 0 no-repeat; background-size:70px auto;} #wrap header#header #main_visual_cont ul.icon_list li.icon4 {width:25%; height:70px; background:url('../images/main/icon_mainvisual_04_m.png') center 0 no-repeat; background-size:70px auto;} #wrap header#header #simulation {position:initial; top:initial; left:initial; width:100%; height:auto; background:#f5f5f5 none; margin:0 0 0 0;} #wrap header#header #simulation .simulation_cont {width:100%; height:auto; background-color:#f5f5f5; margin:0 0 0 0;} #wrap header#header #simulation .simulation_cont h2 {height:58px; line-height:56px;} #wrap header#header #simulation .simulation_cont .exchange_rate {position:relative; padding:0 10px 0 10px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) {position:relative; height:77px; border-bottom:1px solid #b6b6b6; padding-top:30px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector {display:inline-block; font-size:16px; color:#333; line-height:18px; vertical-align:top; margin:0 0 0 0; cursor:pointer;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector a {display:block; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector a .country {vertical-align:top;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .country_selector.selectbox a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; background:#f5f5f5 url('../images/common/btn/btn_exchange_select_arrow.png') right 15px no-repeat; background-size:10px 8px; padding-right:17px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .input_wrap {position:absolute; top:24px; right:0; display:block; width:65%; text-align:right;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(1) .input_wrap input {display:inline-block; width:100%; font-size:30px; color:#333; line-height:34px; text-align:right; background-color:#f5f5f5;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) {position:relative; height:77px; border-bottom:1px solid #b6b6b6; padding-top:30px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector {display:inline-block; font-size:16px; color:#333; line-height:18px; vertical-align:top; margin:0 0 0 0; cursor:pointer;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector a {display:block; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector a .country {vertical-align:top;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .country_selector.selectbox a .code {display:inline-block; height:31px; font-size:18px; color:#333; line-height:35px; background:#f5f5f5 url('../images/common/btn/btn_exchange_select_arrow.png') right 15px no-repeat; background-size:10px 8px; padding-right:17px; margin-left:6px;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .input_wrap {position:absolute; top:24px; right:0; display:block; width:65%; text-align:right;} #wrap header#header #simulation .simulation_cont .exchange_rate article:nth-child(2) .input_wrap input {display:inline-block; width:100%; font-size:30px; color:#ed1b23; line-height:34px; text-align:right; background-color:#f5f5f5;} #wrap header#header #simulation .simulation_cont .exchange_rate a.change {position:absolute; top:77px; left:50%; display:block; width:54px; height:21px; background:url('../images/common/btn/btn_exchange_rate.png') 0 0 no-repeat; background-size:54px auto; margin:0 0 0 -27px; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_txt {padding:25px 0 32px 0; overflow:hidden;} #wrap header#header #simulation .simulation_cont .exchange_txt p {font-size:18px; line-height:25px;} #wrap header#header #cont_wrap .gnb_active {display:none;} #wrap header#header #location {display:none;} #wrap header#header #location .wrap {position:relative;} #wrap header#header #location .wrap a.common_prev {display:none;} #wrap header#header #location .wrap a.location_sel {display:none;} #wrap header#header #location .wrap h1 {font-size:16px; color:#555; line-height:49px; font-weight:bold; text-align:left; padding-left:22px;} #wrap header#header #location .wrap ul.other_menu {display:none;} #wrap #slider_wrap {height:auto;} #wrap #slider_wrap .wrap {width:100%; height:auto; padding:0 18px 0 18px; margin:0 0 0 0;} #wrap #slider_wrap .wrap .bx-wrapper {box-shadow:none; border:0 none;} #wrap #slider_wrap .wrap .slider_cont {position:relative; width:100%; height:auto; padding-top:0; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul {width:100%; font-size:0; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li {float:left; width:33.33333333333333%; height:auto; min-height:650px; padding-left:0;} #wrap #slider_wrap .wrap .slider_cont ul li h2 {font-size:23px; line-height:27px; text-align:center; margin-top:36px;} #wrap #slider_wrap .wrap .slider_cont ul li h2 span {display:block; font-size:15px;line-height:19px; margin-top:5px;} #wrap #slider_wrap .wrap .slider_cont ul li p.txt {font-size:15px; line-height:24px; text-align:center; margin-top:25px;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app {position:absolute; bottom:40px; left:0; width:100%; font-size:0; margin-top:0; overflow:hidden;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app p {font-size:18px; line-height:20px; text-align:center; padding-bottom:15px;} /* #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.googleplay {display:inherit; *display:inherit; zoom:inherit; float:left; width:48%; height:37px; font-size:14px; line-height:34px; border-radius:37px; background:url('../images/common/icon_googleplay_m.png') 21px 9px no-repeat; background-size:15px auto; padding-left:46px;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.appstore {display:inherit; *display:inherit; zoom:inherit; float:right; width:48%; height:37px; font-size:14px; line-height:34px; border-radius:37px; background:url('../images/common/icon_appstore_m.png') 21px 10px no-repeat; background-size:15px auto; padding-left:46px;} */ /* 2018.06.20 */ #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.googleplay {display:inherit; *display:inherit; zoom:inherit; float:left; width:48%; height:37px; font-size:14px; line-height:34px; border:1px solid #e0e0e0; border-radius:37px; background:url('../images/common/icon_googleplay_m.png') 21px 9px no-repeat; background-size:15px auto; padding-left:46px;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.googleplay:before {display:none;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.appstore {display:inherit; *display:inherit; zoom:inherit; float:right; width:48%; height:37px; font-size:14px; line-height:34px; border:1px solid #e0e0e0; border-radius:37px; background:url('../images/common/icon_appstore_m.png') 21px 10px no-repeat; background-size:15px auto; padding-left:46px;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app a.appstore:before {display:none;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app.oneBtn {text-align:center;} #wrap #slider_wrap .wrap .slider_cont ul li .down_app.oneBtn a {float:inherit; margin:0 auto;} #wrap #slider_wrap .wrap .slider_cont ul li.step1 {background:url('../images/main/img_slider_visual_01_m.png') center 173px no-repeat; background-size:170px auto;} #wrap #slider_wrap .wrap .slider_cont ul li.step2 {background:url('../images/main/img_slider_visual_02_m.png') center 173px no-repeat; background-size:170px auto;} #wrap #slider_wrap .wrap .slider_cont ul li.step3 {background:url('../images/main/img_slider_visual_03_m.png') center 173px no-repeat; background-size:170px auto;} #wrap #slider_wrap .wrap .slider_cont .bx-wrapper {margin:0 auto 0;} #wrap #slider_wrap .wrap .slider_cont .bxslider {height:auto;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-controls-direction a.bx-prev {display:none;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-controls-direction a.bx-next {display:none;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-pager {bottom:140px;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-pager .bx-pager-item a {width:6px; height:6px; background:url('../images/main/btn_pageing_m.png') 0 0 no-repeat; background-size:6px auto;} #wrap #slider_wrap .wrap .slider_cont .bx-controls .bx-pager .bx-pager-item a.active {background:url('../images/main/btn_pageing_m_active.png') 0 0 no-repeat; background-size:6px auto;} #wrap #service_wrap {height:auto; padding-bottom:55px;} #wrap #service_wrap .wrap {width:100%; margin:0 0 0 0;} #wrap #service_wrap .wrap h3 {font-size: 18px; padding: 10px 20px; margin-top: 10px;} #wrap #service_wrap .wrap h2 span {font-size:15px; margin-top:2px;} #wrap #service_wrap .wrap ul li {display:inherit; *display:inherit; zoom:inherit; width:100%; margin-left:0;} #wrap #service_wrap .wrap ul li span {width:100%; font-size:14px; line-height:20px; padding-top:96px; margin-top:40px;} #wrap #service_wrap .wrap ul li span em {font-size:17px;} #wrap #service_wrap .wrap ul li.icon1 span {background:url('../images/main/content1_1.png') center 15px no-repeat; background-size:60px auto; font-size: 22px; font-weight: bold; } #wrap #service_wrap .wrap ul li.icon2 span {background:url('../images/main/content1_2.png') center 20px no-repeat; background-size:60px auto; font-size: 22px; font-weight: bold; } #wrap #service_wrap .wrap ul li.icon3 span {background:url('../images/main/content1_3.png') center 20px no-repeat; background-size:60px auto; font-size: 22px; font-weight: bold; } #wrap #service_wrap .wrap ul li.icon4 span {background:url('../images/main/content1_4.png') center 20px no-repeat; background-size:60px auto; font-size: 22px; font-weight: bold; } #wrap #etc_wrap {height:auto;height: fit-content!important;padding-bottom: 8%;} #wrap #etc_wrap .wrapcon4 {height:auto;} #wrap #etc_wrap hr {width: 20px; border: 2px solid #000; display: inline-block; margin: 20px 0;} #wrap #etc_wrap h3 {font-size: 3.7vw; font-weight: bold; margin: 0 0 20px 0; margin-top:0 !important; } #wrap .contents3 {background: url(../images/main/content2_bg.png); height: 1400px !important;} #wrap #etc_wrap .wrap .whoisL {margin: 40px 0; float: none; width: auto;} #wrap #etc_wrap .wrap .whoisL h1 {font-size: 35px;} #wrap #etc_wrap .wrap .whoisL span {font-size: 26px; font-weight: bold;} #wrap #etc_wrap .wrap .whoisL .iconpaper {padding: 40px 0 20px 0; } #wrap #etc_wrap .wrap .whoisL .iconmedal {width: 10%; } #wrap #etc_wrap .wrap .whoisL em {isplay: block; background: url(../images/main/content2_6.png) center no-repeat; height: 70px;} #wrap #etc_wrap .wrap .whoisR {margin: 40px 0; float: none; width: auto;} #wrap #etc_wrap .wrap .whoisR h1 {font-size: 35px;} #wrap #etc_wrap .wrap .whoisR span {font-size: 26px; font-weight: bold;} #wrap #etc_wrap .wrap .whoisR .iconpaper2 {padding: 40px 0 20px 0; } #wrap #etc_wrap .wrap .whoisR .iconmedal2 {width: 10%; } #wrap #etc_wrap .wrap .whoisR em {isplay: block; background: url(../images/main/content2_6.png) center no-repeat; height: 70px;} #wrap #etc_wrap .wrap .conimg {float: none; margin: 0 auto; } #wrap #etc_wrap .wrap .contetn4 {padding-top: 20px; width: 95%;} #wrap #etc_wrap .wrap .contacttext {padding: 20px 0 0 0; float: none;} #wrap #etc_wrap .wrap .contacttext h3 {font-size: 22px; padding-bottom: 0;} #wrap #etc_wrap .wrap .signupbt span {padding: 15px 30vw;} #wrap #etc_wrap .wrap {width:100%; margin:0 0 0 0;} #wrap #etc_wrap .wrap .notice_area {position:relative; float:inherit; width:100%; padding-bottom:35px; margin-top:0;} #wrap #etc_wrap .wrap .notice_area h2 {position:initial; width:100%; font-size:23px; color:#333; line-height:25px; font-weight:normal; text-align:center; padding:27px 0 13px 0;} #wrap #etc_wrap .wrap .notice_area h2 span {display:block; font-size:15px; margin-top:3px;} #wrap #etc_wrap .wrap .notice_area h2 a.more {top:initial; right:initial; bottom:0; left:0; width:100%; height:35px; font-size:13px; color:#999; line-height:33px; text-indent:initial; text-align:center; background:#fff none; border:1px solid #e0e0e0;} #wrap #etc_wrap .wrap .notice_area ul {width:100%; border-bottom:0 none; padding:15px 0 15px 0; overflow:hidden;} #wrap #etc_wrap .wrap .notice_area ul li {width:100%; background:url('../images/main/bg_dot_gray_01_m.png') 0 9px no-repeat; padding:0 90px 0 15px; margin-top:8px;} #wrap #etc_wrap .wrap .notice_area ul li:first-child {margin-top:0;} #wrap #etc_wrap .wrap .notice_area ul li a {font-size:13px; line-height:15px;} #wrap #etc_wrap .wrap .notice_area ul li span {top:2px; right:0; font-size:10px; line-height:15px;} #wrap #etc_wrap .wrap .thumb_area {position:relative; float:inherit; width:100%; padding:30px 0 75px 0; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area h2 {position:initial; width:100%; font-size:23px; color:#333; line-height:25px; font-weight:normal; text-align:center; padding:0 0 13px 0;} #wrap #etc_wrap .wrap .thumb_area h2 span {display:block; font-size:15px; margin-top:3px;} #wrap #etc_wrap .wrap .thumb_area h2 a.more {top:initial; right:initial; bottom:20px; left:0; width:100%; height:35px; font-size:13px; color:#999; line-height:33px; text-indent:initial; text-align:center; background:#fff none; border:1px solid #e0e0e0;} #wrap #etc_wrap .wrap .thumb_area .detail_view_cont {width:100%; height:auto; min-height:183px;} #wrap #etc_wrap .wrap .thumb_area .thumb_list {position:inherit; width:100%; height:56px; margin-top:8px;} #wrap #etc_wrap .wrap .thumb_area .thumb_list a.thumb_prev, #wrap #etc_wrap .wrap .thumb_area .thumb_list a.thumb_next {display:none;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul {width:100%; font-size:0; margin-left:0; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li {width:33.33333333333333%; height:auto; min-height:56px; background-color:#fff; margin-left:0;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li:first-child {margin-left:0;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li a {position:relative; display:block; width:94%; height:auto; min-height:56px; background-color:#999; overflow:hidden;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li:nth-child(2) a {margin:0 auto;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li:nth-child(3) a {float:right;} #wrap #etc_wrap .wrap .thumb_area .thumb_list ul li a img {width:100%; height:auto; min-height:56px;} #wrap #visitors_wrap {height:auto;} #wrap #visitors_wrap .wrap {width:100%; text-align:center; padding-bottom:40px; margin:0 0 0 0;} #wrap #visitors_wrap .wrap h2 {font-size:23px; line-height:25px; background:url('../images/main/icon_visitors_m.png') center 30px no-repeat; background-size:17px auto; padding-top:54px;} #wrap #visitors_wrap .wrap h2 span {font-size:15px; margin-top:3px;} #wrap #visitors_wrap .wrap ul {margin-top:42px;} #wrap #visitors_wrap .wrap ul li {display:inherit; *display:inherit; zoom:inherit; width:45%; min-width:inherit; font-size:25px; color:#333; line-height:27px; margin-top:46px;} #wrap #visitors_wrap .wrap ul li:nth-child(1), #wrap #visitors_wrap .wrap ul li:nth-child(2) {margin-top:0;} #wrap #visitors_wrap .wrap ul li:nth-child(odd) {float:left; margin-left:5%;} #wrap #visitors_wrap .wrap ul li:nth-child(even) {float:right; margin-right:5%;} #wrap #visitors_wrap .wrap ul li span {font-size:12px; line-height:14px; margin-top:5px;} #wrap footer#footer {clear:both; height:auto; border-top:none;} #wrap footer#footer #side_menu {height:inherit; border-bottom:0 none;} #wrap footer#footer #side_menu .wrap {width:100%;} #wrap footer#footer #side_menu .wrap ul {width:100%;} #wrap footer#footer #side_menu .wrap ul li {height:35px; border-bottom:1px solid #e0e0e0;} #wrap footer#footer #side_menu .wrap ul li:first-child {border-left:0 none;} #wrap footer#footer #side_menu .wrap ul li:nth-child(odd) {float:left; width:50%;} #wrap footer#footer #side_menu .wrap ul li:nth-child(even) {float:right; width:50%; border-right:0 none;} #wrap footer#footer #side_menu .wrap ul li a {font-size:13px; line-height:33px;} #wrap footer#footer #copyright .wrap {position:relative; width:100%; height:auto;} #wrap footer#footer #copyright .wrap p {border-bottom:1px solid #e0e0e0; padding:20px 12px 20px 12px;} #wrap footer#footer #copyright .wrap p span {display:block; margin-right:0;} #wrap footer#footer #copyright .wrap p span a.alliance {display:block; *display:inherit; zoom:inherit; position:absolute; top:25px; right:12px; height:25px; font-size:13px; line-height:23px; border-radius:3px; padding:0 12px 0 12px;} #wrap footer#footer #copyright .wrap p br {display:none;} #wrap footer#footer #copyright .wrap p em {display:block;} #wrap footer#footer #copyright .wrap .logo {position:inherit; top:inherit; right:inherit; width:100%; height:63px; background:url('../images/common/img_footer_logo_m.png') right 11px no-repeat; background-size:55px auto; padding:11px 0 23px 0;} #wrap footer#footer #copyright .wrap .sns_wrap {top:184px; right:inherit; left:12px; width:inherit; height:inherit;} #wrap footer#footer #copyright .wrap .sns_wrap a.instagram {margin-left:4px;} #wrap footer#footer #copyright .wrap .sns_wrap a.youtube {margin-left:4px;} .privacy_policy_popup { width: 92%; } /* 기업 송금받기 contents */ .collection_desc2 h2 { font-size: 22px; } .collection_visual3 .inner > h3 { font-size: 20px; } .collection_desc3 .inner > h3, .collection_desc3 > h3, .frequently_Q_wrap > h3 { font-size: 18px; } .ars_cont_wrap > div > p > em, .collection_card > h6, .collection_card2 > h6 { font-size: 16px; } .frequently_Q > h6 { padding: 18px 48px 18px 20px; } .frequently_Q > p { padding: 18px; } .collection_desc2 h4 { margin-bottom: 20px; font-size: 14px; } .ars_cont_wrap > div > p > span, .collection_card > p, .collection_visual3 .inner > p, .collection_desc2 p { font-size: 12px; } .collection_desc4 > article > p, .collection_card2 > p, .progress_text > p { font-size: 10px; } .collection_card { margin-top: 40px; padding: 20px 16px; } .progress_bar { margin-bottom: 26px; } .progress_bar > hr { height: 200px; } .ars_cont_wrap > div { width: 70%; padding-bottom: 70%; } .collection_card_wrap2 { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a a b b" "c c d d" ". e e ."; } .collection_card2 { margin-top: 40px; } .collection_card2:nth-child(even) {border: 0;} .collection_card2:nth-child(3) {border-right: 2px solid #dfdfdf;} .collection_card2 > img { width: 60px; } .collection_visual2 { height: auto; } .text_slide h3 { margin: 6vh 0 0; font-size: 20px; } .text_slide .swiper-slide > h6 { font-size: 16px; } .text_slide .swiper-slide > p { font-size: 12px; margin-top: 4vh; } .swiper-wrapper { margin-bottom: 60px; } .collection_visual2 .swiper-prevBtn > img, .collection_visual2 .swiper-nextBtn > img { width: 12px; } .swiper-pagination { bottom: 10px !important; } .collection_visual3 hr { width: 75px; height: 2px; margin: 15px auto; } /* //기업 송금받기 contents */ /* Common Popup */ article.popup_wrap .popup_cont_box {width:90% !important;} article.popup_wrap .popup_cont_box section.header {height:55px;} article.popup_wrap .popup_cont_box section.contents {padding:0 15px 0 15px;} article.popup_wrap .popup_cont_box section.header p {line-height:53px; padding-left:15px;} article.popup_wrap .popup_cont_box section.header a.close {right:0; width:55px; height:55px; background:url('../images/common/btn/btn_popup_close_black.png') 16px 18px no-repeat;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn {width:49%; height:39px;} article.popup_wrap .popup_cont_box section.contents .footer_btn .btn .button {font-size:14px; line-height:35px;} article.popup_wrap .popup_cont_box section.footer {height:45px;} article.notice_wrap .notice_cont_box {width:90% !important;} article.notice_wrap .notice_cont_box section.header {border-bottom:1px solid #b6b6b6; margin:0 15px 0 15px; overflow:hidden;} article.notice_wrap .notice_cont_box section.header p {font-family:'NotoSansKR-Bold'; font-size:18px; color:#333; line-height:24px; text-align:center; padding:16px 0 17px 0;} article.notice_wrap .notice_cont_box section.contents {min-height:80px; height:180px; max-height:180px; font-size:0; margin:12px 15px 20px 15px; overflow-x:hidden; overflow-y:auto;} article.notice_wrap .notice_cont_box section.contents p {font-size:13px; color:#555; line-height:20px; word-wrap:break-word; margin-top:14px; overflow:hidden;} article.notice_wrap .notice_cont_box section.contents p:first-child {margin-top:0;} article.notice_wrap .notice_cont_box section.footer {position:relative; height:50px; border-top:1px solid #b6b6b6; margin:0 15px 0 15px; overflow:hidden;} article.notice_wrap .notice_cont_box section.footer label.user_check {float:left; font-size:12px; color:#333; line-height:20px; margin:15px 0 0 0;} article.notice_wrap .notice_cont_box section.footer label.user_check input {width:20px; height:20px; background-size:20px 20px; vertical-align:top; margin-right:6px;} article.notice_wrap .notice_cont_box section.footer button.btn {display:block; float:right; width:60px; height:30px; background-color:#0e75bc; border-radius:15px; margin:10px 0 0 0;} article.notice_wrap .notice_cont_box section.footer button.btn .button {font-size:12px; color:#fff; line-height:20px;} article.notice_wrap .notice_dimd {display:none; position:fixed; top:0; left:0; width:100%; height:100%; min-height:100%; background-color:#000; opacity:0.7; z-index:98888;} article.notice_wrap .notice_dimd.active {display:block;} /* Popup Contents */ section.contents .alert_img {font-size:0; padding:20px 0 20px 0;} section.contents .alert_img .img_w {display:none;} section.contents .alert_img .img_m {display:block; width:266px; height:auto; margin:0 auto;} #wrap #etc_wrap .wrap .contetn3bg {background: url(../images/main/content3_mb.png) no-repeat 50%; height: 850px; background-size: 100%;} #wrap #etc_wrap .wrap .contetn3bg_en {background: url(../images/main/content3_mb_en.png) no-repeat 50%; height: 950px; background-size: 100%;} } /* End Mobile */ /* 가입문의 신규 2025.08 */ .joinq{ margin: 0 auto; width: 60%; padding:0 2rem 3rem;} .joinq .hidden{display: none;} .joinq .hide{display: none;} .joinq .show{display: block;} .joinq_tit{ display: flex; flex-direction: row; justify-content: space-between; margin-top: 5rem; margin-bottom: 2rem;} .joinq_tit p{font-size: 25px;font-weight: 700;} .joinq_tit p.red{font-size: 14px; color:#c80404;font-weight: normal;} .joinq_data_field { display: flex; column-gap: 40px; flex-direction: row; justify-content: space-between;} .joinq_data_field.block{display: block;} .joinq_data_field .flex{display: flex;} .joinq_data_field .inline_flex{ display: inline-flex; flex-direction: row; align-items: baseline;} .joinq_data_field .relative{position:relative; width: 100%;} .joinq_data_field .w_100p{width: 100%;} .joinq_data_field .m_0{margin: 0 !important;} .joinq_data_field .mr_10{margin-right:10px;} .joinq_data_field .mt_10{margin-top:10px;} .joinq_data_field .input_warp{display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; width: 100%;} .joinq_data_field .tit {font-size: 14px;margin-bottom: 4px;text-align: left;} .joinq_data_field .input_warp .red{color:#c80404;font-weight: bold;} .joinq_data_field .input_warp textarea{width: 100%;border-radius: 8px; padding-left: 20px; font-size: 16px; color: #333; line-height: 42px; background-color: #fff; border: 2px solid #e5e7eb; box-sizing: border-box;resize: none;} .joinq_data_field .input_warp textarea:focus {border-color: #F3D34B;} .joinq_data_field input[type="text"] { height: 50px; border-radius: 8px; padding-left: 20px; font-size: 16px; color: #333; line-height: 42px; background-color: #fff; border: 2px solid #e5e7eb; box-sizing: border-box;} .joinq_data_field input[type="text"]:focus,.joinq_data_field input[type="text"]:focus-visible{border-color: #F3D34B; outline: none; z-index: 10;} .joinq_data_field input::placeholder,.joinq_data_field .placeholder,.joinq_data_field .select_warp .selectric .label { color: #9ca3af; opacity: 1;} .joinq_data_field .select_warp{display: inline-block;width: 100%;} .joinq_data_field .select_warp.phone .selectric .label,.joinq_data_field .select_warp.amount .selectric .label{color: #333;} .joinq_data_field .select_warp select{height: 50px; border-radius: 8px; padding-left: 20px; display: inline-block; margin-bottom:10px;} .joinq_data_field .select_warp .selectric {text-align: left; border-radius: 8px; padding: 3px 0; border: 2px solid #e5e7eb; width: auto;} .joinq_data_field .select_warp .selectric .button {margin-top: 5px; } .joinq_data_field .select_warp .selectric-items { background: #Fff; border: 2px solid #e5e7eb; padding-top: 7px; top:80%; box-sizing: border-box; box-shadow: 0 0 0 0; border-radius: 8px;} .joinq_data_field .select_warp .selectric-above .selectric-items{top: auto;padding-top:0;} .joinq_data_field .select_warp .selectric-items .selectric-scroll li{text-align: left; font-size: 16px;} .joinq_data_field .select_warp .selectric-items .selectric-scroll::-webkit-scrollbar { width: 8px; } .joinq_data_field .select_warp .selectric-items .selectric-scroll::-webkit-scrollbar-track { background: #e5e7eb; } .joinq_data_field .select_warp .selectric-items .selectric-scroll::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; } .joinq_data_field .select_warp .selectric-items .selectric-scroll::-webkit-scrollbar-thumb:hover { background: #6b7280; } .joinq_data_field .select_warp .selectric-open .selectric {border-color: #F3D34B; z-index: 10;} /*휴대폰번호*/ .joinq_data_field .select_warp.phone{display:inline-flex;} .joinq_data_field .select_warp.phone .selectric{ border-radius: 8px 0px 0px 8px; width: 100%; box-sizing: border-box; height: 50px;} .joinq_data_field .select_warp.phone input[type="text"]{border-radius: 0px 8px 8px 0px; margin-left: -2px;} /*건별송금금액*/ .joinq_data_field .select_warp.amount{display:inline-flex;} .joinq_data_field .select_warp.amount .selectric{border-radius: 0px 8px 8px 0px; box-sizing: border-box; height: 50px;} .joinq_data_field .select_warp.amount input[type="text"]{ margin-right: -2px; border-radius: 8px 0px 0px 8px;} /* 기업 구분 */ .pill_radio{display: contents; gap: 4px;} .pill_radio input[type="radio"] { display: none; } .pill_radio label { cursor: pointer; padding: 11px 16px; margin-right: 10px; border-radius: 9999px; transition: all 0.2s ease-in-out; color: #4b5563; border: 2px solid #e5e7eb; font-size: 16px;} .pill_radio input[type="radio"]:checked + label { background-color: #F3D34B; color: #3A3838; font-weight: 600; border-color: #F3D34B;} /*거래증빙서류 radio, checkbox*/ .custom_control_input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} .custom_control_label { position: relative; cursor: pointer; padding-left: 28px; margin-right: 20px;display: inline-flex; align-items: center; height: 28px; font-size: 16px;} .custom_control_label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #d1d5db; /* gray-300 */ background-color: #ffffff; /* white */ transition: all 0.2s ease;} .custom_control_input:checked ~ .custom_control_label::before { background-color: #F3D34B; border-color: #F3D34B;} .custom_control_input:focus-visible ~ .custom_control_label::before { box-shadow: 0 0 0 2px #f0eeee, 0 0 0 4px #F3D34B;} .custom_radio{margin:10px 0;} .custom_radio .custom_control_label::before { border-radius: 50%;} .custom_radio .custom_control_label::after { content: ''; position: absolute; display: none; left: 8px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #3A3838;} .custom_radio .custom_control_input:checked ~ .custom_control_label::after { display: block;} .custom_checkbox {text-align:left; margin: 10px 0;} .custom_checkbox .custom_control_label::before { border-radius: 4px;} .custom_checkbox .custom_control_label::after {content: '';position: absolute;display: none;left: 8px;top: 50%;width: 6px;height: 10px;border: solid #3A3838;border-width: 0 2px 2px 0;transform: translateY(-60%) rotate(45deg);} .custom_checkbox .custom_control_input:checked ~ .custom_control_label::after {display: block;} /* 송금국가 */ #country-dropdown{z-index: 2;} .joinq_data_field #inquery_remit_nation:focus-visible { border-color: #e5e7eb;} .country-dropdown-list {box-sizing: border-box; top: 40px;font-size: 16px; background-color: #fff; max-height: 200px; overflow-y: auto; position: absolute; width: inherit; z-index: -1; border-radius: 8px; padding-top: 8px; border: 2px solid #e5e7eb;} .country-dropdown-list.above{top: auto;bottom: 95%;} .country-dropdown-list .items-center {height: 35px;line-height: 35px;padding: 2px 20px;} .country-dropdown-list::-webkit-scrollbar { width: 8px; } .country-dropdown-list::-webkit-scrollbar-track { background: #e5e7eb; } .country-dropdown-list::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; } .country-dropdown-list::-webkit-scrollbar-thumb:hover { background: #6b7280; } .country-dropdown-list .cursor-pointer{cursor: pointer;} .joinq_data_field .country-dropdown-list img{ width: 20px;height: 20px;border-radius: 50%;margin-right: 10px;margin-top: 7px;border: 1px solid #d3d3d3;object-fit: cover;} .joinq_data_field img#selected-country-flag { position: absolute; left: 20px; top: 16px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #d3d3d3; object-fit: cover;} .joinq_data_field input#inquery_remit_nation.on {padding-left: 48px;} /*필수*/ .joinq_data_field .input_warp.required_mark .tit::after,.joinq_data_field .select_warp.required_mark .tit::after{ content: ' *'; color: #c80404; font-weight: bold; margin-left: 2px;} .joinq_data_field .input_warp.validation_error input[type="text"],.joinq_data_field .input_warp.validation_error .selectric{ border-color: #F3D34B !important;} .validation_message { display: none; width: 100%; color: #c80404; font-size: 0.875rem; margin-top: 0.5rem; min-height: 1.25rem; text-align: left;} @media (max-width: 1400px){ .joinq{ width: 93%;} } @media only screen and (max-width:768px), only screen and (-webkit-min-device-pixel-ratio :1.5) and (max-width: 768px), only screen and (min-device-pixel-ratio :1.5) and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio :2) and (max-width: 768px), only screen and (min-device-pixel-ratio :2) and (max-width: 768px) { .joinq{ width: 90%; padding: 0 0 3rem} .joinq_data_field{flex-direction: column;} }