@font-face {
    font-family: NotoKR;
    src: local(NotoSansCJKKRThin),
         url(../font/NotoSansKR-Thin.woff2) format('woff2'),
         url(../font/NotoSansKR-Thin.woff) format('woff');
    font-weight: 100;
}
@font-face {
    font-family: NotoKR;
    src: local(NotoKR-Light),
         url(../font/NotoSansKR-Light.woff2) format('woff2'),
         url(../font/NotoSansKR-Light.woff) format('woff');
    font-weight: 200;
}
@font-face {
    font-family: NotoKR;
    src: local(NotoKR-DemiLight),
         url(../font/NotoSansKR-DemiLight.woff2) format('woff2'),
         url(../font/NotoSansKR-DemiLight.woff) format('woff');
    font-weight: 300;
}
@font-face {
    font-family: NotoKR;
    src: local(NotoKR-Regular),
         url(../font/NotoSansKR-Regular.woff2) format('woff2'),
         url(../font/NotoSansKR-Regular.woff) format('woff');
    font-weight: 400;
}
@font-face {
    font-family: NotoKR;
    src: local(NotoKR-Medium),
         url(../font/NotoSansKR-Medium.woff2) format('woff2'),
         url(../font/NotoSansKR-Medium.woff) format('woff');
    font-weight: 500;
}
@font-face {
    font-family: NotoKR;
    src: local(NotoKR-Bold),
         url(../font/NotoSansKR-Bold.woff2) format('woff2'),
         url(../font/NotoSansKR-Bold.woff) format('woff');
    font-weight: 700;
}
@font-face {
    font-family: NotoKR;
    src: local(NotoKR-Black),
         url(../font/NotoSansKR-Black.woff2) format('woff2'),
         url(../font/NotoSansKR-Black.woff) format('woff');
    font-weight: 800;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { margin: auto; }
body {
    overflow-x: hidden; font-family: NotoKR, "Apple SD Gothic Neo", Helvetica, sans-serif, Arial;color: #333;letter-spacing: -0.04em;
    word-break:keep-all;word-wrap:break-word;font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-variant-ligatures: none;-webkit-font-variant-ligatures: none;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-smoothing: antialiased;-webkit-font-smoothing: antialiased;
}
img { margin: 0; border: none; max-width: 100%; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
strong { font-weight: 500; }
button { font-family: inherit; background: none; border: none; cursor: pointer; outline: none; }
table { border-collapse: collapse; }
/* input { outline: none; -webkit-appearance: none; } */
input[type="password"] { font-family: NotoKR, Arial; }
input, textarea, select { font-family: inherit; padding-left: 10px; padding-right: 10px; background: #fff; border: 1px solid #e5e5e5; }
textarea { padding-top: 10px; padding-bottom: 10px; }
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
label{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
option { font-size: 16px; }
select{
    padding-right: 30px;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    background-image: url('/child/img/icon/select-arrow.png');
    background-color: #fff;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: right 10px center;
}
select::-ms-expand { display: none; }
select:focus { outline: none; }
@media (max-width:1366px) {
    select { background-size: 7px auto; background-position: right 9px center; }
}
::placeholder { color: #bbbbbb; }
:-ms-input-placeholder { color: #bbbbbb !important; }
::-ms-input-placeholder { color: #bbbbbb !important; }
::after, ::before { box-sizing:border-box; }
/* Remove Arrows & Spinners */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }






/* common */
.align-left { text-align: left !important; }
.align-right { text-align: right !important; }
.align-center { text-align: center !important; }


.b { font-weight: 500 !important; }


.wrap { }
.contents { padding: 80px 0 140px; }
.container { margin: auto; padding-right: 25px; padding-left: 25px; max-width: 1226px; width: 100%; }

.sp { display: none !important; }
.mo { display: none !important; }
@media (max-width:1024px) {
    .sp { display: block !important; }
}
@media (max-width:550px) {
    .pc { display: none !important; }
    .mo { display: block !important; }
}

[role="button"] { cursor: pointer; }

.centre { display: table; width: 100%; height: 100%; }
.centre .inner { display: table-cell; vertical-align: middle; }

.tab-menu { position: relative; margin-bottom: 115px; }
.tab-menu:after { content: ''; display: block; clear: both; }
.tab-menu > li { float: left; margin-left: -1px; width: 33.33333%; background-color: #fff; border: 1px solid #cccccc; }
.tab-menu > li:first-child { margin-left: 0; }
.tab-menu > li .button { display: block; position: relative; padding: 5px; width: 100%; height: 80px; text-align: center; color: #848484; font-size: 20px; font-weight: 500; }
.tab-menu > li .button::before{
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: #fff;
}
.tab-menu > li.on { position: relative; margin-top: 0; border-top: 1px solid #ff0000; border-color: #ff0000; }
.tab-menu > li.on .button { color: #333333; }
.tab-menu > li.on .button::before { background: #ff0000; }
.tab-menu > li .button:hover{
    color: #333;
}
.tab-contents { position: relative; }
.tab-contents > li { display: none; }
.tab-contents > li.on {
    display: block;
    animation: contents-on ease-out .65s forwards;
}
@-webkit-keyframes contents-on {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes contents-on {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width:1024px) {
    .tab-menu > li .button { height: 60px; font-size: 16px; }
}
@media (max-width:768px) {
    .tab-menu { margin-bottom: 65px; }
    .tab-menu > li .button { height: 50px; font-size: 14px; }
}





/* footer */
footer { padding: 40px 0 80px;  background: #1b1b1b; }
footer .container::after { content: ''; display: block; clear: both; }
.footer-link { float: left; }
.footer-link li { display: inline-block; vertical-align: top; position: relative; margin-right: 15px; padding-right: 15px; }
.footer-link li::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 1px; height: 13px; background: #5d5d5d; }
.footer-link li:last-child { margin-right: 0; padding-right: 0; }
.footer-link li:last-child::before { content: none; }
.footer-link li a { font-size: 16px; color: #fff; }
.footer-link li a:hover{
    opacity: .8;
}
.footer-copyright { float: right; font-size: 14px; color: #fff; font-weight: 700; }
@media (max-width:1024px) {
    footer { text-align: center; }
    .footer-link { float: none; }
    .footer-link li { margin-right: 12px; padding-right: 12px; }
    .footer-link li a { font-size: 14px; }
    .footer-link li::before { -webkit-transform: translateY(1px); transform: translateY(1px); }
    .footer-copyright { float: none; margin-top: 25px; font-size: 13px; }
}




/* contents */
.top-title { text-align: center; }
.top-title h1 { margin: 40px 0 90px; font-size: 40px; font-weight: 700; }

.title { text-align: center; font-size: 30px; font-weight: 700; }
.title--small { text-align: center; font-size: 26px; font-weight: 700; }
.sub-title { margin-top: 10px; line-height: 40px; text-align: center; font-size: 26px; font-weight: 700; }
.symbol { margin: 30px auto 35px; width: 10px; height: 10px; background: #ff0000; }

.pr p { margin: 10px 0; line-height: 32px; font-size: 16px; }
.pr--caution { margin-top: 35px; }
.pr--caution p { margin: 5px; line-height: 22px; font-size: 15px; color: #999; }
.pr--list p { display: flex; flex-wrap: wrap; }
.pr--list__txt { flex: 1 1; margin-left: 3px; }
.pr--bottom p { margin: auto; max-width: 950px; width: 100%; }

.hands { margin-top: 90px; padding: 70px 120px 65px; background: url('https://www.uniqlo.com/kr/compliance/images/hands.jpg') no-repeat top center; }
.hands ul { display: flex; justify-content: space-between; }
.hands ul li h3 { position: relative; margin-bottom: 50px; line-height: 38px; font-size: 50px; color: #fff; font-weight: 200; }
.hands ul li h3::before{
    content: ''; z-index: 1; position: absolute; top: 0; left: 2px;
    width: 10px; height: 10px; background: #ff0000;
}
.hands ul li h3 span { z-index: 2; position: relative; }
.hands ul li p { line-height: 32px; font-size: 18px; color: #fff; font-weight: 500; }

.grid { display: flex; }
@media (min-width:550px) {
    .grid--center { justify-content: center; }
}
.grid .col-12 { padding: 10px; width: 50%; }
.row { }
.row--bottom { margin: 100px 0 0; }
.row--bottom-dashed { padding-bottom: 5px; border-bottom: 1px dashed #ebebeb; }
.row .inner { padding: 0 50px; }

.box { margin: 25px 0; padding: 35px 45px; min-height: 220px; background: #f8f9ff; }
.box__item { display: flex; margin: 0 30px; }
.box__item .box__title { margin-top: -5px; margin-right: 15px; line-height: 40px; }
.box__title { margin-bottom: 10px; font-size: 18px; font-weight: 700; }
.box__p { line-height: 30px; font-size: 16px; }
.box__p .button-line { margin-top: 15px; }
.box-top { margin-bottom: 35px; padding-bottom: 30px; text-align: center; border-bottom: 1px dashed #d7d7d7; }
.box-top__title { font-size: 24px; font-weight: 700; }

.head-block { display: flex; margin-bottom: 60px; }
.head-block:last-child { margin-bottom: 0; }
.head-block__title { flex-basis: 210px; line-height: 36px; font-size: 17px; font-weight: 700; }
.head-block__contents { flex: 1 1; }
.head-block__contents p { margin: 0; }
.head-block__contents .button{
    overflow: hidden; display: inline-block; position: relative; margin-top: 25px; padding: 0 20px;
    width: 200px; height: 45px; line-height: 43px;
    font-size: 16px; font-weight: 500;
    border: 1px solid #ff0000;
}
.head-block__contents .button span { z-index: 2; position: relative; }
.head-block__contents .button::before{
    content: ''; z-index: 2; position: absolute; top: 0; right: 20px; bottom: 0;
    margin: auto; width: 17px; height: 17px;
    background: url('https://image.uniqlo.com/UQ/ST3/kr/imagesother/Webnews/compliance/button-download.png');
    -webkit-transition: all .3s ease-out; transition: all .3s ease-out;
}
.head-block__contents .button::after{
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: #ff0000;
    -webkit-transition: all .3s ease-out; transition: all .3s ease-out;
}
.head-block__contents .button:hover{
    color: #fff;
}
.head-block__contents .button:hover::before{
    background: url('https://image.uniqlo.com/UQ/ST3/kr/imagesother/Webnews/compliance/button-download-on.png');
}
.head-block__contents .button:hover::after{
    width: 100%;
}

.button-line{
    overflow: hidden; display: inline-block; position: relative;
    padding: 0 20px; height: 45px; line-height: 43px; text-align: center; font-size: 16px;
    background: #fff; border: 1px solid #ff0000;
}
.button-line::after{
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: #ff0000;
    -webkit-transition: all .3s ease-out; transition: all .3s ease-out;
}
.button-line span { z-index: 2; position: relative; }
.button-line:hover{
    color: #fff; font-weight: 500;
}
.button-line:hover::after{
    width: 100%;
}
@media (max-width:1024px) {
    .top-title img { width: 55px; height: auto; }
    .top-title h1 { margin: 35px 0 60px; font-size: 30px; }

    .title { font-size: 22px; }
    .sub-title { line-height: 30px; font-size: 20px; }
    .symbol { margin: 20px auto 30px; width: 8px; height: 8px; }

    .pr p { line-height: 26px; font-size: 14px; }
    .pr--caution p { line-height: 20px; font-size: 13px; }

    .hands { margin-top: 90px; padding: 50% 45px 45px; background: url('https://image.uniqlo.com/UQ/ST3/kr/imagesother/Webnews/compliance/hands-mo.jpg') no-repeat top center / cover; }
    .hands ul { flex-flow: column; }
    .hands ul li { margin-bottom: 35px; }
    .hands ul li:last-child { margin-bottom: 0; }
    .hands ul li h3 { margin-bottom: 22px; line-height: 22px; font-size: 30px; }
    .hands ul li h3::before { width: 6px; height: 6px; }
    .hands ul li p { line-height: 24px; font-size: 15px; }

    .grid { flex-wrap: wrap; }
    .grid .col-12 { padding-right: 0; padding-left: 0; width: 100%; }

    .row--bottom { margin-top: 80px; }
    .row .inner { padding: 0 25px; }

    .box { margin: 20px 0; padding: 30px; min-height: auto; }
    .box__title { line-height: 26px; font-size: 15px; }
    .box__p { line-height: 26px; font-size: 15px; }
    .box__item { margin: 5px 0; min-width: 420px; }
    .box-top__title { font-size: 18px; }
    .head-block__title { font-size: 18px; }

    .button-line { padding: 0 15px; height: 40px; line-height: 40px; font-size: 13px; }
}
@media (max-width:768px) {
    .contents { padding: 80px 0 100px; }

    .top-title img { width: 40px; }
    .top-title h1 { margin: 25px 0 40px; font-size: 24px; }

    .title { font-size: 18px; line-height: 26px; }
    .sub-title { font-size: 16px; }

    .pr p { line-height: 180%; font-size: 15px; }
    .pr--caution { margin-top: 25px; }

    .row--bottom { margin-top: 50px; }
    .row .inner { padding: 0 15px; }

    .head-block { flex-wrap: wrap; }
    .head-block__title { width: 100%; font-size: 14px; }
    .head-block__contents { flex: auto; padding-top: 30px; }
    .head-block__contents .button { width: 180px; height: 40px; line-height: 40px; font-size: 13px; }
    .head-block__contents .button::before { width: 13px; height: 13px; background-size: auto 13px; }
}
@media (max-width:550px) {
    .box__item { flex-wrap: wrap; margin: 20px 0; min-width: auto; }
    .box__item:first-child { margin-top: 0; }
    .box__item:last-child { margin-bottom: 0; }
    .box__item .box__title { margin-top: -7px; width: 100%; line-height: 20px; }
    .box__item .box__p { width: 100%; }

    .box__p .button-line { margin-top: 0; }
}