@charset "utf-8";
/*------------------------------------------------------------------------------------------------------------------------------------------
	File : common.CSS(Front)
	Company : Smilegate Megaport
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

@import url('https://static.smilegatemegaport.com/assets/fonts/NotoSansKR/NotoSansKR.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('style.css'); /* style 설정 */

*, *:before, *:after {margin:0px; padding:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;word-break:break-word;outline:0;}
:lang(ko) *, :lang(ko) *:before, :lang(ko) *:after {word-break:keep-all;white-space:normal;}
html,body {height:100%;font-size:16px;letter-spacing: -0.05em;}
body {line-height:1.2; background-color:#fff; font-family: 'Spoqa Han Sans Neo','Noto Sans KR', 'malgun gothic', 'Dotum', sans-serif;color:#333; letter-spacing:-0.05em; -webkit-text-size-adjust:none;}
:lang(ja) {font-family: 'Noto Sans JP','Noto Sans','Noto Sans KR', 'malgun gothic', 'Dotum', sans-serif;}
:lang(fr) {font-family: 'Noto Sans','Noto Sans KR', 'malgun gothic', 'Dotum', sans-serif;}
address, article, aside, canvas, details, figure, figcaption, footer, header, hgroup, menu, nav, section {display:block\9; margin:0\9; padding:0\9;}
hr {display:none;}
caption {overflow:hidden; height:0px; font-size:0px; line-height:0px;}
img {max-width:100%;border:none; vertical-align:middle;}
ol, ul, li, dl, dt, dd {list-style:none;}
table {width:100%; table-layout:fixed; border:0px; border-spacing:0px; border-collapse:collapse;box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
th, td {border:0px;word-break:keep-all; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
fieldset {width:100%; border:0px;}
legend {position:absolute; left:-999em; top:-999em;}
frameset {border:0px;}
iframe {width:100%; border:0px;}
em, address,i {font-style:normal;}
button, a, input, label, textarea {border-radius:0;font-family: 'Spoqa Han Sans Neo','Noto Sans KR', 'malgun gothic', 'Dotum', sans-serif;vertical-align:middle;}
:lang(fr) button, :lang(fr) a, :lang(fr) input, :lang(fr) label, :lang(fr) textarea {font-family: 'Noto Sans','Noto Sans KR', 'malgun gothic', 'Dotum', sans-serif;}
select {height:86px;padding:0 34px;vertical-align:middle;text-align:center;-webkit-appearance:none; appearance:none; -moz-appearance:none; -o-appearance:none;}
select::-ms-expand {display: none;}
button {overflow:visible; /*outline:none; */ border:0px; background-color:transparent; cursor:pointer;outline:0;}
button:disabled {
    cursor: default;
    filter: alpha(opacity=3);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .3;
}
button::-moz-focus-inner {padding:0px;}
a, button {-webkit-tap-highlight-color:transparent;-ms-user-select: none; -moz-user-select: -moz-none;-webkit-user-select: none;user-select: none;-webkit-touch-callout:none;}
select, input, textarea {border:1px solid #e7e7e7;background-color:transparent;font-size:28px;color:#43abf4;font-weight:400;box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
input.focus, textarea.focus {border-color:#000;color:#212121;}
input[type=text],input[type=tel],input[type=email] {width:100%;height:61px;padding:0 20px;color:#333;}
input[type=text]::-ms-clear {display:none;} 
input::placeholder {color:rgba(0,0,0,.5);}

a {color:#000;text-decoration:none;outline:0;}
input[type="radio"] {display:inline-block;position:absolute;top:0;left:0;opacity:0;vertical-align:middle;outline:0;}
input[type="radio"] + label {display:block;position:relative;height:3.438rem;padding:0 0 0 4.375rem;background:url(../images/icon_radio.png) no-repeat left center;background-size:auto 100%;}
input[type="radio"] + label:before {display:inline-block;width:3.438rem;height:3.438rem;background-color:#fff;border:1px solid #e4d1a8;border-radius:3rem;vertical-align:middle;}
input[type="radio"]:checked + label {background-image:url(../images/icon_radioChecked.png);}
input[type="radio"]:checked + label:before {background:#fff url(../images/common/spr_btns.png) no-repeat center;}

.checkbox-type {position: relative;}
input[type="checkbox"] {position:absolute;top:0;left:0;opacity:0;vertical-align:middle;}
input[type="checkbox"] + label {display:flex;align-items: center;position:relative;color:#333;font-size:30px;font-weight:500;line-height:1;vertical-align:middle;cursor:pointer}
input[type="checkbox"] + label:before {content:"";display:inline-block;width:44px;height:44px;margin-right:18px;background:#fff url(../images/common/ico_checked.png) no-repeat 0 0;background-size:100% auto;vertical-align:middle;}
input[type="checkbox"]:checked + label {color:#000;}
input[type="checkbox"]:checked + label:before {border-color:#000;background:#fff url(../images/common/ico_checked.png) no-repeat 0 100%;background-size:100% auto;}


.radio-group {position:relative;}
.radio-group label {    overflow: hidden;display:inline-block;position:relative;cursor:pointer;}
.checkbox-group {position:relative;}
.checkbox-group label {display:inline-block;position:relative;cursor:pointer;}

/* Font Color */
.orange {color:#ff6c00;}
.red {color:#ea002c;}
.blue {color:#1a87c7;}
.gray {color:#a1a1a1;}

/* Display */
.inBlock {display:inline-block !important; *display:inline; *zoom:1;}
.block {display:block !important;}
.none {display:none !important;}


/* Visibility */
.visibleHide {visibility:hidden;}
.visibleVisible {visibility:visible;}
.alpha0 {opacity:0;}

/* Float */
.floatL {float:left !important;}
.floatR {float:right !important;}
.clearBoth {clear:both !important;}

.clearfix {*zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}


/* Overflow */
.overHidden {overflow:hidden;}
.overHiddenClear {overflow:inherit !important;}
.scroll {overflow:auto;}
.scrollX {overflow-x:scroll;}
.scrollY {overflow-y:scroll;}

.blind { overflow:hidden; position:absolute; top:-9999px; left:-9999px; z-index:-1; width:0; height:0; font-size:0; line-height:0;}

/*----- Font Style -----*/
/*Font Uppercase*/
.upCase {text-transform:uppercase;}

/* IME Mode */
.ime_en {ime-mode:inactive;}
.ime_ko {ime-mode:active;}

/* Text Align */
.alignL {text-align:left !important;}
.alignC {text-align:center !important;}
.alignR {text-align:right !important;}

.alignT {vertical-align:top !important;}
.alignM {vertical-align:middle !important;}
.alignN {vertical-align:bottom !important;}
.alignI {vertical-align:inherit !important;}

/* Grid */
/* row, col */
.row {*zoom:1; position:relative;}
.row:after {content:""; display:block; clear:both;}
.row.gutter4 {margin-left:-2px; margin-right:-2px;}
.row.gutter6 {margin-left:-3px; margin-right:-3px;}
.row.gutter8 {margin-left:-4px; margin-right:-4px;}
.row.gutter10 {margin-left:-5px; margin-right:-5px;}
.row.gutter12 {margin-left:-6px; margin-right:-6px;}
.row.gutter16 {margin-left:-8px; margin-right:-8px;}
.row.gutter20 {margin-left:-10px; margin-right:-10px;}
.row.gutter30 {margin-left:-15px; margin-right:-15px;}
.row.gutter40 {margin-left:-20px; margin-right:-20px;}
.row3 {margin:0 -15px;}
.row3 .col {padding:0 15px;}

.col {position:relative; float:left; width:100%; min-height:1px;padding:0 13px;}
.row.gutter4 > .col {padding-left:2px; padding-right:2px;}
.row.gutter6 > .col {padding-left:3px; padding-right:3px;}
.row.gutter8 > .col {padding-left:4px; padding-right:4px;}
.row.gutter10 > .col {padding-left:5px; padding-right:5px;}
.row.gutter12 > .col {padding-left:6px; padding-right:6px;}
.row.gutter16 > .col {padding-left:8px; padding-right:8px;}
.row.gutter20 > .col {padding-left:10px; padding-right:10px;}
.row.gutter30 > .col {padding-left:15px; padding-right:15px;}
.row.gutter40 > .col {padding-left:20px; padding-right:20px;}

.col1  {width:8.33333333%;}
.col2  {width:16.66666667%;}
.col3  {width:25%;}
.col4  {width:33.33333333%;}
.col5  {width:41.66666667%;}
.col6  {width:50%;}
.col7  {width:58.33333333%;}
.col8  {width:66.66666667%;}
.col9  {width:75%;}
.col10 {width:83.33333333%;}
.col11 {width:91.66666667%;}
.col12 {width:100%;}

/* flex box */
.flex {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;display:box;-webkit-flex-flow:row wrap;-webkit-justify-content:space-between;-webkit-box-pack: justify;box-pack: justify;justify-content:space-between;-webkit-align-content:center;align-content:center;-webkit-align-items:center;align-items:center;}
.flex.between {-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;}
/* .flex > * {-webkit-flex:1;flex:1;-webkit-box-flex:1;box-flex:1;} */
.flex > .fx1 {-webkit-flex:1;flex:1;-webkit-box-flex:1;box-flex:1;}
.flex > .fx2 {flex:2;}
.flex .fx_full {-webkit-flex:1 100%;flex:1 100%;}
.flex .fx_init {-webkit-flex:initial;flex:initial;}
.flex.between > * {-webkit-flex:initial;flex:initial;-webkit-box-flex:initial;box-flex:initial;}
.order1 {order:1;}
.order2 {order:2;}
.flex_stretch {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow: column;flex-flow: column;-webkit-align-items:stretch;align-items:stretch;}
.flex_wrap > * {width:100%;}

#skipNav {position:relative; z-index:9999;}
#skipNav a {display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:20px; color:#fff; font-weight:bold; background:#2466a6; white-space:nowrap; text-align:center;}
#skipNav a:focus, #skipNav a:active {height:auto; width:100%; padding:5px; margin-bottom:10px; position:absolute; left:0; top:0;}




@media screen and (max-width:960px) {
	input[type=text], input[type=tel], input[type=email] {height:2rem;padding:0 .5rem;font-size:0.875rem;}
	input[type="checkbox"] + label:before {width:1.375rem;height:1.375rem;margin-right:0.5625rem;}
	input[type="checkbox"] + label {font-size:0.9375rem;}
}
@media screen and (max-width:640px) {
	html, body {font-size:16px;}
}
@media screen and (max-width:480px) {
	html, body {font-size:13px;}
}
@media screen and (max-width:360px) {
	html, body {font-size:12px;}
}

@media screen and (max-width:320px) {
	html, body {font-size:11px;}
}