/* 공통 */ 
/*
.btn {display: inline-block; text-align: center; text-decoration: none; border-radius:100px; position: relative; vertical-align: middle;}
.btn.blue {background-color:#02308b; color:#fff;}
.btn.gray {background-color:#454545; color:#fff; line-height: 43px; padding:0 35px; height: 45px;}
.btn.gray-line {border:2px solid #454545; color:#454545; line-height:36px; padding:0 20px; height: 36px;}
.gnb {display: block; position: absolute; top: 0; left: 0; height: 165px; max-width:1920px; width:100%; margin:0 auto; z-index:9999; background:url('/eSIM/img/common/bg_gnb.jpg') 50% 0 no-repeat;  }
.gnb h1 {width:110px; height: 75px; }
.gnb h1 a {display: inline-block;font-size: 0; text-indent: -9999px; width:110px; height: 75px; background:url('/eSIM/img/common/logo.png') no-repeat; vertical-align: top; margin-top: 50px;}
.gnb .lang {position: absolute; top:18px; right: 0;}
.gnb .lang li {display: inline-block; margin:0 10px; vertical-align: middle; position: relative;}
.gnb .lang li a {font-size: 13px; color:#000; text-decoration: none;}
.gnb .lang li.on a {color:#05a4bc; font-weight: bold; padding:0 9px; border:2px solid #05a4bc; border-radius:30px; } 
.gnb .menu {position: absolute; left: 243px; top: 59px; width: 837px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
.gnb .menu > li {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; font-size: 22px; width: 25%; text-align: center;  position: relative; align-items: center; justify-content: center; height:106px; position: relative;}
.gnb .menu > li:first-of-type {margin-left: 0;}
.gnb .menu > li > a {color:#fff; text-decoration: none;}
.gnb .menu > li > a:before {content:''; display: block; width:6px; height: 6px; background-color:#fff; border-radius:6px; position: absolute; top: 25px; left:calc(50% - 3px); opacity:0; transition:all 0.1s ease-in-out 0s;}
.gnb .menu > li.on > a, 
.gnb .menu > li > a:hover {font-weight: bold; }
.gnb .menu > li.on > a:before,
.gnb .menu > li > a:hover:before {top: 30px; opacity:1;}
.gnb .menu > li.hasSub .depth2 {display: none; position: absolute; top: 96px; left: calc(50% - 84px); width:168px; height: 57px; border-radius:5px; background-color:#fff; color:#05a4bc; font-size: 20px; align-items: center; justify-content: center;}
.gnb .menu > li.hasSub:hover .depth2 {display: flex;}
.gnb .btn:after {content:''; display: block; width:6px; height:6px; border-top:2px solid #fff; border-right:2px solid #fff; transform: rotate(45deg); position: absolute;right: 30px; top: calc(50% - 3px);}
.gnb .btn{width:190px; padding:10px 5px 10px 0; box-shadow:-5px 5px 5px rgba(4,143,166,.9); position: absolute; right: 0; top: 94px;}
*/
body.pc .inner {width:1200px; margin:0 calc(50% - 600px); display: inline-block; padding:0 20px; box-sizing: border-box; position: relative;}
body.pc header {display: block; width: 100%; max-width: 1920px; position: absolute; top: 0; z-index:9; }
body.pc header > h1 {display: block; width:81px; height:80px; background:url('/ib/img/common/w/gnb_logo.png') no-repeat; font-size: 0; text-indent: -9999px; position: absolute; left: 50px; top: 0; z-index:10;}
body.pc header > h1 a {display: block; width:81px; height:80px;}
body.pc header:hover > h1, 
body.pc header.on > h1 {background-position: -82px 0;}
body.pc header:before {content:''; background-color:rgba(255,255,255,0); display: block; width: 100%; transition:all 0.2s ease; }
body.pc header.mouseIn:before {height: 80px; opacity:1;background-color:rgba(255,255,255,0.9); position: absolute; top: 0; left: 0; }
body.pc header .gnb {position: absolute; top: 0; width: 100%;}
body.pc header .depth1 {width: 100%; display: block;}
body.pc header .depth2 {}
body.pc header .gnb .menu { height:80px; line-height: 80px; margin-left: 133px;}
body.pc header .gnb .menu > li {float: left; margin-left: 65px; position: relative;}
body.pc header .gnb .menu > li a {font-size: 20px; font-family: 'Roboto','ns', sans-serif; text-decoration: none; color:#fff; font-weight: 400; display: block;}
body.pc header.on .gnb {height:80px;}
body.pc header.on .gnb .menu > li a,
body.pc header:hover .gnb .menu > li a {color:#000;}
body.pc header .gnb .menu > li.on:after,
body.pc header .gnb .menu > li:hover:after {content:''; display: block; width:100%; height:2px; background-color:#0d0d0d; position: absolute; bottom:0; left: 0; }
body.pc header .gnb .depth2 {height: 0; width: 100%; transition:all 0.2s ease; border:0; opacity:0;}
body.pc header .gnb .depth2 ul {display: none;}
body.pc header .gnb .depth2.on.esim ul {position: absolute; top: 80px; left:170px; z-index: 10;}
body.pc header .gnb .depth2.on.sim ul {position: absolute; top: 80px; left:170px; z-index: 10;}
body.pc header .gnb .depth2.on.router ul {position: absolute; top: 80px; left:330px; z-index: 10;}
body.pc header .gnb .depth2.on.contact ul {position: absolute; top: 80px; left:500px; z-index: 10;}
body.pc header .gnb .depth2.on:after {content:''; height:90px;  line-height: 90px; opacity:1;}
body.pc header .gnb .depth2:after {content:''; display: block; width: 100%; max-width:1920px; height:0; background-color:#fff; position: absolute; left: 0; top: 80px; z-index: 1; opacity:0; transition:all 0.2s ease; border-top:1px solid #e6e5e6; border-bottom:1px solid #e6e5e6;}
body.pc header .gnb .depth2.on {height: 90px; opacity:1;}
body.pc header .gnb .depth2.on ul {display: block;}

body.pc header .gnb .depth2 li {float: left; text-align: center; margin:0 30px;}
body.pc header .gnb .depth2 li a { font-size: 16px; color:#555555; font-weight: 400; line-height: 90px; text-decoration: none;}
body.pc header .gnb .depth2 li a:hover, header .gnb .depth2.on {color:#222; font-weight: 900	}
body.pc header .gnb .lang {position: absolute; right:56px; top:24px; display: flex; border:1px solid #629f99; border-radius:4px; }
body.pc header .gnb  .lang li {display: flex; height:30px; font-family: "Roboto"; font-size:12px; padding:0; background-color:rgba(255,255,255,0.1); flex-direction:row; cursor:pointer; align-items: center; justify-content: center;   }
body.pc header .gnb  .lang li.on, body.pc header .gnb  .lang li:hover {background-color:rgba(98,159,153,1);}
body.pc header .gnb  .lang li a {color:#629f99; text-decoration: none; padding:0 8px; height:30px; display: flex; align-items: center;}
body.pc header .gnb  .lang li:hover a, body.pc header .gnb  .lang li.on a, body.pc header .gnb  .lang li a:hover {color:#fff;}
body.pc header.mouseIn .gnb .lang {border-color:#606161;}
body.pc header.mouseIn .gnb  .lang li.on, body.pc header .gnb  .lang li:hover {background-color:#606161;}
body.pc header.mouseIn .gnb  .lang li a {color:#222222; }
body.pc header.mouseIn .gnb  .lang li:hover a, body.pc header.mouseIn .gnb  .lang li.on a, body.pc header .gnb  .lang li a:hover {color:#fff;}

html[lang=en] body.pc header .gnb .depth2 li { display: inline-flex; align-items: center; height: 90px;}
html[lang=en] body.pc header .gnb .depth2 li a {line-height: 20px;}
html[lang=en] body.pc .footer .footerTxt > a:nth-of-type(2):after,
html[lang=zh-CN] body.pc .footer .footerTxt > a:nth-of-type(2):after,
html[lang=ja] body.pc .footer .footerTxt > a:nth-of-type(2):after {display: none !important;}

body.pc .footer {background-color:#333333; color:#fff; padding:43px 0 80px; max-width:1920px; margin:0 auto}
body.pc .footer .inner {position: relative;}
body.pc .footer .footerTxt {display: block; font-size: 14px;line-height: 24px; letter-spacing: initial;}
body.pc .footer .footerTxt b {margin:0 12px; color:#969696;}
body.pc .footer .footerTxt > a {display: inline-block; text-decoration: none; color:#fff; font-size: 19px; padding:0 23px 53px; position: relative;}
body.pc .footer .footerTxt > a strong { font-weight: 900;}
body.pc .footer .footerTxt > a:before, .footer .footerTxt > a:after {content:''; display: none; width:1px; height:14px; background-color:#969696; position: absolute; top:3px;}
body.pc .footer .footerTxt > a:nth-of-type(2):before {left:0; display: block;}
body.pc .footer .footerTxt > a:nth-of-type(2):after {right:0; display: block; width: 1px;}
body.pc .footer .footerTxt > a:first-of-type {padding-left: 0;}
body.pc .footer .copyright {color:#afafaf; margin-top:15px; display: inline-block; font-weight: 900;}
body.pc .footer .inner:after {content:''; display: block; width:90px; height:61px; background:url('/ib/img/common/w/footer_logo.png') no-repeat; position: absolute; right: 30px; bottom: 0;}

html[lang=en] body.pc header .gnb .depth2 li { display: inline-flex; align-items: center; height: 90px;}
html[lang=en] body.pc header .gnb .depth2 li a {line-height: 20px;}
html[lang=en] body.pc .footer .footerTxt > a:nth-of-type(2):after,
html[lang=zh-CN] body.pc .footer .footerTxt > a:nth-of-type(2):after,
html[lang=ja] body.pc .footer .footerTxt > a:nth-of-type(2):after {display: none !important;}

/* 모바일 */
body.mobile header { width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index:100; font-family: 'Roboto', 'ns';}
body.mobile header .top {height:17.5vw;}
body.mobile header h1 { display: inline-block; }
body.mobile header h1 a {font-size: 0; text-indent: -999px; display: inline-block; width:16vw; height: 10.47vw; background:url('/ib/img/common/m/logo_w.png') no-repeat; background-size:contain; position: absolute; left:3.125vw; top:3.6vw; }
body.mobile header.on h1 a { background:url('/ib/img/common/m/logo_b.png') no-repeat; background-size:cover; }
body.mobile header.on {background-color:rgba(0,0,0,0.8);}
body.mobile header .gnb > ul {display: none;}
body.mobile header.on .gnb > ul {display: block;}
body.mobile header.on .gnb > ul > li {display: block; /*height: 13.75vw; */line-height: 13.75vw; background-color:#fff;  border-bottom:1px solid #e3e4e4; position: relative;}
body.mobile header.on .gnb > ul > li > a:after {content:''; display: block; width:1.5vw; height:1.5vw; border-right:0.8vw solid #05a4bc; border-bottom:0.8vw solid #05a4bc; transform:rotate(-45deg); position: absolute; right: 7vw; top: 6vw;}
body.mobile header.on .gnb > ul > li.open { background-color:#09a4c0; border-bottom:0;}
body.mobile header.on .gnb > ul > li.open > a { color:#fff; box-shadow:0 2vw 3vw rgba(0,0,0,0.2); position: relative; z-index: 10;}
body.mobile header.on .gnb > ul > li.open > a:after {border-right:0.8vw solid #fff; border-bottom:0.8vw solid #fff; transform:rotate(45deg); position: absolute; right: 7vw; top: 6vw;}
body.mobile header.on .gnb > ul > li > a {color:#222222; font-size: 4.6875vw; font-weight: 900; text-decoration: none; padding: 0 7.1875vw ; display: block; }
body.mobile header.on .gnb > ul > li > ul {display: none; border-top:1px solid #0793ac; }
body.mobile header.on .gnb > ul > li > ul.on {display: block;}
body.mobile header.on .gnb > ul > li > ul > li { background-color:#e3e4e4; border-bottom:1px solid #b6b6b6; position: relative;}
body.mobile header.on .gnb > ul > li > ul > li a { color:#222222; display: block; font-size: 4.1vw; font-weight: 700;  padding:0 7.1875vw; text-decoration: none;}
body.mobile header.on .gnb > ul > li > ul > li:after {content:''; display: block; width:1.5vw; height:1.5vw; border-right:0.8vw solid #05a4bc; border-bottom:0.8vw solid #05a4bc; transform:rotate(-45deg); position: absolute; right: 7vw; top: 6vw;}
body.mobile header .language {display: inline-block; padding:1.4vw 5vw 1.25vw 2.5vw; background-color:#629f99; color:#fff; font-weight: 700; font-size: 3vw; border-radius:0.5vw; text-decoration: none; position: absolute; top: 6vw; right:17.65625vw; letter-spacing: 0;}
body.mobile header .language:after {content:''; display: block; width:1vw; height: 1vw; border-right:0.3vw solid #fff; border-bottom:0.3vw solid #fff; transform:rotate(45deg); position: absolute; top: 1.875vw; right:1.7vw;}
body.mobile header .menu-trigger { display: block; width:6.875vw; height:5.47vw; position: absolute; right: 3.125vw; top:6.1vw; }
body.mobile header .menu-trigger span {display: block; font-size: 0; width:100%; height:2px; background-color:#fff; position: absolute; top: 2.7vw; left: 0; }
body.mobile header .menu-trigger:before {content:'';  display: block; width:100%; height:2px; background-color:#fff; position: absolute; top: 0; left: 0; bottom:100%;}
body.mobile header .menu-trigger:after {content:'';  display: block; width:100%; height:2px; background-color:#fff; position: absolute; bottom: 0; left: 0; top:100%;}
body.mobile header .menu-close { width:6.875vw; height:6.875vw; display: none; position: absolute; right: 3.125vw; top:5.6vw;}
body.mobile header .menu-close span {font-size: 0; display: block; position: relative; width: 100%; height: 100%;}
body.mobile header .menu-close span:before {content:''; display: block; width:9vw; height:2px; background-color:#222222; transform:rotate(-45deg); position: absolute; left: calc(50% - 4.5vw); top: calc(50% - 0.55vw);}
body.mobile header .menu-close span:after {content:''; display: block; width:9vw; height:2px; background-color:#222222; transform:rotate(45deg); position: absolute; right: calc(50% - 4.5vw); top: calc(50% - 0.55vw);}
body.mobile header.on .menu-trigger {display: none;}
body.mobile header.on .language {background-color:#606161; color:#fff;}
body.mobile header.on .top {background-color:rgba(255,255,255,0.9);}
body.mobile header.on .menu-close {display: block;}
body.mobile header .langSelect {display: none; position: absolute; top:0; left: 0; width: 100%; height: 0; z-index: 100; }
body.mobile header .langSelect.on {background-color:rgba(0,0,0,0.8); display: block; }
body.mobile header .langSelect .langSelBox {position: fixed; bottom:-50%; left: 0; animation: forwards 0.4s languageSel; transition:all 0.3s ease-in-out; background-color:#fff; border-radius:4.6875vw 4.6875vw 0 0; padding:20px;  width: 100%; box-sizing: border-box;}
body.mobile header .langSelect.on .langSelBox { bottom:0;  }
body.mobile header .langSelect.on .langSelBox .title { position: relative; }
body.mobile header .langSelect.on .langSelBox .title strong {font-size: 18px; font-weight: 700; color:#222222; display: block; margin-bottom: 2vw;}
body.mobile header .langSelect.on .langSelBox .title span {color:#939496; font-size: 14px; font-weight: 400;}
body.mobile header .langSelect.on .langSelBox .select {padding:20px 0; position: relative;}
body.mobile header .langSelect.on .langSelBox .select .lang {display: block;}
body.mobile header .langSelect.on .langSelBox .select li { display: block; text-align: center; width: 100%; border-bottom:1px ; border-top:1px solid #e1e1e1; height:40px; padding:10px 0; box-sizing: border-box;}
body.mobile header .langSelect.on .langSelBox .select li:last-child {border-bottom:1px solid #e1e1e1;}
body.mobile header .langSelect.on .langSelBox .select li a { display: block; font-size: 22px; text-decoration: none;  color:#a9a9a9;}
body.mobile header .langSelect.on .langSelBox .select li.on a {color:#222; }
body.mobile header .langSelect.on .langSelBox .confirm {display: block; background-color:#09a4c0; color:#fff; font-size:16px ; font-weight: 700; text-align: center; width: 100%; margin:0 auto; font-family: "Noto"; padding:10px 0; border:0; border-radius:3px;}
body.mobile header .langSelect.on .langSelBox .closeThis { font-size: 0; display: block; width:20px; height:20px; position: absolute; right: 0; top: 0; }
body.mobile header .langSelect.on .langSelBox .closeThis:before {content:''; display: block; width:20px; height:2px; background-color:#222222; transform:rotate(-45deg); position: absolute; left: calc(50% - 10px); top: calc(50% - 1px);}
body.mobile header .langSelect.on .langSelBox .closeThis:after {content:''; display: block; width:20px; height:2px; background-color:#222222; transform:rotate(45deg); position: absolute; right: calc(50% - 10px); top: calc(50% - 1px);}

body.mobile .footer {background-color:#333333; color:#fff; padding:5.9vw 0 11.875vw; letter-spacing: -0.5px; font-family: 'Roboto', 'ns';}
body.mobile .footer .inner {position: relative; padding:0 3.125vw;}
body.mobile .footer .footerTxt {display: block; font-size: 3vw ;line-height: 5.16vw; letter-spacing: initial;}
body.mobile .footer .footerTxt:nth-of-type(2),
body.mobile .footer .footerTxt:nth-of-type(3) { width:90vw; word-break: keep-all; }
body.mobile .footer .footerTxt b {margin:0 1.875vw; color:#969696;}
body.mobile .footer .footerTxt > a {display: inline-block; text-decoration: none; color:#fff; font-weight: 700; font-size: 3.4vw; padding:0 3.125vw 5vw; position: relative;}
body.mobile .footer .footerTxt > a strong { font-weight: 900;}
body.mobile .footer .footerTxt > a:before, .footer .footerTxt > a:after {content:''; display: none; width:0.15625vw; height:14px; background-color:#969696; position: absolute; top:3px;}
body.mobile .footer .footerTxt > a:nth-of-type(2):before {left:0; display: block;}
body.mobile .footer .footerTxt > a:nth-of-type(2):after {right:0; display: block;}
body.mobile .footer .footerTxt > a:first-of-type {padding-left: 0;}
body.mobile .footer .copyright {color:#afafaf; font-size: 3.8vw;margin-top:4.68vw; display: inline-block; font-weight: 900;}
body.mobile .footer .inner:after {content:''; display: block; width:17.1875vw; height:11.5625vw; background:url('/ib/img/common/w/footer_logo.png') no-repeat; background-size:cover; position: absolute; right: 3.125vw; bottom: 0;}
html[lang=en] body.mobile .footer .footerTxt > a {padding:0 1vw 5vw; letter-spacing: -0.5px;}
html[lang=en] body.mobile .footer .footerTxt > a:first-of-type {padding-right: 0;}
html[lang=en] body.mobile .footer .footerTxt:nth-of-type(2),
html[lang=en] body.mobile .footer .footerTxt:nth-of-type(3) { width:80vw; word-break: keep-all; }
/*html[lang=ja] body.mobile .footer .footerTxt:nth-of-type(2),*/
html[lang=ja] body.mobile .footer .footerTxt:nth-of-type(3) { width:80vw; letter-spacing: -0.5px;	}
html[lang=en] body.mobile .footer .footerTxt > a:nth-of-type(2):after,
html[lang=zh-CN] body.mobile .footer .footerTxt > a:nth-of-type(2):after,
html[lang=ja] body.mobile .footer .footerTxt > a:nth-of-type(2):after {display: none !important;}
.breadcrumb { visibility: hidden; height: 1px; width: 1px; position: absolute; top: -1000%; left: -1000%; }


@keyframes languageSel {
  from {  bottom: -50%}
  to { bottom: 0;}
}